<template>

  <vxe-modal class="vxe-table--ignore-clear" id="myModal" @close="modalClose" v-model="visible" :width="width" :height="height"
    min-width="600" min-height="400" show-zoom resize remember storage transfer>
    <template #title>
      <span>{{ title }}</span>
    </template>
    <template #default>
      <component :is="app" :dataId="dataId" :pageMode="pageMode" @callback="handleCallback"></component>
    </template>
  </vxe-modal>

</template>
<script>

export default {
  name: "myDialog",
  data() {
    return {
      width:800,
      height:500,
      visible: false,
      title: "提示",
      callback: null,
      dataId: "",
      pageMode: "", //add edit select
      app: null
    };
  },
  methods: {


    open(options) {
      const { page, title, callback, pageMode, dataId,width = 800,height = 500 } = options || {};
 
      this.width = width;
      this.height = height;
      this.dataId = dataId;
      this.pageMode = pageMode;
      this.title = title;
      this.app = page;
      this.callback = callback;
      this.visible = true;
    },
    handleCallback(e) {
      const { callback } = this;
      if (callback) {
        callback(e);
        this.$destroy();
      }
    },
    modalClose() {
      this.$destroy();
    }
  },
};
</script>
  