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

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;
-          }
-          return (
+        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!)}
+            />
+          );
+        }
+
+        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"
       />

src/views/workflow/leave/modules/leave-operate-drawer.vue

@@ -1,221 +0,0 @@
-<script setup lang="ts">
-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 { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-
-defineOptions({
-  name: 'LeaveOperateDrawer'
-});
-
-interface Props {
-  /** the type of operation */
-  operateType: NaiveUI.TableOperateType;
-  /** the edit row data */
-  rowData?: Api.Workflow.Leave | null;
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'submitted'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const visible = defineModel<boolean>('visible', {
-  default: false
-});
-const { bool: taskApplyVisible, setTrue: setTaskApplyVisible } = useBoolean();
-const { formRef, validate, restoreValidation } = useNaiveForm();
-const { createRequiredRule } = useFormRules();
-
-const title = computed(() => {
-  const titles: Record<NaiveUI.TableOperateType, string> = {
-    add: '新增请假申请',
-    edit: '编辑请假申请'
-  };
-  return titles[props.operateType];
-});
-
-const respLeave = ref<Api.Workflow.Leave>();
-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',
-    leaveType: null,
-    startDate: null,
-    endDate: null,
-    leaveDays: null,
-    remark: ''
-  };
-}
-
-function createDefaultStartWorkflowModel(): StartWorkflowModel {
-  return {
-    flowCode: null,
-    businessId: null,
-    variables: {}
-  };
-}
-
-const dateRange = computed<[string, string] | null>({
-  get: () => {
-    if (!model.startDate || !model.endDate) return null;
-    return [model.startDate, model.endDate] as [string, string];
-  },
-  set: (value: [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;
-    } else {
-      model.startDate = null;
-      model.endDate = null;
-      model.leaveDays = null;
-    }
-  }
-});
-
-type RuleKey = Extract<keyof Model, 'id' | 'leaveType' | 'leaveDays' | 'startDate' | 'endDate'> | 'flowCode';
-
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  id: createRequiredRule('id不能为空'),
-  flowCode: createRequiredRule('流程类型不能为空'),
-  leaveType: createRequiredRule('请假类型不能为空'),
-  startDate: createRequiredRule('请假时间不能为空'),
-  endDate: createRequiredRule('结束时间不能为空'),
-  leaveDays: createRequiredRule('请假天数不能为空')
-};
-
-function handleUpdateModelWhenEdit() {
-  if (props.operateType === 'add') {
-    Object.assign(model, createDefaultModel());
-    return;
-  }
-
-  if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
-  }
-}
-
-function closeDrawer() {
-  visible.value = false;
-}
-
-async function handleOperate() {
-  await validate();
-  // request
-  if (props.operateType === 'add') {
-    const { leaveType, startDate, endDate, leaveDays, remark } = model;
-    const { error, data } = await fetchCreateLeave({ leaveType, startDate, endDate, leaveDays, remark });
-    if (error) return;
-    respLeave.value = data;
-  }
-
-  if (props.operateType === 'edit') {
-    const { id, leaveType, startDate, endDate, leaveDays, remark } = model;
-    const { error, data } = await fetchUpdateLeave({ id, leaveType, startDate, endDate, leaveDays, remark });
-    if (error) return;
-    respLeave.value = data;
-  }
-}
-
-async function handleSaveDraft() {
-  await handleOperate();
-  window.$message?.success($t('common.updateSuccess'));
-  closeDrawer();
-}
-
-const taskVariables = ref<{ [key: string]: any }>({});
-
-async function handleSubmit() {
-  await handleOperate();
-  // 提交流程
-  startWorkflowModel.businessId = respLeave.value?.id;
-  startWorkflowModel.flowCode = model.flowCode;
-  taskVariables.value = {
-    leaveDays: respLeave.value?.leaveDays,
-    userList: ['1', '3', '4']
-  };
-  startWorkflowModel.variables = taskVariables.value;
-  const { error, data } = await fetchStartWorkflow(startWorkflowModel);
-  if (error) return;
-  startWorkflowResult.value = data;
-  window.$message?.success($t('common.updateSuccess'));
-  setTaskApplyVisible();
-}
-
-function handleTaskFinished() {
-  closeDrawer();
-  emit('submitted');
-}
-
-watch(visible, () => {
-  if (visible.value) {
-    handleUpdateModelWhenEdit();
-    restoreValidation();
-  }
-});
-</script>
-
-<template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
-    <NDrawerContent :title="title" :native-scrollbar="false" closable>
-      <NForm ref="formRef" :model="model" :rules="rules">
-        <NFormItem label="流程类型" path="flowCode">
-          <NSelect v-model:value="model.flowCode" placeholder="请输入流程类型" :options="flowCodeTypeOptions" />
-        </NFormItem>
-        <NFormItem label="请假类型" path="leaveType">
-          <NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" />
-        </NFormItem>
-        <NFormItem label="请假时间" path="startDate">
-          <NDatePicker
-            v-model:formatted-value="dateRange"
-            class="w-full"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            clearable
-          />
-        </NFormItem>
-        <NFormItem label="请假天数" path="leaveDays">
-          <NInputNumber v-model:value="model.leaveDays" class="w-full" disabled placeholder="请输入请假天数" />
-        </NFormItem>
-        <NFormItem label="请假原因" path="remark">
-          <NInput v-model:value="model.remark" placeholder="请输入请假原因" />
-        </NFormItem>
-      </NForm>
-      <template #footer>
-        <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>
-      </template>
-    </NDrawerContent>
-    <WorkflowTaskApplyModal
-      v-model:visible="taskApplyVisible"
-      :task-id="startWorkflowResult?.taskId || ''"
-      :task-variables="taskVariables"
-      @finished="handleTaskFinished"
-    />
-  </NDrawer>
-</template>
-
-<style scoped></style>