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"
        append-to-body
        class="apple"
        :close-on-click-modal="true" 
        :show-close="false" 
        custom-class="2xl:w3w5 xl:w4w5 lg:w-full bgNone"
        >
        <div class="data-dia23 mx-auto  rounded-3xl w-1/2" :class="{ ['myFull']: flow === 3 }">
            <!-- 2xl:w-3/5 xl:w-4/5 lg:w-full -->
            <div slot="title" class="dia-header rounded-3xl">
                <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>{{ successName }}</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="200px" >
                        <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="200px">
                        <el-col :span="12">
                            <el-form-item v-for="(val, key) in leftObj" :key="key" :label="key + ':'">
                                <div>{{ val }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <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 width="900px" class="data-dia23 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>
                </div>
                <div class="popBody w-full" 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> -->
        
    </el-dialog>





    
    
    
</template>

<script>
const obj = {
    // 'consumerClient': '/counter/list/manage/consumerClient',
    // 'currentAccount/openAccount': '/counter/list/manage/currentAccount',
    // 'currentAccount/deposit': '/counter/list/manage/currentAccount'
    'consumerClient': '个人客户信息建立',
    'corporateClient': '公司客户信息建立',
    'currentAccount/openAccount': '活期业务开户',
    'currentAccount/deposit': '活期业务存款',
    'currentAccount/withdrawal': '活期业务取款',
    'currentAccount/transferAccounts': '活期业务转账',
    'currentAccount/settle': '活期业务结清',
    'currentAccount/Cancell': '活期业务销户',
    'timeDeposit/openAccount': '整存整取开户',
    'timeDeposit/deposit': '整存整取存款',
    'timeDeposit/withdrawal': '整存整取取款',
    'timeDeposit/deposit': '整存整取存款',
    'business/openAccount': '公司业务开户',
    'servicesAccount/passwordChange': '密码修改',
    'servicesAccount/passwordLost': '密码挂失登记',
    'servicesAccount/relieveLost': '挂失解挂登记',
    
    'controlCash/cashTransferInto': '现金上缴',
    'spacial': '提交'
}
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: ''
        },
        moduleName: {
            type: String,
            default: 'spacial'
        }
    },
    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
            }
        },
        successName() {
            return obj[ this.moduleName ] + '成功'
        }
    }
}
</script>

<style lang="scss" scoped>
    .w3w5 {
        width: 60%;
    }
    .w4w5 {
        width: 80%;
    }
    /deep/.el-dialog {
        -webkit-box-shadow:0;
        box-shadow: 0 0 0 0!important;
        border: 0!important;
    }
    /deep/.el-form-item {
        label {
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #000000;
            letter-spacing: 0.21px;
            font-weight: 400;
        }
        .el-form-item__content{
            padding-left: 30px;
            text-align: left;
            font-family: PingFangSC-Semibold;
            font-size: 20px;
            color: #000000;
            letter-spacing: 0.24px;
            font-weight: 600;
        }
    }



    .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;
        background-color: white;
        z-index: 9999;
        .popBody {
            // width: 100%;
            min-height: 30vh;
            padding-top: 50px;
            padding-bottom: 20px;
            display: flex;
            align-items: center;
            /deep/ .el-form {
                height: 100%;
                
            }
        }
        .dia-header{
            height: 100%;
            // 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;
            }
        }
    }

    /deep/ .el-row {
        width: 100%;
        padding: 0 50px;
    }
    // /deep/.popbody {
    //     width: 100vw!important;
    //     height: 100%!important;
    //     background-color: red!important;;
    // }
    .popBtns {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        & > .btn {
            width: 180px;
        font-size: 18px;
        }
        
    }
    .myPopBtns {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        & > .btn {
            width: 180px;
            font-size: 18px;
        }
        
    }

    // /deep/.el-dialog__header, /deep/.el-dialog__body {
    //     padding: 0;
    //     border-radius: 16px;
    // }

    // /deep/.el-dialog {
    //     position: absolute;
    //     left: 50%;
    //     transform: translateX(-25%);
    // }
    /deep/.bgNone {
        background-color: transparent;
    }
    /deep/.myFull {
        width: 70%;
    }
</style>