feat: 将我发起的流程列表独立出来，改为tab中打开，调整审批记录的样式

2024-03-06 14:46:03 +08:00
parent b9dd84e576
commit a92cb386b2
8 changed files with 410 additions and 131 deletions
--- a/src/views/workflow/task/components/processTasks/MyProcessV2.vue
+++ b/src/views/workflow/task/components/processTasks/MyProcessV2.vue
@ -0,0 +1,183 @@
+<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>