同城分销店拆分、分销店对应多个经销商

src/api/store.js

@@ -0,0 +1,10 @@
+// 门店相关接口
+import request from '@/utils/request';
+
+// 获取经销商分类
+export function listChainsByCategory() {
+  return request({
+    url: 'mobile/store/listChainsByCategory',
+    method: 'get',
+  });
+}

src/views/storeManagement/storeAdd.vue

@@ -63,21 +63,19 @@
                         <span class="van-f-red">*</span>
                       </template>
                       <template #input>
-                        <template v-if="TCFXListTreeSelec.length">
+                        <template v-if="sfaStoreChainsContactList.length">
                           <div
-                            class="TCFXListTreeSelec"
-                            v-for="(item, index) in TCFXListTreeSelec"
+                            class="sfaStoreChainsContactList"
+                            v-for="(item, index) in sfaStoreChainsContactList"
                             :key="index">
-                            {{ item.dictLabel }}
-                            {{ item.code }}
-                            {{ item.name }}
+                            {{ item.CategoryName }}
+                            {{ item.CustomerCode }}
+                            {{ item.CustomerName }}
                           </div>
                         </template>
-                        <template v-else
-                          ><span style="color: rgb(150, 151, 153)"
-                            >点击选择经销商名称</span
-                          ></template
-                        >
+                        <template v-else>
+                          <span style="color: rgb(150, 151, 153)"> 点击选择经销商名称 </span>
+                        </template>
                       </template>
                     </van-field>
                   </van-col>
@@ -488,7 +486,11 @@
         @cancel="showPicker = false" />
     </van-popup>
     <!--经销商-->
-    <van-popup v-model="showPickerChainsList" position="bottom" class="agencyBox">
+    <van-popup
+      v-model="showPickerChainsList"
+      position="bottom"
+      class="agencyBox"
+      :close-on-click-overlay="false">
       <!-- 分销店 -->
       <template
         v-if="
@@ -513,7 +515,8 @@
                 class="item"
                 v-for="(val, ind) in item.children"
                 :key="ind"
-                @click="treeSelectItemClick(item, index, val, ind)">
+                @click="treeSelectItemClick(item, index, val, ind)"
+                v-if="item.children.length">
                 <div
                   :class="{
                     'van-radio__icon': true,
@@ -522,8 +525,9 @@
                   }">
                   <i class="van-icon van-icon-success"></i>
                 </div>
-                <div class="value">{{ val.code }} {{ val.name }}</div>
+                <div class="value">{{ val.CustomerCode }} {{ val.CustomerName }}</div>
               </div>
+              <van-empty description="" v-if="item.children.length == 0" />
             </div>
           </template>
         </van-tree-select>
@@ -706,6 +710,7 @@ import txmapimg1 from '@/assets/txmap1.svg';
 import txmapimg2 from '@/assets/txmap2.svg';
 import txmapimg3 from '@/assets/marker_blue.png';
 import { getPosition, getTicketFun } from '@/utils/TXApiFun';
