feat: 客户群数据 - 企微主体相关逻辑

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

@@ -230,11 +230,28 @@ export default {
     } else if (this.type == 'groupUserStatus') { // 客户群详情-客户状态
       this.options = [...groupUserStatus]
       this.placeholderVal = '客户状态'
+    } else if (this.type == 'corpAll') { // 企微主体
+      this.getCorpAll()
+      this.placeholderVal = '企微主体'
     } else {
       this.init()
     }
   },
   methods: {
+    async getCorpAll() {
+      const url = `${this.URL.BASEURL}${this.URL.warn_djuserList}`
+      const params = {
+        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+      }
+      const { data: res = {} } = await this.$axios.get(url, { params })
+      if (res && res.errno == 0) {
+        this.options = Array.isArray(res.rst) ? res.rst : []
+        this.options.forEach(item => {
+          item.val = item.corp_name;
+          item.key = item.corpid
+        })
+      }
+    },
     onVisibleChange(val) {
       this.$emit('visible-change', val)
     },

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

@@ -210,11 +210,28 @@ export default {
     } else if (this.type == 'groupUserStatus') { // 客户群详情-客户状态
       this.options = [...groupUserStatus]
       this.placeholderVal = '客户状态'
+    } else if (this.type == 'corpAll') { // 企微主体
+      this.getCorpAll()
+      this.placeholderVal = '企微主体'
     } else {
       this.init()
     }
   },
   methods: {
+    async getCorpAll() {
+      const url = `${this.URL.BASEURL}${this.URL.warn_djuserList}`
+      const params = {
+        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+      }
+      const { data: res = {} } = await this.$axios.get(url, { params })
+      if (res && res.errno == 0) {
+        this.options = Array.isArray(res.rst) ? res.rst : []
+        this.options.forEach(item => {
+          item.val = item.corp_name;
+          item.key = item.corpid
+        })
+      }
+    },
     onVisibleChange(val) {
       this.$emit('visible-change', val)
     },

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

@@ -362,6 +362,20 @@ export default {
         })
       }
     },
