jhprjv2/ruoyi-ui/src/views/project/costOutput/costContract.vue

<template>
    <div class="cost-contract" style="margin-top:4px;">
        <el-row>
            <el-col :span="8">
                <span style="color: #409eff;">
                    {{ costType == 11 ? '工程进度款支付明细' : '支付明细' }}
                </span>
            </el-col>
            <el-col :span="16" style="text-align: right;">
                <el-button type="success" @click="doAdd">增加期数</el-button>
            </el-col>
        </el-row>
        <div style="padding: 10px; border:solid 1px #ccc;border-radius: 4px;margin-top:4px;max-height: calc(100vh - 360px);overflow-y: auto;"
            class="scroll data-list">
            <el-tabs type="border-card" v-model="tabName">
                <el-tab-pane :label="dept.deptName" :name="'d' + dept.deptId" v-for="(dept, index) in depts"
                    :key="dept.deptId">
                    <el-row v-for="(it, idx) in dept['dataList' + costType]" :key="idx" class="datalist-row"
                        :class="'row-' + idx % 2 + (it.isErr ? ' is-error' : '')">
                        <el-col :span="2">
                            第{{ idx + 1 }}期
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="申请金额">
                                <el-input-number style="width: 130px;" :precision="4" @input="chkRowData(it)"
                                    v-model="it.money" :class="it.money > 0 ? '' : 'txt-error'" placeholder="申请金额">
                                </el-input-number>
                                <span class="sp-unit">万元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="申请日期">
                                <el-date-picker style="width: 140px;" v-model="it.date1" type="date" placeholder="申请日期"
                                    :class="it.date1 ? '' : ' txt-error'" @input="chkRowData(it)">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="支付金额">
                                <el-input-number style="width: 130px;" :precision="4" @input="chkRowData(it)"
                                    v-model="it.money2" placeholder="支付金额">
                                </el-input-number>
                                <span class="sp-unit">万元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="挂账金额" :class="it.money3 < 0 ? 'txt-error' : 'is-ok'">
                                <el-input-number style="width: 130px;" :precision="4" v-model="it.money3" disabled
                                    placeholder="挂账金额">
                                </el-input-number>
                                <span class="sp-unit">万元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-button style="margin-left: 12px;" size="mini" @click="doDelete(it, idx,dept)">删除</el-button>
                        </el-col>
                    </el-row>
                    <div>&nbsp;</div>
                </el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            prj: null,
            costType: 11,
            dataList: [],
            depts: [],
            tabName: ""
        };
    },

    mounted() {

    },

    methods: {
        doDelete(row, idx,dept) {
            this.$confirm('确定删除此行数据??', '提示', { type: 'warning' }).then(() => {
                dept['dataList'+this.costType].splice(idx, 1);
            });
        },
        chkRowData(row) {
            row.money3 = row.money * 1 - row.money2 * 1;
            row.isErr = (row.money * 1 + row.money2 * 1) == 0 || !row.date1;
            this.$emit("change", this.depts);
        },
        doAdd() {
            let deptId = this.tabName.substr(1);
            let tmps = this.depts.filter(d => d.deptId == deptId);
            if (tmps.length > 0) {
                tmps[0]['dataList' + this.costType].push({
                    costType: this.costType,
                    money: '',
                    money2: '',
                    money3: '',
                    projectId: this.prj.id,
                    deptId: +deptId,
                    date1: undefined,
                    isErr: true
                });
            }

        },
        init(d, prj, costType, depts) {
            this.costType = costType;
            this.prj = prj;
            this.depts = depts.map(it => {
                let dataList = d.filter(item => item.deptId == it.deptId).map(item => {
                    let obj = { ...item }
                    obj.isErr = false;
                    return obj;
                });
                it["dataList" + this.costType] = dataList;
                return it;
            });
            if (depts.length > 0) {
                setTimeout(() => {
                    this.tabName = "d" + depts[0].deptId;
                }, 400);
            }

        },
        getDataList(){
            let tmps=[];
            this.depts.forEach(it=>{
                let datas=it["dataList"+this.costType];
                datas.forEach(item=>{
                    tmps.push(item);
                })
            });
            return tmps;
        },
        checkActiveTabData() {
            //检查当前激活tab
            let deptId = this.tabName.substr(1);
            let tmps = this.depts.filter(d => d.deptId == deptId);
            if (tmps.length > 0) {
                let datas = tmps[0]["dataList" + this.costType];
                return this.checkDataList(datas);
            }
            return true;
        },
        checkDataList(datas){
            let flag1 = datas.filter(d => d.isErr).length == 0;
                if (!flag1) {
                    this.$message.error("请填写数据!");
                    return false;
                }
                flag1 = datas.filter(d => d.money * 1 < 0).length == 0;
                if (!flag1) {
                    this.$message.error("金额不能为负数!");
                    return false;
                }
                flag1 = datas.filter(d => d.money3 * 1 < 0).length == 0;
                if (!flag1) {
                    this.$message.error("挂账金额不能为负数!");
                    return false;
                }
                return true;
        },
        checkData() {
            if (!this.checkActiveTabData()) {
                return false;
            }
            for(let i=0;i<this.depts.length;i++){
                let dept=this.depts[i];
                if('d'+dept.deptId!=this.tabName){
                    let datas = dept["dataList" + this.costType];
                    if(!this.checkDataList(datas)){
                        this.tabName='d'+dept.deptId;
                        return false;
                    }
                }
            }            
            return true;
        }
    },
};
</script>
<style lang="scss">
.cost-contract {

    .data-list {
        .datalist-row {
            * {
                font-size: 12px;
            }
        }

        .el-row {

            line-height: 36px;
            padding: 0px 10px;

            &.row-1 {
                background-color: #eeeeee;
            }

            .el-form-item {
                margin-bottom: 2px !important;
                margin-top: 2px !important;

                .el-input__inner {
                    height: 28px;
                    line-height: 28px;
                }
            }

            &.is-error {
                .txt-error {
                    .el-input__inner {
                        border: solid 1px red;
                    }
                }
            }


        }
    }
}
</style>