cnhis-design-vue 3.0.5 → 3.0.8

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

@@ -0,0 +1,326 @@
+<template>
+  <div v-show="visible" class="search-tree-wrap">
+    <n-tree
+      v-bind="$attrs"
+      ref="searchTree"
+      v-model:checked-keys="state.checkedKeys"
+      @update:expanded-keys="onExpand"
+      @update:checked-keys="onCheck"
+      checkable
+      cascade
+      allow-checking-not-loaded
+      check-strategy="all"
+      :selectable="false"
+      :expanded-keys="state.expandedKeys"
+      :data="formatTreeData"
+      :render-label="renderLabel"
+    >
+    </n-tree>
+    <div v-show="!searchNoMore" style="text-align: center;">
+      <!-- loadMorenLoadinng -->
+      <n-spin v-if="loadMorenLoadinng" />
+      <div v-else class="load-more-btn-wrap">
+        <n-icon :component="Search" class="search-input-icon" />
+        <div class="load-more-btn" @click="searchOnloadMore">
+          加载更多
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { ref, reactive, watch, computed } from 'vue'
+import { NSpin, NTree, NTooltip, NIcon } from "naive-ui"
+import type { TreeOption } from 'naive-ui'
+import { Search } from '@vicons/ionicons5'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  searchNoMore?: boolean
+  loadMorenLoadinng?: boolean
+  formatTreeData?: any[]
+  searchValue?: string
+  defaultExpandedKeys: Array<string | number>
+  allCheckedKeys?: any
+  dataListKeys?: any
+}>(), {
+  visible: false,
+  searchNoMore: false,
+  loadMorenLoadinng: false,
+  formatTreeData: () => ([])
+})
+const state = reactive({
+  expandedKeys: [] as Array<string | number>,
+  autoExpandParent: true,
+  // 初始化时，根据formatTreeData和父组件的checkedKeys，动态计算
+  checkedKeys: [],
+  defaultCheckedKeys: {
+    main: [],
+    other: []
+  }
+})
+
+const emit = defineEmits(['addCheckedkeysMain', 'removeCheckedkeysMain', 'addCheckedkeysOther', 'removeCheckedkeysOther', 'searchOnloadMore'])
+
+const dataLen = computed(() => props.formatTreeData?.length || 0)
+
+const resetData = () => {
+  state.checkedKeys = [];
+  state.expandedKeys = [];
+  state.autoExpandParent = true;
+  state.defaultCheckedKeys.main = [];
+  state.defaultCheckedKeys.other = [];
+}
+const emitCheckedkeys = () => {
+  emitCheckedkeysMain();
+  emitCheckedkeysOther();
+  setDefaultCheckedKeys();
+}
+const emitCheckedkeysMain = () => {
+  let searchCheckedKeysMain = state.checkedKeys.filter(key => {
+    return props.dataListKeys.main.includes(key);
+  });
+  let defaultCheckedKeysMain = state.defaultCheckedKeys.main;
+  // let defaultCheckedKeysMain = this.defaultCheckedKeys.main.filter(key => {
+  //   return this.dataListKeys.main.includes(key);
+  // });
+  let { add, remove } = calcChangeKeys(defaultCheckedKeysMain, searchCheckedKeysMain);
+  emit("addCheckedkeysMain", add);
+  emit("removeCheckedkeysMain", remove);
+}
+const emitCheckedkeysOther = () => {
+  let searchCheckedKeysOther = state.checkedKeys.filter(key => {
+    return props.dataListKeys.other.includes(key);
+  });
+  let defaultCheckedKeysOther = state.defaultCheckedKeys.other;
+  // let defaultCheckedKeysOther = this.defaultCheckedKeys.other.filter(key => {
+  //   return this.dataListKeys.other.includes(key);
+  // });
+  let { add, remove } = calcChangeKeys(defaultCheckedKeysOther, searchCheckedKeysOther);
+  emit("addCheckedkeysOther", add);
+  emit("removeCheckedkeysOther", remove);
+}
+const calcChangeKeys = (defaultCheckedKeys: Array<string | number>, currentCheckedKeys: Array<string | number>) => {
+  let add = [] as Array<string | number>;
+  let remove = [] as Array<string | number>;
+
+  currentCheckedKeys.forEach(key => {
+    if (!defaultCheckedKeys.includes(key)) {
+      add.push(key);
+    }
+  });
+
+  defaultCheckedKeys.forEach(key => {
+    if (!currentCheckedKeys.includes(key)) {
+      remove.push(key);
+    }
+  });
+
+  return {
+    add,
+    remove
+  };
+}
+const emptyCheckedKeys = () => {
+  state.checkedKeys = [];
+  emitCheckedkeys();
+}
+/* setCheckedKeys */
+const setDefaultCheckedKeys = () => {
+  setDefaultCheckedKeysMain();
+  setDefaultCheckedKeysOther();
+  setCurrentCheckedKeys();
+}
+const setDefaultCheckedKeysMain = () => {
+  state.defaultCheckedKeys.main = props.dataListKeys.main.filter((key: any) => {
+    return props.allCheckedKeys.main.includes(key);
+  });
+}
+const setDefaultCheckedKeysOther = () => {
+  state.defaultCheckedKeys.other = props.dataListKeys.other.filter((key: any) => {
+    return props.allCheckedKeys.other.includes(key);
+  });
+}
+const setCurrentCheckedKeys = () => {
+  let { main, other } = state.defaultCheckedKeys;
+  let res = [...new Set([...main, ...other])];
+  state.checkedKeys = res;
+}
+// 选中事件
+const onCheck = () => {
+  emitCheckedkeys();
+  // this.$emit('check',...arg)
+}
+// 展开数节点
+const onExpand = (expandedKeys: Array<string | number>) => {
+  state.expandedKeys = expandedKeys;
+  state.autoExpandParent = false;
+  // this.$emit('expand', expandedKeys, ...arg)
+}
+const treeCount = (count: any) => {
+  if (!count) return "";
+  return `(${count})`;
+}
+const searchOnloadMore = () => {
+  emit("searchOnloadMore");
+}
+const formatName = (name: string) => {
+  let len = name.length;
+  return name.substring(len - 2, len);
+}
+const renderLabel = ({option}: {option: TreeOption}) => {
+  return (
+    <div class="search-tree-item">
+      <div class="info-wrap">
+        <NTooltip trigger="hover">
+          {{
+            default: () => `${option.title} ${option.sub_title || ''}`,
+            trigger: () => (
+              <p class="info-wrap-top" style="margin: 0">
+                <span class="info-wrap-title">
+                  <span class="c-title">{ option.title }</span>&thinsp;<span class="c-sub-title">{ option.sub_title }</span>
+                </span>
+              </p>
+            )
+          }}
+        </NTooltip>
+      </div>
+    </div>
+  )
+}
+
+watch(
+  () => props.defaultExpandedKeys,
+  (val) => {
+    state.expandedKeys = val
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => props.visible,
+  (val) => {
+    if (!val) {
+      resetData()
+      return
+    }
+    setDefaultCheckedKeys();
+  }
+)
+watch(
+  () => dataLen,
+  (val) => {
+    if (val.value > 0) {
+      setDefaultCheckedKeys()
+    }
+  }
+)
+
+defineExpose({
+  setDefaultCheckedKeys,
+  checkedKeys: state.checkedKeys,
+  emptyCheckedKeys
+})
+
+</script>
+
+<style lang="less" scoped>
+.df {
+  display: flex;
+}
+
+.search-tree-wrap {
+  .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 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+  }
+  .info-wrap-top {
+    align-items: flex-end;
+    margin: 0;
+    margin-bottom: 1px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .info-wrap-title {
+    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;
+      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>

package/packages/select-person/src/utils/index.js

@@ -0,0 +1,66 @@
+// 过滤树形数据
+export const filterTree = ({ value, data, prop, filter, filterXor, children, visible, filterChildren = true, callback }) => {
+  // 默认赋值
+  visible = visible || 'visible';
+  children = children || 'children';
+  prop = prop || 'text';
+
+  const filterNodeMethod = function(value, data) {
+    if (!value) {
+      return true;
+    }
+    let flag = (data[prop] || '').indexOf(value) !== -1;
+    return filterXor ? !flag : flag;
+  };
+
+  const traverse = function(node) {
+    const childNodes = node[children] || [];
+
+    childNodes.forEach(child => {
+      callback && callback(child);
+      child[visible] = (!node.root && !filterChildren && node[visible]) || filterNodeMethod.call(child, value, child, prop);
+
+      traverse(child);
+    });
+
+    if (!node[visible] && childNodes.length) {
+      let allHidden = true;
+      allHidden = !childNodes.some(child => child[visible]);
+
+      node[visible] = allHidden === false;
+    }
+  };
+  let totalData = {
+    root: true
+  };
+  totalData[children] = data;
+  traverse(totalData);
+
+  if (filter) {
+    let copyData = data.slice();
+    let filterHandle = filterData => {
+      return filterData.filter((item, index) => {
+        if (item[visible]) {
+          if (item[children]) {
+            item[children] = filterHandle(item[children]);
+          }
+          return true;
+        }
+        return false;
+      });
+    };
+    return filterHandle(copyData);
+  }
+};
+
+// 查找每一层数据的第一条
+export const deepTraversalFirst = (node, nodeList = []) => {
+  if (node !== null) {
+    nodeList.push(node);
+    if (node.children && node.children.length > 0) {
+      let children = node.children;
+      deepTraversalFirst(children[0], nodeList);
+    }
+  }
+  return nodeList;
+};