运费模板调整

src/views/setting/template/components/regionList.vue

@@ -8,7 +8,7 @@
     >
 
     <div style="width: 462px; margin: 0 auto">
-      <el-cascader-panel v-model="ruleArea" style="height: 350px;"  @visible-change="listPidDisabled($event,index)" :options="listPidProvince" :props="props"></el-cascader-panel>
+      <el-cascader-panel v-model="ruleArea" style="height: 350px;" :options="listPidProvince" :props="props"></el-cascader-panel>
     </div>
 
       <!-- 按钮 -->
@@ -23,11 +23,7 @@
 </template>
 <script>
 import {
-  getTemplateList,
-  addTemplateList,
   getTreeList,
-  getTemplateDetail,
-  setTemplateDetail
 } from "@/api/setting/template";
 export default {
 
@@ -45,6 +41,10 @@ export default {
     list: {
       type:[Object, Array],
       default: ''
+    },
+    shippingTemplateRuleList: {
+      type:[Object, Array],
+      default: ''
     }
   },
   data() {
@@ -57,7 +57,8 @@ export default {
         label: 'areaName',
         children: 'cityList',
       },
-      ruleArea:''//获取所选的地区
+      ruleArea:'',//获取所选的地区
+      TemplateRuleList:[],
     };
   },
   computed: {
@@ -66,7 +67,6 @@ export default {
     },
   },
   created() {
-    this.getList()
     if (this.list) {
       let data = []
       this.list.map(ressage => {
@@ -74,6 +74,19 @@ export default {
       })
       this.ruleArea = data
     }
+    if(this.shippingTemplateRuleList){
+      let data = []
+      this.shippingTemplateRuleList.map(ressage => {
+        let data2 = []
+        ressage.shippingTemplateRuleAreaList.map(res=>{
+          data2.push([res.provinceId, res.cityId])
+        })
+        data.push(data2)
+      })
+      this.TemplateRuleList = data
+      this.listPidDisabled()
+    }
+
   },
   methods: {
     // 关闭弹框
@@ -122,51 +135,33 @@ export default {
       this.$emit("close",this.ruleArea);
     },
 
-    //获取省份
-    getList(reset) {
-      getTreeList().then(res => {
-        if (res.code == 0) {
-          this.listPidProvince = res.data || []
-        }
-      })
-    },
-
     //多选框状态
-    listPidDisabled(e, index,) {
-      let shippingTemplateRuleList = [...this.shippingTemplateRuleList, ...this.shippingTemplateRuleList2]
-      if (e) {
-        this.listPidProvince.map(item => {//省
-          item.cityList.map(res => {//市
-            shippingTemplateRuleList.map(listItem => {//列表
-              if (listItem.shippingTemplateRuleAreaList != 1) {
-                listItem.shippingTemplateRuleAreaList.map(listRes => {//列表存在的省市
-                  if (res.areaId == listRes[1]) {
-                    // res.disabled = true
-                    this.$set(res, 'disabled', true)
-                  }
-                })
-              }
-            })
-          })
-        })
+     async listPidDisabled() {
+       let resData = await getTreeList({})
+       this.listPidProvince = resData.data
+
+       console.log(this.TemplateRuleList)
         this.listPidProvince.map(item => {//省
           item.cityList.map(res => {//市
-            for (let i = 0; i < shippingTemplateRuleList[index].shippingTemplateRuleAreaList.length; i++) {
-              if (res.areaId == shippingTemplateRuleList[index].shippingTemplateRuleAreaList[i][1]) {
-                this.$delete(res, 'disabled',)
+            for (let i = 0; i < this.TemplateRuleList.length; i++) {
+              for (let j = 0; j < this.TemplateRuleList[i].length; j++) {
+                if (res.areaId == this.TemplateRuleList[i][j][1]){
+                  this.$set(res, 'disabled', true)
+                }
               }
             }
           })
         })
+       this.listPidProvince.map(item => {//省
+         item.cityList.map(res => {//市
+           for (let i = 0; i < this.ruleArea.length; i++) {
+             if (res.areaId == this.ruleArea[i][1]){
+               this.$delete(res, 'disabled',)
+             }
+           }
+         })
+       })
 
-      } else {
-        this.listPidProvince.map(item => {
-          item.cityList.map(res => {
-            // res.disabled = false
-            this.$set(res, 'disabled', false)
-          })
-        })
-      }
     },
 
   },

src/views/setting/template/create.vue

@@ -30,7 +30,14 @@
               </tr>
               <tr v-for="(item,index) in shippingTemplateRuleList" :key="index" style="">
                 <td class="spec-table-td" style="text-align: left">
-                  <div v-for="(area) in item.shippingTemplateRuleAreaList" class="spec-table-td-link">{{area.city}}({{area.province}})，</div>
+
+                  <div style="width: 100%;" v-for="(areas,index) in item.filterList" :key="index" class="spec-table-td-link" >
+                    <div>
+                      <div style="float: left">{{ areas.city }}</div>
+                      <div>({{ areas.provinceList.join('，') }})</div>
+                    </div>
+                  </div>
+
                   <a @click="setListData(item.shippingTemplateRuleAreaList,item.id)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
                 </td>
                 <td>
@@ -129,7 +136,7 @@
     <region-list
       v-if="createShow"
       :dialog-show="createShow"
-      :data-list="shippingTemplateRuleList"
+      :shippingTemplateRuleList="shippingTemplateRuleList"
       :id="id" :list="list"
       @close="close"
     />
@@ -183,13 +190,7 @@ export default {
                 province: '',//省
                 provinceId: '',//省id
                 remark: '不发货备注',
-              }, {
-                city: '',//市
-                cityId: '',//市id
-                province: '',//省
-                provinceId: '',//省id
-                remark: '不发货备注',
-              }, {}
+              }
             ],
           },
         ],
@@ -199,7 +200,8 @@ export default {
 
       rules: {
         title: [{required: true, message: '请输入模板名称', trigger: 'blur'}],
-      }
+      },
+      provinceList:{}//省(市)
     };
   },
   created() {
@@ -212,18 +214,27 @@ export default {
           item.defaultPrice = accDiv(item.defaultPrice, 100)
         if (item.type == 1){
           this.shippingTemplateRuleList.push(item)
-
         }else {
           this.shippingTemplateRuleList2.push(item)
 
         }
         })
         this.addData = {id, title}
+        this.filterList()
       })
-    }
 
+    }
   },
   methods: {
+    //获取省份
+    getList(reset) {
+      getTreeList().then(res => {
+        if (res.code == 0) {
+          this.listPidProvince = res.data || []
+        }
+      })
+    },
+
     // 关闭弹框
     close(ruleArea) {
       this.createShow = false;
@@ -257,6 +268,27 @@ export default {
           }
         })
       }
+      this.filterList()
+    },
+
+    filterList() {
+      this.shippingTemplateRuleList.forEach(item => {
+        item.filterList = []
+        let data = item.shippingTemplateRuleAreaList
+        let cityArr = [... new Set(data.map(item => item.city))]
+        for (let i = 0; i < cityArr.length; i++) {
+          let obj = {
+            city: cityArr[i],
+            provinceList: []
+          }
+          for (let j = 0; j < data.length; j++) {
+            if(cityArr[i] == data[j].city) {
+              obj.provinceList.push(data[j].province)
+            }
+          }
+          item.filterList.push(obj)
+        }
+      })
     },
 
     //付费地区