1

src/api/modules/exctab/exceltab.js

@@ -62,4 +62,12 @@ export default {
             params: form,
         })
     },
+    //懒加载节点树形结构
+    async wbsTree(form) {
+        return HcApi({
+            url: '/api/blade-manager/exceltab/lazy-tree',
+            method: 'get',
+            params: form,
+        })
+    },
 }

src/views/exctab/modules/add-excel.vue

@@ -1,6 +1,49 @@
 <template>
     <hc-dialog v-model="isShow" ui="hc-exctab-exceltab-add-excel" :title="type" widths="800px" :padding="false" @close="dialogClose">
-        111
+        <div class="relative h-80px">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
+                <el-row :gutter="14">
+                    <el-col :span="12">
+                        <el-form-item label="清表名称：" prop="nodeName">
+                            <el-input v-model="formModel.nodeName" placeholder="请输入清表名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="清表类型：" prop="tabType">
+                            <el-select v-model="formModel.tabType" filterable block placeholder="请选择清表类型">
+                                <el-option v-for="item in excelTypeData" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+        <div class="hc-exctab-exceltab-add-excel-middle">
+            <el-row :gutter="14" class="h-full">
+                <el-col :span="12" class="h-full">
+                    <div class="left-card h-full">
+                        <div class="select">
+                            <el-select v-model="formModel.wbsId" filterable block placeholder="请选择WBS模板" @change="wbsModelChange">
+                                <el-option v-for="item in wbsModel" :key="item.id" :label="item.wbsName" :value="item.id" />
+                            </el-select>
+                        </div>
+                        <div v-loading="treeLoading" class="tree">
+                            <el-tree v-if="isWbsTree" :props="wbsTreeProps" :load="wbsTreeLoad" lazy />
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :span="12" class="h-full">
+                    <div class="right-card h-full">
+                        <hc-table :column="tableColumn" :datas="tableData" :is-index="false">
+                            <template #action="{ row }">
+                                <el-link v-if="row.isLinkTable !== 2" type="primary" @click="rowRelation(row)">关联</el-link>
+                                <el-link v-if="row.isLinkTable === 2" type="warning" @click="rowCancel(row)">取消关联</el-link>
+                            </template>
+                        </hc-table>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
         <template #footer>
             <el-button hc-btn @click="dialogClose">取消</el-button>
             <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
@@ -10,7 +53,7 @@
 
 <script setup>
 import { getArrValue, getObjValue } from 'js-fast-way'
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import mainApi from '~api/exctab/exceltab'
 import { getDictionaryData } from '~uti/tools'
 
@@ -62,6 +105,12 @@ const getInfoData = async () => {
         item.value = Number(item.value)
     })
     excelTypeData.value = types
+    //处理表单默认数据
+    if (props.type === '新增') {
+        formModel.value = { parentId: data.id }
+    } else {
+        formModel.value = { id: data.id }
+    }
 }
 
 //清表编辑 wbs 下拉框选择
@@ -70,6 +119,73 @@ const getWbsTypeList = async () => {
     const { data } = await mainApi.getWbsTypeList({ wbstype: 2 })
     wbsModel.value = getArrValue(data)
 }
+//选择WBS模板
+const isWbsTree = ref(false)
+const wbsModelChange = () => {
+    isWbsTree.value = false
+    tableData.value = []
+    const wbsId = formModel.value.wbsId
+    wbsModel.value.forEach(item => {
+        if (item.id === wbsId) {
+            formModel.value.wbsType = item.wbsType
+        }
+    })
+    nextTick(() => {
+        isWbsTree.value = true
+    })
+}
+
+//树
+const wbsTreeProps = {
+    label: 'nodeName',
+    isLeaf: (item) => {
+        return !item.hasChildren
+    },
+}
+
+//懒加载树
+const treeLoading = ref(false)
+const wbsTreeLoad = async (node, resolve) => {
+    const parentId = node.level === 0 ? 0 : node.data.id
+    console.log(parentId)
+    //wbsTree
+    resolve([])
+}
+
+
+//基础表单
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    nodeName: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入清表名称',
+    },
+    tabType: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择清表类型',
+    },
+}
+
+//表格
+const tableColumn = [
+    { key: 'tableName', name: '表名' },
+    { key: 'action', name: '操作', width: 80, align: 'center' },
+]
+const tableData = ref([])
+
+
+//关联
+const rowRelation = (row) => {
+
+}
+
+//取消关联
+const rowCancel = (row) => {
+
+}
 
 //提交
 const submitLoading = ref(false)
@@ -88,4 +204,31 @@ const dialogClose = () => {
     height: 660px;
     padding: 12px 0;
 }
+.hc-exctab-exceltab-add-excel-middle {
+    position: relative;
+    height: calc(100% - 80px);
+    overflow: hidden;
+    .left-card {
+        position: relative;
+        border: 1px solid gainsboro;
+        border-radius: 3px;
+        .select {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 6px;
+            height: 45px;
+            border-bottom: 1px solid gainsboro;
+        }
+        .tree {
+            position: relative;
+            height: calc(100% - 45px);
+            padding: 6px;
+        }
+    }
+    .right-card {
+        position: relative;
+    }
+}
 </style>