运费模板样式优化

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

@@ -45,6 +45,10 @@ export default {
     shippingTemplateRuleList: {
       type:[Object, Array],
       default: ''
+    },
+    shippingTemplateRuleList2: {
+      type:[Object, Array],
+      default: ''
     }
   },
   data() {
@@ -59,6 +63,7 @@ export default {
       },
       ruleArea:'',//获取所选的地区
       TemplateRuleList:[],
+      TemplateRuleList2:[],
     };
   },
   computed: {
@@ -86,6 +91,20 @@ export default {
       this.TemplateRuleList = data
       this.listPidDisabled()
     }
+    if (this.shippingTemplateRuleList2){
+      let data = []
+      this.shippingTemplateRuleList2.map(ressage => {
+        let data2 = []
+        ressage.shippingTemplateRuleAreaList.map(res=>{
+          data2.push([res.provinceId, res.cityId])
+        })
+        data.push(data2)
+      })
+      this.TemplateRuleList2 = data
+      this.listPidDisabled()
+    }
+
+
 
   },
   methods: {
@@ -131,7 +150,6 @@ export default {
         ressage.push(res)
       })
       this.ruleArea = ressage
-
       this.$emit("close",this.ruleArea);
     },
 
@@ -139,13 +157,12 @@ export default {
      async listPidDisabled() {
        let resData = await getTreeList({})
        this.listPidProvince = resData.data
-
-       console.log(this.TemplateRuleList)
+       let TemplateRuleList = [...this.TemplateRuleList,...this.TemplateRuleList2]
         this.listPidProvince.map(item => {//省
           item.cityList.map(res => {//市
-            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]){
+            for (let i = 0; i < TemplateRuleList.length; i++) {
+              for (let j = 0; j < TemplateRuleList[i].length; j++) {
+                if (res.areaId == TemplateRuleList[i][j][1]){
                   this.$set(res, 'disabled', true)
                 }
               }
@@ -161,9 +178,7 @@ export default {
            }
          })
        })
-
     },
-
   },
 };
 </script>

src/views/setting/template/create.vue

@@ -30,15 +30,13 @@
               </tr>
               <tr v-for="(item,index) in shippingTemplateRuleList" :key="index" style="">
                 <td class="spec-table-td" style="text-align: left">
-
                   <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 v-if="areas.provinceList.length > 0">({{ areas.provinceList.join('，') }})</div>
                     </div>
                   </div>
-
-                  <a @click="setListData(item.shippingTemplateRuleAreaList,item.id)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
+                  <a @click="setListData(item.shippingTemplateRuleAreaList,index+1)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
                 </td>
                 <td>
                   <el-form-item :prop="`shippingTemplateRuleList.${index}.defaultNumber`"
@@ -98,8 +96,13 @@
               </tr>
               <tr v-for="(item,index) in shippingTemplateRuleList2" :key="index">
                 <td class="spec-table-td" style="text-align: left">
-                  <div class="spec-table-td-link" v-for="(area) in item.shippingTemplateRuleAreaList">{{area.city}}({{area.province}}), </div>
-                  <a @click="setListData(item.shippingTemplateRuleAreaList,item.id)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
+                  <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 v-if="areas.provinceList.length > 0">({{ areas.provinceList.join('，') }})</div>
+                    </div>
+                  </div>
+                  <a @click="setListData(item.shippingTemplateRuleAreaList,shippingTemplateRuleList.length+index+1)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
                 </td>
                 <td>
                   <el-form-item :prop="`shippingTemplateRuleList2.${index}.remark`"
@@ -136,7 +139,7 @@
     <region-list
       v-if="createShow"
       :dialog-show="createShow"
-      :shippingTemplateRuleList="shippingTemplateRuleList"
+      :shippingTemplateRuleList="shippingTemplateRuleList" :shippingTemplateRuleList2="shippingTemplateRuleList2"
       :id="id" :list="list"
       @close="close"
     />
@@ -159,7 +162,6 @@ export default {
   data() {
     return {
       createShow: false,
-
       listPidProvince: [],//省
       props: {
         multiple: true,
@@ -205,7 +207,7 @@ export default {
     };
   },
   created() {
-    // this.getList()
+    this.getList()
     if (this.id) {
       getTemplateDetail(this.id).then(res => {
         const {id, title, shippingTemplateRuleList} = res.data
@@ -262,17 +264,16 @@ export default {
         }
       }else {
         let shippingTemplateRuleList = [...this.shippingTemplateRuleList,...this.shippingTemplateRuleList2]
-        shippingTemplateRuleList.map(res=>{
-          if(res.id == this.listId){
-            res.shippingTemplateRuleAreaList = ruleArea
-          }
-        })
+        for (let i = 0; i < shippingTemplateRuleList.length; i++) {
+          shippingTemplateRuleList[this.listId-1].shippingTemplateRuleAreaList = ruleArea
+        }
       }
       this.filterList()
     },
 
     filterList() {
-      this.shippingTemplateRuleList.forEach(item => {
+      let shippingTemplateRuleList = [...this.shippingTemplateRuleList,...this.shippingTemplateRuleList2]
+      shippingTemplateRuleList.forEach(item => {
         item.filterList = []
         let data = item.shippingTemplateRuleAreaList
         let cityArr = [... new Set(data.map(item => item.city))]
@@ -288,6 +289,15 @@ export default {
           }
           item.filterList.push(obj)
         }
+        // //折叠市
+        for (let i = 0; i < this.listPidProvince.length; i++) {
+          let data = this.listPidProvince[i]
+          for (let j = 0; j < item.filterList.length; j++) {
+            if(data.areaName == item.filterList[j].city && data.cityList.length == item.filterList[j].provinceList.length){
+              item.filterList[j].provinceList = []
+            }
+          }
+        }
       })
     },
 
@@ -309,9 +319,9 @@ export default {
     },
 
     //编辑
-    setListData(list,id){
+    setListData(list,index){
       this.list = list
-      this.listId = id
+      this.listId = index
       this.createShow = true;
     },