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

2024-02-15 10:18:52 +08:00
parent 93aa65a972
commit b61380ee1d
2 changed files with 245 additions and 117 deletions
--- a/src/views/secondDev/processTasksPage.vue
+++ b/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>