<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>
vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
猜你喜欢
转载自blog.csdn.net/wang1472jian1110/article/details/79023495
今日推荐
周排行