hac/src/views/project/contract/update.vue

<template>
    <HcCard actionUi="text-center">
        <template #header>
            <div class="w-48">
                <el-select block clearable placeholder="请选择合同名称" size="large">
                    <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
        </template>
        <div class="hc-table-ref-box no-border hc-project-contract-update-data">
            <el-table :data="tableData" border
                      :header-cell-style="tableHeaderCellStyle"
                      :row-style="tableRowStyle"
                      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">
                    <template #default="{ row }">
                        <span v-if="row.key4">{{row.key4}}</span>
                        <el-date-picker class="block" v-model="row.key4" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
                    </template>
                </el-table-column>
                <el-table-column prop="key5" label="实际回款金额" align="center">
                    <template #default="{ row }">
                        <span v-if="row.key5">{{row.key5}}</span>
                        <el-input v-model="row.key5" v-else/>
                    </template>
                </el-table-column>
                <el-table-column prop="key6" label="催款执行人" align="center"/>
            </el-table>
        </div>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </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 projectName = ref([
    {name: '陈油路', key: '陈油路'},
    {name: '奉建路', key: '奉建路'}
])

//表格数据
const tableData = ref([
    {id: 1, key1: 'xxxx', key2: '222', key3: '333', key4: '', key5: '', key6: '666'},
    {id: 2, key1: '', key2: '', key3: '', key4: '22', key5: '33', key6: ''},
    {id: 3, key1: '', key2: '', key3: '', key4: '22', key5: '33', key6: ''},
])

//自定义表头样式
const tableHeaderCellStyle = () => {
    return {backgroundColor: '#93D2F3', color: '#101010'}
}

//自定义行的样式
const tableRowStyle = ({ row }) => {
    if (row.key4 === '' || row.key5 === '') {
        return {backgroundColor: '#BD3124', color: '#fff'}
    }
}

//返回
const goBackClick = () => {
    router.back()
}

//提交保存
const saveClick = () => {

}
</script>

<style lang="scss">
.hc-project-contract-update-data .el-table {
    --el-table-border-color: #b7b7b7;
    --el-table-row-hover-bg-color: inherit;
}
</style>