vue element 动态增加表单并进行表单验证
<template>
<div>
<el-dialog
title="添加银联账号"
:visible="addYlyaccountShowDialog"
top="6vh"
@close="handleClose"
:before-close="beforeClose"
width="70%"
>
<el-form ref="form" :model="addForm" label-width="180px">
<div class="moreRules">
<div style="margin: 0px 0px 20px 20px">
<el-button @click="addUser" size="medium" type="primary"
>增加</el-button
>
<el-button @click="initData" size="medium" type="danger"
>清空</el-button
>
</div>
<div
class="moreRulesIn"
v-for="(item, index) in "
:key=""
>
<el-row>
<el-col :span="8">
<el-form-item
label="银联主账号ID"
:prop="'cloudAccounts.' + index + '.accountTenantId'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联主账号ID"
type="number"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联主账号"
:prop="'cloudAccounts.' + index + '.primaryAccountUsername'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联主账号"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联主账号密码"
:prop="'cloudAccounts.' + index + '.primaryAccountPassword'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联主账号密码"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联主账号SecretId"
:prop="'cloudAccounts.' + index + '.primarySecretId'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联主账号密钥ID"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联主账号SecretKey"
:prop="'cloudAccounts.' + index + '.primarySecretKey'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联主账号密钥KEY"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联子账号"
:prop="'cloudAccounts.' + index + '.childAccountUsername'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联子账号"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联子账号密码"
:prop="'cloudAccounts.' + index + '.childAccountPassword'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联子账号密码"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联子账号SecretId"
:prop="'cloudAccounts.' + index + '.childSecretId'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联子账号密钥ID"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="银联子账号SecretKey"
:prop="'cloudAccounts.' + index + '.childSecretKey'"
:rules="[{ required: true, message: '请完善信息' }]"
>
<el-input
=""
placeholder="请输入银联子账号密钥KEY"
class="el-select_box"
maxlength="40"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24" align="center">
<el-button
@click="deleteRules(item, index)"
icon="el-icon-delete"
>删除</el-button
>
</el-col>
</el-row>
<el-divider></el-divider>
</div>
</div>
</el-form>
<template v-slot:footer>
<el-button style="" type="primary" @click="onSubmit">确定</el-button>
<el-button @click="handleClose">取消</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { reqBatchSaveOrUpdateCloudAccounts } from "@/api/account";
export default {
name: "YSYPRODUCTAddYlyaccount",
props: {
addYlyaccountShowDialog: {
type: Boolean,
},
},
data() {
return {
addForm: {
// content: "",
cloudAccounts: [
{
accountTenantId: "",
primaryAccountUsername: "",
primaryAccountPassword: "",
primarySecretId: "",
primarySecretKey: "",
childAccountUsername: "",
childAccountPassword: "",
childSecretId: "",
childSecretKey: "",
type: "unionpay",
},
],
},
};
},
mounted() {},
methods: {
//清空
initData() {
this.addForm.cloudAccounts = [];
},
//添加
addUser() {
this.addForm.cloudAccounts.push({
accountTenantId: "",
primaryAccountUsername: "",
primaryAccountPassword: "",
primarySecretId: "",
primarySecretKey: "",
childAccountUsername: "",
childAccountPassword: "",
childSecretId: "",
childSecretKey: "",
type: "unionpay",
});
},
//单项删除
deleteRules(item, index) {
this.index = this.addForm.cloudAccounts.indexOf(item);
if (index !== -1) {
this.addForm.cloudAccounts.splice(index, 1);
}
},
//确认
async onSubmit() {
console.log(this.addForm.cloudAccounts);
this.$refs.form.validate(async (vaild) => {
if (!vaild) return;
const res = await reqBatchSaveOrUpdateCloudAccounts(this.addForm);
console.log(res);
if (res.code === 200) {
this.$message.success("新增银联账号成功");
this.handleClose();
this.$emit("getlistPageCloudUnionPayAccounts");
}
});
},
// 关闭弹层
handleClose() {
this.$emit("update:addYlyaccountShowDialog", false); // 关闭弹窗
this.$refs.form.resetFields(); // 重置校验表单
this.addForm.cloudAccounts = [
{
accountTenantId: "",
primaryAccountUsername: "",
primaryAccountPassword: "",
primarySecretId: "",
primarySecretKey: "",
childAccountUsername: "",
childAccountPassword: "",
childSecretId: "",
childSecretKey: "",
type: "unionpay",
},
];
},
// 关闭弹层
async beforeClose(done) {
const confirmResult = await this.$confirm(
"内容还未保存，此操作会导致信息丢失！是否继续？",
"温馨提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).catch((err) => err);
if (confirmResult === "cancel") return;
done();
},
},
};
</script>
<style lang="scss" scoped>
</style>