diff --git a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
index 8d78c2c..ebc8892 100644
--- a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
+++ b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
@@ -1,12 +1,18 @@
 <template>
-  <BasicModal v-bind="$attrs"
-              defaultFullscreen
-              :canFullscreen="false"
-              @register="registerModal"
-              @ok="handleSubmit"
-              @visible-change="handleVisibleChange"
+  <BasicModal
+    v-bind="$attrs"
+    defaultFullscreen
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    @register="registerModal"
+    @visible-change="handleVisibleChange"
   >
     <div id="formDesign"/>
+    <template #centerFooter>
+      <a-button type="primary" @click="handleSubmitForm(0)">保存草稿</a-button>
+      <a-button type="primary" @click="handleSubmitForm(1)">保存并发布</a-button>
+      <a-button danger type="primary" @click="closeModal">放弃</a-button>
+    </template>
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -17,21 +23,33 @@
   import { GlStateEnum } 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 { FormDefinitionJson } from '/@/api/platform/workflow/extension/entity/formDefinitionJson';
 
   interface TableState {
     tag: string;
     formDesignApp: MicroApp;
+    form: Partial<FormDefinitionJson>;
   }
 
   const state = reactive<TableState>({
     tag: '',
-    formDesignApp: undefined!
+    formDesignApp: undefined!,
+    form: {
+      id: undefined!,
+      formDefinitionId: undefined!,
+      json: undefined!,
+      version: undefined!,
+      status: undefined!,
+      isPrimary: undefined!
+    },
   });
 
   const formDesignProps = {
     undoRedo: false,
     style: { height: 'calc(100vh - 160px)' },
-    toolbar: ['clear', 'preview']
+    toolbar: ['clear', 'preview'],
+    options: {}
   };
   const emit = defineEmits(['success', 'register']);
   const microAppStore = useMicroAppStore();
@@ -44,8 +62,10 @@
         [GlStateEnum.FORM_DESIGN_PROPS_KEY]: formDesignProps
       }
     }), { sandbox: { experimentalStyleIsolation: true }});
+    state.form = {};
     state.tag = data._tag;
     const id = data.record?.id;
+    state.form.formDefinitionId = data.record?.formDefinitionId;
     const props: Partial<ModalProps> = { confirmLoading: false };
     switch (state.tag) {
       case 'add':
@@ -53,6 +73,8 @@
         break;
       case 'edit':
         props.title = '编辑流程表单';
+        state.form = await getFormDefinitionJson(id);
+        state.form.json && (formDesignProps.options = state.form.json);
         break;
     }
     setModalProps(props);
@@ -63,15 +85,21 @@
   }
 
   /** 处理弹出框提交 */
-  async function handleSubmit() {
+  async function handleSubmitForm(status: number) {
     try {
+      const formRef = microAppStore.getFormDesignApp.getFormDesignRef();
+      state.form.json =  formRef.getWidgetFormJson();
+      this.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;
       }
       // 处理提交完成之后逻辑