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

88
src/components/SecondDev/FlowHistory.vue
View File

@ -1,17 +1,26 @@
<template>
<div class="geg-flow-history">
<div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
<template v-if="mode === 'simple'"></template>
<div v-for="(item, index) in comments" :class="{ sep: index !== 0 }" class="item">
<template v-if="mode === 'simple'">
<div class="row">
<div class="col-node">{{ item.taskName }}</div>
<div class="col-1">{{ item.approveUserName }}</div>
<div class="col-2">{{ parseTime(item.approveTime) }}</div>
<div class="col-3"
><span :class="getTagCls(item)">[{{ item.approveResult }}]</span>{{ item.approveComment }}</div
>
</div>
</template>
<template v-if="mode === 'complex'">
<div class="row">
<div class="col-1">审批人</div>
<div class="col-1">{{ item.approveUserName }}</div>
<div class="col-2">用时：1小时10分</div>
<div class="col-3 agree">{{ item.nodeName }}</div>
<div class="col-3 agree">{{ item.taskName }}</div>
</div>
<div class="row">
<div class="col-1 position">职务</div>
<div class="col-2">2023-03-27 12:00:00</div>
<div class="col-3">{{ item.comment }}</div>
<div class="col-1 position"></div>
<div class="col-2">{{ parseTime(item.approveTime) }}</div>
<div class="col-3">{{ item.approveComment }}</div>
</div>
</template>
</div>
@ -29,11 +38,11 @@
}
.col-1 {
width: 180px;
width: 140px;
}
.col-2 {
width: 180px;
width: 130px;
color: #5a6875;
}
@ -45,7 +54,23 @@
}
}
.position{
.tag {
padding-right: 4px;
&.agree {
color: #52c41a;
}
&.reject {
color: #eaa63c;
}
}
.col-node {
width: 120px;
}
.position {
color: #90a0af;
}
@ -60,12 +85,13 @@
</style>
<script setup>
import { defineProps, ref } from 'vue';
import { defineProps, onMounted, ref, watch } from 'vue';
import dayjs from 'dayjs';
const props = defineProps({
mode: {
type: String,
default: 'complex'
default: 'simple'
},
items: Array,
autoHide: {
@ -77,4 +103,42 @@
default: 'desc'
}
});
const comments = ref([]);
function parseTime(t) {
return dayjs(t).format('YYYY-MM-DD HH:mm');
}
onMounted(() => {
if (props.items?.length) {
sortList();
}
});
watch(
() => props.items,
() => {
sortList();
}
);
function sortList() {
const newList = props.items.map((item) => {
item.ts = dayjs(item.approveTime).valueOf();
return item;
});
newList.sort((item1, item2) => {
return props.sort === 'desc' ? item2.ts - item1.ts : item1.ts - item2.ts;
});
comments.value = newList;
}
function getTagCls(item) {
return {
agree: item.approveType === 0,
reject: item.approveType === 2,
tag: true
};
}
</script>

31
src/components/SecondDev/OpinionDialog.vue
View File

@ -1,11 +1,15 @@
<template>
<a-modal :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg" @cancel="onClickCancel" @ok="onClickOK">
<a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg">
<template #footer>
<a-button :disabled="loading" @click="onClickCancel">取消</a-button>
<a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
</template>
<div class="dialog-wrap">
<a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
<a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
<span>{{ formState.nextNodeName }}</span>
</a-form-item>
<a-form-item v-if="_action === 'agree'" label="审批人">
<a-form-item v-if="_action === 'agree' && !isEnd" label="审批人">
<a-select v-model:value="formState.assignees" :options="nextAssignees" max-tag-count="responsive" mode="multiple" placeholder="请选择审批人"></a-select>
</a-form-item>
<a-form-item v-if="_action === 'reject'" label="退回至" name="rejectNode">
@ -24,6 +28,7 @@
<script setup>
import { reactive, ref } from 'vue';
import { getRejectNodeList } from '/@/api/workflow/task';
import { message } from 'ant-design-vue';
const dialogTitle = ref('审批');
const isOpen = ref(false);
@ -31,6 +36,8 @@
const rejectNodeId = ref('');
const nextAssigneeName = ref(''); // 不可选审批人
const nextAssignees = ref([]);
const loading = ref(false);
const isEnd = ref(false);
let _action = ref('agree');
let _processId = '';
@ -48,6 +55,7 @@
function toggleDialog({ isClose, action, callback, processId, taskId, nextNodes } = {}) {
if (isClose) {
isOpen.value = false;
loading.value = false;
return;
}
isOpen.value = true;
@ -62,6 +70,7 @@
// 下一个节点唯一时（可能有并行节点）
const nNode = nextNodes[0];
formState.nextNodeName = nNode.activityName;
isEnd.value = nNode.isEnd;
if (nNode.chooseAssign) {
const selected = [];
nextAssignees.value = nNode.userList.map((item) => {
@ -90,26 +99,36 @@
}
function onClickOK() {
if (!isEnd.value && _action.value === 'agree' && !formState.assignees.length) {
return message.error('请选择审批人');
}
const nextTaskUser = {};
if (_nextNodes.length === 1) {
nextTaskUser[_nextNodes[0].activityId] = formState.assignees.join(',');
if (_nextNodes && _nextNodes.length === 1) {
nextTaskUser[_nextNodes[0].activityId] = isEnd.value ? '' : formState.assignees.join(',');
}
if (_callback && typeof _callback === 'function') {
loading.value = true;
_callback({
opinion: formState.opinion,
rejectNodeId: rejectNodeId.value,
nextTaskUser
});
} else {
isOpen.value = false;
}
isOpen.value = false;
}
function onClickCancel() {
isOpen.value = false;
}
function stopLoading() {
loading.value = false;
}
defineExpose({
toggleDialog
toggleDialog,
stopLoading
});
</script>

9
src/hooks/event/useEventBus.js Normal file
View File

@ -0,0 +1,9 @@
import mitt from '../../utils/mitt';
const bus = new mitt();
export default function () {
return {
bus,
FLOW_PROCESSED: 'flow_processed'
};
}

8
src/router/routes/basic.ts
View File

@ -174,6 +174,14 @@ export const FLOW_ROUTE: AppRouteRecordRaw[] = [{
meta: {
title: '待办列表'
}
},
{
path: 'myProcess',
name: 'FlowListPage3',
component: () => import('/@/views/secondDev/processTasksPage.vue'),
meta: {
title: '我发起的'
}
}
]
}];

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>