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 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="'type' + 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>
                <div class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="doCancel">取 消</el-button>
                </div>
            </el-form>

        </el-drawer>
    </div>
</template>
<script>
import { listProjectCommittee, getProjectCommittee, delProjectCommittee, addProjectCommittee, updateProjectCommittee } 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: 'type1',
            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(){
            
        },
        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.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;
        .el-row{
            .el-input.is-error{                
                border:solid 1px red;     
                border-radius: 4px;                    
            }
        }
    }

    .el-drawer {
        min-width: 800px;
    }

}
</style>