feat: 企微主体选择下拉组件封装(系统消息模块已使用)

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

@@ -0,0 +1,154 @@
+<template>
+  <div class="common-screen-item">
+    <label class="common-screen-label">{{ labelName }}</label>
+    <!-- 系统管理员 -->
+    <el-cascader v-if="isSuperManage" v-model="system_enterprise_res" size="small" :options="enterpriseList" :props="{value:'self_id',label:'self_name',children:'manage_corp_list'}" @change="onChangeCorpidSystem" clearable filterable :placeholder="placeholder" class="select-cls cascader" />
+    <!-- 非系统管理员 -->
+    <el-select v-else v-model="enterprise_res" size="small" filterable :placeholder="placeholder" @change="onChangeCorpid" clearable class="select-cls">
+      <el-option v-for="(item, index) in enterpriseList" :key="index+'enterpriseList'" :label="item.corp_name?item.corp_name:item.corp_full_name?item.corp_full_name:item.corpid" :value="item.corpid" />
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: () => '',
+    },
+    labelName: {
+      type: String,
+      default: () => '企微主体'
+    },
+    placeholder: {
+      type: String,
+      default: () => '请选择'
+    },
+  },
+  data() {
+    return {
+      enterpriseList: [], // 企微主体数据
+      enterprise: {}, // 当前选择的企微信息
+      system_enterprise_res: [], // 企微主体数据
+      enterprise_res: '',
+    }
+  },
+  computed: {
+    isSuperManage() {
+      return this.$cookie.getCookie('isSuperManage') == 1
+    },
+  },
+  watch: {
+    value(newVal) {
+      if (!newVal) { // 初始化当前企微数据
+        this.enterprise = {}
+        this.system_enterprise_res = []
+        this.enterprise_res = ''
+        return
+      }
+      if (this.isSuperManage) { // 获取超管下的当前企微信息
+        this.handleGetCurrentEnterpriseSys(newVal)
+        const res = this.enterpriseList.find(e => {
+          return e.manage_corp_list && e.manage_corp_list.length && e.manage_corp_list.some(corp => corp.corpid == newVal)
+        })
+        this.system_enterprise_res = res ? [String(res.group_id), newVal] : []
+      } else { // 获取当前企微信息
+        this.handleGetCurrentEnterprise(newVal)
+        this.enterprise_res = this.enterprise.corpid || ''
+      }
+    }
+  },
+  mounted() {
+    this.handleInitCorpOptions()
+  },
+  methods: {
+    // 企业筛选初始化
+    handleInitCorpOptions() {
+      if (this.isSuperManage) {//系统管理员
+        const enterpriseList = this.$store.state.authorize_corpList;
+        enterpriseList.forEach(item => {//为了el-cascader更改props
+          item.self_id = item.group_id.toString();
+          item.self_name = item.group_name;
+          item.manage_corp_list.forEach(item1 => {
+            item1.self_id = item1.corpid;
+            item1.self_name = item1.corp_name;
+          })
+        });
+        this.enterpriseList = enterpriseList
+      } else {
+        this.enterpriseList = this.$store.state.authorize_corpList;
+      }
+    },
+    handleGetCurrentEnterprise(currentCorpid) {
+      if (!currentCorpid) {
+        this.enterprise = {}
+      } else {
+        const res = this.enterpriseList.filter(v => v.corpid == currentCorpid)[0];
+        this.enterprise = res || {}
+      }
+    },
+    handleGetCurrentEnterpriseSys(currentCorpid) {
+      if (!currentCorpid) {
+        this.enterprise = {}
+      } else {
+        this.enterprise = {}
+        this.enterpriseList.forEach((item) => {
+          item.manage_corp_list.forEach((item1) => {
+            if (item1.corpid == currentCorpid) {
+              this.enterprise = item1
+            }
+          })
+        })
+      }
+    },
+    onChangeCorpidSystem(val) {
+      if (val && val.length) {
+        this.handleGetCurrentEnterpriseSys(val[1])
+      } else {
+        this.handleGetCurrentEnterpriseSys('')
+      }
+      this.handleEmit()
+    },
+    onChangeCorpid(val) {
+      this.handleGetCurrentEnterprise(val)
+      this.handleEmit()
+    },
+    handleEmit() {
+      this.$emit('input', this.enterprise.corpid || '')
+      this.$emit('change', this.enterprise.corpid ? this.enterprise : null)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-cls {
+  /deep/ .el-input__inner {
+    width: 210px;
+  }
+  /deep/ &.el-select .el-input.is-focus .el-input__inner,
+  /deep/ &.el-select .el-input__inner:focus,
+  /deep/ &.el-cascader .el-input.is-focus .el-input__inner,
+  /deep/ &.el-cascader .el-input__inner:focus {
+    border-color: #DCDFE6;
+  }
+  /deep/ .el-input__suffix {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid #DCDFE6;
+    right: 0;
+    width: 30px;
+    background-color: #F1F1F1;
+    .el-input__icon {
+      color: #909399;
+    }
+  }
+  &.cascader {
+    /deep/ .el-input__suffix {
+      height: 32px;
+      top: 2px;
+    }
+  }
+}
+</style>

project/src/components/manage/systemMsg.vue

@@ -5,15 +5,7 @@
       <!-- 日期 -->
       <datePicker :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
       <!-- 企微主体 -->
-      <div style="margin-right: 30px;" class="common-screen-item">
-        <label class="common-screen-label">企微主体</label>
-        <!-- 系统管理员 -->
-        <el-cascader v-if="$cookie.getCookie('isSuperManage') == 1" v-model="system_enterprise" size="small" :options="enterpriseList" :props="{value:'self_id',label:'self_name',children:'manage_corp_list'}" @change="onChangeCorpidSystem" clearable filterable placeholder="请选择" class="select-cls cascader" />
-        <!-- 非系统管理员 -->
-        <el-select v-else v-model="filter.corpid" size="small" filterable placeholder="请选择" @change="onChangeCorpid" clearable class="select-cls">
-          <el-option v-for="(item, index) in enterpriseList" :key="index+'enterpriseList'" :label="item.corp_name?item.corp_name:item.corp_full_name?item.corp_full_name:item.corpid" :value="item.corpid" />
-        </el-select>
-      </div>
+      <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" />
 
@@ -48,12 +40,14 @@
 <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'
 
 export default {
   components: {
     selfChannel,
     selfInputV2,
+    selfSelectCorp,
     datePicker,
   },
   data() {
@@ -76,11 +70,6 @@ export default {
         pages: 0,
         total: 0,
       },
-
-      system_enterprise: [], // 企微主体数据
-      enterpriseList: [], // 企微主体数据
-      enterprise: {}, // 当前选择的企微信息
-
       filter: {
         sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
         time: DEFAULT_TIME, // 自定义日期
@@ -91,7 +80,6 @@ export default {
   },
   created() {
     this.initTableHeight()
-    this.handleInitCorpOptions()
     this.handleGetData()
   },
   methods: {
@@ -144,6 +132,11 @@ export default {
       this.pagination.page = 1
       this.handleGetData()
     },
+    // 监听企微主体筛选变化
+    onChangeCorpid(corp) {
+      this.pagination.page = 1
+      this.handleGetData()
+    },
     // 监听客服输入变化
     onChangeUserName(val) {
       this.filter.user_name = val
@@ -154,8 +147,6 @@ export default {
     onClickReset() {
       this.reset = !this.reset
       this.filter.time = this.default_time
-      this.system_enterprise = []
-      this.enterprise = {}
       this.filter.corpid = ''
       this.filter.user_name = ''
       this.pagination.page = 1
@@ -167,52 +158,6 @@ export default {
     initTableHeight() {
       this.height = document.documentElement.clientHeight - 240 > 400 ? document.documentElement.clientHeight - 240 : 400
     },
-    // S 企微主体数据
-    onChangeCorpidSystem(val) {//二级联选择器
-      if (val.length < 1) {
-        this.enterprise = {}
-      } else {
-        this.enterpriseList.forEach((item) => {
-          item.manage_corp_list.forEach((item1) => {
-            if (item1.corpid == val[1]) {
-              this.enterprise = item1
-            }
-          })
-        })
-      }
-      this.filter.corpid = this.enterprise.corpid || ''
-      this.pagination.page = 1
-      this.handleGetData()
-    },
-    onChangeCorpid(val) {
-      if (!val) {
-        this.enterprise = {}
-      } else {
-        const res = this.enterpriseList.filter(v => v.corpid == val)[0];
-        this.enterprise = res || {}
-      }
-      this.filter.corpid = this.enterprise.corpid || ''
-      this.pagination.page = 1
-      this.handleGetData()
-    },
-    // 企业筛选初始化
-    handleInitCorpOptions() {
-      if (this.$cookie.getCookie('isSuperManage') == 1) {//系统管理员
-        const enterpriseList = this.$store.state.authorize_corpList;
-        enterpriseList.forEach(item => {//为了el-cascader更改props
-          item.self_id = item.group_id.toString();
-          item.self_name = item.group_name;
-          item.manage_corp_list.forEach(item1 => {
-            item1.self_id = item1.corpid;
-            item1.self_name = item1.corp_name;
-          })
-        });
-        this.enterpriseList = enterpriseList
-      } else {
-        this.enterpriseList = this.$store.state.authorize_corpList;
-      }
-    },
-    // E 企微主体数据
   },
 }
 </script>