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 style="z-index: 6000;" class="apple" :close-on-click-modal="true"
    :show-close="false" custom-class="w3w5 bgNone z6000">
    <div class="data-dia23 mx-auto w-9/12  rounded-3xl" :class="{ ['w-full']: 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>
      <!-- 需要授权时，父组件传进的flow为1 -->
      <div class="popBody" v-if="flow === 1">
        <h2 class="text-red-500 text-2xl">本业务需要授权</h2>
      </div>
      <!-- 不需要授权时，父组件传进的flow为4 -->
      <div class="popBody" v-else-if="flow === 4">
        <h2 class="text-red-500 text-2xl">提交后将不可更改，您确定要提交吗？</h2>
      </div>
      <!-- 上面说的需要授权的flow为1，点击确认后flow变为2，弹出授权柜员的账号和密码 -->
      <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.trim="disForm.name"></el-input>
          </el-form-item>
          <el-form-item label="授权柜员">
            <el-input type="password" disabled v-model.trim="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>
  </el-dialog>

</template>

<script>

// 这个obj用来识别父组件的业务名字，也就是父组件的moduleName,这样展示提交信息的框中就可以展示父组件的名字。这个组件被下列组件复用着。
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': '整存整取取款',
  'usefulPhrases/openAccount': '零存整取开户',
  'usefulPhrases/continueDeposit': '零存整取续存',
  'usefulPhrases/accoumtClosed': '零存整取销户',
  'callDeposits/openAccount': '通知存款开户',
  'callDeposits/accountClosed': '通知存款销户',
  'business/openAccount': '公司业务开户',
  'servicesAccount/passwordChange': '密码修改',
  'servicesAccount/passwordLost': '密码挂失登记',
  'servicesAccount/relieveLost': '挂失解挂登记',
  'business/transfer': '转账',
  'controlCash/cashTransferInto': '现金上缴',
  'business/deposit': '存款',
  'business/withdrawal': '取款',
  'onlineBank/openAccount': '网上银行开户',
  'foreignExchange/puchasing': '外汇业务购汇',
  'foreignExchange/settlement': '外汇业务结汇',
  'agent/waterRate': '代收水费',
  'agent/electricRate': '代收电费',
  'agent/telRate': '代收电话费',
  'spacial': '提交'
}

// nameMap对象用来展示表单中的值，因为有些值是数字，比如1代表男，2代表女，要展示给用户看。
const nameMap = {
  sex: {
    1: '男',
    2: '女'
  },
  idType: {
    82: '统一社会信用代码证',
    83: '身份证'
  },
  certificateType: {
    83: '身份证',
    115: '转账支票',
    116: '现金支票'
  },
  currency: {
    12: 'CNY人民币'
  },
  goldLogo: {
    13: '钞户',
    150: '现汇（参考牌价712.34）',
    151: '现钞（参考牌价712.34）',
  },
  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: '满页'
  },
  openOnlineBanking: {
    146: '是',
    147: '否'
  },
  openPhoneBanking: {
    148: '是',
    149: '否'
  },
  buyForeignPurpose: {
    187: '因私旅游',
    188: '境外留学',
    189: '公务及商务出国',
    190: '探亲',
    191: '境外就医',
    192: '海外购物',
    193: '非投资类保险',
    194: '咨询服务',
    195: '境内外汇储蓄存款',
    196: '购买境内外汇理财产品',
    197: '职工报酬和婚家款',
    198: '专有权利使用费和特许费',
    199: '投资收益',
    200: '运输',
    201: '其他服务',
    202: '其他经常转移',
  },
}
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 () {
    // 如果不需要授权，flow就是4，页面展示那个不需要授权的界面。
    if (!this.needAuth) {
      this.flow = 4
    }
    let num = 0;
    // 这个遍历可以让表单左右两边的展示的数量相差不大于1 
    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 {
          if (this.formName[key].indexOf('密码') !== -1) {
            this.leftObj[this.formName[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 {
          if (this.formName[key].indexOf('密码') !== -1) {
            this.rightObj[this.formName[key]] = '******'
          } else {
            this.rightObj[this.formName[key]] = this.showForm[key]
          }
        }
      }
      num++;
    }

    // 拿到一个随机在流水号
    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 {
      // 如果左边的项目数量比右边少，则左边加3个右边加1个
      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()
    if (this.leftObj['支取方式'] == 114) this.leftObj['支取方式'] = '印鉴'
    console.log("🚀 ~ file: index.vue ~ line 393 ~ created ~ this.rightObj", this.leftObj, this.rightObj, this.showForm, this.formName)
    // 流水号（研发自定义号码生成规则）、经办柜员（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) {
        // 这时调用父组件的提交逻辑，发送请求给后端。然后flow置3展示提交成功。
        this.$emit('submitIt')
        this.flow = 3

      } else if (this.flow === 4) {
        // 这时调用父组件的提交逻辑，发送请求给后端。然后flow置3展示提交成功。
        this.flow = 3
        this.$emit('submitIt')
      } else {
        // 在父组件将visible改为false,关闭当前弹框。
        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>
/deep/.w3w5 {
  transform: translateY(-100px);
  min-width: 1300px;
}

/deep/.w4w5 {
  min-width: 800px;
}

/deep/.el-dialog {
  -webkit-box-shadow: 0;
  box-shadow: 0 0 0 0 !important;
  border: 0 !important;
  // display: none;
}

/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: 0.5;
  background-color: rgba(51, 51, 51, 0.9);
}

.data-dia23 {
  // position: absolute;
  min-width: 40%;
  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: 90%;
}

/deep/.el-dialog {
  z-index: 9999 !important;
}

/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
}
</style>