如何在同一个表单中调取不同内容?
方法一:通过设置多个表单组件,对组件进行控制,进而控制表单内容
步骤1:在从同一个表单文件中引入不同组件,并将其作为表单形式写入template中
如下所示
<el-dialog
title="生产计划>>智能排程管理>>人工排程管理>>可用服务单元"
:visible.sync="dialogTablebVisible"
:dialogTabletestaVisible="true"
:append-to-body="true"
>
<artificial-scheldul-dialog
:craftRow="nowRow"
:xiaoxueRow="nowRow"
:schelduleRow="row"
:closeDialog="closeDialog"
:putRow="putRow"
:dialogTabletestaVisible="dialogTabletestaVisible"
></artificial-scheldul-dialog>
</el-dialog>
<el-dialog
title="生产计划>>智能排程管理>>人工排程管理>>所需物料"
:visible.sync="dialogTableVisible"
:dialogTabletestbVisible="true"
:append-to-body="true"
>
<artificial-scheldulb-dialog
:craftRow="nowRow"
:xiaoxueRow="nowRow"
:schelduleRow="row"
:closeDialog="closeDialog"
:putRow="putRow"
:dialogTabletestbVisible="dialogTabletestbVisible"
></artificial-scheldulb-dialog>
</el-dialog>
<el-dialog
title="生产计划>>智能排程管理>>人工排程管理>>可用班组"
:visible.sync="dialogTableaVisible"
:dialogTabletestVisible="true"
:append-to-body="true"
>
<artificial-scheldula-dialog
:craftRow="nowRow"
:dialogTabletestVisible="dialogTabletestVisible"
:schelduleRow="row"
:closeDialog="closeDialog"
:putRow="putRow"
></artificial-scheldula-dialog>
</el-dialog>
步骤2:在标签中定义变量,控制表单的显示以及调取的内容,在此处对dialogTableVisible、dialogTabletestVisible、dialogTabletestaVisible定义,控制表单显示内容
craftRow、closeDialog、putRow、schelduleRow 用来传输数据,并用prop在引入文件中定义;
步骤3:在componen中定义组件,在data中定义用到的变量;
步骤4:设置表单按钮
showDialog(scope) {
this.dialogTablebVisible = true;
this.dialogTabletestaVisible = true;
//向表格内传入当前行参数
this.nowRow = scope.row;
console.log(this.nowRow);
},
xiaoxueshowDialog(scope) {
this.dialogTableaVisible = true;
//向表格内传入当前行参数
this.dialogTabletestVisible = true;
let xiaoxue = {
operateName: this.tableData[0].tranSecond,
dialogTabletestVisible: true,
};
this.nowRow = xiaoxue;
// console.log(this.nowRow);
},
bianJi(scope) {
this.dialogTableVisible = true;
this.dialogTabletestbVisible = true;
//向表格内传入当前行参数
this.nowRow = scope.row;
},
//关闭排程操作窗口
closeDialog(closeInfo) {
this.dialogTableVisible = closeInfo;
},
步骤5:在表单文件中,用elment或avue方法制作表格,并对其有限制条件: v-if,prop将父组件数据传输;并根据需求设置功能按钮
<template slot="expand" slot-scope="{ row }">
<craft-info :row="row"></craft-info>
</template>
<!-- <el-table-column type="expand">
</el-table-column> -->
<el-table
:data="test"
border
type = "expand"
stripe
style="width: calc(100% - 60px); margin-left: 60px"
:cell-style="rowStyle"
>
<el-table-column
prop="taskCode"
type = "expand"
align="center"
label=" "
min-width="15%"
>
</el-table-column>
<el-table-column
v-if="dialogTabletestVisible"
prop="taskCode"
align="center"
label="班组名称"
min-width="15%"
></el-table-column>
<el-table-column
v-if="dialogTabletestVisible"
prop="operateName"
align="center"
label="负责人编号"
min-width="12%"
>
</el-table-column>
<el-table-column
v-if="dialogTabletestVisible"
prop="taskNum"
align="center"
label="负责人姓名"
min-width="10%"
></el-table-column>
<el-table-column
prop="operateCode"
align="center"
label="服务单元编码"
min-width="16%"
>
</el-table-column>
方法二:只调用一次表单,通过给avue传入不同的option改变表单的内容
步骤1:只调用一次表单,并定义传参,按钮
<el-dialog
:title="testtittl"
:visible.sync="dialogTablebVisible"
:dialogTabletestaVisible="true"
@open="testnewoption"
:append-to-body="true"
@close="clearDialog"
>
<artificial-scheldul-dialog
:craftRow="nowRow"
:xiaoxueRow="nowRow"
:schelduleRow="row"
:closeDialog="closeDialog"
:xxueOption="option"
:putRow="putRow"
:tableData="tableData"
:dialogTabletestaVisible="dialogTabletestaVisible"
ref="refundFormData"
></artificial-scheldul-dialog>
</el-dialog>
import { tableOption } from "@/views/m3-scheduling/schedulingInfoManage/scheldulManagement/artScheldul.js";
步骤2:定义不同的option,通过不同按钮控制option传入的内容
xueOption: {
column: [
{
label: "服务单元编码",
prop: "operateCode",
value: "small",
},
{
label: "服务单元名称",
prop: "operateName",
value: "small",
},
],
editBtn: false,
},
axueOption: {
column: [
{
label: "班组名称",
prop: "craftNum",
value: "small",
},
],
},
bxueOption: {
column: [
{
label: "物料编码",
prop: "wsId",
value: "small",
},
],
},
步骤3: 不同按钮定义:
showDialog(scope) {
this.testtittl = "生产计划>>智能排程管理>>人工排程管理>>可用服务单元";
this.option = this.xueOption;
console.log(this, "yhfgyfghbvn");
this.dialogTabletestaVisible = true;
// if (this.$refs.refundFormData) {
// // this.$refs.refundFormData.newfields();
// // this.$refs.refundFormData.option = this.xueOption;
// // this.$refs.refundFormData.test = this.tableData;
// }
//向表格内传入当前行参数
this.nowRow = scope.row;
this.dialogTablebVisible = true;
},
ashowDialog(scope) {
this.testtittl = "生产计划>>智能排程管理>>人工排程管理>>可用班组";
this.option = this.axueOption;
this.dialogTablebVisible = true;
this.tableData = this.atableData;
console.log(this, "yhfgyfghbvn");
if (this.$refs.refundFormData) {
// this.$refs.refundFormData.newfields();
// this.$refs.refundFormData.option = this.axueOption
// this.$refs.refundFormData.test = this.atableData;
}
//向表格内传入当前行参数
this.nowRow = scope.row;
this.dialogTabletestaVisible = true;
},
bshowDialog(scope) {
this.testtittl = "生产计划>>智能排程管理>>人工排程管理>>所需物料";
this.option = this.bxueOption;
console.log(this, "yhfgyfghbvn");
// if (this.$refs.refundFormData) {
// // this.$refs.refundFormData.newfields();
// // this.$refs.refundFormData.option = this.bxueOption
// }
//向表格内传入当前行参数
this.nowRow = scope.row;
this.dialogTablebVisible = true;
this.dialogTabletestaVisible = true;
},
步骤4:在表单文件中设计avue,传参要检测完全,以及prop
<avue-crud
ref="crud"
:data="test"
:option="option"
>
<!-- <template #expand="{ row }"> -->
<!-- <template #search-menu="{row,size}">
<el-button :size="size"
@click="searchSubmit(row)">高级查询</el-button>
</template> -->
<template slot-scope="{row,index}" slot="menu">
<el-button type="success"
icon="el-icon-delete"
size="small"
@click="$refs.crud.rowView(row,index)">查看</el-button>
<el-button type="primary"
@click="handleReload"
icon="el-icon-sort">排程</el-button>
<el-button type="primary"
@click="testtest"
icon="el-icon-sort">排程1</el-button>
</template>
<template slot="expand" slot-scope="{ row }">
<craft-info :row="row"></craft-info>
</template>
<!-- <template slot-scope="scope" slot="mtNumber">
<div>
{{ takeImgName(scope.row.mtNumber) }}
</div>
</template> -->
<!--
<el-form-item>
<el-button type="primary" @click="prconsumablestype">耗材分类改</el-button>
</el-form-item>
<prconsumablestype v-if="prconsumablestypeVisible" ref="prconsumablestypeRef"></prconsumablestype> -->
</avue-crud>
方法一是比较清晰的方法,当然最简单的办法就是引入多个表单文件,但是如果引入表单中形式差别不大,引入多个表单文件的方法就显得繁琐了。因此可以控制同一个表单内容变化,此处是对多个表单标签进行控制,和多级联动类似;
方法二是在方法一的基础上更加简化,只控制option的变化,实现起来确实很精巧,但是在参数传递部分还是很容易出现问题;实际操作中遇到虽然表单内容变化了,但每次都慢一拍,在点击关闭后,点击其他按钮还能看到一致的内容,再次点击关闭,数据更新;因此解决办法是在关闭表单时,数据更新和再次调用是同时发生的,或者是将数据全部清除,重新调用函数,显示数据。