Avue dynamic表单实现form单选，修改及新增项
Avue dynamic表单实现form单选，修改及新增项
AvueDialogFormTableViewOption.js
/*
* @Description:银行账号
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-21 11:02:42
*/
export const BankAccountOption = (vueObj, formData) => {
return {
labelWidth: 100, //整体列标签宽度
submitText: "提交",
span: 24,
size: "small", //medium/small/mini
column: [
{
hide: true,
width: 200,
label: "账号",
prop: "AccountNo",
overHidden: true,
showWordLimit: true,
maxlength: 50,
rules: [
{
required: true,
message: "请输入账号",
trigger: "blur",
},
],
},
{
hide: true,
label: "开户行",
prop: "Bank",
overHidden: true,
showWordLimit: true,
maxlength: 100,
rules: [
{
required: true,
message: "请输入开户行",
trigger: "blur",
},
],
},
],
};
};
/*
* @Description: 地址
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-21 11:02:42
*/
export const AddressOption = (vueObj, formData) => {
return {
labelWidth: 100, //整体列标签宽度
submitText: "提交",
span: 24,
size: "small", //medium/small/mini
column: [
{
width: 80,
label: "收货人",
prop: "Consianee",
overHidden: true,
showWordLimit: true,
maxlength: 30,
rules: [
{
required: true,
message: "请输入收货人",
trigger: "blur",
},
],
},
{
label: "联系人电话",
prop: "ConsigneeContact",
type: "input",
overHidden: true,
showWordLimit: true,
maxlength: 100,
rules: [
{
required: true,
message: "请输入收货联系人",
trigger: "blur",
},
],
},
{
label: "收货地址",
prop: "ConsigneeAddress",
type: "textarea",
overHidden: true,
minRows: 2,
maxRows: 3,
showWordLimit: true,
maxlength: 200,
rules: [
{
required: true,
message: "请输入收货地址",
trigger: "blur",
},
],
},
],
};
};
/*
* @Description:银行账号
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-21 11:02:42
*/
export const BankAccountDynamicColumn = (vueObj, formData) => {
const column = BankAccountOption(vueObj).column;
column.forEach((ele) => {
ele.cell = false;
});
return column;
};
/*
* @Description: 地址
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-21 11:02:42
*/
export const AddressDynamicColumn = (vueObj, formData) => {
const column = AddressOption(vueObj).column;
column.forEach((ele) => {
ele.cell = false;
});
return column;
};
/*
* @Description:
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-21 11:02:42
*/
export const AvueDialogFormTableOption = (vueObj, formData) => {
return {
labelWidth: 100, //整体列标签宽度
submitText: "提交",
span: 24,
size: "small", //medium/small/mini
emptyBtn: false,
menuPosition: "right",
column: [
{
label: "银行账号",
prop: "dynamic",
type: "dynamic",
span: 24,
rules: [
{
required: true,
message: "请选择银行账号",
trigger: "change",
},
],
children: {
size: "mini",
type: "crud",
maxHeight: 140,
tip: false,
align: "left",
headerAlign: "left",
index: false, //索引不显示即可关闭新增删除按钮
indexWidth: 30,
showHeader: false,
border: false,
cell: false,
// selection: true,
// selectionWidth: 30,
delBtn: false,
rowAdd: (done) => {
vueObj.$message.success("新增回调");
vueObj.addBankAccount(done);
},
rowDel: (row, done) => {
vueObj.$message.success("删除回调" + JSON.stringify(row));
done();
},
selectionChange(selection) {
console.log(selection[selection.length - 1]);
},
column: [
{
label: "",
prop: "accountInfo",
align: "left",
overHidden: true,
},
{
label: "",
prop: "oprator",
fixed: "right",
align: "right",
width: 100,
},
],
},
},
{
label: "",
prop: "bankAccountAdd",
},
{
label: "收货地址",
prop: "address",
type: "textarea",
minRows: 2,
maxRows: 3,
readonly: true,
labelTip: "从下面列表中选择",
labelTipPlacement: "bottom-start",
rules: [
{
required: true,
message: "请选择收货地址",
trigger: "change",
},
],
},
{
label: "",
prop: "dynamic2",
type: "dynamic",
span: 24,
children: {
size: "mini",
type: "crud",
maxHeight: 140,
tip: false,
delBtn: false,
align: "left",
headerAlign: "left",
index: false, //索引不显示即可关闭新增删除按钮
indexWidth: 30,
showHeader: false,
border: false,
// selection: true,
// selectionWidth: 30,
// menu:true,
rowAdd: (done) => {
vueObj.$message.success("新增回调");
vueObj.addAddress(done);
},
rowDel: (row, done) => {
vueObj.$message.success("删除回调" + JSON.stringify(row));
done();
},
selectionChange(selection) {
console.log(selection[selection.length - 1]);
},
column: [
...AddressDynamicColumn(vueObj),
{
label: "",
prop: "oprator2",
fixed: "right",
align: "right",
width: 100,
},
],
},
},
{
label: "",
prop: "addressAdd",
},
],
};
};
AvueDialogFormTableView.vue
<template>
<div>
<div>
<el-button type="primary" @click="showDialog"> dynamic表单el-button>
div>
<el-dialog
title="dynamic表单"
v-dialogDrag
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="dialogFlag"
class="avue-dialog myclass my-dialog"
width="650px"
top="10px"
>
<avue-form
ref="dialogForm"
:option="avueDialogFormTableOption"
v-model="model"
@submit="handleSubmit"
>
<template slot-scope="{ item, value, label }" slot="bankAccountAdd">
<span>
<el-button
@click="addBankAccount2(item, value, label)"
size="mini"
type="buton"
>+ 新增el-button
>span
>
template>
<template slot-scope="{ item, value, label }" slot="addressAdd">
<span>
<el-button @click="addAddress2(item, value, label)" size="mini" type="buton"
>+ 新增el-button
>span
>
template>
<template slot-scope="{ row, index }" slot="accountInfo">
<div>
<el-radio
v-model="accountIndex"
:label="`${row.AccountNo} ${row.Bank}`"
@input="chooseBankAccount(row, index)"
>el-radio>
div>
template>
<template slot-scope="{ row, index }" slot="oprator">
<div>
<el-button @click="addBankAccount2(row, index)" size="mini" type="text"
>修改el-button
>
div>
template>
<template slot-scope="{ row }" slot="oprator2">
<div>
<el-button @click="chooseAddress(row)" size="mini" type="text"
>选择el-button
>
<el-button @click="addAddress2(row)" size="mini" type="text">修改el-button>
div>
template>
<template slot-scope="{ size }" slot="menuForm">
<el-button :size="size" @click="dialogFlag = false">关闭el-button>
template>
avue-form>
el-dialog>
div>
template>
<script>
import {
AvueDialogFormTableOption,
BankAccountOption,
AddressOption,
} from "@/options/AvueDialogFormTableViewOption.js";
export default {
name: "DialogForm",
components: {},
data() {
return {
dialogFlag: false,
previewImageUrl: "",
test: "test",
accountIndex: "AccountNo2 Bank2",
model: {
dynamic: [
{
AccountNo:
"AccountNo1 AccountNo1 AccountNo1 AccountNo1 AccountNo1 AccountNo1 AccountNo1 ",
Bank: "Bank1",
},
{
AccountNo: "AccountNo2",
Bank: "Bank2",
},
{
AccountNo: "AccountNo3",
Bank: "Bank3",
},
],
dynamic2: [
{
Consianee: "Consianee1",
ConsigneeContact: "ConsigneeContact1",
ConsigneeAddress: "ConsigneeAddress1",
},
{
Consianee: "Consianee2",
ConsigneeContact: "ConsigneeContact2",
ConsigneeAddress: "ConsigneeAddress2",
},
{
Consianee: "Consianee3",
ConsigneeContact: "ConsigneeContact3",
ConsigneeAddress: "ConsigneeAddress3",
},
],
},
};
},
computed: {
avueDialogFormTableOption() {
return AvueDialogFormTableOption(this, this.model); //表单项
},
},
watch: {},
mounted() {
// this.accountIndex = 0;
},
methods: {
showDialog() {
this.dialogFlag = true;
},
chooseBankAccount(row, index) {
console.log(row, index);
// this.accountIndex = index;
this.model.bankAccount = `${row.AccountNo} ${row.Bank}`;
},
chooseAddress(row) {
console.log(row);
this.model.address = `${row.Consianee} ${row.ConsigneeContact} ${row.ConsigneeAddress}`;
},
/**
* 新增银行账号
* @param {*} done
*/
addBankAccount2(row = null) {
this.$DialogForm.show({
title: "银行账号信息",
width: "550px",
top: "10px",
menuPosition: "right",
data: row ? row : {}, //初始数据
option: BankAccountOption(this), //表单项
form: "form",
callback: (res) => {
console.log(res.data);
this.$message.success("关闭等待框");
setTimeout(() => {
if (!row) {
this.model.dynamic.push(res.data);
}
res.done();
setTimeout(() => {
this.$message.success("关闭弹窗");
res.close();
}, 1000);
}, 1000);
},
beforeClose: (done) => {
this.$message.info("正在关闭弹窗");
done();
},
});
},
addAddress2(row = null) {
this.$DialogForm.show({
title: "收货地址信息",
width: "550px",
top: "10px",
menuPosition: "right",
data: row ? row : {}, //初始数据
option: AddressOption(this), //表单项
form: "form",
callback: (res) => {
console.log(res.data);
this.$message.success("关闭等待框");
setTimeout(() => {
this.model.dynamic2.push(res.data);
res.done();
setTimeout(() => {
this.$message.success("关闭弹窗");
res.close();
}, 1000);
}, 1000);
},
beforeClose: (done) => {
this.$message.info("正在关闭弹窗");
done();
},
});
},
handleSubmit(form, done) {
this.$message.success("3s后关闭");
console.log(form);
setTimeout(() => {
done();
}, 3000);
},
},
};
script>
<style lang="scss">
.myclass .el-dialog__body {
margin-bottom: 0px !important;
}
.my-dialog {
.el-col-sm-12 {
width: 100% !important;
}
}
style>
效果图
