add 添加动态表单提交流程

src/api/workflow/businessForm/types.ts

@@ -18,6 +18,37 @@ export interface BusinessFormVO {
    * 表单名称
    */
   formName: string;
+  wfFormDefinitionVo: {
+      /**
+       * 主键
+       */
+      id: string | number;
+
+      /**
+       * 动态表单id
+       */
+      formId: string | number;
+
+      /**
+       * 流程定义id
+       */
+      processDefinitionKey: string;
+
+      /**
+       * 流程定义名称
+       */
+      processDefinitionName: string;
+
+      /**
+       * 流程定义id
+       */
+      processDefinitionId: string | number;
+
+      /**
+       * 流程定义版本
+       */
+      processDefinitionVersion: number;
+  };
 
 }
 

src/components/Process/approvalRecord.vue

@@ -1,35 +1,26 @@
 <template>
-  <el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" append-to-body :close-on-click-modal="false">
+  <el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" append-to-body
+    :close-on-click-modal="false">
     <div v-loading="loading">
       <div style="width: 100%;height: 300px;overflow: auto;position: relative;">
-        <div
+        <div v-for="(graphic, index) in graphicInfoVos" :key="index" :style="{
-          v-for="(graphic, index) in graphicInfoVos"
+          position: 'absolute',
-          :key="index"
+          left: `${graphic.x}px`,
-          :style="{
+          top: `${graphic.y}px`,
-                    position: 'absolute',
+          width: `${graphic.width}px`,
-                    left: `${graphic.x}px`,
+          height: `${graphic.height}px`,
-                    top: `${graphic.y}px`,
+          cursor: 'pointer',
-                    width: `${graphic.width}px`,
+          zIndex: 99
-                    height: `${graphic.height}px`,
+        }" @mouseover="handleMouseOver(graphic)" @mouseleave="handleMouseLeave()"></div>
-                    cursor: 'pointer',
-                    zIndex: 99
-                }"
-          @mouseover="handleMouseOver(graphic)"
-          @mouseleave="handleMouseLeave()"
-        ></div>
         <!-- 弹出的 div 元素 -->
-        <div
+        <div v-show="popupVisible" class="triangle" :style="{
-          v-show="popupVisible"
+          position: 'absolute',
-          class="triangle"
+          left: `${graphicX}px`,
-          :style="{
+          top: `${graphicY}px`,
-                    position: 'absolute',
+          backgroundColor: '#fff',
-                    left: `${graphicX}px`,
+          padding: '10px',
-                    top: `${graphicY}px`,
+          zIndex: 100
-                    backgroundColor: '#fff',
+        }">
-                    padding: '10px',
-                    zIndex: 100
-                }"
-        >
           <p>审批人员: {{ nodeInfo.nickName }}</p>
           <p>节点状态：{{ nodeInfo.status }}</p>
           <p>开始时间：{{ nodeInfo.startTime }}</p>

src/components/Process/submitVerify.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" draggable :close-on-click-modal="false">
+  <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" draggable :before-close="cancel"
+    :close-on-click-modal="false">
     <el-form :model="form" label-width="120px" v-loading="loading">
       <el-form-item label="消息提醒">
         <el-checkbox-group v-model="form.messageType">

src/views/workflow/businessForm/index.vue

@@ -61,7 +61,7 @@
 <script setup name="BusinessForm" lang="ts">
 import { queryList, getForm } from "@/api/workflow/form";
 import { FormVO } from "@/api/workflow/form/types";
