From 81449ea77a8e0d12c0016d163583dae5fe23e1f1 Mon Sep 17 00:00:00 2001
From: AN <1983933789@qq.com>
Date: Mon, 23 Jun 2025 22:35:44 +0800
Subject: [PATCH] =?UTF-8?q?feat-wip(projects):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=B9=B2=E9=A2=84=EF=BC=8C=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ry-select.vue => flow-category-select.vue} |   2 +-
 .../custom/workflow/flow-drawer.vue           |  84 +++++++++++
 .../custom/workflow/flow-intervene-modal.vue  |  40 +++++
 ...modal.vue => flow-task-approval-modal.vue} |   2 +-
 .../custom/workflow/leave-edit/index.vue      | 141 +++++++++---------
 src/typings/api/workflow.api.d.ts             |   3 +
 src/typings/components.d.ts                   |   9 +-
 .../workflow/task/all-task-waiting/index.vue  |  40 +++--
 8 files changed, 232 insertions(+), 89 deletions(-)
 rename src/components/custom/workflow/{workflow-category-select.vue => flow-category-select.vue} (96%)
 create mode 100644 src/components/custom/workflow/flow-drawer.vue
 create mode 100644 src/components/custom/workflow/flow-intervene-modal.vue
 rename src/components/custom/workflow/{workflow-task-apply-modal.vue => flow-task-approval-modal.vue} (98%)

diff --git a/src/components/custom/workflow/workflow-category-select.vue b/src/components/custom/workflow/flow-category-select.vue
similarity index 96%
rename from src/components/custom/workflow/workflow-category-select.vue
rename to src/components/custom/workflow/flow-category-select.vue
index d75e43a7..3511956b 100644
--- a/src/components/custom/workflow/workflow-category-select.vue
+++ b/src/components/custom/workflow/flow-category-select.vue
@@ -5,7 +5,7 @@ import { useLoading } from '@sa/hooks';
 import { fetchGetCategoryTree } from '@/service/api/workflow';
 import { isNull } from '@/utils/common';
 
