需求:在一个主页面A.vue上点击按钮时弹出一个窗口,该窗口的定义在B.vue,比如修改,需要从A.vue传参到B.vue,修改完成后,刷新A.vue.

实现

页面定义,有2个文件,在index.vue上有个【修改】按钮,点击弹出testDialog.vue定义的窗口,如下
在这里插入图片描述
testDialog.vue

<template>
  <!-- 添加或修改业务对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false" append-to-body>
    <el-form ref="bizform" :model="bizform" label-width="80px">
      <el-form-item label="业务名称" prop="bizName">
        <el-input v-model="bizform.bizName" placeholder="请输入业务名称"/>
      </el-form-item>
      <el-form-item label="业务编码" prop="bizCode">
        <el-input v-model="bizform.bizCode" placeholder="请输入编码名称"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {getById, addBizDefine, updateBizDefine} from "@/api/funds/routecenter/bizdefine";

    export default {
        name: "testDialog",
        data() {
            return {
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                bizform: {}
            };
        },
        methods: {
        	// 窗口初始化方法,nextTick方法可以添加逻辑,如打开窗口时查询数据填充
            init(bizId) {
                this.open = true;
                this.$nextTick(() => {
                    getById(bizId).then(response => {
                        this.bizform = response.data;
                        this.open = true;
                        this.title = "修改业务";
                    });
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["bizform"].validate(valid => {
                    if (valid) {
                        if (this.bizform.id != undefined) {
                            updateBizDefine(this.bizform).then(response => {
                                if (response.data) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    // 调用主页面的getList方法刷新主页面
                                    this.$parent.getList();
                                } else {
                                    this.msgError(response.resultMsg);
                                }
                            });
                        } else {
                            addBizDefine(this.bizform).then(response => {
                                if (response.data) {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    // 调用主页面的getList方法刷新主页面
                                    this.$parent.getList();
                                } else {
                                    this.msgError(response.resultMsg);
                                }
                            });
                        }
                    }
                });
            }
        }
    };
</script>

index.vue中定义一个button,其它代码省略

<template>
	<!-- 打开测试窗口按钮 -->
	<el-button
	       type="primary"
	       icon="el-icon-plus"
	       size="mini"
	       @click="handleDialog"
	>测试弹窗
	</el-button>

	<!-- 使用组件-->
	<testDialog title="测试窗口" v-if="openDialog" ref="testDialog"/>
</template>

<script>
	// 引用组件
    import testDialog from "./testDialog";
    import {queryBizDefine} from "@/api/funds/routecenter/bizdefine";

    export default {
	    // 注册组件
	    components: {testDialog},
	    data() {
		    return {
		        // 显示窗口
		        openDialog: false
		    };
	    },
	    methods: {
		    /** 查询业务列表 */
		    getList() {
		        this.loading = true;
		        queryBizDefine(this.queryParams).then(response => {
		            this.bizList = response.data.rows;
		            this.total = response.data.total;
		            this.loading = false;
		        });
		    },
		    // 按钮方法
		    handleDialog() {
				this.openDialog = true;
				this.$nextTick(() => {
				    this.$refs.testDialog.init(2);
				});
			}
		}
	};
</script>

测试效果,上图是把id为2传了进来,在另一个页面能查出来,并显示
在这里插入图片描述
修改后能刷新主页面
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