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

<template>
    <hc-sys navBarUi="hc-bg-white">
        <template #navBar>
            <hc-nav-back-bar ui="hc-bg-white" title="资料填报"/>
        </template>
        <view class="hc-search-bar">
            <uni-search-bar radius="5" bgColor="#f5f5f5" placeholder="搜索" cancelButton="none" @input="searchInput" @confirm="searchConfirm"/>
        </view>
        <view class="hc-page-body">
            <scroll-view scroll-y class="hc-page-menu">
                <template v-for="item in menuData">
                    <view class="hc-page-menu-item"
                          :class="item.primaryKeyId === menuItem.primaryKeyId ? 'cur': ''"
                          @click="menuItemClick(item)"
                    >{{ item.title }}
                    </view>
                </template>
            </scroll-view>
            <scroll-view scroll-y class="hc-page-data">
                <template v-for="(item, index) in pageNode">
                    <view class="hc-page-data-item"
                          :class="item.primaryKeyId === pageItem.primaryKeyId ? 'cur': ''"
                          @click="pageItemClick(item, index)"
                    >{{ item.title }}
                    </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 {getObjValue, getArrValue, deepClone} from "js-fast-way"
import {setStorage, delStorage} from "@/utils/storage";

const store = useAppStore()

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

//渲染完成
onMounted(() => {
    delStorage('dataFill')
    getLoadNode()
})

let menuData = ref([]);
let menuItem = ref({});

//获取数据
const getLoadNode = async () => {
    uni.showLoading({title: '获取数据中...', mask: true});
    //获取根节点的数据
    const {error, code, data} = await wbsApi.queryWbsTreeData({
        contractId: contractId.value || '',
        contractIdRelation: '',
        primaryKeyId: '',
        parentId: '',
        classifyType: '',
        tableOwner: contractInfo.value?.contractType ?? ''
    })
    //处理根节点的数据
    const nodeData = getArrValue(data)
    if (!error && code === 200 && nodeData.length > 0) {
        const {contractIdRelation, primaryKeyId, id} = getObjValue(nodeData[0])
        const {item, list} = await getChildNodeData({
            contractIdRelation: contractIdRelation ?? '',
            primaryKeyId: id,
            parentId: contractIdRelation ? primaryKeyId : id
        })
        menuItem.value = item
        menuData.value = list
        await menuItemClick(item)
        uni.hideLoading();
    } else {
        menuItem.value = {}
        menuData.value = []
        uni.hideLoading();
    }
}

//左侧菜单被点击
const pageNodes = ref([])
const pageNode = ref([])
const pageItem = ref({})
const menuItemClick = async (item) => {
    pageNodes.value = []
    pageNode.value = []
    menuItem.value = item
    const {contractIdRelation, primaryKeyId, id} = item
    const {list} = await getChildNodeData({
        contractIdRelation: contractIdRelation ?? '',
        primaryKeyId: id,
        parentId: contractIdRelation ? primaryKeyId : id
    })
    pageNodes.value = list
    pageNode.value = list
}

//右侧菜单被点击
const pageItemClick = (item, index) => {
    setStorage('dataFill', {
        title: menuItem.value.title,
        node: pageNode.value,
        index: index,
    })
    uni.navigateTo({
        url: '/pages/data-fill/treeData'
    });
}

//获取子节点的数据
const getChildNodeData = async (obj) => {
    const {error, code, data} = await wbsApi.queryWbsTreeData({
        ...obj,
        contractId: contractId.value || '',
        classifyType: contractInfo.value?.contractType ?? '',
        tableOwner: contractInfo.value?.contractType ?? ''
    })
    //处理二级节点的数据
    const nodeData = getArrValue(data)
    if (!error && code === 200 && nodeData.length > 0) {
        return {
            item: getObjValue(nodeData[0]),
            list: nodeData
        }
    } else {
        return {item: {}, list: []}
    }
}

//搜索
const searchInput = (value) => {
    querySearch(value)
}

const searchConfirm = ({value}) => {
    querySearch(value)
}

const querySearch = (value) => {
    const pageNodeRes = deepClone(pageNodes.value)
    const results = value ? pageNodeRes.filter(createFilter(value)) : pageNodeRes
    pageNode.value = deepClone(results)
}
const createFilter = (value) => {
    return (item) => {
        return (item.title.toLowerCase().indexOf(value.toLowerCase()) >= 0)
    }
}
</script>

<style lang="scss" scoped>
page {
    background: #FAFBFE;
}
</style>

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