-defineOptions({ name: 'WorkflowCategorySelect' });
+defineOptions({ name: 'FlowCategorySelect' });
 
 interface Props {
   [key: string]: any;
diff --git a/src/components/custom/workflow/flow-drawer.vue b/src/components/custom/workflow/flow-drawer.vue
new file mode 100644
index 00000000..d173b697
--- /dev/null
+++ b/src/components/custom/workflow/flow-drawer.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+interface Props {
+  /** 抽屉是否可见 */
+  visible?: boolean;
+  /** 抽屉标题 */
+  title: string;
+  /** 是否显示加载状态 */
+  loading?: boolean;
+  /** 抽屉宽度 */
+  width?: number;
+  /** 是否为只读模式 */
+  readonly?: boolean;
+  /** 是否显示暂存按钮 */
+  showDraft?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  loading: false,
+  width: 1200,
+  readonly: false,
+  showDraft: true
+});
+
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+  (e: 'close'): void;
+  (e: 'saveDraft'): void;
+  (e: 'submit'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visibleValue = computed({
+  get: () => props.visible,
+  set: value => {
+    emit('update:visible', value);
+  }
+});
+
+function handleClose() {
+  emit('close');
+}
+
+function handleSaveDraft() {
+  emit('saveDraft');
+}
+
+function handleSubmit() {
+  emit('submit');
+}
+
+defineExpose({
+  handleClose,
+  handleSaveDraft,
+  handleSubmit
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visibleValue" :title="title" display-directive="show" :width="width" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable @close="handleClose">
+      <NSpin :show="loading">
+        <slot></slot>
+      </NSpin>
+      <template #footer>
+        <slot name="footer">
+          <div v-if="!readonly">
+            <NSpace :size="16">
+              <NButton @click="handleClose">{{ $t('common.cancel') }}</NButton>
+              <NButton v-if="showDraft" type="warning" @click="handleSaveDraft">暂存</NButton>
+              <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+            </NSpace>
+          </div>
+        </slot>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/components/custom/workflow/flow-intervene-modal.vue b/src/components/custom/workflow/flow-intervene-modal.vue
new file mode 100644
index 00000000..4bafa4f9
--- /dev/null
+++ b/src/components/custom/workflow/flow-intervene-modal.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'FlowInterveneModal'
+});
+
+interface Props {
+  rowData: Api.Workflow.TaskOrHisTask;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+</script>
+
+<template>
+  <NModal v-model:show="visible" class="max-h-520px max-w-90% w-700px" title="流程干预" preset="card" size="medium">
+    <NDescriptions label-placement="left" :column="2" size="small" bordered>
+      <NDescriptionsItem label="任务名称">
+        {{ props.rowData.nodeName }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="节点编码">
+        {{ props.rowData.nodeCode }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="开始时间">
+        {{ props.rowData.createTime }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="流程实例ID">
+        {{ props.rowData.instanceId }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="版本号">
+        {{ props.rowData.version }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="业务ID">
+        {{ props.rowData.businessId }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </NModal>
+</template>
diff --git a/src/components/custom/workflow/workflow-task-apply-modal.vue b/src/components/custom/workflow/flow-task-approval-modal.vue
similarity index 98%
rename from src/components/custom/workflow/workflow-task-apply-modal.vue
rename to src/components/custom/workflow/flow-task-approval-modal.vue
index babb2475..9d932422 100644
--- a/src/components/custom/workflow/workflow-task-apply-modal.vue
+++ b/src/components/custom/workflow/flow-task-approval-modal.vue
@@ -6,7 +6,7 @@ import { fetchCompleteTask, fetchGetTask } from '@/service/api/workflow';
 import FileUpload from '@/components/custom/file-upload.vue';
 
 defineOptions({
-  name: 'WorkflowTaskApplyModal'
+  name: 'FlowTaskApprovalModal'
 });
 
 interface Props {
diff --git a/src/components/custom/workflow/leave-edit/index.vue b/src/components/custom/workflow/leave-edit/index.vue
index 3026dcd5..ed6cbd2a 100644
--- a/src/components/custom/workflow/leave-edit/index.vue
+++ b/src/components/custom/workflow/leave-edit/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import dayjs from 'dayjs';
 import { useBoolean, useLoading } from '@sa/hooks';
 import { flowCodeTypeOptions, flowCodeTypeRecord, leaveTypeOptions, leaveTypeRecord } from '@/constants/workflow';
@@ -8,7 +8,8 @@ import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { useDict } from '@/hooks/business/dict';
 import { $t } from '@/locales';
 import ApprovalInfoPanel from '@/components/custom/workflow/approval-info-panel.vue';
-import WorkflowTaskApplyModal from '@/components/custom/workflow/workflow-task-apply-modal.vue';
+import FlowTaskApprovalModal from '@/components/custom/workflow/flow-task-approval-modal.vue';
+import FlowDrawer from '@/components/custom/workflow/flow-drawer.vue';
 
 defineOptions({
   name: 'LeaveEdit'
@@ -188,12 +189,14 @@ async function handleSaveDraft() {
   await handleOperate();
   window.$message?.success($t('common.updateSuccess'));
   closeDrawer();
+  emit('submitted');
 }
 
 const taskVariables = ref<{ [key: string]: any }>({});
 
 async function handleSubmit() {
   await handleOperate();
+  window.$message?.success($t('common.updateSuccess'));
   // 提交流程
   startWorkflowModel.businessId = respLeave.value?.id;
   startWorkflowModel.flowCode = model.flowCode;
@@ -205,7 +208,6 @@ async function handleSubmit() {
   const { error, data } = await fetchStartWorkflow(startWorkflowModel);
   if (error) return;
   startWorkflowResult.value = data;
-  window.$message?.success($t('common.updateSuccess'));
   setTaskApplyVisible();
 }
 
@@ -227,79 +229,72 @@ async function initializeData() {
   }
 }
 
-watch(visible, initializeData);
-
-onMounted(initializeData);
+watch(visible, initializeData, { immediate: true });
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="1300" class="max-w-90%">
-    <NDrawerContent :title="title" :native-scrollbar="false" closable>
-      <NSpin :show="loading">
-        <div :class="loading ? 'hidden' : ''">
-          <div v-if="!readonly" class="h-full">
-            <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>
-          </div>
-          <div v-else>
-            <NDescriptions bordered :column="2" label-placement="left">
-              <NDescriptionsItem label="流程类型">
-                {{ flowCodeTypeRecord[modelDetail.flowCode] }}
-              </NDescriptionsItem>
-              <NDescriptionsItem label="请假类型">
-                <NTag type="info">{{ leaveTypeRecord[modelDetail.leaveType!] }}</NTag>
-              </NDescriptionsItem>
-              <NDescriptionsItem label="请假时间">
-                {{ `${modelDetail.startDate} 至 ${modelDetail.endDate}` }}
-              </NDescriptionsItem>
-              <NDescriptionsItem label="请假天数">{{ modelDetail.leaveDays }} 天</NDescriptionsItem>
-              <NDescriptionsItem label="请假原因">
-                {{ modelDetail.remark || '-' }}
-              </NDescriptionsItem>
-            </NDescriptions>
-            <!-- 审批信息 -->
-            <ApprovalInfoPanel v-if="showApprovalInfoPanel" ref="approvalInfoPanelRef" :business-id="modelDetail.id!" />
-          </div>
-        </div>
-      </NSpin>
-      <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-variables="taskVariables"
-      @finished="handleTaskFinished"
-    />
-  </NDrawer>
+  <FlowDrawer
+    v-model:visible="visible"
+    :title="title"
+    :loading="loading"
+    :readonly="readonly"
+    @close="closeDrawer"
+    @save-draft="handleSaveDraft"
+    @submit="handleSubmit"
+  >
+    <div :class="loading ? 'hidden' : ''">
+      <div v-if="!readonly" class="h-full">
+        <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>
+      </div>
+      <div v-else>
+        <NDescriptions bordered :column="2" label-placement="left">
+          <NDescriptionsItem label="流程类型">
+            {{ flowCodeTypeRecord[modelDetail.flowCode] }}
+          </NDescriptionsItem>
+          <NDescriptionsItem label="请假类型">
+            <NTag type="info">{{ leaveTypeRecord[modelDetail.leaveType!] }}</NTag>
+          </NDescriptionsItem>
+          <NDescriptionsItem label="请假时间">
+            {{ `${modelDetail.startDate} 至 ${modelDetail.endDate}` }}
+          </NDescriptionsItem>
+          <NDescriptionsItem label="请假天数">{{ modelDetail.leaveDays }} 天</NDescriptionsItem>
+          <NDescriptionsItem label="请假原因">
+            {{ modelDetail.remark || '-' }}
+          </NDescriptionsItem>
+        </NDescriptions>
+        <!-- 审批信息 -->
+        <ApprovalInfoPanel v-if="showApprovalInfoPanel" ref="approvalInfoPanelRef" :business-id="modelDetail.id!" />
+      </div>
+    </div>
+  </FlowDrawer>
+  <FlowTaskApprovalModal
+    v-model:visible="taskApplyVisible"
+    :task-id="startWorkflowResult?.taskId!"
+    :task-variables="taskVariables"
+    @finished="handleTaskFinished"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/typings/api/workflow.api.d.ts b/src/typings/api/workflow.api.d.ts
index 695f3680..52921bc9 100644
--- a/src/typings/api/workflow.api.d.ts
+++ b/src/typings/api/workflow.api.d.ts
@@ -246,6 +246,9 @@ declare namespace Api {
       /** 是否显示 */
       show: boolean;
     }>;
+
+    type TaskOrHisTask = Task | HisTask;
+
     /** 任务详情 */
     type Task = Common.CommonTenantRecord<{
       /** 任务ID */
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index d2246768..dda007e5 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -24,7 +24,12 @@ declare module 'vue' {
     DictTag: typeof import('./../components/custom/dict-tag.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
     FileUpload: typeof import('./../components/custom/file-upload.vue')['default']
+    FlowCategorySelect: typeof import('./../components/custom/workflow/flow-category-select.vue')['default']
+    FlowDrawer: typeof import('./../components/custom/workflow/flow-drawer.vue')['default']
+    FlowInterveneModal: typeof import('./../components/custom/workflow/flow-intervene-modal.vue')['default']
     FlowPreview: typeof import('./../components/custom/workflow/flow-preview.vue')['default']
+    FlowTaskApprovalModal: typeof import('./../components/custom/workflow/flow-task-approval-modal.vue')['default']
+    FlowTaskPassModal: typeof import('../components/custom/workflow/flow-task-approval-modal.vue')['default']
     FormTip: typeof import('./../components/custom/form-tip.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
     GroupTag: typeof import('./../components/custom/group-tag.vue')['default']
@@ -85,7 +90,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']
+    NDescriptionItem: typeof import('naive-ui')['NDescriptionItem']
     NDescriptions: typeof import('naive-ui')['NDescriptions']
     NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
@@ -165,7 +170,5 @@ 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/workflow-category-select.vue')['default']
-    WorkflowTaskApplyModal: typeof import('./../components/custom/workflow/workflow-task-apply-modal.vue')['default']
   }
 }
diff --git a/src/views/workflow/task/all-task-waiting/index.vue b/src/views/workflow/task/all-task-waiting/index.vue
index 47eb8b64..07d502d7 100644
--- a/src/views/workflow/task/all-task-waiting/index.vue
+++ b/src/views/workflow/task/all-task-waiting/index.vue
@@ -19,9 +19,6 @@ interface WaitingStatusOption {
   value: boolean;
 }
 
-// Create a union type to handle both Task and HisTask
-type TaskOrHisTask = Api.Workflow.Task | Api.Workflow.HisTask;
-
 defineOptions({
   name: 'ProcessInstanceList'
 });
@@ -30,7 +27,7 @@ useDict('wf_business_status');
 useDict('wf_task_status');
 const appStore = useAppStore();
 const { bool: viewVisible, setTrue: showViewDrawer } = useBoolean(false);
-
+const { bool: interveneVisible, setTrue: showInterveneDrawer } = useBoolean(false);
 const dynamicComponent = shallowRef();
 
 const waitingStatus = ref<boolean>(true);
@@ -39,7 +36,7 @@ const waitingStatusOptions = ref<WaitingStatusOption[]>([
   { label: '已办任务', value: false }
 ]);
 
-const commonColumns: NaiveUI.TableColumn<TaskOrHisTask>[] = [
+const commonColumns: NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[] = [
   { type: 'selection', align: 'center', width: 50 },
   { key: 'flowName', title: '流程定义名称', align: 'center', width: 120 },
   { key: 'flowCode', title: '流程定义编码', align: 'center', width: 120 },
@@ -82,7 +79,13 @@ const waitingColumns = ref<NaiveUI.TableColumn<Api.Workflow.Task>[]>([
 
 const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
   ...(commonColumns as NaiveUI.TableColumn<Api.Workflow.HisTask>[]),
-  { key: 'approveName', title: '办理人', align: 'center', width: 120 },
+  {
+    key: 'approveName',
+    title: '办理人',
+    align: 'center',
+    width: 120,
+    render: row => <NTag type="info">{row.approveName}</NTag>
+  },
   {
     key: 'flowTaskStatus',
     title: '任务状态',
@@ -93,7 +96,7 @@ const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
   { key: 'createTime', title: '创建时间', align: 'center', width: 120 }
 ]);
 
-const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
+const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[]>([
   {
     key: 'operate',
     title: $t('common.operate'),
@@ -112,7 +115,15 @@ const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
       ];
 
       if (waitingStatus.value) {
-        buttons.push(<ButtonIcon text type="info" icon="material-symbols:edit-document" tooltipContent="流程干预" />);
+        buttons.push(
+          <ButtonIcon
+            text
+            type="info"
+            icon="material-symbols:edit-document"
+            tooltipContent="流程干预"
+            onClick={() => handleIntervene(row)}
+          />
+        );
       }
 
       return (
@@ -149,7 +160,7 @@ const {
   },
   columns: () => {
     const baseColumns = waitingStatus.value ? waitingColumns.value : finishColumns.value;
-    return [...baseColumns, ...operateColumns.value] as NaiveUI.TableColumn<TaskOrHisTask>[];
+    return [...baseColumns, ...operateColumns.value] as NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[];
   }
 });
 
@@ -200,7 +211,7 @@ function handleResetSearch() {
 const modules = import.meta.glob('@/components/custom/workflow/**/*.vue');
 const businessId = ref<CommonType.IdType>();
 
-async function handleView(row: TaskOrHisTask) {
+async function handleView(row: Api.Workflow.TaskOrHisTask) {
   businessId.value = row.businessId;
   const formPath = row.formPath;
   if (formPath) {
@@ -208,6 +219,12 @@ async function handleView(row: TaskOrHisTask) {
     showViewDrawer();
   }
 }
+
+const interveneRowData = ref<Api.Workflow.TaskOrHisTask>();
+function handleIntervene(row: Api.Workflow.TaskOrHisTask) {
+  interveneRowData.value = row;
+  showInterveneDrawer();
+}
 </script>
 
 <template>
@@ -284,8 +301,9 @@ async function handleView(row: TaskOrHisTask) {
           :pagination="mobilePagination"
           class="sm:h-full"
         />
+        <component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
+        <FlowInterveneModal v-model:visible="interveneVisible" :row-data="interveneRowData!" />
       </NCard>
-      <component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
     </div>
   </TableSiderLayout>
 </template>