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/minicolumn: [{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/minicolumn: [{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/miniemptyBtn: 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

<!--* @Description: * @Version: 1.0* @Autor: Tj* @Date: 2023-03-17 09:40:03
-->
<template><div><div><el-button type="primary" @click="showDialog"> dynamic表单</el-button></div><el-dialogtitle="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-formref="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-radiov-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><!-- <div class="avue-dialog__footer"><el-button @click="dialogFlag = false" size="small" type="">关 闭</el-button></div> --></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>

效果图