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-06-04 13:48:56 +08:00
parent a04ea691fa
commit 15ee7efa6e
6 changed files with 822 additions and 663 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
src/views/system/bpm/processInstance/detail/ProcessInstanceTaskList.vue
View File

@@ -1,105 +1,103 @@
<template> <template>
<el-card v-loading="loading" class="box-card"> <el-card v-loading='loading' class='box-card'>
<el-col :offset="3" :span="17"> <el-col :offset='3' :span='17'>
<div class="item_line"> <div class='item_line'>
<el-timeline> <el-timeline>
<div class="end_item_line"> <div class='end_item_line'>
<div class="end_item_lines"></div> <div class='end_item_lines'></div>
<el-timeline-item <el-timeline-item
v-if="processInstance.endTime" v-if='processInstance.endTime'
:type="getProcessInstanceTimelineItemType(processInstance)" :type='getProcessInstanceTimelineItemType(processInstance)'
> >
<p style="font-weight: 700"> <p style='font-weight: 700'>
结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束 结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
<el-tag :type="getTaskTimelineItemType(processInstance.status)"> <el-tag :type='getTaskTimelineItemType(processInstance.status)'>
{{ getTaskNameItemType(processInstance.status) }} {{ getTaskNameItemType(processInstance.status) }}
</el-tag> </el-tag>
</p> </p>
</el-timeline-item> </el-timeline-item>
</div> </div>
<div class="start_item_line" v-for="(item, index) in tasksList" :key="index"> <div class='start_item_line' v-for='(item, index) in tasksList' :key='index'>
<div class="start_item_lines"></div> <div class='start_item_lines'></div>
<!-- 最后一条不显示重新发起 --> <!-- 最后一条不显示重新发起 -->
<el-timeline-item type="success" v-if="index != 0 && item.status != '1'"> <el-timeline-item type='success' v-if="index != 0 && item.status != '1'">
<p style="font-weight: 700"> <p style='font-weight: 700'>
重新发起：【{{ item.processInstance.startUser?.name }}】在 重新发起：【{{ item.processInstance.startUser?.name }}】在
{{ formatDate(item?.createTime) }} 重新发起【 {{ item.processInstance.name }} 】流程 {{ formatDate(item?.createTime) }} 重新发起【 {{ item.processInstance.name }} 】流程
</p> </p>
</el-timeline-item> </el-timeline-item>
<el-timeline-item :type="getTaskTimelineItemType(item)"> <el-timeline-item :type='getTaskTimelineItemType(item)'>
<p style="font-weight: 700; margin: 8px"> <p style='font-weight: 700; margin: 8px'>
审批任务：{{ item.name }} 审批任务：{{ item.name }}
<el-tag :type="getTaskTimelineItemType(item.status)"> <el-tag :type='getTaskTimelineItemType(item.status)'>
{{ getTaskNameItemType(item.status) }} {{ getTaskNameItemType(item.status) }}
</el-tag> </el-tag>
<el-button <el-button
class="ml-10px" class='ml-10px'
v-if="!isEmpty(item.children)" v-if='!isEmpty(item.children)'
@click="openChildrenTask(item)" @click='openChildrenTask(item)'
size="small" size='small'
> >
<Icon icon="ep:memo" /> <Icon icon='ep:memo' />
子任务 子任务
</el-button> </el-button>
<el-button <el-button
class="ml-10px" class='ml-10px'
size="small" size='small'
v-if="item.formId > 0" v-if='item.formId > 0'
@click="handleFormDetail(item)" @click='handleFormDetail(item)'
> >
<Icon icon="ep:document" /> <Icon icon='ep:document' />
查看表单 查看表单
</el-button> </el-button>
</p> </p>
<el-card :body-style="{ padding: '10px' }"> <el-card :body-style="{ padding: '10px' }">
<label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal"> <label v-if='item.assigneeUser' style='margin-right: 30px; font-weight: normal'>
审批人：{{ item.assigneeUser.name }} 审批人：{{ item.assigneeUser.name }}
<el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag> <el-tag size='small' type='info'>{{ item.assigneeUser.deptName }}</el-tag>
</label> </label>
<label v-if="item.createTime" style="font-weight: normal">创建时间：</label> <label v-if='item.createTime' style='font-weight: normal'>创建时间：</label>
<label style="font-weight: normal; color: #8a909c"> <label style='font-weight: normal; color: #8a909c'>
{{ formatDate(item?.createTime) }} {{ formatDate(item?.createTime) }}
</label> </label>
<label v-if="item.endTime" style="margin-left: 30px; font-weight: normal"> <label v-if='item.endTime' style='margin-left: 30px; font-weight: normal'>
审批时间： 审批时间：
</label> </label>
<label v-if="item.endTime" style="font-weight: normal; color: #8a909c"> <label v-if='item.endTime' style='font-weight: normal; color: #8a909c'>
{{ formatDate(item?.endTime) }} {{ formatDate(item?.endTime) }}
</label> </label>
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal"> <label v-if='item.durationInMillis' style='margin-left: 30px; font-weight: normal'>
耗时： 耗时：
</label> </label>
<label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c"> <label v-if='item.durationInMillis' style='font-weight: normal; color: #8a909c'>
{{ formatPast2(item?.durationInMillis) }} {{ formatPast2(item?.durationInMillis) }}
</label> </label>
<p v-if="item.reason">审批建议：{{ item.reason }}</p> <p v-if='item.reason'>审批建议：{{ item.reason }}</p>
</el-card> </el-card>
</el-timeline-item> </el-timeline-item>
</div> </div>
<el-timeline-item type="success"> <el-timeline-item type='success'>
<p style="font-weight: 700"> <p style='font-weight: 700'>
发起流程：【{{ tasksList[tasksList.length - 1]?.processInstance.startUser?.name }}】在 发起流程：【{{ tasksList[tasksList.length - 1]?.processInstance.startUser?.name }}】在
{{ formatDate(tasksList[tasksList.length - 1]?.createTime) }} 发起【 {{ formatDate(tasksList[tasksList.length - 1]?.createTime) }} 发起【
{{ tasksList[tasksList.length - 1]?.processInstance.name }} 】流程 {{ tasksList[tasksList.length - 1]?.processInstance.name }} 】流程
</p> </p>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</div> </div>
</el-col> </el-col>
</el-card> </el-card>
<!-- 弹窗：子任务 --> <!-- 弹窗：子任务 -->
<TaskSignList ref="taskSignListRef" @success="refresh" /> <TaskSignList ref='taskSignListRef' @success='refresh' />
<!-- 弹窗：表单 --> <!-- 弹窗：表单 -->
<el-dialog title="表单详情" v-model="taskFormVisible" width="600"> <el-dialog title='表单详情' v-model='taskFormVisible' width='600'>
<form-create ref="fApi" v-model="taskForm.value" :option="taskForm.option" :rule="taskForm.rule" /> <form-create ref='fApi' v-model='taskForm.value' :option='taskForm.option' :rule='taskForm.rule' />
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue' import { ref, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDate, formatPast2 } from '@/utils/formatTime' import { formatDate, formatPast2 } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { isEmpty } from '@/utils/is' import { isEmpty } from '@/utils/is'
import TaskSignList from './dialog/TaskSignList.vue' import TaskSignList from './dialog/TaskSignList.vue'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -108,149 +106,153 @@ import { setConfAndFields2 } from '@/utils/formCreate'
defineOptions({ name: 'BpmProcessInstanceTaskList' }) defineOptions({ name: 'BpmProcessInstanceTaskList' })
const props = defineProps({ const props = defineProps({
loading: propTypes.bool, // 是否加载中 loading: propTypes.bool, // 是否加载中
processInstance: propTypes.object, // 流程实例 processInstance: propTypes.object, // 流程实例
tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组 tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
}) })
const tasksList: any = ref([]) const tasksList: any = ref([])
watch( watch(
() => props.tasks, () => props.tasks,
(val, oldVal) => { (val, oldVal) => {
if (val && val.length != 0) { if (val && val.length != 0) {
tasksList.value = JSON.parse(JSON.stringify(val)).sort((a, b) => { tasksList.value = JSON.parse(JSON.stringify(val)).sort((a, b) => {
// 有已完成的情况，按照完成时间倒序 // 有已完成的情况，按照完成时间倒序
// if (a.endTime && b.endTime) { // if (a.endTime && b.endTime) {
// return sortYMDHMS(a.endTime) - sortYMDHMS(b.endTime) // return sortYMDHMS(a.endTime) - sortYMDHMS(b.endTime)
// } else // } else
// if (a.endTime) { // if (a.endTime) {
// return 1 // return 1
// } // }
// else if (b.endTime) { // else if (b.endTime) {
// return -1 // return -1
// // 都是未完成，按照创建时间倒序 // // 都是未完成，按照创建时间倒序
// } // }
// else // else
// { // {
return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime) return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
// } // }
}) })
} }
}, },
{ {
immediate: true, immediate: true,
deep: true deep: true
} }
) )
const sortYMDHMS = val => { const sortYMDHMS = val => {
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0 return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
} }
/** 获得流程实例对应的颜色 */ /** 获得流程实例对应的颜色 */
const getProcessInstanceTimelineItemType = (item: any) => { const getProcessInstanceTimelineItemType = (item: any) => {
if (item.status === 2) { if (item.status === 2) {
return 'success' return 'success'
} }
if (item.status === 3) { if (item.status === 3) {
return 'danger' return 'danger'
} }
if (item.status === 4) { if (item.status === 4) {
return 'warning' return 'warning'
} }
return '' return ''
} }
/** 获得任务对应的颜色 */ /** 获得任务对应的颜色 */
const getTaskTimelineItemType = (itemStatus: any) => { const getTaskTimelineItemType = (itemStatus: any) => {
if ([0, 1, 6, 7].includes(itemStatus)) { if ([0, 1, 6, 7].includes(itemStatus)) {
return 'primary'
}
if (itemStatus === 2) {
return 'success'
}
if (itemStatus === 3) {
return 'danger'
}
if (itemStatus === 4) {
return 'info'
}
if (itemStatus === 5) {
return 'warning'
}
return 'primary' return 'primary'
}
if (itemStatus === 2) {
return 'success'
}
if (itemStatus === 3) {
return 'danger'
}
if (itemStatus === 4) {
return 'info'
}
if (itemStatus === 5) {
return 'warning'
}
return 'primary'
} }
const getTaskNameItemType = (itemStatus: any) => { const getTaskNameItemType = (itemStatus: any) => {
if (itemStatus === 1) { if (itemStatus === 1) {
return '审批中'
}
if (itemStatus === 2) {
return '审批通过'
}
if (itemStatus === 3) {
return '审批不通过'
}
if (itemStatus === 4) {
return '已取消'
}
return '审批中' return '审批中'
}
if (itemStatus === 2) {
return '审批通过'
}
if (itemStatus === 3) {
return '审批不通过'
}
if (itemStatus === 4) {
return '已取消'
}
return '审批中'
} }
/** 子任务 */ /** 子任务 */
const taskSignListRef = ref() const taskSignListRef = ref()
const openChildrenTask = (item: any) => { const openChildrenTask = (item: any) => {
taskSignListRef.value.open(item) taskSignListRef.value.open(item)
} }
/** 查看表单 */ /** 查看表单 */
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
const taskForm = ref({ const taskForm = ref({
rule: [], rule: [],
option: {}, option: {},
value: {} value: {}
}) // 流程任务的表单详情 }) // 流程任务的表单详情
const taskFormVisible = ref(false) const taskFormVisible = ref(false)
const handleFormDetail = async row => { const handleFormDetail = async row => {
// 设置表单 // 设置表单
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables) setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
// 弹窗打开 // 弹窗打开
taskFormVisible.value = true taskFormVisible.value = true
// 隐藏提交、重置按钮，设置禁用只读 // 隐藏提交、重置按钮，设置禁用只读
await nextTick() await nextTick()
fApi.value.fapi.btn.show(false) fApi.value.fapi.btn.show(false)
fApi.value?.fapi?.resetBtn.show(false) fApi.value?.fapi?.resetBtn.show(false)
fApi.value?.fapi?.disabled(true) fApi.value?.fapi?.disabled(true)
} }
/** 刷新数据 */ /** 刷新数据 */
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调 const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
const refresh = () => { const refresh = () => {
emit('refresh') emit('refresh')
} }
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.item_line { .item_line {
.end_item_line { .end_item_line {
position: relative; position: relative;
.end_item_lines {
position: absolute; .end_item_lines {
left: 4px; position: absolute;
top: 10px; left: 4px;
width: 2px; top: 10px;
height: 100%; width: 2px;
background: #eeeeee; height: 100%;
} background: #eeeeee;
} }
.start_item_line { }
position: relative;
.start_item_lines { .start_item_line {
position: absolute; position: relative;
left: 4px;
top: 10px; .start_item_lines {
width: 2px; position: absolute;
height: 100%; left: 4px;
background: #eeeeee; top: 10px;
} width: 2px;
height: 100%;
background: #eeeeee;
} }
}
} }
::v-deep .el-timeline-item__tail { ::v-deep .el-timeline-item__tail {
display: none !important; display: none !important;
} }
</style> </style>

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

@@ -1,145 +1,144 @@
<!-- 流程详情页面 tab切换 --> <!-- 流程详情页面 tab切换 -->
<template> <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" /> <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-tabs type='border-card' v-model='tab' @tab-click='handleClickTab'>
<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 != null" class="mb-15px !-mt-10px"> <el-card v-if='runningTasks[index].formId != null' 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-card>
<el-form-item label="审批建议" prop="reason" style="margin-top: 15px"> <el-form-item label='审批建议' prop='reason' style='margin-top: 15px'>
<el-input <el-input
v-model="auditForms[index].reason" v-model='auditForms[index].reason'
placeholder="请输入审批建议" placeholder='请输入审批建议'
type="textarea" 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" :applyTitle="processInstance.name" />
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label="审批记录" name="审批记录">
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading="tasksLoad"
:process-instance="processInstance"
:tasks="tasks"
@refresh="getTaskList"
/> />
</el-tab-pane> </el-form-item>
<el-tab-pane label="流程图" name="流程图"> <!-- <el-form-item label='抄送人' prop='copyUserIds'>-->
<ProcessInstanceBpmnViewer <!-- <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
ref="mapRef" <!-- <el-option-->
:id="`${id}`" <!-- v-for='item in userOptions'-->
:bpmn-xml="bpmnXml" <!-- :key='item.id'-->
:loading="processInstanceLoading" <!-- :label='item.nickname'-->
:process-instance="processInstance" <!-- :value='item.id'-->
:tasks="tasks" <!-- />-->
/> <!-- </el-select>-->
</el-tab-pane> <!-- </el-form-item>-->
</el-tabs> </el-form>
<ContentWrap> <div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
<!-- 弹窗：转派审批人 --> <el-button type='success' :icon='Select' @click='handleAudit(item, true)'>通过</el-button>
<TaskTransferForm ref="taskTransferFormRef" @success="getDetail" /> <el-button type='danger' :icon='Close' @click='handleAudit(item, false)'>不通过</el-button>
<!-- 弹窗：回退节点 --> <!-- <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
<TaskReturnForm ref="taskReturnFormRef" @success="getDetail" /> <!-- <Icon icon='ep:edit' />-->
<!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中--> <!-- 转办-->
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" /> <!-- </el-button>-->
<!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 --> <!-- <el-button type='primary' @click='handleDelegate(item)'>-->
<TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" /> <!-- <Icon icon='ep:position' />-->
</ContentWrap> <!-- 委派-->
</div> <!-- </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' :applyTitle='processInstance.name' />
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label='审批记录' name='审批记录'>
<!-- 审批记录 -->
<ProcessInstanceTaskList
:loading='tasksLoad'
:process-instance='processInstance'
:tasks='tasks'
@refresh='getTaskList'
/>
</el-tab-pane>
<el-tab-pane label='流程图' name='流程图'>
<ProcessInstanceBpmnViewer
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' />
<!-- 弹窗：回退节点 -->
<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, markRaw } from 'vue' import { onMounted, ref, getCurrentInstance, reactive, watch, unref, nextTick, markRaw } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue' import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -178,7 +177,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
@@ -186,99 +185,99 @@ 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
} }
if (pass) { await approveTask(data)
// 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交 tab.value = '审批记录'
const formCreateApi = approveFormFApis.value[index] ElMessage.success('审批通过成功')
if (formCreateApi) { } else {
await formCreateApi.validate() await rejectTask(data)
data.variables = approveForms.value[index].value tab.value = '审批记录'
} ElMessage.success('审批不通过成功')
await approveTask(data) }
tab.value = '审批记录' // 2.2 加载最新数据
ElMessage.success('审批通过成功') getDetail()
} else {
await rejectTask(data)
tab.value = '审批记录'
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()
} }
//tab切换 //tab切换
const mapRef = ref(null) const mapRef = ref(null)
const handleClickTab = (tab: any, event: any) => { const handleClickTab = (tab: any, event: any) => {
if (tab.props.name == '流程图') { if (tab.props.name == '流程图') {
mapRef.value.getMapList() mapRef.value.getMapList()
} }
} }
/** 加载流程实例 */ /** 加载流程实例 */
@@ -287,109 +286,109 @@ const historyInstanceIdList: any = ref([])
//查询流程数据 //查询流程数据
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
// 设置表单信息
const processDefinition = data.processDefinition
if (processDefinition.formType === 10) {
setConfAndFields2(detailForm, processDefinition.formConf, processDefinition.formFields, data.formVariables)
nextTick().then(() => {
fApi.value?.btn.show(false)
fApi.value?.resetBtn.show(false)
fApi.value?.disabled(true)
})
} else {
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
//用markRaw解决因使用ref定义组件，导致组件被标记成响应式对象，造成性能开销警告的问题
BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
}
// 加载流程图
await getProcessDefinitionById(processDefinition.id).then(res => {
bpmnXml.value = res.data?.bpmnXml
})
// console.log(bpmnXml.value, '流程图数据')
} finally {
processInstanceLoading.value = false
} }
processInstance.value = data
// 设置表单信息
const processDefinition = data.processDefinition
if (processDefinition.formType === 10) {
setConfAndFields2(detailForm, processDefinition.formConf, processDefinition.formFields, data.formVariables)
nextTick().then(() => {
fApi.value?.btn.show(false)
fApi.value?.resetBtn.show(false)
fApi.value?.disabled(true)
})
} else {
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
//用markRaw解决因使用ref定义组件，导致组件被标记成响应式对象，造成性能开销警告的问题
BusinessFormComponent.value = markRaw(registerComponent(data.processDefinition.formCustomViewPath))
}
// 加载流程图
await getProcessDefinitionById(processDefinition.id).then(res => {
bpmnXml.value = res.data?.bpmnXml
})
// console.log(bpmnXml.value, '流程图数据')
} finally {
processInstanceLoading.value = false
}
} }
const sortYMDHMS = val => { const sortYMDHMS = val => {
return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0 return val.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0
} }
/** 加载任务列表 */ /** 加载任务列表 */
let stepList = ref([]) let stepList = ref([])
const getTaskList = async () => { const getTaskList = async () => {
historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : [] historyInstanceIdList.value = historyInstanceId ? historyInstanceId?.split(',') : []
runningTasks.value = [] runningTasks.value = []
auditForms.value = [] auditForms.value = []
approveForms.value = [] approveForms.value = []
approveFormFApis.value = [] approveFormFApis.value = []
tasks.value = [] tasks.value = []
stepList.value = [] stepList.value = []
try { try {
// 获得未取消的任务 // 获得未取消的任务
tasksLoad.value = true tasksLoad.value = true
//根据历史实例id查询历史任务日志数据把最新的id加进去 //根据历史实例id查询历史任务日志数据把最新的id加进去
historyInstanceIdList.value.push(id) historyInstanceIdList.value.push(id)
//轮询 //轮询
await historyInstanceIdList.value?.map((item: any) => { await historyInstanceIdList.value?.map((item: any) => {
getTaskListByProcessInstanceId(item).then(res => { getTaskListByProcessInstanceId(item).then(res => {
res.data?.map(vv => { res.data?.map(vv => {
stepList.value.push(vv) stepList.value.push(vv)
})
})
tasks.value=[]
}) })
} finally { })
tasksLoad.value = false tasks.value = []
} })
} finally {
tasksLoad.value = false
}
} }
/** /**
* 设置 runningTasks 中的任务 * 设置 runningTasks 中的任务
*/ */
const loadRunningTask = tasks => { const loadRunningTask = tasks => {
//清空数据 //清空数据
runningTasks.value=[] runningTasks.value = []
// tasks.length = 1 // tasks.length = 1
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 表单
if (task.formId && task.formConf) {
const approveForm = {}
setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
approveForms.value.push(approveForm)
} else {
approveForms.value.push({}) // 占位，避免为空
}
}) })
// 2.4 处理 approve 表单
if (task.formId && task.formConf) {
const approveForm = {}
setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
approveForms.value.push(approveForm)
} else {
approveForms.value.push({}) // 占位，避免为空
}
})
} }
const tab = ref('') const tab = ref('')
@@ -400,53 +399,53 @@ const userOptions = ref([]) // 用户列表
watch( watch(
() => stepList.value, () => stepList.value,
(val, oldVal) => { (val, oldVal) => {
if (val&&val.length!=0 ) { if (val && val.length != 0) {
tasks.value=[] tasks.value = []
val.map(task => { val.map(task => {
if (task.status !== 4) { if (task.status !== 4) {
tasks.value.push(task) tasks.value.push(task)
} }
}) })
// 1.2 排序，将未完成的排在前面，已完成的排在后面； // 1.2 排序，将未完成的排在前面，已完成的排在后面；
let list = Array.from(tasks.value)?.sort((a, b) => { let list = Array.from(tasks.value)?.sort((a, b) => {
// 有已完成的情况，按照完成时间倒序 // 有已完成的情况，按照完成时间倒序
if (a.endTime && b.endTime) { if (a.endTime && b.endTime) {
return sortYMDHMS(b.endTime) - sortYMDHMS(a.endTime) return sortYMDHMS(b.endTime) - sortYMDHMS(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 sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime) return sortYMDHMS(b.createTime) - sortYMDHMS(a.createTime)
} }
}) })
// 获得需要自己审批的任务 // 获得需要自己审批的任务
loadRunningTask(list) loadRunningTask(list)
} }
}, },
{ {
immediate:true, immediate: true,
deep:true, deep: true
} }
) )
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>
<style lang="scss" scoped> <style lang='scss' scoped>
::v-deep .el-tab-pane { ::v-deep .el-tab-pane {
height: calc(100vh - 200px) !important; height: calc(100vh - 200px) !important;
overflow: auto !important; overflow: auto !important;
} }
</style> </style>

