client-app/pages/image/position.vue

<template>
    <hc-sys navBarUi="white">
        <template #navBar>
            <hc-nav-back-bar title="声像资料">
                <view class="text-26">
                    <picker :range="typeData" :value="typeIndex" @change="bindTypeChange">
                        <view class="flex items-center">
                            <text>{{typeData[typeIndex]}}</text>
                            <text class="i-iconoir-nav-arrow-down" un-text-36 un-text-gray-6/>
                        </view>
                    </picker>
                </view>
            </hc-nav-back-bar>
        </template>

        <view class="relative" un-border-t="1 solid gray-2" v-if="typeIndex === 0">
            <hc-tree counts @load="getAllLoad" @nodeTap="nodeAllTap"/>
        </view>
        <view class="relative" un-border-t="1 solid gray-2" v-if="typeIndex === 1">
            <hc-tree @load="getWorksLoad" @nodeTap="nodeWorksTap"/>
        </view>

        <!--底部操作栏-->
        <HcTabbarBlock :height="70"/>
        <hc-tabbars class="flex items-center">
            <view class="w-200 mr-4">
                <button hover-class="none" class="cu-btn block bg-gray-4 text-white" @click="viewClick">查看</button>
            </view>
            <view class="flex-1">
                <button hover-class="none" class="cu-btn block bg-purple-8 text-white" @click="uploadClick">拍照/上传</button>
            </view>
        </hc-tabbars>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app'
import mainApi from '~api/image/index';
import {useAppStore} from "@/store";
import {getArrValue, getObjValue} from "js-fast-way";
import {errorToast} from "@/utils/tools";

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

//基础变量
const pageNode = ref({});
const typeData = ['全显示', '隐蔽工程']
const typeIndex = ref(0)

//页面启动
onLoad(({node}) => {
    pageNode.value = node ? JSON.parse(decodeURIComponent(node)) : {};
})

//全部树
const getAllLoad = async (node, resolve) => {
    const { contractType } = contractInfo.value
    const { id, contractIdRelation } = getObjValue(node.data)
    const { data } = await mainApi.queryTreeList({
        contractId: contractId.value,
        contractIdRelation: contractIdRelation ?? '',
        primaryKeyId: id ?? '',
        parentId: id ?? '',
        classifyType: contractType ?? '',
        classId: pageNode.value?.id,
    })
    resolve(getArrValue(data))
}

//树节点被点击
const treeItem = ref({})
const nodeAllTap = ({data}) => {
    if (data?.notExsitChild) {
        treeItem.value = getObjValue(data);
    } else {
        treeItem.value = {};
    }
}

//数据类型
const bindTypeChange = ({detail}) => {
    typeIndex.value = detail.value
}

//获取隐蔽工程的节点
const getWorksLoad = async(node, resolve) => {
    const { contractType } = contractInfo.value
    const { id, contractIdRelation } = getObjValue(node.data)
    const { data } = await mainApi.queryWorksTree({
        contractId: contractId.value,
        contractIdRelation: contractIdRelation ?? '',
        primaryKeyId: id ?? '',
        parentId: id ?? '',
        classifyType: contractType ?? '',
        classId: pageNode.value?.id,
    })
    resolve(getArrValue(data))
}

//树节点被点击
const nodeWorksTap = ({data}) => {
    if (data?.notExsitChild) {
        treeItem.value = getObjValue(data);
    } else {
        treeItem.value = {};
    }
}

const toPageNode = () => {
    const {primaryKeyId} = treeItem.value
    if (!primaryKeyId) {
        errorToast('请先选择最后的一个树节点')
        return false;
    }
    //准备跳转路由
    return encodeURIComponent(JSON.stringify({
        ...pageNode.value,
        treeId: primaryKeyId
    }));
}

//查看
const viewClick = () => {
    const node = toPageNode()
    if (!node) return false;
    uni.navigateTo({
        url: `/pages/image/view?node=${node}`
    });
}

//拍照/上传
const uploadClick = () => {
    const node = toPageNode()
    if (!node) return false;
    uni.navigateTo({
        url: `/pages/image/form?node=${node}`
    })
}
</script>