inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/components/user/userTree.tsx

@@ -1,266 +1,266 @@
-import {
-  defineComponent,
-  getCurrentInstance,
-  reactive,
-  watch,
-  onMounted,
-  ref,
-  computed,
-  PropType,
-} from "vue";
-import { debounce } from "lodash";
-import useProxy from "@/pageComponent/hooks/useProxy";
-
-export default defineComponent({
-  emits: ["select"],
-  props: {
-    checkList: {
-      type: Array as PropType<Array<string>>,
-    },
-    getData: {
-      type: Function,
-      required: true,
-    },
-  },
-  setup(_props, { emit }) {
-    const isLoading = ref(false);
-    const searchText = ref("");
-    const proxy = useProxy();
-    // const fieldNames: TreeProps["fieldNames"] = {};
-    const data: {
-      selectedList: Array<{ key: number; title: string }>;
-      treeData: Array<any>;
-      selectedKeys: any;
-      expandedKeys: any;
-      checkedKeys: any;
-      backupsExpandedKeys: any;
-      autoExpandParent: boolean;
-      searchStr: string;
-      searchValue: string;
-    } = reactive({
-      selectedList: [],
-      treeData: [
-        // {
-        //   title: "0-0",
-        //   key: "0-0",
-        //   scopedSlots: { title: "title" },
-        //   children: [
-        //     {
-        //       title: "0-0-0",
-        //       key: "0-0-0",
-        //       scopedSlots: { title: "title" },
-        //       children: [],
-        //     },
-        //     {
-        //       title: "0-0-2",
-        //       key: "0-0-2",
-        //       scopedSlots: { title: "title" },
-        //     },
-        //   ],
-        // },
-        // {
-        //   title: "0-2",
-        //   key: "0-2",
-        //   scopedSlots: { title: "title" },
-        // },
-      ],
-      selectedKeys: [],
-      expandedKeys: [],
-      checkedKeys: [],
-      backupsExpandedKeys: [],
-      autoExpandParent: false,
-      searchValue: "",
-      searchStr: "",
-    });
-    watch(
-      () => _props.checkList,
-      (e) => {
-        data.checkedKeys = e;
-      },
-      { immediate: true, deep: true }
-    );
-    // 获取数据
-    const getTreeData = debounce(async (callback?: () => void) => {
-      isLoading.value = true;
-      const res = await _props.getData(data.searchStr);
-      data.treeData = res;
-      isLoading.value = false;
-      // 默认选中第一个
-      callback?.();
-    }, 300);
-
-    // 暴露刷新数据方法
-    proxy._refresh = getTreeData;
-
-    // const computedTree = (arr: any) => {
-    //   arr.forEach((item: any) => {
-    //     // if (data.checkedKeys.indexOf(item.key) === 0)
-    //     //   item.disableCheckbox = true;
-    //     if (item.children) {
-    //       computedTree(item.children);
-    //     }
-    //   });
-    //   return arr;
-    // };
-    // watch(
-    //   () => data.treeData,
-    //   (e) => {
-    //     if (e) computedTree(data.treeData);
-    //   },
-    //   { deep: true }
-    // );
-    const getkeyList = (
-      value: string,
-      tree: string | any[],
-      keyList: any[]
-    ) => {
-      //遍历所有同一级的树
-      for (let i = 0; i < tree.length; i++) {
-        let node = tree[i];
-        //如果该节点存在value值则push
-        if (node.title.indexOf(value) > -1) {
-          keyList.push(node.key);
-        }
-        //如果拥有孩子继续遍历
-        if (node.children) {
-          getkeyList(value, node.children, keyList);
-        }
-      }
-      //因为是引用类型，所有每次递归操作的都是同一个数组
-      return keyList;
-    };
-    //该递归主要用于获取key的父亲节点的key值
-    const getParentKey = (key: any, tree: string | any[]) => {
-      let parentKey, temp;
-      //遍历同级节点
-      for (let i = 0; i < tree.length; i++) {
-        const node = tree[i];
-        if (node.children) {
-          //如果该节点的孩子中存在该key值，则该节点就是我们要找的父亲节点
-          //如果不存在，继续遍历其子节点
-          if (node.children.some((item: { key: any }) => item.key === key)) {
-            parentKey = node.key;
-          } else if ((temp = getParentKey(key, node.children))) {
-            //parentKey = this.getParentKey(key,node.children)
-            //改进，避免二次遍历
-            parentKey = temp;
-          }
-        }
-      }
-      return parentKey;
-    };
-    //获取该节点的所有祖先节点
-    const getAllParentKey = (key: any, tree: string | any[]) => {
-      var parentKey: any;
-      if (key) {
-        //获得父亲节点
-        parentKey = getParentKey(key, tree);
-        if (parentKey) {
-          //如果父亲节点存在，判断是否已经存在于展开列表里，不存在就进行push
-          if (
-            !data.backupsExpandedKeys.some((item: any) => item === parentKey)
-          ) {
-            data.backupsExpandedKeys.push(parentKey);
-          }
-          //继续向上查找祖先节点
-          getAllParentKey(parentKey, tree);
-        }
-      }
-    };
-    const onSearch = () => {
-      data.searchValue = searchText.value;
-      //不搜索默认不张开
-      if (data.searchValue === "") {
-        data.expandedKeys = [];
-      } else {
-        data.expandedKeys = [];
-        data.backupsExpandedKeys = [];
-        let candidateKeysList = getkeyList(data.searchValue, data.treeData, []);
-        //遍历满足条件的所有节点
-        candidateKeysList.map((item) => {
-          //获取每个节点的母亲节点
-          var key = getParentKey(item, data.treeData);
-          //当item是最高一级，父key为undefined，将不放入到数组中
-          //如果母亲已存在于数组中，也不放入到数组中
-          if (
-            key &&
-            !data.backupsExpandedKeys.some((item: any) => item === key)
-          )
-            data.backupsExpandedKeys.push(key);
-        });
-        let length = data.backupsExpandedKeys.length;
-        for (let i = 0; i < length; i++) {
-          getAllParentKey(data.backupsExpandedKeys[i], data.treeData);
-        }
-        data.expandedKeys = data.backupsExpandedKeys.slice();
-      }
-    };
-    const onSelect = (selectedKeys: any, info: any) => {
-      // console.log("onSelect", selectedKeys, info);
-    };
-    const onCheck = (checkedKeys: any, e: any) => {
-      const arr = data.checkedKeys.filter((item) => !item.includes("dep"));
-      emit("select", arr);
-    };
-    const onExpand = (expandedKeys: any) => {
-      data.expandedKeys = expandedKeys;
-      data.autoExpandParent = false;
-    };
-    const handleTreeData = (data: any, targetKeys: Array<string> = []) => {
-      data.forEach((item: any) => {
-        item.disabled = targetKeys.includes(item.key as any);
-        if (item.children) {
-          handleTreeData(item.children, targetKeys);
-        }
-      });
-      return data;
-    };
-    onMounted(async () => {
-      await getTreeData(() => {
-        data.expandedKeys = [data.treeData?.[0].id];
-      });
-    });
-    return () => (
-      <div class="userList">
-        <a-input-search
-          v-model={[searchText.value, "value"]}
-          placeholder="请输入搜索内容"
-          style="width:100%;margin-bottom:10px"
-          onSearch={onSearch}
-        />
-        <div class="tree">
-          <a-tree
-            blockNode
-            checkable
-            // checkStrictly
-            onCheck={onCheck}
-            v-model={[data.checkedKeys, "checkedKeys"]}
-            // checkedKeys={data.checkedKeys}
-            onSelect={onSelect}
-            autoExpandParent={data.autoExpandParent}
-            defaultExpandAll
-            onExpand={onExpand}
-            expandedKeys={data.expandedKeys}
-            tree-data={data.treeData}
-            // field-names={fieldNames}
-            vSlots={{
-              title: (record: any) => (
-                <span
-                  style={
-                    data.searchValue
-                      ? `font-weight:${
-                          record.title.includes(data.searchValue) ? "700" : ""
-                        }`
-                      : ""
-                  }
-                >
-                  {record.title}
-                </span>
-              ),
-            }}
-          ></a-tree>
-        </div>
-      </div>
-    );
-  },
-});
+import {
+  defineComponent,
+  getCurrentInstance,
+  reactive,
+  watch,
+  onMounted,
+  ref,
+  computed,
+  PropType,
+} from "vue";
+import { debounce } from "lodash";
+import useProxy from "@/pageComponent/hooks/useProxy";
+
+export default defineComponent({
+  emits: ["select"],
+  props: {
+    checkList: {
+      type: Array as PropType<Array<string>>,
+    },
+    getData: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(_props, { emit }) {
+    const isLoading = ref(false);
+    const searchText = ref("");
+    const proxy = useProxy();
+    // const fieldNames: TreeProps["fieldNames"] = {};
+    const data: {
+      selectedList: Array<{ key: number; title: string }>;
+      treeData: Array<any>;
+      selectedKeys: any;
+      expandedKeys: any;
+      checkedKeys: any;
+      backupsExpandedKeys: any;
+      autoExpandParent: boolean;
+      searchStr: string;
+      searchValue: string;
+    } = reactive({
+      selectedList: [],
+      treeData: [
+        // {
+        //   title: "0-0",
+        //   key: "0-0",
+        //   scopedSlots: { title: "title" },
+        //   children: [
+        //     {
+        //       title: "0-0-0",
+        //       key: "0-0-0",
+        //       scopedSlots: { title: "title" },
+        //       children: [],
+        //     },
+        //     {
+        //       title: "0-0-2",
+        //       key: "0-0-2",
+        //       scopedSlots: { title: "title" },
+        //     },
+        //   ],
+        // },
+        // {
+        //   title: "0-2",
+        //   key: "0-2",
+        //   scopedSlots: { title: "title" },
+        // },
+      ],
+      selectedKeys: [],
+      expandedKeys: [],
+      checkedKeys: [],
+      backupsExpandedKeys: [],
+      autoExpandParent: false,
+      searchValue: "",
+      searchStr: "",
+    });
+    watch(
+      () => _props.checkList,
+      (e) => {
+        data.checkedKeys = e;
+      },
+      { immediate: true, deep: true }
+    );
+    // 获取数据
+    const getTreeData = debounce(async (callback?: () => void) => {
+      isLoading.value = true;
+      const res = await _props.getData(data.searchStr);
+      data.treeData = res;
+      isLoading.value = false;
+      // 默认选中第一个
+      callback?.();
+    }, 300);
+
+    // 暴露刷新数据方法
+    proxy._refresh = getTreeData;
+
+    // const computedTree = (arr: any) => {
+    //   arr.forEach((item: any) => {
+    //     // if (data.checkedKeys.indexOf(item.key) === 0)
+    //     //   item.disableCheckbox = true;
+    //     if (item.children) {
+    //       computedTree(item.children);
+    //     }
+    //   });
+    //   return arr;
+    // };
+    // watch(
+    //   () => data.treeData,
+    //   (e) => {
+    //     if (e) computedTree(data.treeData);
+    //   },
+    //   { deep: true }
+    // );
+    const getkeyList = (
+      value: string,
+      tree: string | any[],
+      keyList: any[]
+    ) => {
+      //遍历所有同一级的树
+      for (let i = 0; i < tree.length; i++) {
+        let node = tree[i];
+        //如果该节点存在value值则push
+        if (node.title.indexOf(value) > -1) {
+          keyList.push(node.key);
+        }
+        //如果拥有孩子继续遍历
+        if (node.children) {
+          getkeyList(value, node.children, keyList);
+        }
+      }
+      //因为是引用类型，所有每次递归操作的都是同一个数组
+      return keyList;
+    };
+    //该递归主要用于获取key的父亲节点的key值
+    const getParentKey = (key: any, tree: string | any[]) => {
+      let parentKey, temp;
+      //遍历同级节点
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        if (node.children) {
+          //如果该节点的孩子中存在该key值，则该节点就是我们要找的父亲节点
+          //如果不存在，继续遍历其子节点
+          if (node.children.some((item: { key: any }) => item.key === key)) {
+            parentKey = node.key;
+          } else if ((temp = getParentKey(key, node.children))) {
+            //parentKey = this.getParentKey(key,node.children)
+            //改进，避免二次遍历
+            parentKey = temp;
+          }
+        }
+      }
+      return parentKey;
+    };
+    //获取该节点的所有祖先节点
+    const getAllParentKey = (key: any, tree: string | any[]) => {
+      var parentKey: any;
+      if (key) {
+        //获得父亲节点
+        parentKey = getParentKey(key, tree);
+        if (parentKey) {
+          //如果父亲节点存在，判断是否已经存在于展开列表里，不存在就进行push
+          if (
+            !data.backupsExpandedKeys.some((item: any) => item === parentKey)
+          ) {
+            data.backupsExpandedKeys.push(parentKey);
+          }
+          //继续向上查找祖先节点
+          getAllParentKey(parentKey, tree);
+        }
+      }
+    };
+    const onSearch = () => {
+      data.searchValue = searchText.value;
+      //不搜索默认不张开
+      if (data.searchValue === "") {
+        data.expandedKeys = [];
+      } else {
+        data.expandedKeys = [];
+        data.backupsExpandedKeys = [];
+        let candidateKeysList = getkeyList(data.searchValue, data.treeData, []);
+        //遍历满足条件的所有节点
+        candidateKeysList.map((item) => {
+          //获取每个节点的母亲节点
+          var key = getParentKey(item, data.treeData);
+          //当item是最高一级，父key为undefined，将不放入到数组中
+          //如果母亲已存在于数组中，也不放入到数组中
+          if (
+            key &&
+            !data.backupsExpandedKeys.some((item: any) => item === key)
+          )
+            data.backupsExpandedKeys.push(key);
+        });
+        let length = data.backupsExpandedKeys.length;
+        for (let i = 0; i < length; i++) {
+          getAllParentKey(data.backupsExpandedKeys[i], data.treeData);
+        }
+        data.expandedKeys = data.backupsExpandedKeys.slice();
+      }
+    };
+    const onSelect = (selectedKeys: any, info: any) => {
+      // console.log("onSelect", selectedKeys, info);
+    };
+    const onCheck = (checkedKeys: any, e: any) => {
+      const arr = data.checkedKeys.filter((item) => !item.includes("dep"));
+      emit("select", arr);
+    };
+    const onExpand = (expandedKeys: any) => {
+      data.expandedKeys = expandedKeys;
+      data.autoExpandParent = false;
+    };
+    const handleTreeData = (data: any, targetKeys: Array<string> = []) => {
+      data.forEach((item: any) => {
+        item.disabled = targetKeys.includes(item.key as any);
+        if (item.children) {
+          handleTreeData(item.children, targetKeys);
+        }
+      });
+      return data;
+    };
+    onMounted(async () => {
+      await getTreeData(() => {
+        data.expandedKeys = [data.treeData?.[0].id];
+      });
+    });
+    return () => (
+      <div class="userList">
+        <a-input-search
+          v-model={[searchText.value, "value"]}
+          placeholder="请输入搜索内容"
+          style="width:100%;margin-bottom:10px"
+          onSearch={onSearch}
+        />
+        <div class="tree">
+          <a-tree
+            blockNode
+            checkable
+            // checkStrictly
+            onCheck={onCheck}
+            v-model={[data.checkedKeys, "checkedKeys"]}
+            // checkedKeys={data.checkedKeys}
+            onSelect={onSelect}
+            autoExpandParent={data.autoExpandParent}
+            defaultExpandAll
+            onExpand={onExpand}
+            expandedKeys={data.expandedKeys}
+            tree-data={data.treeData}
+            // field-names={fieldNames}
+            vSlots={{
+              title: (record: any) => (
+                <span
+                  style={
+                    data.searchValue
+                      ? `font-weight:${
+                          record.title.includes(data.searchValue) ? "700" : ""
+                        }`
+                      : ""
+                  }
+                >
+                  {record.title}
+                </span>
+              ),
+            }}
+          ></a-tree>
+        </div>
+      </div>
+    );
+  },
+});