cnhis-design-vue 3.0.5 → 3.0.8

package/packages/select-person/src/SelectPerson.vue

@@ -0,0 +1,1104 @@
+<template>
+  <div class="personnel">
+    <n-spin :show="state.spinning">
+      <div class="people-tree">
+        <!-- 树主体与检索 -->
+        <div class="people-tree-item people-tree-left">
+          <n-input-group style="margin-bottom: 12px">
+            <n-input style="text-align: left;" clearable v-model:value="state.title" :placeholder="searchPlaceholder" />
+            <n-button type="primary" @click="searchClick">{{ searchButtonText }}</n-button>
+          </n-input-group>
+          <n-checkbox v-if="searchTreeVisable" v-model:checked="state.searchChecked" :indeterminate="state.searchIndeterminate" @update:checked="radioChange">全选</n-checkbox>
+          <n-checkbox v-else v-model:checked="state.singleChecked" :indeterminate="state.searchIndeterminate" @update:checked="radioChange">全选</n-checkbox>
+
+          <!-- <div v-show="state.search.status == 3 || (state.search.status == 0 && state.treeData.main && state.treeData.main.length == 0)" class="no-data-tips">
+            查无结果
+          </div> -->
+          <!-- main tree -->
+          <n-tree
+            class="main-tree-container"
+            v-show="state.search.status == 0"
+            v-model:checked-keys="state.checkedKeys.main"
+            :expanded-keys="state.expandedKeys"
+            checkable
+            cascade
+            allow-checking-not-loaded
+            :selectable="false"
+            :data="state.treeData.main"
+            :check-strategy="queryMainTreeData ? 'all' : 'child'"
+            @update:expanded-keys="onExpand"
+            :on-load="onLoadData"
+            :render-label="renderLabel"
+          ></n-tree>
+          <!-- search tree -->
+          
+          <search-tree
+            v-bind="$attrs"
+            ref="searchTree"
+            :visible="searchTreeVisable"
+            :formatTreeData="state.treeData.search"
+            :searchValue="state.searchValue"
+            :allCheckedKeys="state.checkedKeys"
+            :defaultExpandedKeys="state.search.defaultExpandedKeys"
+            :dataListKeys="state.search.dataListKeys"
+            :searchNoMore="state.searchNoMore"
+            :loadMorenLoadinng="state.loadMorenLoadinng"
+            @addCheckedkeysMain="addCheckedkeysMain"
+            @removeCheckedkeysMain="removeCheckedkeysMain"
+            @addCheckedkeysOther="addCheckedkeysOther"
+            @removeCheckedkeysOther="removeCheckedkeysOther"
+            @searchOnloadMore="searchOnloadMore"
+          ></search-tree>
+        </div>
+        <!-- 树已选的数据 -->
+        <div class="people-tree-item tags-box">
+          <slot v-if="state.defaultShowList && state.defaultShowList.length">
+            <div class="tag-item def-item" v-for="(tag, i) in state.defaultShowList" :key="i">
+              {{ tag.title || tag[wordbookChild.user_name_obj] }}
+              <n-icon v-if="!isDetail" class="tag-close" :component="CloseCircleSharp" @click="closeDefaultTag(tag, i)"></n-icon>
+            </div>
+          </slot>
+
+          <div
+            class="tag-item"
+            :class="{ isRoot: !tag.isLeaf }"
+            v-for="tag in checkedTreeItem"
+            :key="tag.key"
+          >
+            {{ tag.title || tag.key }} {{ treeCount(tag.count) }}
+            <n-icon v-if="!isDetail" class="tag-close" :component="CloseCircleSharp" @click="closeTag(tag)"></n-icon>
+          </div>
+        </div>
+      </div>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="tsx">
+import create from '@/core/create.js';
+export default create({
+  name: "SelectPerson"
+})
+</script>
+<script lang="tsx" setup>
+import { reactive, onMounted, computed, ref, nextTick, watch } from "vue"
+import { NButton, NInput, NSpin, NInputGroup, NCheckbox, NTree, NTooltip, NIcon, useMessage } from "naive-ui"
+import { CloseCircleSharp } from '@vicons/ionicons5'
+import type { TreeOption } from 'naive-ui'
+import vexutils from '@/utils/vexutils.js';
+import SearchTree from './search-tree.vue';
+import { filterTree } from './utils/index.js'
+
+(window as any).$message = useMessage()
+
+const FIXEDKEY = '8982eeb4-0439-4100-9805-8cdd12b2256c-front-end-fixed-key';
+const props = withDefaults(defineProps<{
+  visible?: boolean
+  isDetail?: boolean
+  defaultList?: any[]
+  data?: any[]
+  searchPlaceholder?: string
+  searchButtonText?: string
+  wordbook: any
+  wordbookChild?: any
+  SearchLoadMore?: boolean
+  queryMainTreeData?: Function
+  queryLoadChildData?: Function
+  queryTreeSearch?: Function
+}>(), {
+  visible: false,
+  isDetail: false,
+  defaultList: () => ([]),
+  data: () => ([]),
+  searchPlaceholder: '输入关键字搜索',
+  searchButtonText: '搜索',
+  wordbook: () => ({}),
+  wordbookChild: () => ({}),
+  SearchLoadMore: false
+})
+const searchTree: any = ref(null)
+const state = reactive({
+  treeData: {
+    main: [] as any[],
+    search: [] as any[]
+  },
+  // 展开的keys
+  expandedKeys: [] as any[],
+  autoExpandParent: true,
+  // 扁平化tree的options Object{Array[Object]}
+  dataList: {
+    main: [],
+    other: []
+  },
+  // 当前tree选中的keys Object{Array[Number]}
+  checkedKeys: {
+    main: [] as any[],
+    other: [] as any[]
+  },
+  search: {
+    defaultExpandedKeys: [] as any[],
+    // 0: 未查询，1：查询中，2：有查询结果，3无查询结果
+    status: 0,
+    dataListKeys: {
+      main: [] as any[],
+      other: [] as any[]
+    },
+    records: 0
+  },
+  searchValue: "",
+  searchPage: 1,
+  searchNoMore: false,
+  title: "",
+  // 选中的所有叶节点(Leaf)keys <Array[Number]>，最终提交接口所需格式
+  checkedLeafKeys: [] as any[],
+  spinning: false,
+  loadMorenLoadinng: false,
+
+  errorMsg: "",
+
+  defaultShowList: [] as any[], // 默认选中项
+  checkedKeysMain: [],
+
+  cacheParentIdObj: {},
+  singleChecked: false,
+  indeterminate: false,
+
+  searchIndeterminate: false,
+  searchChecked: false
+})
+
+const emit = defineEmits(['check', 'pubCheckedTreeItem', 'handleOk', 'change', 'submitData', 'update:visible'])
+
+const searchTreeVisable = computed(() => state.search.status == 2)
+const dataListMainKeys = computed(() => {
+  if (!state.dataList.main.length) return []
+  return state.dataList.main.map((i: any) => i.key)
+})
+const dataListOtherKeys = computed(() => {
+  if (!state.dataList.other.length) return []
+  return state.dataList.other.map((i: any) => i.key)
+})
+// 右侧展示tabs <Array[Object]>
+const checkedTreeItem = computed(() => {
+  let otherItems = state.dataList.other.filter((item: any) => {
+    return state.checkedKeys.other.includes(item.key);
+  });
+  let mainItems = state.dataList.main.filter(item => {
+    let { isLeaf, key } = item;
+    let parentId = getParentId(item);
+    let showKeys = [...state.checkedKeys.main, ...otherItems];
+    let checked = showKeys.includes(key);
+    // 父级全选，子级不展示
+    /** String(parentId) 类型不相等 */
+    if (isLeaf && parentId && state.checkedKeys.main.some(v => v == parentId)) {
+      checked = false;
+    }
+    return checked;
+  });
+  let list = uniqArrObj([...mainItems, ...otherItems], "key");
+  return list;
+})
+const wordbookConfig = computed(() => {
+  const { parent_id_obj, parent_name_obj } = props.wordbook || {};
+  const { user_id_obj, user_name_obj } = props.wordbookChild || {};
+  return {
+    parent_id_obj,
+    parent_name_obj,
+    user_id_obj,
+    user_name_obj
+  };
+})
+const getLoadChildData = computed(() => {
+  if (typeof props.queryLoadChildData == 'function') {
+    return onLoadData;
+  }
+  return null
+})
+
+const renderLabel = ({option}: {option: TreeOption}) => {
+  if (option.isLeaf || !option.children) {
+    return (
+      <NTooltip trigger="hover">
+        {{
+          default: () => `${option.title} ${option.sub_title || ''}`,
+          trigger: () => (
+            <span>
+              <span class="c-title">{ option.title || option.key }&thinsp; </span>
+              <span class="c-sub-title">{ option.sub_title }</span>
+            </span>
+          )
+        }}
+      </NTooltip>
+    )
+  } else {
+    return (
+      <span class="p-title">
+        <span>{ option.title || option.key }</span>
+        { treeCount(option.count) }
+      </span>
+    )
+  }
+}
+const initDefault = () => {
+  if (getLoadChildData.value) {
+    getDefaultList();
+  } else {
+    nextTick(() => {
+      state.checkedKeys.main = [...props.defaultList];
+    });
+  }
+}
+/** --- 默认值 --- */
+const getDefaultList = () => {
+  let copy = JSON.parse(JSON.stringify(props.defaultList));
+  if (Array.isArray(copy)) {
+    // this.defaultShowObj = {};
+
+    // const { user_id_obj } = props.wordbookChild || {};
+    copy.forEach(v => {
+      handleDefMapping(v);
+      let key = getuniqKey(v);
+      let pId = getParentId(v);
+      state.cacheParentIdObj[pId] = pId;
+      // this.defaultShowObj[key] = v[user_id_obj];
+    });
+    state.defaultShowList = copy;
+  }
+}
+/**
+     * 根据配置映射默认值
+     */
+const handleDefMapping = (v: any) => {
+  const { parent_id_obj, parent_name_obj, user_id_obj, user_name_obj } = wordbookConfig.value || {};
+  // 自定义 key 值
+  const { parent_id_obj_key, parent_name_obj_key } = props.wordbook;
+  const { user_id_obj_key, user_name_obj_key } = props.wordbookChild;
+  v[parent_id_obj] = v[parent_id_obj_key] || v.parent_id;
+  v[parent_name_obj] = v[parent_name_obj_key] || v.parent_name;
+  v[user_id_obj] = v[user_id_obj_key] || v.user_id;
+  v[user_name_obj] = v[user_name_obj_key] || v.user_name;
+}
+const staticDataInit = () => {
+  if (!Array.isArray(props.data) || props.data.length == 0) return;
+  state.treeData.main = JSON.parse(JSON.stringify(props.data));
+  generateDataList(state.treeData.main, state.dataList.main);
+}
+const getcheckedKeys = () => {
+  let checkedKeysMain = [] as any[],
+    checkedKeysOther = [] as any[];
+  let copy = JSON.parse(JSON.stringify(props.defaultList));
+  if (Array.isArray(copy)) {
+    copy.forEach(v => {
+      handleDefMapping(v);
+      let key = getuniqKey(v);
+      checkedKeysMain.push(key);
+      // 回填到 检索的选择，防止回填马上检索
+      if (String(key).includes(FIXEDKEY)) {
+        checkedKeysOther.push(key);
+      }
+    });
+  }
+  return {
+    checkedKeysMain,
+    checkedKeysOther
+  };
+}
+/**
+ * 初始化 请求已选的数据
+ */
+const loadSelected = async () => {
+  try {
+    let list = await Promise.all(
+      state.treeData.main.map(async v => {
+        const { parent_id_obj } = props.wordbook || {};
+        if ([v.key, v[parent_id_obj], String(v[parent_id_obj])].includes(state.cacheParentIdObj[v[parent_id_obj]])) {
+          await onLoadData(v);
+          return v;
+        }
+      })
+    );
+    return list;
+  } catch (error) {
+    return Promise.resolve();
+  }
+}
+// 动态获取子节点
+const onLoadData = (option: TreeOption ) => {
+  return new Promise<void>(async (resolve: Function) => {
+    if (option.children) {
+      resolve();
+      return;
+    }
+    option.children = await handleLoadChildData(option.key, option);
+
+    hanldeFilterDefaultShowList(option.children);
+
+    nextTick(() => {
+      state.treeData.main = [...state.treeData.main];
+    });
+
+    addCheckedKeysChildrenMain(option);
+
+    generateDataList(option.children || [], state.dataList.main);
+    resolve();
+  });
+}
+// 查询树结构数据(一级父类)
+const getUsers = async () => {
+  try {
+    if (typeof props.queryMainTreeData !== 'function') {
+      return;
+    }
+    state.spinning = true;
+    const { parent_id_obj } = wordbookConfig.value || {};
+    let rows = await props.queryMainTreeData();
+    let list = uniqArrObj(rows || [], parent_id_obj);
+    state.treeData.main = list;
+    generateDataList(state.treeData.main, state.dataList.main);
+    // TODO:这里的回填
+    await loadSelected();
+    let { checkedKeysMain, checkedKeysOther } = getcheckedKeys();
+    state.checkedKeys.main.push(...checkedKeysMain);
+    state.checkedKeys.other = [...checkedKeysOther];
+
+    state.treeData.main.forEach((f: any) => {
+      if (f && f.children && f.children.length) {
+        let flag = f.children.every((c: any) => checkedKeysMain.includes(c.key));
+        if (flag && f.key) {
+          state.checkedKeys.main.push(f.key);
+        }
+      }
+    });
+    state.spinning = false;
+  } catch (error) {
+    state.spinning = false;
+    (window as any).$message.error('查询异常');
+  }
+}
+const loadMainChildData = (searchResultTreeData: any[]) => {
+  return new Promise(async (resolve: Function) => {
+    let promises = searchResultTreeData.map(async item => {
+      if (item.users) {
+        let mainTreeItem = state.treeData.main.find(mainItem => mainItem.key == item.key);
+        if (!mainTreeItem || (mainTreeItem && !mainTreeItem.children)) {
+          if (!mainTreeItem) {
+            mainTreeItem = { ...item };
+          }
+          mainTreeItem.children = await handleLoadChildData(item.key, mainTreeItem);
+          generateDataList(mainTreeItem.children, state.dataList.main);
+          addCheckedKeysChildrenMain(mainTreeItem);
+        }
+      }
+    });
+
+    await Promise.all(promises);
+
+    resolve();
+  });
+}
+const handleLoadChildData = async (key: string | number | undefined, option: TreeOption) => {
+  let rows = props.queryLoadChildData && (await props.queryLoadChildData(key, option));
+  let list = rows;
+  return list;
+}
+// 暂存实际可选节点arr
+const generateDataList = (data: TreeOption[], dataList: any) => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    dataList.push({
+      parentId: getParentId(node),
+      ...node
+    });
+    if (node.children) {
+      generateDataList(node.children, dataList);
+    }
+  }
+}
+const addCheckedKeysChildrenMain = (item: any) => {
+  if (!item.key) return;
+  if (!state.checkedKeys.main.includes(String(item.key))) return false;
+  // 新查询到插入已选中的main treeData 的child key，需要手动push到checkedKeys中
+  if (!Array.isArray(item.children)) return false;
+  item.children.forEach(({ key }: { key: string | number }) => {
+    // 防止重复添加（已处理，不会重复添加，保留代码以防逻辑缺漏）
+    if (state.checkedKeys.main.includes(key) || !key) return false;
+    state.checkedKeys.main.push(key);
+  });
+}
+/**
+ * 过滤默认值的右边展示
+ */
+const hanldeFilterDefaultShowList = (list: any) => {
+  state.defaultShowList = state.defaultShowList.filter(d => list.findIndex((l: any) => getuniqKey(d) == getuniqKey(l)) == -1);
+  // this.updateDefaultShowObj(this.defaultShowList);
+}
+/**
+ * 检索
+ */
+const searchFetch = async (data = {}, config = {} as any) => {
+  if (typeof props.queryTreeSearch !== 'function') {
+    staticDataSearch();
+    state.spinning = false;
+    isSearchAllCheck();
+    return;
+  }
+  if (!state.searchValue) {
+    state.search.status = 0;
+    state.search.defaultExpandedKeys = [];
+    state.expandedKeys = [];
+    state.spinning = false;
+    state.searchNoMore = false;
+    return false;
+  }
+  if (!config.loadMoren) {
+    state.search.status = 1;
+  } else {
+    state.loadMorenLoadinng = true;
+  }
+
+  let rows = await props.queryTreeSearch(state.searchValue, data);
+  let searchResultTreeData = rows;
+  state.loadMorenLoadinng = false;
+  if (!searchResultTreeData || !searchResultTreeData.length) {
+    if (state.searchPage == 1) {
+      state.search.defaultExpandedKeys = [];
+      state.search.status = 3;
+    } else {
+      state.search.status = 2;
+      state.searchNoMore = true;
+    }
+
+    state.spinning = false;
+    isSearchAllCheck();
+    return false;
+  }
+
+  const { parent_id_obj, parent_name_obj, user_count_obj } = props.wordbook || {};
+  const { user_name_obj } = props.wordbookChild || {};
+  let pObj = {};
+  searchResultTreeData.forEach((item: any) => {
+    item[parent_id_obj] &&
+      (pObj[item[parent_id_obj]] = {
+        key: item[parent_id_obj],
+        users: []
+      });
+
+    if (item.users) {
+      insertSearchTreeData(item);
+    } else {
+      insertSearchTreeDataOther(item);
+    }
+  });
+  let pList = [] as any[];
+  Object.keys(pObj || {}).forEach(v => {
+    if (v) {
+      pList.push({ ...pObj[v] });
+    }
+  });
+  let len = state.treeData.search.length || 0;
+  // TODO:加载更多
+  if (props.SearchLoadMore) {
+    state.searchNoMore = false;
+  } else {
+    state.searchNoMore = true;
+  }
+  // 防止searchTree选中后切换回mainTree，mainTree checkedKeys状态丢失
+  await loadMainChildData(pList);
+  generateSearchDataListKeys(searchResultTreeData);
+
+  hanldeFilterDefaultShowList(searchResultTreeData);
+  refreshSearchTree();
+  state.search.status = 2;
+  state.spinning = false;
+
+  isSearchAllCheck();
+}
+const refreshSearchTree = () => {
+  if (!searchTreeVisable.value) return false;
+  searchTree.value.setDefaultCheckedKeys();
+  nextTick(() => {
+    isSearchAllCheck();
+  });
+}
+const generateSearchDataListKeys = (searchResultTreeData: any[]) => {
+  searchResultTreeData.forEach((item: any) => {
+    if (!dataListMainKeys.value.includes(item.key)) {
+      state.search.dataListKeys.other.push(item.key);
+      item.children &&
+        item.children.forEach((childItem: any) => {
+          state.search.dataListKeys.other.push(childItem.key);
+        });
+      return;
+    }
+
+    state.search.dataListKeys.main.push(item.key);
+    item.children &&
+      item.children.forEach((childItem: any) => {
+        state.search.dataListKeys.main.push(childItem.key);
+      });
+  });
+}
+const insertSearchTreeData = (item: any) => {
+  const { user_count_obj } = props.wordbook || {};
+  state.search.defaultExpandedKeys.push(item.key);
+
+  // 默认值处理
+  hanldeFilterDefaultShowList(item.children || []);
+
+  if (item[user_count_obj] == item.children.length) {
+    item.disableCheckbox = false;
+  }
+  state.treeData.search.push(item);
+}
+const insertSearchTreeDataOther = (item: any) => {
+  let formatItem = Object.assign({}, item, { isLeaf: true });
+
+  state.treeData.search.push(formatItem);
+
+  if (dataListOtherKeys.value.includes(formatItem.key)) return false;
+  generateDataList([formatItem], state.dataList.other);
+}
+const isSearchAllCheck = () => {
+  nextTick(() => {
+    let skeyArr = state.treeData.search.map((item: any) => item.key);
+    let serchCheckedKeys = searchTree.value.checkedKeys;
+    state.searchIndeterminate = !!serchCheckedKeys.length && serchCheckedKeys.length < skeyArr.length;
+    state.searchChecked = serchCheckedKeys.length === skeyArr.length;
+  });
+}
+const staticDataSearch = () => {
+  // let expandedKeys = new Set();
+  // getStaticSearchParentKey(state.treeData.main, expandedKeys);
+  // state.expandedKeys = Array.from(expandedKeys);
+  // state.autoExpandParent = true;
+
+  if (!state.title) {
+    state.treeData.main = JSON.parse(JSON.stringify(props.data))
+    return
+  }
+  let copyData = JSON.parse(JSON.stringify(state.treeData.main))
+  filterTree({ value: state.title, data: copyData, prop: 'title' })
+  const expandedKeys: any[] = [];
+  vexutils.searchTree(copyData, (item: any) => {
+    if (item.visible) {
+      expandedKeys.push(item.key);
+    }
+    if (item.children?.length) {
+      item.children = item.children.filter((child: any) => child.visible);
+    }
+  });
+  state.treeData.main = copyData;
+  state.expandedKeys = expandedKeys;
+}
+// const getStaticSearchParentKey = (treeData: any[], expandedKeys: any, orgId?: string) => {
+//   const keyword = state.title;
+//   for (let i = 0; i < treeData.length; i++) {
+//     const user = treeData[i];
+//     let { title = "", key, children } = user;
+//     if (
+//       keyword.length > 0 &&
+//       (String(title).indexOf(keyword) !== -1 || String(key).indexOf(keyword) !== -1)
+//     ) {
+//       expandedKeys.add(key);
+//       if (orgId) {
+//         expandedKeys.add(orgId);
+//       }
+//       break;
+//     }
+//     if (children) {
+//       getStaticSearchParentKey(children, expandedKeys, user.key || orgId);
+//     }
+//   }
+// }
+// 展开数节点
+const onExpand = (expandedKeys: Array<string | number>) => {
+  // const latestOpenKey = expandedKeys.find(key => this.expandedKeys.indexOf(key) == -1);
+  // this.expandedKeys = latestOpenKey ? [latestOpenKey] : [];
+  // this.autoExpandParent = false;
+  state.expandedKeys = expandedKeys;
+  state.autoExpandParent = false;
+  // this.$emit('expand', expandedKeys, ...arg)
+}
+const searchClick = () => {
+  state.searchValue = state.title;
+
+  state.treeData.search = [];
+  state.search.dataListKeys.other = [];
+  state.search.dataListKeys.main = [];
+  state.search.defaultExpandedKeys = [];
+
+  state.spinning = true;
+  state.searchPage = 1;
+  searchFetch();
+}
+const isAllCheck = (checkedKeys = [] as Array<string | number>) => {
+  if (!checkedKeys || checkedKeys.length == 0) {
+    state.indeterminate = false;
+    state.singleChecked = false;
+  } else {
+    let keyArr = state.treeData.main.map((item: any) => item.key);
+    let keyArrTemp = keyArr.filter((item: string | number) => checkedKeys.indexOf(item) !== -1);
+    state.indeterminate = !(keyArr.length == keyArrTemp.length);
+    state.singleChecked = keyArr.length == keyArrTemp.length;
+  }
+}
+/* 子组件emit方法 */
+const addCheckedkeysMain = (keys: Array<string | number>) => {
+  let checkedKeys = state.checkedKeys.main;
+  let filterKey = (keys || {}).filter(Boolean);
+  filterKey.forEach(key => {
+    //
+    checkedKeys.push(key);
+    // 如果子级全选，父级也需要选中
+    let _getParentKey = getParentKey(key, state.treeData.main);
+    if (!_getParentKey) return;
+    let parent = state.treeData.main.filter(item => {
+      return item.key == _getParentKey;
+    });
+    let allCheck = (parent[0]?.children || []).every((item: any) => {
+      return checkedKeys.includes(item.key);
+    });
+    allCheck && checkedKeys.push(_getParentKey);
+  });
+}
+// 获取匹配搜索节点arr
+const getParentKey = (key: string | number, tree: any[]): string | number => {
+  let parentKey;
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.key == key) {
+      parentKey = node.key;
+      return parentKey;
+    }
+
+    if (node.children) {
+      if (node.children.some((item: any) => item.key == key)) {
+        parentKey = node.key;
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children);
+      }
+    }
+  }
+  return parentKey;
+}
+const radioChange = (checked: boolean) => {
+  if (searchTreeVisable.value) {
+    state.singleChecked = checked;
+  } else {
+    state.searchChecked = checked;
+  }
+  checkAll(checked ? 1 : 2);
+  // handleOk()
+}
+// type 1 全选 2 反选(清空)
+const checkAll = (type: string | number) => {
+  if (checkAllSearchTree(type)) return false;
+  if (type == 1) {
+    state.expandedKeys = [];
+    state.checkedKeys.main = dataListMainKeys.value;
+  } else if (type == 2) {
+    state.checkedKeys.main = [];
+    state.autoExpandParent = true;
+  }
+}
+const checkAllSearchTree = (type: string | number) => {
+  if (!searchTreeVisable.value) return false;
+
+  if (type == 1) {
+    // 全选默认不选中父级
+    let allSearchkeysMain = state.search.dataListKeys.main.filter(key => {
+      return !state.search.defaultExpandedKeys.includes(key);
+    });
+
+    let allSearchkeysOther = state.search.dataListKeys.other;
+
+    state.checkedKeys.main = vexutils.uniq([...state.checkedKeys.main, ...allSearchkeysMain]);
+    state.checkedKeys.other = vexutils.uniq([...state.checkedKeys.other, ...allSearchkeysOther]);
+
+    // 如果子级全选，父级也需要选中
+    state.search.dataListKeys.main.forEach(key => {
+      let parentKey = getParentKey(key, state.treeData.main);
+      let parent = state.treeData.main.filter(item => {
+        return item.key == parentKey;
+      });
+
+      let allCheck = parent[0].children.every((item: any) => {
+        return state.checkedKeys.main.includes(item.key);
+      });
+      allCheck && state.checkedKeys.main.push(parentKey);
+    });
+    refreshSearchTree();
+  } else if (type == 2) {
+    searchTree.value.emptyCheckedKeys();
+    state.autoExpandParent = true;
+  }
+  isSearchAllCheck();
+  return true;
+}
+const removeCheckedkeysMain = (keys: Array<string | number>) => {
+  let checkedKeysMain = vexutils.clone(state.checkedKeys.main, true);
+  keys.forEach(key => {
+    //
+    let index = checkedKeysMain.findIndex((mainKey: string | number) => mainKey == key);
+    if (index !== -1) {
+      checkedKeysMain.splice(index, 1);
+      state.checkedKeys.main = [...checkedKeysMain];
+    }
+    // 删除父级选中
+    let parentKey = getParentKey(key, state.treeData.main);
+    let parentIndex = checkedKeysMain.findIndex((mainKey: any) => mainKey == parentKey);
+    if (parentIndex !== -1) {
+      checkedKeysMain.splice(parentIndex, 1);
+    }
+  });
+
+  state.checkedKeys.main = [...checkedKeysMain];
+}
+const addCheckedkeysOther = (keys: any) => {
+  state.checkedKeys.other.push(...keys);
+}
+const removeCheckedkeysOther = (keys: any[]) => {
+  let checkedKeys = state.checkedKeys.other;
+  // let mainCheckedKeys = this.checkedKeys.main;
+  keys.forEach((key: any) => {
+    let index = checkedKeys.findIndex((otherKey: any) => otherKey == key);
+    checkedKeys.splice(index, 1);
+    handleDeldefaultShowList(key);
+  });
+  removeCheckedkeysMain(keys);
+}
+const handleDeldefaultShowList = (key: string) => {
+  let len = state?.defaultShowList?.length || 0;
+  if (len > 0) {
+    for (let i = len - 1; i >= 0; i--) {
+      let d = state.defaultShowList[i];
+      if (`${d.parent_id}_${d.user_id}` == key) {
+        closeDefaultTag(d, i);
+      }
+    }
+  }
+}
+const closeDefaultTag = (tag: any, i: number) => {
+  state.defaultShowList.splice(i, 1);
+  closeTag({ parentId: getParentId(tag), ...tag });
+}
+/* 右侧点击item[x]按钮 相关 */
+const closeTag = (removedTag: any) => {
+  // let { parentId } = removedTag;
+
+  removedCheckedkeysMain(removedTag);
+  removedCheckedkeysOther(removedTag);
+  refreshSearchTree();
+}
+const removeCheckedkeysIncludeChildren = (parentKey: any) => {
+  let needRemoveChildKeys = state.dataList.main
+    .filter((i: { key: any; }) => {
+      let parentId = getParentId(i);
+      return parentId == parentKey || i.key == parentKey;
+    })
+    .map((i: { key: any; }) => {
+      return i.key;
+    });
+
+  state.checkedKeys.main = state.checkedKeys.main.filter((i: any) => {
+    return !needRemoveChildKeys.includes(i);
+  });
+}
+const removedCheckedkeysMain = (tag: { key: any }) => {
+  let checkedKeys = state.checkedKeys.main;
+  let parentId = getParentId(tag);
+  for (let i = 0; i < checkedKeys.length; i++) {
+    if (tag.key == checkedKeys[i] && tag.key == parentId) {
+      removeCheckedkeysIncludeChildren(tag.key);
+      return false;
+    } else if (tag.key == checkedKeys[i]) {
+      checkedKeys.splice(i, 1);
+      return false;
+    }
+  }
+}
+const removedCheckedkeysOther = (tag: { key: any; }) => {
+  let checkedKeys = state.checkedKeys.other;
+  if (checkedKeys.includes(tag.key)) {
+    for (let i = 0; i < checkedKeys.length; i++) {
+      if (tag.key == checkedKeys[i]) {
+        checkedKeys.splice(i, 1);
+        return false;
+      }
+    }
+  } else {
+    // 删除科室，删除
+    OtherRemoveCheckedkeysIncludeChildren(tag.key);
+  }
+}
+const OtherRemoveCheckedkeysIncludeChildren = (parentKey: any) => {
+  let needRemoveChildKeys = state.dataList.main
+    .filter((i: { key: any; }) => {
+      let parentId = getParentId(i);
+      return parentId == parentKey || i.key == parentKey;
+    })
+    .map((i: { key: any; }) => {
+      return i.key;
+    });
+
+  state.checkedKeys.other = state.checkedKeys.other.filter((i: any) => {
+    return !needRemoveChildKeys.includes(i);
+  });
+}
+/* submit 相关 */
+const getCheckedMainChildKeys = () => {
+  return new Promise<void>(async resolve => {
+    let promises = state.treeData.main.map(async item => {
+      // 获取勾选了父类tree, 但未获取children
+      // 接口传参，需要的是叶节点的keys
+      if (state.checkedKeys.main.includes(item.key) && !item.children) {
+        item.children = await handleLoadChildData(item.key, item);
+        addCheckedKeysChildrenMain(item);
+
+        generateDataList(item.children, state.dataList.main);
+      }
+    });
+
+    await Promise.all(promises);
+
+    resolve();
+  });
+}
+const getCheckedLeafKeys = () => {
+  let mainLeafKeys: any = [];
+  let mainLeafDataListKeys = state.dataList.main.filter((item: any) => item.isLeaf).map((item: any) => item.key);
+
+  state.checkedKeys.main.forEach(key => {
+    if (mainLeafDataListKeys.includes(key)) {
+      mainLeafKeys.push(key);
+    }
+  });
+
+  let keyList = [...mainLeafKeys, ...state.checkedKeys.other];
+  let res = [...new Set(keyList)];
+  return [...res];
+}
+const handleOk = async (isShowLoading = false) => {
+  isShowLoading && (state.spinning = true);
+  await getCheckedMainChildKeys();
+
+  state.checkedLeafKeys = getCheckedLeafKeys();
+
+  const submitData = handleGetSumitData(state.checkedLeafKeys);
+
+  // let subList = [...submitData, ...this.defaultShowList];
+
+  emit('pubCheckedTreeItem', [...checkedTreeItem.value, ...state.defaultShowList]);
+  emit('handleOk', state.checkedLeafKeys);
+  emit('change', state.checkedLeafKeys, [...submitData, ...state.defaultShowList]);
+  emit('submitData', [...submitData, ...state.defaultShowList]);
+
+  isShowLoading && (state.spinning = false);
+}
+// 获取表单提交的数据
+const handleGetSumitData = (list = [] as any[]) => {
+  if (!Array.isArray(list)) return [];
+  let resList = [] as any[];
+  const { parent_id_obj, parent_name_obj, user_id_obj, user_name_obj } = wordbookConfig.value || {};
+  list.forEach(v => {
+    // d.key
+    let f = state.dataList.main.find(d => getuniqKey(d) == v);
+    if (!f) {
+      f = state.dataList.other.find(o => getuniqKey(o) == v);
+    }
+    // [parent_id_obj]: f[parent_id_obj],
+    // [parent_name_obj]: f[parent_name_obj],
+    // [user_id_obj]: f[user_id_obj],
+    // [user_name_obj]: f[user_name_obj]
+    if (f) {
+      /** 提交映射 */
+      // 自定义 key 值
+      const { parent_id_obj_key, parent_name_obj_key } = props.wordbook;
+      const { user_id_obj_key, user_name_obj_key } = props.wordbookChild;
+      resList.push({
+        [user_id_obj_key || 'user_id']: f[user_id_obj],
+        [user_name_obj_key || 'user_name']: f[user_name_obj],
+        [parent_id_obj_key || 'parent_id']: f[parent_id_obj],
+        [parent_name_obj_key || 'parent_name']: f[parent_name_obj]
+      });
+    }
+  });
+  return resList;
+}
+const searchOnloadMore = () => {
+  state.searchPage = state.searchPage + 1;
+  searchFetch({ page: state.searchPage }, { loadMoren: true });
+}
+const treeCount = (count: any) => {
+  if (!count) return '';
+  return `(${count})`;
+}
+const cancel = () => {
+  emit("update:visible", false);
+  state.spinning = false;
+}
+const hanldeGetValue = (...arg: any[]) => {
+  handleOk(...arg);
+}
+const getParentId = (v: any) => {
+  const { parent_id_obj } = wordbookConfig.value || {};
+  return `${v[parent_id_obj]}`
+}
+// 数组对象去重
+const uniqArrObj = (arr: any[], name: string) => {
+  let obj = {};
+  return arr.reduce((cur, next) => {
+    obj[next[name]] ? '' : (obj[next[name]] = true && cur.push(next));
+    return cur;
+  }, []);
+}
+/**
+ * 拼接key
+ */
+const getuniqKey = (v: any) => {
+  const { user_id_obj } = wordbookConfig.value || {};
+  return `${getParentId(v)}_${v[user_id_obj]}`;
+}
+
+watch(
+  () => props.defaultList,
+  (val: any[]) => {
+    if (!val) return;
+    initDefault();
+  },
+  { immediate: true }
+);
+watch(
+  () => state.checkedKeys.main,
+  (val: any[]) => {
+    isAllCheck(val);
+    isSearchAllCheck()
+    emit("check", val);
+  },
+  { immediate: true, deep: true }
+);
+watch(
+  () => props.data,
+  (val: any[]) => {
+    staticDataInit()
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  getUsers()
+})
+
+</script>
+<style scoped lang="less">
+@primary-color: #5585f5;
+.people-tree {
+  display: flex;
+  .people-tree-item {
+    width: 50%;
+    padding: 22px 12px 0;
+    max-height: 376px;
+    height: 376px;
+    overflow-y: auto;
+    &.people-tree-left {
+      display: flex;
+      flex-direction: column;
+    }
+    &:first-child {
+      border-right: 1px solid #e8e8e8;
+    }
+    .tag-item {
+      &.isRoot {
+        background: rgba(@primary-color, 0.08);
+        border: 1px solid rgba(@primary-color, 0.5);
+        color: @primary-color;
+        .tag-close {
+          color: @primary-color;
+          &:hover {
+            color: rgba(@primary-color, 0.6);
+          }
+        }
+
+      }
+
+      box-sizing: border-box;
+      color: #212121;
+      font-size: 14px;
+      list-style: none;
+      display: inline-flex;
+      align-items: center;
+      height: 24px;
+      line-height: 24px;
+      margin-right: 8px;
+      margin-bottom: 4px;
+      padding: 0 6px;
+      white-space: nowrap;
+      background: rgba(#d5d5d5, 0.2);
+      border: 1px solid rgba(#000000, 0.14);
+      border-radius: 4px;
+      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+      .tag-close {
+        font-size: 12px;
+        &:hover {
+          color: rgba(@primary-color, 0.6);
+        }
+        &:active {
+          color: #fff;
+        }
+        display: inline-block;
+        font-size: 14px;
+        margin-left: 3px;
+        color: #969696;
+        font-weight: 700;
+        cursor: pointer;
+        transition: all 0.3s;
+      }
+    }
+
+    .no-data-tips {
+      height: 200px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .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;
+    }
+    .p-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #212121;
+    }
+    &.tags-box {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+  }
+}
+.df {
+  display: flex;
+}
+.search-input-icon {
+  color: rgba(0, 0, 0, 0.4);
+  margin-bottom: -2px;
+}
+.main-tree-container {
+  overflow-y: auto;
+}
+</style>