update：更新模态

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/render/IbizLoading.vue

+<script setup lang="ts">
+import { IParam } from "@ibiz-core";
+
+interface Props{
+  width: number;
+  height: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+let style = reactive({width:'600px',height:'600px'});
+
+/**
+ * Vue生命周期beforeMount
+ */
+onBeforeMount(() => {
+  if (props.width) {
+    style.width = props.width + 'px';
+  } else if(props.height){
+    style.height = props.height + 'px';
+  } 
+});
+
+onMounted(()=>{
+
+})
+</script>
+
+<template>
+<div :style="style" class="ar-loading">
+  <div class="ar-loading-spinner">
+    <svg class="circular" viewBox="25 25 50 50">
+      <circle id="circle1" cx="50" cy="50" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+</template>
+
+<style lang="scss">
+.ar-loading{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &-spinner{
+    position: relative;
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    vertical-align: middle;
+    animation: ar-rotate 0.8s linear infinite;
+    .circular{
+      width: 100%;
+      height: 100%;
+      circle {
+        stroke: skyblue;
+        stroke-width: 3;
+        stroke-linecap: round;
+        animation: ar-circular 1.5s ease-in-out infinite;
+      }
+    }
+  }
+}
+
+@keyframes ar-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ar-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120;
+  }
+}
+
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/utils/app-modal/app-modal.ts

