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>