From e657310fd37205f87bf0d520b9949bc1f144a4ca Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Mon, 19 Feb 2024 17:41:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=96=B0=E5=BB=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/design/theme.less                   |  92 +--
 src/views/secondDev/FormInformation.vue | 733 ++++++++++++------------
 src/views/secondDev/createFlow.vue      | 108 ++--
 3 files changed, 483 insertions(+), 450 deletions(-)

diff --git a/src/design/theme.less b/src/design/theme.less
index aa05033..ec14009 100644
--- a/src/design/theme.less
+++ b/src/design/theme.less
@@ -1,52 +1,72 @@
 .bg-white {
-  background-color: @component-background !important;
+    background-color: @component-background !important;
 }
 
 html[data-theme='light'] {
-  .text-secondary {
-    color: rgb(0 0 0 / 45%);
-  }
+    .text-secondary {
+        color: rgb(0 0 0 / 45%);
+    }
 
-  .ant-alert-success {
-    background-color: #f6ffed;
-    border: 1px solid #b7eb8f;
-  }
+    .ant-alert-success {
+        background-color: #f6ffed;
+        border: 1px solid #b7eb8f;
+    }
 
-  .ant-alert-error {
-    background-color: #fff2f0;
-    border: 1px solid #ffccc7;
-  }
+    .ant-alert-error {
+        background-color: #fff2f0;
+        border: 1px solid #ffccc7;
+    }
 
-  .ant-alert-warning {
-    background-color: #fffbe6;
-    border: 1px solid #ffe58f;
-  }
+    .ant-alert-warning {
+        background-color: #fffbe6;
+        border: 1px solid #ffe58f;
+    }
 
-  :not(:root):fullscreen::backdrop {
-    background-color: @layout-body-background !important;
-  }
+    :not(:root):fullscreen::backdrop {
+        background-color: @layout-body-background !important;
+    }
 }
 
 [data-theme='dark'] {
-  .text-secondary {
-    color: #8b949e;
-  }
+    .text-secondary {
+        color: #8b949e;
+    }
 
-  .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%),
-      0 9px 28px 8px rgb(0 0 0 / 20%);
-  }
+    .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%), 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,
-      0 1px 0 0 #434343 inset;
-  }
+    .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, 0 1px 0 0 #434343 inset;
+    }
 
-  .ant-calendar-selected-day .ant-calendar-date {
-    color: rgb(0 0 0 / 80%);
-  }
+    .ant-calendar-selected-day .ant-calendar-date {
+        color: rgb(0 0 0 / 80%);
+    }
 
-  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-    color: rgb(0 0 0 / 90%);
-  }
+    .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
+        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;
+        }
+    }
 }
diff --git a/src/views/secondDev/FormInformation.vue b/src/views/secondDev/FormInformation.vue
index 2d1ab7d..021b8f6 100644
--- a/src/views/secondDev/FormInformation.vue
+++ b/src/views/secondDev/FormInformation.vue
@@ -1,404 +1,381 @@
 <template>