-import { addBusinessForm } from '@/api/workflow/businessForm';
+import { addBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
 import { BusinessFormForm } from '@/api/workflow/businessForm/types';
 import { startWorkFlow } from '@/api/workflow/task';
 import SubmitVerify from '@/components/Process/submitVerify.vue';
@@ -89,14 +89,14 @@ const queryParams = ref<Record<string, any>>({
   formName: ''
 });
 
-const initFormData: BusinessFormForm = {
+const initFormData = ref<BusinessFormForm>({
   id: undefined,
   applyCode: undefined,
   formId: undefined,
   formName: undefined,
   content: undefined,
   contentValue: undefined
-}
+})
 
 const submitFormData = ref<Record<string, any>>({
   businessKey: '',
@@ -125,12 +125,12 @@ const queryFromList = async () => {
 /** 申请单据 */
 const handleAppay = async (row?: FormVO) => {
   render.visible = true;
-  fromLoading.value = false
+  fromLoading.value = true
   render.title = row?.formName;
   const formId = row?.formId || ids.value[0];
-  initFormData.formId = row?.formId
+  initFormData.value.formId = row?.formId
-  initFormData.formName = row?.formName
+  initFormData.value.formName = row?.formName
-  initFormData.content = row?.content
+  initFormData.value.content = row?.content
   const res = await getForm(formId);
   if (vfRenderRef.value) {
     fromLoading.value = false
@@ -147,9 +147,9 @@ const submitData = (status: string) => {
     fromLoading.value = true
     buttonLoading.value = true;
     vfRenderRef.value.getFormData().then((formData) => {
-      initFormData.contentValue = JSON.stringify(formData)
+      initFormData.value.contentValue = JSON.stringify(formData)
       if ('draft' === status) {
-        addBusinessForm(initFormData).then(res => {
+        addBusinessForm(initFormData.value).then(res => {
           proxy?.$modal.msgSuccess("暂存成功");
           render.visible = false;
           buttonLoading.value = false;
@@ -159,10 +159,19 @@ const submitData = (status: string) => {
           proxy?.$modal.msgError("未绑定流程!");
           buttonLoading.value = false;
           fromLoading.value = false;
+          return
+        }
+        if (initFormData.value && initFormData.value.id) {
+          updateBusinessForm(initFormData.value).then(res => {
+            initFormData.value = res.data
+            handleStartWorkFlow(res.data)
+          })
+        } else {
+          addBusinessForm(initFormData.value).then(res => {
+            initFormData.value = res.data
+            handleStartWorkFlow(res.data)
+          })
         }
-        addBusinessForm(initFormData).then(res => {
-          handleStartWorkFlow(res.data)
-        })
       }
     })
   }

src/views/workflow/businessForm/list.vue

@@ -73,13 +73,18 @@
         </span>
       </template>
     </el-dialog>
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" @submitCallback="submitCallback" @cancelCallback="cancelCallback" />
   </div>
 </template>
 
 <script setup name="BusinessForm" lang="ts">
-import { listBusinessForm, getBusinessForm, delBusinessForm, addBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
+import { listBusinessForm, getBusinessForm, delBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
 import { BusinessFormVO, BusinessFormQuery, BusinessFormForm } from '@/api/workflow/businessForm/types';
-
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import { startWorkFlow } from '@/api/workflow/task';
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const businessFormList = ref<BusinessFormVO[]>([]);
@@ -92,6 +97,7 @@ const applyCodes = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
+const processDefinitionKey = ref<string>('');
 
 const queryFormRef = ref<ElFormInstance>();
 const vfRenderRef = ref(null);
@@ -124,6 +130,12 @@ const data = reactive<PageData<BusinessFormForm, BusinessFormQuery>>({
 
 const { queryParams, form, rules } = toRefs(data);
 
+const submitFormData = ref<Record<string, any>>({
+  businessKey: '',
+  processKey: '',
+  variables: {}
+});
+
 /** 查询发起流程列表 */
 const getList = async () => {
   loading.value = true;
@@ -158,12 +170,17 @@ const handleSelectionChange = (selection: BusinessFormVO[]) => {
 const handleUpdate = async (row?: BusinessFormVO) => {
   const _id = row?.id || ids.value[0]
   fromLoading.value = true
+  buttonLoading.value = true
   render.visible = true;
   const res = await getBusinessForm(_id);
-  Object.assign(form.value, res.data);
+  form.value = res.data
   render.title = "修改单据";
+  if (res.data.wfFormDefinitionVo && res.data.wfFormDefinitionVo.processDefinitionKey) {
+    processDefinitionKey.value = res.data.wfFormDefinitionVo.processDefinitionKey
+  }
   if (vfRenderRef.value) {
     fromLoading.value = false
+    buttonLoading.value = false
     vfRenderRef.value.setFormJson(res.data.content);
     vfRenderRef.value.setFormData(JSON.parse(res.data.contentValue))
   }
@@ -173,20 +190,54 @@ const handleUpdate = async (row?: BusinessFormVO) => {
 const submitData = (status: string) => {
   if (vfRenderRef.value) {
     buttonLoading.value = true;
+    fromLoading.value = true;
     vfRenderRef.value.getFormData().then((formData) => {
-      initFormData.contentValue = JSON.stringify(formData)
+      form.value.contentValue = JSON.stringify(formData)
       if ('draft' === status) {
-        addBusinessForm(initFormData).then(res => {
+        updateBusinessForm(form.value).then(res => {
           proxy?.$modal.msgSuccess("暂存成功");
           render.visible = false;
           buttonLoading.value = false;
+          fromLoading.value = false;
         })
       } else {
-
+        if (!processDefinitionKey.value) {
+          proxy?.$modal.msgError("未绑定流程!");
+          buttonLoading.value = false;
+          fromLoading.value = false;
+          return
+        }
+        updateBusinessForm(form.value).then(res => {
+          handleStartWorkFlow(res.data)
+        })
       }
     })
   }
 }
+//提交申请
+const handleStartWorkFlow = async (data: any) => {
+  submitFormData.value.processKey = processDefinitionKey.value;
+  submitFormData.value.businessKey = data.id;
+  submitFormData.value.variables = data.variable;
+  startWorkFlow(submitFormData.value).then((response: any) => {
+    if (submitVerifyRef.value) {
+      submitVerifyRef.value.openDialog(response.data.taskId);
+    }
+  });
+};
+//提交回调
+const submitCallback = async () => {
+  render.visible = false;
+  buttonLoading.value = false;
+  fromLoading.value = false;
+  handleQuery();
+};
+//取消回调
+const cancelCallback = async () => {
+  buttonLoading.value = false;
+  fromLoading.value = false;
+};
+
 /** 删除按钮操作 */
 const handleDelete = async (row?: BusinessFormVO) => {
   const _ids = row?.id || ids.value;