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-button hc-btn type="success">数据同步</el-button>
                    <el-button hc-btn type="primary">表单设置</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 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-lazy-tree :h-props="treeProps" tree-key="id" @load="treeLoadNode" />
                        </hc-new-card>
                    </template>
                    <div class="body-top">
                        <hc-body padding="0px">
                            <hc-new-card title="节点信息">
                                节点信息
                            </hc-new-card>
                        </hc-body>
                    </div>
                    <div class="body-content">
                        <hc-body padding="0px">
                            <hc-new-card title="当前项目信息表">
                                当前项目信息表
                            </hc-new-card>
                        </hc-body>
                    </div>
                </hc-body>
            </div>
        </div>
    </hc-new-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { delMessage } from 'hc-vue3-ui'
import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
import mainApi from '~api/project/project'
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('type: ', type)
    console.log('wbsId: ', wbsId.value)
    console.log('info: ', projectInfo.value)
}

//树节点搜索
const searchTree = ref({ queryValue: '', type: '1' })
const searchTreeClick = () => {

}

//树属性
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 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))
}
</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 .hc-page-split-content {
    display: flex;
    flex-direction: column;
    .body-top {
        position: relative;
        flex: 1;
    }
    .body-content {
        position: relative;
        margin-top: 10px;
        flex: 4;
    }
}
</style>