cnhis-design-vue 2.1.56 → 2.1.58

package/packages/multi-chat/chat/addMembers.vue

@@ -1,411 +1,411 @@
-<template>
-  <div class="batch-select add-members">
-    <a-row style="height: 100%;">
-      <a-col :span="12" class="left-tree">
-        <a-input-search :placeholder="i18nText('1.9.432')" v-model="name" @search="handleSearch" size="default" allowClear>
-          <a-button slot="enterButton" type="primary" ghost>
-            <a-icon type="search" />
-            {{ i18nText('1.1.1.5.1') }}
-          </a-button>
-        </a-input-search>
-        <div class="check-all">
-          <a-checkbox @change="toggleCheckAll" :checked="checkAll">{{ i18nText('1.10.139') }}</a-checkbox>
-        </div>
-        <a-tree ref="antTree" checkable :treeData="groupMembers" v-model="checkedKeys" @check="onCheck" searchPlaceholder="Please select">
-          <template slot-scope="item" slot="custom">
-            <span class="username">
-              <span class="first-name">{{ item.userName[0] }}</span>
-              <span :class="checkSearchName(item)">{{ item.userName }}</span>
-            </span>
-          </template>
-        </a-tree>
-      </a-col>
-      <a-col :span="12" class="right-page">
-        <div class="right-top">
-          <a-tag closable @close="() => handleRemove(item)" v-for="item in selectedMembers" :key="item.userId">{{ item.userName }}</a-tag>
-        </div>
-        <div class="right-bottom">
-          <a-button type="primary" style="margin-right: 18px;" @click="handleSave"> {{ i18nText('1.1.1.1.3') }} ({{ selectedMembers.length }}/{{ groupMembers.length }}) </a-button>
-          <a-button @click="handleCancel">{{ i18nText('1.1.1.1.4') }}</a-button>
-        </div>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import { Row, Col, Button, Tag, Tree, Input, Checkbox, Icon } from 'ant-design-vue';
-import { mapGetters, mapMutations } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-export default {
-  name: 'batch-select',
-  inject: ['store', 'i18nText'],
-  components: {
-    [Icon.name]: Icon,
-    [Tree.name]: Tree,
-    [Row.name]: Row,
-    [Col.name]: Col,
-    [Button.name]: Button,
-    [Input.Search.name]: Input.Search,
-    [Checkbox.name]: Checkbox,
-    [Tag.name]: Tag
-  },
-  data() {
-    return {
-      name: '',
-      groupMembers: [],
-      timer: null
-    };
-  },
-  props: {
-    visible: Boolean,
-    validTalkingEnv: {
-      type: Function
-    },
-    membersType: {
-      default: ''
-    },
-    conferenceMemberList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    ...mapGetters(['assemblyId', 'sessionId', 'addMemberType', 'recordId', 'videoMembers', 'videoMode', 'videoData', 'assemblySetting', 'sessionType']),
-    checkAll() {
-      return this.groupMembers.every(item => item.isChecked === 'Y' || item.checked || item.isOwner === 'Y');
-    },
-    sessionMember() {
-      if (this.addMemberType != 1) {
-        return this.groupMembers.filter(item => item.isChecked === 'Y' || item.checked);
-      }
-      return this.groupMembers.filter(item => item.isChecked === 'Y' || item.isOwner === 'Y' || item.checked);
-    },
-    checkedKeys() {
-      return this.sessionMember.map(item => item.userId) || [];
-    },
-    selectedMembers() {
-      return this.groupMembers.filter(item => item.checked && !item.disableCheckbox);
-    },
-    isConference() {
-      return ['conference', 'staff'].includes(this.membersType);
-    },
-    isStaff() {
-      return this.assemblySetting?.type === 'staff';
-    }
-  },
-  methods: {
-    ...mapMutations(['setVideoData', 'setVideoMembers', 'setShowAudio', 'setMultiVideoShow', 'setVideoStatus', 'setSessionType']),
-    /* 获取全部用户 */
-    getGroupMembers() {
-      let url = '/chat/service/getSessionMember';
-      let params = {
-        assemblyId: this.assemblyId,
-        sessionId: this.sessionId
-      };
-      // if (this.membersType === "conference") {
-      if (this.isConference) {
-        url = '/chat/event/getSysBaseInformation';
-        params = {
-          type: 'PERSONNEL_SERVICE',
-          assemblyId: this.assemblyId
-        };
-      }
-      fetch.get(url, { params }).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          // if (this.membersType === "conference") {
-          if (this.isConference) {
-            let list = data.map?.imformation || [];
-            let groupMembers = this.formatTree(list);
-            let userId = this.userInfo?.sysParams?.userId;
-            this.groupMembers = groupMembers.filter(v => v.userId != userId);
-          } else {
-            let index = data.list.findIndex(item => item.isOwner === 'Y');
-            let item = index < 0 ? [] : data.list.splice(index, 1);
-            this.groupMembers = this.formatTree(item.concat(data.list));
-            this.groupMembers.map(item => {
-              if (item.isChecked === 'Y' || item.isOwner === 'Y') {
-                this.$set(item, 'disableCheckbox', true);
-              }
-            });
-          }
-        }
-      });
-    },
-    /*  */
-    /* 格式化层级数据 */
-    formatTree(data) {
-      return data.reduce((result, item) => {
-        item.scopedSlots = {
-          title: 'custom'
-        };
-        let { userId } = item;
-        // 会议模式 数据处理
-        // if (this.membersType === "conference") {
-        if (this.isConference) {
-          item.checked = false;
-          userId = item.settingObj?.userId;
-          if (this.conferenceMemberList?.length) {
-            let conferenceCheck = this.conferenceMemberList.some(v => v.userId == userId);
-            item.checked = conferenceCheck;
-          }
-        }
-        if (item.settingObj && Object.keys(item.settingObj).length) {
-          Object.assign(item, item.settingObj);
-        }
-
-        item.key = userId;
-        result.push(item);
-        return result;
-      }, []);
-    },
-    handleSearch() {
-      this.$nextTick(() => {
-        let selected = document.getElementsByClassName('search-name')[0];
-        this.$refs['antTree'].$el.scrollTo({
-          left: 0,
-          top: selected?.offsetTop || 0,
-          behavior: 'smooth'
-        });
-      });
-    },
-    checkSearchName(item) {
-      return {
-        'search-name': item.userName.indexOf(this.name) !== -1 && this.name.length > 0
-      };
-    },
-    toggleCheckAll() {
-      let checked = !this.checkAll;
-      this.groupMembers.map(item => {
-        this.$set(item, 'checked', checked);
-      });
-    },
-    handleRemove(item) {
-      this.$set(item, 'checked', false);
-    },
-    onCheck(userIds, e) {
-      this.groupMembers.map(item => {
-        if (item.userId === e.node.dataRef.userId) {
-          this.$set(item, 'checked', !item.checked);
-        }
-      });
-    },
-    handleCancel() {
-      this.$emit('update:visible', false);
-    },
-    handleSave() {
-      if (this.isStaff && !this.selectedMembers.length) {
-        this.handleCancel();
-      }
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        // if (this.membersType !== "conference") {
-        if (!this.isConference) {
-          // 通话过程中添加人员
-          if (this.addMemberType === 2 && this.videoData.recordId) {
-            this.handleVideoMemberAdd();
-            this.$emit('update:visible', false);
-            return;
-          }
-          // 发起通话前选择人员
-          if (this.addMemberType === 2) {
-            this.$emit('update:visible', false);
-            if (this.sessionMember.length > 1) {
-              this.setMultiVideoShow(true);
-              this.setVideoStatus(0);
-              this.$nextTick(() => {
-                this.setVideoMembers(this.sessionMember);
-              });
-            } else {
-              const openTalking = sip => {
-                this.setShowAudio(true);
-                this.$nextTick(() => {
-                  this.setVideoMembers(this.sessionMember);
-                });
-                this.setVideoData({
-                  callerSipKey: sip?.username,
-                  callerSipName: sip?.name
-                });
-              };
-              if (this.validTalkingEnv) {
-                this.validTalkingEnv().then(res => {
-                  if (res.status) {
-                    openTalking(res.sip);
-                  }
-                });
-              } else {
-                openTalking();
-              }
-            }
-            return;
-          }
-        }
-        // 添加会话人员(聊天)
-        /** 添加 orgid  */
-        let memberList = this.groupMembers.filter(item => !item.disableCheckbox && item.checked);
-        memberList = memberList.map(item => {
-          let res = {
-            userId: item.userId,
-            orgId: item.orgId
-          };
-          // if (this.membersType === "conference") {
-          if (this.isConference || (this.isStaff && this.sessionType === 3)) {
-            res.userName = item.userName;
-          }
-          return res;
-        });
-        // if (this.membersType === "conference") {
-        if (this.isConference) {
-          this.$emit('addConferenceMemberList', memberList);
-          return;
-        }
-        // 员工聊天 && 单聊时
-        if (this.isStaff && this.sessionType === 3) {
-          this.$emit('addStaffMemberList', memberList);
-          return;
-        }
-        let params = {
-          assemblyId: this.assemblyId,
-          sessionId: this.sessionId,
-          memberList: JSON.stringify(memberList)
-        };
-        fetch.post(`/chat/service/addSessionMember`, qs.stringify(params)).then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let { sessionType } = data.map || {};
-            sessionType && this.setSessionType(sessionType);
-            this.$emit('update:visible', false);
-            this.$emit('updateMemberList');
-          }
-        });
-      }, 300);
-    },
-    handleVideoMemberAdd() {
-      let memberIds = this.groupMembers
-        .filter(item => !item.disableCheckbox && item.checked)
-        .map(item => item.userId)
-        .join(',');
-      let data = {
-        recordId: this.videoData.recordId,
-        sessionId: this.sessionId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        assemblyId: this.assemblyId,
-        userId: this.userInfo?.sysParams?.userId,
-        mode: 6,
-        memberIds
-      };
-      fetch.post('/chat/access/videoGroupManage', qs.stringify(data));
-    },
-    getVideoMemberList() {
-      fetch
-        .get('/chat/access/videoMemberList', {
-          params: {
-            assemblyId: this.assemblyId,
-            sessionId: this.sessionId,
-            orgId: this.userInfo?.sysParams?.orgId,
-            recordId: this.videoData.recordId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            data.list.map(item => (item.userName = item.name));
-            let index = data.list.findIndex(item => item.userId == this.userInfo?.sysParams?.userId);
-            data.list.splice(index, 1);
-            this.groupMembers = this.formatTree(data.list);
-            this.groupMembers.map(item => {
-              if (item.isChecked === 'Y') {
-                this.$set(item, 'disableCheckbox', true);
-              }
-            });
-            this.videoMembers.forEach(item => {
-              let video = this.groupMembers.find(i => i.username === item.username);
-              this.$set(video, 'checked', true);
-            });
-          }
-        });
-    }
-  },
-  created() {
-    if (this.addMemberType === 1) {
-      this.getGroupMembers();
-    } else {
-      this.getVideoMemberList();
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.batch-select {
-  height: 100%;
-  /deep/ .ant-input-group-addon {
-    padding: 0;
-  }
-  .left-tree {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 15px;
-    border-right: 1px solid #d2d9e8;
-    .check-all {
-      margin-top: 20px;
-      padding-bottom: 10px;
-      border-bottom: 1px solid #d2d9e8;
-    }
-    /deep/ .ant-tree {
-      width: 100%;
-      flex: 1;
-      overflow: auto;
-      position: relative;
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-        background-color: #f5f5f5;
-      }
-    }
-    /deep/ .ant-tree-treenode-switcher-close {
-      display: flex;
-      align-items: center;
-      height: 32px;
-      box-sizing: content-box;
-    }
-    .username {
-      display: flex;
-      align-items: center;
-    }
-    .search-name {
-      color: red;
-    }
-    .first-name {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
-      margin-right: 6px;
-      text-align: center;
-      background-color: #7d88b5;
-      border-radius: 50%;
-      color: #fff;
-    }
-  }
-  .right-page {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 20px 15px 16px 15px;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-    }
-    .right-top {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-gap: 10px 0;
-    }
-    .right-bottom {
-      margin-top: auto;
-    }
-  }
-}
-</style>
+<template>
+  <div class="batch-select add-members">
+    <a-row style="height: 100%;">
+      <a-col :span="12" class="left-tree">
+        <a-input-search :placeholder="i18nText('1.9.432')" v-model="name" @search="handleSearch" size="default" allowClear>
+          <a-button slot="enterButton" type="primary" ghost>
+            <a-icon type="search" />
+            {{ i18nText('1.1.1.5.1') }}
+          </a-button>
+        </a-input-search>
+        <div class="check-all">
+          <a-checkbox @change="toggleCheckAll" :checked="checkAll">{{ i18nText('1.10.139') }}</a-checkbox>
+        </div>
+        <a-tree ref="antTree" checkable :treeData="groupMembers" v-model="checkedKeys" @check="onCheck" searchPlaceholder="Please select">
+          <template slot-scope="item" slot="custom">
+            <span class="username">
+              <span class="first-name">{{ item.userName[0] }}</span>
+              <span :class="checkSearchName(item)">{{ item.userName }}</span>
+            </span>
+          </template>
+        </a-tree>
+      </a-col>
+      <a-col :span="12" class="right-page">
+        <div class="right-top">
+          <a-tag closable @close="() => handleRemove(item)" v-for="item in selectedMembers" :key="item.userId">{{ item.userName }}</a-tag>
+        </div>
+        <div class="right-bottom">
+          <a-button type="primary" style="margin-right: 18px;" @click="handleSave"> {{ i18nText('1.1.1.1.3') }} ({{ selectedMembers.length }}/{{ groupMembers.length }}) </a-button>
+          <a-button @click="handleCancel">{{ i18nText('1.1.1.1.4') }}</a-button>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { Row, Col, Button, Tag, Tree, Input, Checkbox, Icon } from 'ant-design-vue';
+import { mapGetters, mapMutations } from '../store/helper';
+import fetch, { qs } from '@/utils/chatFetch';
+export default {
+  name: 'batch-select',
+  inject: ['store', 'i18nText'],
+  components: {
+    [Icon.name]: Icon,
+    [Tree.name]: Tree,
+    [Row.name]: Row,
+    [Col.name]: Col,
+    [Button.name]: Button,
+    [Input.Search.name]: Input.Search,
+    [Checkbox.name]: Checkbox,
+    [Tag.name]: Tag
+  },
+  data() {
+    return {
+      name: '',
+      groupMembers: [],
+      timer: null
+    };
+  },
+  props: {
+    visible: Boolean,
+    validTalkingEnv: {
+      type: Function
+    },
+    membersType: {
+      default: ''
+    },
+    conferenceMemberList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    ...mapGetters(['assemblyId', 'sessionId', 'addMemberType', 'recordId', 'videoMembers', 'videoMode', 'videoData', 'assemblySetting', 'sessionType']),
+    checkAll() {
+      return this.groupMembers.every(item => item.isChecked === 'Y' || item.checked || item.isOwner === 'Y');
+    },
+    sessionMember() {
+      if (this.addMemberType != 1) {
+        return this.groupMembers.filter(item => item.isChecked === 'Y' || item.checked);
+      }
+      return this.groupMembers.filter(item => item.isChecked === 'Y' || item.isOwner === 'Y' || item.checked);
+    },
+    checkedKeys() {
+      return this.sessionMember.map(item => item.userId) || [];
+    },
+    selectedMembers() {
+      return this.groupMembers.filter(item => item.checked && !item.disableCheckbox);
+    },
+    isConference() {
+      return ['conference', 'staff'].includes(this.membersType);
+    },
+    isStaff() {
+      return this.assemblySetting?.type === 'staff';
+    }
+  },
+  methods: {
+    ...mapMutations(['setVideoData', 'setVideoMembers', 'setShowAudio', 'setMultiVideoShow', 'setVideoStatus', 'setSessionType']),
+    /* 获取全部用户 */
+    getGroupMembers() {
+      let url = '/chat/service/getSessionMember';
+      let params = {
+        assemblyId: this.assemblyId,
+        sessionId: this.sessionId
+      };
+      // if (this.membersType === "conference") {
+      if (this.isConference) {
+        url = '/chat/event/getSysBaseInformation';
+        params = {
+          type: 'PERSONNEL_SERVICE',
+          assemblyId: this.assemblyId
+        };
+      }
+      fetch.get(url, { params }).then(({ data }) => {
+        if (data.result === 'SUCCESS') {
+          // if (this.membersType === "conference") {
+          if (this.isConference) {
+            let list = data.map?.imformation || [];
+            let groupMembers = this.formatTree(list);
+            let userId = this.userInfo?.sysParams?.userId;
+            this.groupMembers = groupMembers.filter(v => v.userId != userId);
+          } else {
+            let index = data.list.findIndex(item => item.isOwner === 'Y');
+            let item = index < 0 ? [] : data.list.splice(index, 1);
+            this.groupMembers = this.formatTree(item.concat(data.list));
+            this.groupMembers.map(item => {
+              if (item.isChecked === 'Y' || item.isOwner === 'Y') {
+                this.$set(item, 'disableCheckbox', true);
+              }
+            });
+          }
+        }
+      });
+    },
+    /*  */
+    /* 格式化层级数据 */
+    formatTree(data) {
+      return data.reduce((result, item) => {
+        item.scopedSlots = {
+          title: 'custom'
+        };
+        let { userId } = item;
+        // 会议模式 数据处理
+        // if (this.membersType === "conference") {
+        if (this.isConference) {
+          item.checked = false;
+          userId = item.settingObj?.userId;
+          if (this.conferenceMemberList?.length) {
+            let conferenceCheck = this.conferenceMemberList.some(v => v.userId == userId);
+            item.checked = conferenceCheck;
+          }
+        }
+        if (item.settingObj && Object.keys(item.settingObj).length) {
+          Object.assign(item, item.settingObj);
+        }
+
+        item.key = userId;
+        result.push(item);
+        return result;
+      }, []);
+    },
+    handleSearch() {
+      this.$nextTick(() => {
+        let selected = document.getElementsByClassName('search-name')[0];
+        this.$refs['antTree'].$el.scrollTo({
+          left: 0,
+          top: selected?.offsetTop || 0,
+          behavior: 'smooth'
+        });
+      });
+    },
+    checkSearchName(item) {
+      return {
+        'search-name': item.userName.indexOf(this.name) !== -1 && this.name.length > 0
+      };
+    },
+    toggleCheckAll() {
+      let checked = !this.checkAll;
+      this.groupMembers.map(item => {
+        this.$set(item, 'checked', checked);
+      });
+    },
+    handleRemove(item) {
+      this.$set(item, 'checked', false);
+    },
+    onCheck(userIds, e) {
+      this.groupMembers.map(item => {
+        if (item.userId === e.node.dataRef.userId) {
+          this.$set(item, 'checked', !item.checked);
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit('update:visible', false);
+    },
+    handleSave() {
+      if (this.isStaff && !this.selectedMembers.length) {
+        this.handleCancel();
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        // if (this.membersType !== "conference") {
+        if (!this.isConference) {
+          // 通话过程中添加人员
+          if (this.addMemberType === 2 && this.videoData.recordId) {
+            this.handleVideoMemberAdd();
+            this.$emit('update:visible', false);
+            return;
+          }
+          // 发起通话前选择人员
+          if (this.addMemberType === 2) {
+            this.$emit('update:visible', false);
+            if (this.sessionMember.length > 1) {
+              this.setMultiVideoShow(true);
+              this.setVideoStatus(0);
+              this.$nextTick(() => {
+                this.setVideoMembers(this.sessionMember);
+              });
+            } else {
+              const openTalking = sip => {
+                this.setShowAudio(true);
+                this.$nextTick(() => {
+                  this.setVideoMembers(this.sessionMember);
+                });
+                this.setVideoData({
+                  callerSipKey: sip?.username,
+                  callerSipName: sip?.name
+                });
+              };
+              if (this.validTalkingEnv) {
+                this.validTalkingEnv().then(res => {
+                  if (res.status) {
+                    openTalking(res.sip);
+                  }
+                });
+              } else {
+                openTalking();
+              }
+            }
+            return;
+          }
+        }
+        // 添加会话人员(聊天)
+        /** 添加 orgid  */
+        let memberList = this.groupMembers.filter(item => !item.disableCheckbox && item.checked);
+        memberList = memberList.map(item => {
+          let res = {
+            userId: item.userId,
+            orgId: item.orgId
+          };
+          // if (this.membersType === "conference") {
+          if (this.isConference || (this.isStaff && this.sessionType === 3)) {
+            res.userName = item.userName;
+          }
+          return res;
+        });
+        // if (this.membersType === "conference") {
+        if (this.isConference) {
+          this.$emit('addConferenceMemberList', memberList);
+          return;
+        }
+        // 员工聊天 && 单聊时
+        if (this.isStaff && this.sessionType === 3) {
+          this.$emit('addStaffMemberList', memberList);
+          return;
+        }
+        let params = {
+          assemblyId: this.assemblyId,
+          sessionId: this.sessionId,
+          memberList: JSON.stringify(memberList)
+        };
+        fetch.post(`/chat/service/addSessionMember`, qs.stringify(params)).then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            let { sessionType } = data.map || {};
+            sessionType && this.setSessionType(sessionType);
+            this.$emit('update:visible', false);
+            this.$emit('updateMemberList');
+          }
+        });
+      }, 300);
+    },
+    handleVideoMemberAdd() {
+      let memberIds = this.groupMembers
+        .filter(item => !item.disableCheckbox && item.checked)
+        .map(item => item.userId)
+        .join(',');
+      let data = {
+        recordId: this.videoData.recordId,
+        sessionId: this.sessionId,
+        orgId: this.userInfo?.sysParams?.orgId,
+        assemblyId: this.assemblyId,
+        userId: this.userInfo?.sysParams?.userId,
+        mode: 6,
+        memberIds
+      };
+      fetch.post('/chat/access/videoGroupManage', qs.stringify(data));
+    },
+    getVideoMemberList() {
+      fetch
+        .get('/chat/access/videoMemberList', {
+          params: {
+            assemblyId: this.assemblyId,
+            sessionId: this.sessionId,
+            orgId: this.userInfo?.sysParams?.orgId,
+            recordId: this.videoData.recordId
+          }
+        })
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            data.list.map(item => (item.userName = item.name));
+            let index = data.list.findIndex(item => item.userId == this.userInfo?.sysParams?.userId);
+            data.list.splice(index, 1);
+            this.groupMembers = this.formatTree(data.list);
+            this.groupMembers.map(item => {
+              if (item.isChecked === 'Y') {
+                this.$set(item, 'disableCheckbox', true);
+              }
+            });
+            this.videoMembers.forEach(item => {
+              let video = this.groupMembers.find(i => i.username === item.username);
+              this.$set(video, 'checked', true);
+            });
+          }
+        });
+    }
+  },
+  created() {
+    if (this.addMemberType === 1) {
+      this.getGroupMembers();
+    } else {
+      this.getVideoMemberList();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.batch-select {
+  height: 100%;
+  /deep/ .ant-input-group-addon {
+    padding: 0;
+  }
+  .left-tree {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 15px;
+    border-right: 1px solid #d2d9e8;
+    .check-all {
+      margin-top: 20px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #d2d9e8;
+    }
+    /deep/ .ant-tree {
+      width: 100%;
+      flex: 1;
+      overflow: auto;
+      position: relative;
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        background-color: #f5f5f5;
+      }
+    }
+    /deep/ .ant-tree-treenode-switcher-close {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      box-sizing: content-box;
+    }
+    .username {
+      display: flex;
+      align-items: center;
+    }
+    .search-name {
+      color: red;
+    }
+    .first-name {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      margin-right: 6px;
+      text-align: center;
+      background-color: #7d88b5;
+      border-radius: 50%;
+      color: #fff;
+    }
+  }
+  .right-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 20px 15px 16px 15px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    .right-top {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-gap: 10px 0;
+    }
+    .right-bottom {
+      margin-top: auto;
+    }
+  }
+}
+</style>