173
src/views/system/bpm/task/done/index.vue
View File

@@ -1,19 +1,19 @@
<!--待办事项列表--> <!--待办事项列表-->
<template> <template>
<div> <div>
<TableHeader date-picker> <TableHeader date-picker>
<template v-slot:select> <template v-slot:select>
<el-form-item label="任务名称"> <el-form-item label='任务名称'>
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入任务名称" /> <el-input v-model='tableStore.table.params.searchValue' placeholder='请输入任务名称' />
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<!--表格--> <!--表格-->
<Table ref="tableRef"></Table> <Table ref='tableRef'></Table>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang='ts'>
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
@@ -22,93 +22,100 @@ import { useRouter } from 'vue-router'
import { dateFormatter, formatPast2 } from '@/utils/formatTime' import { dateFormatter, formatPast2 } from '@/utils/formatTime'
defineOptions({ defineOptions({
name: 'businessUser' name: 'businessUser'
}) })
const { push } = useRouter() const { push } = useRouter()
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/bpm-boot/bpm/task/doneList', url: '/bpm-boot/bpm/task/doneList',
method: 'POST', method: 'POST',
publicHeight: 65, publicHeight: 65,
column: [ column: [
{ title: '序号', type: 'seq', width: 80 }, {
{ title: '任务名称', field: 'processInstance.name', minWidth: 130 }, field: 'index',
{ title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 }, title: '序号',
{ title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 }, width: '60',
{ title: '当前任务', field: 'name', minWidth: 130 }, formatter: (row: any) => {
{ title: '发起时间', field: 'createTime', minWidth: 170 }, return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
{ title: '结束时间', field: 'endTime', minWidth: 170 }, }
},
{ title: '任务名称', field: 'processInstance.name', minWidth: 130 },
{ title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
{ title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
{ title: '当前任务', field: 'name', minWidth: 130 },
{ title: '发起时间', field: 'createTime', minWidth: 170 },
{ title: '结束时间', field: 'endTime', minWidth: 170 },
{
title: '审批状态',
field: 'status',
minWidth: 130,
render: 'tag',
custom: {
1: 'primary',
2: 'success',
3: 'danger',
4: 'warning'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消'
}
},
{ title: '审批建议', field: 'reason', minWidth: 150 },
{
title: '耗时',
field: 'durationInMillis',
minWidth: 150,
formatter: (obj: any) => {
return formatPast2(obj.row.durationInMillis)
}
},
{
title: '操作',
align: 'center',
minWidth: '150',
fixed: 'right',
render: 'buttons',
buttons: [
{ {
title: '审批状态', name: 'productSetting',
field: 'status', title: '流程详情',
minWidth: 130, type: 'primary',
render: 'tag', icon: 'el-icon-EditPen',
custom: { render: 'basicButton',
1: 'primary', click: row => {
2: 'success', handleAudit(row.processInstance.id)
3: 'danger', }
4: 'warning'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消'
}
},
{ title: '审批建议', field: 'reason', minWidth: 150 },
{
title: '耗时',
field: 'durationInMillis',
minWidth: 150,
formatter: (obj: any) => {
return formatPast2(obj.row.durationInMillis)
}
},
{
title: '操作',
align: 'center',
minWidth: '150',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'productSetting',
title: '流程详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
handleAudit(row.processInstance.id)
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
} }
]
} }
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
}) })
onMounted(() => { onMounted(() => {
// 加载数据 // 加载数据
tableStore.index() tableStore.index()
}) })
tableStore.table.params.searchValue = '' tableStore.table.params.searchValue = ''
provide('tableStore', tableStore) provide('tableStore', tableStore)
/** 处理审批按钮 */ /** 处理审批按钮 */
const handleAudit = (instanceId: any) => { const handleAudit = (instanceId: any) => {
push({ push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
query: { query: {
id: instanceId id: instanceId
} }
}) })
} }
</script> </script>

