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

src/views/deviceOutside/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bgcolor">
+  <div class="bgcolor deviceOutside">
     <div class="navBarTOP">
       <!--        顶部条-->
       <van-nav-bar class="navBar" title="计划外">
@@ -246,7 +246,20 @@
                   :src="sbpmdh"
                   @click="linkapp(item)" />
               </div>
-              <div class="info" v-if="typeShow">经销商：{{ item.chainName }}</div>
+              <!-- 分销店 -->
+              <template v-if="item.sfaStoreType.type == 'fxd'">
+                <div class="info" v-if="typeShow">
+                  经销商：
+                  <template
+                    v-if="item.TCFXListTreeSelec"
+                    v-for="(item, index) in item.TCFXListTreeSelec">
+                    <span class="TCFXListItem" :key="index">{{ item.name }}</span>
+                  </template>
+                </div>
+              </template>
+              <template v-else>
+                <div class="info" v-if="typeShow">经销商：{{ item.chainName }}</div>
+              </template>
               <!-- storeLonExist 门店是否存在经纬度 字段false=不显示导航和距离，true=显示 -->
               <div class="info" v-if="item.storeLonExist">
                 距离：{{ Micrometer(item.distance) }}m
@@ -2667,4 +2680,12 @@ export default {
 .textsize {
   font-size: 14px;
 }
+.deviceOutside {
+  .TCFXListItem {
+    display: inline-block;
+    border: 1px solid #ccc;
+    padding: 3px 5px;
+    margin: 0 5px;
+  }
+}
 </style>

src/views/storeManagement/storeAdd.vue

@@ -50,16 +50,15 @@
               style="background-color: white; padding: 0 14px"
               class="morelaji"
               v-if="fromValue.storeCategory != 'C917'">
+              <!-- 分销店 -->
               <template
                 v-if="
                   verifyStoreType(fromValue.storeCategory) &&
-                  verifyStoreType(fromValue.storeCategory).type == 'tcfxd'
+                  verifyStoreType(fromValue.storeCategory).type == 'fxd'
                 ">
-                <van-row
-                  v-if="fromValue.storeCategory != 'C917'"
-                  style="border-bottom: 1px solid #ebedf0">
+                <van-row style="border-bottom: 1px solid #ebedf0">
                   <van-col span="24">
-                    <van-field label="经销商名称" @click="showPickerChainsListFn">
+                    <van-field label="经销商名称" @click="showPickerChainsListFn" class="TCFXList">
                       <template #left-icon>
                         <span class="van-f-red">*</span>
                       </template>
@@ -69,11 +68,16 @@
                             class="TCFXListTreeSelec"
                             v-for="(item, index) in TCFXListTreeSelec"
                             :key="index">
+                            {{ item.dictLabel }}
                             {{ item.code }}
                             {{ item.name }}
                           </div>
                         </template>
-                        <template v-else>点击选择经销商名称</template>
+                        <template v-else
+                          ><span style="color: rgb(150, 151, 153)"
+                            >点击选择经销商名称</span
+                          ></template
+                        >
                       </template>
                     </van-field>
                   </van-col>
@@ -481,10 +485,11 @@
     </van-popup>
     <!--经销商-->
     <van-popup v-model="showPickerChainsList" position="bottom" class="agencyBox">
+      <!-- 分销店 -->
       <template
         v-if="
           verifyStoreType(fromValue.storeCategory) &&
-          verifyStoreType(fromValue.storeCategory).type == 'tcfxd'
+          verifyStoreType(fromValue.storeCategory).type == 'fxd'
         ">
         <div class="header_btn">
           <div class="cancel" @click="showPickerChainsList = false">取消</div>
@@ -826,48 +831,67 @@ export default {
       activeIndex: 0,
       treeSelectItemInd: 0,
       treeSelect: [],
-      TCFXListTreeSelec: [],
+      TCFXListTreeSelec: [], //选中确定的经销商
+      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',
           },
         ],
       ],
