chore: 预览表单

src/views/workflow/extension/formJson/FormJsonModal.vue

@@ -1,64 +1,61 @@
 <template>
   <BasicModal
     v-bind="$attrs"
-    width="720px"
-    minHeight="100px"
+    defaultFullscreen
+    cancelText="关闭"
+    :showOkBtn="false"
     @register="registerModal"
-    @ok="handleSubmit"
+    @visible-change="handleVisibleChange"
   >
-    todo
+    <div id="formPreview"/>
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { ref, unref } from 'vue';
+import { reactive } from 'vue';
 import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+import { loadMicroApp, MicroApp } from 'qiankun';
+import { getSubDefineProps } from '/@/qiankun/state';
+import { GlStateEnum } from '/@/enums/microAppEnum';
+import { useMicroAppStore } from '/@/store/modules/microApp';
+import { apps } from '/@/qiankun/apps';
+import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
 
-/** 通用变量统一声明区域 */
-const tag = ref<Nullable<string>>('');
-/** https://v3.cn.vuejs.org/api/options-data.html#emits */
+interface TableState {
+  formDesignApp: MicroApp;
+}
+
+const state = reactive<TableState>({
+  formDesignApp: undefined!,
+});
+const formPreviewProps = {
+  style: { height: 'calc(100vh - 160px)' },
+  options: {},
+  disabled: false,
+  readonly: false,
+  formSubmitSuccess: () => {},
+  formSubmitError: () => {},
+  formResetChange: () => {}
+};
 const emit = defineEmits(['success', 'register']);
+const microAppStore = useMicroAppStore();
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-  // 处理清除脏数据
-
-  // 处理设置数据
-  tag.value = data._tag;
-  const id = data.record?.id;
-  const props: Partial<ModalProps> = { confirmLoading: false };
-  // 采用tag标签区分操作
-  switch (unref(tag)) {
-    case 'add':
-      props.title = '新增流程表单';
-      break;
-    case 'edit':
-      props.title = '编辑流程表单';
-     // await setFieldsValue(await getFormDefinition(id));
-      break;
+  state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+    container: '#formPreview',
+    props: {
+      ...getSubDefineProps(),
+      // 表单设计器props
+      [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formPreviewProps,
+      mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW
     }
-  // 尾部:设置处理后的最终配置数据
+  }), { sandbox: { experimentalStyleIsolation: true }});
+  data?.json && (formPreviewProps.options = data?.json);
+  const props: Partial<ModalProps> = { confirmLoading: false };
+  props.title = '预览流程表单';
   setModalProps(props);
 });
 
-/** 处理弹出框提交 */
-async function handleSubmit() {
-  try {
-    // 提取验证数据
-
-    // 处理提交之前逻辑
-    setModalProps({ confirmLoading: true });
-    // 采用tag标签区分操作
-    switch (unref(tag)) {
-      case 'add':
-
-        break;
-      case 'edit':
-
-        break;
-    }
-    // 处理提交完成之后逻辑
-    closeModal();
-    emit('success');
-  } finally {
-    setModalProps({ confirmLoading: false });
-  }
+function handleVisibleChange(visible: boolean) {
+  !visible && state.formDesignApp.unmount();
 }
+
 </script>