98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template>
|
|
<!-- 弹窗对话框 -->
|
|
<vxe-modal class="vxe-table--ignore-clear" id="myModal" @close="modalClose" v-model="visible" :width="width" :height="height"
|
|
|
|
:show-footer="showFooter"
|
|
@confirm="confirmEvent"
|
|
min-width="600" min-height="400" show-zoom resize transfer>
|
|
<!--
|
|
show-footer 显示底部按钮
|
|
confirm 确认按钮事件
|
|
min-width 最小宽度
|
|
min-height 最小高度
|
|
show-zoom 显示缩放按钮
|
|
resize 是否可以缩放
|
|
transfer 是否使用传送门
|
|
-->
|
|
<template #title>
|
|
<span>{{ title }}</span>
|
|
<!-- <span>提示</span> -->
|
|
</template>
|
|
<template #default>
|
|
<component :is="app" ref="appPage" :dataId="dataId" :pageOptions="pageOptions" :pageMode="pageMode" @callback="handleCallback"></component>
|
|
</template>
|
|
</vxe-modal>
|
|
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
name: "myDialog",
|
|
data() {
|
|
return {
|
|
width:800,
|
|
height:800,
|
|
visible: false,
|
|
title: "提示",
|
|
callback: null,
|
|
showFooter:false,
|
|
dataId: "",
|
|
pageMode: "", //add edit select
|
|
pageOptions:{},
|
|
app: null
|
|
};
|
|
},
|
|
methods: {
|
|
|
|
// 打开弹窗
|
|
open(options) {
|
|
// 解构赋值 page 页面组件 title 标题 callback 回调函数 pageMode 模式 add edit select dataId 数据id width 宽度 height 高度 pageOptions 页面参数
|
|
// pageOptions 用于传递给页面的参数 例如：{id:1,name:'张三'} 页面通过 this.$options.pageOptions 获取
|
|
// showFooter 是否显示底部按钮
|
|
const { page, title, callback, pageMode, dataId,width = 800,height = 600 , pageOptions = {} ,showFooter } = options || {};
|
|
|
|
this.width = width;
|
|
this.height = height;
|
|
this.dataId = dataId;
|
|
this.pageMode = pageMode;
|
|
this.title = title;
|
|
this.pageOptions = pageOptions;
|
|
this.app = page;
|
|
this.callback = callback;
|
|
this.showFooter = showFooter;
|
|
// 设置延迟显示，解决弹窗显示不全的问题
|
|
setTimeout(() => {
|
|
this.visible = true;
|
|
}, 10);
|
|
},
|
|
|
|
// 处理回调
|
|
handleCallback(e) {
|
|
const { callback } = this;
|
|
// 判断是否有回调函数
|
|
if (callback) {
|
|
// 执行回调
|
|
callback(e);
|
|
// 关闭弹窗
|
|
this.$destroy();
|
|
}
|
|
},
|
|
|
|
// 关闭弹窗
|
|
modalClose() {
|
|
this.$destroy();
|
|
},
|
|
|
|
// 确认事件
|
|
confirmEvent(){
|
|
const { callback } = this;
|
|
let data = this.$refs.appPage.getConfirmData();
|
|
if (callback) {
|
|
callback({data});
|
|
this.$destroy();
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|