111

src/api/modules/exctab/exceltab.js

@@ -192,4 +192,18 @@ export default {
             data: form,
         })
     },
+    async getLazyTree(form) {
+        return HcApi({
+            url: '/api/blade-manager/wbsTree/lazy-tree',
+            method: 'get',
+            params: form,
+        })
+    },
+    async getAllTree(form) {
+        return HcApi({
+            url: '/api/blade-manager/wbsTree/tree',
+            method: 'get',
+            params: form,
+        })
+    },
 }

src/views/exctab/element/index.vue

@@ -28,7 +28,7 @@
             <template #right>
                 <hc-card>
                     <template #header>
-                        <el-button color="#2550A2" size="small" class="text-white" :disabled="!isTreeNode">关联WBS并创建元素</el-button>
+                        <el-button color="#2550A2" size="small" class="text-white" :disabled="!isTreeNode" @click="webTemplateClick">关联WBS并创建元素</el-button>
                         <el-button color="#FF986A" size="small" class="text-white" :disabled="!isTreeNode" @click="elementLibClick">添加到元素库</el-button>
                         <!-- el-button color="#567722" size="small" class="text-white">元素匹配</el-button>
                         <el-button color="#67C23B" size="small" class="text-white">调整表单</el-button -->
@@ -60,6 +60,8 @@
         <HcAddColTab v-model="addColTabShow" :info="addColTabInfo" @finish="getTableData" />
         <!-- 添加到元素库 -->
         <HcElementLib v-model="elementLibShow" :info="elementLibInfo" :data="tableData" @finish="getTableData" />
+        <!-- 关联公共WBS模板 -->
+        <HcWebTemplate v-model="webTemplateShow" :info="webTemplateInfo" @finish="getTableData" />
     </hc-drawer>
 </template>
 
@@ -70,6 +72,7 @@ import { getArrValue, isNullES, isString } from 'js-fast-way'
 import { getDictionaryData } from '~uti/tools'
 import HcAddColTab from './add-col-tab.vue'
 import HcElementLib from './element-lib.vue'
+import HcWebTemplate from './web-temp.vue'
 import mainApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -262,6 +265,14 @@ const elementLibClick = () => {
     elementLibShow.value = true
 }
 
+//关联公共WBS模板
+const webTemplateShow = ref(false)
+const webTemplateInfo = ref({})
+const webTemplateClick = () => {
+    webTemplateInfo.value = nodeInfo.value
+    webTemplateShow.value = true
+}
+
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false

src/views/exctab/element/web-temp.vue

