chore: wokeflow compose

src/views/workflow/task/TaskForm.vue

@@ -1,8 +1,13 @@
 <template>
-  <ALayoutContent style="min-height: 100vh">
-    <h4 style="text-align:center">{{ state.formTitle }}</h4>
+  <ALayoutContent class="p-10">
+    <h4 class="text-center">{{ state.formTitle }}</h4>
     <ATable v-model:activeKey="state.taskSelectedTab">
-      <ATabPane key="formInfo" tab="表单信息">
+      <ATabPane key="formInfo">
+        <template #tab>
+          <span>
+            <Icon icon="fa6-solid:file-lines"/>表单信息
+          </span>
+        </template>
         <!-- 动态表单:内置使用枇杷表单设计器 -->
         <workflow-preview-form v-if="state.formType !== '2'"
                                ref="form"
@@ -16,8 +21,12 @@
                    :businessId="state.businessId"
         />
       </ATabPane>
-      <ATabPane key="processChart" tab="流程图">
-        流程图
+      <ATabPane key="processChart">
+        <template #tab>
+          <span>
+            <Icon icon="fa-solid:image"/>流程图
+          </span>
+        </template>
       </ATabPane>
     </ATable>
   </ALayoutContent>
@@ -143,7 +152,6 @@
   const [registerUser , { openModal: openUser }] = useModal();
   const [registerRollBackTask , { openModal: openRollBackTask }] = useModal();
   onActivated(() => {
-    debugger
     handleInit();
     nextTick(async () => {
       // 获取流程图数据

src/views/workflow/task/WorkflowPreviewForm.vue

@@ -39,7 +39,7 @@
     options: {}
   });
   const formDesignProps = {
-    style: { height: 'calc(100vh - 160px)' },
+    style: { 'min-height': '50px' },
     options: {},
     disabled: false,
     readonly: false,
@@ -56,6 +56,7 @@
         container: '#formPreview',
         props: {
           ...getSubDefineProps(),
+          mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW,
           // 表单设计器props
           [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
         }