-  <!-- 表单信息 -->
-  <div class="form-container">
-    <div class="box">
-      <div :style="{}" class="form-right">
-        <div v-for="(item, index) in forms.configs" :key="index" :tab="item.formName">
-          <div v-show="activeIndex == index">
-            <SystemForm
-              v-if="item.formType == FormType.SYSTEM"
-              :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 class="form-container">
+        <div class="box">
+            <div :style="{}" class="form-right">
+                <div v-for="(item, index) in forms.configs" :key="index" :tab="item.formName">
+                    <div v-show="activeIndex == index">
+                        <SystemForm v-if="item.formType == FormType.SYSTEM" :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>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
-  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
-  import { onBeforeUpdate, nextTick, onMounted, reactive, ref } from 'vue';
-  import { TaskApproveOpinion, ValidateForms } from '/@/model/workflow/bpmnConfig';
-  import { cloneDeep } from 'lodash-es';
-  import { GeneratorConfig } from '/@/model/generator/generatorConfig';
-  import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
-  import { changeFormJson } from '/@/hooks/web/useWorkFlowForm';
-  import { SystemForm } from '/@/components/SystemForm/index';
-  import { FormType } from '/@/enums/workflowEnum';
-  import { createFormEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
+    import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+    import { onBeforeUpdate, nextTick, onMounted, reactive, ref } from 'vue';
+    import { TaskApproveOpinion, ValidateForms } from '/@/model/workflow/bpmnConfig';
+    import { cloneDeep } from 'lodash-es';
+    import { GeneratorConfig } from '/@/model/generator/generatorConfig';
+    import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
+    import { changeFormJson } from '/@/hooks/web/useWorkFlowForm';
+    import { SystemForm } from '/@/components/SystemForm/index';
+    import { FormType } from '/@/enums/workflowEnum';
+    import { createFormEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
 
-  const props = withDefaults(
-    defineProps<{
-      disabled: boolean | undefined;
-      formInfos: Array<any>;
-      opinions?: Array<TaskApproveOpinion> | undefined;
-      opinionsComponents?: Array<string> | undefined;
-      formAssignmentData?: null | Recordable;
-    }>(),
-    {
-      disabled: false,
-      formInfos: () => {
-        return [];
-      },
-    },
-  );
-
-  const emits = defineEmits(['getFormConfigs']);
-
-  let uploadComponent: { ids: Array<string> } = reactive({ ids: [] });
-
-  let activeIndex = ref(0);
-  let itemRefs = ref([]) as any;
-  const setItemRef = (el: never) => {
-    itemRefs.value.push(el);
-  };
-
-  onBeforeUpdate(() => {
-    itemRefs.value = [];
-  });
-
-  let forms: {
-    formModels: Array<Recordable>;
-    configs: Array<{
-      formName: string;
-      formProps: {};
-      formModel: Recordable;
-      formKey: string;
-      validate: boolean;
-      formType: FormType;
-      workflowPermissions?: Array<any>;
-      opinions?: Array<any>;
-      opinionsComponents?: Array<any>;
-      systemComponent?: {
-        functionalModule: string;
-        functionName: string;
-        functionFormName: string;
-      };
-      formJson?: Array<any>;
-      isOldSystem?: boolean;
-    }>;
-    formEventConfigs: FormEventColumnConfig[];
-  } = reactive({
-    formModels: [],
-    configs: [],
-    formEventConfigs: [],
-  });
-  onMounted(async () => {
-    for await (let element of props.formInfos) {
-      let formModels = {};
-      if (element.formData) {
-        formModels = cloneDeep(element.formData);
-      }
-      // 参数赋值[赋值权限最大]
-      if (props.formAssignmentData) {
-        if (props.formAssignmentData[element.formConfig.formId]) {
-          formModels = { ...formModels, ...props.formAssignmentData[element.formConfig.formId] };
+    const props = withDefaults(
+        defineProps<{
+            disabled: boolean | undefined;
+            formInfos: Array<any>;
+            opinions?: Array<TaskApproveOpinion> | undefined;
+            opinionsComponents?: Array<string> | undefined;
+            formAssignmentData?: null | Recordable;
+        }>(),
+        {
+            disabled: false,
+            formInfos: () => {
+                return [];
+            }
         }
-      }
-      forms.formModels.push(formModels);
-      // 系统表单
-      if (element.formType == FormType.SYSTEM) {
-        forms.configs.push({
-          formName: element.formConfig.formName,
-          formProps: {},
-          formModel: formModels,
-          formKey: element.formConfig.key,
-          validate: true,
-          formType: element.formType,
-          workflowPermissions: element.formConfig.children,
-          opinions: props.opinions,
-          opinionsComponents: props.opinionsComponents,
-          systemComponent: {
-            functionalModule: element.functionalModule,
-            functionName: element.functionName,
-            functionFormName: 'Form',
-          },
-          formJson: element.formJson,
-          isOldSystem: false,
-        });
-        // 上传组件Id集合
-        setTimeout(() => {
-          getSystemUploadComponentIds();
-        }, 0);
-      } else {
-        const model = JSON.parse(element.formJson) as GeneratorConfig;
-        const { formJson, formEventConfig } = model;
-        if (formEventConfig) {
-          forms.formEventConfigs.push(formEventConfig);
+    );
 
-          //初始化表单
-          await createFormEvent(formEventConfig, formModels, true);
-          //加载表单
-          await loadFormEvent(formEventConfig, formModels, true);
+    const emits = defineEmits(['getFormConfigs']);
 
-          //TODO 暂不放开 工作流没有获取表单数据这个步骤 获取表单数据
-          // getFormDataEvent(formEventConfig, formModels,true);
-        }
-        let formKey = element.formConfig.key;
+    let uploadComponent: { ids: Array<string> } = reactive({ ids: [] });
 
-        let config = {
-          formName: element.formConfig.formName,
-          formProps: {},
-          formModel: {},
-          formKey,
-          validate: true,
-          formType: element.formType,
-        };
-        let isViewProcess = props.disabled;
-        let { buildOptionJson, uploadComponentIds } = changeFormJson(
-          {
-            formJson,
-            formConfigChildren: element.formConfig.children,
-            formConfigKey: element.formConfig.key,
-            opinions: props.opinions,
-            opinionsComponents: props.opinionsComponents,
-          },
-          isViewProcess,
-          uploadComponent.ids,
-        );
-        uploadComponent.ids = uploadComponentIds;
-        if (buildOptionJson.schemas) {
-          config.formProps = buildOptionJson;
-          forms.configs.push(config);
-        }
-      }
-      // });
-    }
+    let activeIndex = ref(0);
+    let itemRefs = ref([]) as any;
+    const setItemRef = (el: never) => {
+        itemRefs.value.push(el);
+    };
 
-    await nextTick();
-    setTimeout(() => {
-      setFormModel();
-    }, 0);
-    emits('getFormConfigs', forms.configs.length ? forms.configs[activeIndex.value] : null);
-  });
-
-  function setFormModel() {
-    for (let index = 0; index < itemRefs.value.length; index++) {
-      if (itemRefs.value[index]) {
-        itemRefs.value[index].setFieldsValue(forms.formModels[index]);
-      }
-    }
-  }
-
-  async function setFormData(formData) {
-    await nextTick();
-    forms.formModels = formData;
-    setFormModel();
-  }
-
-  function getSystemUploadComponentIds() {
-    for (let index = 0; index < itemRefs.value.length; index++) {
-      if (itemRefs.value[index] && itemRefs.value[index].getUploadComponentIds) {
-        let ids = itemRefs.value[index].getUploadComponentIds();
-        uploadComponent.ids = [...uploadComponent.ids, ...ids];
-      }
-    }
-  }
-
-  // 获取上传组件的字段值集合
-  function getUploadComponentIds() {
-    return uploadComponent.ids;
-  }
-
-  async function validateForm() {
-    let validateForms: ValidateForms = [];
-    for (let index = 0; index < itemRefs.value.length; index++) {
-      if (itemRefs.value[index]) {
-        try {
-          await itemRefs.value[index]?.validate();
-          validateForms.push({
-            validate: true,
-            msgs: [],
-            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,
-          });
-          forms.configs[index].validate = false;
-        }
-      }
-    }
-    return validateForms;
-  }
-
-  async function saveDraftData() {
-    let formModes = {};
-
-    for (let index = 0; index < forms.configs.length; index++) {
-      const ele = forms.configs[index];
-      if (ele.formType == FormType.SYSTEM) {
-        let values = await itemRefs.value[index].validate();
-        formModes[ele.formKey] = values;
-      } else {
-        formModes[ele.formKey] = ele.formModel;
-      }
-    }
-    return formModes;
-  }
-
-  async function getFormModels() {
-    let formModes = {};
-
-    for (let index = 0; index < forms.configs.length; index++) {
-      const ele = forms.configs[index];
-      if (ele.formType == FormType.SYSTEM) {
-        let values = await itemRefs.value[index].workflowSubmit();
-        formModes[ele.formKey] = values;
-      } else {
-        formModes[ele.formKey] = ele.formModel;
-      }
-    }
-
-    // forms.configs.forEach((ele) => {
-    //   formModes[ele.formKey] = ele.formModel;
-    // });
-    forms.formEventConfigs.forEach(async (ele, i) => {
-      //此组件 获取数据 就是为了提交表单 所以 表单提交数据 事件 就此处执行
-      await submitFormEvent(ele, forms.configs[i]?.formModel);
+    onBeforeUpdate(() => {
+        itemRefs.value = [];
     });
-    return formModes;
-  }
 
-  function getSystemType() {
-    let system = {};
-    for (let index = 0; index < forms.configs.length; index++) {
-      const ele = forms.configs[index];
-      if (ele.formType == FormType.SYSTEM) {
-        system[ele.formKey] = itemRefs.value[index].getIsOldSystem();
-      }
+    let forms: {
+        formModels: Array<Recordable>;
+        configs: Array<{
+            formName: string;
+            formProps: {};
+            formModel: Recordable;
+            formKey: string;
+            validate: boolean;
+            formType: FormType;
+            workflowPermissions?: Array<any>;
+            opinions?: Array<any>;
+            opinionsComponents?: Array<any>;
+            systemComponent?: {
+                functionalModule: string;
+                functionName: string;
+                functionFormName: string;
+            };
+            formJson?: Array<any>;
+            isOldSystem?: boolean;
+        }>;
+        formEventConfigs: FormEventColumnConfig[];
+    } = reactive({
+        formModels: [],
+        configs: [],
+        formEventConfigs: []
+    });
+    onMounted(async () => {
+        for await (let element of props.formInfos) {
+            let formModels = {};
+            if (element.formData) {
+                formModels = cloneDeep(element.formData);
+            }
+            // 参数赋值[赋值权限最大]
+            if (props.formAssignmentData) {
+                if (props.formAssignmentData[element.formConfig.formId]) {
+                    formModels = { ...formModels, ...props.formAssignmentData[element.formConfig.formId] };
+                }
+            }
+            forms.formModels.push(formModels);
+            // 系统表单
+            if (element.formType == FormType.SYSTEM) {
+                forms.configs.push({
+                    formName: element.formConfig.formName,
+                    formProps: {},
+                    formModel: formModels,
+                    formKey: element.formConfig.key,
+                    validate: true,
+                    formType: element.formType,
+                    workflowPermissions: element.formConfig.children,
+                    opinions: props.opinions,
+                    opinionsComponents: props.opinionsComponents,
+                    systemComponent: {
+                        functionalModule: element.functionalModule,
+                        functionName: element.functionName,
+                        functionFormName: 'Form'
+                    },
+                    formJson: element.formJson,
+                    isOldSystem: false
+                });
+                // 上传组件Id集合
+                setTimeout(() => {
+                    getSystemUploadComponentIds();
+                }, 0);
+            } else {
+                const model = JSON.parse(element.formJson) as GeneratorConfig;
+                const { formJson, formEventConfig } = model;
+                if (formEventConfig) {
+                    forms.formEventConfigs.push(formEventConfig);
+
+                    //初始化表单
+                    await createFormEvent(formEventConfig, formModels, true);
+                    //加载表单
+                    await loadFormEvent(formEventConfig, formModels, true);
+
+                    //TODO 暂不放开 工作流没有获取表单数据这个步骤 获取表单数据
+                    // getFormDataEvent(formEventConfig, formModels,true);
+                }
+                let formKey = element.formConfig.key;
+
+                let config = {
+                    formName: element.formConfig.formName,
+                    formProps: {},
+                    formModel: {},
+                    formKey,
+                    validate: true,
+                    formType: element.formType
+                };
+                let isViewProcess = props.disabled;
+                let { buildOptionJson, uploadComponentIds } = changeFormJson(
+                    {
+                        formJson,
+                        formConfigChildren: element.formConfig.children,
+                        formConfigKey: element.formConfig.key,
+                        opinions: props.opinions,
+                        opinionsComponents: props.opinionsComponents
+                    },
+                    isViewProcess,
+                    uploadComponent.ids
+                );
+                uploadComponent.ids = uploadComponentIds;
+                if (buildOptionJson.schemas) {
+                    config.formProps = buildOptionJson;
+                    forms.configs.push(config);
+                }
+            }
+            // });
+        }
+
+        await nextTick();
+        setTimeout(() => {
+            setFormModel();
+        }, 0);
+        emits('getFormConfigs', forms.configs.length ? forms.configs[activeIndex.value] : null);
+    });
+
+    function setFormModel() {
+        for (let index = 0; index < itemRefs.value.length; index++) {
+            if (itemRefs.value[index]) {
+                itemRefs.value[index].setFieldsValue(forms.formModels[index]);
+            }
+        }
     }
-    return system;
-  }
 
-  defineExpose({
-    validateForm,
-    getFormModels,
-    saveDraftData,
-    setFormData,
-    getUploadComponentIds,
-    getSystemType,
-  });
+    async function setFormData(formData) {
+        await nextTick();
+        forms.formModels = formData;
+        setFormModel();
+    }
+
+    function getSystemUploadComponentIds() {
+        for (let index = 0; index < itemRefs.value.length; index++) {
+            if (itemRefs.value[index] && itemRefs.value[index].getUploadComponentIds) {
+                let ids = itemRefs.value[index].getUploadComponentIds();
+                uploadComponent.ids = [...uploadComponent.ids, ...ids];
+            }
+        }
+    }
+
+    // 获取上传组件的字段值集合
+    function getUploadComponentIds() {
+        return uploadComponent.ids;
+    }
+
+    async function validateForm() {
+        let validateForms: ValidateForms = [];
+        for (let index = 0; index < itemRefs.value.length; index++) {
+            if (itemRefs.value[index]) {
+                try {
+                    await itemRefs.value[index]?.validate();
+                    validateForms.push({
+                        validate: true,
+                        msgs: [],
+                        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
+                    });
+                    forms.configs[index].validate = false;
+                }
+            }
+        }
+        return validateForms;
+    }
+
+    async function saveDraftData() {
+        let formModes = {};
+
+        for (let index = 0; index < forms.configs.length; index++) {
+            const ele = forms.configs[index];
+            if (ele.formType == FormType.SYSTEM) {
+                let values = await itemRefs.value[index].validate();
+                formModes[ele.formKey] = values;
+            } else {
+                formModes[ele.formKey] = ele.formModel;
+            }
+        }
+        return formModes;
+    }
+
+    async function getFormModels() {
+        let formModes = {};
+
+        for (let index = 0; index < forms.configs.length; index++) {
+            const ele = forms.configs[index];
+            if (ele.formType == FormType.SYSTEM) {
+                let values = await itemRefs.value[index].workflowSubmit();
+                formModes[ele.formKey] = values;
+            } else {
+                formModes[ele.formKey] = ele.formModel;
+            }
+        }
+
+        // forms.configs.forEach((ele) => {
+        //   formModes[ele.formKey] = ele.formModel;
+        // });
+        forms.formEventConfigs.forEach(async (ele, i) => {
+            //此组件 获取数据 就是为了提交表单 所以 表单提交数据 事件 就此处执行
+            await submitFormEvent(ele, forms.configs[i]?.formModel);
+        });
+        return formModes;
+    }
+
+    function getSystemType() {
+        let system = {};
+        for (let index = 0; index < forms.configs.length; index++) {
+            const ele = forms.configs[index];
+            if (ele.formType == FormType.SYSTEM) {
+                system[ele.formKey] = itemRefs.value[index].getIsOldSystem();
+            }
+        }
+        return system;
+    }
+
+    defineExpose({
+        validateForm,
+        getFormModels,
+        saveDraftData,
+        setFormData,
+        getUploadComponentIds,
+        getSystemType
+    });
 </script>
 
 <style lang="less" scoped>
-  .form-container {
-    display: flex;
-    height: 100vh;
-    margin-top: -10px;
-  }
-
-  .box {
-    width: 100%;
-
-    .form-left {
-      float: left;
-      height: 100vh;
-      box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
-      z-index: 9998;
-
-      .resize-shrink-sidebar {
-        cursor: col-resize;
+    .form-container {
         display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 9999;
+        height: 100vh;
+        margin-top: -10px;
+    }
 
-        .shrink-sidebar-text {
-          padding: 0 2px;
-          background: #f2f2f2;
-          border-radius: 10px;
+    .box {
+        .form-left {
+            float: left;
+            height: 100vh;
+            box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
+            z-index: 9998;
+
+            .resize-shrink-sidebar {
+                cursor: col-resize;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                z-index: 9999;
+
+                .shrink-sidebar-text {
+                    padding: 0 2px;
+                    background: #f2f2f2;
+                    border-radius: 10px;
+                }
+            }
+
+            .left-box {
+                margin-right: 10px;
+                border-right: 1px solid #f0f0f0;
+                height: 80vh;
+            }
+
+            span {
+                font-size: 16px;
+                font-weight: 500;
+                padding-left: 4px;
+            }
+
+            .form-name {
+                height: 36px;
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                cursor: pointer;
+                color: rgb(102 102 102 / 99.6%);
+                margin-right: -2px;
+                padding-left: 4px;
+            }
+
+            .actived {
+                border-right: 1px solid #5e95ff;
+            }
+
+            .dot {
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background-color: transparent;
+                margin-right: 4px;
+            }
+
+            .validate {
+                background-color: @clear-color;
+            }
+
+            .icon-box {
+                font-size: 16px;
+                margin-right: 4px;
+            }
+
+            .left-title {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                position: relative;
+                padding: 10px 4px 10px 0;
+                top: 0;
+                left: 0;
+
+                .in-or-out {
+                    position: absolute;
+                    right: 10px;
+                }
+            }
         }
-      }
 
-      .left-box {
-        margin-right: 10px;
-        border-right: 1px solid #f0f0f0;
-        height: 80vh;
-      }
-
-      span {
-        font-size: 16px;
-        font-weight: 500;
-        padding-left: 4px;
-      }
-
-      .form-name {
-        height: 36px;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        cursor: pointer;
-        color: rgb(102 102 102 / 99.6%);
-        margin-right: -2px;
-        padding-left: 4px;
-      }
-
-      .actived {
-        border-right: 1px solid #5e95ff;
-      }
-
-      .dot {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background-color: transparent;
-        margin-right: 4px;
-      }
-
-      .validate {
-        background-color: @clear-color;
-      }
-
-      .icon-box {
-        font-size: 16px;
-        margin-right: 4px;
-      }
-
-      .left-title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        position: relative;
-        padding: 10px 4px 10px 0;
-        top: 0;
-        left: 0;
-
-        .in-or-out {
-          position: absolute;
-          right: 10px;
+        .form-right {
+            padding-top: 20px;
         }
-      }
     }
-
-    .form-box {
-      overflow: auto;
-      height: calc(100vh - 120px);
-    }
-
-    .form-right {
-      width: 100%;
-      padding-top: 20px;
-    }
-  }
 </style>
diff --git a/src/views/secondDev/createFlow.vue b/src/views/secondDev/createFlow.vue
index d234333..ca6e284 100644
--- a/src/views/secondDev/createFlow.vue
+++ b/src/views/secondDev/createFlow.vue
@@ -1,25 +1,50 @@
 <template>
-    <div class="itc-create-flow">
-        <div class="toolbar">
-            <a-space wrap>
-                <a-button>提交</a-button>
-                <a-button>暂存</a-button>
-                <a-button>关闭</a-button>
-                <a-button>打印</a-button>
-                <a-button>流程图</a-button>
-            </a-space>
-        </div>
-        <div class="flow-content">
-            <FormInformation
-                :key="randKey"
-                ref="formInformation"
-                :disabled="false"
-                :formAssignmentData="data.formAssignmentData"
-                :formInfos="data.formInfos"
-                :opinions="data.opinions"
-                :opinionsComponents="data.opinionsComponents"
-            />
+    <div class="page-bg-wrap">
+        <div class="itc-create-flow">
+            <div class="toolbar">
+                <a-space :size="10" wrap>
+                    <a-button style="margin-right: 10px">
+                        <slot name="icon">
+                            <close-outlined />
+                        </slot>
+                        关闭
+                    </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 :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>
 
@@ -27,8 +52,10 @@
     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 (
-                    formDataJson &&
-                    item.formConfig &&
-                    item.formConfig.key &&
-                    formDataJson[item.formConfig.key]
-                ) {
+                if (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>