Merge branch 'dev' into 'test'

Dev

See merge request quanshu/mp-ui-pc!231

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,14 @@ export default {
     list: {
       type:[Object, Array],
       default: ''
+    },
+    shippingTemplateRuleList: {
+      type:[Object, Array],
+      default: ''
+    },
+    shippingTemplateRuleList2: {
+      type:[Object, Array],
+      default: ''
     }
   },
   data() {
@@ -57,7 +61,9 @@ export default {
         label: 'areaName',
         children: 'cityList',
       },
-      ruleArea:''//获取所选的地区
+      ruleArea:'',//获取所选的地区
+      TemplateRuleList:[],
+      TemplateRuleList2:[],
     };
   },
   computed: {
@@ -66,7 +72,6 @@ export default {
     },
   },
   created() {
-    this.getList()
     if (this.list) {
       let data = []
       this.list.map(ressage => {
@@ -74,6 +79,33 @@ 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()
+    }
+    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: {
     // 关闭弹框
@@ -118,57 +150,35 @@ export default {
         ressage.push(res)
       })
       this.ruleArea = ressage
-
       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
+       let TemplateRuleList = [...this.TemplateRuleList,...this.TemplateRuleList2]
         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 < TemplateRuleList.length; i++) {
+              for (let j = 0; j < TemplateRuleList[i].length; j++) {
+                if (res.areaId == TemplateRuleList[i][j][1]){
+                  this.$set(res, 'disabled', true)
+                }
               }
             }
           })
         })
-
-      } else {
-        this.listPidProvince.map(item => {
-          item.cityList.map(res => {
-            // res.disabled = false
-            this.$set(res, 'disabled', false)
-          })
-        })
-      }
+       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',)
+             }
+           }
+         })
+       })
     },
-
   },
 };
 </script>

src/views/setting/template/create.vue

@@ -30,8 +30,13 @@
               </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>
-                  <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,index+1)" style="color:#00aaff;text-underline: #00aaff;float: right">编辑</a>
                 </td>
                 <td>
                   <el-form-item :prop="`shippingTemplateRuleList.${index}.defaultNumber`"
@@ -91,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`"
@@ -129,7 +139,7 @@
     <region-list
       v-if="createShow"
       :dialog-show="createShow"
-      :data-list="shippingTemplateRuleList"
+      :shippingTemplateRuleList="shippingTemplateRuleList" :shippingTemplateRuleList2="shippingTemplateRuleList2"
       :id="id" :list="list"
       @close="close"
     />
@@ -152,7 +162,6 @@ export default {
   data() {
     return {
       createShow: false,
-
       listPidProvince: [],//省
       props: {
         multiple: true,
@@ -183,13 +192,7 @@ export default {
                 province: '',//省
                 provinceId: '',//省id
                 remark: '不发货备注',
-              }, {
-                city: '',//市
-                cityId: '',//市id
-                province: '',//省
-                provinceId: '',//省id
-                remark: '不发货备注',
-              }, {}
+              }
             ],
           },
         ],
@@ -199,11 +202,12 @@ export default {
 
       rules: {
         title: [{required: true, message: '请输入模板名称', trigger: 'blur'}],
-      }
+      },
+      provinceList:{}//省(市)
     };
   },
   created() {
-    // this.getList()
+    this.getList()
     if (this.id) {
       getTemplateDetail(this.id).then(res => {
         const {id, title, shippingTemplateRuleList} = res.data
@@ -212,18 +216,26 @@ 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;
@@ -251,12 +263,41 @@ 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() {
+      let shippingTemplateRuleList = [...this.shippingTemplateRuleList,...this.shippingTemplateRuleList2]
+      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)
+        }
+        // //折叠市
+        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 = []
+            }
+          }
+        }
+      })
     },
 
     //付费地区
@@ -277,9 +318,9 @@ export default {
     },
 
     //编辑
-    setListData(list,id){
+    setListData(list,index){
       this.list = list
-      this.listId = id
+      this.listId = index
       this.createShow = true;
     },