@@ -0,0 +1,231 @@
+<template>
+    <hc-dialog v-model="isShow" ui="hc-exctab-element-web-temp" title="关联公共WBS模板" widths="1200px" :padding="false" is-table @close="dialogClose">
+        <div class="hc-exctab-element-web-temp-box hc-flex h-full">
+            <div class="left h-full flex-1">
+                <hc-card scrollbar>
+                    <template #header>
+                        <div class="w-full">
+                            <el-select v-model="formModel.name" filterable block placeholder="请选择清表模板">
+                                <el-option v-for="item in excelData" :key="item.id" :label="item.wbsName" :value="item.id" />
+                            </el-select>
+                        </div>
+                    </template>
+                    <template #search>
+                        <div v-if="formModel.name" class="w-full">
+                            <hc-search-input v-model="filterText" placeholder="输入关键字搜索" @search="treeFilterClick" />
+                        </div>
+                    </template>
+                    <template v-if="formModel.name">
+                        <template v-if="isTreeMode === 1">
+                            <hc-lazy-tree
+                                v-if="isShow" ref="treeRef1" :h-props="treeProps" tree-key="id" :show-checkbox="isTreeCheck" check-strictly
+                                :default-checked-keys="treeNodeIds" @load="treeLoadNode" @node-tap="treeNodeTap"
+                            >
+                                <template #name="{ data }">
+                                    <span class="text-16px font-400">{{ data.title }}</span>
+                                </template>
+                            </hc-lazy-tree>
+                        </template>
+                        <template v-if="isTreeMode === 2">
+                            <hc-data-tree
+                                ref="treeRef2" :h-props="treeProps" tree-key="id" :show-checkbox="isTreeCheck" :datas="treeData"
+                                check-strictly :default-checked-keys="treeNodeIds" @node-tap="treeNodeTap"
+                            >
+                                <template #name="{ data }">
+                                    <span class="text-16px font-400">{{ data.title }}</span>
+                                </template>
+                            </hc-data-tree>
+                        </template>
+                    </template>
+                </hc-card>
+            </div>
+            <div class="right h-full flex-1">
+                222
+            </div>
+        </div>
+        <template #footer>
+            <el-button hc-btn @click="dialogClose">取消</el-button>
+            <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getDictionaryData } from '~uti/tools'
+import { formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import mainApi from '~api/exctab/exceltab'
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => ({}),
+    },
+    data: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听数据
+const dataInfo = ref(props.info)
+watch(() => props.info, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { immediate: true, deep: true })
+
+//监听数据
+const datas = ref(props.data)
+watch(() => props.data, (data) => {
+    datas.value = getArrValue(data)
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) getInfoData()
+})
+
+//获取数据详情
+const getInfoData = () => {
+    getWbsTypeList()
+}
+
+//获取清表模板信息
+const excelData = ref([])
+const getWbsTypeList = async () => {
+    const { data } = await mainApi.getWbsTypeList({ wbstype: 1 })
+    excelData.value = getArrValue(data)
+}
+
+//树配置
+const treeRef1 = ref(null)
+const treeRef2 = ref(null)
+const isTreeCheck = ref(false)
+const treeProps = {
+    label: 'title',
+    children: 'children',
+    isLeaf: (item) => {
+        const isExistForm = Number(item.isExistForm)
+        if (item.hasChildren && isExistForm !== 1) {
+            return false
+        } else if (item.hasChildren && isExistForm === 1) {
+            return true
+        } else {
+            return true
+        }
+    },
+}
+
+//筛选搜索
+const filterText = ref('')
+const isTreeMode = ref(1) //1懒加载，2全加载
+const treeFilterClick = async () => {
+    if (isNullES(filterText.value)) {
+        isTreeMode.value = 1
+    } else {
+        isTreeMode.value = 2
+        await getTreeAllData()
+        treeRef2.value?.treeRef?.filter(filterText.value)
+    }
+}
+
+//懒加载树
+const treeLoadNode = async ({ item, level }, resolve) => {
+    const parentId = level === 0 ? 0 : item.id
+    const { data } = await mainApi.getLazyTree({
+        parentId: parentId,
+        wbsId: formModel.value.name,
+        wbsType: '1',
+    })
+    const res = getArrValue(data)
+    res.forEach(item => {
+        item.isExistForm = !!item.isExistForm
+    })
+    resolve(res)
+}
+
+//全加载树
+const treeData = ref([])
+const getTreeAllData = async () => {
+    const { data } = await mainApi.getAllTree({
+        tenantId: '000000',
+        type: 1,
+        wbsId: formModel.value.name,
+    })
+    treeData.value = getArrValue(data)
+}
+
+
+//树节点被点击
+const nodeInfo = ref({})
+const treeNodeIds = ref([])
+const treeNodeTap = async ({ data, keys }) => {
+    nodeInfo.value = data
+    /*
+    if (data.fileType !== 3) {
+        isTreeNode.value = false
+        return
+    }
+    await getExcelHtmlCol(data.id)
+    await getTableData()
+    isTreeNode.value = true*/
+    treeNodeIds.value = keys
+}
+
+//表单
+const formModel = ref({})
+
+//提交
+const submitLoading = ref(false)
+const dialogSubmit = async () => {
+    /*const isForm = await formValidate(formRef.value)
+    if (!isForm) return false
+    submitLoading.value = true
+    const { isRes } = await mainApi.submitExcelElement(formModel.value)
+    submitLoading.value = false
+    if (!isRes) return*/
+    window.$message.success('操作成功')
+    emit('finish')
+}
+
+//关闭弹窗
+const dialogClose = () => {
+    isShow.value = false
+    submitLoading.value = false
+    dataInfo.value = {}
+    datas.value = []
+    emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-exctab-element-web-temp-box {
+    .left {
+        position: relative;
+        border-right: 1px solid #eee;
+        padding: 12px 12px 12px 0;
+    }
+    .right {
+        position: relative;
+        padding: 12px 0 12px 12px;
+    }
+}
+</style>
+
+<style lang="scss">
+.el-overlay-dialog .el-dialog.hc-new-dialog.hc-exctab-element-web-temp .el-dialog__body .hc-new-dialog-body {
+    padding: 0;
+}
+.el-overlay-dialog .hc-exctab-element-web-temp-box .el-card.hc-card-box.hc-new-card-box {
+    --el-card-bg-color: transparent;
+    --el-card-padding: 0;
+    box-shadow: none;
+}
+</style>