admin/src/views/project/modules/list/wbs-tree.vue

<template>
    <hc-new-drawer v-model="isShow" is-close to-id="hc-project-list">
        <div class="hc-project-wbs-tree flex">
            <div class="header hc-flex">
                <div class="name flex-1">{{ typeLable }} - {{ projectInfo.projectName }}</div>
                <div class="hc-flex">
                    <el-dropdown trigger="click">
                        <el-button hc-btn type="success">
                            <span>数据同步</span>
                            <hc-icon name="arrow-down-s" />
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <template v-for="item in dataSyncMenu" :key="item.key">
                                    <el-dropdown-item @click="dataSyncMenuClick(item)">{{ item.name }}</el-dropdown-item>
                                </template>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-button v-if="isFormSet" class="ml-3" hc-btn type="primary" @click="setIsFormSetValue">表单设置</el-button>
                    <el-button v-else class="ml-3" hc-btn type="primary" @click="setIsFormSetValue">元素设置</el-button>
                    <el-button hc-btn type="danger">节点参数</el-button>
                    <el-button hc-btn color="#626aef">独立表单库</el-button>
                    <el-button hc-btn type="warning">归档文件时间</el-button>
                </div>
            </div>
            <div class="body">
                <hc-body split padding="8px">
                    <template #left>
                        <hc-new-card v-loading="isTreeLoading" title="工程节点信息" scrollbar class="is-tree">
                            <template #search>
                                <hc-search-input v-model="searchTree.queryValue" @search="searchTreeClick">
                                    <template #prepend>
                                        <el-select v-model="searchTree.type" placeholder="类型" class="w-[75px]">
                                            <el-option label="节点" value="1" />
                                            <el-option label="表名" value="2" />
                                        </el-select>
                                    </template>
                                </hc-search-input>
                            </template>
                            <hc-data-tree
                                v-if="isSearchTree" :h-props="treeProps" :datas="treeLoadData" tree-key="id" :auto-expand-keys="treeExpandKeys"
                                :menus="treeMenus" @menu-tap="treeMenuClick" @node-tap="treeNodeClick"
                            />
                            <hc-lazy-tree
                                v-else :h-props="treeProps" tree-key="id" :auto-expand-keys="treeExpandKeys"
                                :menus="treeMenus" @load="treeLoadNode" @menu-tap="treeMenuClick" @node-tap="treeNodeClick"
                            />
                        </hc-new-card>
                    </template>
                    <template v-if="isFormSet">
                        <div class="body-top">
                            <hc-new-card title="节点信息">
                                <hc-table is-new :is-index="false" :column="nodeTableColumn" :datas="nodeTableData">
                                    <template #nodeType="{ row }">{{ getDictionaryName(nodeTypelist, row.nodeType, true) }}</template>
                                </hc-table>
                            </hc-new-card>
                        </div>
                        <div class="body-content">
                            <hc-new-card title="当前项目信息表">
                                <template #extra>
                                    <el-button hc-btn type="primary" :disabled="infoTableData.length <= 0">编辑</el-button>
                                    <el-button hc-btn type="success" :disabled="infoTableData.length <= 0">排序</el-button>
                                </template>
                                <hc-table v-loading="infoTableLoading" is-new :is-index="false" :column="infoTableColumn" :datas="infoTableData">
                                    <template #tableType="{ row }">{{ getDictionaryName(tableTypelist, row.tableType, true) }}</template>
                                    <template #tableOwner="{ row }">{{ getDictionaryName(ownerTypeList, row.tableOwner, true) }}</template>
                                    <template #action="{ row }">
                                        <el-link type="primary">预览</el-link>
                                        <el-link v-if="row.status === 1" type="warning">隐藏表单</el-link>
                                        <el-link v-if="row.status === 0" type="success">取消隐藏</el-link>
                                        <el-link v-del-com:[delInfoTableRow]="row" type="danger">删除</el-link>
                                    </template>
                                </hc-table>
                            </hc-new-card>
                        </div>
                    </template>
                    <template v-else>
                        <hc-new-card>
                            <hc-table v-loading="infoTableLoading" is-new :is-index="false" :column="infoTableColumn1" :datas="infoTableData">
                                <template #tableType="{ row }">{{ getDictionaryName(tableTypelist, row.tableType, true) }}</template>
                                <template #isLinkTable="{ row }">{{ row.isLinkTable === 2 ? '是' : '否' }}</template>
                                <template #tableOwner="{ row }">{{ getDictionaryName(ownerTypeList, row.tableOwner, true) }}</template>
                                <template #action="{ row }">
                                    <el-link type="success">关联清表</el-link>
                                    <el-link type="primary" :disabled="row.excelId === -1 || isNullES(row.excelId)">编辑元素</el-link>
                                    <el-link type="warning" :disabled="row.excelId === -1 || isNullES(row.excelId)">调整表单</el-link>
                                    <el-link type="primary">编辑元素公式</el-link>
                                    <el-link type="warning">表单同步</el-link>
                                    <el-link v-del-com:[delInfoTableRow]="row" type="danger">删除表单</el-link>
                                </template>
                            </hc-table>
                        </hc-new-card>
                    </template>
                </hc-body>
            </div>
        </div>
    </hc-new-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getStore, setStore } from 'hc-vue3-ui'
