616 行
30 KiB
HTML
可执行文件
616 行
30 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--xc添加试-->
|
||
<!--[1.4.13]-->
|
||
<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>
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div>
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<span style="font-size: 14px"><span style="color: red">*</span>模板名称：</span>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<el-input clearable v-model="data.title" placeholder="请输入添加模板名称"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div style="padding-top: 20px">
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<span style="font-size: 14px"><span style="color: red">*</span>计费方式：</span>
|
||
</el-col>
|
||
<el-col :span="22">
|
||
<template>
|
||
<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>
|
||
</template>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
|
||
<div style="padding-top: 30px">
|
||
<el-row>
|
||
<el-col :span="2">
|
||
<span style="font-size: 14px"><span style="color: red">*</span>配送区域：</span>
|
||
</el-col>
|
||
<el-col :span="22">
|
||
<!--免运费-->
|
||
<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="type in multipleSelection">
|
||
<tr v-for="(item, i) in areaData">
|
||
|
||
<td style="text-align: center">{{type}}<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"></el-input></td>
|
||
<td style="text-align: center; width: 100px"><el-input v-model="item.first_fee"></el-input></td>
|
||
<td style="text-align: center; width: 100px"><el-input v-model="item.append_num"></el-input></td>
|
||
<td style="text-align: center; width: 100px"><el-input v-model="item.append_fee"></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"></el-input></td>
|
||
<td style="text-align: center"><el-input v-model="item.first_fee"></el-input></td>
|
||
<td style="text-align: center"><el-input v-model="item.append_num"></el-input></td>
|
||
<td style="text-align: center"><el-input v-model="item.append_fee"></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"></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-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
|
||
<div style="padding-top: 20px">
|
||
<el-row>
|
||
<el-col :span="2"></el-col>
|
||
<el-col :span="22">
|
||
<el-button type="primary" @click="AddForm" size="mini">添加</el-button>
|
||
<el-button type="info" @click="radioChange" size="mini">删除所有</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div style="padding-top: 50px">
|
||
<el-row>
|
||
<el-col :span="2"></el-col>
|
||
<el-col :span="22">
|
||
<el-button type="primary" size="medium" @click="refer">提交</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
<style>
|
||
.el-col {
|
||
min-height: 1px
|
||
}
|
||
</style>
|
||
<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: '',
|
||
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: '0', //续件 / 续重：temBillingModel为2或3时必赋值
|
||
append_fee: '0', //续费：temBillingModel为2或3时必赋值
|
||
unified_fee: '', //统一运费：temBillingModel为4时必赋值
|
||
maplistlabel: [],
|
||
map: [],
|
||
},
|
||
],
|
||
temId:'',//要修改的模板ID
|
||
areaInfo:null,//获取的模板的区域数组
|
||
data:[
|
||
{
|
||
id:'',
|
||
title:'',
|
||
radio:'',
|
||
|
||
},
|
||
],
|
||
}
|
||
},
|
||
|
||
//首加载
|
||
mounted: function() {
|
||
console.log({$id});
|
||
this.temId = {$id};
|
||
this.getTestApi();
|
||
this.getTestAp();
|
||
},
|
||
|
||
methods: {
|
||
//获取编辑数据
|
||
getTestAp: function () {
|
||
$.ajax({
|
||
url:"{:U('SystemDelivery/getTemInfo')}",
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {
|
||
temId: this.temId,
|
||
},
|
||
success: res => {
|
||
console.log(res);
|
||
this.data = res.data;
|
||
this.data.id = res.data.id;//模板ID
|
||
this.data.title = res.data.title;//模板标题
|
||
this.radio = res.data.type;//模板类型：1免运费 2按件数 3按重量 4统一运费
|
||
this.areaInfo = res.data.areaInfo;
|
||
console.log(this.areaInfo);
|
||
this.multipleSelection = [];
|
||
for (let i = 0; i < this.areaInfo.length; i++) {
|
||
if (this.multipleSelection.indexOf(this.areaInfo[i].areaData) === -1) {
|
||
this.multipleSelection.push(this.areaInfo[i].areaData)
|
||
}
|
||
}
|
||
console.log(this.multipleSelection);
|
||
}
|
||
});
|
||
},
|
||
//获取后台省、市、区封装数据
|
||
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.checked==true ){
|
||
that.areaData[i].maplistlabel.push(c.label);
|
||
that.areaData[i].area_id.push('#'+c.value+'#');
|
||
that.areaData[i].map.push(c.value);
|
||
}else if (c.level==2 && 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);
|
||
}else if (c.level==3 && c.checked==true) {
|
||
that.areaData[i].maplistlabel.push(c.parent.label+'/'+c.label);
|
||
that.areaData[i].area_id.push('#'+c.parent.value+'#,#'+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: '0', //续件 / 续重：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],'checked',false);
|
||
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],'checked',false);
|
||
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],'checked',false);
|
||
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.radio==1 && that.areaData.length != 0){
|
||
that.areaData.forEach(function (item) {
|
||
if (item.area_id.length == 0){
|
||
that.$message.warning('请选择区域');
|
||
}else {
|
||
that.temBillingModel = that.radio;
|
||
that.areaData[0].type = that.radio;
|
||
that.areaData.forEach(function (item) {
|
||
item.area_id = item.area_id.toString();
|
||
});
|
||
$.ajax({
|
||
url: '/index.php/Retail/SystemDelivery/addDistributionTem',
|
||
type: 'post',
|
||
data: {
|
||
temTitle: that.temTitle,
|
||
temBillingModel: that.temBillingModel,
|
||
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);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}else if (that.radio==2 && that.areaData.length != 0 ) {
|
||
that.areaData.forEach(function (item) {
|
||
if (item.area_id.length == 0){
|
||
that.$message.warning('请选择区域');
|
||
}else if (item.first_num == ''){
|
||
that.$message.warning('请填写首件');
|
||
}else if (item.first_num < 1){
|
||
that.$message.warning('首件请填写大于1的数值');
|
||
}else if (item.first_fee == ''){
|
||
that.$message.warning('请填写运费');
|
||
}else if (item.append_num == ''){
|
||
that.$message.warning('请填写续件');
|
||
}else if (item.append_fee == ''){
|
||
that.$message.warning('请填写续费');
|
||
}else{
|
||
that.temBillingModel = that.radio;
|
||
that.areaData[0].type = that.radio;
|
||
that.areaData.forEach(function (item) {
|
||
item.area_id = item.area_id.toString();
|
||
});
|
||
$.ajax({
|
||
url: '/index.php/Retail/SystemDelivery/addDistributionTem',
|
||
type: 'post',
|
||
data: {
|
||
temTitle: that.temTitle,
|
||
temBillingModel: that.temBillingModel,
|
||
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);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
}else if (that.radio==3 && that.areaData.length != 0) {
|
||
that.areaData.forEach(function (item) {
|
||
if (item.area_id.length == 0){
|
||
that.$message.warning('请选择区域');
|
||
}else if (item.first_num == ''){
|
||
that.$message.warning('请填写首重');
|
||
}else if (item.first_num < 0.1){
|
||
that.$message.warning('首重请填写大于1的数值');
|
||
}else if (item.first_fee == ''){
|
||
that.$message.warning('请填写运费');
|
||
}else if (item.append_num == ''){
|
||
that.$message.warning('请填写续重');
|
||
}else if (item.append_fee == ''){
|
||
that.$message.warning('请填写续费');
|
||
}else {
|
||
that.temBillingModel = that.radio;
|
||
that.areaData[0].type = that.radio;
|
||
that.areaData.forEach(function (item) {
|
||
item.area_id = item.area_id.toString();
|
||
});
|
||
$.ajax({
|
||
url: '/index.php/Retail/SystemDelivery/addDistributionTem',
|
||
type: 'post',
|
||
data: {
|
||
temTitle: that.temTitle,
|
||
temBillingModel: that.temBillingModel,
|
||
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);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}else if (that.radio==4 && that.areaData.length != 0) {
|
||
that.areaData.forEach(function (item) {
|
||
if (item.area_id.length == 0){
|
||
that.$message.warning('请选择区域');
|
||
}else if (item.unified_fee == ''){
|
||
that.$message.warning('请填写统一运费');
|
||
}else if (item.unified_fee < 1){
|
||
that.$message.warning('统一运费请填写大于1的数值');
|
||
}else {
|
||
that.temBillingModel = that.radio;
|
||
that.areaData[0].type = that.radio;
|
||
that.areaData.forEach(function (item) {
|
||
item.area_id = item.area_id.toString();
|
||
});
|
||
$.ajax({
|
||
url: '/index.php/Retail/SystemDelivery/addDistributionTem',
|
||
type: 'post',
|
||
data: {
|
||
temTitle: that.temTitle,
|
||
temBillingModel: that.temBillingModel,
|
||
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>
|