feat: 优化流程新建页面

src/design/theme.less

@@ -33,13 +33,11 @@ html[data-theme='light'] {
     }
 
     .ant-card-grid-hoverable:hover {
-    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%),
+        box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%), 0 9px 28px 8px rgb(0 0 0 / 20%);
-      0 9px 28px 8px rgb(0 0 0 / 20%);
     }
 
     .ant-card-grid {
-    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset,
+        box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset, 0 1px 0 0 #434343 inset;
-      0 1px 0 0 #434343 inset;
     }
 
     .ant-calendar-selected-day .ant-calendar-date {
@@ -50,3 +48,25 @@ html[data-theme='light'] {
         color: rgb(0 0 0 / 90%);
     }
 }
+
+.geg {
+    &.ant-modal {
+        .ant-modal-header {
+            padding: 10px 20px;
+
+            .ant-modal-title {
+                line-height: 20px;
+            }
+        }
+
+        .ant-modal-close-x {
+            width: 48px;
+            height: 40px;
+            line-height: 40px;
+        }
+
+        .ant-modal-footer {
+            padding: 10px 20px;
+        }
+    }
+}

src/views/secondDev/FormInformation.vue

@@ -5,23 +5,8 @@
             <div :style="{}" class="form-right">
                 <div v-for="(item, index) in forms.configs" :key="index" :tab="item.formName">
                     <div v-show="activeIndex == index">
-            <SystemForm
+                        <SystemForm v-if="item.formType == FormType.SYSTEM" :ref="setItemRef" :formModel="item.formModel" :isViewProcess="props.disabled" :systemComponent="item.systemComponent" :workflowConfig="item" class="form-box" />
-              v-if="item.formType == FormType.SYSTEM"
+                        <SimpleForm v-else-if="item.formType == FormType.CUSTOM" :ref="setItemRef" :formModel="item.formModel" :formProps="item.formProps" :isWorkFlow="true" class="form-box" />
-              :ref="setItemRef"
-              :formModel="item.formModel"
-              :isViewProcess="props.disabled"
-              :systemComponent="item.systemComponent"
-              :workflowConfig="item"
-              class="form-box"
-            />
-            <SimpleForm
-              v-else-if="item.formType == FormType.CUSTOM"
-              :ref="setItemRef"
-              :formModel="item.formModel"
-              :formProps="item.formProps"
-              :isWorkFlow="true"
-              class="form-box"
-            />
                     </div>
                 </div>
             </div>
@@ -53,8 +38,8 @@
             disabled: false,
             formInfos: () => {
                 return [];
-      },
+            }
-    },
+        }
     );
 
     const emits = defineEmits(['getFormConfigs']);
@@ -95,7 +80,7 @@
     } = reactive({
         formModels: [],
         configs: [],
-    formEventConfigs: [],
+        formEventConfigs: []
     });
     onMounted(async () => {
         for await (let element of props.formInfos) {
@@ -125,10 +110,10 @@
                     systemComponent: {
                         functionalModule: element.functionalModule,
                         functionName: element.functionName,
-            functionFormName: 'Form',
+                        functionFormName: 'Form'
                     },
                     formJson: element.formJson,
-          isOldSystem: false,
+                    isOldSystem: false
                 });
                 // 上传组件Id集合
                 setTimeout(() => {
@@ -156,7 +141,7 @@
                     formModel: {},
                     formKey,
                     validate: true,
-          formType: element.formType,
+                    formType: element.formType
                 };
                 let isViewProcess = props.disabled;
                 let { buildOptionJson, uploadComponentIds } = changeFormJson(
@@ -165,10 +150,10 @@
                         formConfigChildren: element.formConfig.children,
                         formConfigKey: element.formConfig.key,
                         opinions: props.opinions,
-            opinionsComponents: props.opinionsComponents,
+                        opinionsComponents: props.opinionsComponents
                     },
                     isViewProcess,
-          uploadComponent.ids,
+                    uploadComponent.ids
                 );
                 uploadComponent.ids = uploadComponentIds;
                 if (buildOptionJson.schemas) {
@@ -223,13 +208,13 @@
                     validateForms.push({
                         validate: true,
                         msgs: [],
-            isOldSystem: forms.configs[index].isOldSystem,
+                        isOldSystem: forms.configs[index].isOldSystem
                     });
                     forms.configs[index].validate = true;
                 } catch (error: any | Array<{ errors: Array<string>; name: Array<string> }>) {
                     validateForms.push({
                         validate: false,
-            msgs: error?.errorFields,
+                        msgs: error?.errorFields
                     });
                     forms.configs[index].validate = false;
                 }
@@ -293,7 +278,7 @@
         saveDraftData,
         setFormData,
         getUploadComponentIds,
-    getSystemType,
+        getSystemType
     });
 </script>
 