import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
import { getDictionaryData } from '~uti/tools'
import mainApi from '~api/project/project'
import wbsTreeApi from '~api/wbs/tree'
import wbsPrivateApi from '~api/wbs/private'

const props = defineProps({
    type: {
        type: [String, Number],
        default: '1',
    },
    info: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['change', 'close'])

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

const store = useAppStore()

//监听数据
const isType = ref(props.type)
const projectInfo = ref(props.info)
watch(() => [
    props.type,
    props.info,
], ([type, info]) => {
    isType.value = type
    projectInfo.value = info
}, { deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) {
        getProjectData()
    } else {
        projectInfo.value = {}
        isType.value = ''
        emit('close')
    }
})

//获取项目信息
const typeLable = ref('')
const wbsId = ref('')
const getProjectData = () => {
    const type = isType.value ?? 1
    const wbsArr = ['WBS树管理', '实验划分', '计量管理', '日志树管理', '征拆划分']
    typeLable.value = wbsArr[Number(type) - 1]
    const wbsIds = [
        'referenceWbsTemplateId', 'referenceWbsTemplateIdTrial',
        'referenceWbsTemplateIdMeter', 'referenceLogWbsTemplateId',
        'referenceWbsTemplateIdLar',
    ]
    wbsId.value = projectInfo.value[wbsIds[Number(type) - 1]]
    console.log('info: ', projectInfo.value)
    getNodeTypelist(Number(type) - 1)
    getTableTypelist(Number(type) - 1)
    getDataTypelist()
    getOwnerTypelist()
    getMajorDataTypeList()
}

//获取节点类型
const nodeTypelist = ref([])
const getNodeTypelist = async (type) => {
    //计量管理，征拆划分，实验划分，WBS树管理，日志树管理
    const types = ['wbs_node_type', 'trial_node_type', 'meter_node_type', 'wbs_node_type', 'lar_node_type']
    const data = await getDictionaryData(types[type])
    nodeTypelist.value = getArrValue(data)
}

//获取表单类型
const tableTypelist = ref([])
const getTableTypelist = async (type) => {
    //计量管理，征拆划分，实验划分，WBS树管理，日志树管理
    const types = ['table_type', 'trial_table_type', 'table_type', 'table_type', 'table_type']
    const data = await getDictionaryData(types[type])
    tableTypelist.value = getArrValue(data)
}

//获取数据类型
const dataTypeList = ref([])
const getDataTypelist = async () => {
    const data = await getDictionaryData('data_type')
    dataTypeList.value = getArrValue(data)
}

//获取业主类型
const ownerTypeList = ref([])
const getOwnerTypelist = async () => {
    const data = await getDictionaryData('owner_type')
    ownerTypeList.value = getArrValue(data)
}

//获取类型字典
const majorDataTypeList = ref([])
const getMajorDataTypeList = async () => {
    const data = await getDictionaryData('major_data_type')
    majorDataTypeList.value = getArrValue(data)
}

//获取字典里的数据
const getDictionaryName = (arr, id, name) => {
    if (isNullES(id)) return name ? '' : {}
    const item = arr.find((item) => item.value === Number(id))
    return name ? item?.label : getObjValue(item)
}

//树节点搜索
const isSearchTree = ref(false)
const isTreeLoading = ref(false)
const searchTree = ref({ queryValue: '', type: '1' })
const searchTreeClick = () => {
    const { queryValue } = searchTree.value
    isSearchTree.value = !isNullES(queryValue)
    getTreeLoadData()
}

//获取搜索树的数据
const treeLoadData = ref([])
const getTreeLoadData = async () => {
    isTreeLoading.value = true
    const { data } = await wbsTreeApi.getQueryValueByType({
        ...searchTree.value,
        wbsId: wbsId.value,
        projectId: projectInfo.value.id,
    })
    treeLoadData.value = getArrValue(data)
    isTreeLoading.value = false
}

//树属性
const treeExpandKeys = ref(getStore('project-wbs-tree-expand-keys') || [])
const treeProps = {
    children: 'children',
    label: 'title',
    isLeaf: ({ hasChildren, isExistForm, majorDataType, nodeType }) => {
        let tag = false
        if (!hasChildren) {
            tag = true
        }
        if (isExistForm === 1) {
            tag = true
        }
        if (nodeType >= 6 && nodeType <= 13) {
            tag = true
        }
        //中间交工。开工报告、质量评定）
        if (majorDataType >= 1 && majorDataType <= 3) {
            tag = true
        }
        return tag
    },
}

//树的右键菜单
const treeMenus = [
    { icon: 'draft', label: '编辑节点', key: 'edit' },
    { icon: 'refresh', label: '同步新增元素表单', key: 'sync1' },
    { icon: 'loop-left', label: '同步元素表单排序到合同段', key: 'sync3' },
    { icon: 'loop-right', label: '同步节点基础信息及表单URL', key: 'sync2' },
    { icon: 'sort-asc', label: '调整排序', key: 'sort' },
    { icon: 'delete-bin', label: '删除节点', key: 'del' },
]
//菜单被点击
const treeMenuClick = ({ key, node, data, keys }) => {

}