40
src/views/system/bpm/task/index.vue
View File

@@ -1,36 +1,42 @@
<template> <template>
<div class="default-main"> <div class='default-main'>
<el-tabs v-model="activeName" type="border-card"> <el-tabs v-model='activeName' type='border-card'>
<el-tab-pane label="待办任务" name="1"> <el-tab-pane label='待办任务' name='1'>
<TodoTask v-if="activeName == '1'" /> <TodoTask v-if="activeName == '1'" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="已办任务" name="2"> <el-tab-pane label='已办任务' name='2'>
<DoneTask v-if="activeName == '2'" /> <DoneTask v-if="activeName == '2'" />
</el-tab-pane> </el-tab-pane>
</el-tabs> <el-tab-pane label='我发起的' name='3'>
</div> <MyInstance v-if="activeName == '3'" />
</el-tab-pane>
</el-tabs>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang='ts'>
import { ref } from 'vue' import { ref } from 'vue'
import TodoTask from './todo/index.vue' import TodoTask from './todo/index.vue'
import DoneTask from './done/index.vue' import DoneTask from './done/index.vue'
import MyInstance from './myInstance/index.vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
defineOptions({ defineOptions({
// name: 'bpm/task' // name: 'bpm/task'
}) })
const activeName = ref('1') const activeName = ref('1')
const layout = mainHeight(63) as any const layout = mainHeight(63) as any
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.bars_w { .bars_w {
width: 100%; width: 100%;
height: 500px; height: 500px;
} }
:deep(.el-tabs__content) { :deep(.el-tabs__content) {
height: v-bind('layout.height'); height: v-bind('layout.height');
overflow-y: auto; overflow-y: auto;
} }
</style> </style>