+import { createVNode, render as vueRender } from 'vue'
+import { Subject } from 'rxjs';
+import Antd from 'ant-design-vue';
+// import { AppServiceBase, LogUtil } from 'ibiz-core';
+import AppModalComponent from "./app-modal.vue";
+import IbizLoading from '@components/render/IbizLoading.vue';
+import './app-modal.scss';
+
+export class AppModal {
+
+  /**
+   * 实例对象
+   *
+   * @private
+   * @static
+   * @memberof AppModal
+   */
+  private static modal = new AppModal();
+
+  /**
+   * vue 实例
+   *
+   * @private
+   * @type {Vue}
+   * @memberof AppModal
+   */
+  private vueExample!: any;
+
+  /**
+   * store对象
+   *
+   * @private
+   * @memberof AppModal
+   */
+  private store: any;
+
+  /**
+   * i18n对象
+   *
+   * @private
+   * @memberof AppModal
+   */
+  private i18n: any;
+
+  /**
+   * router对象
+   *
+   * @private
+   * @memberof AppModal
+   */
+  private router: any;
+
+  /**
+   * Creates an instance of AppModal.
+   * 
+   * @memberof AppModal
+   */
+  private constructor() {
+    this.initBasicData();
+    if (AppModal.modal) {
+      return AppModal.modal;
+    }
+  }
+
+  /**
+   * 获取单例对象
+   *
+   * @static
+   * @returns {AppModal}
+   * @memberof AppModal
+   */
+  public static getInstance(): AppModal {
+    if (!AppModal.modal) {
+      AppModal.modal = new AppModal();
+    }
+    return AppModal.modal;
+  }
+
+  /**
+   * 初始化基础数据
+   * 
+   * @memberof AppModal
+   */
+  private initBasicData() {
+    // const appService = AppServiceBase.getInstance();
+    // this.store = appService.getAppStore();
+    // this.i18n = appService.getI18n();
+    // this.router = appService.getRouter();
+  }
+
+  /**
+   * 创建 Vue 实例对象
+   *
+   * @private
+   * @param {{ name: string, title: string, fileDir: string, width?: number, height?: number,isfullscreen?:boolean }} view 视图数据
+   * @param {*} [context={}] 应用上下文参数
+   * @param {*} [viewparams={}] 视图参数
+   * @param {*} [navdatas=[]] 导航数据
+   * @param {string} uuid 标识
+   * @returns {Subject<any>}
+   * @memberof AppModal
+   */
+  private createVueExample(view: { name: string, title: string, fileDir:string, width?: number, height?: number, isfullscreen?: boolean, customClass?: string }, context: any = {}, viewparams: any = {}, navdatas: Array<any> = [], uuid: string): Subject<any> {
+    const self: any = this;
+    if (!self.store || !self.i18n) {
+      self.initBasicData();
+    }
+    try {
+      let subject: null | Subject<any> = new Subject<any>();
+      let props = { view: view, viewdata: context, viewparams: viewparams, navdatas: navdatas, uuid: uuid, subject: subject };
+      let dir = view.fileDir.replace(/@/, '../../')
+      const AsyncComp = defineAsyncComponent({
+        // 工厂函数
+        loader: () => import(dir),
+        // 加载异步组件时要使用的组件
+        loadingComponent: IbizLoading,        
+        // 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
+        delay: 0,
+      });
+      if (AsyncComp) {
+        const component = AppModalComponent;
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const app = createApp(component,
+          {
+            close: () => { document.body.removeChild(div); app.unmount(); },
+            ...props
+          }
+        );
+        app.component(view.name, AsyncComp);
+        const vm = app.use(Antd).mount(div);
+        this.vueExample = vm;
+      }
+      return subject;
+    } catch (error) {
+      console.error(error);
+      return new Subject<any>();
+    }
+  }
+
+  /**
+   * 打开模态视图
+   *
+   * @param {{ name: string, title: string, fileDir:string, width?: number, height?: number }} view 视图
+   * @param {*} [viewParam={}] 应用上下文参数
+   * @param {any[]} deResParameters 关系实体参数对象
+   * @param {any[]} parameters 当前应用视图参数对象
+   * @param {any[]} args 多项数据
+   * @param {*} [data={}] 行为参数
+   * @param {any[]} navdatas 导航数据
+   * @returns {Subject<any>}
+   * @memberof AppModal
+   */
+  public openModal(view: { name: string, title: string, fileDir:string, width?: number, height?: number, isfullscreen?: boolean, customClass?: string }, context: any = {}, data: any = {}, navdatas: Array<any> = []): Subject<any> {
+    try {
+      let viewdata: any = {};
+      Object.assign(viewdata, JSON.parse(JSON.stringify(context)));
+      const uuid = this.getUUID();
+      const subject = this.createVueExample(view, viewdata, data, navdatas, uuid);
+      return subject;
+    } catch (error) {
+      console.log(error);
+      return new Subject<any>();
+    }
+  }
+
+  /**
+   * 获取节点标识
+   *
+   * @private
+   * @returns {string}
+   * @memberof AppModal
+   */
+  private getUUID(): string {
+    function s4() {
+      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    }
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+  }
+
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/utils/app-modal/app-modal.vue

+<script setup lang="ts">
+import { Subject } from 'rxjs';
+import { Ref, ref } from 'vue';
+interface AppModalProps {
+  /**
+   * @description 视图
+   */
+  view: any;
+
+  /**
+   * @description 视图上下文参数
+   */
+  viewdata?: any;
+
+  /**
+   * @description 视图参数
+   */
+  viewparams?: any;
+
+  /**
+   * @description 导航数据
+   */
+  navdatas?: any;
+
+  /**
+   * @description 数据传递对象
+   */
+  subject?:any
+
+  /**
+   * @description 关闭回调
+   */
+  close:Function;
+}
+
+const props = withDefaults(defineProps<AppModalProps>(), {
+  view:{},
+  viewdata: {},
+  viewparams: {},
+  navdatas: [],
+});
+
+/**
+ * 是否显示
+ */
+let isShow: Ref<boolean> = ref(false);
+
+/**
+ * 是否满屏
+ */
+let isfullscreen: Ref<boolean> = ref(false);
+
+/**
+ * 零时结果
+ */
+let tempResult = { ret: '' };
+
+/**
+ * 视图名称
+ */
+let viewname: Ref<string> = ref('');
+
+/**
+ * 视图标题
+ */
+let title: string = '';
+
+/**
+ * 视图宽度
+ */
+let width: Ref<number> = ref(0);
+
+/**
+ * 视图高度
+ */
+let height: Ref<number> = ref(0);
+
+/**
+ * 视图层级
+ */
+let zIndex: any = null;
+
+/**
+ * 视图样式
+ */
+let style: any = {};
+
+/**
+ * 暴露subject
+ */
+const getSubject = () => {
+  return props.subject;
+}
+
+/**
+ * 监听isShow
+ */
+watch(
+  () => isShow,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal && newVal.value == false) {
+      zIndex -= 100;
+      // this.$store.commit('updateZIndex', this.zIndex);
+    }
+  },
+);
+
+/**
+ * Vue生命周期beforeMount
+ */
+onBeforeMount(() => {
+  if (props.view) {
+    viewname.value = props.view.name;
+    title = props.view.title;
+    isfullscreen.value = props.view.isfullscreen ? props.view.isfullscreen : false;
+    if (isfullscreen.value) {
+      Object.assign(style, { height: 'auto' });
+    } else {
+      if (!props.view.width || props.view.width === 0 || Object.is(props.view.width, '0px')) {
+        let viewWidth = 600;
+        if (window && window.innerWidth > 100) {
+          if (window.innerWidth > 100) {
+            viewWidth = window.innerWidth - 100;
+          } else {
+            viewWidth = window.innerWidth;
+          }
+        }
+        width.value = viewWidth;
+      } else {
+        width.value = props.view.width;
+      }
+      if (props.view.height && !Object.is(props.view.height, '0px')) {
+        Object.assign(style, { height: props.view.height + 'px' });
+        height.value = props.view.height;
+      } else {
+        height.value = 800;
+      }
+    }
+  }
+});
+
+/**
+ * Vue生命周期mounted
+ */
+onMounted(() => {
+  // const curmodal: any = this.$refs.curmodal;
+  // const zIndex = this.$store.getters.getZIndex();
+  // if (zIndex) {
+  //     this.zIndex = zIndex + 100;
+  //     this.$store.commit('updateZIndex', this.zIndex);
+  // }
+  isShow.value = true;
+});
+
+/**
+ * 视图关闭
+ */
+const close = (result: any) => {
+  if (result && Array.isArray(result) && result.length > 0) {
+    if (zIndex) {
+      // this.$store.commit('updateZIndex', zIndex - 100);
+    }
+    Object.assign(tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
+  }
+  isShow.value = false;
+};
+
+/**
+ * 视图数据变化
+ */
+const dataChange = (result: any) => {
+  tempResult = { ret: '' };
+  if (result && Array.isArray(result) && result.length > 0) {
+    Object.assign(tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
+  }
+};
+
+/**
+ * 视图数据激活
+ */
+const viewDatasActivated = (result: any) => {
+  if (result && Array.isArray(result) && result.length > 0) {
+    close(result);
+  }
+};
+
+/**
+ * 模态显示隐藏切换回调
+ */
+const onVisibleChange = ($event: any) => {
+  handleShowState($event);
+};
+
+/**
+ * 处理数据，向外抛值
+ */
+const handleShowState = ($event: any) => {
+  if (props.subject && tempResult) {
+    props.subject.next(tempResult);
+  }
+  setTimeout(() => {
+    props.close();
+  }, 500);
+};
+</script>
+
+<template>
+  <a-modal
+    ref="curModal"
+    class="app-modal"
+    v-model:visible="isShow"
+    :title="title"
+    :footer="null"
+    :maskClosable="true"
+    :destroyOnClose="true"
+    :width="width"
+    :bodyStyle="style"
+    @cancel="onVisibleChange($event)"
+  >
+    <component
+      :is="viewname"
+      class="viewcontainer2"
+      :width="width"
+      :height="height"
+      :viewdata="JSON.stringify(viewdata)"
+      :viewparam="JSON.stringify(viewparams)"
+      :navdatas="navdatas"     
+      :viewDefaultUsage="false"
+      :noViewCaption="true"
+      @viewdataschange="dataChange($event)"
+      @viewdatasactivated="viewDatasActivated($event)"
+      @close="close($event)"
+      :ref="viewname"
+    ></component>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+@import './app-modal.scss';
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/utils/index.ts

+export { AppModal } from './app-modal/app-modal';