for_client/src/views/schedule/hc-table.vue

<template>
    <div class="hc-layout-box">
        <HcCard>
            <template #header>
                <el-button hc-btn type="primary" @click="toBackClick">
                    <HcIcon name="arrow-go-back"/>
                    <span>返回上一级</span>
                </el-button>
            </template>
            <el-table v-loading="isLoading" :data="tableData" :load="loadData" border height="100%" lazy
                      row-key="primaryKeyId">
                <el-table-column label="节点名称" prop="title"></el-table-column>
                <el-table-column align="center" label="施工台账">
                    <el-table-column align="center" label="未开始" prop="standingBookNotAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="已完成" prop="standingBookEndAmount"
                                     width="80"></el-table-column>
                </el-table-column>
                <el-table-column align="center" label="开工报告">
                    <el-table-column align="center" label="未开始" prop="workStartNotSubmitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="未上报" prop="workStartNotTaskAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="待审批" prop="workStartAwaitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="已审批" prop="workStartApprovalAmount"
                                     width="80"></el-table-column>
                </el-table-column>
                <el-table-column align="center" label="工序资料">
                    <el-table-column align="center" label="未开始" prop="processNotSubmitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="未上报" prop="processNotTaskAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="待审批" prop="processAwaitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="已审批" prop="processApprovalAmount"
                                     width="80"></el-table-column>
                </el-table-column>
                <el-table-column align="center" label="质量评定">
                    <el-table-column align="center" label="未开始" prop="evaluationNotSubmitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="未上报" prop="evaluationNotTaskAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="待审批" prop="evaluationAwaitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="已审批" prop="evaluationApprovalAmount"
                                     width="80"></el-table-column>
                </el-table-column>
                <el-table-column align="center" label="中间交工">
                    <el-table-column align="center" label="未开始" prop="completionNotSubmitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="未上报" prop="completionNotTaskAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="待审批" prop="completionAwaitAmount"
                                     width="80"></el-table-column>
                    <el-table-column align="center" label="已审批" prop="completionApprovalAmount"
                                     width="80"></el-table-column>
                </el-table-column>
            </el-table>
        </HcCard>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useRouter} from 'vue-router'
import {useAppStore} from "~src/store";
import DataApi from "~api/schedule/data"
import {getArrValue} from "js-fast-way"

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);

//渲染完成
onMounted(() => {
    if (contractId.value) {
        getTableData()
    }
})

//初始数据获取
const isLoading = ref(false)
const tableData = ref([])
const getTableData = async () => {
    isLoading.value = true
    const {error, code, data} = await DataApi.queryContractTreeMaterialProgress({
        projectId: projectId.value,
        contractId: contractId.value,
        parentId: ''
    });
    isLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['treeMaterialProgressList']);
    } else {
        tableData.value = [];
    }
}

//懒加载数据
const loadData = async (row, treeNode, resolve) => {
    const {error, code, data} = await DataApi.queryContractTreeMaterialProgress({
        projectId: projectId.value,
        contractId: row.contractId || contractId.value,
        parentId: row.id
    });
    if (!error && code === 200) {
        resolve(getArrValue(data['treeMaterialProgressList']))
    } else {
        resolve([])
    }
}

//返回上级
const toBackClick = () => {
    router.push({
        path: '/schedule/data'
    })
}
</script>

<style lang="scss" scoped>
@import '../../styles/schedule/hc-table.scss';
</style>