From 4a64b75fb80ced9105eea718b2e61dee573f472d Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 20 Aug 2025 11:04:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20drawer=E5=AE=9E=E7=8E=B0=E8=AF=B7?=
 =?UTF-8?q?=E5=81=87=E6=B5=81=E7=A8=8B=20&=20=E9=87=8D=E6=96=B0=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/workflow/leave/data.tsx         |  35 ++--
 .../web-antd/src/views/workflow/leave/hook.ts |  33 +++
 .../src/views/workflow/leave/index.vue        |  36 +++-
 .../src/views/workflow/leave/leave-drawer.vue | 190 ++++++++++++++++++
 .../src/views/workflow/leave/leave-form.vue   |   9 +-
 .../src/views/workflow/leave/leaveEdit.vue    |  36 +++-
 6 files changed, 307 insertions(+), 32 deletions(-)
 create mode 100644 apps/web-antd/src/views/workflow/leave/hook.ts
 create mode 100644 apps/web-antd/src/views/workflow/leave/leave-drawer.vue

diff --git a/apps/web-antd/src/views/workflow/leave/data.tsx b/apps/web-antd/src/views/workflow/leave/data.tsx
index 5f6b3226..061b825b 100644
--- a/apps/web-antd/src/views/workflow/leave/data.tsx
+++ b/apps/web-antd/src/views/workflow/leave/data.tsx
@@ -10,12 +10,12 @@ import { OptionsTag } from '#/components/table';
 import { renderDict } from '#/utils/render';
 
 export const leaveTypeOptions = [
-  { label: '病假', value: '1' },
-  { label: '事假', value: '2' },
-  { label: '年假', value: '3' },
-  { label: '婚假', value: '4' },
-  { label: '产假', value: '5' },
-  { label: '其他', value: '7' },
+  { label: '病假 😷', value: '1' },
+  { label: '事假 🖥', value: '2' },
+  { label: '年假 🏝', value: '3' },
+  { label: '婚假 💒', value: '4' },
+  { label: '产假 🤰', value: '5' },
+  { label: '其他 🤔', value: '7' },
 ];
 
 export const leaveFlowOptions = [
@@ -96,7 +96,7 @@ export const columns: VxeGridProps['columns'] = [
   },
 ];
 
