feat: 修改流程列表页面，去掉左侧的类别树

src/router/routes/basic.ts

@@ -1,150 +1,161 @@
 import type { AppRouteRecordRaw } from '/@/router/types';
 import { t } from '/@/hooks/web/useI18n';
-import {
+import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT, PAGE_NOT_FOUND_NAME } from '/@/router/constant';
-  REDIRECT_NAME,
-  LAYOUT,
-  EXCEPTION_COMPONENT,
-  PAGE_NOT_FOUND_NAME,
-} from '/@/router/constant';
 import { PageEnum } from '/@/enums/pageEnum';
 
 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
-  path: '/:path(.*)*',
+    path: '/:path(.*)*',
-  name: PAGE_NOT_FOUND_NAME,
+    name: PAGE_NOT_FOUND_NAME,
-  component: LAYOUT,
+    component: LAYOUT,
-  meta: {
+    meta: {
-    title: 'ErrorPage',
-    hideBreadcrumb: true,
-    hideMenu: true,
-  },
-  children: [
-    {
-      path: '/:path(.*)*',
-      name: PAGE_NOT_FOUND_NAME,
-      component: EXCEPTION_COMPONENT,
-      meta: {
         title: 'ErrorPage',
         hideBreadcrumb: true,
-        hideMenu: true,
+        hideMenu: true
-      },
     },
-  ],
+    children: [
+        {
+            path: '/:path(.*)*',
+            name: PAGE_NOT_FOUND_NAME,
+            component: EXCEPTION_COMPONENT,
+            meta: {
+                title: 'ErrorPage',
+                hideBreadcrumb: true,
+                hideMenu: true
+            }
+        }
+    ]
 };
 
 export const REDIRECT_ROUTE: AppRouteRecordRaw = {
-  path: '/redirect',
+    path: '/redirect',
-  component: LAYOUT,
+    component: LAYOUT,
-  name: 'RedirectTo',
+    name: 'RedirectTo',
-  meta: {
+    meta: {
-    title: REDIRECT_NAME,
-    hideBreadcrumb: true,
-    hideMenu: true,
-  },
-  children: [
-    {
-      path: '/redirect/:path(.*)',
-      name: REDIRECT_NAME,
-      component: () => import('/@/views/sys/redirect/index.vue'),
-      meta: {
         title: REDIRECT_NAME,
         hideBreadcrumb: true,
-      },
+        hideMenu: true
     },
-  ],
+    children: [
+        {
+            path: '/redirect/:path(.*)',
+            name: REDIRECT_NAME,
+            component: () => import('/@/views/sys/redirect/index.vue'),
+            meta: {
+                title: REDIRECT_NAME,
+                hideBreadcrumb: true
+            }
+        }
+    ]
 };
 
 export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
-  path: '/error-log',
+    path: '/error-log',
-  name: 'ErrorLog',
+    name: 'ErrorLog',
-  component: LAYOUT,
+    component: LAYOUT,
-  redirect: '/error-log/list',
+    redirect: '/error-log/list',
-  meta: {
+    meta: {
-    title: 'ErrorLog',
+        title: 'ErrorLog',
-    hideBreadcrumb: true,
-    hideChildrenInMenu: true,
-  },
-  children: [
-    {
-      path: 'list',
-      name: 'ErrorLogList',
-      component: () => import('/@/views/sys/error-log/index.vue'),
-      meta: {
-        title: t('错误日志列表'),
         hideBreadcrumb: true,
-        currentActiveMenu: '/error-log',
+        hideChildrenInMenu: true
-      },
     },
-  ],
+    children: [
+        {
+            path: 'list',
+            name: 'ErrorLogList',
+            component: () => import('/@/views/sys/error-log/index.vue'),
+            meta: {
+                title: t('错误日志列表'),
+                hideBreadcrumb: true,
+                currentActiveMenu: '/error-log'
+            }
+        }
+    ]
 };
 
 export const SYSTEM_ROUTE: AppRouteRecordRaw = {
-  path: '/dashboard',
+    path: '/dashboard',
-  name: 'Dashboard',
+    name: 'Dashboard',
-  component: LAYOUT,
+    component: LAYOUT,
-  redirect: '/dashboard/analysis',
+    redirect: '/dashboard/analysis',
-  meta: {
+    meta: {
-    orderNo: 10,
+        orderNo: 10,
-    icon: 'ion:grid-outline',
+        icon: 'ion:grid-outline',
-    title: t('分析页'),
+        title: t('分析页')
-  },
-  children: [
-    {
-      path: 'analysis',
-      name: 'Analysis',
-      component: () => import('/@/views/dashboard/analysis/index.vue'),
-      meta: {
-        affix: true,
-        title: t('分析页'),
-      },
     },
-    {
+    children: [
-      path: 'workbench',
+        {
-      name: 'Workbench',
+            path: 'analysis',
-      component: () => import('/@/views/dashboard/workbench/index.vue'),
+            name: 'Analysis',
-      meta: {
+            component: () => import('/@/views/dashboard/analysis/index.vue'),
-        title: t('工作台'),
+            meta: {
-      },
+                affix: true,
-    },
+                title: t('分析页')
-  ],
+            }
+        },
+        {
+            path: 'workbench',
+            name: 'Workbench',
+            component: () => import('/@/views/dashboard/workbench/index.vue'),
+            meta: {
+                title: t('工作台')
+            }
+        }
+    ]
 };
 
 export const USERCENTER_ROUTE: AppRouteRecordRaw = {
-  path: '/user-center',
+    path: '/user-center',
-  name: 'UserCenter',
+    name: 'UserCenter',
-  component: LAYOUT,
+    component: LAYOUT,
-  redirect: PageEnum.USER_CENTER,
+    redirect: PageEnum.USER_CENTER,
-  meta: {
+    meta: {
-    title: t('用户中心'),
+        title: t('用户中心')
-  },
-  children: [
-    {
-      path: 'info',
-      name: 'UserInfo',
-      component: () => import('/@/views/system/setting/index.vue'),
-      meta: {
-        title: t('用户中心'),
-        icon: 'ant-design:user-outlined',
-      },
     },
-  ],
+    children: [
+        {
+            path: 'info',
+            name: 'UserInfo',
+            component: () => import('/@/views/system/setting/index.vue'),
+            meta: {
+                title: t('用户中心'),
+                icon: 'ant-design:user-outlined'
+            }
+        }
+    ]
 };
 
 export const FLOW_ROUTE: AppRouteRecordRaw = {
-  path: '/flow',
+    path: '/flow',
-  name: 'Flow',
+    name: 'Flow',
-  meta: {
+    meta: {
-    title: '流程',
+        title: '流程'
-  },
-  component: LAYOUT,
-  children: [
-    {
-      path: 'createFlow',
-      name: 'CreateFlow',
-      component: () => import('/@/views/secondDev/createFlow.vue'),
-      meta: {
-        title: '新建流程',
-      },
     },
-  ],
+    component: LAYOUT,
+    children: [
+        {
+            path: 'createFlow',
+            name: 'CreateFlow',
+            component: () => import('/@/views/secondDev/createFlow.vue'),
+            meta: {
+                title: '新建流程'
+            }
+        },
+        {
+            path: 'approveFlow',
+            name: 'ApproveFlow',
+            component: () => import('/@/views/secondDev/approveFlow.vue'),
+            meta: {
+                title: '审批流程'
+            }
+        },
+        {
+            path: 'flowList',
+            name: 'FlowListPage',
+            component: () => import('/@/views/secondDev/processTasksPage.vue'),
+            meta: {
+                title: '流程列表'
+            }
+        }
+    ]
 };

src/views/secondDev/processTasksPage.vue

@@ -0,0 +1,117 @@
+<template>
+    <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
+        <component :is="data.componentName" />
+    </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+    import { reactive, shallowRef, defineAsyncComponent, unref, ref } from 'vue';
+    import { PageWrapper } from '/@/components/Page';
+    import ToDoTasks from '/@/views/workflow/task/components/processTasks/ToDoTasks.vue';
+    import { useRouter } from 'vue-router';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+
+    const { t } = useI18n();
+    const { currentRoute } = useRouter();
+    const tabStore = useMultipleTabStore();
+
+    const FlowLaunch = defineAsyncComponent({
+        loader: () => import('../workflow/task/FlowLaunch.vue')
+    });
+
+    const MyProcess = defineAsyncComponent({
+        loader: () => import('../workflow/task/components/processTasks/MyProcess.vue')
+    });
+    const TaskDone = defineAsyncComponent({
+        loader: () => import('../workflow/task/components/processTasks/TaskDone.vue')
+    });
+
+    const RecycleBin = defineAsyncComponent({
+        loader: () => import('../workflow/task/components/processTasks/RecycleBin.vue')
+    });
+
+    const MyCirculation = defineAsyncComponent({
+        loader: () => import('../workflow/task/components/processTasks/MyCirculation.vue')
+    });
+
+    const Drafts = defineAsyncComponent({
+        loader: () => import('../workflow/task/components/processTasks/Drafts.vue')
+    });
+    const componentByType: Map<string, any> = new Map([
+        ['ToDoTasks', ToDoTasks],
+        ['FlowLaunch', FlowLaunch],
+        ['TaskDone', TaskDone],
+        ['MyProcess', MyProcess],
+        ['RecycleBin', RecycleBin],
+        ['MyCirculation', MyCirculation],
+        ['Drafts', Drafts]
+    ]);
+
+    const treeData = [
+        {
+            key: 'ToDoTasks',
+            id: 'ToDoTasks',
+            name: t('待办任务'),
+            icon: 'ant-design:profile-outlined'
+        },
+        {
+            key: 'FlowLaunch',
+            id: 'FlowLaunch',
+            name: t('发起流程'),
+            icon: 'ant-design:profile-outlined'
+        },
+        {
+            key: 'TaskDone',
+            id: 'TaskDone',
+            name: t('已办任务'),
+            icon: 'ant-design:profile-outlined'
+        },
+        {
+            key: 'MyProcess',
+            id: 'MyProcess',
+            name: t('我的流程'),
+            icon: 'ant-design:profile-outlined'
+        },
+        {
+            key: 'MyCirculation',
+            id: 'MyCirculation',
+            name: t('我的传阅'),
+            icon: 'ant-design:profile-outlined'
+        },
+        {
+            key: 'Drafts',
+            id: 'Drafts',
+            name: t('草稿箱'),
+            icon: 'ant-design:profile-outlined'
+        },
+        {
+            key: 'RecycleBin',
+            id: 'RecycleBin',
+            name: t('回收站'),
+            icon: 'ant-design:profile-outlined'
+        }
+    ];
+    const selectedKeys = ref(['ToDoTasks']);
+    const query = unref(currentRoute).query;
+    let id = query.name;
+    const tabKey = query.tabKey as string;
+    let data = reactive({
+        componentName: shallowRef(ToDoTasks)
+    });
+    if (id) {
+        selectedKeys.value = [id.toString()];
+        const tabName = treeData.find((item) => item.id === id)?.name;
+        if (tabName && tabKey) {
+            tabStore.changeTitle(tabKey, tabName);
+        }
+        handleSelect([id]);
+    }
+
+    function handleSelect(componentRow) {
+        if (componentRow.length > 0 && componentRow[0]) {
+            data.componentName = componentByType.has(componentRow[0]) ? componentByType.get(componentRow[0]) : ToDoTasks;
+        }
+    }
+</script>
+<style lang="less" scoped></style>