geg-gas-web/src/views/secondDev/processTasksPage.vue

<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/ToDoTasksV2.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/MyProcessV2.vue')
    });
    const TaskDone = defineAsyncComponent({
        loader: () => import('../workflow/task/components/processTasks/TaskDoneV2.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/DraftsV2.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 = 'ToDoTasks';
    const lHash = location.hash;
    if (lHash.indexOf('/draft') > 0) {
        id = 'Drafts';
    } else if (lHash.indexOf('/myProcess') > 0) {
        id = 'MyProcess';
    } else if (lHash.indexOf('/done') > 0) {
        id = 'TaskDone';
    }
    let data = reactive({
        componentName: shallowRef(ToDoTasks)
    });
    if (id) {
        selectedKeys.value = [id.toString()];
        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>