boyue2025/boyue-ui-admin-vue3
3
0
Fork 0
mirror of https://gitee.com/myxzgzs/boyue-ui-admin-vue3 synced 2025-08-08 08:22:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat： 增加案例流程，业务表单发起时选择审批人

Browse Source
This commit is contained in:
lizhixian 2025-03-21 10:24:16 +08:00
parent 4b554204a7
commit a5c533bff0
1 changed files with 97 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
src/views/bpm/oa/leave/create.vue
View File

@ -1,70 +1,75 @@
<template> <template>
<el-row :gutter="20"> <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }">
<el-col :span="16" <el-row :gutter="20">
><el-form <el-col :span="16"
ref="formRef" ><el-form
v-loading="formLoading" ref="formRef"
:model="formData" v-loading="formLoading"
:rules="formRules" :model="formData"
label-width="80px" :rules="formRules"
> label-width="80px"
<el-form-item label="请假类型" prop="type"> >
<el-select v-model="formData.type" clearable placeholder="请选择请假类型"> <el-form-item label="请假类型" prop="type">
<el-option <el-select v-model="formData.type" clearable placeholder="请选择请假类型">
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)" <el-option
:key="dict.value" v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
:label="dict.label" :key="dict.value"
:value="dict.value" :label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="formData.startTime"
clearable
placeholder="请选择开始时间"
type="datetime"
value-format="x"
/> />
</el-select> </el-form-item>
</el-form-item> <el-form-item label="结束时间" prop="endTime">
<el-form-item label="开始时间" prop="startTime"> <el-date-picker
<el-date-picker v-model="formData.endTime"
v-model="formData.startTime" clearable
clearable placeholder="请选择结束时间"
placeholder="请选择开始时间" type="datetime"
type="datetime" value-format="x"
value-format="x" />
/> </el-form-item>
</el-form-item> <el-form-item label="原因" prop="reason">
<el-form-item label="结束时间" prop="endTime"> <el-input v-model="formData.reason" placeholder="请输入请假原因" type="textarea" />
<el-date-picker </el-form-item>
v-model="formData.endTime" <el-form-item>
clearable <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
placeholder="请选择结束时间" </el-form-item>
type="datetime" </el-form></el-col
value-format="x" >
/> <!-- 新增 ====== begin ======== -->
</el-form-item> <el-col :span="8"
<el-form-item label="原因" prop="reason"> ><!-- 流程时间线 -->
<el-input v-model="formData.reason" placeholder="请输入请假原因" type="textarea" /> <ProcessInstanceTimeline
</el-form-item> ref="timelineRef"
<el-form-item> :activity-nodes="activityNodes"
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> :show-status-icon="false"
</el-form-item> @select-user-confirm="selectUserConfirm"
</el-form></el-col />
> </el-col>
<el-col :span="8" <!-- 新增 ====== end ======== -->
><!-- 流程时间线 --> </el-row>
<ProcessInstanceTimeline </ContentWrap>
ref="timelineRef"
:activity-nodes="activityNodes"
:show-status-icon="false"
@select-user-confirm="selectUserConfirm"
/>
</el-col>
</el-row>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as LeaveApi from '@/api/bpm/leave' import * as LeaveApi from '@/api/bpm/leave'
import { useTagsViewStore } from '@/store/modules/tagsView' import { useTagsViewStore } from '@/store/modules/tagsView'
import * as DefinitionApi from '@/api/bpm/definition' import * as DefinitionApi from '@/api/bpm/definition'
// 新增 ====== begin ========
import ProcessInstanceTimeline from '../../processInstance/detail/ProcessInstanceTimeline.vue' import ProcessInstanceTimeline from '../../processInstance/detail/ProcessInstanceTimeline.vue'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { CandidateStrategy, NodeId } from '@/components/SimpleProcessDesignerV2/src/consts' import { CandidateStrategy, NodeId } from '@/components/SimpleProcessDesignerV2/src/consts'
import { ApprovalNodeInfo } from '@/api/bpm/processInstance' import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
// 新增 ====== end ========
defineOptions({ name: 'BpmOALeaveCreate' }) defineOptions({ name: 'BpmOALeaveCreate' })
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
@ -90,10 +95,11 @@ const formRef = ref() // 表单 Ref
const processDefineKey = 'oa_leave' // 流程定义 Key const processDefineKey = 'oa_leave' // 流程定义 Key
const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表 const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
// 新增 ====== begin ========
const tempStartUserSelectAssignees = ref({}) // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存 const tempStartUserSelectAssignees = ref({}) // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息 const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
const processDefinitionId = ref('') const processDefinitionId = ref('')
// 新增 ====== end ========
/** 提交表单 */ /** 提交表单 */
const submitForm = async () => { const submitForm = async () => {
// 校验表单 // 校验表单
@ -130,32 +136,14 @@ const submitForm = async () => {
} }
} }
/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */ // 新增 ====== begin ========
watch(
formData.value,
(newValue) => {
// if (newValue && Object.keys(newValue.value).length > 0) {
// // 记录之前的节点审批人
// tempStartUserSelectAssignees.value = startUserSelectAssignees.value
// startUserSelectAssignees.value = {}
// // 加载最新的审批详情
// getApprovalDetail({
// id: processDefinitionId,
// processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
// })
// }
},
{
immediate: true
}
)
/** 获取审批详情 */ /** 获取审批详情 */
const getApprovalDetail = async (row: any) => { const getApprovalDetail = async (row: any) => {
try { try {
const data = await ProcessInstanceApi.getApprovalDetail({ const data = await ProcessInstanceApi.getApprovalDetail({
processDefinitionId: row.id, processDefinitionId: row.id,
activityId: NodeId.START_USER_NODE_ID activityId: NodeId.START_USER_NODE_ID,
processVariablesStr: row.processVariablesStr // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
}) })
if (!data) { if (!data) {
@ -190,6 +178,7 @@ const getApprovalDetail = async (row: any) => {
const selectUserConfirm = (id: string, userList: any[]) => { const selectUserConfirm = (id: string, userList: any[]) => {
startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id) startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
} }
// 新增 ====== end ========
/** 初始化 */ /** 初始化 */
onMounted(async () => { onMounted(async () => {
@ -204,6 +193,36 @@ onMounted(async () => {
} }
processDefinitionId.value = processDefinitionDetail.id processDefinitionId.value = processDefinitionDetail.id
startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
getApprovalDetail({ id: processDefinitionId.value, processVariablesStr: JSON.stringify(formData.value) }) // 新增 ====== begin ========
// 查询流程预测节点
getApprovalDetail({
id: processDefinitionId.value,
processVariablesStr: JSON.stringify(formData.value)
})
// 新增 ====== end ========
}) })
// 新增 ====== begin ========
/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
watch(
formData.value,
(newValue, oldValue) => {
if (!oldValue) {
return
}
if (newValue && Object.keys(newValue).length > 0) {
// 记录之前的节点审批人
tempStartUserSelectAssignees.value = startUserSelectAssignees.value
startUserSelectAssignees.value = {}
// 加载最新的审批详情
getApprovalDetail({
id: processDefinitionId.value,
processVariablesStr: JSON.stringify(newValue) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
})
}
},
{
immediate: true
}
// 新增 ====== end ========
)
</script> </script>