@@ -305,8 +290,6 @@
     }
 
     .box {
-    width: 100%;
-
         .form-left {
             float: left;
             height: 100vh;
@@ -391,13 +374,7 @@
             }
         }
 
-    .form-box {
-      overflow: auto;
-      height: calc(100vh - 120px);
-    }
-
         .form-right {
-      width: 100%;
             padding-top: 20px;
         }
     }

src/views/secondDev/createFlow.vue

@@ -1,34 +1,61 @@
 <template>
+    <div class="page-bg-wrap">
         <div class="itc-create-flow">
             <div class="toolbar">
-            <a-space wrap>
+                <a-space :size="10" wrap>
-                <a-button>提交</a-button>
+                    <a-button style="margin-right: 10px">
-                <a-button>暂存</a-button>
+                        <slot name="icon">
-                <a-button>关闭</a-button>
+                            <close-outlined />
-                <a-button>打印</a-button>
+                        </slot>
-                <a-button>流程图</a-button>
+                        关闭
+                    </a-button>
+                    <a-button type="primary">
+                        <slot name="icon">
+                            <send-outlined />
+                        </slot>
+                        提交
+                    </a-button>
+                    <a-button>
+                        <slot name="icon">
+                            <clock-circle-outlined />
+                        </slot>
+                        暂存
+                    </a-button>
+                    <a-button>
+                        <slot name="icon">
+                            <printer-outlined />
+                        </slot>
+                        打印
+                    </a-button>
+                    <a-button @click="openFlowChart">
+                        <slot name="icon">
+                            <apartment-outlined />
+                        </slot>
+                        流程图
+                    </a-button>
                 </a-space>
             </div>
             <div class="flow-content">
-            <FormInformation
+                <FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
-                :key="randKey"
-                ref="formInformation"
-                :disabled="false"
-                :formAssignmentData="data.formAssignmentData"
-                :formInfos="data.formInfos"
-                :opinions="data.opinions"
-                :opinionsComponents="data.opinionsComponents"
-            />
             </div>
         </div>
+        <a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
+            <process-information :process-id="processId" :xml="data.xml" />
+            <template #footer>
+                <a-button type="primary" @click="closeFlowChart">关闭</a-button>
+            </template>
+        </a-modal>
+    </div>
 </template>
 
 <script setup>
     import { useRouter } from 'vue-router';
     import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
     import FormInformation from '/@/views/secondDev/FormInformation.vue';
+    import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
     import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
     import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+    import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
 
     const router = useRouter();
     const tabStore = useMultipleTabStore();
@@ -40,38 +67,47 @@
     const rParams = currentRoute.value.query;
     const rSchemaId = rParams.schemaId;
     let formInformation = ref();
+    const showFlowChart = ref(false);
     let randKey = ref('randkey'); // 强制表单重新渲染
 
+    function closeFlowChart() {
+        showFlowChart.value = false;
+    }
+
+    function openFlowChart() {
+        showFlowChart.value = true;
+    }
+
     const props = defineProps({
         schemaId: {
             type: String,
-            required: true,
+            required: true
         },
         draftsJsonStr: {
-            type: String,
+            type: String
         },
         draftsId: {
-            type: String,
+            type: String
         },
         taskId: {
             type: String,
             required: false,
-            default: '',
+            default: ''
         },
         processId: {
             type: String,
             required: false,
-            default: '',
+            default: ''
         },
         formData: {
-            type: Object,
+            type: Object
         },
         formId: {
-            type: String,
+            type: String
         },
         rowKeyData: {
-            type: String,
+            type: String
-        },
+        }
     });
 
     onMounted(async () => {
@@ -116,12 +152,7 @@
             let formData = [];
 
             data.formInfos.forEach((item) => {
-                if (
+                if (formDataJson && item.formConfig && item.formConfig.key && formDataJson[item.formConfig.key]) {
-                    formDataJson &&
-                    item.formConfig &&
-                    item.formConfig.key &&
-                    formDataJson[item.formConfig.key]
-                ) {
                     formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
                 }
             });
@@ -132,7 +163,7 @@
 
 <style lang="less">
     .itc-create-flow {
-        padding: 10px 12px;
+        padding: 10px;
         background-color: #fff;
 
         .toolbar {
@@ -140,4 +171,9 @@
             border-bottom: 1px solid #eee;
         }
     }
+
+    .page-bg-wrap {
+        background-color: rgb(246 247 249);
+        padding: 10px;
+    }
 </style>