-export const modalSchema: () => VbenFormSchema[] = () => [
+export const formSchema: () => VbenFormSchema[] = () => [
   {
     label: '主键',
     fieldName: 'id',
@@ -129,21 +129,17 @@ export const modalSchema: () => VbenFormSchema[] = () => [
     componentProps: {
       options: [
         {
-          label: '前端发起(可选审批人, 选抄送人, 上传附件)',
+          label: '前端发起 (可选审批人, 选抄送人, 上传附件)',
           value: 'frontend',
         },
-        { label: '后端发起(自行编写构造发起参数)', value: 'backend' },
+        {
+          label: '后端发起 (自行编写后端逻辑, 由后端发起流程)',
+          value: 'backend',
+        },
       ],
+      getPopupContainer,
     },
     defaultValue: 'frontend',
-    dependencies: {
-      componentProps: (model) => {
-        return {
-          disabled: model.id,
-        };
-      },
-      triggerFields: ['id'],
-    },
   },
   {
     label: '请假类型',
@@ -154,7 +150,6 @@ export const modalSchema: () => VbenFormSchema[] = () => [
       getPopupContainer,
     },
     rules: 'selectRequired',
-    formItemClass: 'col-span-1',
   },
   {
     label: '开始时间',
@@ -176,7 +171,6 @@ export const modalSchema: () => VbenFormSchema[] = () => [
       };
     },
     rules: 'required',
-    formItemClass: 'col-span-1',
   },
   {
     label: '请假天数',
@@ -185,12 +179,11 @@ export const modalSchema: () => VbenFormSchema[] = () => [
     componentProps: {
       disabled: true,
     },
-    rules: 'required',
+    // rules: 'required',
   },
   {
     label: '请假原因',
     fieldName: 'remark',
     component: 'Textarea',
-    formItemClass: 'items-start',
   },
 ];
diff --git a/apps/web-antd/src/views/workflow/leave/hook.ts b/apps/web-antd/src/views/workflow/leave/hook.ts
new file mode 100644
index 00000000..d5fcf05e
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/leave/hook.ts
@@ -0,0 +1,33 @@
+import { onActivated, onMounted, ref } from 'vue';
+
+import { createGlobalState } from '@vueuse/core';
+
+export function useRouteIdEdit(callback: (id: string) => void, timeout = 500) {
+  const { businessId } = useQueryId();
+  function openEditFromRouteId() {
+    const id = businessId.value;
+    if (!id) {
+      return;
+    }
+    setTimeout(() => {
+      // 回调
+      callback?.(id);
+      // 执行完 清理id
+      businessId.value = '';
+    }, timeout);
+  }
+
+  onMounted(openEditFromRouteId);
+  onActivated(openEditFromRouteId);
+}
+
+/**
+ * 用来存储业务ID 传值
+ */
+export const useQueryId = createGlobalState(() => {
+  const businessId = ref('');
+
+  return {
+    businessId,
+  };
+});
diff --git a/apps/web-antd/src/views/workflow/leave/index.vue b/apps/web-antd/src/views/workflow/leave/index.vue
index cbd84c1a..7b9707ca 100644
--- a/apps/web-antd/src/views/workflow/leave/index.vue
+++ b/apps/web-antd/src/views/workflow/leave/index.vue
@@ -5,9 +5,7 @@ import type { LeaveForm } from './api/model';
 
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { useRouter } from 'vue-router';
-
-import { Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -16,9 +14,11 @@ import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
 import { cancelProcessApply } from '#/api/workflow/instance';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import { flowInfoModal } from '../components';
+import { applyModal, flowInfoModal } from '../components';
 import { leaveExport, leaveList, leaveRemove } from './api';
 import { columns, querySchema } from './data';
+import { useRouteIdEdit } from './hook';
+import leaveDrawer from './leave-drawer.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -84,13 +84,29 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   },
 });
 
-const router = useRouter();
+const [ApplyModal, applyModalApi] = useVbenModal({
+  connectedComponent: applyModal,
+});
+const [LeaveDrawer, leaveDrawerApi] = useVbenDrawer({
+  connectedComponent: leaveDrawer,
+});
+
 function handleAdd() {
-  router.push('/workflow/leaveEdit/index');
+  leaveDrawerApi.setData({ applyModalApi }).open();
 }
 
 async function handleEdit(row: Required<LeaveForm>) {
-  router.push({ path: '/workflow/leaveEdit/index', query: { id: row.id } });
+  leaveDrawerApi.setData({ id: row.id, applyModalApi }).open();
+}
+
+useRouteIdEdit((id) => {
+  // 打开编辑
+  leaveDrawerApi.setData({ id, applyModalApi }).open();
+});
+
+async function handleCompleteOrCancel() {
+  leaveDrawerApi.close();
+  tableApi.query();
 }
 
 async function handleDelete(row: Required<LeaveForm>) {
@@ -133,6 +149,7 @@ function handleDownloadExcel() {
 const [FlowInfoModal, flowInfoModalApi] = useVbenModal({
   connectedComponent: flowInfoModal,
 });
+
 function handleInfo(row: Required<LeaveForm>) {
   flowInfoModalApi.setData({ businessId: row.id });
   flowInfoModalApi.open();
@@ -218,5 +235,10 @@ function handleInfo(row: Required<LeaveForm>) {
       </template>
     </BasicTable>
     <FlowInfoModal />
+    <ApplyModal
+      @complete="handleCompleteOrCancel"
+      @cancel="handleCompleteOrCancel"
+    />
+    <LeaveDrawer @reload="() => tableApi.query()" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/workflow/leave/leave-drawer.vue b/apps/web-antd/src/views/workflow/leave/leave-drawer.vue
new file mode 100644
index 00000000..4c7beec4
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/leave/leave-drawer.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { ExtendedModalApi } from '@vben/common-ui';
+
+import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
+
+import { computed, ref, shallowRef } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import dayjs from 'dayjs';
+import { omit } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { startWorkFlow } from '#/api/workflow/task';
+
+import {
+  leaveAdd,
+  leaveInfo,
+  leaveUpdate,
+  submitAndStartWorkflow,
+} from './api';
+import { formSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  schema: formSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const modalApi = shallowRef<ExtendedModalApi | null>(null);
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  closeOnClickModal: false,
+  onClosed: handleClosed,
+  onConfirm: handleStartWorkFlow,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+
+    const { id, applyModalApi } = drawerApi.getData() as {
+      applyModalApi: ExtendedModalApi;
+      id?: number | string;
+    };
+    modalApi.value = applyModalApi;
+    isUpdate.value = !!id;
+    // 赋值
+    if (isUpdate.value && id) {
+      const resp = await leaveInfo(id);
+      await formApi.setValues(resp);
+      const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
+      await formApi.setFieldValue('dateRange', dateRange);
+    }
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleClosed() {
+  await formApi.resetForm();
+}
+
+/**
+ * 获取已经处理好的表单参数
+ */
+async function getFormData() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    throw new Error('表单验证失败');
+  }
+  let data = cloneDeep(await formApi.getValues()) as any;
+  data = omit(data, 'flowType', 'type');
+  // 处理日期
+  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');
+  return data;
+}
+
+/**
+ * 暂存/提交 提取通用逻辑
+ */
+async function handleSaveOrUpdate() {
+  const data = await getFormData();
+  return await (isUpdate.value ? leaveUpdate(data) : leaveAdd(data));
+}
+
+/**
+ * 暂存 草稿状态
+ */
+async function handleTempSave() {
+  try {
+    await handleSaveOrUpdate();
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * 保存业务 & 发起流程
+ */
+async function handleStartWorkFlow() {
+  drawerApi.lock(true);
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 获取发起类型
+    const { type } = await formApi.getValues();
+    /**
+     * 这里只是demo 实际只会用到一种
+     */
+    switch (type) {
+      // 后端发起流程
+      case 'backend': {
+        const data = await getFormData();
+        await submitAndStartWorkflow(data);
+        emit('reload');
+        drawerApi.close();
+        break;
+      }
+      // 前端发起流程
+      case 'frontend': {
+        // 保存业务
+        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 = {
+          businessId: leaveResp!.id,
+          flowCode,
+          variables: taskVariables,
+          flowInstanceBizExtBo: {
+            businessTitle: '请假申请 - 自定义标题',
+            businessCode: leaveResp!.applyCode,
+          },
+        };
+        const { taskId } = await startWorkFlow(startWorkFlowData);
+        // 打开窗口
+        modalApi.value?.setData({
+          taskId,
+          taskVariables,
+          variables: {},
+        });
+        modalApi.value?.open();
+        break;
+      }
+    }
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.lock(false);
+  }
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+    <template #center-footer>
+      <a-button @click="handleTempSave">暂存</a-button>
+    </template>
+  </BasicDrawer>
+</template>
diff --git a/apps/web-antd/src/views/workflow/leave/leave-form.vue b/apps/web-antd/src/views/workflow/leave/leave-form.vue
index 37f6e996..16453797 100644
--- a/apps/web-antd/src/views/workflow/leave/leave-form.vue
+++ b/apps/web-antd/src/views/workflow/leave/leave-form.vue
@@ -1,3 +1,7 @@
+<!--
+这个文件用不上  已经更改交互为drawer
+-->
+
 <script setup lang="ts">
 import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
 
@@ -21,7 +25,7 @@ import {
   leaveUpdate,
   submitAndStartWorkflow,
 } from './api';
-import { modalSchema } from './data';
+import { formSchema } from './data';
 
 const route = useRoute();
 const id = route.query?.id as string;
@@ -37,7 +41,7 @@ const [BasicForm, formApi] = useVbenForm({
       class: 'w-full',
     },
   },
-  schema: modalSchema(),
+  schema: formSchema(),
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
 });
@@ -184,6 +188,7 @@ async function handleCompleteOrCancel() {
         <a-button type="primary" @click="handleStartWorkFlow">提交</a-button>
       </div>
       <ApplyModal
+        :modal-api="applyModalApi"
         @complete="handleCompleteOrCancel"
         @cancel="handleCompleteOrCancel"
       />
diff --git a/apps/web-antd/src/views/workflow/leave/leaveEdit.vue b/apps/web-antd/src/views/workflow/leave/leaveEdit.vue
index f7b08309..6c22668f 100644
--- a/apps/web-antd/src/views/workflow/leave/leaveEdit.vue
+++ b/apps/web-antd/src/views/workflow/leave/leaveEdit.vue
@@ -3,9 +3,41 @@
 未修改文件名 而是新加了这个文件
 -->
 <script setup lang="ts">
-import LeaveFormPage from './leave-form.vue';
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+import { Spin } from 'ant-design-vue';
+
+import { useQueryId } from './hook';
+
+const router = useRouter();
+const route = useRoute();
+const id = route.query.id as string;
+
+/**
+ * 从我的任务 -> 点击重新编辑会跳转到这里
+ * 相当于一个中转 因为我的任务无法获取到列表页的路径(与ele交互不同)
+ *
+ * 为什么不使用路由的query来实现?
+ * 因为刷新后参数不会丢失 且tab存的也是全路径 切换也不会丢失 这不符合预期
+ * 可以通过window.history.replaceState来删除query参数 但是tab切换还是会保留
+ */
+const { closeCurrentTab } = useTabs();
+const { businessId } = useQueryId();
+onMounted(async () => {
+  await closeCurrentTab();
+  if (id) {
+    // 设置业务ID 存储在内存
+    businessId.value = id;
+    router.push({ path: '/demo/leave' });
+  }
+});
 </script>
 
 <template>
-  <LeaveFormPage />
+  <div>
+    <Spin :spinning="true" />
+  </div>
 </template>