Skip to content

Commit 4b55420

Browse files
LeeSmallNorthLeeSmallNorth
committed
feat: oa业务表单添加审批人选择
1 parent 772deb5 commit 4b55420

File tree

1 file changed

+132
-87
lines changed

1 file changed

+132
-87
lines changed

‎src/views/bpm/oa/leave/create.vue

Lines changed: 132 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,69 @@
11
<template>
2-
<el-form
3-
ref="formRef"
4-
v-loading="formLoading"
5-
:model="formData"
6-
:rules="formRules"
7-
label-width="80px"
8-
>
9-
<el-form-item label="请假类型" prop="type">
10-
<el-select v-model="formData.type" clearable placeholder="请选择请假类型">
11-
<el-option
12-
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
13-
:key="dict.value"
14-
:label="dict.label"
15-
:value="dict.value"
16-
/>
17-
</el-select>
18-
</el-form-item>
19-
<el-form-item label="开始时间" prop="startTime">
20-
<el-date-picker
21-
v-model="formData.startTime"
22-
clearable
23-
placeholder="请选择开始时间"
24-
type="datetime"
25-
value-format="x"
2+
<el-row :gutter="20">
3+
<el-col :span="16"
4+
><el-form
5+
ref="formRef"
6+
v-loading="formLoading"
7+
:model="formData"
8+
:rules="formRules"
9+
label-width="80px"
10+
>
11+
<el-form-item label="请假类型" prop="type">
12+
<el-select v-model="formData.type" clearable placeholder="请选择请假类型">
13+
<el-option
14+
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
15+
:key="dict.value"
16+
:label="dict.label"
17+
:value="dict.value"
18+
/>
19+
</el-select>
20+
</el-form-item>
21+
<el-form-item label="开始时间" prop="startTime">
22+
<el-date-picker
23+
v-model="formData.startTime"
24+
clearable
25+
placeholder="请选择开始时间"
26+
type="datetime"
27+
value-format="x"
28+
/>
29+
</el-form-item>
30+
<el-form-item label="结束时间" prop="endTime">
31+
<el-date-picker
32+
v-model="formData.endTime"
33+
clearable
34+
placeholder="请选择结束时间"
35+
type="datetime"
36+
value-format="x"
37+
/>
38+
</el-form-item>
39+
<el-form-item label="原因" prop="reason">
40+
<el-input v-model="formData.reason" placeholder="请输入请假原因" type="textarea" />
41+
</el-form-item>
42+
<el-form-item>
43+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
44+
</el-form-item>
45+
</el-form></el-col
46+
>
47+
<el-col :span="8"
48+
><!-- 流程时间线 -->
49+
<ProcessInstanceTimeline
50+
ref="timelineRef"
51+
:activity-nodes="activityNodes"
52+
:show-status-icon="false"
53+
@select-user-confirm="selectUserConfirm"
2654
/>
27-
</el-form-item>
28-
<el-form-item label="结束时间" prop="endTime">
29-
<el-date-picker
30-
v-model="formData.endTime"
31-
clearable
32-
placeholder="请选择结束时间"
33-
type="datetime"
34-
value-format="x"
35-
/>
36-
</el-form-item>
37-
<el-form-item label="原因" prop="reason">
38-
<el-input v-model="formData.reason" placeholder="请输请假原因" type="textarea" />
39-
</el-form-item>
40-
<el-col v-if="startUserSelectTasks.length > 0">
41-
<el-card class="mb-10px">
42-
<template #header>指定审批人</template>
43-
<el-form
44-
:model="startUserSelectAssignees"
45-
:rules="startUserSelectAssigneesFormRules"
46-
ref="startUserSelectAssigneesFormRef"
47-
>
48-
<el-form-item
49-
v-for="userTask in startUserSelectTasks"
50-
:key="userTask.id"
51-
:label="`任务【${userTask.name}】`"
52-
:prop="userTask.id"
53-
>
54-
<el-select
55-
v-model="startUserSelectAssignees[userTask.id]"
56-
multiple
57-
placeholder="请选择审批人"
58-
>
59-
<el-option
60-
v-for="user in userList"
61-
:key="user.id"
62-
:label="user.nickname"
63-
:value="user.id"
64-
/>
65-
</el-select>
66-
</el-form-item>
67-
</el-form>
68-
</el-card>
6955
</el-col>
70-
<el-form-item>
71-
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
72-
</el-form-item>
73-
</el-form>
56+
</el-row>
7457
</template>
7558
<script lang="ts" setup>
7659
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
7760
import * as LeaveApi from '@/api/bpm/leave'
7861
import { useTagsViewStore } from '@/store/modules/tagsView'
7962
import * as DefinitionApi from '@/api/bpm/definition'
80-
import * as UserApi from '@/api/system/user'
63+
import ProcessInstanceTimeline from '../../processInstance/detail/ProcessInstanceTimeline.vue'
64+
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
65+
import { CandidateStrategy, NodeId } from '@/components/SimpleProcessDesignerV2/src/consts'
66+
import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
8167
8268
defineOptions({ name: 'BpmOALeaveCreate' })
8369
@@ -104,9 +90,9 @@ const formRef = ref() // 表单 Ref
10490
const processDefineKey = 'oa_leave' // 流程定义 Key
10591
const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
10692
const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
107-
const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
108-
const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
109-
const userList = ref<any[]>([]) // 用户列表
93+
const tempStartUserSelectAssignees = ref({}) // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
94+
const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
95+
const processDefinitionId = ref('')
11096
11197
/** 提交表单 */
11298
const submitForm = async () => {
@@ -116,7 +102,14 @@ const submitForm = async () => {
116102
if (!valid) return
117103
// 校验指定审批人
118104
if (startUserSelectTasks.value?.length > 0) {
119-
await startUserSelectAssigneesFormRef.value.validate()
105+
for (const userTask of startUserSelectTasks.value) {
106+
if (
107+
Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
108+
startUserSelectAssignees.value[userTask.id].length === 0
109+
) {
110+
return message.warning(`请选择${userTask.name}的审批人`)
111+
}
112+
}
120113
}
121114
122115
// 提交请求
@@ -137,28 +130,80 @@ const submitForm = async () => {
137130
}
138131
}
139132
133+
/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
134+
watch(
135+
formData.value,
136+
(newValue) => {
137+
// if (newValue && Object.keys(newValue.value).length > 0) {
138+
// // 记录之前的节点审批人
139+
// tempStartUserSelectAssignees.value = startUserSelectAssignees.value
140+
// startUserSelectAssignees.value = {}
141+
// // 加载最新的审批详情
142+
// getApprovalDetail({
143+
// id: processDefinitionId,
144+
// processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
145+
// })
146+
// }
147+
},
148+
{
149+
immediate: true
150+
}
151+
)
152+
153+
/** 获取审批详情 */
154+
const getApprovalDetail = async (row: any) => {
155+
try {
156+
const data = await ProcessInstanceApi.getApprovalDetail({
157+
processDefinitionId: row.id,
158+
activityId: NodeId.START_USER_NODE_ID
159+
})
160+
161+
if (!data) {
162+
message.error('查询不到审批详情信息！')
163+
return
164+
}
165+
// 获取审批节点，显示 Timeline 的数据
166+
activityNodes.value = data.activityNodes
167+
168+
// 获取发起人自选的任务
169+
startUserSelectTasks.value = data.activityNodes?.filter(
170+
(node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
171+
)
172+
// 恢复之前的选择审批人
173+
if (startUserSelectTasks.value?.length > 0) {
174+
for (const node of startUserSelectTasks.value) {
175+
if (
176+
tempStartUserSelectAssignees.value[node.id] &&
177+
tempStartUserSelectAssignees.value[node.id].length > 0
178+
) {
179+
startUserSelectAssignees.value[node.id] = tempStartUserSelectAssignees.value[node.id]
180+
} else {
181+
startUserSelectAssignees.value[node.id] = []
182+
}
183+
}
184+
}
185+
} finally {
186+
}
187+
}
188+
189+
/** 选择发起人 */
190+
const selectUserConfirm = (id: string, userList: any[]) => {
191+
startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
192+
}
193+
140194
/** 初始化 */
141195
onMounted(async () => {
142196
const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
143197
undefined,
144198
processDefineKey
145199
)
200+
146201
if (!processDefinitionDetail) {
147202
message.error('OA 请假的流程模型未配置，请检查！')
148203
return
149204
}
205+
processDefinitionId.value = processDefinitionDetail.id
150206
startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
151-
// 设置指定审批人
152-
if (startUserSelectTasks.value?.length > 0) {
153-
// 设置校验规则
154-
for (const userTask of startUserSelectTasks.value) {
155-
startUserSelectAssignees.value[userTask.id] = []
156-
startUserSelectAssigneesFormRules.value[userTask.id] = [
157-
{ required: true, message: '请选择审批人', trigger: 'blur' }
158-
]
159-
}
160-
// 加载用户列表
161-
userList.value = await UserApi.getSimpleUserList()
162-
}
207+
getApprovalDetail({ id: processDefinitionId.value, processVariablesStr: JSON.stringify(formData.value) })
163208
})
164209
</script>

0 commit comments

Comments
 (0)