138
src/views/system/bpm/task/myInstance/index.vue Normal file
View File

@@ -0,0 +1,138 @@
<!--待办事项列表-->
<template>
<div>
<TableHeader date-picker>
<template v-slot:select>
<el-form-item label='任务名称'>
<el-input
v-model='tableStore.table.params.searchValue'
placeholder='请输入任务名称'
></el-input>
</el-form-item>
</template>
</TableHeader>
<!--表格-->
<Table ref='tableRef'></Table>
</div>
</template>
<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { formatDate, formatPast2 } from '@/utils/formatTime'
import { useRouter } from 'vue-router'
defineOptions({
name: 'businessUser'
})
const { push } = useRouter()
const tableStore = new TableStore({
url: '/bpm-boot/bpm/processInstance/myPage',
method: 'POST',
publicHeight: 65,
column: [
{
field: 'index',
title: '序号',
width: '60',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '任务名称', field: 'name', minWidth: 130 },
{ title: '流程分类', field: 'category', minWidth: 130 },
{
field: 'status',
title: '流程状态',
render: 'tag',
minWidth: 130,
custom: {
1: 'primary',
2: 'success',
3: 'danger',
4: 'warning'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消'
}
},
{ title: '发起时间', field: 'startTime', minWidth: 140 },
{ title: '结束时间', field: 'endTime', minWidth: 140 },
{
title: '耗时', field: 'durationInMillis', minWidth: 130,
formatter: (obj: any) => {
const millis = obj.row.durationInMillis
return millis > 0 ? formatPast2(millis) : ''
}
},
{
title: '当前审批任务', field: 'tasks', minWidth: 140,
formatter: (obj: any) => {
const tasks = obj.row.tasks
if (tasks) {
return tasks[0].name
} else {
return ''
}
// return millis > 0 ? formatPast2(millis) : '--'
}
},
{
title: '操作',
align: 'center',
minWidth: '180',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'productSetting',
title: '流程详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
handleAudit(row.id)
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
onMounted(() => {
// 加载数据
tableStore.index()
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
/** 处理审批按钮 */
const handleAudit = (instanceId: any) => {
push({
name: 'BpmProcessInstanceDetail',
query: {
id: instanceId
}
})
}
</script>

123
src/views/system/bpm/task/todo/index.vue
View File

@@ -1,20 +1,20 @@
<!--待办事项列表--> <!--待办事项列表-->
<template> <template>
<div > <div>
<TableHeader date-picker> <TableHeader>
<template v-slot:select> <template v-slot:select>
<el-form-item label='任务名称'> <el-form-item label='任务名称'>
<el-input <el-input
v-model='tableStore.table.params.searchValue' v-model='tableStore.table.params.searchValue'
placeholder='请输入任务名称' placeholder='请输入任务名称'
></el-input> ></el-input>
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<!--表格--> <!--表格-->
<Table ref='tableRef'></Table> <Table ref='tableRef'></Table>
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
@@ -26,68 +26,75 @@ import { useRouter } from 'vue-router'
defineOptions({ defineOptions({
name: 'businessUser' name: 'businessUser'
}) })
const { push } = useRouter() const { push } = useRouter()
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/bpm-boot/bpm/task/todoList', url: '/bpm-boot/bpm/task/todoList',
method: 'POST', method: 'POST',
publicHeight: 65, publicHeight: 65,
column: [ column: [
{ title: '序号', type: 'seq', width: 80 }, {
{ title: '任务名称', field: 'processInstance.name', minWidth: 130 }, field: 'index',
{ title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 }, title: '序号',
{ title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 }, width: '60',
{ title: '发起时间', field: 'createTime', minWidth: 170 }, formatter: (row: any) => {
{ title: '当前任务', field: 'name', minWidth: 130 }, return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '任务名称', field: 'processInstance.name', minWidth: 130 },
{ title: '发起人', field: 'processInstance.startUser.name', minWidth: 130 },
{ title: '发起部门', field: 'processInstance.startUser.deptName', minWidth: 130 },
{ title: '发起时间', field: 'createTime', minWidth: 170 },
{ title: '当前任务', field: 'name', minWidth: 130 },
{
title: '操作',
align: 'center',
width: '230',
render: 'buttons',
buttons: [
{ {
title: '操作', name: 'productSetting',
align: 'center', title: '办理',
width: '230', type: 'primary',
render: 'buttons', icon: 'el-icon-EditPen',
buttons: [ render: 'basicButton',
{ click: row => {
name: 'productSetting', handleAudit(row.processInstance.id)
title: '办理', }
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
handleAudit(row.processInstance.id)
}
}
]
} }
], ]
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
} }
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
}) })
onMounted(() => { onMounted(() => {
// 加载数据 // 加载数据
tableStore.index() tableStore.index()
}) })
tableStore.table.params.searchValue = '' tableStore.table.params.searchValue = ''
provide('tableStore', tableStore) provide('tableStore', tableStore)
/** 处理审批按钮 */ /** 处理审批按钮 */
const handleAudit = (instanceId: any) => { const handleAudit = (instanceId: any) => {
push({ push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
query: { query: {
id: instanceId, id: instanceId,
todo: 'todo' todo: 'todo'
} }
}) })
} }
</script> </script>