refactor: 请假申请更改为drawer 替换新页面打开的方式

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,10 @@ 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 leaveDrawer from './leave-drawer.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -84,13 +83,24 @@ 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();
+}
+
+async function handleCompleteOrCancel() {
+  leaveDrawerApi.close();
+  tableApi.query();
 }
 
 async function handleDelete(row: Required<LeaveForm>) {
@@ -133,6 +143,7 @@ function handleDownloadExcel() {
 const [FlowInfoModal, flowInfoModalApi] = useVbenModal({
   connectedComponent: flowInfoModal,
 });
+
 function handleInfo(row: Required<LeaveForm>) {
   flowInfoModalApi.setData({ businessId: row.id });
   flowInfoModalApi.open();
@@ -218,5 +229,10 @@ function handleInfo(row: Required<LeaveForm>) {
       </template>
     </BasicTable>
     <FlowInfoModal />
+    <ApplyModal
+      @complete="handleCompleteOrCancel"
+      @cancel="handleCompleteOrCancel"
+    />
+    <LeaveDrawer @reload="() => tableApi.query()" />
   </Page>
 </template>