@@ -1684,10 +1708,10 @@ export default {
         return;
       } else {
         this.showPickerChainsList = true;
-        // 同城分销
+        // 分销店
         if (
           this.verifyStoreType(this.fromValue.storeCategory) &&
-          this.verifyStoreType(this.fromValue.storeCategory).type == 'tcfxd'
+          this.verifyStoreType(this.fromValue.storeCategory).type == 'fxd'
         ) {
           this.getStoreChainsContact();
         }
@@ -1982,37 +2006,64 @@ export default {
     },
     //
     async getStoreChainsContact() {
-      if (!this.treeSelect.length) {
-        let treeSelect = await getDictOption({}, 'store_chains_contact');
-        treeSelect.data.forEach((val) => {
-          val.text = val.dictLabel;
-          val.children = [];
-        });
-        this.treeSelect = treeSelect.data;
-        this.clickNav(0);
-      }
+      // 打开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 = [];
+        // 设置左侧选中图标
+        let activate = this.activatedTCFXList.find((item) => item.dictValue == val.dictValue);
+        val.dot = activate ? true : false;
+      });
+      this.treeSelect = treeSelect.data;
       this.activeIndex = 0;
+      this.clickNav(0);
+      // }
     },
     // 左侧数据点击
     clickNav(index) {
       let children = this.treeSelect[index].children;
-      if (!children.length) {
-        this.treeSelect[index].children = this.treeSelectchildrenItem[index];
-      }
+      // 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;
+      });
     },
     // 右侧数据点击
     treeSelectItemClick(itemData, index, val, ind) {
       itemData.children.forEach((item) => {
         if (val.code == item.code) {
           item.Check = !item.Check;
+          // 设置左侧选中图标
           itemData.dot = item.Check;
         } else {
           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 = [];
@@ -2020,14 +2071,11 @@ export default {
         if (item.dot) {
           required = true;
           let childrenData = item.children.find((val) => val.Check);
-          treeSelectArr.push({
-            code: childrenData.code,
-            name: childrenData.name,
-          });
+          treeSelectArr.push(childrenData);
         }
       });
       if (!required) {
-        this.$toast('经销商未填写');
+        this.$toast('请选择经销商');
         return false;
       }
       console.log(treeSelectArr);
@@ -2139,5 +2187,14 @@ export default {
       }
     }
   }
+  .TCFXList {
+    .van-field__control--custom {
+      flex-direction: column;
+      align-items: self-start;
+      .TCFXListTreeSelec {
+        padding: 3px;
+      }
+    }
+  }
 }
 </style>

src/views/storeManagement/storeDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="navBarTOP">
+    <div class="navBarTOP storeDetail">
       <!-- 顶部条 -->
       <van-nav-bar class="navBar" title="客户详情" left-arrow @click-left="onClickLeft">
         <template #right>
@@ -117,16 +117,33 @@
             v-model="list.telephone"
             label="联系电话"
             v-if="list.storeCategory != 'C917'" />
-          <van-field
-            readonly
-            v-model="list.chainCode"
-            label="经销商编号"
-            v-if="list.storeCategory != 'C917'" />
-          <van-field
-            readonly
-            v-model="list.chainName"
-            label="经销商名称"
-            v-if="list.storeCategory != 'C917'" />
+          <template v-if="list.storeCategory != 'C917'">
+            <!-- 分销店 -->
+            <template
+              v-if="
+                verifyStoreType(list.storeCategory) &&
+                verifyStoreType(list.storeCategory).type == 'fxd'
+              ">
+              <van-field label="经销商" readonly class="TCFXList">
+                <template #input>
+                  <template v-if="list.TCFXListTreeSelec.length">
+                    <div
+                      class="TCFXListTreeSelec"
+                      v-for="(item, index) in list.TCFXListTreeSelec"
+                      :key="index">
+                      {{ item.dictLabel }}
+                      {{ item.code }}
+                      {{ item.name }}
+                    </div>
+                  </template>
+                </template>
+              </van-field>
+            </template>
+            <template v-else>
+              <van-field readonly v-model="list.chainCode" label="经销商编号" />
+              <van-field readonly v-model="list.chainName" label="经销商名称" />
+            </template>
+          </template>
           <van-field readonly v-model="list.salesmanName" label="销售员" />
           <div v-if="list.storeCategory != 'C917'">
             <van-field
@@ -1796,4 +1813,15 @@ export default {
     }
   }
 }
+.storeDetail {
+  .TCFXList {
+    .van-field__control--custom {
+      flex-direction: column;
+      align-items: self-start;
+      .TCFXListTreeSelec {
+        padding: 3px;
+      }
+    }
+  }
+}
 </style>

src/views/storeManagement/storeEdit.vue

@@ -47,46 +47,82 @@
                 <span class="van-f-red">*</span>
               </template>
             </van-field>
