chore: 完善请假申请

apps/web-antd/src/api/workflow/task/index.ts

@@ -1,4 +1,8 @@
-import type { TaskInfo } from './model';
+import type {
+  CompleteTaskReqData,
+  StartWorkFlowReqData,
+  TaskInfo,
+} from './model';
 
 import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
@@ -8,15 +12,18 @@ import { requestClient } from '#/api/request';
  * 启动任务
  * @param data
  */
-export function startWorkFlow(data: any) {
+export function startWorkFlow(data: StartWorkFlowReqData) {
-  return requestClient.postWithMsg<void>('/workflow/task/startWorkFlow', data);
+  return requestClient.post<{
+    processInstanceId: string;
+    taskId: string;
+  }>('/workflow/task/startWorkFlow', data);
 }
 
 /**
  * 办理任务
  * @param data
  */
-export function completeTask(data: any) {
+export function completeTask(data: CompleteTaskReqData) {
   return requestClient.postWithMsg<void>('/workflow/task/completeTask', data);
 }
 

apps/web-antd/src/api/workflow/task/model.d.ts

@@ -27,3 +27,26 @@ export interface TaskInfo {
   createBy: string;
   createByName: string;
 }
+
+export interface CompleteTaskReqData {
+  messageType: string[];
+  flowCopyList: { userId: string; userName: string }[];
+  taskId: ID;
+  taskVariables: Record<string, any>;
+  variables: any;
+}
+
+export interface StartWorkFlowReqData {
+  /**
+   * 业务ID
+   */
+  businessKey: ID;
+  /**
+   * flowCode
+   */
+  flowCode: string;
+  /**
+   * 流程变量
+   */
+  variables: Record<string, any>;
+}

apps/web-antd/src/views/workflow/components/apply-modal.vue

@@ -0,0 +1,100 @@
+<!-- 流程发起(启动)的弹窗 -->
+
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+
+import { cloneDeep } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { completeTask } from '#/api/workflow/task';
+
+interface Emits {
+  /**
+   * 完成
+   */
+  complete: [];
+}
+
+const emit = defineEmits<Emits>();
+
+interface ModalProps {
+  taskId: string;
+  taskVariables: Record<string, any>;
+  variables?: any; // 这个干啥的
+}
+
+const [BasicModal, modalApi] = useVbenModal({
+  title: '流程发起',
+  fullscreenButton: false,
+  onConfirm: handleSubmit,
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 100,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: [
+    {
+      fieldName: 'messageType',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          { label: '站内信', value: '1', disabled: true },
+          { label: '邮件', value: '2' },
+          { label: '短信', value: '3' },
+        ],
+      },
+      label: '通知方式',
+      defaultValue: ['1'],
+    },
+    {
+      fieldName: 'flowCopyList',
+      component: 'Input',
+      defaultValue: [],
+      label: '抄送人',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+    const { messageType, flowCopyList } = cloneDeep(await formApi.getValues());
+    const { taskId, taskVariables, variables } =
+      modalApi.getData() as ModalProps;
+    const data = {
+      messageType,
+      flowCopyList,
+      taskId,
+      taskVariables,
+      variables,
+    };
+    await completeTask(data);
+    modalApi.close();
+    emit('complete');
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+</script>
+
+<template>
+  <BasicModal>
+    <BasicForm>
+      <template #flowCopyList>
+        <div>TODO: 等待组件开发</div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>

apps/web-antd/src/views/workflow/components/index.ts

@@ -1,3 +1,5 @@
+export { default as applyModal } from './apply-modal.vue';
 export { default as ApprovalCard } from './approval-card.vue';
 export { default as ApprovalPanel } from './approval-panel.vue';
 export { default as ApprovalTimeline } from './approval-timeline.vue';
+export { default as UserSelectModal } from './user-select-modal.vue';

apps/web-antd/src/views/workflow/components/user-select-modal.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Transfer } from 'ant-design-vue';
+
+import { userList } from '#/api/system/user';
+
+defineOptions({
+  name: 'UserSelectModal',
+  inheritAttrs: false,
+});
+
+const [BasicModal] = useVbenModal({
+  title: '选择',
+  class: 'w-[800px]',
+});
+
+const targetKeys = ref<string[]>([]);
+
+const dataSource = ref<Awaited<ReturnType<typeof userList>>['rows']>([]);
+onMounted(async () => {
+  const resp = await userList({ pageNum: 1, pageSize: 10 });
+  dataSource.value = resp.rows.map((item) => ({
+    ...item,
+    userId: String(item.userId),
+  }));
+});
+</script>
+
+<template>
+  <BasicModal>
+    <div class="min-h-[350px]">
+      <Transfer
+        v-model:target-keys="targetKeys"
+        :data-source="dataSource"
+        :pagination="true"
+        :render="(item) => item.nickName"
+        :row-key="(record) => record.userId"
+        class="h-full"
+      />
+    </div>
+  </BasicModal>
+</template>

apps/web-antd/src/views/workflow/leave/api/index.ts

@@ -40,7 +40,7 @@ export function leaveInfo(id: ID) {
  * @returns void
  */
 export function leaveAdd(data: LeaveForm) {
-  return requestClient.postWithMsg<void>('/workflow/leave', data);
+  return requestClient.postWithMsg<LeaveVO>('/workflow/leave', data);
 }
 
 /**
@@ -49,7 +49,7 @@ export function leaveAdd(data: LeaveForm) {
  * @returns void
  */
 export function leaveUpdate(data: LeaveForm) {
-  return requestClient.putWithMsg<void>('/workflow/leave', data);
+  return requestClient.putWithMsg<LeaveVO>('/workflow/leave', data);
 }
 
 /**

apps/web-antd/src/views/workflow/leave/data.tsx

@@ -1,4 +1,4 @@
-import type { FormSchemaGetter } from '#/adapter/form';
+import type { FormSchemaGetter, VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { DictEnum } from '@vben/constants';
@@ -18,6 +18,13 @@ const leaveTypeOptions = [
   { label: '其他', value: '7' },
 ];
 
+export const leaveFlowOptions = [
+  { label: '请假流程-普通', value: 'leave1' },
+  { label: '请假流程-排他网关', value: 'leave2' },
+  { label: '请假流程-并行网关', value: 'leave3' },
+  { label: '请假流程-会签', value: 'leave4' },
+];
+
 export const querySchema: FormSchemaGetter = () => [
   {
     component: 'InputNumber',
@@ -86,7 +93,9 @@ export const columns: VxeGridProps['columns'] = [
   },
 ];
 
-export const modalSchema: FormSchemaGetter = () => [
+export const modalSchema: (isEdit: boolean) => VbenFormSchema[] = (
+  isEdit: boolean,
+) => [
   {
     label: '主键',
     fieldName: 'id',
@@ -96,6 +105,22 @@ export const modalSchema: FormSchemaGetter = () => [
       triggerFields: [''],
     },
   },
+  {
+    label: '流程类型',
+    fieldName: 'flowType',
+    component: 'Select',
+    help: '这里仅仅为了发起流程方便, 实际不应该包含此字段',
+    componentProps: {
+      options: leaveFlowOptions,
+      getPopupContainer,
+    },
+    defaultValue: 'leave1',
+    rules: 'selectRequired',
+    dependencies: {
+      show: () => isEdit,
+      triggerFields: [''],
+    },
+  },
   {
     label: '请假类型',
     fieldName: 'leaveType',

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

@@ -3,7 +3,7 @@ import type { LeaveForm } from './api/model';
 
 import { useRouter } from 'vue-router';
 
-import { Page, type VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -15,6 +15,7 @@ import {
 } from '#/adapter/vxe-table';
 import { commonDownloadExcel } from '#/utils/file/download';
 
+import userSelectModal from '../components/user-select-modal.vue';
 import { leaveExport, leaveList, leaveRemove } from './api';
 import { columns, querySchema } from './data';
 
@@ -103,6 +104,13 @@ function handleDownloadExcel() {
     },
   );
 }
+const [UserSelectModal, testApi] = useVbenModal({
+  connectedComponent: userSelectModal,
+});
+
+function handleTest() {
+  testApi.open();
+}
 </script>
 
 <template>
@@ -110,6 +118,7 @@ function handleDownloadExcel() {
     <BasicTable table-title="请假申请列表">
       <template #toolbar-tools>
         <Space>
+          <a-button @click="handleTest">test选人</a-button>
           <a-button
             v-access:code="['workflow:leave:export']"
             @click="handleDownloadExcel"
@@ -159,5 +168,6 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
+    <UserSelectModal />
   </Page>
 </template>

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();
+    await handleSaveOrUpdate();
-    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);
     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>