503 lines
16 KiB
Vue
503 lines
16 KiB
Vue
<template>
|
||
<a-card style="margin-top: 10px">
|
||
<template #title> <audit-outlined /><span style="margin-left: 10px">我的审批</span> </template>
|
||
<a-spin :spinning="loading">
|
||
<a-list itemLayout="vertical">
|
||
<a-list-item>
|
||
<div style="width: 100%">
|
||
<div style="margin-bottom: 5px">
|
||
处理意见：
|
||
<a-select
|
||
style="width: 300px"
|
||
placeholder="常用审批语"
|
||
:getPopupContainer="(target) => target.parentNode"
|
||
@change="changeReasonSelection"
|
||
>
|
||
<a-select-option v-for="(item, key) in remarksDictOptions" :key="key" :value="item.value">{{ item.text }}</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<a-textarea :rows="3" v-model:value="model.reason" />
|
||
</div>
|
||
</a-list-item>
|
||
|
||
<a-list-item>
|
||
<j-upload text="添加文件" bizPath="bpm" :returnUrl="false" v-model:value="model.fileList"></j-upload>
|
||
</a-list-item>
|
||
|
||
<!-- 选择分支 -->
|
||
<a-list-item>
|
||
<div style="width: 100%">
|
||
<a-radio-group v-model:value="model.processModel">
|
||
<a-radio :checked="true" :value="1">同意</a-radio>
|
||
<!-- <a-radio :value="2">多分支模式</a-radio>-->
|
||
<a-radio :value="3" v-if="historyCount > 0 && allowReject">驳回</a-radio>
|
||
</a-radio-group>
|
||
|
||
<span v-show="model.processModel == 2">
|
||
<span style="color: red">多分支模式默认执行所有分支：</span>
|
||
<template v-for="(item, index) in branchList">
|
||
<a-checkbox :checked="true" :value="item.nextnode">{{ item.Transition }}</a-checkbox>
|
||
</template>
|
||
</span>
|
||
|
||
<span v-show="model.processModel == 3" v-if="historyCount > 0">
|
||
<a-select v-model:value="model.rejectModelNode" :getPopupContainer="(target) => target?.parentNode" style="width: 150px">
|
||
<template v-for="(item, index) in historyList">
|
||
<a-select-option v-if="item.NAME_ != currentTaskName" :value="item.TASK_DEF_KEY_">{{ item.NAME_ }}</a-select-option>
|
||
</template>
|
||
</a-select>
|
||
</span>
|
||
</div>
|
||
</a-list-item>
|
||
|
||
<!-- 下一步操作人 -->
|
||
<a-list-item class="flex-center" v-if="buttonStatus.selnextUserStatus || buttonStatus.ccStatus || allowAddSign || allowCounterSignAddUser">
|
||
<a-checkbox v-if="buttonStatus.selnextUserStatus" :checked="checkedNext" @change="handleCheckedNext">指定下一步操作人（指定下一步会签人员）</a-checkbox>
|
||
<a-checkbox v-if="buttonStatus.ccStatus" :checked="checkedCc" @change="handleCheckedCc">是否抄送</a-checkbox>
|
||
<a-dropdown v-if="allowAddSign || allowCounterSignAddUser" :trigger="['click']" :overlayStyle="{ width: '120px' }" placement="bottomRight">
|
||
<div class="dot-more" title="更多操作"> <div></div><div></div><div></div> </div>
|
||
<template #overlay>
|
||
<a-menu @click="onMoreAction">
|
||
<a-menu-item key="add-sign" v-if="allowAddSign">
|
||
<div class="flex-center">
|
||
<Icon icon="ant-design:sisternode-outlined" size="22" />
|
||
<span style="margin-left: 10px">动态加签</span>
|
||
</div>
|
||
</a-menu-item>
|
||
<a-menu-item key="add-user" v-if="allowCounterSignAddUser">
|
||
<div class="flex-center">
|
||
<Icon icon="ant-design:usergroup-add-outlined" size="22" />
|
||
<span style="margin-left: 10px">追加审批人</span>
|
||
</div>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</a-list-item>
|
||
|
||
<a-list-item style="line-height: 32px" v-show="checkedNext">
|
||
<span>指定下一步操作人（指定下一步会签人员）：</span>
|
||
<bpm-select-user style="display: inline-block" placeholder="请选择下一步操作人" @change="handleSelectNextUser"></bpm-select-user>
|
||
</a-list-item>
|
||
|
||
<!-- 抄送 -->
|
||
<a-list-item style="line-height: 32px" v-show="checkedCc">
|
||
<span>抄送给：</span>
|
||
<bpm-select-user style="display: inline-block" placeholder="请选择抄送人" @change="handleSelectCcUser"></bpm-select-user>
|
||
</a-list-item>
|
||
</a-list>
|
||
|
||
<!-- 流转按钮 -->
|
||
<div style="margin-top: 20px; text-align: center">
|
||
<template v-if="model.processModel == 1">
|
||
<template v-for="(item, index) in branchList">
|
||
<a-button type="primary" @click="handleProcessComplete(item.nextnode)">{{ item.Transition }}</a-button>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
<a-button type="primary" @click="handleManyProcessComplete()">确认提交</a-button>
|
||
</template>
|
||
</div>
|
||
<br />
|
||
</a-spin>
|
||
</a-card>
|
||
<!-- 加签节点弹窗 -->
|
||
<add-sign-task-modal @register="registerAddSignTaskModal" @selected="selectedAddSignTask" />
|
||
<!-- 审批人选择人员 -->
|
||
<user-select-modal :multi="multiSelectUser" @register="registerUserModal" @selected="onSelectedUserOk" />
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, computed, toRaw, unref, watchEffect } from 'vue';
|
||
import { initDictOptions } from '/@/utils/dict';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { taskComplaint, taskComplete, beforeAddSignTask, afterAddSignTask, addMultiInstance} from "../task.handle.api";
|
||
import { useModal } from '/@/components/Modal';
|
||
import { JSelectUserByDept } from '/@/components/Form';
|
||
import { AuditOutlined } from '@ant-design/icons-vue';
|
||
import { JUpload } from '/@/components/Form/src/jeecg/components/JUpload';
|
||
import BpmSelectUser from '/@/views/super/bpm/process/components/bpmSelectUser/index.vue';
|
||
import AddSignTaskModal from '/@/views/super/bpm/process/personalOffice/myHandleTask/modal/AddSignTaskModal.vue';
|
||
import UserSelectModal from '/@/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue';
|
||
import { useUserStore } from '/@/store/modules/user';
|
||
import { isString } from '/@/utils/is';
|
||
|
||
export default {
|
||
name: 'MyHandleContent',
|
||
components: {
|
||
UserSelectModal,
|
||
AddSignTaskModal,
|
||
JSelectUserByDept,
|
||
JUpload,
|
||
AuditOutlined,
|
||
BpmSelectUser,
|
||
},
|
||
props: {
|
||
historyList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
branchList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
currentTaskName: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
taskId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
ccStatus:{
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
allowAddSign:{
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
allowCounterSignAddUser: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
allowReject: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
turnbackTaskId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
selnextUserStatus:{
|
||
type: Boolean,
|
||
default: true,
|
||
}
|
||
},
|
||
emits: ['success'],
|
||
setup(props, { emit }) {
|
||
console.log('进入MyHandleContent');
|
||
const loading = ref(false);
|
||
const { createMessage: $message, createConfirm: $confirm } = useMessage();
|
||
const userStore = useUserStore();
|
||
// 转办
|
||
const [registerAddSignTaskModal, { openModal: openAddSignTaskModal }] = useModal();
|
||
// 选择用户
|
||
const [registerUserModal, { openModal: openUserModal, closeModal: closeUserModal }] = useModal();
|
||
/**
|
||
* 转审(change-user)和添加审批人(add-user) 都需要选择用户，此处记录不同的类型
|
||
*/
|
||
const selectUserType = ref('');
|
||
const remarksDictOptions = ref([]);
|
||
const historyCount = computed(() => {
|
||
return props.historyList.length;
|
||
});
|
||
|
||
const buttonStatus = computed(()=>{
|
||
return {
|
||
ccStatus: props.ccStatus,
|
||
selnextUserStatus: props.selnextUserStatus
|
||
}
|
||
})
|
||
const model = reactive({
|
||
taskId: '',
|
||
nextnode: '',
|
||
nextCodeCount: '',
|
||
reason: '',
|
||
processModel: 1,
|
||
rejectModelNode: '',
|
||
nextUserName: '',
|
||
nextUserId: '',
|
||
ccUserIds: '',
|
||
ccUserRealNames: '',
|
||
fileList: '',
|
||
});
|
||
//审批人用户是否多选
|
||
const multiSelectUser = computed(() => {
|
||
return unref(selectUserType) == 'change-user' ? false : true;
|
||
});
|
||
//监听返回节点变化
|
||
watchEffect(() => {
|
||
props.turnbackTaskId && (model.rejectModelNode = props.turnbackTaskId);
|
||
});
|
||
// 选择下一步操作人
|
||
const checkedNext = ref(false);
|
||
const nextPersonList = ref([]);
|
||
function handleCheckedNext(e) {
|
||
checkedNext.value = e.target.checked;
|
||
nextPersonList.value = [];
|
||
}
|
||
|
||
// 选择抄送人
|
||
const checkedCc = ref(false);
|
||
const ccPersonList = ref([]);
|
||
function handleCheckedCc(e) {
|
||
checkedCc.value = e.target.checked;
|
||
ccPersonList.value = [];
|
||
}
|
||
|
||
function changeReasonSelection(value) {
|
||
model.reason = value;
|
||
}
|
||
|
||
function handleProcessComplete(nextnode) {
|
||
if (!model.reason || model.reason.length == 0) {
|
||
//update-begin-author:taoyan date:2022-9-5 for: VUEN-2157 2. 意见允许为空
|
||
//$message.warning('请填写处理意见');
|
||
//return;
|
||
//update-end-author:taoyan date:2022-9-5 for: VUEN-2157 2. 意见允许为空
|
||
}
|
||
if (nextnode) {
|
||
model.nextnode = nextnode;
|
||
}
|
||
//设置下个节点的数量
|
||
if (props.branchList) {
|
||
model.nextCodeCount = props.branchList.length;
|
||
}
|
||
|
||
$confirm({
|
||
title: '提示',
|
||
content: '确认提交审批吗?',
|
||
onOk: commitTaskHandleInfo,
|
||
});
|
||
}
|
||
|
||
function handleManyProcessComplete() {
|
||
if (model.processModel == 3) {
|
||
if (!model.rejectModelNode || model.rejectModelNode.length == 0) {
|
||
$message.warning('请选择驳回节点');
|
||
return;
|
||
}
|
||
}
|
||
handleProcessComplete();
|
||
}
|
||
|
||
// 加签——弹出选择界面
|
||
function handleAddSignTask() {
|
||
openAddSignTaskModal(true, {
|
||
taskId: props.taskId
|
||
});
|
||
}
|
||
|
||
// 加签——回调处理
|
||
async function selectedAddSignTask(params,addSignType) {
|
||
console.log('加签', params);
|
||
console.log('加签', addSignType);
|
||
if(addSignType=='after'){
|
||
await afterAddSignTask(params);
|
||
}
|
||
if(addSignType=='before'){
|
||
await beforeAddSignTask(params);
|
||
}
|
||
|
||
//加签完，关闭办理弹窗
|
||
emit('success');
|
||
}
|
||
|
||
//================[20230707会签节点增加审批人]begin=============================
|
||
/**
|
||
* 更多操作
|
||
*/
|
||
function onMoreAction(e) {
|
||
selectUserType.value = 'add-user';
|
||
if ('add-user' == e.key) {
|
||
//多实例加签(支持串行和并行会签）
|
||
onAddHandlePerson();
|
||
} else if ('add-sign' == e.key) {
|
||
//加签
|
||
handleAddSignTask();
|
||
}
|
||
}
|
||
/**
|
||
* 添加审批人 事件
|
||
*/
|
||
function onAddHandlePerson() {
|
||
let id = userStore.getUserInfo.id;
|
||
selectUserType.value = 'add-user';
|
||
openUserModal(true, {
|
||
list: [],
|
||
excludeUserIdList: [id],
|
||
});
|
||
}
|
||
/**
|
||
* 人员选中事件
|
||
* @param data
|
||
*/
|
||
async function onSelectedUserOk(data) {
|
||
console.log('onSelectedUserOk', data);
|
||
if (data && data.length > 0) {
|
||
if (!props.taskId) {
|
||
console.error('节点信息不存在');
|
||
return;
|
||
}
|
||
if (selectUserType.value === 'change-user') {
|
||
//await doChangeHandlePerson(node.taskId, data)
|
||
} else if (selectUserType.value === 'add-user') {
|
||
await doAddHandlePerson(props.taskId, data);
|
||
} else {
|
||
console.error('不识别的类型', selectUserType.value);
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* 添加审批人 请求
|
||
*/
|
||
async function doAddHandlePerson(taskId, userList) {
|
||
let usernameList = userList.map((item) => item.username);
|
||
let params = {
|
||
taskId: taskId,
|
||
assignees: usernameList,
|
||
//简流模式，串行会签专用变量值
|
||
assigneeListKey: 'loopAssigneeCollection',
|
||
};
|
||
const result = await addMultiInstance(params);
|
||
if (result.success) {
|
||
closeUserModal();
|
||
emit('success');
|
||
$message.success('操作成功！');
|
||
} else {
|
||
$message.warning(result.message);
|
||
}
|
||
}
|
||
//================[20230707会签节点增加审批人]end=============================
|
||
/**
|
||
* 流程处理提交
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function commitTaskHandleInfo() {
|
||
loading.value = true;
|
||
const params = toRaw(model);
|
||
params.taskId = props.taskId;
|
||
if (params.fileList) {
|
||
params.fileList = isString(params.fileList) ? params.fileList : JSON.stringify(params.fileList);
|
||
}
|
||
try {
|
||
console.log('流程提交->params', params);
|
||
let json = await taskComplete(params);
|
||
console.log('流程提交-result', json);
|
||
loading.value = false;
|
||
emit('success');
|
||
} catch (e) {
|
||
console.error('流程处理失败', e);
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function initDict() {
|
||
const dictData = await initDictOptions('approval_remarks');
|
||
console.log('dic', dictData);
|
||
remarksDictOptions.value = dictData;
|
||
}
|
||
|
||
function handleSelectNextUser(arr) {
|
||
let { usernames, realnames } = getInfo(arr);
|
||
model.nextUserId = usernames.join(',');
|
||
model.nextUserName = realnames.join(',');
|
||
}
|
||
|
||
function handleSelectCcUser(arr) {
|
||
let { usernames, realnames } = getInfo(arr);
|
||
model.ccUserIds = usernames.join(',');
|
||
model.ccUserRealNames = realnames.join(',');
|
||
}
|
||
|
||
function getInfo(arr) {
|
||
let usernames = [];
|
||
let realnames = [];
|
||
if (arr && arr.length > 0) {
|
||
for (let item of arr) {
|
||
usernames.push(item.username);
|
||
realnames.push(item.realname);
|
||
}
|
||
}
|
||
return {
|
||
usernames,
|
||
realnames,
|
||
};
|
||
}
|
||
initDict();
|
||
return {
|
||
handleSelectNextUser,
|
||
handleSelectCcUser,
|
||
model,
|
||
remarksDictOptions,
|
||
changeReasonSelection,
|
||
historyCount,
|
||
|
||
checkedNext,
|
||
nextPersonList,
|
||
handleCheckedNext,
|
||
|
||
checkedCc,
|
||
ccPersonList,
|
||
handleCheckedCc,
|
||
|
||
loading,
|
||
handleManyProcessComplete,
|
||
handleProcessComplete,
|
||
buttonStatus,
|
||
registerAddSignTaskModal,
|
||
selectedAddSignTask,
|
||
handleAddSignTask,
|
||
|
||
onMoreAction,
|
||
openUserModal,
|
||
closeUserModal,
|
||
registerUserModal,
|
||
onSelectedUserOk,
|
||
multiSelectUser
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
:deep(.ant-card-head-title) {
|
||
padding: 10px 0;
|
||
}
|
||
:deep(.ant-collapse-header) {
|
||
font-size: 16px !important;
|
||
}
|
||
:deep(.ant-card-head) {
|
||
padding-left: 12px;
|
||
}
|
||
html[data-theme='light'] {
|
||
background-color: #fafafa;
|
||
}
|
||
:deep(.ant-card-body) {
|
||
padding-top: 6px;
|
||
}
|
||
//会签节点增加审批人下拉显示更多样式begin
|
||
.flex-center {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
.dot-more {
|
||
display: flex;
|
||
flex-direction: row;
|
||
height: 30px;
|
||
width: 30px;
|
||
padding: 0 4px;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-left: 8px;
|
||
& > div {
|
||
width: 4px;
|
||
height: 4px;
|
||
background-color: #9e9e9e;
|
||
margin: 0 1px;
|
||
border-radius: 3px;
|
||
}
|
||
&:hover {
|
||
background-color: #f7f7f7;
|
||
& > div {
|
||
background-color: #0a9fe5;
|
||
}
|
||
}
|
||
}
|
||
//会签节点增加审批人下拉显示更多样式end
|
||
</style>
|