FE_bankTeaching/src/components/dialog/index.vue

<template>
    <el-dialog
        style="margin-top:10vh"
        :visible="visible"
        :modal="false"
        width="55%"
        :close-on-click-modal="false" 
        :show-close="false" 
        custom-class="data-dia">
        <div slot="title" class="dia-header">
            <div class="data-title">提交</div>
        </div>
        <div class="popBody" v-if="flow === 1">
            <h2>本业务需要授权</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? val: '未填写' }}</div>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div class="popBtns">
            <el-button class="close btn" @click="cancelIt">取 消</el-button>
            <el-button class="sure btn" 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
        }
    },
    created() {
        if(!this.needAuth) {
            this.flow = 3
        }
        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++;
        }
        this.leftObj['流水号'] = '2333333333333'
        this.leftObj['经办机构'] = '国税支行营业部'
        this.rightObj['经办柜员'] = '002110'
        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:'002009',
                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 {
                // 调用父函数
                // 然后关掉
                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;
    }
</style>