commit：升级到vue3，更新最近工作流技术栈，支持sa-token

OrangeFormsOpen-VUE3/src/components/Dialog/index.ts

@@ -0,0 +1,164 @@
+import { layer } from '@layui/layui-vue';
+import { Component } from 'vue';
+import { ANY_OBJECT } from '@/types/generic';
+import { getAppId, getToken, getUUID } from '@/common/utils';
+import { DialogProp } from './types';
+import Layout from './layout.vue';
+
+const LAYER_Z_INDEX = 500;
+
+export class Dialog {
+  private static index = 0;
+
+  static closeAll = () => {
+    layer.closeAll();
+    Dialog.index = 0;
+  };
+
+  // 未提供单独关闭某个对话框的方法，涉及到z-index的变化规则，若需提供，须考虑z-index的变化规则
+  // options可参考：http://www.layui-vue.com/zh-CN/components/layer 和 https://layui.dev/docs/2/layer/#options
+
+  /**
+   * 打开弹窗
+   * @param {*} title 弹窗标题
+   * @param {*} component 弹窗内容的组件
+   * @param {*} options 弹窗设置（详情请见layui官网  http://www.layui-vue.com/zh-CN/components/layer 和 https://layui.dev/docs/2/layer/#options）
+   * @param {*} params 弹窗组件参数
+   * @param {*} thirdPartyOptions 第三方接入参数
+   * @param {*} thirdPartyOptions.pathName 接入路由name
+   * @param {*} thirdPartyOptions.width 弹窗宽度
+   * @param {*} thirdPartyOptions.height 弹窗高度
+   */
+  static show = <D>(
+    title: string,
+    component: Component | string,
+    options?: ANY_OBJECT,
+    params?: ANY_OBJECT,
+    thirdPartyOptions?: ANY_OBJECT,
+  ) => {
+    // 调用第三方弹窗方法
+    if (getAppId() != null && getAppId() !== '') {
+      if (thirdPartyOptions && window.parent) {
+        showDialog(title, params, thirdPartyOptions);
+        return new Promise<D>((resolve, reject) => {
+          const eventListener = (e: ANY_OBJECT) => {
+            if (e.data.type === 'refreshData') {
+              console.log('第三方弹窗关闭后，回传的数据', e);
+              window.removeEventListener('message', eventListener);
+              resolve(e.data.data?.data as D);
+            }
+          };
+          window.addEventListener('message', eventListener, false);
+        });
+      } else {
+        console.warn('错误的第三方调用！');
+        return Promise.reject('错误的第三方调用！');
+      }
+    }
+
+    return new Promise<D>((resolve, reject) => {
+      const observer: DialogProp<D> = {
+        index: '',
+        cancel: () => {
+          layer.close(observer.index);
+          reject({ message: 'canceled' });
+        },
+        submit: (data: D) => {
+          //console.log('dialog index', observer.index);
+          layer.close(observer.index);
+          resolve(data);
+        },
+      };
+
+      let layerOptions = {
+        title: title,
+        type: 1,
+        skin:
+          'layer-dialog ' + (window.innerWidth <= 1900 ? 'container-default' : 'container-large'),
+        resize: false,
+        offset: 'auto',
+        shadeClose: false,
+        content: '' as string | Component,
+        zIndex: LAYER_Z_INDEX + Dialog.index,
+        end: () => {
+          //console.log('layer end');
+          Dialog.index--;
+        },
+      };
+      // end之后，要执行index--
+      if (options && options.end) {
+        const end = options.end;
+        layerOptions.end = () => {
+          Dialog.index--;
+          if (typeof end == 'function') {
+            end();
+          }
+        };
+      }
+
+      layerOptions = { ...layerOptions, ...options };
+
+      params = { ...params };
+      params.dialog = observer;
+
+      console.log('dialog params', params);
+      //layerOptions.content = h(component, params);
+      layerOptions.content = h(Layout, () => h(component, params));
+
+      const id = layer.open(layerOptions);
+      observer.index = id;
+      Dialog.index++;
+    });
+  };
+}
+
+function showDialog(title: string, params?: ANY_OBJECT, options?: ANY_OBJECT) {
+  console.log('第三方弹窗', title, params, options);
+  // 调用第三方弹窗方法
+  if (options && window.parent) {
+    const paramsCopy: ANY_OBJECT = {};
+    if (params) {
+      for (const key in params) {
+        if (Object.prototype.hasOwnProperty.call(params, key)) {
+          const element = params[key];
+          paramsCopy[key] = unref(element);
+        }
+      }
+    }
+
+    const dialogKey = getUUID();
+    const location = window.location;
+    let dlgUrl =
+      location.origin +
+      location.pathname +
+      '#' +
+      options.pathName +
+      '?appId=' +
+      getAppId() +
+      '&token=' +
+      getToken() +
+      '&dlgFullScreen=' +
+      (options.fullscreen ? '1' : '0') +
+      '&dialogKey=' +
+      dialogKey;
+
+    dlgUrl += '&thirdParamsString=' + encodeURIComponent(JSON.stringify(paramsCopy));
+
+    const data = {
+      title: title,
+      dlgFullScreen: options.fullscreen,
+      width: options.width,
+      height: options.height,
+      top: options.top,
+      params: paramsCopy,
+      url: dlgUrl,
+      dialogKey: dialogKey,
+    };
+
+    const dlgOption = {
+      type: 'openDialog',
+      data: JSON.parse(JSON.stringify(data)),
+    };
+    window.parent.postMessage(dlgOption, '*');
+  }
+}

OrangeFormsOpen-VUE3/src/components/Dialog/layout.vue

@@ -0,0 +1,7 @@
+<template>
+  <el-config-provider :locale="zhCn"><slot /></el-config-provider>
+</template>
+
+<script setup lang="ts">
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+</script>

OrangeFormsOpen-VUE3/src/components/Dialog/types.d.ts

@@ -0,0 +1,5 @@
+export interface DialogProp<T> {
+  index: string;
+  cancel: () => void;
+  submit: (data: T) => void;
+}

OrangeFormsOpen-VUE3/src/components/Dialog/useDialog.ts

@@ -0,0 +1,28 @@
+import { EpPropMergeType } from 'element-plus/es/utils/vue/props';
+import { Dialog } from '@/components/Dialog';
+import { ANY_OBJECT } from '@/types/generic';
+
+export const useDialog = () => {
+  const defaultFormItemSize = inject<
+    EpPropMergeType<StringConstructor, '' | 'default' | 'small' | 'large', never> | undefined
+  >('defaultFormItemSize', 'default');
+
+  const show = <D>(
+    title: string,
+    component: Component | string,
+    options?: ANY_OBJECT,
+    params?: ANY_OBJECT,
+    thirdPartyOptions?: ANY_OBJECT,
+  ) => {
+    if (!params) {
+      params = {};
+    }
+    params.defaultFormItemSize = defaultFormItemSize;
+
+    return Dialog.show<D>(title, component, options, params, thirdPartyOptions);
+  };
+
+  return {
+    show,
+  };
+};