devicesmgt/sgzb-ui/src/views/cost/csotSettlement/component/finishTable.vue

<template>
    <!-- 完工结算和结算明细页面的表格组件 -->
    <div style="margin-top: 60px">
        <el-row class="table-title" type="flex">
            <div class="batch-system-day" v-if="isCostBear && isEdit">
                调整天数批量设置：
                <el-input
                    v-model="batchNum"
                    type="number"
                    clearable
                    style="width: 120px"
                    @change="iptChange"
                />
            </div>
            <span class="repair-tip" v-if="isRepair"
                >勾选需要赔偿的维修项目</span
            >
            <el-col :span="5" class="cost-bear">
                <span v-if="isCostBear">{{
                    constBear === 1 ? '费用承担方：01' : '费用承担方：03'
                }}</span>
                <span v-else />
                <span v-if="totalPrice !== -1">合计：{{ totalPrice }}元</span>
            </el-col>
            <el-col :span="14" class="title">{{ tableTitle }}</el-col>
            <el-col :span="5" class="btn-item">
                <el-button size="mini" type="warning" v-if="!isEdit"
                    >导出</el-button
                >
                <el-button
                    size="mini"
                    type="primary"
                    v-if="isCostBear || isRepair"
                    @click="handleEdit"
                    >{{ isEdit ? '取消编辑' : '编辑' }}</el-button
                >
                <el-button
                    size="mini"
                    type="success"
                    v-if="!isEdit && isCostBear"
                    >确认结算</el-button
                >
                <el-button
                    size="mini"
                    type="success"
                    v-if="isEdit && isCostBear"
                    @click="handleSave"
                    >保存</el-button
                >
            </el-col>
        </el-row>

        <el-table border :data="tableData">
            <el-table-column type="selection" v-if="isRepair" />
            <el-table-column
                align="center"
                v-for="(t, index) in tableColumns"
                :key="index"
                :label="t.t_label"
                :width="t.t_slot === 't_date' ? '180' : ''"
                show-overflow-tooltip
            >
                <template slot-scope="{ row }">
                    <template v-if="t.t_slot && isEdit">
                        <el-input
                            v-if="t.t_slot === 't_ipt'"
                            v-model.number="row[t.t_prop]"
                            style="width: 80px"
                            type="number"
                        />

                        <template v-if="t.t_slot === 't_date'">
                            <el-date-picker
                                v-model="row[t.t_prop]"
                                type="date"
                                placeholder="选择日期"
                                v-if="!row[t.t_prop]"
                                style="width: 150px"
                            />
                            <template v-else>
                                {{ row[t.t_prop] }}
                            </template>
                        </template>
                    </template>
                    <template v-else>
                        {{ row[t.t_prop] }}
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { editSaveApi } from '@/api/cost/cost.js'
export default {
    props: {
        // 列表每一列配置项
        tableColumns: {
            type: Array,
            default: () => [],
        },
        // 列表上方标题
        tableTitle: {
            type: String,
            default: () => '',
        },
        // 是否显示费用承担发
        isCostBear: {
            type: Boolean,
            default: () => false,
        },
        // 是否是维修单
        isRepair: {
            type: Boolean,
            default: () => false,
        },
        // 列表数据源
        tableData: {
            type: Array,
            default: () => [],
        },
        // 01 或者 03 承担方
        constBear: {
            type: Number,
            default: () => 1,
        },
        // 合计金额
        totalPrice: {
            type: [Number, String],
            default: () => -1,
        },
    },

    data() {
        return {
            isEdit: false,
            batchNum: 0,
            // tableDataList: [],
        }
    },
    methods: {
        // 编辑按钮
        handleEdit() {
            this.isEdit = !this.isEdit
        },
        /** 调整天数 */
        iptChange(val) {
            const regex = /^-?\d+$/
            const isNum = regex.test(val)
            if (!isNum) {
                this.$message.error('请输入正整数和负整数或0！')
            }

            this.tableData.map((e) => {
                e.trimDay = val
            })
        },
        /** 保存按钮 */
        async handleSave() {
            const regex = /^-?\d+$/
            let isNum = false
            try {
                this.tableData.map((e) => {
                    if (!regex.test(e.trimDay)) {
                        isNum = true
                        throw new Error()
                    }
                })
            } catch {}

            if (isNum) {
                this.$message.error('请输入正整数和负整数或0！')
                return
            }

            let saveParams = []
            this.tableData.map((e) => {
                const item = {
                    agreementId: e.agreementId,
                    typeId: e.typeId,
                    trimDay: e.trimDay,
                    maId: e.maId || '',
                }

                saveParams.push(item)
            })

            console.log(saveParams, '保存时的参数---')

            const res = await editSaveApi(saveParams)

            if (res.code == 200) {
                this.$message.success('保存成功！')
                this.isEdit = false
                this.$emit('handelSaveSuccess')
            }
        },
    },
}
</script>

<style scoped lang="scss">
.table-title {
    position: relative;
    min-height: 48px;
    border: 1px solid #7e7e7e;
    background: linear-gradient(to right, #b4b3b3, #edebeb);
    align-items: center;
    justify-content: space-around;

    .cost-bear {
        display: flex;
        padding-left: 12px;
        font-weight: bold;
        color: red;

        span {
            width: 50%;
        }
    }

    .title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 4px;
    }

    .btn-item {
        text-align: right;
        padding-right: 12px;

        .el-button {
            padding: 6px 10px;
        }
    }

    // 维修单提示
    .repair-tip {
        position: absolute;
        left: 2px;
        bottom: 2px;
        color: red;
        font-size: 12px;
    }

    // 批量调整天数设置
    .batch-system-day {
        position: absolute;
        top: -50px;
        right: 30px;
        height: 36px;
        line-height: 36px;
    }
}
</style>