hac/src/views/project/cost/data.vue

<template>
    <HcCard>
        <template #header>
            <div class="hc-card-header-back" @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>返回</span>
            </div>
            <span class="mr-2">这里是显示项目名称：总成本为</span>
            <span class="text-red text-xl">812983</span>
            <span class="ml-2">元</span>
        </template>
        <template #extra>
            <div class="w-44">
                <el-select block clearable placeholder="费用支出所属分类" size="large">
                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-40 ml-2">
                <el-select block clearable placeholder="请选择参建方" size="large">
                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
        </template>
        <div class="hc-table-ref-box no-border hc-project-cost-data">
            <el-table :data="tableData" border
                      :header-cell-style="tableHeaderCellStyle"
                      :cell-style="tableCellStyle"
                      style="width: 100%; height: 100%"
            >
                <el-table-column prop="key1" label="费用分类" align="center"/>
                <el-table-column prop="key2" label="项目环节" align="center"/>
                <el-table-column prop="key3" label="预算类型" align="center"/>
                <el-table-column prop="key4" label="任务明细" align="center"/>
                <el-table-column prop="key5" label="预计工作量(小数/整数)" align="center"/>
                <el-table-column prop="key6" label="投入岗位类型(日单价)" align="center">
                    <template #default="{ row }">
                        <div style="background: #00CCFF">{{ row.key6 }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="key7" label="投入人员数量" align="center"/>
                <el-table-column prop="key8" label="预计人工成本(元)" align="center">
                    <template #default="{ row }">
                        <div style="background: #fe6e22">{{ row.key8 }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="key9" label="预计差旅费(元)" align="center"/>
                <el-table-column prop="key10" label="外包单价" align="center"/>
                <el-table-column prop="key11" label="外包数量" align="center"/>
                <el-table-column prop="key12" label="外包金额" align="center"/>
                <el-table-column prop="key13" label="其他预算金额" align="center"/>
                <el-table-column prop="key14" label="总预算金额" align="center">
                    <template #default="{ row }">
                        <div style="background: #fe6e22">{{ row.key14 }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="key15" label="测算备注" align="center"/>
            </el-table>
        </div>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'
//初始变量
const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    console.log(useRoutes.query)
})

const projectType = ref([
    {key: '1', name: '选项1'},
    {key: '2', name: '选项2'},
])

//表格数据
const tableData = ref([
    {id: '1', key1: '选项1', key2: 'xxxx'},
    {id: '2', key1: '选项2', key2: 'xxxx'},
    {id: '3', key1: '选项3', key2: 'xxxx'},
])

//自定义表头样式
const tableHeaderCellStyle = ({column}) => {
    if (column.property === 'key6' || column.property === 'key14') {
        return {backgroundColor: 'rgba(233, 157, 66, 0.23)', color: '#101010'}
    } else if (column.property === 'key8') {
        return {backgroundColor: 'rgba(147, 210, 243, 0.23)', color: '#101010'}
    } else {
        return {backgroundColor: 'rgba(73, 128, 248, 0.23)', color: '#101010'}
    }
}

//自定义列的样式
const tableCellStyle = ({column}) => {
    if (column.property === 'key6' || column.property === 'key14') {
        return {backgroundColor: 'rgba(233, 157, 66, 0.23)'}
    } else if (column.property === 'key8') {
        return {backgroundColor: 'rgba(147, 210, 243, 0.23)'}
    } else {
        return {}
    }
}


//取消并返回
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss">
.hc-project-cost-data .el-table {
    --el-table-border-color: #b7b7b7;
}
</style>