+    async getCorpAll() {
+      const url = `${this.URL.BASEURL}${this.URL.warn_djuserList}`
+      const params = {
+        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+      }
+      const { data: res = {} } = await this.$axios.get(url, { params })
+      if (res && res.errno == 0) {
+        this.options = Array.isArray(res.rst) ? res.rst : []
+        this.options.forEach(item => {
+          item.val = item.corp_name;
+          item.key = item.corpid
+        })
+      }
+    },
     handleGetOptions() {
       if (this.type == 'assignment_status') {
         this.options = [...assignment_status]
@@ -473,6 +487,9 @@ export default {
       } else if (this.type == 'groupUserStatus') { // 客户群详情-客户状态
         this.options = [...groupUserStatus]
         this.placeholderVal = '客户状态'
+      } else if (this.type == 'corpAll') { // 企微主体
+        this.getCorpAll()
+        this.placeholderVal = '企微主体'
       } else {
         this.init()
       }

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

@@ -30,12 +30,12 @@
               <div class="memberBox" :key="index + 'userList1' + item.corpid">
                 <i :class="['el-icon-caret-bottom',item.is_open?'reversalAnimation':'']" @click="openEvent(index)"></i>
                 <div class="meberList">
-                  <div class="department" @click="selectUserEvent('all',index)">
+                  <div class="department">
                     <div class="flex" style="align-items: flex-start;">
                       <i class="el-icon-s-cooperation" style="margin-top:3px"></i>
                       <span>{{item.corp_name?item.corp_name:'主体'+(index+1)}}</span>
                     </div>
-                    <div :class="['checkbox',item.is_select?'checkbox_active':'']"><i class="el-icon-check"></i></div>
+                    <div v-if="!isDisableSelectAllCorp" :class="['checkbox',item.is_select?'checkbox_active':'']" @click="selectUserEvent('all',index)"><i class="el-icon-check"></i></div>
                   </div>
                   <div class="memberItem" :style="item.is_open?'display:none':''" v-for="(item1,user_index) in item.user_list" :key="item1.user_id+'-'+user_index" @click="selectUserEvent('user',index,user_index)">
                     <div class="flex" style="flex:1">
@@ -154,6 +154,10 @@ export default {
       type: String,
       default: () => 'operation'   // operation 客服   chatGroup 群主
     },
+    isDisableSelectAllCorp: { // 是否禁用全选企微按钮
+      type: Boolean,
+      default: () => false,
+    },
   },
   watch: {
     reset () {

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

@@ -0,0 +1,734 @@
+<template>
+  <div class="common-screen-item" v-loading="loading">
+    <label class="common-screen-label" v-if="title&&title!=''" :style="labelWidth ? 'width:' + labelWidth : ''">{{title}}</label>
+    <el-popover append-to-body placement="bottom" trigger="click" v-model="visible" :disabled="disabled">
+      <div :style="width?'width:'+width:''" :class="['common-screen-self-box',
+           'common-input-select',
+           final_result&&final_result.length!=0&&clearable&&!disabled?'common-input-select-hover':'',
+           disabled?'pointer-drop':'']" slot="reference">
+        <div :class="['common-screen-self-con',
+        !final_result||final_result.length==0?'common-screen-self-placeholder':'']">
+          <div class="common-screen-self-con-div">
+            <span v-if="!final_result||final_result.length==0">{{placeholder || '请选择'}}</span>
+            <template v-else>
+              <!-- <span v-for="(item,index) in final_result" :key="index">{{item.name}}{{index==final_result.length-1?'':','}}</span> -->
+              <span v-for="(item,idx) in rtSelectedCorpList" :key="item.corpid + '-' + idx">{{item.corp_name}}{{idx==rtSelectedCorpList.length-1?'':','}}</span>
+              <span v-if="rtSelectedCorpList.length && rtSelectedUserList.length">,</span>
+              <span v-for="(item,index) in rtSelectedUserList" :key="item.corpid + '-' + index">{{item.user_name}}{{index==rtSelectedUserList.length-1?'':','}}</span>
+            </template>
+          </div>
+          <i class="el-icon-circle-close other-icon" @click.stop="clear"></i>
+        </div>
+        <div class="common-screen-self-icon" :style="!icon_arrow_bg?'background: none;border: none;color:#c2c6cd':''">
+          <i class="el-icon-arrow-down"></i>
+        </div>
+      </div>
+      <div class="flex" style="padding:10px">
+        <div class="propoverItem">
+          <selfInput :reset='resetFlag' :hasLabel="false" :inputFlag='true' @inputChange='(val)=>{input_keyword = val;userSearch()}' width="270px" style="margin-top:0;margin-bottom:4px" :label_name="source == 'chatGroup' ? '企微主体或群主昵称' : '企微主体或成员昵称'" />
+            <div style="font-size:12px;color:#f9a527;">添加 空格 可进行多成员搜索</div>
+          <div class="allMember">全部企微主体({{corpTotal}}):</div>
+          <div class="memberBoxBig self-scrollbar-3">
+            <template v-for="(item,index) in userList">
+              <div class="memberBox" :key="index + 'userList1' + item.corpid">
+                <i :class="['el-icon-caret-bottom',item.is_open?'reversalAnimation':'']" @click="openEvent(index)"></i>
+                <div class="meberList">
+                  <div class="department">
+                    <div class="flex" style="align-items: flex-start;">
+                      <i class="el-icon-s-cooperation" style="margin-top:3px"></i>
+                      <span>{{item.corp_name?item.corp_name:'主体'+(index+1)}}</span>
+                    </div>
+                    <div v-if="!input_keyword" :class="['checkbox',item.is_select?'checkbox_active':'']" @click="selectUserEvent('all',index)"><i class="el-icon-check"></i></div>
+                  </div>
+                  <div class="memberItem" :style="item.is_open?'display:none':''" v-for="(item1,user_index) in item.user_list" :key="item1.user_id+'-'+user_index" @click="selectUserEvent('user',index,user_index)">
+                    <div class="flex" style="flex:1">
+                      <img class="memberImg" :src="item1.avatar" alt="">
+                      <div class="memberInfo">
+                        <div class="name">
+                          {{item1.name}}
+                          <span :class="['status-tag', item1.is_active == 0 ? 'disabled' : '']">{{ item1.is_active == 1 ? '已激活' : '未激活' }}</span>
+                        </div>
+                        <div class="other">部门：{{ item1.corp_name }}</div>
+                        <div v-if="item1.active_desc === '即将过期'" class="other">
+                          <span>{{ item1.active_desc }}</span>
+                          <span v-if="item1.expire_time">({{ item1.expire_time.slice(0, 10) }})</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div :class="['checkbox',item1.is_select?'checkbox_active':'']"><i class="el-icon-check"></i></div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="propoverItem" style="padding-left:20px">
+          <div class="title">已选择的{{source == 'chatGroup' ? '群主' : '成员'}}</div>
+          <div class="choice_result_top">
+            <div class="clear" @click="closeUser(-1)">全部清空</div>
+            <div class="result_num">已选择<span>{{rtSelectedCorpList&&rtSelectedCorpList.length}}</span>个主体和<span>{{rtSelectedUserList&&rtSelectedUserList.length}}</span>名{{source == 'chatGroup' ? '群主' : '成员'}}</div>
+          </div>
+          <div class="member_result self-scrollbar-3">
+
+            <!-- <div v-for='(corp, corpIdx) in selectedCorpList' :key="corp.corpid">
+              <div class="corp-wrap">
+                <div class="corp-info">
+                  <i class="el-icon-s-cooperation c-46a7ff"></i>
+                  <span>{{corp.corp_name}}</span>
+                </div>
+                <i class="el-icon-close pointer" @click="onClickDelSelectedCorp(corp)"></i>
+              </div>
+
+              <div class="memberItem" v-for="(item,index) in corp.user_list" :key="item.user_id">
+                <div class="flex" style="flex:1">
+                  <img class="memberImg" :src="item.avatar" alt="">
+                  <div class="memberInfo">
+                    <div class="name">
+                      {{item.user_name}}
+                      <span :class="['status-tag', item.is_active == 0 ? 'disabled' : '']">{{ item.is_active == 1 ? '已激活' : '未激活' }}</span>
+                    </div>
+                    <div class="other">部门：{{item.corp_name}}</div>
+                    <div v-if="item.active_desc === '即将过期'" class="other">
+                      <span>{{ item.active_desc }}</span>
+                      <span v-if="item.expire_time">({{ item.expire_time.slice(0, 10) }})</span>
+                    </div>
+                  </div>
+                </div>
+                <i class="el-icon-close" style="margin-left:10px" @click="closeUser(item)"></i>
+              </div>
+            </div> -->
+
+            <!-- S 全选企微数据 -->
+            <div v-for='(corp, corpIdx) in rtSelectedCorpList' :key="corp.corpid">
+              <div class="corp-wrap">
+                <div class="corp-info">
+                  <i class="el-icon-s-cooperation c-46a7ff"></i>
+                  <span>{{corp.corp_name}}</span>
+                </div>
+                <i class="el-icon-close pointer" @click="onClickDelSelectedCorp(corp)"></i>
+              </div>
+            </div>
+            <!-- E 全选企微数据 -->
+
+            <!-- S 非全选企微状态下的客服 -->
+            <div class="memberItem" v-for="(item,index) in rtSelectedUserList" :key="item.user_id+'-'+item.corpid">
+              <div class="flex" style="flex:1">
+                <img class="memberImg" :src="item.avatar" alt="">
+                <div class="memberInfo">
+                  <div class="name">
+                    {{item.user_name}}
+                    <span :class="['status-tag', item.is_active == 0 ? 'disabled' : '']">{{ item.is_active == 1 ? '已激活' : '未激活' }}</span>
+                  </div>
+                  <div class="other">部门：{{item.corp_name}}</div>
+                  <div v-if="item.active_desc === '即将过期'" class="other">
+                    <span>{{ item.active_desc }}</span>
+                    <span v-if="item.expire_time">({{ item.expire_time.slice(0, 10) }})</span>
+                  </div>
+                </div>
+              </div>
+              <i class="el-icon-close" style="margin-left:10px" @click="closeUser(item)"></i>
+            </div>
+            <!-- E 非全选企微状态下的客服 -->
+
+          </div>
+          <div class="buttons">
+            <el-button type="primary" plain size="mini" @click="visible = false">取消</el-button>
+            <el-button type="primary" size="mini" @click="defineEvent">确定</el-button>
+          </div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<script>
+// 此组件是按照企业
+import selfInput from '@/components/assembly/screen/input.vue'
+import _lodash from 'lodash'
+
+export default {
+  components: { selfInput },
+  props: {
+    title: {
+      type: String,
+      default: '所属客服'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String
+    },
+    labelWidth: {
+      type: String
+    },
+    afferent_users: {//传入格式 [{ user_id: xxx, corpid: xxx }]
+      type: Array
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon_arrow_bg: {
+      type: Boolean,
+      default: true
+    },
+    isRequired: {
+      type: Boolean,
+      default: () => true,
+    },
+    placeholder: {
+      type: String,
+      default: () => '请选择'
+    },
+    source: {
+      type: String,
+      default: () => 'operation'   // operation 客服   chatGroup 群主
+    },
+  },
+  watch: {
+    reset () {
+      this.selectUser = [];
+      this.final_result = [];
+      this.changeSelect()
+    },
+    afferent_users () {
+      this.page_init()
+    }
+  },
+  data () {
+    return {
+      input_keyword: '',
+      visible: false,
+      resetFlag: false,
+      loading: false,
+      userList: [],
+      old_user_list: [],
+      userTotal: 0,
+      selectUser: [],
+      final_result: []
+    }
+  },
+  computed: {
+    corpTotal() { // 企微主体数量
+      return (this.userList && this.userList.length) ? this.userList.length : 0
+    },
+    selectedCorpList() { // 已选成员 数据格式化
+      let res = []
+      if (this.selectUser && this.selectUser.length) {
+        this.selectUser.forEach(currentUser => {
+          const userInfo = {
+            user_id: currentUser.user_id,
+            user_name: currentUser.name,
+            avatar: currentUser.avatar,
+            corp_name: currentUser.corp_name,
+            corpid: currentUser.corpid,
+            active_desc: currentUser.active_desc,
+            expire_time: currentUser.expire_time,
+            is_active: currentUser.is_active,
+          }
+          if (res && !res.length) { // 构造第一条数据 => 插入res中
+            res.push({
+              corpid: currentUser.corpid,
+              corp_name: currentUser.corp_name,
+              user_list: [userInfo]
+            })
+          } else { // 查询当前用户的企微在res中是否已存在
+            const isFoundIdx = res.findIndex(r => r.corpid === currentUser.corpid)
+            if (isFoundIdx === -1) { // 不存在 => 写入企微&用户列表
+              res.push({
+                corpid: currentUser.corpid,
+                corp_name: currentUser.corp_name,
+                user_list: [userInfo]
+              })
+            } else { // 已存在 => 插入用户信息
+              res[isFoundIdx].user_list.push(userInfo)
+            }
+          }
+        })
+      }
+      return res
+    },
+    rtSelectedCorpList() {
+      let res = []
+      if (this.selectedCorpList && this.selectedCorpList.length) {
+        this.selectedCorpList.forEach(s => {
+          const crtCorpOptions = this.old_user_list.find(o => o.corpid === s.corpid)
+          if (crtCorpOptions && crtCorpOptions.user_list.length === s.user_list.length) {
+            res.push({
+              corp_name: crtCorpOptions.corp_name,
+              corpid: crtCorpOptions.corpid,
+            })
+          }
+        })
+      }
+      return res
+    },
+    rtSelectedUserList() {
+      let res = []
+      if (this.selectedCorpList && this.selectedCorpList.length) {
+        this.selectedCorpList.forEach(s => {
+          const crtCorpOptions = this.old_user_list.find(o => o.corpid === s.corpid)
+          if (crtCorpOptions && crtCorpOptions.user_list.length !== s.user_list.length) {
+            res = [...res, ...s.user_list]
+          }
+        })
+      }
+      return res
+    },
+  },
+  created () {
+    this.page_init()
+  },
+  methods: {
+    page_init () {
+      if (this.userList.length == 0) {
+        this.init()
+      } else {
+        this.selectUser = JSON.parse(JSON.stringify(this.final_result));
+        this.changeSelect()
+        this.afferent_init()
+      }
+    },
+    afferent_init () {//从外面传入
+      let selectUser = [];
+      if (this.afferent_users && this.afferent_users.length >= 0) {
+        let self_afferent_users = this.afferent_users.map((v) => {
+          return v.corpid + '-' + v.user_id
+        })
+        this.userList.forEach((item1) => {
+          item1.user_list.forEach((item) => {
+            let of_str = item.corpid + '-' + item.user_id
+            if (self_afferent_users.indexOf(of_str) != -1) {
+              selectUser.push(item)
+            }
+          })
+        })
+        this.selectUser = selectUser;
+        //去重
+        let final_result = JSON.parse(JSON.stringify(selectUser))
+        let tmp = {};
+        final_result = final_result.reduce((list, item) => {
+          tmp[item.user_id] ? '' : (tmp[item.user_id] = list.push(item));
+          return list
+        }, []);
+        this.final_result = final_result
+        this.changeSelect()
+      }
+    },
+    clear () {
+      if (this.disabled) return
+      if (!this.selectUser || this.selectUser.length == 0) {
+        this.visible = !this.visible
+        return
+      } else {
+        this.selectUser = [];
+        this.final_result = []
+        this.changeSelect()
+        this.$emit('customerDefine', {})
+        if (this.input_keyword != '') {
+          this.input_keyword = '';
+          this.resetFlag = !this.resetFlag
+          this.init()
+        }
+
+      }
+    },
+    defineEvent () {
+      this.final_result = JSON.parse(JSON.stringify(this.selectUser))
+      // let arr = this.selectUser.map((v) => {
+      //   return v.user_id
+      // })
+      if (this.isRequired && this.selectUser.length == 0) {
+        this.$message({
+          message: `请选择${this.source == 'chatGroup' ? '群主' : '成员'}`,
+          type: "warning"
+        })
+        return
+      }
+      this.visible = false
+      this.$emit('customerDefine', { // 3种数据格式都传给父组件 不同场景选择使用
+        res_format_1: this.selectUser,
+        res_format_2: this.selectedCorpList,
+        res_format_3: {
+          corpList: [...this.rtSelectedCorpList],
+          userList: [...this.rtSelectedUserList],
+        },
+      })
+    },
+    userSearch () {//模糊搜索 空格 可搜索多个结果
+      let input_keyword_arr = this.input_keyword.split(' ');
+      input_keyword_arr = input_keyword_arr.filter((v)=>{
+        return v != ''
+      })
+      let search_user_list = []
+      input_keyword_arr.length == 0 ? input_keyword_arr = [''] : ''
+
+      this.old_user_list.forEach((item) => {
+        let arr = item.user_list.filter((v) => {
+          let flag = false
+          input_keyword_arr.forEach((s_info)=>{
+            if (!flag) {
+              flag = (v.name && v.name.indexOf(s_info) != -1) || (v.corp_name && v.corp_name.indexOf(s_info) != -1)
+            }
+          })
+          return flag
+        })
+        if (arr && arr.length > 0) {
+          let self_item = JSON.parse(JSON.stringify(item))
+          self_item.user_list = arr;
+          search_user_list.push(self_item)
+        }
+      })
+
+      this.userList = search_user_list;
+      let userTotal = 0;
+      this.userList.forEach((item) => {
+        if (this.input_keyword === '') {
+          item.is_open = true//是否折叠
+        } else {
+          item.is_open = false//是否折叠
+        }
+        item.is_select = false//是否选中
+        item.user_list.forEach((item1) => {
+          item1.is_select = false
+        })
+        userTotal += item.user_list.length
+      });
+      this.changeSelect()
+      this.userTotal = userTotal
+    },
+    init (type) {
+      this.loading = true
+      let url = this.URL.BASEURL + this.URL.warn_djuserList
+      let params = {
+        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+      }
+
+      // if (this.source == 'chatGroup') {//群主
+      //   url = this.URL.BASEURL + this.URL.inviteRule_ownerListOfCompany
+      //   params = {}
+      // }
+
+      this.$axios.get(url, {
+        params: params
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          let arr = res.rst;
+          arr.forEach((item) => {
+            item.user_list.forEach((item1) => {
+              item1.corp_name = item.corp_name;
+            })
+          });
+
+          // if (this.source == 'chatGroup') {//群主
+          //   arr.forEach((item) => {
+          //     item.user_list.forEach(user => {
+          //       user.corpid = item.corpid;
+          //     })
+          //   });
+          // }
+
+          this.userList = arr;
+          this.old_user_list = JSON.parse(JSON.stringify(arr))
+          let userTotal = 0;
+          this.userList.forEach((item) => {
+            userTotal += item.user_list.length;
+            item.is_open = true//是否折叠   默认收起
+            item.is_select = false//是否选中
+            item.user_list.forEach((item1) => {
+              item1.is_select = false
+            })
+          });
+          if (type != 'userSearch') {//非搜索
+            this.selectUser = JSON.parse(JSON.stringify(this.final_result));
+            this.afferent_init()
+          }
+          this.changeSelect()
+          this.userTotal = userTotal
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    openEvent (index) {
+      let arr = this.userList[index]
+      arr.is_open = !arr.is_open
+      this.$set(this.userList, index, arr)
+    },
+    selectUserEvent (type, main_index, user_index) {
+      let selectUser = this.selectUser
+      let user_arr = this.userList[main_index];
+      if (type == 'all') {//点击部门全选时
+        if (!user_arr.is_select) {
+          selectUser = selectUser.concat(user_arr.user_list)
+        } else {
+          let arr = user_arr.user_list.map((v) => {
+            return v.user_id
+          })
+          selectUser = selectUser.filter((v) => {
+            return arr.indexOf(v.user_id) == -1
+          })
+        }
+      } else {//点击单个客服时
+        let brr = user_arr.user_list[user_index]
+        if (brr.is_select) {
+          selectUser = selectUser.filter((v) => {
+            return `${v.corpid}&&&${v.user_id}` != `${brr.corpid}&&&${brr.user_id}`
+          })
+        } else {
+          selectUser.push(brr)
+        }
+      }
+      this.$set(this.userList, main_index, user_arr)
+      // 去重
+      let tmp = {};
+      selectUser = selectUser.reduce((list, item) => {
+        // 根据corpid和user_id去重(之前版本只判断user_id去重)
+        tmp[`${item.corpid}&&&${item.user_id}`] ? '' : (tmp[`${item.corpid}&&&${item.user_id}`] = list.push(item));
+        return list
+      }, []);
+
+      this.selectUser = selectUser
+      this.changeSelect()
+    },
+    changeSelect () {//客服选择发生变化时，部门全选跟着相应的改变
+      let self_userList = JSON.parse(JSON.stringify(this.userList))
+      let arr_selectUser = this.selectUser.map((v) => { return (v.corpid + '-' + v.user_id) })
+      // 全选的改变
+      self_userList.forEach((item) => {
+        item.user_list = item.user_list.filter((v) => {
+          let of_str = v.corpid + '-' + v.user_id
+          return arr_selectUser.indexOf(of_str) != -1
+        })
+        this.userList.forEach((main) => {
+          if (main.corpid == item.corpid) {
+            if ((item.user_list.length == main.user_list.length) && (item.user_list.length !== 0)) {
+              main.is_select = true
+            } else {
+              main.is_select = false
+            }
+          }
+        })
+      })
+      // 单个用户的改变
+      this.userList.forEach((item) => {
+        item.user_list.forEach((item1) => {
+          let of_str = item1.corpid + '-' + item1.user_id
+          if (arr_selectUser.indexOf(of_str) == -1) {
+            item1.is_select = false
+          } else {
+            item1.is_select = true
+          }
+        })
+      })
+    },
+    closeUser (item) {
+      if (item == -1) {
+        this.selectUser = []
+      } else {
+        const idx = this.selectUser.findIndex(s => (s.corpid === item.corpid) && (s.user_id === item.user_id))
+        if (idx !== -1) {
+          this.selectUser.splice(idx, 1)
+        }
+      }
+      this.changeSelect()
+    },
+    onClickDelSelectedCorp(currentCorp) {
+      const res = []
+      this.selectUser.forEach(s => {
+        if (s.corpid !== currentCorp.corpid) res.push(s)
+      })
+      this.selectUser = [...res]
+      this.changeSelect()
+    },
+    handleCloseAllOpen() {
+      this.userList.forEach((item) => {
+        item.is_open = true
+      });
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.propoverItem {
+  width: 330px;
+  flex: 1;
+  height: 100%;
+  .allMember {
+    color: #666666;
+    font-size: 14px;
+    line-height: 20px;
+    margin-top: 10px;
+  }
+  .title {
+    color: #383e47;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
+  .choice_result_top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 7px 0;
+    .clear {
+      color: #00b38a;
+      font-size: 13px;
+      line-height: 18px;
+      cursor: pointer;
+      font-weight: bold;
+    }
+    .result_num {
+      color: #333333;
+      font-size: 13px;
+      line-height: 18px;
+      span {
+        color: #00b38a;
+        font-weight: bold;
+      }
+    }
+  }
+  .member_result {
+    height: 380px;
+    overflow-y: auto;
+    padding-right: 15px;
+  }
+}
+.line {
+  width: 0.5px;
+  background: #c3cbd6;
+}
+.propoverItem,
+.line {
+  height: 478px;
+}
+.memberBoxBig {
+  height: 400px;
+  overflow-y: auto;
+}
+.memberBox {
+  display: flex;
+  margin-top: 10px;
+
+  .el-icon-caret-bottom {
+    color: #46a7ff;
+    cursor: pointer;
+    margin-right: 7px;
+    margin-top: 2px;
+    transition: all 0.3s;
+    display: block;
+    height: 14px;
+  }
+  .meberList {
+    flex: 1;
+    margin-right: 15px;
+    .department {
+      i {
+        color: #46a7ff;
+      }
+      span {
+        color: #383e47;
+        font-size: 14px;
+        line-height: 20px;
+        margin-left: 5px;
+        font-weight: bold;
+      }
+    }
+
+    .checkbox {
+      width: 15px;
+      height: 15px;
+      border: 1px solid #979797;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      margin-left: 10px;
+      i {
+        color: transparent;
+      }
+      &.checkbox_active {
+        i {
+          color: #ffffff;
+        }
+        background: #00b38a;
+        border-color: #00b38a;
+      }
+    }
+  }
+}
+.memberItem,
+.department {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.memberItem {
+  margin: 14px 0;
+  .memberImg {
+    width: 38px;
+    height: 38px;
+    border-radius: 4px;
+  }
+  .memberInfo {
+    margin-left: 7px;
+    flex: 1;
+    .name {
+      color: #333333;
+      font-size: 13px;
+      line-height: 18px;
+      .status-tag {
+        background-color: #00B38A;
+        color: #fff;
+        border-radius: 4px;
+        font-size: 12px;
+        padding: 0 1px;
+        &.disabled {
+          background-color: #B3B2B2;
+        }
+      }
+    }
+    .other {
+      color: #898d92;
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}
+.reversalAnimation {
+  transform: rotate(-90deg);
+}
+.buttons {
+  text-align: right;
+  padding: 20px 0 10px;
+}
+
+.corp-wrap {
+  margin-top: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .corp-info {
+    color: #383e47;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
+}
+
+</style>

project/src/components/dataBoard/chatGroupData.vue

@@ -2,13 +2,20 @@
   <div>
     <div class="screenBox">
       <div class="flex-align-center" style="flex-wrap: wrap;margin-right: 60px;min-height: 60px;">
-        <datePicker title="客户入群时间" :quickFlag="false" :afferent_time="default_time" :clearFlag='true' :reset="resetFlag" @changeTime="onChangeTime" style="margin-right: 10px;" />
+        <el-select v-model="filter.dataType" placeholder="请选择" size="small" class="dataType" @change="onChangeDataType">
+          <el-option label="群主" value="qz" />
+          <el-option label="企微主体" value="qwzt" />
+        </el-select>
+        <!-- 多主体选择成员（群主） -->
+        <customerServiceCorpV2 v-show="filter.dataType === 'qz'" title="" placeholder="请选择群主" :reset="resetFlag" :isRequired="false" :isDisableSelectAllCorp="true"  @customerDefine="onChangeMultiCorpUsers" />
+        <!-- 企微主体（无权限） -->
+        <selfChannelV2 v-show="filter.dataType === 'qwzt'" v-model="filter.corpid2" class="qwzt-sl" title="" type="corpAll" placeholder="请选择企微主体" labelWidth @change="onChangeCorpid2" />
+        <!-- 入群时间 -->
+        <datePicker title="客户入群时间" :quickFlag="false" :afferent_time="default_time" :clearFlag='true' :reset="resetFlag" @changeTime="onChangeTime" style="margin-left:20px;margin-right: 10px;" />
         <!-- 企微主体 -->
         <!-- <selfSelectCorp style="margin-right: 30px;" v-model="filter.corpid" @change="onChangeCorpid" /> -->
         <!-- 群主 -->
         <!-- <selfChannelV2 v-model="filter.owner" title="群主" type="chatGroupOwner" ref="selectOwnerEl" labelWidth :afferent_params="{ isSelectedCorp: true, corpid: filter.corpid }" @change="onChangeOwner" @visible-change="onSelectOwnerVisibleChange" /> -->
-        <!-- 多主体选择成员（群主） -->
-        <customerServiceCorpV2 style="margin-left: -40px;" title="群主" :reset="resetFlag" :isRequired="false"  @customerDefine="onChangeMultiCorpUsers" />
         <inputRange v-model="filter.member" label="群人数" style="margin-left: 20px;" />
         <div style="margin-left: 20px;">
           <el-button size="mini" type="primary" plain @click="init(1);init_predata();">确定</el-button>
@@ -72,6 +79,7 @@ import datePicker from '@/components/assembly/screen/datePicker.vue'
 import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
 import selfSelectCorp from '@/components/assembly/screen/selectCorp.vue'
 import customerServiceCorpV2 from '@/components/assembly/screen/customerServiceCorpV2.vue'
+import customerServiceCorpV3 from '@/components/assembly/screen/customerServiceCorpV3.vue'
 import { chatGroupStatusCodeMap } from '@/assets/js/staticTypes'
 import inputRange from '@/components/dataBoard/inputRange.vue'
 
@@ -82,6 +90,7 @@ export default {
     selfChannelV2,
     selfSelectCorp,
     customerServiceCorpV2,
+    customerServiceCorpV3,
     inputRange,
   },
   data () {
@@ -147,6 +156,8 @@ export default {
         owner: '', // 群主
         multiple_senders: [], // 多个主体时选择的客服成员结果
         member: ['', ''], // 群人数
+        dataType: 'qwzt', // 维度 群主qz 企微主体qwzt
+        corpid2: '', // 企微主体
       },
     }
   },
@@ -174,7 +185,8 @@ export default {
       const params = {
         corpid: this.filter.corpid,
         owner: this.filter.owner,
-        owner_list: this.filter.multiple_senders,
+        corpid: this.filter.dataType === 'qwzt' ? this.filter.corpid2 : '',
+        owner_list: this.filter.dataType === 'qz' ? this.filter.multiple_senders : [],
         create_time_st: this.filter.time[0] || '',
         create_time_et: this.filter.time[1] || '',
         min_member: this.filter.member[0] || '',
@@ -206,7 +218,8 @@ export default {
       const params = {
         corpid: this.filter.corpid,
         owner: this.filter.owner,
-        owner_list: this.filter.multiple_senders,
+        corpid: this.filter.dataType === 'qwzt' ? this.filter.corpid2 : '',
+        owner_list: this.filter.dataType === 'qz' ? this.filter.multiple_senders : [],
         create_time_st: this.filter.time[0] || '',
         create_time_et: this.filter.time[1] || '',
         min_member: this.filter.member[0] || '',
@@ -269,6 +282,16 @@ export default {
       this.init(1);
       this.init_predata();
     },
+    onChangeDataType(val) {
+      this.filter.dataType = val || 'qwzt'
+      this.init(1);
+      this.init_predata();
+    },
+    onChangeCorpid2(val) {
+      this.filter.corpid2 = val || ''
+      this.init(1);
+      this.init_predata();
+    },
     onChangeMultiCorpUsers({ res_format_2 }) {
       if (res_format_2 && res_format_2.length) {
         this.filter.multiple_senders = res_format_2.map(corp => ({
@@ -281,6 +304,18 @@ export default {
       this.init(1);
       this.init_predata();
     },
+    // onChangeMultiCorpUsers({ res_format_3 }) {
+    //   if (res_format_3 && res_format_3.corpList) {
+    //     console.log('corpList => ', JSON.parse(JSON.stringify(res_format_3.corpList)))
+    //   } else {
+    //   }
+    //   if (res_format_3 && res_format_3.userList) {
+    //     console.log('corpList => ', JSON.parse(JSON.stringify(res_format_3.userList)))
+    //   } else {
+    //   }
+    //   this.init(1);
+    //   this.init_predata();
+    // },
     handleCurrentChange (val) {
       this.init(val)
     },
@@ -294,7 +329,9 @@ export default {
       this.filter.multiple_senders = []
       this.filter.corpid = ''
       this.filter.owner = ''
+      this.filter.corpid2 = ''
       this.filter.member = ['', '']
+      this.filter.dataType = 'qwzt'
       await this.$nextTick()
       this.$refs.selectOwnerEl && this.$refs.selectOwnerEl.handleGetOptions()
       this.init_predata()
@@ -307,9 +344,10 @@ export default {
       this.loading = true
       const url = `${this.URL.BASEURL}${this.URL.dataBoard_chatGroupData_list}`
       const params = {
-        corpid: this.filter.corpid,
+        // corpid: this.filter.corpid,
+        corpid: this.filter.dataType === 'qwzt' ? this.filter.corpid2 : '',
+        owner_list: this.filter.dataType === 'qz' ? this.filter.multiple_senders : [],
         owner: this.filter.owner,
-        owner_list: this.filter.multiple_senders,
         create_time_st: this.filter.time[0] || '',
         create_time_et: this.filter.time[1] || '',
         min_member: this.filter.member[0] || '',
@@ -444,4 +482,18 @@ export default {
     }
   }
 }
+/deep/ .dataType {
+   .el-input--small .el-input__inner {
+    width: 100px;
+    height: 30px;
+   }
+}
+/deep/ .qwzt-sl {
+  .el-input__inner {
+    height: 30px;
+  }
+  .el-input--small .el-input__icon {
+    line-height: 26px;
+  }
+}
 </style>