Commit 135af4e0 authored by zhengke's avatar zhengke
parents e52d98e2 653f83d4
<style>
<style scoped>
.addFreightRule .form-box {
background: #fff;
padding: 20px 50% 20px 0;
......@@ -12,6 +12,23 @@
display: inline-block;
font-size: 13px;
}
.addFreightRule .gez_list{
width: 650px;
margin-bottom: 12px;
padding: 20px;
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.addFreightRule .imgstyle{
width: 32px;
height: 32px;
margin: 0 5px;
}
</style>
<template>
<div class="addFreightRule">
......@@ -22,17 +39,29 @@
<el-input v-model="msg.RulesName"/>
</el-form-item>
<el-form-item label="计费方式">
<el-radio-group v-model="msg.LogisticsType" >
<el-radio-group v-model="msg.ChargeMode" >
<el-radio :label="1">按重计费</el-radio>
<el-radio :label="2">按件计费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="运费规则" class="is-required">
<span style="color: #409EFF;font-size: 14px;cursor: pointer;" @click="dialogFormVisible=true">+新增规则</span>
<div class="gez_list el-card" v-for="(item,index) in msg.Detail" :key="index">
<div style="width: 500px;">
<span>首重/件(克/个):{{item.First}} <span>/</span> 首费(元):{{item.FirstPrice}} <span>/</span>续重/件(克/个):{{item.Second}}<span>/</span>续费(元){{item.SecondPrice}}</span>
</div>
<div style="width: 110px;display: flex;flex-direction: row;justify-content: space-around">
<el-tooltip class="item" effect="dark" content="编辑" placement="top" >
<img src="../../assets/img/setup/edit.png" alt="" class="imgstyle">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b">
</el-tooltip>
</div>
</div>
<span style="color: #409EFF;font-size: 14px;cursor: pointer;" @click="addOf">+新增规则</span>
</el-form-item>
</el-form>
</div>
<el-button type="primary" style="margin: 12px 0 " @click="preserve">保存</el-button>
<el-button style="margin: 12px 0 " @click="cancel">取消</el-button>
......@@ -41,56 +70,65 @@
<!--新增规则弹窗-->
<el-dialog title="新增规则" :visible.sync="dialogFormVisible" >
<el-form :model="msg.Detail" :rules="rules">
<el-form :model="Detail" :rules="rules">
<el-row :gutter="0">
<el-col :span="11">
<el-form-item label="首重(克):" label-width="100px" style="padding: 0px 1rem;" prop="MallName2">
<el-input v-model="msg.Detail.First" />
<el-input v-model="Detail.First" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="首费(元)" label-width="100px" style="padding: 0px 1rem;" >
<el-input v-model="msg.Detail.FirstPrice" />
<el-input v-model="Detail.FirstPrice" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="0">
<el-col :span="11">
<el-form-item label="续重(克):" label-width="100px" style="padding: 0px 1rem;" >
<el-input v-model="msg.Detail.Second" />
<el-input v-model="Detail.Second" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="续费(元)" label-width="100px" style="padding: 0px 1rem;" >
<el-input v-model="msg.Detail.SecondPrice" />
<el-input v-model="Detail.SecondPrice" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="地区选择">
<region_Choice @event1="change($event)"></region_Choice>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
<el-button type="primary" @click="Addto">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import region_Choice from './view/regionChoice'
export default {
name: "addFreightRule",
data(){
data(){
return{
msg:{
ID:"",
ID:0,
RulesName:'',
jifei:1,
Detail:{
First:0,
FirstPrice:0,
Second:0,
SecondPrice:0,
}
// jifei:1,
ChargeMode:1,
Detail:[],
},
Detail:{
ID:0,
First:0,
FirstPrice:0,
Second:0,
SecondPrice:0,
List:[],
},
dialogFormVisible:false,
rules: {
......@@ -105,6 +143,9 @@
},
}
},
components:{
region_Choice,
},
methods:{
cancel(){
this.$router.go(-1);//返回上一层
......@@ -114,11 +155,73 @@
},
addRule(){
},
change(data){
let List=[];
for(let i=0 ;i<data.length;i++){
if(data[i].ischeckAll==true && data[i].indeterminate==false){ //全选的情况 只穿省的ID
List.push({'ID':0,'RegionId':data[i].ID})
}
if(data[i].indeterminate==true){//传市的ID
if(data[i].hasOwnProperty('cityList')==true){
let citylist = data[i].cityList;
for(let j= 0;j<citylist.length;j++){
if(citylist[j].ischeckAll==true && citylist[j].indeterminate==false){
List.push({'ID':0,'RegionId':citylist[j].ID})
}
if(citylist[j].indeterminate==true){
if(citylist[j].hasOwnProperty('areaList')==true){
let areaList = citylist[j].areaList;
for(let z= 0;z<areaList.length;z++){
if(areaList[z].ischeckAll==true){
List.push({'ID':0,'RegionId':areaList[z].ID})
}
}
}
}
}
}
}
}
this.Detail.List = List
},
delete_b(){
},
addOf(){
this.Detail.First=0;
this.Detail.FirstPrice=0;
this.Detail.Second=0;
this.Detail.SecondPrice=0;
this.Detail.List=[];
this.dialogFormVisible=true
},
Addto(){
this.dialogFormVisible=false
this.Detail.First=parseInt(this.Detail.First);
this.Detail.FirstPrice=parseInt(this.Detail.FirstPrice);
this.Detail.Second=parseInt(this.Detail.Second);
this.Detail.SecondPrice=parseInt(this.Detail.SecondPrice);
this.msg.Detail.push(this.Detail)
},
preserve(){
this.apipost("/api/MallBase/AddOrUpdateLogisticsRules",this.msg , res => {
if (res.data.resultCode == 1) {
} else {
this.Info(res.data.message);
}
})
}
}
},
}
</script>
<style scoped>
</style>
<template>
<div class="regionChoice">
<div class="item">
<div class="item_b" v-for="(item,index) in regionList" :key="index">
<el-checkbox :indeterminate="item.indeterminate" v-model="item.ischeckAll" @change="handleCheckAllChange(index,item.ID,$event)" > </el-checkbox>
<span @click="showcity(index,item.ID)">{{item.Name}}</span>
</div>
</div>
<div class="item">
<div class="item_b" v-for="(item,index) in cityList " :key="index">
<el-checkbox :indeterminate="item.indeterminate" v-model="item.ischeckAll" @change="handleCityAllChange(index,item.ID,$event)" > </el-checkbox>
<span @click="showarea(index,item.ID)">{{item.Name}}</span>
</div>
</div>
<div class="item">
<div class="item_b" v-for="(item,index) in areaList" :key="index" v-if="areaList[0].Name.indexOf('街道')==-1">
<el-checkbox v-model="item.ischeckAll" @change="handleareaAllChange(index,item.ID,$event)" ></el-checkbox>
<span>{{item.Name}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "regionChoice",
data(){
return{
regionList:[],
msg:{ Id:2,},
cityID:0,
areaID:0,
list:[],
provinceindex:0,
cityindex:0,
areaindex:0,
cityList:[],
areaList:[],
}
},
methods:{
getprovince(){
this.apipost("/api/Destination/GetChildList",this.msg , res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
for(let i=0;i<data.length;i++){
data[i].ischeckAll=false;
data[i].indeterminate=false;
}
this.regionList = data;
this.cityID = data[this.provinceindex].ID
this.getCitylist()
} else {
this.Info(res.data.message);
}
})
},
getCitylist(type=false){
this.apipost("/api/Destination/GetChildList",{'Id':this.cityID} , res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
for(let i=0;i<data.length;i++){
if(type==true){
data[i].ischeckAll=true;
data[i].indeterminate=false;
}else {
data[i].ischeckAll=false;
data[i].indeterminate=false;
}
}
let regionList = this.regionList
for(let i=0;i<regionList.length;i++){
if(regionList[i].ID== this.cityID){
regionList[i].cityList = data;
}
}
this.cityList = regionList[this.provinceindex].cityList
this.areaID = data[this.cityindex].ID
this.getareaIDlist(type)
} else {
this.Info(res.data.message);
}
})
},
getareaIDlist(type=false){
this.apipost("/api/Destination/GetChildList",{'Id':this.areaID} , res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
for(let i=0;i<data.length;i++){
if(type==true){
data[i].ischeckAll=true;
}else {
data[i].ischeckAll=false;
} }
let regionList = this.regionList;
for(let i=0;i<regionList.length;i++){
if(regionList[i].ID== this.cityID){
let cityList = regionList[i].cityList;
for(let i=0;i<cityList.length;i++){
if(cityList[i].ID== this.areaID){
cityList[i].areaList = data;
}
}
}
}
this.areaList = data
} else {
this.Info(res.data.message);
}
})
},
handleCheckAllChange(index, id, e){
let regionList = this.regionList;
this.provinceindex = index;
this.cityID = id;
if(regionList[index].indeterminate==true){
regionList[index].indeterminate=false;
regionList[index].ischeckAll=true;
}
if(regionList[index].hasOwnProperty('cityList')==false){
this.getCitylist(true)
}else {
if(e==false){
let cityList = regionList[index].cityList;
for(let i=0;i<cityList.length;i++){
cityList[i].ischeckAll=false
}
this.cityList = cityList
let areaList = this.cityList[this.cityindex].areaList
for(let i=0;i<areaList.length;i++){
areaList[i].ischeckAll=true
}
this.areaList = areaList
}else {
let cityList = regionList[index].cityList;
for(let i=0;i<cityList.length;i++){
cityList[i].ischeckAll=true
}
this.cityList = cityList
let areaList = this.cityList[this.cityindex].areaList
for(let i=0;i<areaList.length;i++){
areaList[i].ischeckAll=true
}
this.areaList = areaList
}
}
this.toParent()
},
showcity(index, id){
let regionList = this.regionList;
this.provinceindex = index;
this.cityID = id;
if(regionList[index].hasOwnProperty('cityList')==false){
this.getCitylist()
}else {
this.cityList = regionList[index].cityList;
this.areaList = this.cityList[0].areaList;
}
},
handleCityAllChange(index, id, e){
let regionList = this.regionList;
this.cityindex = index;
this.areaID = id;
if(regionList[this.provinceindex].cityList[index].hasOwnProperty('areaList')==false){//没有子级的时候加载
this.getareaIDlist()
}else {
this.areaList = regionList[this.provinceindex].cityList[index].areaList;
}
//取消自己的勾的时候父级的勾改变
let areaList = regionList[this.provinceindex].cityList[index].areaList;
if(e==false){
regionList[this.provinceindex].indeterminate=true;
if(areaList!=undefined){
for(let i=0;i<areaList.length;i++){
areaList[i].ischeckAll=false
}
regionList[this.provinceindex].cityList[index].indeterminate=false
}
}else {
let all=true;
let cityList = this.regionList[this.provinceindex].cityList;
this.regionList[this.provinceindex].indeterminate=true;
if(cityList!=undefined){
for(let i=0;i<cityList.length;i++){
if(cityList[i].ischeckAll==false){
all=false
}
}
}
if(all==true){
this.regionList[this.provinceindex].indeterminate=false
this.regionList[this.provinceindex].ischeckAll=true
}
if(areaList!=undefined){
for(let i=0;i<areaList.length;i++){
areaList[i].ischeckAll=true
}
}
}
this.toParent()
},
showarea(index, id){
let regionList = this.regionList;
this.cityindex = index;
this.areaID = id;
if(regionList[this.provinceindex].cityList[index].hasOwnProperty('areaList')==false){//没有子级的时候加载
if(regionList[this.provinceindex].cityList[index].ischeckAll==true){
this.getareaIDlist(true)
}else {
this.getareaIDlist()
}
}else {
this.areaList = regionList[this.provinceindex].cityList[index].areaList;
}
},
handleareaAllChange(index, id, e){
let regionList = this.regionList;
this.areaindex = index;
if(e==false){
regionList[this.provinceindex].indeterminate=true
regionList[this.provinceindex].cityList[this.cityindex].indeterminate=true
}else {
regionList[this.provinceindex].cityList[this.cityindex].indeterminate=true
let areaList= regionList[this.provinceindex].cityList[this.cityindex].areaList;
let cityList= regionList[this.provinceindex].cityList;
let areaAll=true
for(let i=0;i<areaList.length;i++){
if(areaList[i].ischeckAll==false){
areaAll=false
}
}
if(areaAll==true){
regionList[this.provinceindex].cityList[this.cityindex].indeterminate=false;
regionList[this.provinceindex].cityList[this.cityindex].ischeckAll=true;
let provinceAll =true;
for(let i=0;i<cityList.length;i++){
if(cityList[i].ischeckAll==false || cityList[i].indeterminate==true){
provinceAll=false
}
}
if(provinceAll== true){
regionList[this.provinceindex].indeterminate=false;
regionList[this.provinceindex].ischeckAll=true;
}
}
}
this.toParent()
},
toParent(){//传值给父组件
this.$emit('event1', this.regionList)
}
},
mounted(){
this.getprovince()
},
}
</script>
<style scoped>
.regionChoice{
width: 880px;
height: 400px;
margin-left: 100px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.regionChoice .item{
overflow-y: auto;
border: 1px solid #EBEEF5;
border-radius: 4px;
padding: 20px;
width: 270px;
height: 400px;
}
.regionChoice .item_b{
display: flex;
flex-direction: row;
align-items: center;
}
.regionChoice .item_b span{
margin-left: 15px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment