cnhis-design-vue 2.1.56 → 2.1.58

package/packages/multi-chat/setting/customerService/batchSelect.vue

@@ -1,403 +1,403 @@
-<template>
-  <div class="batch-select">
-    <a-row style="height: 100%;">
-      <a-col :span="12" class="left-tree">
-        <a-input-search
-          :placeholder="i18nText('1.9.432')"
-          :enter-button="i18nText('1.1.1.5.1')"
-          v-model="name"
-          @search="handleSearch"
-          size="default"
-          allowClear
-        >
-          <a-icon slot="prefix" type="search" class="search-input-icon" />
-        </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="treeData"
-          v-model="checkedKeys"
-          @expand="onExpand"
-          @check="onCheck"
-          :expandedKeys="expandedKeys"
-          searchPlaceholder="Please select"
-        >
-          <template slot="custom" slot-scope="item">
-            <span v-if="item.name" class="username">
-              <span class="first-name">{{ item.name[0] }}</span>
-              <span :class="checkSearchName(item)">{{ item.name }}</span>
-            </span>
-            <span v-else>{{ item.orgName || item.dept_name }}</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 selectedUsers"
-            :key="item.id"
-            >{{ item.name }}</a-tag
-          >
-        </div>
-        <div class="right-bottom">
-          <a-button type="primary" style="margin-right: 18px;" @click="handleSave">
-            {{ i18nText("1.1.1.1.3") }} ({{ selectedUsers.length }}/{{ flatUserList.length }})
-          </a-button>
-          <a-button @click="handleCancel">{{ i18nText("1.1.1.1.4") }}</a-button>
-        </div>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import { Button, Checkbox, Col, Icon, Input, Row, Tag, Tree } from 'ant-design-vue';
-import fetch, { qs } from "@/utils/chatFetch";
-
-export default {
-  name: "batch-select",
-  inject: ["i18nText"],
-  components: {
-    [Col.name]: Col,
-    [Button.name]: Button,
-    [Row.name]: Row,
-    [Tag.name]: Tag,
-    [Tree.name]: Tree,
-    [Checkbox.name]: Checkbox,
-    [Icon.name]: Icon,
-    [Input.Search.name]: Input.Search,
-  },
-  props: ["assemblyId"],
-  data() {
-    return {
-      name: "",
-      checkedKeys: [],
-      expandedKeys: [],
-      checkAll: false,
-      // 扁平化tree的options <Array[Object]>
-      flatUserList: [],
-      treeData: [],
-      // 缓存已选的 createdTime 接口提交需要
-      checkedKeysTimeObj: {}
-    };
-  },
-  computed: {
-    selectedUsers() {
-      return this.flatUserList.filter(item => {
-        let flag = this.checkedKeys.includes(item.key);
-        if (flag) {
-          item.createdTime = this.checkedKeysTimeObj[item.key];
-          return flag;
-        }
-      });
-    }
-  },
-  async created() {
-    await this.getUsers();
-    await this.getSelectedUsers();
-  },
-  methods: {
-    /* 获取选中用户 */
-    getSelectedUsers() {
-      return fetch
-        .get("/chat/event/getSysBaseInformation", {
-          params: {
-            type: "PERSONNEL_SERVICE",
-            assemblyId: this.assemblyId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === "SUCCESS") {
-            let { imformation } = data.map;
-            this.initCheck(imformation);
-          }
-        });
-    },
-    /* 初始选中状态 */
-    initCheck(imformation) {
-      let checkedKeys = new Set();
-      imformation.map(item => {
-        let setting = JSON.parse(item.setting);
-        let { userId, deptId, orgId } = setting;
-        const key = `${orgId}-${deptId}-${userId}`;
-        // userId && checkedKeys.add(key);
-        if (userId) {
-          // 由于存在转部门的情况所以不需要匹配deptId，但a-tree中必须存在不同的deptId
-          // 保证checkedKeys中的值与treeData中的key值保持一致，防止因deptId不同导致数据不同步
-          const obj = this.flatUserList.find(v => v.key.split('-')[0] == orgId && v.key.split('-')[2] == userId);
-          if (obj?.key) {
-            checkedKeys.add(`${orgId}-${obj.key.split('-')[1]}-${userId}`);
-          } else {
-            checkedKeys.add(key);
-          }
-        }
-        setting.key = key;
-        this.cacheCreatedTime(setting);
-      });
-      this.initTreeCheck(this.treeData, checkedKeys);
-      this.checkedKeys = Array.from(checkedKeys);
-      // 判断全选
-      if (imformation.length === this.flatUserList.length) {
-        this.checkAll = true;
-      }
-    },
-
-    /** 缓存 createdTime */
-    cacheCreatedTime(setting = {}) {
-      let { createdTime, key } = setting;
-      this.checkedKeysTimeObj[key] = createdTime;
-    },
-
-    /**
-     * 初始化选中
-     * /user/getOrgUsers 接口增加了 组织的结构。
-     */
-    initTreeCheck(tree = [], checkedKeys) {
-      if (!Array.isArray(tree)) return;
-      tree.forEach(v => {
-        Array.isArray(v.children) &&
-          v.children.map(item => {
-            if (item.children) {
-              let isAll = item.children.every(child => checkedKeys.has(child.id));
-              if (isAll) {
-                checkedKeys.add(item.key);
-              }
-            }
-          });
-      });
-    },
-
-    /* 获取全部用户 */
-    getUsers() {
-      return fetch
-        .get("/user/getOrgUsers")
-        .then(({ data }) => {
-          if (data.result === "SUCCESS") {
-            this.treeData = this.formatTree(data.list || []);
-          }
-        })
-        .catch(err => {
-          console.log(err, "");
-        });
-    },
-    /*  */
-    /* 格式化层级数据 */
-    formatTree(data, otherConfig = {}) {
-      return data.reduce((result, item) => {
-        let { users, id, dept_id, name, dept_name, orgId } = item;
-        let key = orgId || id || dept_id;
-        // 存在key相同的数据，增加上一级key 防止重复
-        key = otherConfig.key ? `${otherConfig.key}-${key}` : key;
-        if (users) {
-          item.children = item.users;
-          let config = Object.assign({ orgId }, otherConfig, { key });
-          this.formatTree(item.children, config);
-        }
-        if (id) {
-          this.flatUserList.push({
-            ...otherConfig,
-            id,
-            dept_id,
-            name,
-            dept_name,
-            key
-          });
-        }
-        item.scopedSlots = {
-          title: "custom"
-        };
-        item.key = key;
-        result.push(item);
-        return result;
-      }, []);
-    },
-    /* 获取父级key进行展开 */
-    getParentKey(treeData, expandedKeys) {
-      const keyword = this.name;
-      let expanded = false;
-      for (let i = 0; i < treeData.length; i++) {
-        const user = treeData[i];
-        let { name = "", key, users } = user;
-        const childExpanded = users ? this.getParentKey(users, expandedKeys) : false;
-        if (childExpanded || (keyword.length > 0 && name.indexOf(keyword) !== -1)) {
-          expanded = true;
-          expandedKeys.add(key);
-          if (!childExpanded) {
-            break;
-          }
-        }
-      }
-      return expanded;
-    },
-    handleSearch() {
-      let expandedKeys = new Set();
-      this.getParentKey(this.treeData, expandedKeys);
-      this.expandedKeys = Array.from(expandedKeys);
-      this.$nextTick(() => {
-        let selected = document.getElementsByClassName("search-name")[0];
-        this.$refs["antTree"].$el.scrollTo({
-          left: 0,
-          top: selected?.offsetTop || 0,
-          behavior: "smooth"
-        });
-      });
-    },
-    onExpand(expandedKeys) {
-      this.expandedKeys = expandedKeys;
-    },
-    /* 判断是否全部选中 */
-    onCheck(checkedKeys) {
-      let notAll = false;
-      for (let i = 0; i < this.treeData.length; i++) {
-        let children = this.treeData[i].children;
-        if (children) {
-          notAll = children.some(child => !checkedKeys.includes(child.id));
-        } else {
-          notAll = !checkedKeys.includes(this.treeData[i].id);
-        }
-      }
-      this.checkAll = !notAll;
-    },
-    /* 全选 */
-    toggleCheckAll(e) {
-      this.checkAll = e.target.checked;
-      let checkedKeys = new Set();
-      if (this.checkAll) {
-        this.checkedKeys = this.flatUserList.map(item => {
-          checkedKeys.add(item.key);
-        });
-      }
-      this.checkedKeys = Array.from(checkedKeys);
-    },
-    /* 删除选中用户 */
-    handleRemove(user) {
-      let { key, orgId, dept_id } = user;
-      const keys = new Set([key, orgId, `${orgId}-${dept_id}`]);
-      this.checkedKeys = this.checkedKeys.filter(item => !keys.has(item));
-      this.checkAll = false;
-    },
-    /* 批量保存 */
-    handleSave() {
-      let selectedUsers = this.selectedUsers.map(item => {
-        let { id, dept_id, name, dept_name, orgId, createdTime } = item;
-        return {
-          deptId: dept_id,
-          userId: id,
-          deptName: dept_name,
-          userName: name,
-          orgId,
-          createdTime
-        };
-      });
-      if (selectedUsers.length === 0) {
-        this.$message.warning(`${this.i18nText("1.9.436")}!`);
-        return;
-      }
-      let param = {
-        list: JSON.stringify(selectedUsers),
-        assemblyId: this.assemblyId
-      };
-      fetch.post("/chat/event/saveListPersonList", qs.stringify(param)).then(({ data }) => {
-        if (data.result === "SUCCESS") {
-          this.$message.success(this.i18nText("1.6.6"));
-          this.$emit("handleBatchResponse", "ok");
-        }
-      });
-    },
-    handleCancel() {
-      this.$emit("handleBatchResponse");
-    },
-    checkSearchName(item) {
-      return {
-        "search-name": item.name.indexOf(this.name) !== -1 && this.name.length > 0
-      };
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.batch-select {
-  height: 100%;
-  /deep/ .ant-input-group-addon {
-    padding: 0;
-    border: none !important;
-  }
-  .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 {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      .ant-tag {
-        margin-bottom: 8px;
-      }
-    }
-    .right-bottom {
-      margin-top: auto;
-    }
-  }
-}
-</style>
+<template>
+  <div class="batch-select">
+    <a-row style="height: 100%;">
+      <a-col :span="12" class="left-tree">
+        <a-input-search
+          :placeholder="i18nText('1.9.432')"
+          :enter-button="i18nText('1.1.1.5.1')"
+          v-model="name"
+          @search="handleSearch"
+          size="default"
+          allowClear
+        >
+          <a-icon slot="prefix" type="search" class="search-input-icon" />
+        </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="treeData"
+          v-model="checkedKeys"
+          @expand="onExpand"
+          @check="onCheck"
+          :expandedKeys="expandedKeys"
+          searchPlaceholder="Please select"
+        >
+          <template slot="custom" slot-scope="item">
+            <span v-if="item.name" class="username">
+              <span class="first-name">{{ item.name[0] }}</span>
+              <span :class="checkSearchName(item)">{{ item.name }}</span>
+            </span>
+            <span v-else>{{ item.orgName || item.dept_name }}</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 selectedUsers"
+            :key="item.id"
+            >{{ item.name }}</a-tag
+          >
+        </div>
+        <div class="right-bottom">
+          <a-button type="primary" style="margin-right: 18px;" @click="handleSave">
+            {{ i18nText("1.1.1.1.3") }} ({{ selectedUsers.length }}/{{ flatUserList.length }})
+          </a-button>
+          <a-button @click="handleCancel">{{ i18nText("1.1.1.1.4") }}</a-button>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { Button, Checkbox, Col, Icon, Input, Row, Tag, Tree } from 'ant-design-vue';
+import fetch, { qs } from "@/utils/chatFetch";
+
+export default {
+  name: "batch-select",
+  inject: ["i18nText"],
+  components: {
+    [Col.name]: Col,
+    [Button.name]: Button,
+    [Row.name]: Row,
+    [Tag.name]: Tag,
+    [Tree.name]: Tree,
+    [Checkbox.name]: Checkbox,
+    [Icon.name]: Icon,
+    [Input.Search.name]: Input.Search,
+  },
+  props: ["assemblyId"],
+  data() {
+    return {
+      name: "",
+      checkedKeys: [],
+      expandedKeys: [],
+      checkAll: false,
+      // 扁平化tree的options <Array[Object]>
+      flatUserList: [],
+      treeData: [],
+      // 缓存已选的 createdTime 接口提交需要
+      checkedKeysTimeObj: {}
+    };
+  },
+  computed: {
+    selectedUsers() {
+      return this.flatUserList.filter(item => {
+        let flag = this.checkedKeys.includes(item.key);
+        if (flag) {
+          item.createdTime = this.checkedKeysTimeObj[item.key];
+          return flag;
+        }
+      });
+    }
+  },
+  async created() {
+    await this.getUsers();
+    await this.getSelectedUsers();
+  },
+  methods: {
+    /* 获取选中用户 */
+    getSelectedUsers() {
+      return fetch
+        .get("/chat/event/getSysBaseInformation", {
+          params: {
+            type: "PERSONNEL_SERVICE",
+            assemblyId: this.assemblyId
+          }
+        })
+        .then(({ data }) => {
+          if (data.result === "SUCCESS") {
+            let { imformation } = data.map;
+            this.initCheck(imformation);
+          }
+        });
+    },
+    /* 初始选中状态 */
+    initCheck(imformation) {
+      let checkedKeys = new Set();
+      imformation.map(item => {
+        let setting = JSON.parse(item.setting);
+        let { userId, deptId, orgId } = setting;
+        const key = `${orgId}-${deptId}-${userId}`;
+        // userId && checkedKeys.add(key);
+        if (userId) {
+          // 由于存在转部门的情况所以不需要匹配deptId，但a-tree中必须存在不同的deptId
+          // 保证checkedKeys中的值与treeData中的key值保持一致，防止因deptId不同导致数据不同步
+          const obj = this.flatUserList.find(v => v.key.split('-')[0] == orgId && v.key.split('-')[2] == userId);
+          if (obj?.key) {
+            checkedKeys.add(`${orgId}-${obj.key.split('-')[1]}-${userId}`);
+          } else {
+            checkedKeys.add(key);
+          }
+        }
+        setting.key = key;
+        this.cacheCreatedTime(setting);
+      });
+      this.initTreeCheck(this.treeData, checkedKeys);
+      this.checkedKeys = Array.from(checkedKeys);
+      // 判断全选
+      if (imformation.length === this.flatUserList.length) {
+        this.checkAll = true;
+      }
+    },
+
+    /** 缓存 createdTime */
+    cacheCreatedTime(setting = {}) {
+      let { createdTime, key } = setting;
+      this.checkedKeysTimeObj[key] = createdTime;
+    },
+
+    /**
+     * 初始化选中
+     * /user/getOrgUsers 接口增加了 组织的结构。
+     */
+    initTreeCheck(tree = [], checkedKeys) {
+      if (!Array.isArray(tree)) return;
+      tree.forEach(v => {
+        Array.isArray(v.children) &&
+          v.children.map(item => {
+            if (item.children) {
+              let isAll = item.children.every(child => checkedKeys.has(child.id));
+              if (isAll) {
+                checkedKeys.add(item.key);
+              }
+            }
+          });
+      });
+    },
+
+    /* 获取全部用户 */
+    getUsers() {
+      return fetch
+        .get("/user/getOrgUsers")
+        .then(({ data }) => {
+          if (data.result === "SUCCESS") {
+            this.treeData = this.formatTree(data.list || []);
+          }
+        })
+        .catch(err => {
+          console.log(err, "");
+        });
+    },
+    /*  */
+    /* 格式化层级数据 */
+    formatTree(data, otherConfig = {}) {
+      return data.reduce((result, item) => {
+        let { users, id, dept_id, name, dept_name, orgId } = item;
+        let key = orgId || id || dept_id;
+        // 存在key相同的数据，增加上一级key 防止重复
+        key = otherConfig.key ? `${otherConfig.key}-${key}` : key;
+        if (users) {
+          item.children = item.users;
+          let config = Object.assign({ orgId }, otherConfig, { key });
+          this.formatTree(item.children, config);
+        }
+        if (id) {
+          this.flatUserList.push({
+            ...otherConfig,
+            id,
+            dept_id,
+            name,
+            dept_name,
+            key
+          });
+        }
+        item.scopedSlots = {
+          title: "custom"
+        };
+        item.key = key;
+        result.push(item);
+        return result;
+      }, []);
+    },
+    /* 获取父级key进行展开 */
+    getParentKey(treeData, expandedKeys) {
+      const keyword = this.name;
+      let expanded = false;
+      for (let i = 0; i < treeData.length; i++) {
+        const user = treeData[i];
+        let { name = "", key, users } = user;
+        const childExpanded = users ? this.getParentKey(users, expandedKeys) : false;
+        if (childExpanded || (keyword.length > 0 && name.indexOf(keyword) !== -1)) {
+          expanded = true;
+          expandedKeys.add(key);
+          if (!childExpanded) {
+            break;
+          }
+        }
+      }
+      return expanded;
+    },
+    handleSearch() {
+      let expandedKeys = new Set();
+      this.getParentKey(this.treeData, expandedKeys);
+      this.expandedKeys = Array.from(expandedKeys);
+      this.$nextTick(() => {
+        let selected = document.getElementsByClassName("search-name")[0];
+        this.$refs["antTree"].$el.scrollTo({
+          left: 0,
+          top: selected?.offsetTop || 0,
+          behavior: "smooth"
+        });
+      });
+    },
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+    },
+    /* 判断是否全部选中 */
+    onCheck(checkedKeys) {
+      let notAll = false;
+      for (let i = 0; i < this.treeData.length; i++) {
+        let children = this.treeData[i].children;
+        if (children) {
+          notAll = children.some(child => !checkedKeys.includes(child.id));
+        } else {
+          notAll = !checkedKeys.includes(this.treeData[i].id);
+        }
+      }
+      this.checkAll = !notAll;
+    },
+    /* 全选 */
+    toggleCheckAll(e) {
+      this.checkAll = e.target.checked;
+      let checkedKeys = new Set();
+      if (this.checkAll) {
+        this.checkedKeys = this.flatUserList.map(item => {
+          checkedKeys.add(item.key);
+        });
+      }
+      this.checkedKeys = Array.from(checkedKeys);
+    },
+    /* 删除选中用户 */
+    handleRemove(user) {
+      let { key, orgId, dept_id } = user;
+      const keys = new Set([key, orgId, `${orgId}-${dept_id}`]);
+      this.checkedKeys = this.checkedKeys.filter(item => !keys.has(item));
+      this.checkAll = false;
+    },
+    /* 批量保存 */
+    handleSave() {
+      let selectedUsers = this.selectedUsers.map(item => {
+        let { id, dept_id, name, dept_name, orgId, createdTime } = item;
+        return {
+          deptId: dept_id,
+          userId: id,
+          deptName: dept_name,
+          userName: name,
+          orgId,
+          createdTime
+        };
+      });
+      if (selectedUsers.length === 0) {
+        this.$message.warning(`${this.i18nText("1.9.436")}!`);
+        return;
+      }
+      let param = {
+        list: JSON.stringify(selectedUsers),
+        assemblyId: this.assemblyId
+      };
+      fetch.post("/chat/event/saveListPersonList", qs.stringify(param)).then(({ data }) => {
+        if (data.result === "SUCCESS") {
+          this.$message.success(this.i18nText("1.6.6"));
+          this.$emit("handleBatchResponse", "ok");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("handleBatchResponse");
+    },
+    checkSearchName(item) {
+      return {
+        "search-name": item.name.indexOf(this.name) !== -1 && this.name.length > 0
+      };
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.batch-select {
+  height: 100%;
+  /deep/ .ant-input-group-addon {
+    padding: 0;
+    border: none !important;
+  }
+  .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 {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      .ant-tag {
+        margin-bottom: 8px;
+      }
+    }
+    .right-bottom {
+      margin-top: auto;
+    }
+  }
+}
+</style>