feat-wip(projects): 新增流程干预，组件命名统一

2025-09-24 07:49:47 +08:00 · 2025-06-23 22:35:44 +08:00
parent 1c322e28ef
commit 81449ea77a
8 changed files with 232 additions and 89 deletions
--- a/src/components/custom/workflow/workflow-category-select.vue
+++ b/src/components/custom/workflow/workflow-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;
--- a/src/components/custom/workflow/flow-drawer.vue
+++ 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>
--- a/src/components/custom/workflow/flow-intervene-modal.vue
+++ 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>
--- a/src/components/custom/workflow/workflow-task-apply-modal.vue
+++ b/src/components/custom/workflow/workflow-task-apply-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 {
--- 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>