111

src/styles/app/element.scss

@@ -238,3 +238,8 @@
         color: var(--el-button-text-color);
     }
 }
+
+//树为空时
+.el-tree.tree-line .el-tree__empty-block {
+    min-width: unset;
+}

src/views/desk/wbs.vue

@@ -53,14 +53,17 @@
                 <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
             </template>
         </hc-dialog>
+        <!-- 元素库 -->
+        <HcElementLib v-model="isElementLibShow" />
     </hc-card>
 </template>
 
 <script setup>
-import { HcDelMsg } from 'hc-vue3-ui'
 import { onActivated, ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
 import { arrToId, deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import { getDictionaryData, reloadPage } from '~uti/tools'
+import HcElementLib from './wbs/element-lib.vue'
 import mainApi from '~api/desk/wbs'
 
 //激活
@@ -199,8 +202,9 @@ const dialogClose = () => {
 }
 
 //元素库
+const isElementLibShow = ref(false)
 const elementLibrary = () => {
-
+    isElementLibShow.value = true
 }
 
 //编辑wbs库

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

@@ -0,0 +1,186 @@
+<template>
+    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
+        <hc-body split>
+            <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"
+                    >
+                        <template #default="{ node }">{{ node.label }}</template>
+                    </hc-lazy-tree>
+                </hc-card>
+            </template>
+            <hc-card>
+                <template #header>
+                    <div class="w-400px">
+                        <hc-search-input v-model="searchForm.wbsName" @search="searchClick" />
+                    </div>
+                </template>
+                <template #extra>
+                    <el-button hc-btn type="primary">编辑表单</el-button>
+                    <el-button hc-btn type="danger">删除元素表</el-button>
+                </template>
+                <hc-table
+                    :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
+                    is-check :check-style="{ width: 29 }" @selection-change="tableCheckChange"
+                >
+                    <template #action="{ row }">
+                        <el-link type="primary" @click="rowNodeClick(row)">分配节点</el-link>
+                        <el-link type="warning" @click="rowFormulaClick(row)">公式配置</el-link>
+                        <el-link type="danger" @click="rowEditClick(row)">编辑元素</el-link>
+                    </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-card>
+        </hc-body>
+    </hc-drawer>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import mainApi from '~api/desk/wbs'
+
+//事件
+const emit = defineEmits(['close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) getDataApi()
+})
+
+//处理相关数据
+const getDataApi = () => {
+    isTreeMode.value = true
+}
+
+//树配置
+const treeRef = ref(null)
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: (item) => {
+        return !item.hasChildren
+    },
+}
+
+//懒加载树的菜单
+const treeLazyMenu = ({ item, level }, resolve) => {
+    let newMenu = []
+    if (item.fileType !== 3) {
+        newMenu.push({ icon: 'add-circle', label: '新增', key: 'add' })
+    }
+    if (level !== 1) {
+        newMenu.push({ icon: 'sort-asc', label: '排序', key: 'sort' })
+    }
+    newMenu.push({ icon: 'delete-bin', label: '删除', key: 'del' })
+    resolve(newMenu)
+}
+
+//菜单被点击
+const treeMenuClick = ({ key, data, node }) => {
+
+}
+
+//伪刷新
+const isTreeMode = ref(false)
+const pseudoRefresh = () => {
+    isTreeMode.value = false
+    setTimeout(()=> {
+        isTreeMode.value = true
+    }, 300)
+}
+
+//懒加载树
+const treeLoadNode = async ({ item, level }, resolve) => {
+    const parentId = level === 0 ? 0 : item.id
+    /*const { data } = await mainApi.tabLazyTree({
+        parentId: parentId,
+        modeId: dataInfo.value.id,
+    })*/
+    resolve([])
+}
+
+//树节点被点击
+const nodeInfo = ref({})
+const treeNodeTap = ({ data }) => {
+    nodeInfo.value = data
+    //searchClick()
+}
+
+//搜索表单
+const searchForm = ref({ current: 1, size: 30, total: 0 })
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1
+    getTableData()
+}
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表格数据
+const tableData = ref([])
+const tableColumn = ref([
+    { key: 'wbsName', name: '名称' },
+    { key: 'wbsType', name: '划分类型', width: 120, align: 'center' },
+    { key: 'status', name: '是否启用', width: 100, align: 'center' },
+    { key: 'createTime', name: '创建时间', width: 180, align: 'center' },
+    { key: 'action', name: '操作', width: 180, align: 'center' },
+])
+
+//获取表格数据
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableData.value = []
+    /*tableLoading.value = true
+    const { data } = await mainApi.page({
+        ...searchForm.value,
+        total: null,
+    })
+    tableLoading.value = false
+    tableData.value = getArrValue(data?.records)
+    searchForm.value.total = data?.total || 0*/
+}
+
+//表格被选择
+const tableCheckKeys = ref([])
+const tableCheckChange = (rows) => {
+    tableCheckKeys.value = rows
+}
+
+//分配节点
+const rowNodeClick = (row) => {
+
+}
+
+//公式配置
+const rowFormulaClick = (row) => {
+
+}
+
+//编辑元素
+const rowEditClick = (row) => {
+
+}
+
+//关闭抽屉
+const drawerClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>