cnhis-design-vue 2.1.57 → 2.1.59

package/packages/select-person/search-tree.vue

@@ -1,373 +1,373 @@
-<template>
-  <div v-show="visable" class="search-tree-wrap">
-    <a-tree
-      v-on="$listeners"
-      ref="searchTree"
-      v-model="checkedKeys"
-      @expand="onExpand"
-      @check="onCheck"
-      checkable
-      :selectable="false"
-      :expandedKeys="expandedKeys"
-      :autoExpandParent="autoExpandParent"
-      :treeData="formatTreeData"
-    >
-      <template slot="custom" slot-scope="scope">
-        <div class="search-tree-item">
-          <!-- <div class="name-wrap">
-            <p class="name">{{ formatName(scope.title) }}</p>
-          </div> -->
-          <div class="info-wrap">
-            <a-tooltip :title="`${scope.title} ${scope.sub_title}`" :mouseEnterDelay="0.3">
-              <p class="info-wrap-top">
-                <span class="info-wrap-title">
-                  <span class="c-title">{{ scope.title }}</span
-                  >&thinsp;<span class="c-sub-title">{{ scope.sub_title }}</span></span
-                >
-              </p>
-            </a-tooltip>
-            <span class="info-wrap-position">
-              {{ scope.dept_name }}
-            </span>
-          </div>
-        </div>
-      </template>
-    </a-tree>
-    <div v-show="!searchNoMore" style="text-align: center;">
-      <!-- loadMorenLoadinng -->
-      <a-spin v-if="loadMorenLoadinng" />
-      <div v-else class="load-more-btn-wrap">
-        <a-icon type="search" class="search-input-icon" />
-        <div class="load-more-btn" @click="searchOnloadMore">
-          加载更多
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Icon, Tree, Tooltip } from "ant-design-vue";
-export default {
-  name: "searchTree",
-  props: {
-    visable: {
-      type: Boolean
-    },
-    searchNoMore: {
-      type: Boolean,
-      defalut: false
-    },
-    loadMorenLoadinng: {
-      type: Boolean,
-      defalut: false
-    },
-    formatTreeData: {
-      type: Array
-    },
-    searchValue: {
-      type: String
-    },
-    defaultExpandedKeys: {
-      type: Array
-    },
-    allCheckedKeys: {
-      type: Object
-    },
-    // 当前搜索结果的treeData扁平化的，main&other keys
-    dataListKeys: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-      expandedKeys: [],
-      autoExpandParent: true,
-      // 初始化时，根据formatTreeData和父组件的checkedKeys，动态计算
-      checkedKeys: [],
-      defaultCheckedKeys: {
-        main: [],
-        other: []
-      }
-    };
-  },
-  watch: {
-    defaultExpandedKeys: {
-      deep: true,
-      immediate: true,
-      handler(val) {
-        this.expandedKeys = val;
-      }
-    },
-    visable(val) {
-      if (!val) {
-        this.resetData();
-        return;
-      }
-      this.setDefaultCheckedKeys();
-    },
-    // 加载更多
-    dataLen(val) {
-      if (val > 0) {
-        this.setDefaultCheckedKeys();
-      }
-    }
-  },
-  computed: {
-    dataLen() {
-      return this?.formatTreeData?.length || 0;
-    }
-  },
-  methods: {
-    resetData() {
-      this.checkedKeys = [];
-      this.expandedKeys = [];
-      this.autoExpandParent = true;
-      this.defaultCheckedKeys.main = [];
-      this.defaultCheckedKeys.other = [];
-    },
-    emitCheckedkeys() {
-      this.emitCheckedkeysMain();
-      this.emitCheckedkeysOther();
-      this.setDefaultCheckedKeys();
-    },
-    emitCheckedkeysMain() {
-      let searchCheckedKeysMain = this.checkedKeys.filter(key => {
-        return this.dataListKeys.main.includes(key);
-      });
-      let defaultCheckedKeysMain = this.defaultCheckedKeys.main;
-      // let defaultCheckedKeysMain = this.defaultCheckedKeys.main.filter(key => {
-      //   return this.dataListKeys.main.includes(key);
-      // });
-      let { add, remove } = this.calcChangeKeys(defaultCheckedKeysMain, searchCheckedKeysMain);
-      this.$emit("addCheckedkeysMain", add);
-      this.$emit("removeCheckedkeysMain", remove);
-    },
-    emitCheckedkeysOther() {
-      let searchCheckedKeysOther = this.checkedKeys.filter(key => {
-        return this.dataListKeys.other.includes(key);
-      });
-      let defaultCheckedKeysOther = this.defaultCheckedKeys.other;
-      // let defaultCheckedKeysOther = this.defaultCheckedKeys.other.filter(key => {
-      //   return this.dataListKeys.other.includes(key);
-      // });
-      let { add, remove } = this.calcChangeKeys(defaultCheckedKeysOther, searchCheckedKeysOther);
-      this.$emit("addCheckedkeysOther", add);
-      this.$emit("removeCheckedkeysOther", remove);
-    },
-    calcChangeKeys(defaultCheckedKeys, currentCheckedKeys) {
-      let add = [];
-      let remove = [];
-
-      currentCheckedKeys.forEach(key => {
-        if (!defaultCheckedKeys.includes(key)) {
-          add.push(key);
-        }
-      });
-
-      defaultCheckedKeys.forEach(key => {
-        if (!currentCheckedKeys.includes(key)) {
-          remove.push(key);
-        }
-      });
-
-      return {
-        add,
-        remove
-      };
-    },
-    emptyCheckedKeys() {
-      this.checkedKeys = [];
-      this.emitCheckedkeys();
-    },
-    /* setCheckedKeys */
-    setDefaultCheckedKeys() {
-      this.setDefaultCheckedKeysMain();
-      this.setDefaultCheckedKeysOther();
-      this.setCurrentCheckedKeys();
-    },
-    setDefaultCheckedKeysMain() {
-      this.defaultCheckedKeys.main = this.dataListKeys.main.filter(key => {
-        return this.allCheckedKeys.main.includes(key);
-      });
-    },
-    setDefaultCheckedKeysOther() {
-      this.defaultCheckedKeys.other = this.dataListKeys.other.filter(key => {
-        return this.allCheckedKeys.other.includes(key);
-      });
-    },
-    setCurrentCheckedKeys() {
-      let { main, other } = this.defaultCheckedKeys;
-      let res = [...new Set([...main, ...other])];
-      this.checkedKeys = res;
-    },
-    // 选中事件
-    onCheck() {
-      this.emitCheckedkeys();
-      // this.$emit('check',...arg)
-    },
-    // 展开数节点
-    onExpand(expandedKeys) {
-      this.expandedKeys = expandedKeys;
-      this.autoExpandParent = false;
-      // this.$emit('expand', expandedKeys, ...arg)
-    },
-    treeCount(count) {
-      if (!count) return "";
-      return `(${count})`;
-    },
-    searchOnloadMore() {
-      this.$emit("searchOnloadMore");
-    },
-    formatName(name) {
-      let len = name.length;
-      return name.substring(len - 2, len);
-    }
-  },
-  components: {
-    [Icon.name]: Icon,
-    [Tree.name]: Tree,
-    [Tooltip.name]: Tooltip
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.df {
-  display: flex;
-}
-
-.search-tree-wrap {
-  /deep/ .ant-tree>li {
-    overflow: hidden;
-    width: 100%;
-  }
-
-  /deep/ .ant-tree-switcher {
-    display: none;
-  }
-
-  /deep/ .ant-tree-node-content-wrapper {
-    width: 90%;
-    overflow: hidden;
-    // margin-left: 25px;
-    height: 40px;
-    // box-sizing: border-box;
-    // display: flex;
-    // align-items: center;
-  }
-  /deep/ .ant-tree li .ant-tree-node-content-wrapper:hover {
-    background-color: initial;
-  }
-
-  /deep/ .ant-tree-checkbox-inner {
-    border: 1px solid #d5d5d5;
-  }
-
-  /deep/.ant-tree-title {
-    // width: auto !important;
-    width: 100%;
-  }
-
-  .search-tree-item {
-    display: flex;
-    align-items: center;
-  }
-  .name-wrap {
-    width: 48px;
-    height: 48px;
-    background: #7d88b5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-right: 13px;
-
-    .name {
-      font-size: 16px;
-      color: #ffffff;
-      margin-bottom: 0;
-      line-height: 16px;
-    }
-  }
-  .info-wrap {
-    // width: 220px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: column;
-  }
-  .info-wrap-top {
-    // display: flex;
-    align-items: flex-end;
-    margin-bottom: 1px;
-    // width: 220px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .info-wrap-title {
-    // width: 140px;
-    // overflow: hidden;
-    // text-overflow: ellipsis;
-    // overflow: hidden;
-    // white-space: nowrap;
-    margin-bottom: 0;
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #4e4e4e;
-    line-height: 16px;
-
-    .c-title {
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #212121;
-    }
-    .c-sub-title {
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      // font-weight: 400;
-      color: #4e4e4e;
-    }
-  }
-  .info-wrap-desc {
-    margin-left: 10px;
-    margin-bottom: 0;
-    font-size: 12px;
-    line-height: 17px;
-    color: #aeaeae;
-  }
-  .info-wrap-position {
-    margin-bottom: 0;
-    font-size: 12px;
-    color: #7d88b5;
-    line-height: 17px;
-  }
-}
-
-.load-more-btn-wrap {
-  display: flex;
-  justify-content: center;
-  height: 35px;
-  line-height: 35px;
-  cursor: pointer;
-  padding-top: 10px;
-  box-sizing: border-box;
-
-  .search-input-icon {
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.4);
-    margin-right: 14px;
-  }
-  .load-more-btn {
-    font-size: 12px;
-    color: #747c8e;
-    line-height: 12px;
-  }
-}
-</style>
+<template>
+  <div v-show="visable" class="search-tree-wrap">
+    <a-tree
+      v-on="$listeners"
+      ref="searchTree"
+      v-model="checkedKeys"
+      @expand="onExpand"
+      @check="onCheck"
+      checkable
+      :selectable="false"
+      :expandedKeys="expandedKeys"
+      :autoExpandParent="autoExpandParent"
+      :treeData="formatTreeData"
+    >
+      <template slot="custom" slot-scope="scope">
+        <div class="search-tree-item">
+          <!-- <div class="name-wrap">
+            <p class="name">{{ formatName(scope.title) }}</p>
+          </div> -->
+          <div class="info-wrap">
+            <a-tooltip :title="`${scope.title} ${scope.sub_title}`" :mouseEnterDelay="0.3">
+              <p class="info-wrap-top">
+                <span class="info-wrap-title">
+                  <span class="c-title">{{ scope.title }}</span
+                  >&thinsp;<span class="c-sub-title">{{ scope.sub_title }}</span></span
+                >
+              </p>
+            </a-tooltip>
+            <span class="info-wrap-position">
+              {{ scope.dept_name }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </a-tree>
+    <div v-show="!searchNoMore" style="text-align: center;">
+      <!-- loadMorenLoadinng -->
+      <a-spin v-if="loadMorenLoadinng" />
+      <div v-else class="load-more-btn-wrap">
+        <a-icon type="search" class="search-input-icon" />
+        <div class="load-more-btn" @click="searchOnloadMore">
+          加载更多
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Icon, Tree, Tooltip } from "ant-design-vue";
+export default {
+  name: "searchTree",
+  props: {
+    visable: {
+      type: Boolean
+    },
+    searchNoMore: {
+      type: Boolean,
+      defalut: false
+    },
+    loadMorenLoadinng: {
+      type: Boolean,
+      defalut: false
+    },
+    formatTreeData: {
+      type: Array
+    },
+    searchValue: {
+      type: String
+    },
+    defaultExpandedKeys: {
+      type: Array
+    },
+    allCheckedKeys: {
+      type: Object
+    },
+    // 当前搜索结果的treeData扁平化的，main&other keys
+    dataListKeys: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      expandedKeys: [],
+      autoExpandParent: true,
+      // 初始化时，根据formatTreeData和父组件的checkedKeys，动态计算
+      checkedKeys: [],
+      defaultCheckedKeys: {
+        main: [],
+        other: []
+      }
+    };
+  },
+  watch: {
+    defaultExpandedKeys: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.expandedKeys = val;
+      }
+    },
+    visable(val) {
+      if (!val) {
+        this.resetData();
+        return;
+      }
+      this.setDefaultCheckedKeys();
+    },
+    // 加载更多
+    dataLen(val) {
+      if (val > 0) {
+        this.setDefaultCheckedKeys();
+      }
+    }
+  },
+  computed: {
+    dataLen() {
+      return this?.formatTreeData?.length || 0;
+    }
+  },
+  methods: {
+    resetData() {
+      this.checkedKeys = [];
+      this.expandedKeys = [];
+      this.autoExpandParent = true;
+      this.defaultCheckedKeys.main = [];
+      this.defaultCheckedKeys.other = [];
+    },
+    emitCheckedkeys() {
+      this.emitCheckedkeysMain();
+      this.emitCheckedkeysOther();
+      this.setDefaultCheckedKeys();
+    },
+    emitCheckedkeysMain() {
+      let searchCheckedKeysMain = this.checkedKeys.filter(key => {
+        return this.dataListKeys.main.includes(key);
+      });
+      let defaultCheckedKeysMain = this.defaultCheckedKeys.main;
+      // let defaultCheckedKeysMain = this.defaultCheckedKeys.main.filter(key => {
+      //   return this.dataListKeys.main.includes(key);
+      // });
+      let { add, remove } = this.calcChangeKeys(defaultCheckedKeysMain, searchCheckedKeysMain);
+      this.$emit("addCheckedkeysMain", add);
+      this.$emit("removeCheckedkeysMain", remove);
+    },
+    emitCheckedkeysOther() {
+      let searchCheckedKeysOther = this.checkedKeys.filter(key => {
+        return this.dataListKeys.other.includes(key);
+      });
+      let defaultCheckedKeysOther = this.defaultCheckedKeys.other;
+      // let defaultCheckedKeysOther = this.defaultCheckedKeys.other.filter(key => {
+      //   return this.dataListKeys.other.includes(key);
+      // });
+      let { add, remove } = this.calcChangeKeys(defaultCheckedKeysOther, searchCheckedKeysOther);
+      this.$emit("addCheckedkeysOther", add);
+      this.$emit("removeCheckedkeysOther", remove);
+    },
+    calcChangeKeys(defaultCheckedKeys, currentCheckedKeys) {
+      let add = [];
+      let remove = [];
+
+      currentCheckedKeys.forEach(key => {
+        if (!defaultCheckedKeys.includes(key)) {
+          add.push(key);
+        }
+      });
+
+      defaultCheckedKeys.forEach(key => {
+        if (!currentCheckedKeys.includes(key)) {
+          remove.push(key);
+        }
+      });
+
+      return {
+        add,
+        remove
+      };
+    },
+    emptyCheckedKeys() {
+      this.checkedKeys = [];
+      this.emitCheckedkeys();
+    },
+    /* setCheckedKeys */
+    setDefaultCheckedKeys() {
+      this.setDefaultCheckedKeysMain();
+      this.setDefaultCheckedKeysOther();
+      this.setCurrentCheckedKeys();
+    },
+    setDefaultCheckedKeysMain() {
+      this.defaultCheckedKeys.main = this.dataListKeys.main.filter(key => {
+        return this.allCheckedKeys.main.includes(key);
+      });
+    },
+    setDefaultCheckedKeysOther() {
+      this.defaultCheckedKeys.other = this.dataListKeys.other.filter(key => {
+        return this.allCheckedKeys.other.includes(key);
+      });
+    },
+    setCurrentCheckedKeys() {
+      let { main, other } = this.defaultCheckedKeys;
+      let res = [...new Set([...main, ...other])];
+      this.checkedKeys = res;
+    },
+    // 选中事件
+    onCheck() {
+      this.emitCheckedkeys();
+      // this.$emit('check',...arg)
+    },
+    // 展开数节点
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+      // this.$emit('expand', expandedKeys, ...arg)
+    },
+    treeCount(count) {
+      if (!count) return "";
+      return `(${count})`;
+    },
+    searchOnloadMore() {
+      this.$emit("searchOnloadMore");
+    },
+    formatName(name) {
+      let len = name.length;
+      return name.substring(len - 2, len);
+    }
+  },
+  components: {
+    [Icon.name]: Icon,
+    [Tree.name]: Tree,
+    [Tooltip.name]: Tooltip
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.df {
+  display: flex;
+}
+
+.search-tree-wrap {
+  /deep/ .ant-tree>li {
+    overflow: hidden;
+    width: 100%;
+  }
+
+  /deep/ .ant-tree-switcher {
+    display: none;
+  }
+
+  /deep/ .ant-tree-node-content-wrapper {
+    width: 90%;
+    overflow: hidden;
+    // margin-left: 25px;
+    height: 40px;
+    // box-sizing: border-box;
+    // display: flex;
+    // align-items: center;
+  }
+  /deep/ .ant-tree li .ant-tree-node-content-wrapper:hover {
+    background-color: initial;
+  }
+
+  /deep/ .ant-tree-checkbox-inner {
+    border: 1px solid #d5d5d5;
+  }
+
+  /deep/.ant-tree-title {
+    // width: auto !important;
+    width: 100%;
+  }
+
+  .search-tree-item {
+    display: flex;
+    align-items: center;
+  }
+  .name-wrap {
+    width: 48px;
+    height: 48px;
+    background: #7d88b5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-right: 13px;
+
+    .name {
+      font-size: 16px;
+      color: #ffffff;
+      margin-bottom: 0;
+      line-height: 16px;
+    }
+  }
+  .info-wrap {
+    // width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+  }
+  .info-wrap-top {
+    // display: flex;
+    align-items: flex-end;
+    margin-bottom: 1px;
+    // width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .info-wrap-title {
+    // width: 140px;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // overflow: hidden;
+    // white-space: nowrap;
+    margin-bottom: 0;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4e4e4e;
+    line-height: 16px;
+
+    .c-title {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #212121;
+    }
+    .c-sub-title {
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      // font-weight: 400;
+      color: #4e4e4e;
+    }
+  }
+  .info-wrap-desc {
+    margin-left: 10px;
+    margin-bottom: 0;
+    font-size: 12px;
+    line-height: 17px;
+    color: #aeaeae;
+  }
+  .info-wrap-position {
+    margin-bottom: 0;
+    font-size: 12px;
+    color: #7d88b5;
+    line-height: 17px;
+  }
+}
+
+.load-more-btn-wrap {
+  display: flex;
+  justify-content: center;
+  height: 35px;
+  line-height: 35px;
+  cursor: pointer;
+  padding-top: 10px;
+  box-sizing: border-box;
+
+  .search-input-icon {
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.4);
+    margin-right: 14px;
+  }
+  .load-more-btn {
+    font-size: 12px;
+    color: #747c8e;
+    line-height: 12px;
+  }
+}
+</style>