chore: 完善请假申请

apps/web-antd/src/views/workflow/leave/leave-form.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
+import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
+
 import { computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+import { useVbenModal } from '@vben/common-ui';
+
 import { Card } from 'ant-design-vue';
 import dayjs from 'dayjs';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, omit } from 'lodash-es';
 
 import { useVbenForm } from '#/adapter/form';
+import { startWorkFlow } from '#/api/workflow/task';
 
-import { leaveAdd, leaveInfo } from './api';
+import { applyModal } from '../components';
+import { leaveAdd, leaveInfo, leaveUpdate } from './api';
 import { modalSchema } from './data';
 
 const route = useRoute();
@@ -19,7 +25,7 @@ const id = route.query?.id as string;
  * id存在&readonly时候
  */
 const showActionBtn = computed(() => {
-  return id && !readonly;
+  return !readonly;
 });
 
 const [BasicForm, formApi] = useVbenForm({
@@ -27,14 +33,14 @@ const [BasicForm, formApi] = useVbenForm({
     // 默认占满两列
     formItemClass: 'col-span-2',
     // 默认label宽度 px
-    labelWidth: 80,
+    labelWidth: 100,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
       disabled: readonly,
     },
   },
-  schema: modalSchema(),
+  schema: modalSchema(!readonly),
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
 });
@@ -50,22 +56,78 @@ onMounted(async () => {
 });
 
 const router = useRouter();
+
+/**
+ * 提取通用逻辑
+ */
+async function handleSaveOrUpdate() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  let data = cloneDeep(await formApi.getValues()) as any;
+  data = omit(data, 'flowType');
+  // 处理日期
+  data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
+  data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
+  if (id) {
+    data.id = id;
+    return await leaveUpdate(data);
+  } else {
+    return await leaveAdd(data);
+  }
+}
+
+const [ApplyModal, applyModalApi] = useVbenModal({
+  connectedComponent: applyModal,
+});
+/**
+ * 暂存 草稿状态
+ */
 async function handleTempSave() {
   try {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    const data = cloneDeep(await formApi.getValues()) as any;
-    // 处理日期
-    data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
-    data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
-    await leaveAdd(data);
+    await handleSaveOrUpdate();
     router.push('/demo/leave');
   } catch (error) {
     console.error(error);
   }
 }
+
+/**
+ * 保存业务 & 发起流程
+ */
+async function handleStartWorkFlow() {
+  try {
+    // 保存业务
+    const leaveResp = await handleSaveOrUpdate();
+    // 启动流程
+    const taskVariables = {
+      leaveDays: leaveResp!.leaveDays,
+      userList: ['1', '3', '4'],
+    };
+    const formValues = await formApi.getValues();
+    const flowCode = formValues?.flowType ?? 'leave1';
+    const startWorkFlowData: StartWorkFlowReqData = {
+      businessKey: leaveResp!.id,
+      flowCode,
+      variables: taskVariables,
+    };
+    const { taskId } = await startWorkFlow(startWorkFlowData);
+    // 打开窗口
+    applyModalApi.setData({
+      taskId,
+      taskVariables,
+      variables: {},
+    });
+    applyModalApi.open();
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function handleComplete() {
+  router.push('/demo/leave');
+}
 </script>
 
 <template>
@@ -74,8 +136,9 @@ async function handleTempSave() {
       <BasicForm />
       <div v-if="showActionBtn" class="flex justify-end gap-2">
         <a-button @click="handleTempSave">暂存</a-button>
-        <a-button type="primary">提交</a-button>
+        <a-button type="primary" @click="handleStartWorkFlow">提交</a-button>
       </div>
+      <ApplyModal @complete="handleComplete" />
     </div>
   </Card>
 </template>