client-app/pages/data-fill/treeData.vue

<template>
    <hc-sys navBarUi="hc-bg-white">
        <template #navBar>
            <hc-nav-back-bar ui="hc-bg-white" :title="fillInfo.title"/>
        </template>
        <view class="hc-search-bar">
            <uni-search-bar radius="5" bgColor="#f5f5f5" placeholder="搜索" cancelButton="none" @confirm="searchConfirm"/>
        </view>
        <view class="hc-page-body">
            <scroll-view scroll-y class="scroll-h-auto">
                <template v-for="(item, index) in nodeData">
                    <view class="fold-tree-node" :class="primaryId === item.primaryKeyId?'current':''">
                        <view class="flex flex-items-center node-title" @click="getLoadItemNode(item, index)">
                            <view class="flex flex-items-center icon">
                                <template v-if="!item.notExsitChild">
                                    <text class="i-ri-arrow-up-s-fill" v-if="primaryId === item.primaryKeyId"/>
                                    <text class="i-ri-arrow-down-s-fill" v-else/>
                                </template>
                            </view>
                            <view class="content" :class="item.colorStatus === 2 ? 'text-blue-5':item.colorStatus === 3 ? 'text-orange-5': item.colorStatus === 4 ? 'text-green-5': ''">
                                {{item.title}}【{{ item.submitCounts ?? 0 }}】
                            </view>
                        </view>
                        <view class="node-child" v-if="primaryId === item.primaryKeyId">
                            <template v-for="(items, indexs) in item.childData">
                                <view class="flex flex-items-center node-title" @click="getLoadItemNode(items, indexs, index)">
                                    <view class="flex flex-items-center icon">
                                        <text class="i-ri-arrow-down-s-fill" v-if="!items.notExsitChild"/>
                                    </view>
                                    <view class="content" :class="items.colorStatus === 2 ? 'text-blue-5':items.colorStatus === 3 ? 'text-orange-5': items.colorStatus === 4 ? 'text-green-5': ''">
                                        {{items.title}}【{{ items.submitCounts ?? 0 }}】
                                    </view>
                                </view>
                            </template>
                        </view>
                    </view>
                </template>
            </scroll-view>
        </view>
    </hc-sys>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "@/store";
import wbsApi from '~api/data-fill/wbs';
import {getStorage} from "@/utils/storage";
import {deepClone, getArrValue, getObjVal} from "js-fast-way"

const store = useAppStore()

//初始变量
const contractInfo = ref(store.contractInfo);
const projectId = ref(store.projectId);
const contractId = ref(store.contractId);
const fillInfo = getStorage('dataFill')

//渲染完成
onMounted(() => {
    setTreeNodeData()
})

//数据变量
const nodeData = ref([]);       // 当前展示节点
const primaryId = ref('');      // 当前节点索引
const parentData = ref([]);     // 父级节点数据
const parentIndex = ref(-1);    // 父级节点索引

//处理数据
const setTreeNodeData = async () => {
    uni.showLoading({title: '获取数据中...', mask: true});
    const node = getArrValue(fillInfo.node)
    const index = fillInfo?.index ?? -1
    if (node.length > 0) {
        for (let i = 0; i < node.length; i++) {
            node[i].level = 1
        }
    }
    nodeData.value = node
    uni.hideLoading();
    await getLoadItemNode(nodeData.value[index], index)
}

//获取数据
const getLoadItemNode = async (item, index, pindex = -1) => {
    if (!getObjVal(item)) {
        return false
    }
    //处理数据
    const {contractIdRelation, primaryKeyId, id} = item
    if (primaryId.value === item.primaryKeyId) {
        //返回上级
        if (item.level > 1) {
            const parent_index = parentIndex.value
            const parent_data = getArrValue(parentData.value)
            const info = parent_data[parent_index]
            primaryId.value = info?.primaryKeyId ?? ''
            if (info.childData <= 0) {
                const res = await queryWbsTreeData({
                    primaryKeyId: id,
                    contractIdRelation: contractIdRelation ?? '',
                    parentId: contractIdRelation ? primaryKeyId : id,
                })
                //增加层级
                for (let i = 0; i < res.length; i++) {
                    res[i].level = item.level - 1
                }
                info.childData = res
            }
            nodeData.value = deepClone(parent_data)
        } else {
            uni.navigateBack()
        }
    } else if (!item.notExsitChild) {
        //获取子级
        primaryId.value = primaryKeyId ?? ''
        const res = await queryWbsTreeData({
            primaryKeyId: id,
            contractIdRelation: contractIdRelation ?? '',
            parentId: contractIdRelation ? primaryKeyId : id,
        })
        //增加层级
        for (let i = 0; i < res.length; i++) {
            res[i].level = item.level + 1
        }
        item.childData = res
        //获取相关数据
        if (pindex > -1) {
            parentIndex.value = pindex
            parentData.value = deepClone(nodeData.value)
            nodeData.value = deepClone(nodeData.value[pindex].childData)
        }
    } else if (item.notExsitChild) {
        //最后一级被点击
        uni.navigateTo({
            url: '/pages/data-fill/dataTable?node=' + encodeURIComponent(JSON.stringify({
                id: item.id,
                title: item.title,
                primaryKeyId: item.primaryKeyId,
                contractIdRelation: item.contractIdRelation,
            }))
        });
    }
}

//获取节点数据
const queryWbsTreeData = async (obj, level) => {
    uni.showLoading({title: '获取数据中...', mask: true});
    const { data } = await wbsApi.queryWbsTreeData({
        ...obj,
        contractId: contractId.value || '',
        classifyType: contractInfo.value?.contractType ?? '',
        tableOwner: contractInfo.value?.contractType ?? ''
    })
    uni.hideLoading();
    return getArrValue(data)
}

//搜索
const searchConfirm = ({value}) => {

}
</script>

<style lang="scss" scoped>
@import "@/style/data-fill/index.scoped.scss";
</style>