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