vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)

<template>
  <div id="app">
    <el-form ref="form" :model="ruleForm" label-width="80px">
      <el-form-item>
        <el-cascader
          :options="optionsWithDisabled" @change="selChange" size="40" placeholder="请选择网上银行类别" filterable=true
        v-model="ruleForm.selValue" style="margin-left:-80px"></el-cascader>
      </el-form-item>
    </el-form>

    <p v-if="baseInfoTask">
      <baseInfo :bankCode="bankCode" :bankType="bankType" :loginWay="loginWay" :accountLabel="accountLabel"
                :pwdLabel="pwdLabel" v-on:changeEvent="toChange" v-on:loadEvent="toLoad" keep-alive></baseInfo>
    </p>

    <p v-if="captchaTask">
      <captcha :bankCode="bankCode" :bankType="bankType" :loginWay="loginWay" :taskNo="taskNo"
               v-on:changeEvent="toChange" keep-alive></captcha>
    </p>

    <p v-if="phoneNumTask">
      <phoneNum :bankCode="bankCode" :bankType="bankType" :loginWay="loginWay" :taskNo="taskNo"
                v-on:changeEvent="toChange" keep-alive></phoneNum>
    </p>

    <p v-if="dataSeen">
      <template>
        <el-table v-loading="loading" element-loading-text="正在拉取数据..." element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)" :data="result" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="TT1">
                  <span>{{ props.row.foreignBill }}</span>
                </el-form-item>
                <el-form-item label="TT2">
                  <span>{{ props.row.foreignLimit }}</span>
                </el-form-item>
                <el-form-item label="TT3">
                  <span>{{ props.row.consumeBill }}</span>
                </el-form-item>
                <el-form-item label="TT4">
                  <span>{{ props.row.paymentBill }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="LL1" prop="billMonth"></el-table-column>
          <el-table-column label="LL2" prop="billDay"></el-table-column>
          <el-table-column label="LL3" prop="paymentEndDay"></el-table-column>
          <el-table-column label="LL4" prop="totalDueAmount"></el-table-column>
          <el-table-column label="LL5" prop="minPaymentAmount"></el-table-column>
          <el-table-column label="LL6" prop="creditLimit"></el-table-column>
          <el-table-column label="LL7" prop="cashLimit"></el-table-column>
        </el-table>
      </template>
    </p>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<script>

  export default {
    computed: {},
    data() {
      return {
        baseInfoTask: false,
        captchaTask: false,
        phoneNumTask: false,
        dataSeen: false,
        result: [],
        loading: true,
        ruleForm: {
          selValue: ''
        },
        bankCode: '',
        bankType: '',
        loginWay: '',
        accountLabel: '',
        pwdLabel: '',
        sourceData: '',
        taskNo: '',
        nodeTasks: ['baseInfoTask', 'phoneNumTask', 'captchaTask', 'authTask'],
        optionsWithDisabled: [{
          value: 'bcm',
          label: '交通银行',
          disabled: false,
          children: [{
            value: 'credit',
            label: '信用卡',
            children: [{
              value: 'cardNum',
              label: '卡号'
            }, {
              value: 'email',
              label: '邮箱'
            }, {
              value: 'idCard',
              label: '身份证',
			  disabled: true,
            }, {
              value: 'phone',
              label: '手机号'
            }, {
              value: 'userName',
              label: '用户名',
			  disabled: true,
            }]
          }, {
            value: 'debit',
            label: '储蓄卡',
            disabled: true,
            children: [{
              value: 'cardNum',
              label: '卡号'
            }, {
              value: 'idCard',
              label: '身份证'
            }]
          }]
        }, {
          value: 'cmb',
          label: '招商银行',
		  disabled: true,
          children: [{
            value: 'credit',
            label: '信用卡',
            children: [{
              value: 'cardNum',
              label: '卡号'
            }, {
              value: 'email',
              label: '邮箱'
            }, {
              value: 'idCard',
              label: '身份证'
            }, {
              value: 'phone',
              label: '手机号'
            }]
          }, {
            value: 'debit',
            label: '储蓄卡',
            disabled: true,
            children: [{
              value: 'cardNum',
              label: '卡号'
            }, {
              value: 'email',
              label: '邮箱'
            }]
          }]
        }
    },
    methods: {
      toLoad: function (status) {
        this.dataSeen = true;
        this.loading = status;
      },
      toChange: function (nodeTask, result) {
        this.taskNo = result.tid;
        if (nodeTask === null) {
          this.loading = false
          this.result = result.data;
        } else {
          this.dataSeen = false;
          let tasks = this.nodeTasks;
          for (let i = 0; i < tasks.length; i++) {
            if (tasks[i] === nodeTask) {
              this[nodeTask] = true;
            } else {
              this[tasks[i]] = false;
            }
          }
        }
      },
      selChange: function () {
        let data = this.ruleForm.selValue;
        this.bankCode = data[0];
        this.bankType = data[1];
        this.loginWay = data[2];
        if (this.loginWay === 'cardNum') {
          this.accountLabel = '银行卡号'
          this.pwdLabel = '查询密码'
        } else if (this.loginWay === 'email') {
          this.accountLabel = '邮箱地址'
          this.pwdLabel = '登录密码'
        } else if (this.loginWay === 'phone') {
          this.accountLabel = '手机号码'
          this.pwdLabel = '查询密码'
        } else if (this.loginWay === 'userName') {
          this.accountLabel = '用户账号'
          this.pwdLabel = '登录密码'
        } else if (this.loginWay === 'idCard') {
          this.accountLabel = '身份证号'
          this.pwdLabel = '查询密码'
        } else {

        }
        this.baseInfoTask = true;
      }
    },
    components: {
      baseInfo: {
        template: '<section> <el-form :model="formData" :rules="rules" :inline="true">' +
        '<el-form-item :label="accountLabel" prop="cardNum" :error="errors.cardNum">' +
        '<el-input v-model="formData.cardNum" auto-complete="off" :placeholder="accountLabel" style="width:215px"></el-input>' +
        '</el-form-item> <br/>' +
        '<el-form-item :label="pwdLabel" prop="passwd" :error="errors.passwd">' +
        '<el-input type="password" v-model="formData.passwd" auto-complete="off" :placeholder="pwdLabel" style="width:215px"></el-input> </el-form-item> <br/>' +
        '<el-form-item>' +
        '<el-button type="primary" v-on:click="submitBaseInfoForm">提交</el-button></el-form-item></el-form>' +
        '</section>',
        props: ['bankCode', 'bankType', 'loginWay', 'accountLabel', 'pwdLabel'],
        data() {
          return {
            formData: {
              cardNum: '',
              passwd: ''
            },
            errors: {
              cardNum: '',
              passwd: ''
            },
            rules: {
              cardNum: [
                {required: true, message: '该字段不能为空',},
                {pattern: /.*/, message: '请输入格式正确的账号', trigger: 'blur'},
              ],
              passwd: [
                {required: true, message: '该字段不能为空', trigger: 'blur'},
                {pattern: /.*/, message: '请输入格式正确的密码', trigger: 'blur'},
              ],
            }
          }
        },
        methods: {
          submitBaseInfoForm() {
            let data = this.formData;
            let account = data.cardNum;
            let pwd = data.passwd;
            let req = {
              type: 'onlineBank',
              bankCode: this.bankCode,
              cardType: this.bankType,
              channel: 'official',
              loginWay: this.loginWay,
              account: account,
              nodeTask: 'baseInfoTask',
              pwd: pwd,
              sync: 'true'
            }
            this.$emit("loadEvent", true);
            this.$http.post('/task', req).then(function success(res) {
              this.result = res.body;
              let needTmp = null;
              if (this.result.status === 'pending') {
                needTmp = this.result.nodeTask;
              }else if(this.result.status === 'failed'){
                let code = this.result.failCode;
                let reason = this.result.reason;
                this.$message({
                  message: '状态码:'+code+';失败原因:'+reason,
                  type: 'warning'
                });
              }
              this.$emit("changeEvent", needTmp, this.result);
            }).catch(err => {
              this.$emit("loadEvent", false);
              this.$message.error('error:'+err);
            }).finally(() => {
              this.$emit("loadEvent", false);
            })
          }
        }
      },

      phoneNum: {
        template: '<section> <el-form :model="formData" :rules="rules" :inline="true">' +
        '<el-form-item label="手机验证码" prop="code" :error="errors.code">\n' +
        '        <el-col :span="12">\n' +
        '    <el-input v-model="formData.code" auto-complete="off" width="100px"></el-input>\n' +
        '    </el-col>\n' +
        '    <div class="el-form-item__error" style="color:green">验证码已发送, 请注意查看手机</div>\n' +
        '  </el-form-item><br/>' +
        '<el-form-item>' +
        '<el-button type="primary" v-on:click="submitPhoneNumForm">提交</el-button></el-form-item></el-form>' +
        '</section>',
        props: ['bankCode', 'bankType', 'loginWay', 'taskNo'],
        data() {
          return {
            formData: {
              code: '',
            },
            errors: {
              code: '',
            },
            rules: {
              code: [
                {required: true, message: '必须提供手机验证码',},
                {pattern: /.*/, message: '请输入手机验证码', trigger: 'blur'},
              ]
            }
          }
        },
        methods: {
          submitPhoneNumForm() {
            let req = {
              taskNo: this.taskNo,
              type: 'onlineBank',
              bankCode: this.bankCode,
              cardType: this.bankType,
              channel: 'official',
              loginWay: this.loginWay,
              msgCode: this.formData.code,
              nodeTask: 'phoneNumTask',
              sync: 'true'
            }
            this.$emit("loadEvent", true);
            this.$http.post('/task', req).then(function success(res) {
              this.result = res.body;
              let needTmp = null;
              if (this.result.status === 'pending') {
                needTmp = this.result.nodeTask;
              }else if(this.result.status === 'failed'){
                let code = this.result.failCode;
                let reason = this.result.reason;
                this.$message({
                  message: '状态码:'+code+';失败原因:'+reason,
                  type: 'warning'
                });
              }
              this.$emit("changeEvent", needTmp, this.result);
            }).catch(err => {
              this.$emit("loadEvent", false);
              this.$message.error('error:'+err);
            }).finally(() => {
              this.$emit("loadEvent", false);
            })
          }
        }
      },

      captcha: {
        template: '<section> <el-form :model="formData" :rules="rules" :inline="true">' +
        '<el-form-item label="图形验证码" prop="code" :error="errors.code">\n' +
        '        <el-col :span="12">\n' +
        '    <el-input v-model="formData.code" auto-complete="off" width="100px"></el-input>\n' +
        '    </el-col>\n' +
        '  </el-form-item><br/>' +
        '<el-form-item>' +
        '<el-button type="primary" v-on:click="submitCaptchaForm">提交</el-button></el-form-item></el-form>' +
        '</section>',
        props: ['bankCode', 'bankType', 'loginWay', 'taskNo'],
        data() {
          return {
            formData: {
              code: '',
            },
            errors: {
              code: '',
            },
            rules: {
              cardNum: [
                {required: true, message: '必须提供手机验证码',},
                {pattern: /.*/, message: '请输入手机验证码', trigger: 'blur'},
              ]
            }
          }
        },
        methods: {
          submitCaptchaForm() {
            let req = {
              taskNo: this.taskNo,
              type: 'onlineBank',
              bankCode: this.bankCode,
              cardType: this.bankType,
              channel: 'official',
              loginWay: this.loginWay,
              msgCode: this.formData.code,
              nodeTask: 'capachaTask',
              sync: 'true'
            }
            this.$emit("loadEvent", true);
            this.$http.post('/task', req).then(function success(res) {
              this.result = res.body;
              let needTmp = null;
              if (this.result.status === 'pending') {
                needTmp = this.result.nodeTask;
              }else if(this.result.status === 'failed'){
                let code = this.result.failCode;
                let reason = this.result.reason;
                this.$message({
                  message: '状态码:'+code+';失败原因:'+reason,
                  type: 'warning'
                });
              }
              this.$emit("changeEvent", needTmp, this.result);
            }).catch(err => {
              this.$emit("loadEvent", false);
              this.$message.error('error:'+err);
            }).finally(() => {
              this.$emit("loadEvent", false);
            })
          }
        }
      },
    }
  }
</script>