【功能修改】 新审批界面气泡卡按钮功能

pull/582/head
jason 2024-10-10 23:09:05 +08:00
parent a4a4dcdfc2
commit 4342c3ee05
5 changed files with 451 additions and 127 deletions

View File

@ -106,6 +106,11 @@ export const signDeleteTask = async (data: any) => {
return await request.delete({ url: '/bpm/task/delete-sign', data })
}
// 抄送
export const copyTask = async (data: any) => {
return await request.put({ url: '/bpm/task/copy', data })
}
// 获取减签任务列表
export const getChildrenTaskList = async (id: string) => {
return await request.get({ url: '/bpm/task/list-by-parent-task-id?parentTaskId=' + id })

View File

@ -362,7 +362,11 @@ export enum OperationButtonType {
/**
* 退
*/
RETURN = 6
RETURN = 6,
/**
*
*/
COPY = 7
}
/**
@ -504,6 +508,7 @@ OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')
// 默认的按钮权限设置
export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [

View File

@ -5,14 +5,14 @@
>
<!-- 通过按钮 -->
<el-popover
:visible="passVisible"
:visible="popOverVisible.approve"
placement="top-end"
:width="500"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.APPROVE)"
>
<template #reference>
<el-button plain type="success" @click="openPopover('1')">
<el-button plain type="success" @click="openPopover('approve')">
<Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
</el-button>
</template>
@ -22,16 +22,10 @@
label-position="top"
class="mb-auto"
ref="formRef"
:model="auditForm"
:rules="auditRule"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
{{ processInstance?.startUser.nickname }}
<el-tag size="small" type="info" class="ml-8px">
{{ processInstance?.startUser.deptName }}
</el-tag>
</el-form-item>
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
<template #header>
<span class="el-icon-picture-outline"> 填写表单{{ runningTask?.formName }} </span>
@ -43,25 +37,14 @@
:rule="approveForm.rule"
/>
</el-card>
<el-form-item label="审批建议" prop="reason">
<el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
<el-form-item label="审批意见" prop="reason">
<el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
</el-form-item>
<el-form-item label="抄送人" prop="copyUserIds">
<el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
<el-option
v-for="itemx in userOptions"
:key="itemx.id"
:label="itemx.nickname"
:value="itemx.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
{{ getButtonDisplayName(OperationButtonType.APPROVE) }}
</el-button>
<el-button @click="passVisible = false"> 取消 </el-button>
<el-button @click="popOverVisible.approve = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
@ -69,14 +52,14 @@
<!-- 拒绝按钮 -->
<el-popover
:visible="rejectVisible"
:visible="popOverVisible.reject"
placement="top-end"
:width="500"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.REJECT)"
>
<template #reference>
<el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
<el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
<Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
</el-button>
</template>
@ -86,16 +69,10 @@
label-position="top"
class="mb-auto"
ref="formRef"
:model="auditForm"
:rules="auditRule"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
{{ processInstance?.startUser.nickname }}
<el-tag size="small" type="info" class="ml-8px">
{{ processInstance?.startUser.deptName }}
</el-tag>
</el-form-item>
<el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
<template #header>
<span class="el-icon-picture-outline"> 填写表单{{ runningTask?.formName }} </span>
@ -107,80 +84,273 @@
:rule="approveForm.rule"
/>
</el-card>
<el-form-item label="审批建议" prop="reason">
<el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
<el-form-item label="审批意见" prop="reason">
<el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
</el-form-item>
<el-form-item label="抄送人" prop="copyUserIds">
<el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
<el-option
v-for="itemx in userOptions"
:key="itemx.id"
:label="itemx.nickname"
:value="itemx.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
{{ getButtonDisplayName(OperationButtonType.REJECT) }}
</el-button>
<el-button @click="rejectVisible = false"> 取消 </el-button>
<el-button @click="popOverVisible.reject = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<!-- 抄送按钮 -->
<div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
<el-popover
:visible="popOverVisible.copy"
placement="top-start"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.COPY)"
>
<template #reference>
<div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px" >
<Icon :size="14" icon="svg-icon:send" />&nbsp;
{{ getButtonDisplayName(OperationButtonType.COPY) }}
</div>
</template>
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<el-form-item label="抄送人" prop="copyUserIds">
<el-select v-model="genericForm.copyUserIds" clearable style="width: 100%" multiple placeholder="请选择抄送人">
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="抄送意见" prop="copyReason">
<el-input v-model="genericForm.copyReason" clearable placeholder="请输入抄送意见" type="textarea" :rows="3" />
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="primary" @click="handleCopy">
{{ getButtonDisplayName(OperationButtonType.COPY) }}
</el-button>
<el-button @click="popOverVisible.copy = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<!-- 转交按钮 -->
<div @click="openTaskUpdateAssigneeForm" v-if="isShowButton(OperationButtonType.TRANSFER)">
<el-popover
:visible="popOverVisible.transfer"
placement="top-start"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.TRANSFER)"
>
<template #reference>
<div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px" >
<Icon :size="14" icon="fa:share-square-o" />&nbsp;
{{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
</div>
</template>
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<!-- 委托按钮 -->
<div @click="handleDelegate" v-if="isShowButton(OperationButtonType.DELEGATE)">
<el-form-item label="新审批人" prop="assigneeUserId">
<el-select v-model="genericForm.assigneeUserId" clearable style="width: 100%">
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="审批意见" prop="reason">
<el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea" :rows="3" />
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
{{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
</el-button>
<el-button @click="popOverVisible.transfer = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<!-- 委派按钮 -->
<el-popover
:visible="popOverVisible.delegate"
placement="top-start"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.DELEGATE)"
>
<template #reference>
<div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px" >
<Icon :size="14" icon="ep:position" />&nbsp;
{{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
</div>
</template>
<!-- 加签 -->
<div @click="handleSign" v-if="isShowButton(OperationButtonType.ADD_SIGN)">
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<el-form-item label="接收人" prop="delegateUserId">
<el-select v-model="genericForm.delegateUserId" clearable style="width: 100%">
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="审批意见" prop="reason">
<el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea" :rows="3" />
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
{{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
</el-button>
<el-button @click="popOverVisible.delegate = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<!-- 加签按钮 当前任务审批人为A向前加签选了一个C则需要C先审批然后再是A审批向后加签BA审批完需要B再审批完才算完成这个任务节点 -->
<el-popover
:visible="popOverVisible.addSign"
placement="top-start"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.ADD_SIGN)"
>
<template #reference>
<div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px" >
<Icon :size="14" icon="ep:plus" />&nbsp;
{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
</div>
<!-- TODO @jason减签 -->
</template>
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<el-form-item label="加签处理人" prop="addSignUserIds">
<el-select v-model="genericForm.addSignUserIds" multiple clearable style="width: 100%">
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="审批意见" prop="reason">
<el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea" :rows="3" />
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="primary" @click="handlerAddSign('before')">
向前{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
</el-button>
<el-button :disabled="formLoading" type="primary" @click="handlerAddSign('after')">
向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
</el-button>
<el-button @click="popOverVisible.addSign = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<!-- TODO @jason减签 -->
<!-- 退回按钮 -->
<div @click="handleBack" v-if="isShowButton(OperationButtonType.RETURN)">
<el-popover
:visible="popOverVisible.return"
placement="top-start"
:width="420"
trigger="click"
v-if="isShowButton(OperationButtonType.RETURN)"
>
<template #reference>
<div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px" >
<Icon :size="14" icon="fa:mail-reply" />&nbsp;
{{ getButtonDisplayName(OperationButtonType.RETURN) }}
</div>
</template>
<div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
<el-form
label-position="top"
class="mb-auto"
ref="formRef"
:model="genericForm"
:rules="genericRule"
label-width="100px"
>
<el-form-item label="退回节点" prop="targetTaskDefinitionKey">
<el-select v-model="genericForm.targetTaskDefinitionKey" clearable style="width: 100%">
<el-option
v-for="item in returnList"
:key="item.taskDefinitionKey"
:label="item.name"
:value="item.taskDefinitionKey"
/>
</el-select>
</el-form-item>
<el-form-item label="退回理由" prop="returnReason">
<el-input v-model="genericForm.returnReason" clearable placeholder="请输入退回理由" type="textarea" :rows="3" />
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="primary" @click="handleReturn()">
{{ getButtonDisplayName(OperationButtonType.RETURN) }}
</el-button>
<el-button @click="popOverVisible.return = false"> 取消 </el-button>
</el-form-item>
</el-form>
</div>
</el-popover>
<!--TODO @jason撤回 -->
<!--TODO @jason再次发起 -->
</div>
<!-- 弹窗转派审批人 -->
<TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
<!-- 弹窗回退节点 -->
<TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
<!-- 弹窗委派将任务委派给别人处理处理完成后会重新回到原审批人手中-->
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
<!-- 弹窗加签当前任务审批人为A向前加签选了一个C则需要C先审批然后再是A审批向后加签BA审批完需要B再审批完才算完成这个任务节点 -->
<TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
</template>
<script lang="ts" setup>
import { setConfAndFields2 } from '@/utils/formCreate'
import { useUserStore } from '@/store/modules/user'
import * as TaskApi from '@/api/bpm/task'
import { propTypes } from '@/utils/propTypes'
import TaskReturnForm from './dialog/TaskReturnForm.vue'
import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
import TaskTransferForm from './dialog/TaskTransferForm.vue'
import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
import { isEmpty } from '@/utils/is'
import {
OperationButtonType,
@ -197,16 +367,32 @@ defineProps({
userOptions: propTypes.any
})
const formLoading = ref(false) //
const passVisible = ref(false) //
const rejectVisible = ref(false) //
/** 气泡卡是否展示 */
const popOverVisible = ref({
approve: false,
reject: false,
transfer: false,
delegate: false,
addSign: false,
return : false,
copy: false
})
/** 退回节点 */
const returnList = ref([] as any)
// ========== ==========
const runningTask = ref<any>({}) //
const auditForm = ref<any>({}) //
const genericForm = ref<any>({}) //
const approveForm = ref<any>({}) //
const approveFormFApi = ref<any>({}) // approveForms fAPi
const formRef = ref()
const auditRule = reactive({
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
/** 表单校验规则 */
const genericRule = reactive({
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
assigneeUserId:[{ required: true, message: '新审批人不能为空', trigger: 'change' }],
delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
})
/** 监听 approveFormFApis实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */
@ -227,7 +413,7 @@ watch(
*/
const loadRunningTask = (tasks: any[]) => {
runningTask.value = {}
auditForm.value = {}
genericForm.value = {}
approveForm.value = {}
approveFormFApi.value = {}
tasks.forEach((task: any) => {
@ -244,7 +430,7 @@ const loadRunningTask = (tasks: any[]) => {
}
// 2.3
runningTask.value = { ...task }
auditForm.value = {
genericForm.value = {
reason: '',
copyUserIds: []
}
@ -261,12 +447,12 @@ const loadRunningTask = (tasks: any[]) => {
}
/** 处理审批通过和不通过的操作 */
const handleAudit = async (pass: any) => {
const handleAudit = async (pass: boolean) => {
formLoading.value = true
try {
const auditFormRef = proxy.$refs['formRef']
const genericFormRef = proxy.$refs['formRef']
// 1.2
const elForm = unref(auditFormRef)
const elForm = unref(genericFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
@ -274,8 +460,7 @@ const handleAudit = async (pass: any) => {
// 2.1
const data = {
id: runningTask.value.id,
reason: auditForm.value.reason,
copyUserIds: auditForm.value.copyUserIds
reason: genericForm.value.reason
}
if (pass) {
// approveForm + data
@ -286,9 +471,11 @@ const handleAudit = async (pass: any) => {
data.variables = approveForm.value.value
}
await TaskApi.approveTask(data)
popOverVisible.value.approve = false
message.success('审批通过成功')
} else {
await TaskApi.rejectTask(data)
popOverVisible.value.reject = false
message.success('审批不通过成功')
}
// 2.2
@ -298,40 +485,160 @@ const handleAudit = async (pass: any) => {
}
}
/* 抄送 TODO */
const handleSend = () => {}
// TODO flag approve: boolean flag 1 2
const openPopover = (flag) => {
passVisible.value = false
rejectVisible.value = false
formRef.value.resetFields()
flag === '1' ? (passVisible.value = true) : (rejectVisible.value = true)
/* 处理抄送 */
const handleCopy = async () => {
formLoading.value = true
try {
const copyFormRef = proxy.$refs['formRef']
// 1.
const elForm = unref(copyFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 2.
const data = {
id: runningTask.value.id,
reason: genericForm.value.copyReason,
copyUserIds: genericForm.value.copyUserIds
}
await TaskApi.copyTask(data)
popOverVisible.value.copy = false
message.success('操作成功')
} finally {
formLoading.value = false
}
}
/** 转派审批人 */
const taskTransferFormRef = ref()
const openTaskUpdateAssigneeForm = () => {
taskTransferFormRef.value.open(runningTask.value.id)
/** 处理转交 */
const handleTransfer = async () => {
formLoading.value = true
try {
const transferFormRef = proxy.$refs['formRef']
// 1.1
const elForm = unref(transferFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 1.2
const data = {
id: runningTask.value.id,
reason: genericForm.value.reason,
assigneeUserId: genericForm.value.assigneeUserId
}
await TaskApi.transferTask(data)
popOverVisible.value.transfer = false
message.success('操作成功')
// 2.
getDetail()
} finally {
formLoading.value = false
}
}
/** 处理审批退回的操作 */
const taskDelegateForm = ref()
/** 处理委派 */
const handleDelegate = async () => {
taskDelegateForm.value.open(runningTask.value.id)
formLoading.value = true
try {
const deletegateFormRef = proxy.$refs['formRef']
// 1.1
const elForm = unref(deletegateFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 1.2
const data = {
id: runningTask.value.id,
reason: genericForm.value.reason,
delegateUserId: genericForm.value.delegateUserId
}
await TaskApi.delegateTask(data)
popOverVisible.value.delegate = false
message.success('操作成功')
// 2.
getDetail()
} finally {
formLoading.value = false
}
}
/** 处理加签 */
const handlerAddSign = async (type: string) => {
formLoading.value = true
try {
const transferFormRef = proxy.$refs['formRef']
// 1.1
const elForm = unref(transferFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 1.2
const data = {
id: runningTask.value.id,
type,
reason: genericForm.value.reason,
userIds: genericForm.value.addSignUserIds
}
await TaskApi.signCreateTask(data)
message.success('操作成功')
popOverVisible.value.addSign = false
// 2
getDetail()
} finally {
formLoading.value = false
}
}
/** 处理审批退回的操作 */
const taskReturnFormRef = ref()
const handleBack = async () => {
taskReturnFormRef.value.open(runningTask.value.id)
/** 处理退回 */
const handleReturn = async () => {
formLoading.value = true
try {
const returnFormRef = proxy.$refs['formRef']
// 1.1
const elForm = unref(returnFormRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 1.2 退
const data = {
id: runningTask.value.id,
reason: genericForm.value.returnReason,
targetTaskDefinitionKey: genericForm.value.targetTaskDefinitionKey
}
await TaskApi.returnTask(data)
popOverVisible.value.return = false
message.success('操作成功')
// 2
getDetail()
} finally {
formLoading.value = false
}
}
/** 处理审批加签的操作 */
const taskSignCreateFormRef = ref()
const handleSign = async () => {
taskSignCreateFormRef.value.open(runningTask.value.id)
/** 弹出退回气泡卡 */
const openReturnPopover = async () => {
returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id)
if (returnList.value.length === 0) {
message.warning('当前没有可退回的节点')
return
}
openPopover('return')
}
/** 弹出气泡卡 */
const openPopover = (type: string ) => {
Object.keys(popOverVisible.value).forEach( item => {
if( item === type) {
popOverVisible.value[item] = true
} else {
popOverVisible.value[item] = false
}
})
formRef.value.resetFields()
}
/** 获得详情 */
const getDetail = () => {
emit('success')

View File

@ -202,12 +202,18 @@ const getProcessInstance = async () => {
activityId: props.activityId
})
}
if (detailForm.value.rule.length > 0) { // form-create
detailForm.value.value = data.formVariables
} else {
setConfAndFields2(
detailForm,
processDefinition.formConf,
processDefinition.formFields,
data.formVariables
)
}
nextTick().then(() => {
fApi.value?.btn.show(false)
fApi.value?.resetBtn.show(false)

View File

@ -55,6 +55,7 @@
/>
<el-table-column align="center" label="抄送任务" prop="taskName" min-width="180" />
<el-table-column align="center" label="抄送人" prop="creatorName" min-width="100" />
<el-table-column align="center" label="抄送意见" prop="reason" width="150" />
<el-table-column
align="center"
label="抄送时间"