Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微调

Browse Source
This commit is contained in:
hongawen
2024-05-13 10:13:54 +08:00
parent 7f42136639
commit 007657a5bf
1 changed files with 305 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

609
src/views/system/bpm/processInstance/detail/index.vue
View File

@@ -1,157 +1,157 @@
<template> <template>
<div class='default-main'> <div class='default-main'>
<!--返回按钮--> <!--返回按钮-->
<back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' /> <back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
<el-tabs type='border-card' v-model='tab'> <el-tabs type='border-card' v-model='tab'>
<el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'> <el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
<el-card <el-card
v-for='(item, index) in runningTasks' v-for='(item, index) in runningTasks'
:key='index' :key='index'
v-loading='processInstanceLoading' v-loading='processInstanceLoading'
class='box-card' class='box-card'
> >
<template #header> <template #header>
<span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span> <span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
</template> </template>
<el-col :offset='6' :span='16'> <el-col :offset='6' :span='16'>
<el-form <el-form
:ref="'form' + index" :ref="'form' + index"
:model='auditForms[index]' :model='auditForms[index]'
:rules='auditRule' :rules='auditRule'
label-width='100px' label-width='100px'
> >
<el-form-item v-if='processInstance && processInstance.name' label='流程名'> <el-form-item v-if='processInstance && processInstance.name' label='流程名'>
{{ processInstance.name }} {{ processInstance.name }}
</el-form-item> </el-form-item>
<el-form-item v-if='processInstance && processInstance.startUser' label='发起人'> <el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
{{ processInstance?.startUser.name }} {{ processInstance?.startUser.name }}
</el-form-item> </el-form-item>
<el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'> <el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
{{ processInstance?.startUser.deptName }} {{ processInstance?.startUser.deptName }}
</el-form-item> </el-form-item>
<el-card v-if='runningTasks[index].formId > 0' class='mb-15px !-mt-10px'> <el-card v-if='runningTasks[index].formId > 0' class='mb-15px !-mt-10px'>
<template #header> <template #header>
<span class='el-icon-picture-outline'> <span class='el-icon-picture-outline'>
填写表单【{{ runningTasks[index]?.formName }}】 填写表单【{{ runningTasks[index]?.formName }}】
</span> </span>
</template> </template>
<form-create <form-create
v-model='approveForms[index].value' v-model='approveForms[index].value'
v-model:api='approveFormFApis[index]' v-model:api='approveFormFApis[index]'
:option='approveForms[index].option' :option='approveForms[index].option'
:rule='approveForms[index].rule' :rule='approveForms[index].rule'
/>
</el-card>
<el-form-item label='审批建议' prop='reason'>
<el-input
v-model='auditForms[index].reason'
placeholder='请输入审批建议'
type='textarea'
/>
</el-form-item>
<!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
<!-- <el-select v-model='auditForms[index].copyUserIds' 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>
<div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
<el-button
type='success'
:icon='Select'
@click='handleAudit(item, true)'
>通过
</el-button>
<el-button
type='danger'
:icon='Close'
@click='handleAudit(item, false)'
>不通过
</el-button>
<!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
<!-- <Icon icon='ep:edit' />-->
<!-- 转办-->
<!-- </el-button>-->
<!-- <el-button type='primary' @click='handleDelegate(item)'>-->
<!-- <Icon icon='ep:position' />-->
<!-- 委派-->
<!-- </el-button>-->
<!-- <el-button type='primary' @click='handleSign(item)'>-->
<!-- <Icon icon='ep:plus' />-->
<!-- 加签-->
<!-- </el-button>-->
<el-button
type='warning'
:icon='Back'
@click='handleBack(item)'
>回退
</el-button>
</div>
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label='申请信息' name='申请信息'>
<!-- 申请信息 -->
<el-card v-loading='processInstanceLoading' class='box-card'>
<template #header>
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
</template>
<!-- 情况一：流程表单 -->
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
<form-create
v-model='detailForm.value'
v-model:api='fApi'
:option='detailForm.option'
:rule='detailForm.rule'
/>
</el-col>
<!-- 情况二：业务表单 -->
<div v-if='processInstance?.processDefinition?.formType === 20'>
<BusinessFormComponent :id='processInstance.businessKey' />
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label='审批记录' name='流程审核'>
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading='tasksLoad'
:process-instance='processInstance'
:tasks='tasks'
@refresh='getTaskList'
/> />
</el-card> </el-tab-pane>
<!-- <el-tab-pane label='流程图'>-->
<el-form-item label='审批建议' prop='reason'> <!-- &lt;!&ndash; 高亮流程图 &ndash;&gt;-->
<el-input <!-- &lt;!&ndash; <ProcessInstanceBpmnViewer&ndash;&gt;-->
v-model='auditForms[index].reason' <!-- &lt;!&ndash; :id="`${id}`"&ndash;&gt;-->
placeholder='请输入审批建议' <!-- &lt;!&ndash; :bpmn-xml="bpmnXml"&ndash;&gt;-->
type='textarea' <!-- &lt;!&ndash; :loading="processInstanceLoading"&ndash;&gt;-->
/> <!-- &lt;!&ndash; :process-instance="processInstance"&ndash;&gt;-->
</el-form-item> <!-- &lt;!&ndash; :tasks="tasks"&ndash;&gt;-->
<!-- <el-form-item label='抄送人' prop='copyUserIds'>--> <!-- &lt;!&ndash; />&ndash;&gt;</el-tab-pane>-->
<!-- <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>--> </el-tabs>
<!-- <el-option--> <ContentWrap>
<!-- v-for='item in userOptions'--> <!-- 弹窗：转派审批人 -->
<!-- :key='item.id'--> <TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
<!-- :label='item.nickname'--> <!-- 弹窗：回退节点 -->
<!-- :value='item.id'--> <TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
<!-- />--> <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
<!-- </el-select>--> <TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
<!-- </el-form-item>--> <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
</el-form> <TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
<div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'> </ContentWrap>
</div>
<el-button
type='success'
:icon='Select'
@click='handleAudit(item, true)'
>通过
</el-button>
<el-button
type='danger'
:icon='Close'
@click='handleAudit(item, false)'
>不通过
</el-button>
<!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
<!-- <Icon icon='ep:edit' />-->
<!-- 转办-->
<!-- </el-button>-->
<!-- <el-button type='primary' @click='handleDelegate(item)'>-->
<!-- <Icon icon='ep:position' />-->
<!-- 委派-->
<!-- </el-button>-->
<!-- <el-button type='primary' @click='handleSign(item)'>-->
<!-- <Icon icon='ep:plus' />-->
<!-- 加签-->
<!-- </el-button>-->
<el-button
type='warning'
:icon='Back'
@click='handleBack(item)'
>回退
</el-button>
</div>
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label='申请信息' name='申请信息'>
<!-- 申请信息 -->
<el-card v-loading='processInstanceLoading' class='box-card'>
<template #header>
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
</template>
<!-- 情况一：流程表单 -->
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
<form-create
v-model='detailForm.value'
v-model:api='fApi'
:option='detailForm.option'
:rule='detailForm.rule'
/>
</el-col>
<!-- 情况二：业务表单 -->
<div v-if='processInstance?.processDefinition?.formType === 20'>
<BusinessFormComponent :id='processInstance.businessKey' />
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label='审批记录'>
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading='tasksLoad'
:process-instance='processInstance'
:tasks='tasks'
@refresh='getTaskList'
/>
</el-tab-pane>
<el-tab-pane label='流程图'>
<!-- 高亮流程图 -->
<!-- <ProcessInstanceBpmnViewer-->
<!-- :id="`${id}`"-->
<!-- :bpmn-xml="bpmnXml"-->
<!-- :loading="processInstanceLoading"-->
<!-- :process-instance="processInstance"-->
<!-- :tasks="tasks"-->
<!-- />--></el-tab-pane>
</el-tabs>
<ContentWrap>
<!-- 弹窗：转派审批人 -->
<TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
<!-- 弹窗：回退节点 -->
<TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
<!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
<TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
<!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
<TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
</ContentWrap>
</div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue' import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
@@ -195,7 +195,7 @@ const tasks = ref<any[]>([]) // 任务列表
const runningTasks = ref<any[]>([]) // 运行中的任务 const runningTasks = ref<any[]>([]) // 运行中的任务
const auditForms = ref<any[]>([]) // 审批任务的表单 const auditForms = ref<any[]>([]) // 审批任务的表单
const auditRule = reactive({ const auditRule = reactive({
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }] reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
}) })
const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息 const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
@@ -203,209 +203,210 @@ const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
// ========== 申请信息 ========== // ========== 申请信息 ==========
const fApi = ref<ApiAttrs>() // const fApi = ref<ApiAttrs>() //
const detailForm = ref({ const detailForm = ref({
rule: [], rule: [],
option: {}, option: {},
value: {} value: {}
}) // 流程实例的表单详情 }) // 流程实例的表单详情
/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */ /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
watch( watch(
() => approveFormFApis.value, () => approveFormFApis.value,
(value) => { (value) => {
value?.forEach((api) => { value?.forEach((api) => {
api.btn.show(false) api.btn.show(false)
api.resetBtn.show(false) api.resetBtn.show(false)
}) })
}, },
{ {
deep: true deep: true
} }
) )
/** 处理审批通过和不通过的操作 */ /** 处理审批通过和不通过的操作 */
const handleAudit = async (task, pass) => { const handleAudit = async (task, pass) => {
// 1.1 获得对应表单 // 1.1 获得对应表单
const index = runningTasks.value.indexOf(task) const index = runningTasks.value.indexOf(task)
const auditFormRef = proxy.$refs['form' + index][0] const auditFormRef = proxy.$refs['form' + index][0]
// 1.2 校验表单 // 1.2 校验表单
const elForm = unref(auditFormRef) const elForm = unref(auditFormRef)
if (!elForm) return if (!elForm) return
const valid = await elForm.validate() const valid = await elForm.validate()
if (!valid) return if (!valid) return
// 2.1 提交审批 // 2.1 提交审批
const data = { const data = {
id: task.id, id: task.id,
reason: auditForms.value[index].reason, reason: auditForms.value[index].reason,
copyUserIds: auditForms.value[index].copyUserIds copyUserIds: auditForms.value[index].copyUserIds
}
if (pass) {
// 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
const formCreateApi = approveFormFApis.value[index]
if (formCreateApi) {
await formCreateApi.validate()
data.variables = approveForms.value[index].value
} }
await approveTask(data) if (pass) {
ElMessage.success('审批通过成功') // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
} else { const formCreateApi = approveFormFApis.value[index]
await rejectTask(data) if (formCreateApi) {
ElMessage.success('审批不通过成功') await formCreateApi.validate()
} data.variables = approveForms.value[index].value
// 2.2 加载最新数据 }
getDetail() await approveTask(data)
tab.value = '审批记录'
ElMessage.success('审批通过成功')
} else {
await rejectTask(data)
ElMessage.success('审批不通过成功')
}
// 2.2 加载最新数据
getDetail()
} }
/** 转派审批人 */ /** 转派审批人 */
const taskTransferFormRef = ref() const taskTransferFormRef = ref()
const openTaskUpdateAssigneeForm = (id: string) => { const openTaskUpdateAssigneeForm = (id: string) => {
taskTransferFormRef.value.open(id) taskTransferFormRef.value.open(id)
} }
/** 处理审批退回的操作 */ /** 处理审批退回的操作 */
const taskDelegateForm = ref() const taskDelegateForm = ref()
const handleDelegate = async (task) => { const handleDelegate = async (task) => {
taskDelegateForm.value.open(task.id) taskDelegateForm.value.open(task.id)
} }
/** 处理审批退回的操作 */ /** 处理审批退回的操作 */
const taskReturnFormRef = ref() const taskReturnFormRef = ref()
const handleBack = async (task: any) => { const handleBack = async (task: any) => {
taskReturnFormRef.value.open(task.id) taskReturnFormRef.value.open(task.id)
} }
/** 处理审批加签的操作 */ /** 处理审批加签的操作 */
const taskSignCreateFormRef = ref() const taskSignCreateFormRef = ref()
const handleSign = async (task: any) => { const handleSign = async (task: any) => {
taskSignCreateFormRef.value.open(task.id) taskSignCreateFormRef.value.open(task.id)
} }
/** 获得详情 */ /** 获得详情 */
const getDetail = () => { const getDetail = () => {
// 1. 获得流程实例相关 // 1. 获得流程实例相关
getProcessInstance() getProcessInstance()
// 2. 获得流程任务列表（审批记录） // 2. 获得流程任务列表（审批记录）
getTaskList() getTaskList()
} }
/** 加载流程实例 */ /** 加载流程实例 */
const BusinessFormComponent = ref(null) // 异步组件 const BusinessFormComponent = ref(null) // 异步组件
const getProcessInstance = async () => { const getProcessInstance = async () => {
try { try {
processInstanceLoading.value = true processInstanceLoading.value = true
let data let data
await getProcessInstanceById(id).then(res => { await getProcessInstanceById(id).then(res => {
data = res.data data = res.data
}) })
if (!data) { if (!data) {
ElMessage.error('查询不到流程信息！') ElMessage.error('查询不到流程信息！')
return return
} }
processInstance.value = data processInstance.value = data
// 设置表单信息 // 设置表单信息
const processDefinition = data.processDefinition const processDefinition = data.processDefinition
if (processDefinition.formType === 10) { if (processDefinition.formType === 10) {
setConfAndFields2( setConfAndFields2(
detailForm, detailForm,
processDefinition.formConf, processDefinition.formConf,
processDefinition.formFields, processDefinition.formFields,
data.formVariables data.formVariables
) )
nextTick().then(() => { nextTick().then(() => {
fApi.value?.btn.show(false) fApi.value?.btn.show(false)
fApi.value?.resetBtn.show(false) fApi.value?.resetBtn.show(false)
fApi.value?.disabled(true) fApi.value?.disabled(true)
}) })
} else { } else {
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
// BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath) // BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
BusinessFormComponent.value = registerComponent('/pqs/supervise/interfere/components/undocumented/detail') BusinessFormComponent.value = registerComponent('/pqs/supervise/interfere/components/undocumented/detail')
} }
// 加载流程图 // 加载流程图
bpmnXml.value = ( bpmnXml.value = (
await getProcessDefinitionById(processDefinition.id) await getProcessDefinitionById(processDefinition.id)
)?.bpmnXml )?.bpmnXml
} finally { } finally {
processInstanceLoading.value = false processInstanceLoading.value = false
} }
} }
/** 加载任务列表 */ /** 加载任务列表 */
const getTaskList = async () => { const getTaskList = async () => {
runningTasks.value = [] runningTasks.value = []
auditForms.value = [] auditForms.value = []
approveForms.value = [] approveForms.value = []
approveFormFApis.value = [] approveFormFApis.value = []
try { try {
// 获得未取消的任务 // 获得未取消的任务
tasksLoad.value = true tasksLoad.value = true
let data let data
await getTaskListByProcessInstanceId(id).then(res => { await getTaskListByProcessInstanceId(id).then(res => {
data = res.data data = res.data
}) })
tasks.value = [] tasks.value = []
// 1.1 移除已取消的审批 // 1.1 移除已取消的审批
data.forEach((task) => { data.forEach((task) => {
if (task.status !== 4) { if (task.status !== 4) {
tasks.value.push(task) tasks.value.push(task)
} }
}) })
// 1.2 排序，将未完成的排在前面，已完成的排在后面； // 1.2 排序，将未完成的排在前面，已完成的排在后面；
tasks.value.sort((a, b) => { tasks.value.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序 // 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) { if (a.endTime && b.endTime) {
return b.endTime - a.endTime return b.endTime - a.endTime
} else if (a.endTime) { } else if (a.endTime) {
return 1 return 1
} else if (b.endTime) { } else if (b.endTime) {
return -1 return -1
// 都是未完成，按照创建时间倒序 // 都是未完成，按照创建时间倒序
} else { } else {
return b.createTime - a.createTime return b.createTime - a.createTime
} }
}) })
// 获得需要自己审批的任务 // 获得需要自己审批的任务
loadRunningTask(tasks.value) loadRunningTask(tasks.value)
} finally { } finally {
tasksLoad.value = false tasksLoad.value = false
} }
} }
/** /**
* 设置 runningTasks 中的任务 * 设置 runningTasks 中的任务
*/ */
const loadRunningTask = (tasks) => { const loadRunningTask = (tasks) => {
tasks.forEach((task) => { tasks.forEach((task) => {
if (!isEmpty(task.children)) { if (!isEmpty(task.children)) {
loadRunningTask(task.children) loadRunningTask(task.children)
} }
// 2.1 只有待处理才需要 // 2.1 只有待处理才需要
if (task.status !== 1 && task.status !== 6) { if (task.status !== 1 && task.status !== 6) {
return return
} }
// 2.2 自己不是处理人 // 2.2 自己不是处理人
if (!task.assigneeUser || task.assigneeUser.id !== userId) { if (!task.assigneeUser || task.assigneeUser.id !== userId) {
return return
} }
// 2.3 添加到处理任务 // 2.3 添加到处理任务
runningTasks.value.push({ ...task }) runningTasks.value.push({ ...task })
auditForms.value.push({ auditForms.value.push({
reason: '', reason: '',
copyUserIds: [] copyUserIds: []
}) })
// 2.4 处理 approve 表单 // 2.4 处理 approve 表单
if (task.formId && task.formConf) { if (task.formId && task.formConf) {
const approveForm = {} const approveForm = {}
setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable) setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
approveForms.value.push(approveForm) approveForms.value.push(approveForm)
} else { } else {
approveForms.value.push({}) // 占位，避免为空 approveForms.value.push({}) // 占位，避免为空
} }
}) })
} }
const tab = ref('') const tab = ref('')
@@ -413,17 +414,17 @@ const tab = ref('')
/** 初始化 */ /** 初始化 */
const userOptions = ref([]) // 用户列表 const userOptions = ref([]) // 用户列表
onMounted(async () => { onMounted(async () => {
getDetail() getDetail()
// 获得用户列表 // 获得用户列表
await getUserSimpleList().then(res => { await getUserSimpleList().then(res => {
userOptions.value = res.data userOptions.value = res.data
}) })
if (todo) { if (todo) {
tab.value = '流程审核' tab.value = '流程审核'
} else { } else {
tab.value = '申请信息' tab.value = '申请信息'
} }
}) })
</script> </script>