FE_bankTeaching/src/components/dialog/index.vue

<template>
<!-- width="55%" -->
<!-- class="2xl:w-screen xl:w-screen lg:w-full md:w-full h-auto 2xl:left-72" -->

    
    <el-dialog
        
        :visible="visible"
        class="m-auto"
        append-to-body
        :close-on-click-modal="true" 
        :show-close="false" 
        style="border-radius: 50px;"
        custom-class="  data-dia23 w-2/4  ">
        <div slot="title" class="dia-header">
            <div class="data-title" v-if="flow === 1 || flow === 2">提示</div>
            <div class="data-title" v-else-if="flow === 4">提交</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" class="text-3xl">
                    <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 w-full" 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>
    <!-- <div class="bg-gray-50 test">
        <div width="900px" class="data-dia22 max-h-screen 2xl:-mt-20;" ref="dataDia" v-drag>
            <div class="dia-header">
                <div class="data-title" v-if="flow === 1 || flow === 2">授权</div>
                <div class="data-title" v-else>提交成功</div>
                <img class="close" src="@/assets/svg/close.svg" alt="" @click="cancelIt" />
            </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 w-full" 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>
        </div>

        <div class="masking"></div>
    </div> -->
    
</template>

<script>
const nameMap = {
    sex: {
        1: '男',
        2: '女'
    },
    idType: {
                82: '统一社会信用代码证',
                83: '身份证'
            },
    certificateType: {
                83: '身份证',
                115: '转账支票',
                116: '现金支票'
            },
    currency: {
        12: 'CNY人民币'
    },
    goldLogo: {
        13: '钞户'
    },
    accountQuality: {
        14: '个人结算户',
        101: '基本户',
        102: '一般户',
        103: '专用户',
        104: '临时户'
    },
    accountQualitysTwo: {
        14: '个人结算户',
        101: '基本户',
        102: '一般户',
        103: '专用户',
        104: '临时户'
    },
    accountQualitysThree: {
        14: '个人结算户',
        101: '基本户',
        102: '一般户',
        103: '专用户',
        104: '临时户'
    },
    voucherType: {
        15: 'IC卡',
        115: '转账支票',
        116: '现金支票',
        123: '存单',
        127: '银行'
    },
    accountType: {
        16: '一类户',
        17: '二类户',
        97: '结算户',
        98: '结算户',
        99: '委托保障金户',
        100: '资本临时户'
    },
    drawWay: {
        18: '密码',
        93: '现金',
        94: '转账',
        114: '印鉴',
        125: '部分支取',
        126: '全部支取并销户'
    },
    drawWayType: {
        133: '现金'
    },
    accountQualitysTwo: {
        14: '个人结算户',
        101: '基本户',
        102: '一般户',
        103: '专用户',
        104: '临时户'
    },
    voucherTypesTwo: {
        15: 'IC卡',
        115: '转账支票',
        116: '现金支票',
        123: '存单',
        127: '银行'
    },
    voucherTypesThree: {
        15: 'IC卡',
        115: '转账支票',
        116: '现金支票',
        123: '存单',
        127: '银行'
    },
    accountTypesTwo: {
        16: '一类户',
        17: '二类户',
        97: '结算户',
        98: '结算户',
        99: '委托保障金户',
        100: '资本临时户'
    },
    accountTypesThree: {
        16: '一类户',
        17: '二类户',
        97: '结算户',
        98: '结算户',
        99: '委托保障金户',
        100: '资本临时户'
    },
    
    drawWaysTwo: {
        18: '密码',
        93: '现金',
        94: '转账',
        114: '印鉴',
        125: '部分支取',
        126: '全部支取并销户'
    },
    drawWaysThree: {
        18: '密码',
        93: '现金',
        94: '转账',
        114: '印鉴',
        125: '部分支取',
        126: '全部支取并销户'
    },
    chargeWay: {
        13: '密码',
    },
    chargeWay: {
        13: '密码',
        135: '现金',
    },
    certificateDeposit: {
        92: '现金'
    },
    extendPeriod: {
        90: '不续存',
        91: '续存'
    },
    depositTerm: {
        84: '3个月',
        85: '6个月',
        86: '1年',
        87: '2年',
        88: '3年',
        89: '5年'
    },
    withdrawWay: {
        125: '部分支取',
        126: '全部支取并销户'
    },
    extendDepositTarget: {
        128: '不续存',
        129: '续存1年',
        130: '续存3年',
        131: '续存5年'
    },
    noticeType: {
        95: '1天',
        96: '7天'
    },
    depositType: {
        92: '现金'
    },
    accountManagement: {
        105: '工业存款',
        106: '商业存款',
        107: '外贸存款',
        108: '其他存款'
    },
    calculateWay: {
        109: '季度',
        110: '半年',
        111: '1年'
    },
    outAccountWay: {
        112: '按月',
        113: '满页'
    },
}
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) {
                if(nameMap[key]) {
                    this.leftObj[this.formName[key]] = nameMap[key][this.showForm[key]]
                }else {
                    this.leftObj[this.formName[key]] = this.showForm[key]
                }
            }else {
                if(nameMap[key]) {
                    this.rightObj[this.formName[key]] = nameMap[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;
        }
        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.$emit('submitIt')
                this.flow = 3
                
            }else if(this.flow === 4) {
                this.flow = 3
                this.$emit('submitIt')
            }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>
    .test {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        z-index: 9899999;
    }
    .masking{
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: .5;
        background-color: rgba(51,51,51,.9);
    }
    .data-dia23{
        position: absolute;
        z-index: 9999;
        .popBody {
            min-height: 30vh;
            display: flex;
            align-items: center;
            .el-form {
                min-width: 70%;
                height: 100%;
                font-size: 30px;
            }
        }
        .el-dialog__header{
            padding: 0;
            border-bottom: 0;
            border-radius: 16px;
            .dia-header{
                position: relative;
                .data-title{
                    width: 300px;
                    margin: 0 auto;
                    line-height: 72px;
                    text-align: center;
                    color: #fff;
                    font-size: 24px;
                    background: url(../../assets/img/dia-title.png) 0 0/cover no-repeat;
                }
                .close{
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    cursor: pointer;
                }
            }
        }
    }

    /deep/ .el-row {
        width: 100%;
    }
    // /deep/.popbody {
    //     width: 100vw!important;
    //     height: 100%!important;
    //     background-color: red!important;;
    // }
    .popBtns {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 200px;
        & > .btn {
            width: 180px;
        border-radius: 10px;
        font-size: 18px;
        }
        
    }
    .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>