geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
gaoyunqi
2024-03-06 14:46:03 +08:00
parent b9dd84e576
commit a92cb386b2
8 changed files with 410 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/secondDev/approveFlowPage.vue
View File

@ -9,13 +9,13 @@
</slot>
关闭
</a-button>
<a-button type="primary" @click="onApproveClick">
<a-button v-if="!readonly" type="primary" @click="onApproveClick">
<slot name="icon">
<check-circle-outlined />
</slot>
同意
</a-button>
<a-button @click="onDenyClick">
<a-button v-if="!readonly" @click="onDenyClick">
<slot name="icon">
<stop-outlined />
</slot>
@ -24,8 +24,8 @@
<a-dropdown>
<template #overlay>
<a-menu @click="onMoreClick">
<a-menu-item key="terminate">终止</a-menu-item>
<a-menu-item key="transfer">转办</a-menu-item>
<a-menu-item v-if="!readonly" key="terminate">终止</a-menu-item>
<a-menu-item v-if="!readonly" key="transfer">转办</a-menu-item>
<a-menu-item key="flowchart">查看流程图</a-menu-item>
</a-menu>
</template>
@ -39,7 +39,7 @@
<FormInformation
:key="renderKey"
ref="formInformation"
:disabled="false"
:disabled="readonly"
:formAssignmentData="data.formAssignmentData"
:formInfos="data.formInfos"
:opinions="data.opinions"
@ -66,8 +66,11 @@
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import Title from '/@/components/Title/src/Title.vue';
import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
import { message } from 'ant-design-vue';
import useEventBus from '/@/hooks/event/useEventBus';
const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
const { bus, FLOW_PROCESSED } = useEventBus();
const tabStore = useMultipleTabStore();
const router = useRouter();
@ -77,6 +80,7 @@
const schemaId = ref(rParams.arg1);
const taskId = ref(rQuery.taskId);
const processId = ref(rParams.arg2);
const readonly = ref(!!rQuery.readonly); // 查看流程会触发只读模式
const renderKey = ref('');
const formConfigs = ref();
const opinionDlg = ref();
@ -140,6 +144,21 @@
});
}
function flowSuccess() {
opinionDlg.value.toggleDialog({
isClose: true
});
message.success('操作成功');
setTimeout(() => {
bus.emit(FLOW_PROCESSED);
close();
}, 500);
}
function flowFail() {
opinionDlg.value.stopLoading();
}
function reset() {
approvalData.isAddOrSubSign = false;
approvalData.stampInfo = {
@ -155,8 +174,8 @@
}
function getTaskRecords() {
if (data.taskRecords.length) {
return data.taskRecords[0]?.records || [];
if (data?.taskApproveOpinions?.length) {
return data.taskApproveOpinions || [];
}
}
@ -165,23 +184,24 @@
try {
let res = await getApprovalProcess(unref(taskId), unref(processId));
initProcessData(res);
if (res.buttonConfigs) {
approvalData.buttonConfigs = res.buttonConfigs;
}
if (res.relationTasks) {
data.predecessorTasks = res.relationTasks;
}
if (res.isAddOrSubSign) {
approvalData.isAddOrSubSign = res.isAddOrSubSign;
}
approvalData.approvedType = ApproveType.AGREE;
approvedType.value = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
if (!readonly.value) {
if (res.buttonConfigs) {
approvalData.buttonConfigs = res.buttonConfigs;
}
if (res.relationTasks) {
data.predecessorTasks = res.relationTasks;
}
if (res.isAddOrSubSign) {
approvalData.isAddOrSubSign = res.isAddOrSubSign;
}
approvalData.approvedType = ApproveType.AGREE;
approvedType.value = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
}
renderKey.value = Math.random() + '';
} catch (error) {}
} else {
@ -253,38 +273,12 @@
try {
if (/*validateSuccess.value*/ true) {
let params = await getApproveParams();
let res = await postApproval(params);
// 下一节点审批人
let taskList = [];
if (res && res.length > 0) {
taskList = res
.filter((ele) => {
return ele.isMultiInstance == false && ele.isAppoint == true;
})
.map((ele) => {
return {
taskId: ele.taskId,
taskName: ele.taskName,
provisionalApprover: ele.provisionalApprover,
selectIds: []
};
});
if (taskList.length > 0) {
approveUserData.list = taskList;
approveUserData.schemaId = props.schemaId;
approveUserData.visible = true;
data.submitLoading = false;
} else {
opinionDlg.value.toggleDialog({ isClose: true });
data.submitLoading = false;
save(true, t('审批流程'));
}
} else {
opinionDlg.value.toggleDialog({ isClose: true });
data.submitLoading = false;
save(true, t('审批流程'));
}
await postApproval(params);
flowSuccess();
data.submitLoading = false;
}
} catch (error) {}
} catch (error) {
flowFail();
}
}
</script>

4
src/views/secondDev/processTasksPage.vue
View File

@ -21,7 +21,7 @@
});
const MyProcess = defineAsyncComponent({
loader: () => import('../workflow/task/components/processTasks/MyProcess.vue')
loader: () => import('../workflow/task/components/processTasks/MyProcessV2.vue')
});
const TaskDone = defineAsyncComponent({
loader: () => import('../workflow/task/components/processTasks/TaskDone.vue')
@ -98,6 +98,8 @@
const lHash = location.hash;
if (lHash.indexOf('/draft') > 0) {
id = 'Drafts';
} else if (lHash.indexOf('/myProcess') > 0) {
id = 'MyProcess';
}
let data = reactive({
componentName: shallowRef(ToDoTasks)

183
src/views/workflow/task/components/processTasks/MyProcessV2.vue Normal file
View File

@ -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>

114
src/views/workflow/task/components/processTasks/ToDoTasksV2.vue
View File

@ -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>