chore: compose workflow microApp

src/api/platform/workflow/controller/model.ts

@@ -16,14 +16,13 @@ enum Api {
   copy = '/workflow_proxy/workflow/model/copy',
   deploy = '/workflow_proxy/workflow/model/deploy',
   save = '/workflow_proxy/workflow/model/saveModel',
-  bpmnXmlDownload = '/workflow_proxy/workflow/model/bpmnXmlDownload'
+  bpmnXmlDownload = '/workflow_proxy/workflow/model/bpmnXmlDownload',
 }
 
 export const listModel = (params?: Partial<WorkflowModelParams>) => defHttp.get<WorkflowModelResult>({url: Api.list, params}, { isReturnResultResponse: true });
-export const getModel = (modelId: string) => defHttp.get<string>({url: `${Api.getBpmnXml}/${modelId}` });
+export const getModelXml = (modelId: string) => defHttp.get<string>({url: `${Api.getBpmnXml}/${modelId}` });
 export const delModel = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
 export const copyModel = (modelId: string)=> defHttp.post({ url: `${Api.copy}/${modelId}` });
 export const deployModel = (modelId: string, category: string)=> defHttp.post({ url: Api.deploy, params: { id: modelId, category } });
 export const saveModel = (modelId: string, params: Recordable)=> defHttp.post({url: `${Api.save}/${modelId}`, data: params});
 export const bpmnXmlDownload = (modelId: string, fileName?: string) => Promise.resolve(downloadByUrl({ url: `${apiUrl}${Api.bpmnXmlDownload}/${modelId}`, fileName: fileName }));
-

src/api/platform/workflow/controller/modelResource.ts

@@ -0,0 +1,13 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+ * author wangxiang4
+ */
+import { ModelRepresentation } from '/@/api/platform/workflow/entity/modelRepresentation';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  get = '/app/rest/models'
+}
+
+export const getModel = (modelId: string) => defHttp.get<ModelRepresentation>({url: `${Api.get}/${modelId}` });

src/api/platform/workflow/entity/modelRepresentation.ts

@@ -0,0 +1,16 @@
+
+export interface ModelRepresentation {
+  id: string;
+  name: string;
+  key: string;
+  description: string;
+  createdBy: string;
+  lastUpdatedBy: string;
+  lastUpdated: string;
+  latestVersion: boolean;
+  version: number;
+  comment: string;
+  modelType: number;
+  tenantId: string;
+  [key:string]: any;
+}

src/enums/microAppEnum.ts

@@ -19,5 +19,7 @@ export enum FORM_DESIGN_APP_COMPONENTS {
   PREVIEW = 'MicroPreview'
 }
 export enum WORKFLOW_DESIGN_APP_COMPONENTS {
-
+  DESIGN = 'MicroDesign',
+  PREVIEW = 'MicroPreview',
+  CHART = 'MicroChart'
 }

src/views/workflow/model/helper/WorkflowModelDesign.vue

@@ -7,7 +7,7 @@
     @register="registerModal"
     @visible-change="handleVisibleChange"
   >
-    <div id="formDesign"/>
+    <div id="workflowDesign"/>
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -15,102 +15,65 @@
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { loadMicroApp, MicroApp } from 'qiankun';
   import { getSubDefineProps } from '/@/qiankun/state';
-  import { GlStateEnum } from '/@/enums/microAppEnum';
+  import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
   import { useMicroAppStore } from '/@/store/modules/microApp';
   import { apps } from '/@/qiankun/apps';
-  import { addFormDefinitionJson, editFormDefinitionJson, getFormDefinitionJson } from '/@/api/platform/workflow/extension/controller/formDefinitionJson';
+  import { getModel } from '/@/api/platform/workflow/controller/modelResource';
-  import { FormDefinitionJson } from '/@/api/platform/workflow/extension/entity/formDefinitionJson';
+  import { getModelXml } from '/@/api/platform/workflow/controller/model';
-  import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
 
   interface TableState {
     tag: string;
-    formDesignApp: MicroApp;
+    workflowDesignApp: MicroApp;
-    form: Partial<FormDefinitionJson>;
   }
 
   const state = reactive<TableState>({
     tag: '',
-    formDesignApp: undefined!,
+    workflowDesignApp: undefined!,
-    form: {
-      id: undefined!,
-      formDefinitionId: undefined!,
-      json: undefined!,
-      version: undefined!,
-      status: undefined!,
-      isPrimary: undefined!
-    },
   });
 
-  const formDesignProps = {
+  const workflowDesignProps = {
-    undoRedo: false,
     style: { height: 'calc(100vh - 160px)' },
-    toolbar: ['clear', 'preview'],
+    workflowSubmitSuccess: () => emit('success')
-    options: {}
   };
   const emit = defineEmits(['success', 'register']);
   const microAppStore = useMicroAppStore();
   const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
     changeLoading();
-    state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+    state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
-      container: '#formDesign',
+      container: '#workflowDesign',
       props: {
         ...getSubDefineProps(),
-        // 表单设计器props
+        [GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
-        [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
       }
     }), { sandbox: { experimentalStyleIsolation: true }});
-    state.formDesignApp.mountPromise.then(() => {
+    state.workflowDesignApp.mountPromise.then(() => {
       changeLoading(false);
     });
     // 处理清除脏数据
-    state.form = {};
-    formDesignProps.options = {};
     state.tag = data._tag;
     const id = data.record?.id;
-    state.form.formDefinitionId = data.record?.formDefinitionId;
+    const workflowDesignApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.DESIGN),
+          workflowRef: Recordable = workflowDesignApp.getRef().$refs['workflow-design'];
+    workflowRef.setBpmnXml('');
+    workflowRef.reset();
     // 处理设置数据
     const props: Partial<ModalProps> = { confirmLoading: false };
     switch (state.tag) {
       case 'add':
-        props.title = '新增流程表单';
+        props.title = '新增流程模型';
         break;
       case 'edit':
-        props.title = '编辑流程表单';
+        props.title = '编辑流程模型';
-        state.form = await getFormDefinitionJson(id);
+        const modelRepresentation = await getModel(id);
-        state.form?.json && (formDesignProps.options = state.form.json);
+        workflowRef.setModelData(modelRepresentation);
+        const bpmnXml = await getModelXml(id);
+        workflowRef.setBpmnXml(bpmnXml);
         break;
     }
     setModalProps(props);
   });
 
   function handleVisibleChange(visible: boolean) {
-    !visible && state.formDesignApp.unmount();
+    !visible && state.workflowDesignApp.unmount();
-  }
-
-  /** 处理弹出框提交 */
-  async function handleSubmitForm(status: string) {
-    try {
-      const formDesignApp: Recordable = microAppStore.getFormDesignApp(FORM_DESIGN_APP_COMPONENTS.DESIGN),
-            formRef: Recordable = formDesignApp.getRef().$refs['form-design'];
-      state.form.json =  formRef.getWidgetFormJson();
-      state.form.status = status;
-      state.form.isPrimary = '1';
-      // 处理提交之前逻辑
-      setModalProps({ confirmLoading: true });
-      // 采用tag标签区分操作
-      switch (state.tag) {
-        case 'add':
-          await addFormDefinitionJson(state.form);
-          break;
-        case 'edit':
-          await editFormDefinitionJson(state.form);
-          break;
-      }
-      // 处理提交完成之后逻辑
-      closeModal();
-      emit('success');
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
   }
 </script>