//懒加载树
const treeLoadNode = async ({ item, level }, resolve) => {
    let pid = level !== 0 ? item.id : 0
    const { data } = await wbsPrivateApi.getLazytree({
        wbsId: wbsId.value,
        parentId: pid,
        tenantId: store.tenantId,
        projectId: projectInfo.value.id,
        wbsType: isType.value,
    })
    resolve(getArrValue(data))
}

//节点信息
const nodeTableColumn = ref([
    { key: 'nodeName', name: '当前节点', align: 'center' },
    { key: 'nodeType', name: '节点类型', align: 'center' },
    { key: 'parentName', name: '上级节点', align: 'center' },
])
const nodeTableData = ref([])

//节点被点击
const treeItem = ref({})
const treeNodeClick = ({ node, data, keys }) => {
    //获取父节点名称
    let parentName = ''
    if (node?.parent?.data) {
        parentName = node.parent.data.title ?? ''
    }
    data.parentName = parentName
    //设置相关数据
    treeItem.value = getObjValue(data)
    setStore('project-wbs-tree-expand-keys', keys)
    treeExpandKeys.value = getArrValue(keys)
    //获取节点详情
    getTreeDetail()
    getInfoTableData()
}

//获取节点详情
const treeInfo = ref({})
const getTreeDetail = async () => {
    const { id, parentName } = treeItem.value
    const { data } = await wbsPrivateApi.detail({
        id,
        wbsId: wbsId.value,
        projectId: projectInfo.value.id,
    })
    const res = getObjValue(data)
    res.parentName = parentName
    treeInfo.value = res
    nodeTableData.value = [res]
}

//当前项目信息表
const infoTableLoading = ref(false)
const infoTableColumn = ref([
    { key: 'tableName', name: '表单名称', align: 'center' },
    { key: 'elementTotal', name: '字段总量', align: 'center' },
    { key: 'fillRate', name: '填报率', align: 'center' },
    { key: 'tableType', name: '表单类型', align: 'center' },
    { key: 'tableOwner', name: '所属方', align: 'center' },
    { key: 'action', name: '操作', width: 160, align: 'center' },
])
const infoTableData = ref([])
const getInfoTableData = async () => {
    const { id } = treeItem.value
    infoTableLoading.value = true
    const { data } = await wbsPrivateApi.findNodeTableByCondition({
        parentId: id,
        wbsId: wbsId.value,
        projectId: projectInfo.value.id,
    })
    infoTableData.value = getArrValue(data)
    infoTableLoading.value = false
}

//当前项目信息表删除
const delInfoTableRow = async (item) => {
    const { error, code, msg } = await wbsPrivateApi.removeTableByCondition({
        id: item.id,
        wbsId: wbsId.value,
        projectId: projectInfo.value.id,
    })
    if (!error && code === 200) {
        window.$message.success('删除成功')
        getInfoTableData().then()
    } else {
        window.$message.error(msg ?? '删除失败')
    }
}

//表单设置
const isFormSet = ref(true)
const infoTableColumn1 = ref([
    { key: 'tableName', name: '表单名称', align: 'center' },
    { key: 'tableType', name: '表单类型', align: 'center' },
    { key: 'fillRate', name: '填报率', align: 'center' },
    { key: 'isLinkTable', name: '是否关联清表', align: 'center' },
    { key: 'tableOwner', name: '所属方', align: 'center' },
    { key: 'action', name: '操作', width: 430, align: 'center' },
])
const setIsFormSetValue = () => {
    isFormSet.value = !isFormSet.value
    if (isFormSet.value) {
        getTreeDetail()
    }
    getInfoTableData()
}

//数据同步按钮菜单
const dataSyncMenu = [
    { key: 'jdSync', name: '节点参数同步', load:false },
    { key: 'dqSync', name: '电签同步', load:false },
    { key: 'gsSync', name: '公式同步', load:false },
]
const dataSyncMenuClick = (item) => {
    console.log( item)
}
</script>

<style scoped lang="scss">
.hc-project-wbs-tree {
    position: relative;
    background: #ececec;
    border-radius: 4px;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    .header {
        color: white;
        background: #54565A;
        padding: 10px 14px;
        flex-shrink: 0;
        .name {
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
    }
    .body {
        flex: 1;
        flex-basis: auto;
        position: relative;
    }
}
</style>

<style lang="scss">
.hc-project-wbs-tree .body {
    .el-card.hc-card-box {
        --el-card-padding: 12px;
        --el-card-border-radius: 5px;
    }
    .hc-page-split-content {
        position: relative;
        .body-top {
            position: relative;
            height: 119.5px;
        }
        .body-content {
            position: relative;
            margin-top: 10px;
            height: calc(100% - 129.5px);
        }
    }
}
</style>