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

谐波普测-普测计划新增&终端退运-历史记录

Browse Source
This commit is contained in:
zhujiyan
2024-06-03 09:17:00 +08:00
parent c7025c615f
commit d9f02ef5ff
15 changed files with 1009 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,55 +1,55 @@
<!-- 流程详情页面 tab切换 -->
<template>
<div class='default-main' style='overflow: hidden;'>
<div class="default-main" style="overflow: hidden">
<!--返回按钮-->
<back-component style='margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px' />
<el-tabs type='border-card' v-model='tab' @tab-click='handleClickTab'>
<el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length > 0'>
<back-component style="margin: 8px; position: absolute; z-index: 10; top: -3px; right: 2px" />
<el-tabs type="border-card" v-model="tab" @tab-click="handleClickTab">
<el-tab-pane label="流程审核" name="流程审核" v-if="runningTasks.length > 0">
<el-card
v-for='(item, index) in runningTasks'
:key='index'
v-loading='processInstanceLoading'
class='box-card'
v-for="(item, index) in runningTasks"
:key="index"
v-loading="processInstanceLoading"
class="box-card"
>
<template #header>
<span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
<span class="el-icon-picture-outline">当前任务【{{ item.name }}】</span>
</template>
<el-col :offset='6' :span='16'>
<el-col :offset="6" :span="16">
<el-form
:ref="'form' + index"
:model='auditForms[index]'
:rules='auditRule'
label-width='100px'
:model="auditForms[index]"
:rules="auditRule"
label-width="100px"
>
<el-form-item v-if='processInstance && processInstance.name' label='流程名'>
<el-form-item v-if="processInstance && processInstance.name" label="流程名">
{{ processInstance.name }}
</el-form-item>
<el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
<el-form-item v-if="processInstance && processInstance.startUser" label="发起人">
{{ processInstance?.startUser.name }}
</el-form-item>
<el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
<el-form-item v-if="processInstance && processInstance.startUser" label="发起部门">
{{ processInstance?.startUser.deptName }}
</el-form-item>
<el-card v-if='runningTasks[index].formId != null' class='mb-15px !-mt-10px'>
<el-card v-if="runningTasks[index].formId != null" class="mb-15px !-mt-10px">
<template #header>
<span class='el-icon-picture-outline'>
<span class="el-icon-picture-outline">
{{ runningTasks[index]?.formName }}
</span>
</template>
<form-create
v-model='approveForms[index].value'
v-model:api='approveFormFApis[index]'
:option='approveForms[index].option'
:rule='approveForms[index].rule'
v-model="approveForms[index].value"
v-model:api="approveFormFApis[index]"
:option="approveForms[index].option"
:rule="approveForms[index].rule"
/>
</el-card>
<el-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
<el-form-item label="审批建议" prop="reason" style="margin-top: 15px">
<el-input
v-model='auditForms[index].reason'
placeholder='请输入审批建议'
type='textarea'
v-model="auditForms[index].reason"
placeholder="请输入审批建议"
type="textarea"
/>
</el-form-item>
<!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
@@ -63,11 +63,9 @@
<!-- </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>
<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' />-->
<!-- 转办-->
@@ -85,60 +83,60 @@
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label='申请信息' name='申请信息'>
<el-tab-pane label="申请信息" name="申请信息">
<!-- 申请信息 -->
<el-card v-loading='processInstanceLoading' class='box-card'>
<el-card v-loading="processInstanceLoading" class="box-card">
<template #header>
<span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
</template>
<!-- 情况一：流程表单 -->
<el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
<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'
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' :applyTitle='processInstance.name' />
<div v-if="processInstance?.processDefinition?.formType === 20">
<BusinessFormComponent :id="processInstance.businessKey" :applyTitle="processInstance.name" />
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label='审批记录' name='审批记录'>
<el-tab-pane label="审批记录" name="审批记录">
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading='tasksLoad'
:process-instance='processInstance'
:tasks='tasks'
@refresh='getTaskList'
:loading="tasksLoad"
:process-instance="processInstance"
:tasks="tasks"
@refresh="getTaskList"
/>
</el-tab-pane>
<el-tab-pane label='流程图' name='流程图'>
<el-tab-pane label="流程图" name="流程图">
<ProcessInstanceBpmnViewer
ref='mapRef'
:id='`${id}`'
:bpmn-xml='bpmnXml'
:loading='processInstanceLoading'
:process-instance='processInstance'
:tasks='tasks'
ref="mapRef"
:id="`${id}`"
:bpmn-xml="bpmnXml"
:loading="processInstanceLoading"
:process-instance="processInstance"
:tasks="tasks"
/>
</el-tab-pane>
</el-tabs>
<ContentWrap>
<!-- 弹窗：转派审批人 -->
<TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
<TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
<!-- 弹窗：回退节点 -->
<TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
<TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
<!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
<TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
<!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
<TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
<TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
</ContentWrap>
</div>
</template>
<script lang='ts' setup>
<script lang="ts" setup>
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick, markRaw } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
@@ -165,11 +163,12 @@ defineOptions({ name: 'BpmProcessInstanceDetail' })
const { query } = useRoute() // 查询参数
const { proxy } = getCurrentInstance() as any
const states = history.state
const userId = JSON.parse(window.localStorage.getItem('adminInfo')).id // 当前登录的编号
const id = (states.id as unknown as string) || query.id // 流程实例的编号
const historyInstanceId = states.historyInstanceId as unknown as string // 历史流程实例的编号
const id = query.id as unknown as string // 流程实例的编号
const todo = query.todo // 是否存在待办事项
const todo = states.todo // 是否存在待办事项
const processInstanceLoading = ref(false) // 流程实例的加载中
const processInstance = ref({}) // 流程实例
const bpmnXml = ref('') // BPMN XML
@@ -270,6 +269,7 @@ const handleSign = async (task: any) => {
const getDetail = () => {
// 1. 获得流程实例相关
getProcessInstance()
//获取历史流程
// 2. 获得流程任务列表（审批记录）
getTaskList()
}
@@ -283,6 +283,9 @@ const handleClickTab = (tab: any, event: any) => {
/** 加载流程实例 */
const BusinessFormComponent = ref(null) // 异步组件
const historyInstanceIdList: any = ref([])
//查询流程数据
const getProcessInstance = async () => {
try {
processInstanceLoading.value = true
@@ -315,49 +318,71 @@ const getProcessInstance = async () => {
await getProcessDefinitionById(processDefinition.id).then(res => {
bpmnXml.value = res.data?.bpmnXml
})
console.log(bpmnXml.value, '流程图数据')
// console.log(bpmnXml.value, '流程图数据')
} finally {
processInstanceLoading.value = false
}
}
const sortYMDHMS = val => {
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
}
/** 加载任务列表 */
let stepList = ref([])
const getTaskList = async () => {
historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : []
runningTasks.value = []
auditForms.value = []
approveForms.value = []
approveFormFApis.value = []
tasks.value = []
stepList.value = []
try {
// 获得未取消的任务
tasksLoad.value = true
let data
await getTaskListByProcessInstanceId(id).then(res => {
data = res.data
})
tasks.value = []
// 1.1 移除已取消的审批
data.forEach(task => {
if (task.status !== 4) {
tasks.value.push(task)
}
})
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
tasks.value.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return b.endTime - a.endTime
} else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
} else {
return b.createTime - a.createTime
}
})
//根据历史实例id查询历史任务日志数据
// 获得需要自己审批的任务
loadRunningTask(tasks.value)
// 把最新的id加进去
historyInstanceIdList.value.push(id)
// if (historyInstanceIdList.value && historyInstanceIdList.value.length != 0) {
//轮询
await historyInstanceIdList.value?.map((item: any, index: any) => {
getTaskListByProcessInstanceId(item).then(res => {
res.data.map(vv => {
stepList.value.push(vv)
})
})
tasks.value=[]
})
// }
// await getTaskListByProcessInstanceId(id).then(res => {
// data = res.data
// })
//历史数据添加进tasks数据中
// 1.1 移除已取消的审批
// data.map(task => {
// if (task.status !== 4) {
// tasks.value.push(task)
// }
// })
// // 1.2 排序，将未完成的排在前面，已完成的排在后面；
// let list = Array.from(tasks.value)?.sort((a, b) => {
// // 有已完成的情况，按照完成时间倒序
// if (a.endTime && b.endTime) {
// return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
// } else if (a.endTime) {
// return 1
// } else if (b.endTime) {
// return -1
// // 都是未完成，按照创建时间倒序
// } else {
// return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
// }
// })
// console.log(list, '打印处理好的数据', list.length)
// // 获得需要自己审批的任务
// await loadRunningTask(list)
} finally {
tasksLoad.value = false
}
@@ -367,7 +392,8 @@ const getTaskList = async () => {
* 设置 runningTasks 中的任务
*/
const loadRunningTask = tasks => {
tasks.forEach(task => {
// tasks.length = 1
tasks?.forEach(task => {
if (!isEmpty(task.children)) {
loadRunningTask(task.children)
}
@@ -385,7 +411,6 @@ const loadRunningTask = tasks => {
reason: '',
copyUserIds: []
})
console.log(runningTasks.value)
// 2.4 处理 approve 表单
if (task.formId && task.formConf) {
const approveForm = {}
@@ -401,6 +426,42 @@ const tab = ref('')
/** 初始化 */
const userOptions = ref([]) // 用户列表
//监听历史流程实例数据
watch(
() => stepList.value,
(val, oldVal) => {
if (val&&val.length!=0 ) {
tasks.value=[]
val.map(task => {
if (task.status !== 4) {
tasks.value.push(task)
}
})
// 1.2 排序，将未完成的排在前面，已完成的排在后面；
let list = Array.from(tasks.value)?.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) {
return sortYMDHMS(b.endTime) - sortYMDHMS(a.endTime)
} else if (a.endTime) {
return 1
} else if (b.endTime) {
return -1
// 都是未完成，按照创建时间倒序
} else {
return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
}
})
let newList=[]
// 获得需要自己审批的任务
loadRunningTask(newList)
}
},
{
immediate:true,
deep:true,
}
)
onMounted(async () => {
getDetail()
// 获得用户列表
@@ -414,7 +475,7 @@ onMounted(async () => {
}
})
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
::v-deep .el-tab-pane {
height: calc(100vh - 200px) !important;
overflow: auto !important;