-            <div style="background-color: white; padding: 0 14px" class="morelaji">
-              <van-row
-                v-if="fromValue.storeCategory != 'C917'"
-                style="border-bottom: 1px solid #ebedf0">
-                <van-col span="20">
-                  <van-field
-                    rows="1"
-                    autosize
-                    type="textarea"
-                    readonly
-                    clickable
-                    name="picker"
-                    :value="fromValue.chainName"
-                    label="经销商名称"
-                    placeholder="点击选择经销商名称"
-                    @click="showPickerChainsListFn">
-                    <template #left-icon>
-                      <span
-                        v-if="
-                          fromValue.ifJzStoreType != 1 &&
-                          fromValue.storeCategory != 'C912' &&
-                          fromValue.storeCategory != 'C917'
-                        "
-                        class="van-f-red"
-                        >*</span
-                      >
-                    </template>
-                  </van-field>
-                </van-col>
-                <van-col span="4"
-                  ><van-button
-                    size="small"
-                    type="info"
-                    style="margin-top: 6px"
-                    native-type="button"
-                    @click="moreTypeShowFn"
-                    ><van-icon name="list-switching" />更多</van-button
-                  ></van-col
-                >
-              </van-row>
+            <div
+              style="background-color: white; padding: 0 14px"
+              class="morelaji"
+              v-if="fromValue.storeCategory != 'C917'">
+              <!-- 分销店 -->
+              <template
+                v-if="
+                  verifyStoreType(fromValue.storeCategory) &&
+                  verifyStoreType(fromValue.storeCategory).type == 'fxd'
+                ">
+                <van-row style="border-bottom: 1px solid #ebedf0">
+                  <van-col span="24">
+                    <van-field label="经销商名称" @click="showPickerChainsListFn" class="TCFXList">
+                      <template #left-icon>
+                        <span class="van-f-red">*</span>
+                      </template>
+                      <template #input>
+                        <template v-if="TCFXListTreeSelec.length">
+                          <div
+                            class="TCFXListTreeSelec"
+                            v-for="(item, index) in TCFXListTreeSelec"
+                            :key="index">
+                            {{ item.dictLabel }}
+                            {{ item.code }}
+                            {{ item.name }}
+                          </div>
+                        </template>
+                        <template v-else
+                          ><span style="color: rgb(150, 151, 153)"
+                            >点击选择经销商名称</span
+                          ></template
+                        >
+                      </template>
+                    </van-field>
+                  </van-col>
+                </van-row>
+              </template>
+              <template v-else>
+                <van-row style="border-bottom: 1px solid #ebedf0">
+                  <van-col span="20">
+                    <van-field
+                      rows="1"
+                      autosize
+                      type="textarea"
+                      readonly
+                      clickable
+                      name="picker"
+                      :value="fromValue.chainName"
+                      label="经销商名称"
+                      placeholder="点击选择经销商名称"
+                      @click="showPickerChainsListFn">
+                      <template #left-icon>
+                        <span
+                          v-if="
+                            fromValue.ifJzStoreType != 1 &&
+                            fromValue.storeCategory != 'C912' &&
+                            fromValue.storeCategory != 'C917'
+                          "
+                          class="van-f-red"
+                          >*</span
+                        >
+                      </template>
+                    </van-field>
+                  </van-col>
+                  <van-col span="4"
+                    ><van-button
+                      size="small"
+                      type="info"
+                      style="margin-top: 6px"
+                      native-type="button"
+                      @click="moreTypeShowFn"
+                      ><van-icon name="list-switching" />更多</van-button
+                    ></van-col
+                  >
+                </van-row>
+              </template>
             </div>
             <van-field
               v-model="fromValue.storeName"
@@ -327,7 +363,7 @@
                         @newimgarr="newimgarr1"
                         imgText="陈列照(至少一张)"
                         :type="2"
-                        count="1"></upload-img>
+                        :count="1"></upload-img>
                     </div>
                   </div>
                 </div>
@@ -431,13 +467,54 @@
         @cancel="showPicker = false" />
     </van-popup>
     <!--经销商-->
