feat-wip(projects): 新增待办任务功能，优化代码

docs/sql/sys_menu.sql

@@ -38,6 +38,6 @@ UPDATE `sys_menu` SET `path` = 'https://gitee.com/xlsea/ruoyi-plus-soybean', `co
 UPDATE `sys_menu` SET `status` = '1' WHERE `menu_id` IN ( '116', '130', '131', '132', '11700', '11701' );
 
 -- 工作流菜单
-UPDATE `ry-soy`.`sys_menu` SET `component` = 'workflow/design/index' WHERE `menu_id` = 11700;
+UPDATE `sys_menu` SET `component` = 'workflow/design/index' WHERE `menu_id` = 11700;
 
 

src/components/custom/workflow/approval-info-panel.vue

@@ -1,6 +1,5 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import type { DataTableColumns } from 'naive-ui';
 import { NPopover, NSpace, NTag } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { fetchGetFlowHisTaskList } from '@/service/api/workflow/instance';
@@ -26,7 +25,7 @@ const { loading, startLoading, endLoading } = useLoading();
 
 const { oss } = useDownload();
 
-const columns = ref<DataTableColumns<Api.Workflow.HisTask>>([
+const columns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
   {
     title: '任务名称',
     key: 'nodeName',
@@ -180,7 +179,7 @@ async function getData() {
     hisTask.value = [];
     return;
   }
-  const promises = rawList.map(async item => {
+  const promises = rawList.map(async (item: Api.Workflow.HisTask) => {
     if (item.ext) {
       const { error: err, data: ossList } = await fetchGetOssListByIds(item.ext.split(','));
       if (!err) {

src/locales/langs/en-us.ts

@@ -238,6 +238,8 @@ const local: App.I18n.Schema = {
     workflow_design: 'Process Design',
     'workflow_process-definition': 'Process Definition',
     'workflow_process-instance': 'Process Instance',
+    workflow_task: 'Task',
+    'workflow_task_all-task-waiting': 'All Task Waiting',
     workflow_leave: 'Leave Apply'
   },
   menu: {

src/locales/langs/zh-cn.ts

@@ -238,6 +238,8 @@ const local: App.I18n.Schema = {
     workflow_design: '流程设计',
     'workflow_process-definition': '流程定义',
     'workflow_process-instance': '流程实例',
+    workflow_task: '任务',
+    'workflow_task_all-task-waiting': '待办任务',
     workflow_leave: '请假申请'
   },
   menu: {

src/router/elegant/imports.ts

@@ -48,4 +48,5 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   workflow_leave: () => import("@/views/workflow/leave/index.vue"),
   "workflow_process-definition": () => import("@/views/workflow/process-definition/index.vue"),
   "workflow_process-instance": () => import("@/views/workflow/process-instance/index.vue"),
+  "workflow_task_all-task-waiting": () => import("@/views/workflow/task/all-task-waiting/index.vue"),
 };

src/router/elegant/routes.ts

@@ -385,6 +385,25 @@ export const generatedRoutes: GeneratedRoute[] = [
           title: 'workflow_process-instance',
           i18nKey: 'route.workflow_process-instance'
         }
+      },
+      {
+        name: 'workflow_task',
+        path: '/workflow/task',
+        meta: {
+          title: 'workflow_task',
+          i18nKey: 'route.workflow_task'
+        },
+        children: [
+          {
+            name: 'workflow_task_all-task-waiting',
+            path: '/workflow/task/all-task-waiting',
+            component: 'view.workflow_task_all-task-waiting',
+            meta: {
+              title: 'workflow_task_all-task-waiting',
+              i18nKey: 'route.workflow_task_all-task-waiting'
+            }
+          }
+        ]
       }
     ]
   }

src/router/elegant/transform.ts

@@ -204,7 +204,9 @@ const routeMap: RouteMap = {
   "workflow_design": "/workflow/design",
   "workflow_leave": "/workflow/leave",
   "workflow_process-definition": "/workflow/process-definition",
-  "workflow_process-instance": "/workflow/process-instance"
+  "workflow_process-instance": "/workflow/process-instance",
+  "workflow_task": "/workflow/task",
+  "workflow_task_all-task-waiting": "/workflow/task/all-task-waiting"
 };
 
 /**

src/service/api/workflow/task.ts

@@ -25,3 +25,21 @@ export function fetchCompleteTask(data: Api.Workflow.CompleteTaskOperateParams)
     data
   });
 }
+
+/** 获取所有待办任务 */
+export function fetchGetAllWaitingTask(data: Api.Workflow.TaskSearchParams) {
+  return request<Api.Workflow.TaskList>({
+    url: '/workflow/task/pageByAllTaskWait',
+    method: 'get',
+    params: data
+  });
+}
+
+/** 获取所有已办任务 */
+export function fetchGetAllFinishedTask(data: Api.Workflow.TaskSearchParams) {
+  return request<Api.Workflow.HisTaskList>({
+    url: '/workflow/task/pageByAllTaskFinish',
+    method: 'get',
+    params: data
+  });
+}

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

@@ -305,6 +305,10 @@ declare namespace Api {
       /** 流程版本号 */
       version: string;
     }>;
+
+    /** 任务列表 */
+    type TaskList = Common.PaginatingQueryRecord<Task>;
+
     /** 协作方式 */
     type CooperateType = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
@@ -378,11 +382,25 @@ declare namespace Api {
       attachmentList: Api.System.Oss[];
     }>;
 
-    type InstanceIdWithHisTask = CommonType.RecordNullable<{
+    /** 历史任务列表 */
+    type HisTaskList = Common.PaginatingQueryRecord<HisTask>;
+
+    /** 流程实例ID与历史任务 */
+    type InstanceIdWithHisTask = Common.CommonRecord<{
+      /** 流程实例ID */
       instanceId: CommonType.IdType;
+      /** 历史任务 */
       list: HisTask[];
     }>;
 
+    /** 任务搜索参数 */
+    type TaskSearchParams = CommonType.RecordNullable<
+      Pick<Task, 'flowName' | 'flowCode' | 'businessId' | 'category' | 'nodeName'> &
+        Api.Common.CommonSearchParams & {
+          createByIds: CommonType.IdType[];
+        }
+    >;
+
     /** 消息类型 */
     type MessageType = '1' | '2' | '3';
 

src/typings/elegant-router.d.ts

@@ -59,6 +59,8 @@ declare module "@elegant-router/types" {
     "workflow_leave": "/workflow/leave";
     "workflow_process-definition": "/workflow/process-definition";
     "workflow_process-instance": "/workflow/process-instance";
+    "workflow_task": "/workflow/task";
+    "workflow_task_all-task-waiting": "/workflow/task/all-task-waiting";
   };
 
   /**
@@ -157,6 +159,7 @@ declare module "@elegant-router/types" {
     | "workflow_leave"
     | "workflow_process-definition"
     | "workflow_process-instance"
+    | "workflow_task_all-task-waiting"
   >;
 
   /**

src/views/workflow/leave/index.vue

@@ -168,12 +168,11 @@ const {
           );
         }
 
-        const buttonWithDividers = buttons.flatMap((btn, index) => {
+        return (
-          if (index === 0) return [btn];
+          <div class="flex-center gap-1px">
-          return [<NDivider vertical />, btn];
+            {buttons.map((btn, index) => (index > 0 ? [<NDivider vertical />, btn] : btn))}
-        });
+          </div>
-
+        );
-        return <div class="flex-center gap-4px">{buttonWithDividers}</div>;
       }
     }
   ]

src/views/workflow/process-definition/index.vue

@@ -102,9 +102,7 @@ const {
       title: '版本号',
       align: 'center',
       minWidth: 120,
-      render(row) {
+      render: row => <NTag type="info">v{row.version}.0</NTag>
-        return <NTag type="info">v{row.version}.0</NTag>;
-      }
     },
     {
       key: 'activityStatus',
@@ -176,8 +174,8 @@ const {
       width: 150,
       fixed: 'right',
       render: row => {
-        const buttons = [];
+        const firstRowButtons = [];
-        buttons.push(
+        firstRowButtons.push(
           <ButtonIcon
             text
             type="primary"
@@ -186,7 +184,7 @@ const {
             onClick={() => edit(row.id)}
           />
         );
-        buttons.push(
+        firstRowButtons.push(
           <ButtonIcon
             text
             type="error"
@@ -196,7 +194,7 @@ const {
             onPositiveClick={() => handleDelete(row.id)}
           />
         );
-        buttons.push(
+        firstRowButtons.push(
           <ButtonIcon
             text
             type="primary"
@@ -207,10 +205,9 @@ const {
           />
         );
 
-        const firstRowButtons = buttons.flatMap((btn, index) => {
+        const firstRowWithDividers = firstRowButtons.map((btn, index) =>
-          if (index === 0) return [btn];
+          index > 0 ? [<NDivider vertical />, btn] : btn
-          return [<NDivider vertical />, btn];
+        );
-        });
 
         const secondRowButtons = [];
 
@@ -257,14 +254,13 @@ const {
           );
         }
 
-        const secondRowWithDividers = secondRowButtons.flatMap((btn, index) => {
+        const secondRowWithDividers = secondRowButtons.map((btn, index) =>
-          if (index === 0) return [btn];
+          index > 0 ? [<NDivider vertical />, btn] : btn
-          return [<NDivider vertical />, btn];
+        );
-        });
 
         return (
           <div class="flex-col">
-            <div class="h-[24px] flex-center gap-4px">{firstRowButtons}</div>
+            <div class="h-[24px] flex-center gap-4px">{firstRowWithDividers}</div>
             <div class="h-[24px] flex-center gap-4px">{secondRowWithDividers}</div>
           </div>
         );

src/views/workflow/process-instance/index.vue

@@ -90,9 +90,7 @@ const baseColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>([
     title: '流程分类',
     align: 'center',
     minWidth: 120,
-    render(row) {
+    render: row => <NTag type="default">{row.categoryName}</NTag>
-      return <NTag type="default">{row.categoryName}</NTag>;
-    }
   },
   {
     key: 'createByName',
@@ -104,7 +102,8 @@ const baseColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>([
     key: 'version',
     title: '版本号',
     align: 'center',
-    width: 80
+    width: 80,
+    render: row => <NTag type="info">v{row.version}.0</NTag>
   },
   {
     key: 'activityStatus',
@@ -205,12 +204,11 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
         );
       }
 
-      const buttonWithDividers = buttons.flatMap((btn, index) => {
+      return (
-        if (index === 0) return [btn];
+        <div class="flex-center gap-1px">
-        return [<NDivider vertical />, btn];
+          {buttons.map((btn, index) => (index > 0 ? [<NDivider vertical />, btn] : btn))}
-      });
+        </div>
-
+      );
-      return <div class="flex-center gap-1px">{buttonWithDividers}</div>;
     }
   }
 ]);

src/views/workflow/task/all-task-waiting/index.vue

@@ -0,0 +1,248 @@
+<script setup lang="tsx">
+import { computed, ref, watch } from 'vue';
+import { NButton, NDivider, NEmpty, NInput, NRadioButton, NRadioGroup, NTag } from 'naive-ui';
+import { useLoading } from '@sa/hooks';
+import { fetchGetAllFinishedTask, fetchGetAllWaitingTask } from '@/service/api/workflow/task';
+import { fetchGetCategoryTree } from '@/service/api/workflow/category';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import ButtonIcon from '@/components/custom/button-icon.vue';
+import { $t } from '@/locales';
+import AllTaskWaitingSearch from './modules/all-task-waiting-search.vue';
+
+interface WaitingStatusOption {
+  label: string;
+  value: boolean;
+}
+
+// Create a union type to handle both Task and HisTask
+type TaskOrHisTask = Api.Workflow.Task | Api.Workflow.HisTask;
+
+defineOptions({
+  name: 'ProcessInstanceList'
+});
+
+useDict('wf_business_status');
+const appStore = useAppStore();
+
+const waitingStatus = ref<boolean>(true);
+const waitingStatusOptions = ref<WaitingStatusOption[]>([
+  { label: '待办任务', value: true },
+  { label: '已办任务', value: false }
+]);
+
+// Common column definitions to reduce duplication
+// Explicitly type as TableColumn<TaskOrHisTask> to ensure compatibility with both types
+const commonColumns: NaiveUI.TableColumn<TaskOrHisTask>[] = [
+  { type: 'selection', align: 'center', width: 50 },
+  { key: 'flowName', title: '流程定义名称', align: 'center', width: 120 },
+  { key: 'flowCode', title: '流程定义编码', align: 'center', width: 120 },
+  { key: 'categoryName', title: '流程分类', align: 'center', width: 120 },
+  {
+    key: 'version',
+    title: '版本号',
+    align: 'center',
+    width: 120,
+    render: row => <NTag type="info">v{row.version}.0</NTag>
+  },
+  { key: 'nodeName', title: '任务名称', align: 'center', width: 120 },
+  { key: 'createByName', title: '申请人', align: 'center', width: 120 },
+  { key: 'flowStatus', title: '流程状态', align: 'center', width: 120 }
+];
+
+// Waiting task specific columns
+const waitingColumns = ref<NaiveUI.TableColumn<Api.Workflow.Task>[]>([
+  ...(commonColumns as NaiveUI.TableColumn<Api.Workflow.Task>[]),
+  { key: 'assigneeNames', title: '办理人', align: 'center', width: 120 },
+  { key: 'createTime', title: '创建时间', align: 'center', width: 120 }
+]);
+
+// Finished task specific columns
+const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
+  ...(commonColumns as NaiveUI.TableColumn<Api.Workflow.HisTask>[]),
+  { key: 'approveName', title: '办理人', align: 'center', width: 120 },
+  { key: 'flowTaskStatus', title: '任务状态', align: 'center', width: 120 },
+  { key: 'createTime', title: '创建时间', align: 'center', width: 120 }
+]);
+
+// Operation column with optimized render function
+const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
+  {
+    key: 'operate',
+    title: $t('common.operate'),
+    align: 'center',
+    fixed: 'right',
+    width: 120,
+    render: () => {
+      const buttons = [
+        <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="查看" />
+      ];
+
+      if (waitingStatus.value) {
+        buttons.push(<ButtonIcon text type="info" icon="material-symbols:edit-document" tooltipContent="流程干预" />);
+      }
+
+      return (
+        <div class="flex-center gap-1px">
+          {buttons.map((btn, index) => (index > 0 ? [<NDivider vertical />, btn] : btn))}
+        </div>
+      );
+    }
+  }
+]);
+
+const {
+  columns,
+  reloadColumns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams,
+  updateApiFn
+} = useTable({
+  apiFn: fetchGetAllWaitingTask,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    category: null,
+    flowName: null,
+    flowCode: null,
+    nodeName: null,
+    createByIds: null
+  },
+  columns: () => {
+    const baseColumns = waitingStatus.value ? waitingColumns.value : finishColumns.value;
+    return [...baseColumns, ...operateColumns.value] as NaiveUI.TableColumn<TaskOrHisTask>[];
+  }
+});
+
+const { checkedRowKeys, editingData: _editingData, handleEdit: _handleEdit } = useTableOperate(data, getData);
+
+watch(waitingStatus, async () => {
+  const newApiFn = waitingStatus.value ? fetchGetAllWaitingTask : fetchGetAllFinishedTask;
+  // @ts-expect-error - This is a workaround for the type issue
+  updateApiFn(newApiFn);
+  await getDataByPage();
+  reloadColumns();
+});
+
+// Category tree handling
+const { loading: treeLoading, startLoading: startTreeLoading, endLoading: endTreeLoading } = useLoading();
+const categoryPattern = ref<string>();
+const categoryData = ref<Api.Common.CommonTreeRecord>([]);
+const selectedKeys = ref<string[]>([]);
+const expandedKeys = ref<CommonType.IdType[]>(['100']);
+
+const selectable = computed(() => !loading.value);
+
+async function getTreeData() {
+  startTreeLoading();
+  const { data: tree, error } = await fetchGetCategoryTree();
+  if (!error) {
+    categoryData.value = tree;
+  }
+  endTreeLoading();
+}
+
+function handleClickTree(keys: string[]) {
+  searchParams.category = keys.length ? keys[0] : null;
+  checkedRowKeys.value = [];
+  getDataByPage();
+}
+
+function handleResetTreeData() {
+  categoryPattern.value = undefined;
+  getTreeData();
+}
+
+function handleResetSearch() {
+  resetSearchParams();
+  selectedKeys.value = [];
+}
+
+getTreeData();
+</script>
+
+<template>
+  <TableSiderLayout sider-title="流程分类列表">
+    <template #header-extra>
+      <NButton size="small" text class="h-18px" @click.stop="() => handleResetTreeData()">
+        <template #icon>
+          <SvgIcon icon="ic:round-refresh" />
+        </template>
+      </NButton>
+    </template>
+    <template #sider>
+      <NInput v-model:value="categoryPattern" clearable :placeholder="$t('common.keywordSearch')" />
+      <NSpin class="category-tree" :show="treeLoading">
+        <NTree
+          v-model:selected-keys="selectedKeys"
+          v-model:expanded-keys="expandedKeys"
+          block-node
+          show-line
+          :data="categoryData as []"
+          :show-irrelevant-nodes="false"
+          :pattern="categoryPattern"
+          class="infinite-scroll h-full min-h-200px py-3"
+          key-field="id"
+          label-field="label"
+          virtual-scroll
+          :selectable="selectable"
+          @update:selected-keys="handleClickTree"
+        >
+          <template #empty>
+            <NEmpty description="暂无分类信息" class="h-full min-h-200px justify-center" />
+          </template>
+        </NTree>
+      </NSpin>
+    </template>
+    <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
+      <AllTaskWaitingSearch v-model:model="searchParams" @reset="handleResetSearch" @search="getDataByPage" />
+      <NCard :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+        <template #header>
+          <NSpace>
+            <NRadioGroup v-model:value="waitingStatus" on-up size="small">
+              <NRadioButton
+                v-for="(status, index) in waitingStatusOptions"
+                :key="index"
+                :value="status.value"
+                :label="status.label"
+              />
+            </NRadioGroup>
+          </NSpace>
+        </template>
+        <template #header-extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :loading="loading"
+            :show-add="false"
+            :show-delete="false"
+            :show-export="false"
+            @refresh="getData"
+          >
+            <template #prefix></template>
+          </TableHeaderOperation>
+        </template>
+        <NDataTable
+          v-model:checked-row-keys="checkedRowKeys"
+          :columns="columns"
+          :data="data"
+          size="small"
+          :flex-height="!appStore.isMobile"
+          :scroll-x="1405"
+          :loading="loading"
+          remote
+          :row-key="row => row.id"
+          :pagination="mobilePagination"
+          class="sm:h-full"
+        />
+      </NCard>
+    </div>
+  </TableSiderLayout>
+</template>

src/views/workflow/task/all-task-waiting/modules/all-task-waiting-search.vue

@@ -0,0 +1,63 @@
+<script setup lang="tsx">
+import { useNaiveForm } from '@/hooks/common/form';
+defineOptions({
+  name: 'AllTaskWaitingSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const model = defineModel<Api.Workflow.TaskSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="100">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="6 s:12 m:6" label="任务名称" path="nodeName" class="pr-24px">
+              <NInput v-model:value="model.nodeName" placeholder="请输入任务名称" />
+            </NFormItemGi>
+            <NFormItemGi span="6 s:12 m:6" label="流程定义名称" path="bucketName" class="pr-24px">
+              <NInput v-model:value="model.flowName" placeholder="请输入流程定义名称" />
+            </NFormItemGi>
+            <NFormItemGi span="6 s:12 m:6" label="流程定义编码" path="flowCode" class="pr-24px">
+              <NInput v-model:value="model.flowCode" placeholder="流程定义编码" />
+            </NFormItemGi>
+            <NFormItemGi span="6" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>