jhprjv2/ruoyi-ui/src/views/project/projectCommittee/projectCommitteeDrawer.vue

<template>
    <div class="project-committee-drawer">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="40%" style="padding-left: 20px">
            <template slot="title">
                <div>工委会管理</div>
            </template>
            <el-form ref="form" label-width="120px">
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(dict, idx) in dict.type.project_working_type" :key="dict.value"
                        :label="dict.label" :name="'' + dict.value">
                        <el-row v-for="(dataItem, index) in datas[idx]" :key="idx + '-' + index">
                            <el-col :span="4">
                                <el-form-item :label="dataItem.committeeName"></el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="成本名称">
                                    <el-input v-model="dataItem.costName" placeholder="请输成本名称" maxlength="200" :class="checkRow(dataItem,1)"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="申报金额">
                                    <el-input v-model="dataItem.money" placeholder="请输申报金额" :class="checkRow(dataItem,2)"
                                        @blur="v => formatAmount(dataItem)" maxlength="200">
                                        <template slot="append">万元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
               
            </el-form>
            <div class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="doCancel">取 消</el-button>
                </div>
        </el-drawer>
    </div>
</template>
<script>
import { listProjectCommittee, getProjectCommittee, delProjectCommittee, addProjectCommittee, updateProjectCommittee,addProjectCommitteeList } from "@/api/project/projectCommittee";
import { listCommittee, getCommittee, delCommittee, addCommittee, updateCommittee } from "@/api/base/committee";
import axios from 'axios'
export default {

    dicts: ['project_working_type'],
    data() {
        return {
            isOpen: false,
            projectId: 0,
            prjInfo: null,
            activeName: '1',
            datas: [],
        }
    },
    methods: {
        checkRow(datas,type){
            let costName=(datas.costName||"").trim();
            let money=((datas.money||"")+"").trim();
            let tmp=costName+money;
            return (tmp.length>0 && (costName.length==0 || money.length==0) && (type==1?costName.length==0:money.length==0)) ?"is-error":"";
        },
        submitForm(){
            let dicts=this.dict.type.project_working_type
            let tmps=dicts.filter(d=>d.value==this.activeName);
            if(tmps.length==0){ return;}
            let tmp=tmps[0];
            let idx=dicts.indexOf(tmp);
            if(idx==-1){return;}
            if(!this.checkDatas(idx)){
                this.$modal.msgError("请输入数据!");
                return;
            }
            for(let i=0;i<dicts.length;i++){
                if(i!=idx){
                    if(!this.checkDatas(i)){
                        this.activeName=dicts[i].value;
                        this.$modal.msgError("请输入数据!");
                        return;
                    }       
                }
            }
            let postData=[];
            this.datas.forEach(it=>{
                it.forEach(item=>{
                    item.money*=1;
                    item.applicationDate=this.$dt(item.committeeName)
                    postData.push(item);
                })
            });
            addProjectCommitteeList(postData).then(d=>{
                if(d.code==200){
                    this.$modal.msgSuccess("保存成功!");
                    this.loadData();
                }else{
                    this.$modal.msgError("保存失败！!");                    
                }
            });            
        },
        checkDatas(idx){
            let tmps=this.datas[idx];
            let isPass=true;
            tmps.forEach(d=>{
                let data1=d.costName||"";
                let data2=d.money||""+"";
                let data3=data1+data2;
                if(data3.length>0 && (data1.length==0 || data2.length==0)){
                    isPass=false;
                }
            });
            return isPass;
        },
        doCancel(){
            this.isOpen=false;
        },
        formatAmount(it) {
            let value=it.money;
            // 使用正则表达式来格式化金额输入
            it.money = value.replace(/[^\d.]/g, '') // 清除非数字和点
                .replace(/\.{2,}/g, '.') // 只保留第一个点
                .replace(/^(\d+)\./g, '$1.') // 保证第一个数字前有一个点
                .replace('.', '$#$')
                .replace(/\./g, '')
                .replace('$#$', '.')
                .replace(/^(\d+)$/, '$1.00') // 保证输入为一个整数时，末尾有两个零
                .replace(/^0+([1-9])/, '$1') // 保证输入的金额不以零开头
                .replace(/^(\d+\.\d{2})./, '$1'); // 保留两位小数
        },
        handleClick(tab, event) {
        },
        show(row) {
            this.prjInfo = row;
            this.isOpen = true;
            this.activeName=this.dict.type.project_working_type.length>0?this.dict.type.project_working_type[0].value:"";
            this.loadData();
        },
        loadData() {
            let ajaxs = [
                listProjectCommittee({ projectId: this.prjInfo.id, pageNum: 1, pageSize: 1000 }),
                listCommittee({ pageNum: 1, pageSize: 1000 })
            ]
            axios.all(ajaxs).then(res => {
                this.makeData(res[0].rows || [], res[1].rows || []);
            });
        },
        makeData(data, commits) {
            let list = [];
            this.dict.type.project_working_type.forEach(dic => {
                let tmps = [];
                commits.forEach(c => {
                    var find = data.filter(d => d.committeeId == c.id && d.workingType == dic.value);
                    if (find.length > 0) {
                        let f = find[0]
                        f.committeeName = c.name,
                            tmps.push(f);
                    } else {
                        tmps.push({
                            committeeId: c.id,
                            committeeName: c.name,
                            projectId: this.prjInfo.id,
                            workingType: dic.value,
                            costName: '',
                            money: null
                        })
                    }
                });
                list.push(tmps);
            })
            this.datas = list;
        }

    }
}
</script>
<style lang="scss">
.project-committee-drawer {
    .el-drawer__header {
        margin-bottom: 0px;
    }

    .el-drawer__body {
        padding: 12px 24px 60px;
        position: relative;
        .el-row{
            .el-input.is-error{  
            .el-input__inner{
                border:solid 1px red;     
            }
            }
        }
    }


    .dialog-footer{
        position: fixed;
        bottom: 0px;
        line-height: 60px;
        background: #fff;
        width: 100%;
        text-align: left !important;
        box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
        margin-left: -24px;
        padding-left: 20%;
    }
    .el-drawer {
        min-width: 800px;
    }

}
</style>