update 调整审批按钮加载

This commit is contained in:
gssong 2024-06-01 22:05:45 +08:00
parent d98c2822d5
commit 9de3f25f6a

View File

@ -8,29 +8,43 @@
<el-checkbox label="3" name="type">短信</el-checkbox> <el-checkbox label="3" name="type">短信</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="附件" v-if="task.businessStatus === 'waiting'"> <el-form-item v-if="task.businessStatus === 'waiting'" label="附件">
<fileUpload v-model="form.fileId" :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'xlsx', 'docx', 'zip']" :fileSize="'20'"/> <fileUpload v-model="form.fileId" :file-type="['doc', 'xls', 'ppt', 'txt', 'pdf', 'xlsx', 'docx', 'zip']" :file-size="'20'" />
</el-form-item> </el-form-item>
<el-form-item label="抄送"> <el-form-item label="抄送">
<el-button type="primary" @click="openUserSelectCopy" icon="Plus" circle /> <el-button type="primary" icon="Plus" circle @click="openUserSelectCopy" />
<el-tag v-for="user in selectCopyUserList" :key="user.userId" closable style="margin: 2px" @close="handleCopyCloseTag(user)"> <el-tag v-for="user in selectCopyUserList" :key="user.userId" closable style="margin: 2px" @close="handleCopyCloseTag(user)">
{{ user.userName }} {{ user.userName }}
</el-tag> </el-tag>
</el-form-item> </el-form-item>
<el-form-item label="审批意见" v-if="task.businessStatus === 'waiting'"> <el-form-item v-if="task.businessStatus === 'waiting'" label="审批意见">
<el-input v-model="form.message" type="textarea" resize="none" /> <el-input v-model="form.message" type="textarea" resize="none" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button v-loading="buttonLoading" type="primary" @click="handleCompleteTask"> 提交 </el-button> <el-button :disabled="buttonDisabled" type="primary" @click="handleCompleteTask"> 提交 </el-button>
<el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="primary" @click="openDelegateTask"> 委托 </el-button> <el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openDelegateTask"> 委托 </el-button>
<el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="primary" @click="openTransferTask"> 转办 </el-button> <el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openTransferTask"> 转办 </el-button>
<el-button v-if="task.businessStatus === 'waiting' && task.multiInstance" v-loading="buttonLoading" type="primary" @click="addMultiInstanceUser"> 加签 </el-button> <el-button
<el-button v-if="task.businessStatus === 'waiting' && task.multiInstance" v-loading="buttonLoading" type="primary" @click="deleteMultiInstanceUser"> 减签 </el-button> v-if="task.businessStatus === 'waiting' && task.multiInstance"
<el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="danger" @click="handleTerminationTask"> 终止 </el-button> :disabled="buttonDisabled"
<el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="danger" @click="handleBackProcessOpen"> 退回 </el-button> type="primary"
<el-button v-loading="buttonLoading" @click="cancel">取消</el-button> @click="addMultiInstanceUser"
>
加签
</el-button>
<el-button
v-if="task.businessStatus === 'waiting' && task.multiInstance"
:disabled="buttonDisabled"
type="primary"
@click="deleteMultiInstanceUser"
>
减签
</el-button>
<el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleTerminationTask"> 终止 </el-button>
<el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleBackProcessOpen"> 退回 </el-button>
<el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
</span> </span>
</template> </template>
<!-- 抄送 --> <!-- 抄送 -->
@ -40,19 +54,14 @@
<!-- 委托 --> <!-- 委托 -->
<UserSelect ref="delegateTaskRef" :multiple="false" @confirm-call-back="handleDelegateTask"></UserSelect> <UserSelect ref="delegateTaskRef" :multiple="false" @confirm-call-back="handleDelegateTask"></UserSelect>
<!-- 加签组件 --> <!-- 加签组件 -->
<multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback='closeDialog' /> <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="closeDialog" />
<!-- 驳回开始 --> <!-- 驳回开始 -->
<el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false"> <el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false">
<el-form v-loading="backLoading" :model="backForm" label-width="120px" v-if="task.businessStatus === 'waiting'"> <el-form v-if="task.businessStatus === 'waiting'" v-loading="backLoading" :model="backForm" label-width="120px">
<el-form-item label="驳回节点"> <el-form-item label="驳回节点">
<el-select clearable placeholder="请选择" v-model="backForm.targetActivityId" style="width: 300px"> <el-select v-model="backForm.targetActivityId" clearable placeholder="请选择" style="width: 300px">
<el-option <el-option v-for="item in taskNodeList" :key="item.nodeId" :label="item.nodeName" :value="item.nodeId" />
v-for="item in taskNodeList"
:key="item.nodeId"
:label="item.nodeName"
:value="item.nodeId"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="消息提醒"> <el-form-item label="消息提醒">
@ -67,8 +76,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer" style="float: right;padding-bottom: 20px;"> <div class="dialog-footer" style="float: right; padding-bottom: 20px">
<el-button type="primary" v-loading="backLoading" @click="handleBackProcess">确认</el-button> <el-button v-loading="backLoading" type="primary" @click="handleBackProcess">确认</el-button>
<el-button v-loading="backLoading" @click="backVisible = false">取消</el-button> <el-button v-loading="backLoading" @click="backVisible = false">取消</el-button>
</div> </div>
</template> </template>
@ -81,7 +90,7 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { ComponentInternalInstance } from 'vue'; import { ComponentInternalInstance } from 'vue';
import { ElForm } from 'element-plus'; import { ElForm } from 'element-plus';
import { completeTask, backProcess, getTaskById,transferTask,terminationTask,getTaskNodeList,delegateTask } from '@/api/workflow/task'; import { completeTask, backProcess, getTaskById, transferTask, terminationTask, getTaskNodeList, delegateTask } from '@/api/workflow/task';
import UserSelect from '@/components/UserSelect'; import UserSelect from '@/components/UserSelect';
import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue'; import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -91,7 +100,7 @@ const userSelectCopyRef = ref<InstanceType<typeof UserSelect>>();
const transferTaskRef = ref<InstanceType<typeof UserSelect>>(); const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
const delegateTaskRef = ref<InstanceType<typeof UserSelect>>(); const delegateTaskRef = ref<InstanceType<typeof UserSelect>>();
// //
const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>(); const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>();
const props = defineProps({ const props = defineProps({
@ -103,7 +112,7 @@ const props = defineProps({
// //
const loading = ref(true); const loading = ref(true);
// //
const buttonLoading = ref(true); const buttonDisabled = ref(true);
//id //id
const taskId = ref<string>(''); const taskId = ref<string>('');
// //
@ -166,23 +175,23 @@ const backForm = ref<Record<string, any>>({
messageType: ['1'] messageType: ['1']
}); });
const closeDialog = () => { const closeDialog = () => {
dialog.visible = false dialog.visible = false;
} };
// //
const openDialog = (id?: string) => { const openDialog = (id?: string) => {
selectCopyUserIds.value = undefined selectCopyUserIds.value = undefined;
selectCopyUserList.value = [] selectCopyUserList.value = [];
form.value.fileId = undefined form.value.fileId = undefined;
taskId.value = id; taskId.value = id;
form.value.message = undefined; form.value.message = undefined;
dialog.visible = true; dialog.visible = true;
loading.value = true; loading.value = true;
buttonLoading.value = true; buttonDisabled.value = true;
nextTick(() => { nextTick(() => {
getTaskById(taskId.value).then((response) => { getTaskById(taskId.value).then((response) => {
task.value = response.data; task.value = response.data;
loading.value = false; loading.value = false;
buttonLoading.value = false; buttonDisabled.value = false;
}); });
}); });
}; };
@ -194,42 +203,42 @@ const emits = defineEmits(['submitCallback', 'cancelCallback']);
const handleCompleteTask = async () => { const handleCompleteTask = async () => {
form.value.taskId = taskId.value; form.value.taskId = taskId.value;
form.value.taskVariables = props.taskVariables; form.value.taskVariables = props.taskVariables;
if(selectCopyUserList && selectCopyUserList.value.length > 0){ if (selectCopyUserList.value && selectCopyUserList.value.length > 0) {
let wfCopyList = [] let wfCopyList = [];
selectCopyUserList.value.forEach( e=> { selectCopyUserList.value.forEach((e) => {
let copyUser = { let copyUser = {
userId: e.userId, userId: e.userId,
userName: e.nickName userName: e.nickName
} };
wfCopyList.push(copyUser) wfCopyList.push(copyUser);
}) });
form.value.wfCopyList = wfCopyList form.value.wfCopyList = wfCopyList;
} }
await proxy?.$modal.confirm('是否确认提交?'); await proxy?.$modal.confirm('是否确认提交?');
loading.value = true; loading.value = true;
buttonLoading.value = true; buttonDisabled.value = true;
try { try {
await completeTask(form.value); await completeTask(form.value);
dialog.visible = false; dialog.visible = false;
emits('submitCallback'); emits('submitCallback');
proxy?.$modal.msgSuccess('操作成功'); proxy?.$modal.msgSuccess('操作成功');
} finally { } finally {
loading.value = false loading.value = false;
buttonLoading.value = false buttonDisabled.value = false;
} }
}; };
/** 驳回弹窗打开 */ /** 驳回弹窗打开 */
const handleBackProcessOpen = async () => { const handleBackProcessOpen = async () => {
backForm.value = {} backForm.value = {};
backForm.value.messageType = ['1'] backForm.value.messageType = ['1'];
backVisible.value = true backVisible.value = true;
backLoading.value = true backLoading.value = true;
let data = await getTaskNodeList(task.value.processInstanceId) let data = await getTaskNodeList(task.value.processInstanceId);
taskNodeList.value = data.data taskNodeList.value = data.data;
backLoading.value = false backLoading.value = false;
backForm.value.targetActivityId = taskNodeList.value[0].nodeId backForm.value.targetActivityId = taskNodeList.value[0].nodeId;
} };
/** 驳回流程 */ /** 驳回流程 */
const handleBackProcess = async () => { const handleBackProcess = async () => {
backForm.value.taskId = taskId.value; backForm.value.taskId = taskId.value;
@ -238,14 +247,14 @@ const handleBackProcess = async () => {
backLoading.value = true; backLoading.value = true;
await backProcess(backForm.value).finally(() => (loading.value = false)); await backProcess(backForm.value).finally(() => (loading.value = false));
dialog.visible = false; dialog.visible = false;
backLoading.value = false backLoading.value = false;
emits('submitCallback'); emits('submitCallback');
proxy?.$modal.msgSuccess('操作成功'); proxy?.$modal.msgSuccess('操作成功');
}; };
// //
const cancel = async () => { const cancel = async () => {
dialog.visible = false; dialog.visible = false;
buttonLoading.value = false; buttonDisabled.value = false;
emits('cancelCallback'); emits('cancelCallback');
}; };
// //
@ -254,11 +263,11 @@ const openUserSelectCopy = () => {
}; };
// //
const userSelectCopyCallBack = (data: UserVO[]) => { const userSelectCopyCallBack = (data: UserVO[]) => {
if(data && data.length > 0){ if (data && data.length > 0) {
selectCopyUserList.value = data selectCopyUserList.value = data;
selectCopyUserIds.value = selectCopyUserList.value.map((item) => item.userId).join(','); selectCopyUserIds.value = selectCopyUserList.value.map((item) => item.userId).join(',');
} }
} };
// //
const handleCopyCloseTag = (user: UserVO) => { const handleCopyCloseTag = (user: UserVO) => {
const userId = user.userId; const userId = user.userId;
@ -287,23 +296,23 @@ const openTransferTask = () => {
}; };
// //
const handleTransferTask = async (data) => { const handleTransferTask = async (data) => {
if(data && data.length > 0){ if (data && data.length > 0) {
let params = { let params = {
taskId: taskId.value, taskId: taskId.value,
userId: data[0].userId, userId: data[0].userId,
comment: form.value.message comment: form.value.message
} };
await proxy?.$modal.confirm('是否确认提交?'); await proxy?.$modal.confirm('是否确认提交?');
loading.value = true; loading.value = true;
buttonLoading.value = true; buttonDisabled.value = true;
await transferTask(params).finally(() => (loading.value = false)); await transferTask(params).finally(() => (loading.value = false));
dialog.visible = false; dialog.visible = false;
emits('submitCallback'); emits('submitCallback');
proxy?.$modal.msgSuccess('操作成功'); proxy?.$modal.msgSuccess('操作成功');
}else{ } else {
proxy?.$modal.msgWarning('请选择用户!'); proxy?.$modal.msgWarning('请选择用户!');
} }
} };
// //
const openDelegateTask = () => { const openDelegateTask = () => {
@ -311,38 +320,37 @@ const openDelegateTask = () => {
}; };
// //
const handleDelegateTask = async (data) => { const handleDelegateTask = async (data) => {
if(data && data.length > 0){ if (data && data.length > 0) {
let params = { let params = {
taskId: taskId.value, taskId: taskId.value,
userId: data[0].userId, userId: data[0].userId,
nickName: data[0].nickName nickName: data[0].nickName
} };
await proxy?.$modal.confirm('是否确认提交?'); await proxy?.$modal.confirm('是否确认提交?');
loading.value = true; loading.value = true;
buttonLoading.value = true; buttonDisabled.value = true;
await delegateTask(params).finally(() => (loading.value = false)); await delegateTask(params).finally(() => (loading.value = false));
dialog.visible = false; dialog.visible = false;
emits('submitCallback'); emits('submitCallback');
proxy?.$modal.msgSuccess('操作成功'); proxy?.$modal.msgSuccess('操作成功');
}else{ } else {
proxy?.$modal.msgWarning('请选择用户!'); proxy?.$modal.msgWarning('请选择用户!');
} }
} };
// //
const handleTerminationTask = async (data) => { const handleTerminationTask = async (data) => {
let params = { let params = {
taskId: taskId.value, taskId: taskId.value,
comment: form.value.message comment: form.value.message
} };
await proxy?.$modal.confirm('是否确认终止?'); await proxy?.$modal.confirm('是否确认终止?');
loading.value = true; loading.value = true;
buttonLoading.value = true; buttonDisabled.value = true;
await terminationTask(params).finally(() => (loading.value = false)); await terminationTask(params).finally(() => (loading.value = false));
dialog.visible = false; dialog.visible = false;
emits('submitCallback'); emits('submitCallback');
proxy?.$modal.msgSuccess('操作成功'); proxy?.$modal.msgSuccess('操作成功');
};
}
/** /**
* 对外暴露子组件方法 * 对外暴露子组件方法