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: 0px; border:solid 1px #ccc;border-radius: 4px;margin-top:4px;max-height: calc(100vh - 360px);overflow-y: auto;" class="scroll data-list">
            <el-row v-for="(it, idx) in dataList" :key="idx" :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'">
                        </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 size="mini" @click="doDelete(it,idx)">删除</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

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

    mounted() {

    },

    methods: {
        doDelete(row,idx){
            this.$confirm('确定删除此行数据??', '提示', { type: 'warning' }).then(()=>{
                this.dataList.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.dataList);
        },
        doAdd() {
            this.dataList.push({
                costType:this.costType,
                money: '',
                money2: '',
                money3: '',
                projectId:this.prj.id,
                date1: undefined,
                isErr:true
            });
        },
        init(d,prj,costType){
            this.costType=costType;
            this.prj=prj;
            if(d.length==0){
                this.doAdd();
            }else{                
                this.dataList=d.map(it=>{
                    let obj={...it}                    
                    obj.isErr=false;
                    return obj;
                });
            }
        },
        checkData(){
           let flag1= this.dataList.filter(d=>d.isErr).length==0;
           if(!flag1){
            this.$message.error("请填写数据!");
            return false;
           }
           flag1=this.dataList.filter(d=>d.money*1<0).length==0;
           if(!flag1){
            this.$message.error("金额不能为负数!");
            return false;
           }
           flag1=this.dataList.filter(d=>d.money3*1<0).length==0;
           if(!flag1){
            this.$message.error("挂账金额不能为负数!");
            return false;
           }
           return true;
        }
    },
};
</script>
<style lang="scss">
.cost-contract{
.data-list{
    .el-row{
        line-height: 36px;
        padding:0px 10px;
        &.row-1{
            background-color: #eeeeee;
        }
        .el-form-item {
            margin-bottom: 2px !important;
            margin-top:2px !important;
        }
        &.is-error{
            .txt-error{
                .el-input__inner{
                    border:solid 1px red;
                }
            }            
        }
        

    }
}
}
</style>