-    <van-popup v-model="showPickerChainsList" position="bottom">
-      <van-picker
-        show-toolbar
-        :columns="ChainsList"
-        value-key="chainName"
-        @confirm="onConfirmChainsList"
-        @cancel="showPickerChainsList = false" />
+    <van-popup v-model="showPickerChainsList" position="bottom" class="agencyBox">
+      <!-- 分销店 -->
+      <template
+        v-if="
+          verifyStoreType(fromValue.storeCategory) &&
+          verifyStoreType(fromValue.storeCategory).type == 'fxd'
+        ">
+        <div class="header_btn">
+          <div class="cancel" @click="showPickerChainsList = false">取消</div>
+          <div class="confirm" @click="treeSelectConfirm">确定</div>
+        </div>
+        <van-tree-select
+          :items="treeSelect"
+          :main-active-index.sync="activeIndex"
+          @click-nav="clickNav">
+          <template #content>
+            <div
+              class="treeSelectchildren"
+              v-if="activeIndex == index"
+              v-for="(item, index) in treeSelect"
+              :key="index">
+              <div
+                class="item"
+                v-for="(val, ind) in item.children"
+                :key="ind"
+                @click="treeSelectItemClick(item, index, val, ind)">
+                <div
+                  :class="{
+                    'van-radio__icon': true,
+                    'van-radio__icon--round': true,
+                    'van-radio__icon--checked': val.Check,
+                  }">
+                  <i class="van-icon van-icon-success"></i>
+                </div>
+                <div class="value">{{ val.code }} {{ val.name }}</div>
+              </div>
+            </div>
+          </template>
+        </van-tree-select>
+      </template>
+      <template v-else>
+        <van-picker
+          show-toolbar
+          :columns="ChainsList"
+          value-key="chainName"
+          @confirm="onConfirmChainsList"
+          @cancel="showPickerChainsList = false" />
+      </template>
     </van-popup>
     <van-popup v-model="moreTypeShow" position="bottom" style="height: 80%; font-size: 14px">
       <van-row style="background-color: #f5f5f5">
@@ -580,6 +657,7 @@ import {
   getMainRelationList,
   getManagementModelList,
   getpotentialCustomerTypeList,
+  getDictOption,
 } from '@/api/index';
 import uploadImg from '@/components/uploadImgVStore';
 import uploadImgc from '@/components/uploadImgVStorec';
@@ -719,6 +797,73 @@ export default {
       pLat: '',
       pLot: '',
       displayImg: [],
+      activeIndex: 0,
+      treeSelectItemInd: 0,
+      treeSelect: [],
+      TCFXListTreeSelec: [], //选中确定的经销商
+      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() {
@@ -1370,6 +1515,13 @@ export default {
         return;
       } else {
         this.showPickerChainsList = true;
+        // 分销店
+        if (
+          this.verifyStoreType(this.fromValue.storeCategory) &&
+          this.verifyStoreType(this.fromValue.storeCategory).type == 'fxd'
+        ) {
+          this.getStoreChainsContact();
+        }
       }
     },
     getTCFXList() {
@@ -1753,6 +1905,84 @@ 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 = [];
+        // 设置左侧选中图标
+        let activate = this.activatedTCFXList.find((item) => item.dictValue == val.dictValue);
+        val.dot = activate ? true : false;
+      });
+      this.treeSelect = treeSelect.data;
+      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;
+      });
+    },
+    // 右侧数据点击
+    treeSelectItemClick(itemData, index, val, ind) {
+      itemData.children.forEach((item) => {
+        if (val.code == item.code) {
+          item.Check = !item.Check;
+          // 设置左侧选中图标
+          itemData.dot = item.Check;
+        } else {
+          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('请选择经销商');
+        return false;
+      }
+      console.log(treeSelectArr);
+      this.TCFXListTreeSelec = treeSelectArr;
+      this.showPickerChainsList = false;
+    },
   },
 };
 </script>
@@ -1865,4 +2095,43 @@ export default {
 .morelaji .van-cell {
   padding: 10px 0;
 }
+.storeEdit {
+  .agencyBox {
+    .header_btn {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      font-size: 16px;
+      border-bottom: 1px solid #ccc;
+      div {
+        padding: 3px;
+      }
+    }
+    .van-sidebar {
+      width: 100px;
+      text-align: center;
+      flex: none;
+    }
+    .treeSelectchildren {
+      .item {
+        display: flex;
+        align-items: center;
+        padding: 5px;
+        .value {
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+  .TCFXList {
+    .van-field__control--custom {
+      flex-direction: column;
+      align-items: self-start;
+      .TCFXListTreeSelec {
+        padding: 3px;
+      }
+    }
+  }
+}
 </style>