504 行
26 KiB
HTML
可执行文件
504 行
26 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--[1.8.80]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app" v-cloak style="padding: 20px;">
|
||
<el-form label-width="100px">
|
||
<el-form-item label="模板名称">
|
||
<el-input v-model="temTitle" maxlength="20" size="small" placeholder="请输入添加模板名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="计费方式">
|
||
<el-radio v-model="radio" label="1" @change="radioChange()">免运费</el-radio>
|
||
<el-radio v-model="radio" label="2" @change="radioChange()">按件数</el-radio>
|
||
<el-radio v-model="radio" label="3" @change="radioChange()">按重量</el-radio>
|
||
<el-radio v-model="radio" label="4" @change="radioChange()">统一运费</el-radio>
|
||
</el-form-item>
|
||
<el-form-item label="配送区域">
|
||
<template v-if="this.radio==1">
|
||
<table border="0" cellspacing="0" cellpadding="0" class="layui-table">
|
||
<tr>
|
||
<th style="text-align: center">配送区域</th>
|
||
<th style="width: 100px;text-align: center">操作</th>
|
||
</tr>
|
||
<tbody v-for="(item, i) in areaData">
|
||
<tr>
|
||
<td style="text-align: center"><span v-for="(v ,k) in item.maplistlabel">{{v}} </span>
|
||
</td>
|
||
<td style="text-align: center">
|
||
|
||
<el-popover
|
||
placement="right"
|
||
width="550"
|
||
trigger="click">
|
||
|
||
<el-cascader-panel
|
||
:options="province"
|
||
:props="props"
|
||
:show-all-levels="true"
|
||
:ref="`myCascader`+i"
|
||
@change="getadd(i)"
|
||
></el-cascader-panel>
|
||
<el-button type="text" size="mini" slot="reference" @click="isCheck(i)">编辑地区
|
||
</el-button>
|
||
</el-popover>
|
||
<el-button type="text" @click="Delete(i)" size="mini" plain>删除</el-button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
|
||
<!--按件数-->
|
||
<template v-else-if="this.radio==2">
|
||
|
||
<table border="0" cellspacing="0" cellpadding="0" class="layui-table">
|
||
<tr>
|
||
<th style="text-align: center">配送区域</th>
|
||
<th style="text-align: center; width: 100px">首件（件）</th>
|
||
<th style="text-align: center; width: 100px">运费（元）</th>
|
||
<th style="text-align: center; width: 100px">续件（件）</th>
|
||
<th style="text-align: center; width: 100px">续费（元）</th>
|
||
<th style="width: 100px;text-align: center">操作</th>
|
||
</tr>
|
||
<tbody v-for="(item, i) in areaData">
|
||
<tr>
|
||
<td style="text-align: center"><span v-for="(v ,k) in item.maplistlabel">{{v}} </span>
|
||
</td>
|
||
<td style="text-align: center; width: 100px">
|
||
<el-input v-model="item.first_num" maxlength="3"
|
||
oninput="this.value=this.value.replace(/\D/g,'')"></el-input>
|
||
</td>
|
||
<td style="text-align: center; width: 100px">
|
||
<el-input v-model="item.first_fee" maxlength="6"
|
||
oninput="this.value=(this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]"></el-input>
|
||
</td>
|
||
<td style="text-align: center; width: 100px">
|
||
<el-input v-model="item.append_num" maxlength="3"
|
||
oninput="this.value=this.value.replace(/\D/g,'')"></el-input>
|
||
</td>
|
||
<td style="text-align: center; width: 100px">
|
||
<el-input v-model="item.append_fee" maxlength="6"
|
||
oninput="this.value=(this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]"></el-input>
|
||
</td>
|
||
<td style="text-align: center; width: 100px">
|
||
<el-popover
|
||
placement="right"
|
||
width="550"
|
||
trigger="click">
|
||
|
||
<el-cascader-panel
|
||
:options="province"
|
||
:props="props"
|
||
:show-all-levels="true"
|
||
:ref="`myCascader`+i"
|
||
@change="getadd(i)"
|
||
></el-cascader-panel>
|
||
<el-button type="text" size="mini" slot="reference" @click="isCheck(i)">编辑地区
|
||
</el-button>
|
||
</el-popover>
|
||
<el-button type="text" @click="Delete(i)" size="mini" plain>删除</el-button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
|
||
<!--按重量-->
|
||
<template v-else-if="this.radio==3">
|
||
<table border="0" cellspacing="0" cellpadding="0" class="layui-table">
|
||
<tr>
|
||
<th style="text-align: center">配送区域</th>
|
||
<th style="text-align: center; width: 100px">首重（kg）</th>
|
||
<th style="text-align: center; width: 100px">运费（元）</th>
|
||
<th style="text-align: center; width: 100px">续重（kg）</th>
|
||
<th style="text-align: center; width: 100px">续费（元）</th>
|
||
<th style="width: 100px;text-align: center">操作</th>
|
||
</tr>
|
||
<tbody v-for="(item, i) in areaData">
|
||
<tr>
|
||
<td style="text-align: center"><span v-for="(v ,k) in item.maplistlabel">{{v}} </span>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-input v-model="item.first_num" maxlength="3"
|
||
oninput="this.value=this.value.replace(/\D/g,'')"></el-input>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-input v-model="item.first_fee" maxlength="6"
|
||
oninput="this.value=(this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]"></el-input>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-input v-model="item.append_num" maxlength="3"
|
||
oninput="this.value=this.value.replace(/\D/g,'')"></el-input>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-input v-model="item.append_fee" maxlength="6"
|
||
oninput="this.value=(this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]"></el-input>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-popover
|
||
placement="right"
|
||
width="550"
|
||
trigger="click">
|
||
|
||
<el-cascader-panel
|
||
:options="province"
|
||
:props="props"
|
||
:show-all-levels="true"
|
||
:ref="`myCascader`+i"
|
||
@change="getadd(i)"
|
||
></el-cascader-panel>
|
||
<el-button type="text" size="mini" slot="reference" @click="isCheck(i)">编辑地区
|
||
</el-button>
|
||
</el-popover>
|
||
<el-button type="text" @click="Delete(i)" size="mini" plain>删除</el-button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
|
||
<!--统一运费-->
|
||
<template v-else-if="this.radio==4">
|
||
<table border="0" cellspacing="0" cellpadding="0" class="layui-table">
|
||
<tr>
|
||
<th style="text-align: center">配送区域</th>
|
||
<th style="text-align: center;width: 100px">统一运费</th>
|
||
<th style="width: 100px;text-align: center">操作</th>
|
||
</tr>
|
||
<tbody v-for="(item, i) in areaData">
|
||
<tr>
|
||
<td style="text-align: center"><span v-for="(v ,k) in item.maplistlabel">{{v}} </span>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-input v-model="item.unified_fee" maxlength="6"
|
||
oninput="this.value=(this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]"></el-input>
|
||
</td>
|
||
<td style="text-align: center">
|
||
<el-popover
|
||
placement="right"
|
||
width="550"
|
||
trigger="click">
|
||
|
||
<el-cascader-panel
|
||
:options="province"
|
||
:props="props"
|
||
:show-all-levels="true"
|
||
:ref="`myCascader`+i"
|
||
@change="getadd(i)"
|
||
></el-cascader-panel>
|
||
<el-button type="text" size="mini" slot="reference" @click="isCheck(i)">编辑地区
|
||
</el-button>
|
||
</el-popover>
|
||
<el-button type="text" @click="Delete(i)" size="mini" plain>删除</el-button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="AddForm" size="mini">添加</el-button>
|
||
<el-button @click="radioChange" size="mini">删除所有</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="medium" @click="refer">提交</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript">
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
radio: '1',
|
||
props: {multiple: true, checkStrictly: true},
|
||
province: [],
|
||
list: [],
|
||
temBillingModel: '',
|
||
temTitle: '',
|
||
areaData: [
|
||
{
|
||
type: '',
|
||
area_id: [], //区域ID 格式 #2#,#12#,#14#
|
||
first_num: '', //首件 / 首重：temBillingModel为2或3时必赋值
|
||
first_fee: '', //运费：temBillingModel为2或3时必赋值
|
||
append_num: '1', //续件 / 续重：temBillingModel为2或3时必赋值
|
||
append_fee: '0', //续费：temBillingModel为2或3时必赋值
|
||
unified_fee: '', //统一运费：temBillingModel为4时必赋值
|
||
maplistlabel: [],
|
||
map: [],
|
||
},
|
||
],
|
||
}
|
||
},
|
||
|
||
//首加载
|
||
mounted: function () {
|
||
this.getTestApi();
|
||
},
|
||
|
||
methods: {
|
||
handInput: function (e) {
|
||
console.log(e);
|
||
},
|
||
|
||
|
||
//获取后台省、市、区封装数据
|
||
getTestApi: function () {
|
||
$.ajax({
|
||
url: '/index.php/Retail/SystemDelivery/map',
|
||
type: 'post',
|
||
dataType: 'json',
|
||
success: res => {
|
||
this.province = res.data.map;
|
||
}
|
||
})
|
||
},
|
||
/*
|
||
*添加前端选择点击的城市
|
||
* maplistlabel：显示本页面的选择省、市、区的名称
|
||
* area_id：传向后端进行封装数据保存数据库的城市id
|
||
* map：传在该数组，进行循环查，如果有该数组的数据，进行下面的不可选处理方法
|
||
*/
|
||
getadd: function (index) {
|
||
var that = this;
|
||
that.areaData.forEach(function (item, i) {
|
||
if (i == index) {
|
||
item.maplistlabel = [];
|
||
item.area_id = [];
|
||
item.map = [];
|
||
let gv = `myCascader${i}`;
|
||
that.list = that.$refs[gv][0].getCheckedNodes();
|
||
that.list.forEach(function (c) {
|
||
if ((c.level == 1 || c.level == 2 || c.level == 3) && c.checked == true) {
|
||
that.areaData[i].maplistlabel.push(c.label);
|
||
that.areaData[i].area_id.push('#' + c.value + '#');
|
||
that.areaData[i].map.push(c.value);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
//根据后端所需数据进行添加，由保存一条数据变为保存多条数据
|
||
AddForm() {
|
||
var that = this;
|
||
that.areaData.push({
|
||
type: that.radio,
|
||
area_id: [], //区域ID 格式 #2#,#12#,#14#
|
||
first_num: '', //首件 / 首重：temBillingModel为2或3时必赋值
|
||
first_fee: '', //运费：temBillingModel为2或3时必赋值
|
||
append_num: '1', //续件 / 续重：temBillingModel为2或3时必赋值
|
||
append_fee: '0', //续费：temBillingModel为2或3时必赋值
|
||
unified_fee: '', //统一运费：temBillingModel为4时必赋值
|
||
maplistlabel: [],
|
||
map: [],
|
||
});
|
||
},
|
||
|
||
//删除该条数据，并释放该条数据所选的地区
|
||
Delete(index) {
|
||
var that = this;
|
||
for (let j = 0; j < that.areaData[index].map.length; j++) {
|
||
for (var k = 0; k < that.province.length; k++) {
|
||
if (that.province[k].value === that.areaData[index].map[j]) {
|
||
|
||
that.$set(that.province[k], 'disabled', false);
|
||
continue;
|
||
}
|
||
for (let l = 0; l < that.province[k].children.length; l++) {
|
||
if (that.province[k].children[l].value === that.areaData[index].map[j]) {
|
||
that.$set(that.province[k].children[l], 'disabled', false);
|
||
continue;
|
||
}
|
||
for (let a = 0; a < that.province[k].children[l].children.length; a++) {
|
||
if (that.province[k].children[l].children[a].value === that.areaData[index].map[j]) {
|
||
that.$set(that.province[k].children[l].children[a], 'disabled', false);
|
||
continue;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
that.areaData.splice(index, 1);
|
||
},
|
||
|
||
//如果在编辑过程中，点击其他的计费方式或点击删除所有，执行该方法，删除所有的记录
|
||
radioChange() {
|
||
var that = this;
|
||
that.getTestApi();
|
||
that.areaData.splice(0, that.areaData.length);
|
||
},
|
||
|
||
//上条选择的进行不可选处理
|
||
isCheck(index) {
|
||
var that = this;
|
||
if (index == 0) {
|
||
index = 0
|
||
} else {
|
||
index = index - 1;
|
||
}
|
||
for (let j = 0; j < that.areaData[index].map.length; j++) {
|
||
for (var k = 0; k < that.province.length; k++) {
|
||
if (that.province[k].value === that.areaData[index].map[j]) {
|
||
that.$set(that.province[k], 'disabled', true);
|
||
continue;
|
||
}
|
||
for (let l = 0; l < that.province[k].children.length; l++) {
|
||
if (that.province[k].children[l].value === that.areaData[index].map[j]) {
|
||
that.$set(that.province[k].children[l], 'disabled', true);
|
||
continue;
|
||
}
|
||
for (let a = 0; a < that.province[k].children[l].children.length; a++) {
|
||
if (that.province[k].children[l].children[a].value === that.areaData[index].map[j]) {
|
||
that.$set(that.province[k].children[l].children[a], 'disabled', true);
|
||
continue;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
//提交判断字段并返回对应字段的提示
|
||
refer() {
|
||
var that = this;
|
||
if (that.areaData.length == 0) {
|
||
that.$message.warning('请添加区域');
|
||
} else if (that.temTitle == '') {
|
||
that.$message.warning('请填写模板名称');
|
||
} else if (that.areaData.length != 0) {
|
||
var flag = true;
|
||
that.areaData.forEach(function (item) {
|
||
if (that.radio == 1) {
|
||
if (item.area_id.length == 0) {
|
||
that.$message.warning('请选择区域');
|
||
flag = false;
|
||
}
|
||
} else if (that.radio == 2) {
|
||
if (item.area_id.length == 0) {
|
||
that.$message.warning('请选择区域');
|
||
flag = false;
|
||
} else if (item.first_num == '') {
|
||
that.$message.warning('请填写首件');
|
||
flag = false;
|
||
} else if (item.first_num < 1) {
|
||
that.$message.warning('首件请填写大于1的数值');
|
||
flag = false;
|
||
} else if (item.first_fee == '') {
|
||
that.$message.warning('请填写运费');
|
||
flag = false;
|
||
} else if (item.first_fee > 999.99) {
|
||
that.$message.warning('运费请填写小于999.99的数值');
|
||
flag = false;
|
||
} else if (item.append_num == '') {
|
||
that.$message.warning('请填写续件');
|
||
flag = false;
|
||
} else if (item.append_num < 1) {
|
||
that.$message.warning('续件请填写大于1的数值');
|
||
flag = false;
|
||
} else if (item.append_fee == '') {
|
||
that.$message.warning('请填写续费');
|
||
flag = false;
|
||
} else if (item.append_fee > 999.99) {
|
||
that.$message.warning('续费请填写小于999.99的数值');
|
||
flag = false;
|
||
}
|
||
} else if (that.radio == 3) {
|
||
if (item.area_id.length == 0) {
|
||
that.$message.warning('请选择区域');
|
||
flag = false;
|
||
} else if (item.first_num == '') {
|
||
that.$message.warning('请填写首重');
|
||
flag = false;
|
||
} else if (item.first_num < 1) {
|
||
that.$message.warning('首重请填写大于1的数值');
|
||
flag = false;
|
||
} else if (item.first_fee == '') {
|
||
that.$message.warning('请填写运费');
|
||
flag = false;
|
||
} else if (item.first_fee > 999.99) {
|
||
that.$message.warning('运费请填写小于999.99的数值');
|
||
flag = false;
|
||
} else if (item.append_num == '') {
|
||
that.$message.warning('请填写续重');
|
||
flag = false;
|
||
} else if (item.append_num < 1) {
|
||
that.$message.warning('续重请填写大于1的数值');
|
||
flag = false;
|
||
} else if (item.append_fee == '') {
|
||
that.$message.warning('请填写续费');
|
||
flag = false;
|
||
} else if (item.append_fee > 999.99) {
|
||
that.$message.warning('续费请填写小于999.99的数值');
|
||
flag = false;
|
||
}
|
||
} else if (that.radio == 4) {
|
||
if (item.area_id.length == 0) {
|
||
that.$message.warning('请选择区域');
|
||
flag = false;
|
||
} else if (item.unified_fee == '') {
|
||
that.$message.warning('请填写统一运费');
|
||
flag = false;
|
||
} else if (item.unified_fee < 1) {
|
||
that.$message.warning('统一运费请填写大于1的数值');
|
||
flag = false;
|
||
} else if (item.unified_fee > 999.99) {
|
||
that.$message.warning('统一运费请填写小于999.99的数值');
|
||
flag = false;
|
||
}
|
||
}
|
||
item.area_id = item.area_id.toString();
|
||
item.type = that.radio;
|
||
});
|
||
if (flag) {
|
||
$.ajax({
|
||
url: "{:U('Retail/SystemDelivery/addDistributionTem')}",
|
||
type: 'post',
|
||
data: {
|
||
temTitle: that.temTitle,
|
||
temBillingModel: that.radio,
|
||
areaData: JSON.stringify(that.areaData),
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.code === 0) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: '提交成功',
|
||
duration: 1000,
|
||
});
|
||
window.parent.layer.closeAll();
|
||
} else {
|
||
that.$message.warning(res.msg);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
}
|
||
})
|
||
</script>
|
||
</html>
|