geg-gas-web/src/views/workflow/task/components/processTasks/MyProcessV2.vue

<template>
    <BasicTable @register="registerTable" @selection-change="selectionChange" @row-dbClick="showProcess">
        <template #toolbar>
            <RejectProcess :processId="processId" :taskId="taskId" @close="reload" @restart="restartProcess">
                <a-button v-auth="'processtasks:withdraw'">{{ t('撤回') }}</a-button>
            </RejectProcess>
            <a-button v-auth="'processtasks:view'" @click="showProcess">{{ t('查看') }}</a-button>
            <a-button v-auth="'processtasks:relaunch'" @click="restartProcess">{{ t('重新发起') }}</a-button>
        </template>

        <template #currentProgress="{ record }">
            <a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
        </template>
        <template #action="{ record }">
            <TableAction
                :actions="[
                    {
                        icon: 'ant-design:delete-outlined',
                        auth: 'processtasks:delete',
                        color: 'error',
                        popConfirm: {
                            title: t('移入回收站'),
                            confirm: handleDelete.bind(null, record)
                        }
                    }
                ]"
            />
        </template>
    </BasicTable>
    <LaunchProcess v-if="restartProcessVisible" :processId="processId" :schemaId="schemaId" :taskId="taskId" @close="restartProcessClose" />
</template>

<script lang="ts" setup>
    import userTaskTable from './../../hooks/userTaskTable';

    import { ref, unref, watch } from 'vue';

    import LaunchProcess from './../LaunchProcess.vue';
    import RejectProcess from './../RejectProcess.vue';

    import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
    import { getSchemaTask, moveRecycle } from '/@/api/workflow/process';
    import { notification } from 'ant-design-vue';
    import { TaskTypeUrl } from '/@/enums/workflowEnum';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { useRouter } from 'vue-router';

    const { t } = useI18n();
    const restartProcessVisible = ref(false);
    const configColumns: BasicColumn[] = [
        {
            title: t('流水号'),
            dataIndex: 'serialNumber',
            width: 50,
            sorter: true
        },
        {
            title: t('流程名称'),
            dataIndex: 'processName',
            align: 'left',
            width: '32%',
            sorter: true
        },
        {
            title: t('任务名称'),
            dataIndex: 'currentTaskName',
            sorter: true,
            width: '17%',
            align: 'left'
        },
        {
            title: t('当前进度'),
            dataIndex: 'currentProgress',
            sorter: true,
            width: '17%',
            slots: { customRender: 'currentProgress' }
        },
        {
            title: t('发起人'),
            dataIndex: 'originator',
            align: 'left',
            width: 80
        },
        {
            title: t('发起时间'),
            align: 'left',
            width: 120,
            dataIndex: 'createTime'
        }
    ];

    const { formConfig, processId, taskId, schemaId, selectionChange } = userTaskTable();

    const [registerTable, { reload }] = useTable({
        title: t('我的流程列表'),
        api: getSchemaTask,
        rowKey: 'id',
        columns: configColumns,
        formConfig: formConfig('MyProcess'),
        rowSelection: {
            type: 'radio'
        },
        beforeFetch: (params) => {
            return { data: params, taskUrl: TaskTypeUrl.MY_PROCESS };
        },
        useSearchForm: true,
        showTableSetting: true,
        striped: false,
        pagination: {
            pageSize: 18
        },
        actionColumn: {
            width: 60,
            title: t('操作'),
            dataIndex: 'action',
            slots: { customRender: 'action' },
            fixed: undefined
        }
    });

    function restartProcess() {
        if (processId.value) {
            restartProcessVisible.value = true;
        } else {
            notification.open({
                type: 'error',
                message: t('提示'),
                description: t('请选择一个流程重新发起')
            });
        }
    }

    function restartProcessClose() {
        restartProcessVisible.value = false;
        reload();
    }

    async function handleDelete(record: Recordable) {
        if (record.processId) {
            try {
                let res = await moveRecycle(record.processId);
                if (res) {
                    notification.open({
                        type: 'success',
                        message: t('移入回收站'),
                        description: t('移入回收站成功')
                    });
                    reload();
                } else {
                    notification.open({
                        type: 'error',
                        message: t('移入回收站'),
                        description: t('移入回收站失败')
                    });
                }
            } catch (error) {}
        }
    }

    const router = useRouter();
    const { currentRoute } = router;

    function showProcess(record, index) {
        const { processId, taskId, schemaId } = record;
        router.push({
            path: `/flow/${schemaId}/${processId}/approveFlow`,
            query: {
                taskId,
                readonly: 1
            }
        });
    }

    watch(
        () => unref(currentRoute),
        (val) => {
            if (val.name == 'ProcessTasks') reload();
        },
        { deep: true }
    );
</script>

<style scoped></style>