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>