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>
--- a/src/views/workflow/task/components/processTasks/ToDoTasksV2.vue
+++ b/src/views/workflow/task/components/processTasks/ToDoTasksV2.vue
@ -1,22 +1,10 @@
 <template>
-    <BasicTable @register="registerTable" @row-dbClick="onRowDblClick"
-                @selection-change="selectionChange">
+    <BasicTable @register="registerTable" @row-dbClick="onRowDblClick" @selection-change="selectionChange">
        <template #toolbar>
-            <BatchApprovalProcess
-                v-if="showBatchApproval"
-                :selectedRows="data.selectedRows"
-                @close="BatchClearHandler"
-            >
+            <BatchApprovalProcess v-if="showBatchApproval" :selectedRows="data.selectedRows" @close="BatchClearHandler">
                <a-button v-auth="'processtasks:batchApproval'">{{ t('批量审批') }}</a-button>
            </BatchApprovalProcess>
-            <ApprovalProcess
-                v-else
-                :processId="processId"
-                :schemaId="schemaId"
-                :taskId="taskId"
-                :visible="false"
-                @close="clearHandler"
-            >
+            <ApprovalProcess v-else :processId="processId" :schemaId="schemaId" :taskId="taskId" :visible="false" @close="clearHandler">
                <a-button v-auth="'processtasks:approve'">{{ t('审批') }}</a-button>
            </ApprovalProcess>
            <LookProcess :processId="processId" :taskId="taskId" @close="clearHandler">
@ -25,70 +13,70 @@
        </template>

        <template #currentProgress="{ record }">
-            <a-progress v-if="record.currentProgress" :percent="record.currentProgress"
-                        size="small" />
+            <a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
        </template>
    </BasicTable>
    <InfoModal @register="registerModal" @success="reload" />
 </template>

 <script lang="ts" setup>
-    import userTaskTable from "./../../hooks/userTaskTable";
-    import { useModal } from "/@/components/Modal";
-    import LookProcess from "./../LookProcess.vue";
-    import ApprovalProcess from "./../ApprovalProcess.vue";
-    import BatchApprovalProcess from "./../BatchApprovalProcess.vue";
-    import InfoModal from "../BatchApprovalInfo.vue";
-    import { BasicTable, useTable, BasicColumn } from "/@/components/Table";
-    import { getSchemaTask } from "/@/api/workflow/process";
-    import { TaskTypeUrl } from "/@/enums/workflowEnum";
-    import { useI18n } from "/@/hooks/web/useI18n";
-    import { unref, watch } from "vue";
-    import { useRouter } from "vue-router";
+    import userTaskTable from './../../hooks/userTaskTable';
+    import { useModal } from '/@/components/Modal';
+    import LookProcess from './../LookProcess.vue';
+    import ApprovalProcess from './../ApprovalProcess.vue';
+    import BatchApprovalProcess from './../BatchApprovalProcess.vue';
+    import InfoModal from '../BatchApprovalInfo.vue';
+    import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+    import { getSchemaTask } from '/@/api/workflow/process';
+    import { TaskTypeUrl } from '/@/enums/workflowEnum';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { unref, watch, onMounted, onUnmounted } from 'vue';
+    import { useRouter } from 'vue-router';
+    import useEventBus from '/@/hooks/event/useEventBus';

    const { t } = useI18n();
    const configColumns: BasicColumn[] = [
        {
-            title: t("流水号"),
-            dataIndex: "serialNumber",
+            title: t('流水号'),
+            dataIndex: 'serialNumber',
            width: 80,
-            align: "left"
+            align: 'left'
        },
        {
-            title: t("流程名称"),
-            dataIndex: "processName",
-            width: "32%",
-            align: "left"
+            title: t('流程名称'),
+            dataIndex: 'processName',
+            width: '32%',
+            align: 'left'
        },
        {
-            title: t("任务名称"),
-            dataIndex: "taskName",
-            width: "17%",
-            align: "left"
+            title: t('任务名称'),
+            dataIndex: 'taskName',
+            width: '17%',
+            align: 'left'
        },
        {
-            title: t("当前进度"),
-            dataIndex: "currentProgress",
-            width: "17%",
-            align: "left",
-            slots: { customRender: "currentProgress" }
+            title: t('当前进度'),
+            dataIndex: 'currentProgress',
+            width: '17%',
+            align: 'left',
+            slots: { customRender: 'currentProgress' }
        },
        {
-            title: t("发起人"),
-            dataIndex: "startUserName",
+            title: t('发起人'),
+            dataIndex: 'startUserName',
            width: 80,
-            align: "left"
+            align: 'left'
        },
        {
-            title: t("发起时间"),
+            title: t('发起时间'),
            width: 120,
-            dataIndex: "startTime",
-            align: "left"
+            dataIndex: 'startTime',
+            align: 'left'
        }
    ];
    const [registerModal, { openModal }] = useModal();
-    const { formConfig, data, processId, taskId, schemaId, selectionChange, showBatchApproval } =
-        userTaskTable();
+    const { formConfig, data, processId, taskId, schemaId, selectionChange, showBatchApproval } = userTaskTable();
+    const {bus, FLOW_PROCESSED} = useEventBus();

    function BatchClearHandler(v) {
        if (v) {
@ -102,16 +90,16 @@
        reload();
    };
    const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
-        title: t("待办任务列表"),
+        title: t('待办任务列表'),
        api: getSchemaTask,
-        rowKey: "id",
+        rowKey: 'id',
        columns: configColumns,
        formConfig: formConfig(),
        beforeFetch: (params) => {
            return { data: params, taskUrl: TaskTypeUrl.PENDING_TASKS };
        },
        rowSelection: {
-            type: "checkbox"
+            type: 'checkbox'
        },
        useSearchForm: true,
        showTableSetting: true,
@ -129,7 +117,7 @@
    watch(
        () => unref(currentRoute),
        (val) => {
-            if (val.name == "ProcessTasks") reload();
+            if (val.name == 'ProcessTasks') reload();
        },
        { deep: true }
    );
@ -142,6 +130,18 @@
            }
        });
    };
+
+    function onFlowProcessed() {
+        reload();
+    }
+
+    onMounted(() => {
+        bus.on(FLOW_PROCESSED, onFlowProcessed);
+    });
+
+    onUnmounted(() => {
+        bus.off(FLOW_PROCESSED, onFlowProcessed);
+    });
 </script>

 <style scoped></style>