geg-gas-web/src/views/workflow/task/FlowLaunch.vue

<template>
    <PageLayout :layoutClass="currentRoute.path == '/workflow/launch' ? '!p-2' : currentRoute.path == '/task/processtasks' ? '!p-0 !pr-7px' : ''" :searchConfig="searchConfig" :title="t('流程模板列表')" @search="search" @scroll-height="scrollHeight">
        <template #left>
            <BasicTree :clickRowToExpand="true" :fieldNames="{ key: 'id', title: 'name' }" :title="t('流程模板分类')" :treeData="data.treeData" search @select="handleSelect" />
        </template>

        <template #search></template>

        <template #right>
            <div v-if="data.list.length > 0" :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }">
                <div class="list-page-box">
                    <TemplateCard v-for="(item, index) in data.list" :key="index" :item="item" @click="launchProcessInTab(item.id)" />
                </div>
                <div class="page-box">
                    <a-pagination
                        v-model:current="data.pagination.current"
                        v-model:pageSize="data.pagination.pageSize"
                        :pageSizeOptions="['18', '36', '54', '72']"
                        :show-total="(total) => t(`共 {total} 条数据`, { total })"
                        :showSizeChanger="true"
                        :total="data.pagination.total"
                        @change="getList"
                    />
                </div>
            </div>

            <div v-else>
                <EmptyBox />
            </div>
            <LaunchProcess v-if="visibleLaunchProcess" :schemaId="data.schemaId" @close="visibleLaunchProcess = false" />
        </template>
    </PageLayout>
</template>

<script lang="ts" setup>
    import { onMounted, reactive, ref, unref, watch } from 'vue';
    import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
    import { EmptyBox } from '/@/components/ModalPanel/index';
    import { getDesignPage } from '/@/api/workflow/design';
    import { WorkflowPageModel } from '/@/api/workflow/model';
    import { getDicDetailList } from '/@/api/system/dic';
    import { BasicTree, TreeItem } from '/@/components/Tree';
    import { PageLayout } from '/@/components/ModalPanel';
    import LaunchProcess from './components/LaunchProcess.vue';
    import { FlowCategory } from '/@/enums/workflowEnum';
    import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
    import { useRouter } from 'vue-router';
    import { useI18n } from '/@/hooks/web/useI18n';

    const { t } = useI18n();
    const router = useRouter();
    const { currentRoute } = router;
    const searchConfig = [
        {
            field: 'code',
            label: t('模板编码'),
            type: 'input'
        },
        {
            field: 'name',
            label: t('模板名称'),
            type: 'input'
        }
    ];
    const { tableOptions, scrollHeight } = userTableScrollHeight();
    let visibleLaunchProcess = ref(false);
    let data: {
        list: Array<WorkflowPageModel>;
        treeData: Array<TreeItem>;
        schemaId: string;
        selectDeptId: string;
        pagination: { current: number; total: number; pageSize: number };
    } = reactive({
        list: [],
        treeData: [],
        schemaId: '',
        selectDeptId: '',
        pagination: {
            current: 1,
            total: 0,
            pageSize: 18
        }
    });

    watch(
        () => unref(currentRoute),
        (val) => {
            if (val.path == '/workflow/launch') init();
        },
        { deep: true }
    );
    onMounted(() => {
        getCategoryTree();
        init();
    });

    async function init() {
        data.pagination.current = 1;
        data.pagination.total = 0;
        data.selectDeptId = '';
        await getList();
    }

    async function getCategoryTree() {
        let res = (await getDicDetailList({
            itemId: FlowCategory.ID
        })) as unknown as TreeItem[];
        data.treeData = res.map((ele) => {
            ele.icon = 'ant-design:tags-outlined';
            return ele;
        });
    }

    async function getList(params?: any) {
        const searchParams = {
            ...{
                limit: data.pagination.current,
                size: data.pagination.pageSize
            },
            ...{ category: data.selectDeptId },
            ...params,
            ...{ enabledMark: 1 } // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
        };

        try {
            let res = await getDesignPage(searchParams);
            data.pagination.total = res.total;
            data.list = res.list;
        } catch (error) {}
    }

    function handleSelect(deptIds) {
        data.selectDeptId = deptIds[0];
        getList();
    }

    async function launchProcess(id: string) {
        // 旧版弹窗界面 便于调试
        data.schemaId = id;
        visibleLaunchProcess.value = true;
    }

    function launchProcessInTab(id: string) {
        router.push({
            path: `/flow/${id}/0/createFlow`
        });
    }

    function search(params: any) {
        data.pagination.current = 1;
        getList(params);
    }
</script>
<style lang="less" scoped>
    .list-page-box {
        display: flex;
        flex-wrap: wrap;
    }

    :deep(.list-item) {
        max-width: 320px;
    }

    .page-box {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
</style>