元素库

src/views/desk/wbs/element-lib.vue

@@ -8,16 +8,14 @@
         <hc-body split :options="{ sizes: [14, 96] }">
             <template #left>
                 <hc-card scrollbar>
-                    <hc-data-tree
-                        :h-props="treeProps"
-                        :datas="treeData"
-                        tree-key="id"
-                        @node-tap="treeNodeTap"
-                    >
-                        <template #default="{ node }">{{
-                            node.label
-                        }}</template>
-                    </hc-data-tree>
+                    <ElTree
+                        :load="treeLoadNode"
+                        :props="treeProps"
+                        accordion
+                        highlight-current
+                        lazy
+                        @node-click="treeNodeTap"
+                    />
                 </hc-card>
             </template>
             <hc-card>
@@ -118,9 +116,7 @@ const getDataApi = () => {
 const treeProps = {
     label: "title",
     children: "children",
-    isLeaf: (item) => {
-        return !item.hasChildren;
-    },
+    isLeaf: "isLeaf",
 };
 
 //获取树接口
@@ -133,13 +129,50 @@ const getTreeData = async () => {
     });
     treeData.value = getArrValue(data?.records);
 };
+//获取数据
+const tabTypeLazyTree = async (parentId = "12345678910") => {
+    //发起请求
+    const { data } = await mainApi.tabTypeLazyTreeAll({
+        parentId,
+        current: 1,
+        size: 1000,
+    });
+    const records = getArrValue(data?.records);
+    records.forEach((item) => {
+        item.isLeaf = !item.hasChildren;
+    });
+    return { data: records, total: data?.total };
+};
+const treeLoadNode = async (node, resolve) => {
+    if (node.level === 0) {
+        const resData = await tabTypeLazyTree();
+        resolve(resData?.data);
+    } else {
+        const resData = await tabTypeLazyTree(
+            node?.data?.primaryKeyId,
+            "",
+            false,
+            {
+                current: 1,
+                size: 2000,
+            }
+        );
+        resolve(resData?.data);
+    }
+};
 
 //树节点被点击
 const nodeInfo = ref({});
-const treeNodeTap = ({ data }) => {
+const treeNodeTap = (data, node) => {
     nodeInfo.value = data;
     searchForm.value.parentId = data.id;
-    searchClick();
+
+    if (node?.level === 1) {
+        searchClick();
+    } else if (node?.level === 2) {
+        searchForm.value.total = 1;
+        tableData.value = [data];
+    }
 };
 
 //搜索表单