FE_bankTeaching/src/components/dialog/index.vue

<template>
<!-- width="55%" -->
    <el-dialog
        style="margin-top:0vh"
        :visible="visible"
        class="2xl:w-9/12 xl:w-screen lg:w-full md:w-full h-auto 2xl:left-72"
        append-to-body
        :close-on-click-modal="true" 
        :show-close="false" 
        custom-class="data-dia">
        <div slot="title" class="dia-header">
            <div class="data-title" v-if="flow === 1 || flow === 2">提交</div>
            <div class="data-title" v-else>提交成功</div>
        </div>
        <div class="popBody" v-if="flow === 1">
            <h2 class="text-red-500 text-2xl">本业务需要授权</h2>
        </div>
        <div class="popBody" v-else-if="flow === 4">
            <h2 class="text-red-500 text-2xl">提交后将不可更改，您确认提交吗？</h2>
        </div>
        <div class="popBody" v-else-if="flow === 2">
            <el-form ref="form2" :model="disForm" label-width="80px">
                    <el-form-item label="授权柜员">
                    <el-input disabled v-model="disForm.name"></el-input>
                </el-form-item>
                <el-form-item label="授权柜员">
                    <el-input type="password" disabled v-model="disForm.pass"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="popBody" v-else>
            <el-row :gutter="20">
                <el-form label-width="100px">
                    <el-col :span="10"  :offset="1">
                        <el-form-item v-for="(val, key) in leftObj" :key="key" :label="key + ':'">
                            <div>{{ val }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"  :offset="1">
                        <el-form-item v-for="(val, key) in rightObj" :key="key" :label="key + ':'">
                            <div>{{ val }}</div>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div class="popBtns" v-if="flow === 1 || flow === 2 || flow === 4">
            <el-button class="close btn hover:bg-blue-100" @click="cancelIt">取 消</el-button>
            <el-button class="sure btn hover:bg-blue-700" type="primary" @click="sureIt">确 定</el-button>
        </div>
        <div class="myPopBtns" v-else>
            <el-button class="sure btn hover:bg-blue-700" type="primary" @click="sureIt">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        showForm: {
            type: Object,
            default: () => ({})
        },
        formName: {
            type: Object,
            default: () => ({})
        },
        needAuth: {
            type: Boolean,
            default: true
        },
        depositNumber: {
            type: String,
            default: ''
        }
    },
    created() {
        if(!this.needAuth) {
            this.flow = 4
        }
        let num = 0;
        for(const key in this.showForm) {
            if(!this.showForm[key]) {
                continue;
            }
            if(num%2 === 0) {
                this.leftObj[this.formName[key]] = this.showForm[key]
            }else {
                this.rightObj[this.formName[key]] = this.showForm[key]
            }
            num++;
        }
        // 客户号：A100000001一个字母跟9位数字随机生成不可重复、证件类型：身份证
        // 、证件号码、客户名称、联系电话、通讯地址、流水号：9位数字随机生成不可重
        // 复、经办柜员：6位数字固定使用、经办机构：7位数字固定使用、会计日期：默认
        // 示当前虚拟日期）点击确定按钮收起成功提示弹窗；
        const tmpFunc2 = () => {
            const $chars2 = '1234567890'
            const maxPos = $chars2.length;
            let str = '';
            for (let i = 0; i < 9; i++) {
                str += $chars2.charAt(Math.floor(Math.random() * maxPos));
            }
            return str;
        }
        console.log(num)
        if(num%2 === 1) {
            this.leftObj['流水号'] = tmpFunc2()
            this.leftObj['经办机构'] = '国税支行营业部'
            this.rightObj['经办柜员'] = '002110'
            if(this.depositNumber) {
                this.rightObj['定存编号'] = this.depositNumber
            }
        }else {
            this.leftObj['流水号'] = tmpFunc2()
            this.leftObj['经办机构'] = '国税支行营业部'
            this.rightObj['经办柜员'] = '002110'
            if(this.depositNumber) {
                this.leftObj['定存编号'] = this.depositNumber
            }
        }
        const tmpFunc = () => {
            const date = new Date()
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? '0' + m : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;  
            return y + '-' + m + '-' + d; 
        }
        this.rightObj['会计时间'] = tmpFunc()
        // 流水号（研发自定义号码生成规则）、经办柜员（002110）、经办机构：国税支行营业部、会计时间：展示操作当日日期
    },
    data() {
        return {
            flow: 1,
            disForm:{
                name:'002288',
                pass:'123456'
            },
            leftObj: {},
            rightObj: {}
        }
        
    },
    methods: {
        cancel() {
            this.visible = false;
        },
        sureIt() {
            if(this.flow === 1) {
                this.flow = 2
            }else if(this.flow === 2) {
                this.flow = 3
            }else if(this.flow === 4) {
                this.flow = 3
            }else {
                // 调用父函数
                // 然后关掉
                this.$emit('submitIt')
                this.cancelIt()
            }
        },
        cancelIt() {
            this.$emit('update:visible', false) // 那边写 :visible.sync="visible"
        }
    },
    computed: {
        showItem() {
            return (val, key) => {
                return key + ': ' + val
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    /deep/ .el-row {
        width: 100%;
    }
    /deep/.popbody {
        width: 100vw!important;
    }
    .myPopBtns {
        display: flex;
        justify-content: center;
        align-items: center;
        & > .btn {
            width: 180px;
        border-radius: 10px;
        font-size: 18px;
        }
        
    }
    // /deep/.el-dialog {
    //     position: absolute;
    //     left: 50%;
    //     transform: translateX(-25%);
    // }
</style>