111

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

@@ -1,14 +1,11 @@
 <template>
     <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
-        <hc-body split>
+        <hc-body split :options="{ sizes: [14, 96] }">
             <template #left>
                 <hc-card scrollbar>
-                    <hc-lazy-tree
-                        ref="treeRef" :is-root-expand="false" :h-props="treeProps" tree-key="id" is-load-menu
-                        @load-menu="treeLazyMenu" @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
-                    >
+                    <hc-data-tree :h-props="treeProps" :datas="treeData" tree-key="id" @node-tap="treeNodeTap">
                         <template #default="{ node }">{{ node.label }}</template>
-                    </hc-lazy-tree>
+                    </hc-data-tree>
                 </hc-card>
             </template>
             <hc-card>
@@ -20,6 +17,7 @@
                 <template #extra>
                     <el-button hc-btn type="primary">编辑表单</el-button>
                     <el-button hc-btn type="danger">删除元素表</el-button>
+                    <!-- el-button hc-btn type="warning">排序</el-button -->
                 </template>
                 <hc-table
                     :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
@@ -60,60 +58,29 @@ watch(isShow, (val) => {
 
 //处理相关数据
 const getDataApi = () => {
-    isTreeMode.value = true
+    getTreeData()
 }
 
 //树配置
-const treeRef = ref(null)
-const treeProps = {
-    label: 'title',
-    children: 'children',
-    isLeaf: (item) => {
-        return !item.hasChildren
-    },
-}
-
-//懒加载树的菜单
-const treeLazyMenu = ({ level }, resolve) => {
-    let newMenu = []
-    if (level === 2) {
-        newMenu.push({ icon: 'arrow-up-down', label: '排序', key: 'rank' })
-    }
-    resolve(newMenu)
-}
-
-//菜单被点击
-const treeMenuClick = ({ key, data, node }) => {
-    if (key === 'rank') {
-        console.log(data)
-    }
-}
-
-//伪刷新
-const isTreeMode = ref(false)
-const pseudoRefresh = () => {
-    isTreeMode.value = false
-    setTimeout(()=> {
-        isTreeMode.value = true
-    }, 300)
-}
+const treeProps = { label: 'title' }
 
-//懒加载树
-const treeLoadNode = async ({ item, level }, resolve) => {
-    const parentId = level === 0 ? '12345678910' : item.id
+//获取树接口
+const treeData = ref([])
+const getTreeData = async () => {
     const { data } = await mainApi.tabTypeLazyTreeAll({
-        parentId: parentId,
+        parentId: '12345678910',
         current: 1,
         size: 1000,
     })
-    resolve(getArrValue(data?.records))
+    treeData.value = getArrValue(data?.records)
 }
 
 //树节点被点击
 const nodeInfo = ref({})
 const treeNodeTap = ({ data }) => {
     nodeInfo.value = data
-    //searchClick()
+    searchForm.value.parentId = data.id
+    searchClick()
 }
 
 //搜索表单
@@ -121,12 +88,22 @@ const searchForm = ref({ current: 1, size: 30, total: 0 })
 
 //搜索
 const searchClick = () => {
+    const { parentId } = searchForm.value
+    if (isNullES(parentId)) {
+        window?.$message?.warning('请先在左侧点击一个节点')
+        return
+    }
     searchForm.value.current = 1
     getTableData()
 }
 
 //分页
 const pageChange = ({ current, size }) => {
+    const { parentId } = searchForm.value
+    if (isNullES(parentId)) {
+        window?.$message?.warning('请先在左侧点击一个节点')
+        return
+    }
     searchForm.value.current = current
     searchForm.value.size = size
     getTableData()
@@ -136,25 +113,25 @@ const pageChange = ({ current, size }) => {
 const tableData = ref([])
 const tableColumn = ref([
     { key: 'title', name: '名称' },
-    { key: 'tabType', name: '类型' },
-    { key: 'elementTotal', name: '总量' },
-    { key: 'tabOwner', name: '所属方' },
-    { key: 'fillRate', name: '填报率' },
-    { key: 'action', name: '操作', width: 180, align: 'center' },
+    { key: 'tabType', name: '类型', width: 120, align: 'center' },
+    { key: 'elementTotal', name: '总量', width: 80, align: 'center' },
+    { key: 'tabOwner', name: '所属方', width: 140, align: 'center' },
+    { key: 'fillRate', name: '填报率', width: 80, align: 'center' },
+    { key: 'action', name: '操作', width: 220, align: 'center' },
 ])
 
 //获取表格数据
 const tableLoading = ref(false)
 const getTableData = async () => {
     tableData.value = []
-    /*tableLoading.value = true
-    const { data } = await mainApi.page({
+    tableLoading.value = true
+    const { data } = await mainApi.tabTypeLazyTreeAll({
         ...searchForm.value,
         total: null,
     })
     tableLoading.value = false
     tableData.value = getArrValue(data?.records)
-    searchForm.value.total = data?.total || 0*/
+    searchForm.value.total = data?.total || 0
 }
 
 //表格被选择