add:管理员修正数据功能-指派流程、修改审批人、加减签、审批记录、流程变更记录、未完成流程表单变更功能
This commit is contained in:
zhaojuncheng
387
src/components/SecondDev/OpinionDialogSelected.vue
Normal file
387
src/components/SecondDev/OpinionDialogSelected.vue
Normal file
@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg"
|
||||
@cancel="onClickCancel">
|
||||
<template #footer>
|
||||
<a-button :disabled="loading || isStart" @click="onClickCancel">{{ isStart ? '请注意流程已发起' : '取消' }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
|
||||
</template>
|
||||
<div class="dialog-wrap">
|
||||
<a-form :label-col="{ span: 6 }" :model="formState" autocomplete="off">
|
||||
<a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
|
||||
<span>{{ getNextNodesName() }}</span>
|
||||
</a-form-item>
|
||||
<!--选择任意节点 start-->
|
||||
<a-form-item v-if="_action === 'select'" label="审批节点" name="selectNextNodeName">
|
||||
<a-select v-model:value="selected.taskId" :options="allTaskNodes" placeholder="请选择审批节点"
|
||||
:filterOption="search" :field-names="{ label: 'taskName', value: 'taskId' }"
|
||||
:disabled="editable"></a-select>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="_action === 'select'" label="审批人">
|
||||
<SelectUser :selectedIds="selected.userId" :multiple="selected.multiple" @change="getUserList"
|
||||
placeholder="请选择审核人">
|
||||
<a-input v-model:value="selected.userName" placeholder="请选择审批人" :disabled="editable" />
|
||||
</SelectUser>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="_action === 'select' && selected.choseTime" label="审批时间">
|
||||
<a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间"
|
||||
v-model:value="selected.time" @change="onChange" @ok="onOk" />
|
||||
</a-form-item>
|
||||
<!--选择任意节点 end-->
|
||||
<template v-for="node in flowNextNodes">
|
||||
<a-form-item v-if="_action === 'agree' && !isEnd"
|
||||
:label="flowNextNodes.length > 1 ? node.activityName + '审批人' : '审批人'">
|
||||
<a-select v-show="node.chooseAssign" v-model:value="node.assignees"
|
||||
:options="node.nextAssignees" :placeholder="'请选择' + node.activityName + '的审批人'"
|
||||
max-tag-count="responsive" mode="multiple" :filterOption="search"></a-select>
|
||||
<span v-show="!node.chooseAssign">{{ getAssigneeText(node) }}</span>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item v-if="_action === 'reject'" label="退回至" name="rejectNode">
|
||||
<a-select v-model:value="rejectNodeId">
|
||||
<a-select-option v-for="(item, index) in rejectNodeList" :key="index"
|
||||
:value="item.activityId">{{
|
||||
item.activityName }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<!--选择任意节点：填写备注-->
|
||||
<a-form-item v-if="_action === 'select'" :label="selected.choseTime ? '审批意见' : '备注'"
|
||||
name="selectOpinion">
|
||||
<a-dropdown placement="bottom" v-if="selected.choseTime">
|
||||
<a-button type="link" class="opinion-but">常用审批意见</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="item in normalOpinionList" @click="clickMenu(item.text)">
|
||||
<a href="javascript:;">{{ item.text }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-textarea v-model:value="selected.opinion" :maxlength="200" :rows="3" style="margin-top: 35px;"
|
||||
placeholder="请输入内容，不超过200字" :rules="[{ required: true, message: '必须填写!' }]" />
|
||||
</a-form-item>
|
||||
<!--选择任意节点：填写备注-->
|
||||
<a-form-item v-if="_action != 'select'" label="审批意见" name="opinion"
|
||||
:rules="[{ required: true, message: '审批意见必须填写!' }]">
|
||||
<a-dropdown placement="bottom">
|
||||
<a-button type="link" class="opinion-but">常用审批意见</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="item in normalOpinionList" @click="clickMenu(item.text)">
|
||||
<a href="javascript:;">{{ item.text }}</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-textarea v-model:value="formState.opinion" :maxlength="200" :rows="3" style="margin-top: 35px;"
|
||||
placeholder="请输入审批意见，不超过200字" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { getRejectNodeList } from '/@/api/workflow/task';
|
||||
import { getUserMulti } from '/@/api/system/user';
|
||||
import { SelectUser } from '/@/components/SelectOrganizational/index';
|
||||
import { message, Dropdown } from 'ant-design-vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
|
||||
const aDropdown = Dropdown;
|
||||
|
||||
const dialogTitle = ref('审批');
|
||||
const isOpen = ref(false);
|
||||
const rejectNodeList = ref([]);
|
||||
const rejectNodeId = ref('');
|
||||
const loading = ref(false);
|
||||
const isEnd = ref(false);
|
||||
const isStart = ref(false);
|
||||
|
||||
let _action = ref('agree');
|
||||
let _processId = '';
|
||||
let _taskId = '';
|
||||
let flowNextNodes = ref([]);
|
||||
let allTaskNodes = ref([]);
|
||||
let selectedNode = ref('');
|
||||
let _callback = null;
|
||||
let _onCancel = null;
|
||||
const normalOpinionList = [
|
||||
{
|
||||
text: '请批准。'
|
||||
},
|
||||
{
|
||||
text: '同意。'
|
||||
},
|
||||
{
|
||||
text: '批准。'
|
||||
},
|
||||
{
|
||||
text: '不同意。'
|
||||
},
|
||||
{
|
||||
text: '请修改。'
|
||||
}
|
||||
]
|
||||
const formState = reactive({
|
||||
opinion: '',
|
||||
opinionList: ['同意。', '请领导审批。']
|
||||
});
|
||||
function clickMenu(val) {
|
||||
formState.opinion = val
|
||||
selected.opinion = val
|
||||
}
|
||||
|
||||
const selected = reactive({
|
||||
taskId: '',
|
||||
userId: [],
|
||||
userName: '',
|
||||
opinion: '',
|
||||
selectedList: [],
|
||||
time: '',
|
||||
choseTime: false,
|
||||
multiple: true
|
||||
})
|
||||
|
||||
const editable = ref(false);
|
||||
|
||||
const taskName = computed(() => {
|
||||
let name = allTaskNodes.value.map((ele) => {
|
||||
if (ele.taskId === selected.taskId) {
|
||||
return ele.taskName
|
||||
}
|
||||
})
|
||||
return name;
|
||||
})
|
||||
|
||||
function getAssigneeText(node) {
|
||||
// 注意这里用的是下拉框的数据结构 所以字段是value和label
|
||||
return (node.nextAssignees || [])
|
||||
.filter((item) => node.assignees.includes(item.value))
|
||||
.map((item) => item.label)
|
||||
.join('、');
|
||||
}
|
||||
|
||||
function getNextNodesName() {
|
||||
return flowNextNodes.value.length > 1 ? '多个并行节点' : flowNextNodes.value[0].activityName;
|
||||
}
|
||||
|
||||
function toggleDialog({ isClose, isCreateFlow, action, callback, rejectCancel, processId, taskId, nextNodes, schemaId, choseTime, title, multiple, taskNode, edit, record } = {}) {
|
||||
if (isClose) {
|
||||
isOpen.value = false;
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
isOpen.value = true;
|
||||
_action.value = action;
|
||||
_callback = callback;
|
||||
_onCancel = rejectCancel;
|
||||
_processId = processId;
|
||||
_taskId = taskId;
|
||||
flowNextNodes.value = nextNodes;
|
||||
isStart.value = isCreateFlow;
|
||||
formState.opinion = '';
|
||||
dialogTitle.value = title ? title : '审批';
|
||||
selected.choseTime = choseTime;
|
||||
selected.multiple = multiple == false ? multiple : true;
|
||||
editable.value = edit ? edit : false
|
||||
|
||||
if (action === 'select') {
|
||||
allTaskNodes.value = taskNode
|
||||
console.log(11111111111, taskNode);
|
||||
console.log(22222222222, allTaskNodes);
|
||||
}
|
||||
|
||||
if (taskId)
|
||||
selected.taskId = taskId
|
||||
|
||||
if (record != null) {
|
||||
console.log(record);
|
||||
selected.selectedList = record.approveUserId
|
||||
selected.opinion = record.approveComment
|
||||
selected.time = dayjs(record.approveTime, 'YYYY-MM-DD HH:mm:ss')
|
||||
selected.userName = record.approveUserName
|
||||
}
|
||||
if (nextNodes && nextNodes.length) {
|
||||
// 下一个节点唯一时（可能有并行节点）
|
||||
const nNode = nextNodes[0];
|
||||
//formState.nextNodeName = nNode.activityName;
|
||||
isEnd.value = nNode.isEnd;
|
||||
nextNodes.forEach((nNode) => {
|
||||
if (!nNode.userList?.length) {
|
||||
return;
|
||||
}
|
||||
const selected = [];
|
||||
nNode.nextAssignees = nNode.userList.map((item) => {
|
||||
if (item.checked || nNode.userList.length === 1) {
|
||||
// 只有一个人的时候必须选他
|
||||
selected.push(item['F_UserId']);
|
||||
}
|
||||
return {
|
||||
value: item['F_UserId'],
|
||||
label: item['F_RealName'],
|
||||
item: item
|
||||
};
|
||||
});
|
||||
nNode.assignees = selected;
|
||||
if (!nNode.chooseAssign) {
|
||||
// 不需要选审批人的时候 所有备选人都要放到下个节点
|
||||
nNode.assignees = nNode.userList.map((item) => item['F_UserId']);
|
||||
}
|
||||
nNode.chooseAssign = nNode.chooseAssign;
|
||||
});
|
||||
flowNextNodes.value = nextNodes;
|
||||
}
|
||||
if (action === 'reject') {
|
||||
loadRejectNodeList();
|
||||
}
|
||||
}
|
||||
|
||||
function search(inputValue, option) {
|
||||
return inputValue ? (option.item.F_Account.indexOf(inputValue) > -1 || option.item.F_RealName.indexOf(inputValue) > -1) : true;
|
||||
}
|
||||
|
||||
async function loadRejectNodeList() {
|
||||
rejectNodeId.value = '';
|
||||
let res = await getRejectNodeList(_processId, _taskId);
|
||||
if (res && Array.isArray(res) && res.length > 0) {
|
||||
rejectNodeList.value = res;
|
||||
dialogTitle.value = `退回`;
|
||||
if (res?.length) {
|
||||
res.forEach((nNode) => {
|
||||
if (!nNode.userList?.length) {
|
||||
return;
|
||||
}
|
||||
const selected = [];
|
||||
nNode.nextAssignees = nNode.userList.map((item) => {
|
||||
if (item.checked || nNode.userList.length === 1) {
|
||||
// 只有一个人的时候必须选他
|
||||
selected.push(item['F_UserId']);
|
||||
}
|
||||
return {
|
||||
value: item['F_UserId'],
|
||||
label: item['F_RealName'] + (item.remarks ? "(" + item.remarks + ")" : ""),
|
||||
item: item
|
||||
};
|
||||
});
|
||||
nNode.assignees = selected;
|
||||
if (!nNode.chooseAssign) {
|
||||
// 不需要选审批人的时候 所有备选人都要放到下个节点
|
||||
nNode.assignees = nNode.userList.map((item) => item['F_UserId']);
|
||||
}
|
||||
nNode.chooseAssign = nNode.chooseAssign;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onClickOK() {
|
||||
if (_action.value === 'select') {
|
||||
// if (!selected.choseTime) {
|
||||
// if (selected.opinion === null || selected.opinion.trim() === '') {
|
||||
// return message.error('请填写备注');
|
||||
// }
|
||||
// }
|
||||
if (selected.opinion === null || selected.opinion.trim() === '') {
|
||||
return message.error('请填写备注');
|
||||
}
|
||||
if (_callback && typeof _callback === 'function') {
|
||||
_callback({
|
||||
info: selected,
|
||||
taskName: taskName,
|
||||
});
|
||||
isOpen.value = false;
|
||||
clearSelectVal();
|
||||
} else {
|
||||
isOpen.value = false;
|
||||
}
|
||||
} else {
|
||||
const nextTaskUser = {};
|
||||
if (_action.value === 'agree' && !isEnd.value) {
|
||||
const isEmpty = flowNextNodes.value.find((node) => !node.assignees?.length);
|
||||
if (isEmpty) {
|
||||
return message.error('请选择审批人');
|
||||
}
|
||||
flowNextNodes.value.forEach((nNode) => {
|
||||
nextTaskUser[nNode.activityId] = isEnd.value ? '' : nNode.assignees.join(',');
|
||||
});
|
||||
}
|
||||
if (_action.value === 'reject') {
|
||||
const isChoose = rejectNodeList.value.find((node) => node.activityId == rejectNodeId.value && node.assignees?.length);
|
||||
if (!isChoose) {
|
||||
return message.error('请选择审批人');
|
||||
}
|
||||
rejectNodeList.value.forEach((nNode) => {
|
||||
if (nNode.activityId == rejectNodeId.value) {
|
||||
nextTaskUser[nNode.activityId] = isEnd.value ? '' : nNode.assignees.join(',');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (formState.opinion === null || formState.opinion.trim() === '') {
|
||||
return message.error('请填写审批意见');
|
||||
}
|
||||
if (_callback && typeof _callback === 'function') {
|
||||
loading.value = true;
|
||||
_callback({
|
||||
opinion: formState.opinion,
|
||||
rejectNodeId: rejectNodeId.value,
|
||||
nextTaskUser,
|
||||
isEnd
|
||||
});
|
||||
} else {
|
||||
isOpen.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onClickCancel() {
|
||||
clearSelectVal();
|
||||
if (isStart.value) {
|
||||
return;
|
||||
}
|
||||
if (_onCancel && typeof _onCancel === 'function') {
|
||||
_onCancel();
|
||||
}
|
||||
isOpen.value = false;
|
||||
}
|
||||
|
||||
function clearSelectVal() {
|
||||
selected.taskId = '';
|
||||
selected.userId = [];
|
||||
selected.opinion = '';
|
||||
selected.userName = '';
|
||||
selected.time = null;
|
||||
}
|
||||
|
||||
function stopLoading() {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function getUserList(list) {
|
||||
selected.selectedList = await getUserMulti(list.join(','));
|
||||
selected.userName = selected.selectedList
|
||||
.map((ele) => {
|
||||
return ele.name;
|
||||
})
|
||||
.join(',');
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
toggleDialog,
|
||||
stopLoading,
|
||||
clearSelectVal
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dialog-wrap {
|
||||
padding: 10px 15px 0 0;
|
||||
}
|
||||
|
||||
.opinion-but {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
@ -210,6 +210,22 @@
|
||||
}
|
||||
return saveValId;
|
||||
}
|
||||
|
||||
async function setDisabledForm(isDisabled) {
|
||||
return SystemFormRef.value.setDisabledForm(isDisabled);
|
||||
}
|
||||
|
||||
async function handleDelete(id) {
|
||||
let ret;
|
||||
try {
|
||||
ret = await SystemFormRef.value.handleDelete(id);
|
||||
} catch (e) {
|
||||
message.error('表单未配置删除');
|
||||
return null;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
workflowSubmit,
|
||||
getRowKey,
|
||||
@ -217,6 +233,8 @@
|
||||
getUploadComponentIds,
|
||||
setFieldsValue,
|
||||
getIsOldSystem,
|
||||
setDisabledForm,
|
||||
handleDelete
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user