feat-wip(components): 抽取leaveEdit组件，适配流程编辑和预览功能

src/components/custom/work-flow/leave-edit/index.vue

@@ -2,23 +2,30 @@
 import { computed, reactive, ref, watch } from 'vue';
 import dayjs from 'dayjs';
 import { useBoolean } from '@sa/hooks';
-import { flowCodeTypeOptions, leaveTypeOptions } from '@/constants/workflow';
-import { fetchCreateLeave, fetchStartWorkflow, fetchUpdateLeave } from '@/service/api/workflow';
+import { flowCodeTypeOptions, flowCodeTypeRecord, leaveTypeOptions, leaveTypeRecord } from '@/constants/workflow';
+import { fetchCreateLeave, fetchGetLeaveDetail, fetchStartWorkflow, fetchUpdateLeave } from '@/service/api/workflow';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 
 defineOptions({
-  name: 'LeaveOperateDrawer'
+  name: 'LeaveEdit'
 });
 
+useDict('wf_task_status');
+
 interface Props {
-  /** the type of operation */
-  operateType: NaiveUI.TableOperateType;
+  operateType: CommonType.WorkflowTableOperateType;
+  /** 业务ID */
+  businessId?: CommonType.IdType;
   /** the edit row data */
   rowData?: Api.Workflow.Leave | null;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  rowData: null,
+  businessId: undefined
+});
 
 interface Emits {
   (e: 'submitted'): void;
@@ -34,12 +41,17 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
 const { createRequiredRule } = useFormRules();
 
 const title = computed(() => {
-  const titles: Record<NaiveUI.TableOperateType, string> = {
+  const titles: Record<CommonType.WorkflowTableOperateType, string> = {
     add: '新增请假申请',
-    edit: '编辑请假申请'
+    edit: '编辑请假申请',
+    detail: '查看请假申请',
+    approval: '审批请假申请'
   };
   return titles[props.operateType];
 });
+const readonly = computed(() => {
+  return props.operateType === 'detail' || props.operateType === 'approval';
+});
 
 const respLeave = ref<Api.Workflow.Leave>();
 const startWorkflowResult = ref<Api.Workflow.StartWorkflowResult>();
@@ -47,12 +59,9 @@ const startWorkflowResult = ref<Api.Workflow.StartWorkflowResult>();
 type Model = Api.Workflow.LeaveOperateParams & {
   flowCode: Api.Workflow.FlowCodeType;
 };
-type StartWorkflowModel = Api.Workflow.StartWorkflowOperateParams;
 
 const model: Model = reactive(createDefaultModel());
 
-const startWorkflowModel: StartWorkflowModel = reactive(createDefaultStartWorkflowModel());
-
 function createDefaultModel(): Model {
   return {
     flowCode: 'leave1',
@@ -64,6 +73,29 @@ function createDefaultModel(): Model {
   };
 }
 
+type ModelDetail = Api.Workflow.LeaveDetail & {
+  flowCode: Api.Workflow.FlowCodeType;
+};
+
+const modelDetail: ModelDetail = reactive(createDefaultModelDetail());
+
+function createDefaultModelDetail(): ModelDetail {
+  return {
+    flowCode: 'leave1',
+    status: null,
+    id: null,
+    leaveType: null,
+    startDate: null,
+    endDate: null,
+    leaveDays: null,
+    remark: ''
+  };
+}
+
+type StartWorkflowModel = Api.Workflow.StartWorkflowOperateParams;
+
+const startWorkflowModel: StartWorkflowModel = reactive(createDefaultStartWorkflowModel());
+
 function createDefaultStartWorkflowModel(): StartWorkflowModel {
   return {
     flowCode: null,
@@ -81,7 +113,7 @@ const dateRange = computed<[string, string] | null>({
     if (value) {
       model.startDate = value[0];
       model.endDate = value[1];
-      // Calculate leave days when date range changes
+      // 计算请假天数
       const start = dayjs(value[0]);
       const end = dayjs(value[1]);
       model.leaveDays = end.diff(start, 'day') + 1;
@@ -104,14 +136,21 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
   leaveDays: createRequiredRule('请假天数不能为空')
 };
 
-function handleUpdateModelWhenEdit() {
+async function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
     Object.assign(model, createDefaultModel());
     return;
   }
 
-  if (props.operateType === 'edit' && props.rowData) {
+  if (props.operateType === 'edit' || props.operateType === 'detail') {
     Object.assign(model, props.rowData);
+  } else {
+    const { error, data } = await fetchGetLeaveDetail(props.businessId!);
+    if (error) {
+      window.$message?.error(error.message);
+      return;
+    }
+    Object.assign(modelDetail, data);
   }
 }
 
@@ -178,6 +217,7 @@ watch(visible, () => {
 <template>
   <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <div v-if="!readonly">
         <NForm ref="formRef" :model="model" :rules="rules">
           <NFormItem label="流程类型" path="flowCode">
             <NSelect v-model:value="model.flowCode" placeholder="请输入流程类型" :options="flowCodeTypeOptions" />
@@ -201,17 +241,48 @@ watch(visible, () => {
             <NInput v-model:value="model.remark" placeholder="请输入请假原因" />
           </NFormItem>
         </NForm>
+      </div>
+      <div v-else>
+        <NDescriptions bordered :column="1" label-placement="left">
+          <NDescriptionsItem label="流程类型">
+            {{ flowCodeTypeRecord[model.flowCode] || '-' }}
+          </NDescriptionsItem>
+          <NDescriptionsItem label="请假类型">
+            <NTag type="info">{{ leaveTypeRecord[model.leaveType!] || '-' }}</NTag>
+          </NDescriptionsItem>
+          <NDescriptionsItem label="请假时间">
+            {{ model.startDate ? `${model.startDate} 至 ${model.endDate}` : '-' }}
+          </NDescriptionsItem>
+          <NDescriptionsItem label="请假天数">{{ model.leaveDays || '-' }} 天</NDescriptionsItem>
+          <NDescriptionsItem label="请假原因">
+            {{ model.remark || '-' }}
+          </NDescriptionsItem>
+        </NDescriptions>
+        <div v-if="modelDetail.status !== 'draft'" class="mt-4">
+          <NTimeline horizontal>
+            <NTimelineItem content="啊" />
+            <NTimelineItem type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
+            <NTimelineItem type="error" content="哪里错误" time="2018-04-03 20:46" />
+            <NTimelineItem type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
+            <NTimelineItem type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
+            <NTimelineItem content="啊" />
+          </NTimeline>
+        </div>
+      </div>
+
       <template #footer>
+        <div v-if="!readonly">
           <NSpace :size="16">
             <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
             <NButton type="warning" @click="handleSaveDraft">暂存</NButton>
             <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
           </NSpace>
+        </div>
       </template>
     </NDrawerContent>
     <WorkflowTaskApplyModal
       v-model:visible="taskApplyVisible"
-      :task-id="startWorkflowResult?.taskId || ''"
+      :task-id="startWorkflowResult?.taskId!"
       :task-variables="taskVariables"
       @finished="handleTaskFinished"
     />

src/constants/workflow.ts

@@ -1,5 +1,17 @@
 import { transformRecordToOption } from '@/utils/common';
 
+export const businessStatusRecord: Record<Api.Workflow.BusinessStatus, string> = {
+  cancel: '已撤销',
+  draft: '草稿',
+  waiting: '待审批',
+  finish: '已完成',
+  invalid: '已作废',
+  back: '已退回',
+  termination: '已终止'
+};
+
+export const businessStatusOptions = transformRecordToOption(businessStatusRecord);
+
 export const messageTypeRecord: Record<Api.Workflow.MessageType, string> = {
   '1': '站内信',
   '2': '邮件',

src/service/api/workflow/leave.ts

@@ -10,7 +10,7 @@ export function fetchGetLeaveList(params?: Api.Workflow.LeaveSearchParams) {
 }
 /** 获取请假申请详情 */
 export function fetchGetLeaveDetail(id: CommonType.IdType) {
-  return request<Api.Workflow.LeaveOperateParams>({
+  return request<Api.Workflow.LeaveDetail>({
     url: `/workflow/leave/${id}`,
     method: 'get'
   });
@@ -41,3 +41,11 @@ export function fetchBatchDeleteLeave(ids: CommonType.IdType[]) {
     method: 'delete'
   });
 }
+
+/** 撤销请假申请 */
+export function fetchCancelLeave(id: CommonType.IdType) {
+  return request<boolean>({
+    url: `/workflow/leave/cancel/${id}`,
+    method: 'put'
+  });
+}

src/typings/api/workflow.api.d.ts

@@ -10,10 +10,14 @@ declare namespace Api {
    * backend api module: "Workflow"
    */
   namespace Workflow {
+    /** 业务流程状态 */
+    type BusinessStatus = 'cancel' | 'draft' | 'waiting' | 'finish' | 'invalid' | 'back' | 'termination';
+
     /** 流程类型 */
     type FlowCodeType = 'leave1' | 'leave2' | 'leave3' | 'leave4' | 'leave5' | 'leave6';
     /** 请假状态 */
     type LeaveType = '1' | '2' | '3' | '4';
+
     /** leave */
     type Leave = Common.CommonRecord<{
       /** id */
@@ -31,7 +35,7 @@ declare namespace Api {
       /** 请假原因 */
       remark: string;
       /** 状态 */
-      status: string;
+      status: BusinessStatus;
     }>;
 
     /** leave search params */
@@ -44,6 +48,11 @@ declare namespace Api {
       Pick<Api.Workflow.Leave, 'id' | 'leaveType' | 'startDate' | 'endDate' | 'leaveDays' | 'remark'>
     >;
 
+    /** leave detail */
+    type LeaveDetail = CommonType.RecordNullable<
+      Pick<Api.Workflow.Leave, 'id' | 'leaveType' | 'startDate' | 'endDate' | 'leaveDays' | 'remark' | 'status'>
+    >;
+
     /** leave list */
     type LeaveList = Api.Common.PaginatingQueryRecord<Leave>;
     /** 工作流分类 */

src/typings/common.d.ts

@@ -43,4 +43,6 @@ declare namespace CommonType {
     /** filter function */
     filterFn?: (node: any) => boolean;
   };
+  /** the type of workflow table operate */
+  type WorkflowTableOperateType = 'add' | 'edit' | 'detail' | 'approval';
 }

src/typings/components.d.ts

@@ -56,7 +56,7 @@ declare module 'vue' {
     IconUilSearch: typeof import('~icons/uil/search')['default']
     JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
-    LeaveEdit: typeof import('./../components/custom/leave-edit/index.vue')['default']
+    LeaveEdit: typeof import('./../components/custom/work-flow/leave-edit/index.vue')['default']
     LeaveForm: typeof import('../components/custom/workflow-leave-form.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
@@ -79,6 +79,7 @@ declare module 'vue' {
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDescription: typeof import('naive-ui')['NDescription']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
     NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
@@ -128,6 +129,8 @@ declare module 'vue' {
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
+    NTimeline: typeof import('naive-ui')['NTimeline']
+    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
@@ -154,7 +157,7 @@ declare module 'vue' {
     TinymceEditor: typeof import('./../components/custom/tinymce-editor.vue')['default']
     UserSelect: typeof import('./../components/custom/user-select.vue')['default']
     WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
-    WorkflowCategorySelect: typeof import('./../components/custom/workflow-category-select.vue')['default']
-    WorkflowTaskApplyModal: typeof import('./../components/custom/workflow-task-apply-modal.vue')['default']
+    WorkflowCategorySelect: typeof import('./../components/custom/work-flow/workflow-category-select.vue')['default']
+    WorkflowTaskApplyModal: typeof import('./../components/custom/work-flow/workflow-task-apply-modal.vue')['default']
   }
 }

src/views/workflow/leave/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="tsx">
+import { ref } from 'vue';
 import { NDivider, NTag } from 'naive-ui';
+import { jsonClone } from '@sa/utils';
 import { leaveTypeRecord } from '@/constants/workflow';
 import { fetchBatchDeleteLeave, fetchGetLeaveList } from '@/service/api/workflow';
 import { useAppStore } from '@/store/modules/app';
@@ -10,7 +12,7 @@ import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 import DictTag from '@/components/custom/dict-tag.vue';
 import ButtonIcon from '@/components/custom/button-icon.vue';
-import LeaveOperateDrawer from './modules/leave-operate-drawer.vue';
+import LeaveEdit from '@/components/custom/work-flow/leave-edit/index.vue';
 import LeaveSearch from './modules/leave-search.vue';
 
 defineOptions({
@@ -23,6 +25,7 @@ const { hasAuth } = useAuth();
 
 useDict('wf_business_status');
 
+const workflowTableOperateType = ref<CommonType.WorkflowTableOperateType>('add');
 const {
   columns,
   columnChecks,
@@ -78,7 +81,10 @@ const {
       key: 'leaveDays',
       title: '请假天数',
       align: 'center',
-      minWidth: 100
+      minWidth: 100,
+      render: row => {
+        return `${row.leaveDays} 天`;
+      }
     },
     {
       key: 'remark',
@@ -101,18 +107,31 @@ const {
       align: 'center',
       width: 130,
       render: row => {
-        const divider = () => {
-          if (!hasAuth('workflow:leave:edit') || !hasAuth('workflow:leave:remove')) {
-            return null;
-          }
-          return <NDivider vertical />;
-        };
+        const buttons = [];
 
-        const editBtn = () => {
-          if (!hasAuth('workflow:leave:edit')) {
-            return null;
+        const showEdit =
+          hasAuth('workflow:leave:edit') &&
+          (row.status === 'draft' || row.status === 'cancel' || row.status === 'back');
+
+        const showDelete =
+          hasAuth('workflow:leave:remove') &&
+          (row.status === 'draft' || row.status === 'cancel' || row.status === 'back');
+
+        const showCancel = row.status === 'waiting';
+        if (hasAuth('workflow:leave:query')) {
+          buttons.push(
+            <ButtonIcon
+              text
+              type="info"
+              icon="material-symbols:visibility-outline"
+              tooltipContent="查看"
+              onClick={() => view(row.id!)}
+            />
+          );
         }
-          return (
+
+        if (showEdit) {
+          buttons.push(
             <ButtonIcon
               text
               type="primary"
@@ -121,13 +140,23 @@ const {
               onClick={() => edit(row.id!)}
             />
           );
-        };
-
-        const deleteBtn = () => {
-          if (!hasAuth('workflow:leave:remove')) {
-            return null;
         }
-          return (
+
+        if (showCancel) {
+          buttons.push(
+            <ButtonIcon
+              text
+              type="warning"
+              icon="material-symbols:cancel-outline"
+              tooltipContent="撤销"
+              popconfirmContent="确定要撤销该申请吗？"
+              onPositiveClick={() => {}}
+            />
+          );
+        }
+
+        if (showDelete) {
+          buttons.push(
             <ButtonIcon
               text
               type="error"
@@ -137,22 +166,24 @@ const {
               onPositiveClick={() => handleDelete(row.id!)}
             />
           );
-        };
+        }
 
-        return (
-          <div class="flex-center gap-8px">
-            {editBtn()}
-            {divider()}
-            {deleteBtn()}
-          </div>
-        );
+        // 插入分隔符（仅在前后两个按钮之间插入 Divider）
+        const buttonWithDividers = buttons.flatMap((btn, index) => {
+          if (index === 0) return [btn];
+          return [<NDivider vertical />, btn];
+        });
+
+        return <div class="flex-center gap-4px">{buttonWithDividers}</div>;
       }
     }
   ]
 });
 
-const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
-  useTableOperate(data, getData);
+const { drawerVisible, openDrawer, editingData, checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(
+  data,
+  getData
+);
 
 async function handleBatchDelete() {
   // request
@@ -168,8 +199,25 @@ async function handleDelete(id: CommonType.IdType) {
   onDeleted();
 }
 
+function handleAdd() {
+  workflowTableOperateType.value = 'add';
+  openDrawer();
+}
+
+function cloneAndOpenDrawer(id: CommonType.IdType) {
+  const findItem = data.value.find(item => item.id === id) || null;
+  editingData.value = jsonClone(findItem);
+  openDrawer();
+}
+
 function edit(id: CommonType.IdType) {
-  handleEdit('id', id);
+  workflowTableOperateType.value = 'edit';
+  cloneAndOpenDrawer(id);
+}
+
+function view(id: CommonType.IdType) {
+  workflowTableOperateType.value = 'detail';
+  cloneAndOpenDrawer(id);
 }
 
 function handleExport() {
@@ -208,9 +256,9 @@ function handleExport() {
         :pagination="mobilePagination"
         class="sm:h-full"
       />
-      <LeaveOperateDrawer
+      <LeaveEdit
         v-model:visible="drawerVisible"
-        :operate-type="operateType"
+        :operate-type="workflowTableOperateType"
         :row-data="editingData"
         @submitted="getDataByPage"
       />