+import { listChainsByCategory } from '@/api/store';
 export default {
   name: 'storeAdd',
   components: { uploadImg, uploadImgView, mapmarker, uploadImgc, deleteImgView },
@@ -835,70 +840,8 @@ export default {
       activeIndex: 0,
       treeSelectItemInd: 0,
       treeSelect: [],
-      TCFXListTreeSelec: [], //选中确定的经销商
+      sfaStoreChainsContactList: [], //选中确定的经销商
       activatedTCFXList: [], //选中的经销商
-      treeSelectchildrenItem: [
-        [
-          {
-            code: '0110053190',
-            name: '苏州市宏图商贸有限公司',
-            dictLabel: '涂料',
-            dictValue: 'T101',
-          },
-          {
-            code: '0110044320',
-            name: '苏州市金水涂料商行',
-            dictLabel: '涂料',
-            dictValue: 'T101',
-          },
-          {
-            code: '0110053191',
-            name: '苏州市宏图商贸有限公司1',
-            dictLabel: '涂料',
-            dictValue: 'T101',
-          },
-        ],
-        [
-          {
-            code: '10110053190',
-            name: '1苏州市宏图商贸有限公司',
-            dictLabel: '质感外墙',
-            dictValue: 'Z104',
-          },
-          {
-            code: '20110044320',
-            name: '2苏州市金水涂料商行',
-            dictLabel: '质感外墙',
-            dictValue: 'Z104',
-          },
-          {
-            code: '30110053191',
-            name: '3苏州市宏图商贸有限公司1',
-            dictLabel: '质感外墙',
-            dictValue: 'Z104',
-          },
-        ],
-        [
-          {
-            code: '110053190',
-            name: '1苏州市图商贸有限公司',
-            dictLabel: '粉料',
-            dictValue: 'F106',
-          },
-          {
-            code: '110044320',
-            name: '2苏州市水涂料商行',
-            dictLabel: '粉料',
-            dictValue: 'F106',
-          },
-          {
-            code: '110053191',
-            name: '3苏州市商贸有限公司1',
-            dictLabel: '粉料',
-            dictValue: 'F106',
-          },
-        ],
-      ],
     };
   },
   created() {
@@ -1898,6 +1841,13 @@ export default {
         this.$toast('潜在客户类型未填写');
         return;
       }
+      // 同城分销多经销商
+      if (
+        this.verifyStoreType(this.fromValue.storeCategory) &&
+        this.verifyStoreType(this.fromValue.storeCategory).tcfx
+      ) {
+        this.fromValue.sfaStoreChainsContactList = this.sfaStoreChainsContactList;
+      }
       addStore(this.fromValue).then((res) => {
         loading1.clear();
         if (res.code == 200) {
@@ -2011,40 +1961,56 @@ export default {
         }
       }
     },
-    //
+    //获取经销商
     async getStoreChainsContact() {
       // 打开select，上次选中确认数据赋值给选中待确认，回显使用
-      this.activatedTCFXList = JSON.parse(JSON.stringify(this.TCFXListTreeSelec));
-      // if (!this.treeSelect.length) {
-      let treeSelect = await getDictOption({}, 'store_chains_contact');
-      treeSelect.data.forEach((val) => {
-        val.text = val.dictLabel;
-        val.children = [];
+      this.activatedTCFXList = JSON.parse(JSON.stringify(this.sfaStoreChainsContactList));
+      if (!this.treeSelect.length) {
+        listChainsByCategory().then((res) => {
+          // let treeSelect = await getDictOption({}, 'store_chains_contact');
+          // 初始化数据
+          res.data.forEach((val) => {
+            val.dot = false;
+          });
+          this.treeSelect = res.data;
+        });
+      }
+      for (let x = 0; x < this.treeSelect.length; x++) {
         // 设置左侧选中图标
-        let activate = this.activatedTCFXList.find((item) => item.dictValue == val.dictValue);
-        val.dot = activate ? true : false;
-      });
-      this.treeSelect = treeSelect.data;
+        let activate = this.activatedTCFXList.find((item) => {
+          return item.CategoryCode == this.treeSelect[x].code;
+        });
+        this.treeSelect[x].dot = activate ? true : false;
+        // 右侧选中返现
+        let children = this.treeSelect[x].children;
+        if (children) {
+          for (let y = 0; y < children.length; y++) {
+            let activate = this.activatedTCFXList.find((item) => {
+              return children[y].CustomerCode == item.CustomerCode;
+            });
+            if (activate) {
+              children[y].Check = true;
+            } else {
+              children[y].Check = false;
+            }
+          }
+        }
+      }
+      this.$forceUpdate();
       this.activeIndex = 0;
-      this.clickNav(0);
-      // }
     },
     // 左侧数据点击
     clickNav(index) {
-      let children = this.treeSelect[index].children;
-      // if (!children.length) {
-      this.treeSelect[index].children = this.treeSelectchildrenItem[index];
-      // }
-      this.treeSelect[index].children.forEach((val) => {
-        // 回显右侧选中
-        let activate = this.activatedTCFXList.find((item) => item.code == val.code);
-        val.Check = activate ? true : false;
-      });
+      // this.treeSelect[index].children.forEach((val) => {
+      //   // 回显右侧选中
+      //   let activate = this.activatedTCFXList.find((item) => item.code == val.code);
+      //   val.Check = activate ? true : false;
+      // });
     },
     // 右侧数据点击
     treeSelectItemClick(itemData, index, val, ind) {
       itemData.children.forEach((item) => {
-        if (val.code == item.code) {
+        if (val.CustomerCode == item.CustomerCode) {
           item.Check = !item.Check;
           // 设置左侧选中图标
           itemData.dot = item.Check;
@@ -2052,42 +2018,23 @@ export default {
           item.Check = false;
         }
       });
-      // 过滤右侧选中
-      let eidx = -1;
-      this.activatedTCFXList.forEach((evn, eid) => {
-        // 是否有同级别的
-        if (evn.dictValue == itemData.dictValue) {
-          eidx = eid;
-        }
-      });
-      if (eidx != -1) {
-        // 存在同级别额先删除
-        this.activatedTCFXList.splice(eidx, 1);
-        // 如果当前是选中，在将其添加
-        if (val.Check) this.activatedTCFXList.push(val);
-      } else {
-        this.activatedTCFXList.push(val);
-      }
       this.$forceUpdate();
     },
     // 分销店 确认
     treeSelectConfirm() {
-      debugger;
-      let required = false;
       let treeSelectArr = [];
       this.treeSelect.forEach((item) => {
         if (item.dot) {
-          required = true;
           let childrenData = item.children.find((val) => val.Check);
           treeSelectArr.push(childrenData);
         }
       });
-      if (!required) {
-        this.$toast('请选择经销商');
+      if (!treeSelectArr.length) {
+        this.$toast('请选择至少选择一个经销商');
         return false;
       }
       console.log(treeSelectArr);
-      this.TCFXListTreeSelec = treeSelectArr;
+      this.sfaStoreChainsContactList = treeSelectArr;
       this.showPickerChainsList = false;
     },
   },
@@ -2199,7 +2146,7 @@ export default {
     .van-field__control--custom {
       flex-direction: column;
       align-items: self-start;
-      .TCFXListTreeSelec {
+      .sfaStoreChainsContactList {
         padding: 3px;
       }
     }

src/views/storeManagement/storeDetail.vue

@@ -126,14 +126,14 @@
               ">
               <van-field label="经销商" readonly class="TCFXList">
                 <template #input>
-                  <template v-if="list.TCFXListTreeSelec">
+                  <template v-if="list.sfaStoreChainsContactList">
                     <div
-                      class="TCFXListTreeSelec"
-                      v-for="(item, index) in list.TCFXListTreeSelec"
+                      class="sfaStoreChainsContactList"
+                      v-for="(item, index) in list.sfaStoreChainsContactList"
                       :key="index">
-                      {{ item.dictLabel }}
-                      {{ item.code }}
-                      {{ item.name }}
+                      {{ item.CategoryName }}
+                      {{ item.CustomerCode }}
+                      {{ item.CustomerName }}
                     </div>
                   </template>
                 </template>

src/views/storeManagement/storeEdit.vue

@@ -64,21 +64,19 @@
                         <span class="van-f-red">*</span>
                       </template>
                       <template #input>
-                        <template v-if="TCFXListTreeSelec.length">
+                        <template v-if="sfaStoreChainsContactList.length">
                           <div
-                            class="TCFXListTreeSelec"
-                            v-for="(item, index) in TCFXListTreeSelec"
+                            class="sfaStoreChainsContactList"
+                            v-for="(item, index) in sfaStoreChainsContactList"
                             :key="index">
-                            {{ item.dictLabel }}
-                            {{ item.code }}
-                            {{ item.name }}
+                            {{ item.CategoryName }}
+                            {{ item.CustomerCode }}
+                            {{ item.CustomerName }}
                           </div>
                         </template>
-                        <template v-else
-                          ><span style="color: rgb(150, 151, 153)"
-                            >点击选择经销商名称</span
-                          ></template
-                        >
+                        <template v-else>
+                          <span style="color: rgb(150, 151, 153)"> 点击选择经销商名称 </span>
+                        </template>
                       </template>
                     </van-field>
                   </van-col>
@@ -800,70 +798,8 @@ export default {
       activeIndex: 0,
       treeSelectItemInd: 0,
       treeSelect: [],
-      TCFXListTreeSelec: [], //选中确定的经销商
+      sfaStoreChainsContactList: [], //选中确定的经销商
       activatedTCFXList: [], //选中的经销商
-      treeSelectchildrenItem: [
-        [
-          {
-            code: '0110053190',
-            name: '苏州市宏图商贸有限公司',
-            dictLabel: '涂料',
-            dictValue: 'T101',
-          },
-          {
-            code: '0110044320',
-            name: '苏州市金水涂料商行',
-            dictLabel: '涂料',
-            dictValue: 'T101',
-          },
-          {
-            code: '0110053191',
-            name: '苏州市宏图商贸有限公司1',
-            dictLabel: '涂料',
-            dictValue: 'T101',
-          },
-        ],
-        [
-          {
-            code: '10110053190',
-            name: '1苏州市宏图商贸有限公司',
-            dictLabel: '质感外墙',
-            dictValue: 'Z104',
-          },
-          {
-            code: '20110044320',
-            name: '2苏州市金水涂料商行',
-            dictLabel: '质感外墙',
-            dictValue: 'Z104',
-          },
-          {
-            code: '30110053191',
-            name: '3苏州市宏图商贸有限公司1',
-            dictLabel: '质感外墙',
-            dictValue: 'Z104',
-          },
-        ],
-        [
-          {
-            code: '110053190',
-            name: '1苏州市图商贸有限公司',
-            dictLabel: '粉料',
-            dictValue: 'F106',
-          },
-          {
-            code: '110044320',
-            name: '2苏州市水涂料商行',
-            dictLabel: '粉料',
-            dictValue: 'F106',
-          },
-          {
-            code: '110053191',
-            name: '3苏州市商贸有限公司1',
-            dictLabel: '粉料',
-            dictValue: 'F106',
-          },
-        ],
-      ],
     };
   },
   activated() {
@@ -1321,6 +1257,7 @@ export default {
 
         if (res.code == 200) {
           this.fromValue = res.data;
+          this.sfaStoreChainsContactList = this.fromValue.sfaStoreChainsContactList;
           if (this.fromValue.imgSed && this.fromValue.imgSed != '') {
             this.displayImg = this.fromValue.imgSed.split(',');
           } else {
@@ -1923,40 +1860,55 @@ export default {
         startPosition: index,
       });
     },
-    //
+    //获取经销商
     async getStoreChainsContact() {
       // 打开select，上次选中确认数据赋值给选中待确认，回显使用
-      this.activatedTCFXList = JSON.parse(JSON.stringify(this.TCFXListTreeSelec));
-      // if (!this.treeSelect.length) {
-      let treeSelect = await getDictOption({}, 'store_chains_contact');
-      treeSelect.data.forEach((val) => {
-        val.text = val.dictLabel;
-        val.children = [];
+      this.activatedTCFXList = JSON.parse(JSON.stringify(this.sfaStoreChainsContactList));
+      if (!this.treeSelect.length) {
+        listChainsByCategory().then((res) => {
+          // 初始化数据
+          res.data.forEach((val) => {
+            val.dot = false;
+          });
+          this.treeSelect = res.data;
+        });
+      }
+      for (let x = 0; x < this.treeSelect.length; x++) {
         // 设置左侧选中图标
-        let activate = this.activatedTCFXList.find((item) => item.dictValue == val.dictValue);
-        val.dot = activate ? true : false;
-      });
-      this.treeSelect = treeSelect.data;
+        let activate = this.activatedTCFXList.find((item) => {
+          return item.CategoryCode == this.treeSelect[x].code;
+        });
+        this.treeSelect[x].dot = activate ? true : false;
+        // 右侧选中返现
+        let children = this.treeSelect[x].children;
+        if (children) {
+          for (let y = 0; y < children.length; y++) {
+            let activate = this.activatedTCFXList.find((item) => {
+              return children[y].CustomerCode == item.CustomerCode;
+            });
+            if (activate) {
+              children[y].Check = true;
+            } else {
+              children[y].Check = false;
+            }
+          }
+        }
+      }
+      this.$forceUpdate();
       this.activeIndex = 0;
-      this.clickNav(0);
-      // }
     },
     // 左侧数据点击
     clickNav(index) {
-      let children = this.treeSelect[index].children;
-      // if (!children.length) {
-      this.treeSelect[index].children = this.treeSelectchildrenItem[index] || [];
-      // }
-      this.treeSelect[index].children.forEach((val) => {
-        // 回显右侧选中
-        let activate = this.activatedTCFXList.find((item) => item.code == val.code);
-        val.Check = activate ? true : false;
-      });
+      // this.treeSelect[index].children.forEach((val) => {
+      //   // 回显右侧选中
+      //   let activate = this.activatedTCFXList.find((item) => item.code == val.code);
+      //   val.Check = activate ? true : false;
+      // });
     },
     // 右侧数据点击
     treeSelectItemClick(itemData, index, val, ind) {
       itemData.children.forEach((item) => {
-        if (val.code == item.code) {
+        if (val.CustomerCode == item.CustomerCode) {
           item.Check = !item.Check;
           // 设置左侧选中图标
           itemData.dot = item.Check;
@@ -1964,41 +1916,23 @@ export default {
           item.Check = false;
         }
       });
-      // 过滤右侧选中
-      let eidx = -1;
-      this.activatedTCFXList.forEach((evn, eid) => {
-        // 是否有同级别的
-        if (evn.dictValue == itemData.dictValue) {
-          eidx = eid;
-        }
-      });
-      if (eidx != -1) {
-        // 存在同级别额先删除
-        this.activatedTCFXList.splice(eidx, 1);
-        // 如果当前是选中，在将其添加
-        if (val.Check) this.activatedTCFXList.push(val);
-      } else {
-        this.activatedTCFXList.push(val);
-      }
       this.$forceUpdate();
     },
-    // 同城分销 确认
+    // 分销店 确认
     treeSelectConfirm() {
-      let required = false;
       let treeSelectArr = [];
       this.treeSelect.forEach((item) => {
         if (item.dot) {
-          required = true;
           let childrenData = item.children.find((val) => val.Check);
           treeSelectArr.push(childrenData);
         }
       });
-      if (!required) {
-        this.$toast('请选择经销商');
+      if (!treeSelectArr.length) {
+        this.$toast('请选择至少选择一个经销商');
         return false;
       }
       console.log(treeSelectArr);
-      this.TCFXListTreeSelec = treeSelectArr;
+      this.sfaStoreChainsContactList = treeSelectArr;
       this.showPickerChainsList = false;
     },
   },
@@ -2146,7 +2080,7 @@ export default {
     .van-field__control--custom {
       flex-direction: column;
       align-items: self-start;
-      .TCFXListTreeSelec {
+      .sfaStoreChainsContactList {
         padding: 3px;
       }
     }