feat: 下拉选择组件 - 支持多选&交互逻辑

project/src/components/assembly/screen/channelV2.vue

@@ -11,6 +11,9 @@
       :clearable="clearable"
       filterable
       :disabled="disabled"
+      :multiple="multiple"
+      :collapse-tags="collapseTags"
+      :multiple-limit="multipleLimit"
       @change="onChangeResultVal"
     >
       <el-option v-for="item in options" :key="item.key" :label="item.val" :value="item.key" />
@@ -28,7 +31,7 @@ import {
 export default {
   props: {
     value: {
-      type: String | Number,
+      type: String | Number | Array,
       default: () => '',
     },
     clearable: {
@@ -62,6 +65,18 @@ export default {
       type: String,
       default: () => ''
     },
+    multiple: {
+      type: Boolean,
+      default: () => false,
+    },
+    collapseTags: {
+      type: Boolean,
+      default: () => false,
+    },
+    multipleLimit: {
+      type: Number,
+      default: () => 0
+    },
   },
   data () {
     return {
@@ -143,218 +158,166 @@ export default {
         });
       }
     },
-    getMpAccountHSList() { // 花生平台 MP账号
-      this.$axios.get(this.URL.BASEURL + this.URL.dataBoardHS_wxAccountList, {
+    async getMpAccountHSList() { // 花生平台 MP账号
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.dataBoardHS_wxAccountList, {
         params: {
           is_select: 1
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.account_name
-            item.key = item.wechat_account_id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.account_name
+          item.key = item.wechat_account_id
+        });
+      }
     },
-    getPlatformList() { // 平台选项
-      this.$axios.post(this.URL.BASEURL + this.URL.getPlatformOptions, {}).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.platform_name
-            item.key = item.platform_id
-          });
-          this.$emit('platformList', res.rst)
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+    async getPlatformList() { // 平台选项
+      const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.getPlatformOptions, {})
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.platform_name
+          item.key = item.platform_id
+        });
+        this.$emit('platformList', res.rst)
+      }
     },
-    getAdqAccountList() { // ADQ账号选项
-      this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
+    async getAdqAccountList() { // ADQ账号选项
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.adqAccount_list, {
         params: {
           is_select: 1
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.account_id
-            item.key = item.account_id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.account_id
+          item.key = item.account_id
+        });
+      }
     },
-    getAllAccountList() { // 总表账号选项
-      this.$axios.get(this.URL.BASEURL + this.URL.dataBoard_allAccountOptions, {
+    async getAllAccountList() { // 总表账号选项
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.dataBoard_allAccountOptions, {
         params: {
           keyword: ''
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.account_name
-            item.key = item.account_id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.account_name
+          item.key = item.account_id
+        });
+      }
     },
-    getsysUserList () {
-      this.$axios.get(this.URL.BASEURL + this.URL.getsysUserList, {
+    async getsysUserList () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.getsysUserList, {
         params: {
           ...this.afferent_params
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.name;
-            item.key = item.admin_id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.name;
+          item.key = item.admin_id
+        });
+      }
     },
-    init () {
-      this.$axios.get(this.URL.BASEURL + this.URL.addWayList, {}).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+    async init () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.addWayList, {})
+      if (res && res.errno == 0) {
+        this.options = res.rst
+      }
     },
-    thePublic_init () {
-      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_wxAccountList, {
+    async thePublic_init () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_wxAccountList, {
         params: {
           is_select: 1,
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.account_name;
-            item.key = item.wechat_account_id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.account_name;
+          item.key = item.wechat_account_id
+        });
+      }
     },
-    getOfficialAccount () {
-      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_officialAccountsList, {
+    async getOfficialAccount () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_officialAccountsList, {
         params: {
           is_select: 1,
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.account_name;
-            item.key = item.wechat_account_id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.account_name;
+          item.key = item.wechat_account_id
+        });
+      }
     },
-    dramaList_init () {
-      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_dramaList, {
+    async dramaList_init () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_dramaList, {
         params: {
           is_select: 1
         }
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.name;
-            item.key = item.id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.name;
+          item.key = item.id
+        });
+      }
     },
-    popularizCompanys_init () {
-      this.$axios.get(this.URL.BASEURL + this.URL.stat_popularizCompanys, {
+    async popularizCompanys_init () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.stat_popularizCompanys, {
         params: this.afferent_params
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.principalName;
-            item.key = item.principalName
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.principalName;
+          item.key = item.principalName
+        });
+      }
     },
-    pitcher_init () {
-      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_pitcherList, {
+    async pitcher_init () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_pitcherList, {
         params: this.afferent_params
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.name;
-            item.key = item.id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.name;
+          item.key = item.id
+        });
+      }
     },
-    reportRule_init () {
-      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_reportRuleList, {
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.name;
-            item.key = item.id
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+    async reportRule_init () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_reportRuleList, {
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.name;
+          item.key = item.id
+        });
+      }
     },
-    getCorpIdList () {
-      this.$axios.get(this.URL.BASEURL + this.URL.pitcher_getCorpIdList, {
-      }).then((res) => {
-        var res = res.data
-        if (res && res.errno == 0) {
-          this.options = res.rst
-          this.options.forEach((item) => {
-            item.val = item.corp_name;
-            item.key = item.corpid
-          });
-        } else if (res.errno != 4002) {
-        }
-      }).catch((err) => {
-      });
+    async getCorpIdList () {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.pitcher_getCorpIdList, {
+      })
+      if (res && res.errno == 0) {
+        this.options = res.rst
+        this.options.forEach((item) => {
+          item.val = item.corp_name;
+          item.key = item.corpid
+        });
+      }
     },
     handleGetOptions() {
       if (this.type == 'assignment_status') {

project/src/components/manage/systemMsg.vue

@@ -8,7 +8,7 @@
       <selfSelectCorp style="margin-right: 30px;" v-model="filter.corpid" @change="onChangeCorpid" />
       <!-- 成员 -->
       <selfInputV2 style="margin-left: -20px;"  :labelWidth="true" v-model="filter.user_name" label_name="成员" placeholder="请输入" @change="onChangeUserName" />
-
+      <!-- <selfChannelV2 v-model="filter.platform_id" title="平台" type="platform" labelWidth multiple collapseTags :multipleLimit="3" @change="onChangePlatform" /> -->
       <div class="reset" @click="onClickReset">重置</div>
     </div>
     <!-- E 筛选区 -->
@@ -38,17 +38,17 @@
 </template>
 
 <script>
-import selfChannel from '@/components/assembly/screen/channel.vue'
 import selfInputV2 from '@/components/assembly/screen/inputV2.vue'
 import selfSelectCorp from '@/components/assembly/screen/selectCorp.vue'
 import datePicker from '@/components/assembly/screen/datePicker.vue'
+// import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
 
 export default {
   components: {
-    selfChannel,
     selfInputV2,
     selfSelectCorp,
     datePicker,
+    // selfChannelV2,
   },
   data() {
     const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
@@ -75,6 +75,7 @@ export default {
         time: DEFAULT_TIME, // 自定义日期
         corpid: '', // 企微主体
         user_name: '', // 成员
+        // platform_id: [], // 平台
       },
     }
   },
@@ -96,6 +97,7 @@ export default {
           end_date: this.filter.time[1],
           corp_id: this.filter.corpid,
           user_name: this.filter.user_name,
+          // platform_id: this.filter.platform_id,
           page: this.pagination.page,
           page_size: this.pagination.page_size,
         }
@@ -143,12 +145,20 @@ export default {
       this.pagination.page = 1
       this.handleGetData()
     },
+    // // 监听平台选择变化
+    // onChangePlatform(val) {
+    //   console.log('onChangePlatform => ', val)
+    //   this.filter.platform_id = val
+    //   this.pagination.page = 1
+    //   this.handleGetData()
+    // },
     // 监听点击"重置"按钮
     onClickReset() {
       this.reset = !this.reset
       this.filter.time = this.default_time
       this.filter.corpid = ''
       this.filter.user_name = ''
+      // this.filter.platform_id = []
       this.pagination.page = 1
       this.handleGetData()
     },