Skip to content

Commit 8d8ada1

Browse files
YunaiVYunaiV
committed
【代码评审】BPM：下一个审批人
1 parent a911af3 commit 8d8ada1

File tree

3 files changed

+69
-56
lines changed

3 files changed

+69
-56
lines changed

‎src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -147,39 +147,52 @@
147147
size="large"
148148
:label="FieldPermissionType.READ"
149149
@change="updateElementExtensions"
150-
><span></span
151-
></el-radio>
150+
>
151+
<span></span>
152+
</el-radio>
152153
</div>
153154
<div class="item-radio-wrap">
154155
<el-radio
155156
:value="FieldPermissionType.WRITE"
156157
size="large"
157158
:label="FieldPermissionType.WRITE"
158159
@change="updateElementExtensions"
159-
><span></span
160-
></el-radio>
160+
>
161+
<span></span>
162+
</el-radio>
161163
</div>
162164
<div class="item-radio-wrap">
163165
<el-radio
164166
:value="FieldPermissionType.NONE"
165167
size="large"
166168
:label="FieldPermissionType.NONE"
167169
@change="updateElementExtensions"
168-
><span></span
169-
></el-radio>
170+
>
171+
<span></span>
172+
</el-radio>
170173
</div>
171174
</el-radio-group>
172175
</div>
173176
</div>
174177

175178
<el-divider content-position="left">是否需要签名</el-divider>
176179
<el-form-item prop="signEnable">
177-
<el-switch v-model="signEnable.value" active-text="是" inactive-text="否" @change="updateElementExtensions"/>
180+
<el-switch
181+
v-model="signEnable.value"
182+
active-text="是"
183+
inactive-text="否"
184+
@change="updateElementExtensions"
185+
/>
178186
</el-form-item>
179187

180188
<el-divider content-position="left">审批意见</el-divider>
181189
<el-form-item prop="reasonRequire">
182-
<el-switch v-model="reasonRequire.value" active-text="必填" inactive-text="非必填" @change="updateElementExtensions"/>
190+
<el-switch
191+
v-model="reasonRequire.value"
192+
active-text="必填"
193+
inactive-text="非必填"
194+
@change="updateElementExtensions"
195+
/>
183196
</el-form-item>
184197
</div>
185198
</template>

‎src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,14 @@
4444
:rows="4"
4545
/>
4646
</el-form-item>
47-
<el-form-item
48-
label="选择下一个节点的审批人"
49-
prop="nextAssignees"
50-
v-if="dialogVisibleSelectApproveUser"
51-
>
52-
<ProcessInstanceTimeline
53-
ref="timelineRef"
54-
:activity-nodes="activityNodes"
55-
:show-status-icon="false"
56-
@select-user-confirm="selectUserConfirm"
57-
/>
47+
<el-form-item label="下一个节点的审批人" prop="nextAssignees" v-if="nextAssigneesVisible">
48+
<div class="ml-10px -mt-15px -mb-35px">
49+
<ProcessInstanceTimeline
50+
:activity-nodes="nextAssigneesActivityNode"
51+
:show-status-icon="false"
52+
@select-user-confirm="selectNextAssigneesConfirm"
53+
/>
54+
</div>
5855
</el-form-item>
5956
<el-form-item
6057
v-if="runningTask.signEnable"
@@ -78,7 +75,7 @@
7875
>
7976
{{ getButtonDisplayName(OperationButtonType.APPROVE) }}
8077
</el-button>
81-
<el-button @click="closePropover('approve', approveFormRef)"> 取消 </el-button>
78+
<el-button @click="closePopover('approve', approveFormRef)"> 取消 </el-button>
8279
</el-form-item>
8380
</el-form>
8481
</div>
@@ -123,7 +120,7 @@
123120
>
124121
{{ getButtonDisplayName(OperationButtonType.REJECT) }}
125122
</el-button>
126-
<el-button @click="closePropover('reject', rejectFormRef)"> 取消 </el-button>
123+
<el-button @click="closePopover('reject', rejectFormRef)"> 取消 </el-button>
127124
</el-form-item>
128125
</el-form>
129126
</div>
@@ -181,7 +178,7 @@
181178
<el-button :disabled="formLoading" type="primary" @click="handleCopy">
182179
{{ getButtonDisplayName(OperationButtonType.COPY) }}
183180
</el-button>
184-
<el-button @click="closePropover('copy', copyFormRef)"> 取消 </el-button>
181+
<el-button @click="closePopover('copy', copyFormRef)"> 取消 </el-button>
185182
</el-form-item>
186183
</el-form>
187184
</div>
@@ -233,7 +230,7 @@
233230
<el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
234231
{{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
235232
</el-button>
236-
<el-button @click="closePropover('transfer', transferFormRef)"> 取消 </el-button>
233+
<el-button @click="closePopover('transfer', transferFormRef)"> 取消 </el-button>
237234
</el-form-item>
238235
</el-form>
239236
</div>
@@ -285,7 +282,7 @@
285282
<el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
286283
{{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
287284
</el-button>
288-
<el-button @click="closePropover('delegate', delegateFormRef)"> 取消 </el-button>
285+
<el-button @click="closePopover('delegate', delegateFormRef)"> 取消 </el-button>
289286
</el-form-item>
290287
</el-form>
291288
</div>
@@ -340,7 +337,7 @@
340337
<el-button :disabled="formLoading" type="primary" @click="handlerAddSign('after')">
341338
向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
342339
</el-button>
343-
<el-button @click="closePropover('addSign', addSignFormRef)"> 取消 </el-button>
340+
<el-button @click="closePopover('addSign', addSignFormRef)"> 取消 </el-button>
344341
</el-form-item>
345342
</el-form>
346343
</div>
@@ -391,7 +388,7 @@
391388
<el-button :disabled="formLoading" type="primary" @click="handlerDeleteSign()">
392389
减签
393390
</el-button>
394-
<el-button @click="closePropover('deleteSign', deleteSignFormRef)"> 取消 </el-button>
391+
<el-button @click="closePopover('deleteSign', deleteSignFormRef)"> 取消 </el-button>
395392
</el-form-item>
396393
</el-form>
397394
</div>
@@ -443,7 +440,7 @@
443440
<el-button :disabled="formLoading" type="primary" @click="handleReturn()">
444441
{{ getButtonDisplayName(OperationButtonType.RETURN) }}
445442
</el-button>
446-
<el-button @click="closePropover('return', returnFormRef)"> 取消 </el-button>
443+
<el-button @click="closePopover('return', returnFormRef)"> 取消 </el-button>
447444
</el-form-item>
448445
</el-form>
449446
</div>
@@ -487,7 +484,7 @@
487484
<el-button :disabled="formLoading" type="primary" @click="handleCancel()">
488485
确认
489486
</el-button>
490-
<el-button @click="closePropover('cancel', cancelFormRef)"> 取消 </el-button>
487+
<el-button @click="closePopover('cancel', cancelFormRef)"> 取消 </el-button>
491488
</el-form-item>
492489
</el-form>
493490
</div>
@@ -562,14 +559,14 @@ const runningTask = ref<any>() // 运行中的任务
562559
const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
563560
const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
564561
const nodeTypeName = ref('审批') // 节点类型名称
565-
const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
566-
const dialogVisibleSelectApproveUser = ref(false) // 是否显示节点审批人选择框
567562
568563
// 审批通过意见表单
569564
const reasonRequire = ref()
570565
const approveFormRef = ref<FormInstance>()
571566
const signRef = ref()
572567
const approveSignFormRef = ref()
568+
const nextAssigneesVisible = ref(false) // 是否显示下一个节点的审批人
569+
const nextAssigneesActivityNode = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 下一个审批节点信息
573570
const approveReasonForm = reactive({
574571
reason: '',
575572
signPicUrl: '',
@@ -584,6 +581,7 @@ const approveReasonRule = computed(() => {
584581
nextAssignees: [{ required: true, message: '审批人不能为空', trigger: 'blur' }]
585582
}
586583
})
584+
587585
// 拒绝表单
588586
const rejectFormRef = ref<FormInstance>()
589587
const rejectReasonForm = reactive({
@@ -681,11 +679,6 @@ watch(
681679
}
682680
)
683681
684-
/** 选择下一个节点的审批人 */
685-
const selectUserConfirm = (id: string, userList: any[]) => {
686-
approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id)
687-
}
688-
689682
/** 弹出气泡卡 */
690683
const openPopover = async (type: string) => {
691684
if (type === 'approve') {
@@ -695,7 +688,7 @@ const openPopover = async (type: string) => {
695688
message.warning('表单校验不通过，请先完善表单!!')
696689
return
697690
}
698-
initNextTaskSelectAssigneeFormField()
691+
initNextAssigneesFormField()
699692
}
700693
if (type === 'return') {
701694
// 获取退回节点
@@ -713,41 +706,49 @@ const openPopover = async (type: string) => {
713706
}
714707
715708
/** 关闭气泡卡 */
716-
const closePropover = (type: string, formRef: FormInstance | undefined) => {
709+
const closePopover = (type: string, formRef: FormInstance | undefined) => {
717710
if (formRef) {
718711
formRef.resetFields()
719712
}
720713
popOverVisible.value[type] = false
721-
dialogVisibleSelectApproveUser.value = false
714+
nextAssigneesVisible.value = false
722715
}
723716
724-
/** // 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
725-
const initNextTaskSelectAssigneeFormField = async () => {
717+
/** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
718+
const initNextAssigneesFormField = async () => {
726719
// 获取修改的流程变量, 暂时只支持流程表单
727720
const variables = getUpdatedProcessInstanceVariables()
728-
const param = {
721+
const data = await ProcessInstanceApi.getApprovalDetail({
729722
processInstanceId: props.processInstance.id,
730723
processVariablesStr: JSON.stringify(variables)
731-
}
732-
const res = await ProcessInstanceApi.getApprovalDetail(param)
733-
//当前待审批节点id
734-
const activityId = res.todoTask?.taskDefinitionKey
735-
if (res.activityNodes && res.activityNodes.length > 0) {
724+
})
725+
726+
const activityId = data.todoTask?.taskDefinitionKey
727+
if (data.activityNodes && data.activityNodes.length > 0) {
736728
// 找到当前节点的索引
737-
const currentNodeIndex = res.activityNodes.findIndex((node) => node.id === activityId)
738-
const nextNode = res.activityNodes[currentNodeIndex + 1]
729+
const currentNodeIndex = data.activityNodes.findIndex((node: any) => node.id === activityId)
730+
const nextNode = data.activityNodes[currentNodeIndex + 1]
731+
// 情况一：发起人选择审批人：此时一般是因为条件发生变化，需要当前审批人补充选择
739732
if (
740733
nextNode.candidateStrategy === CandidateStrategy.START_USER_SELECT &&
741734
!nextNode.tasks &&
742735
nextNode.candidateUsers?.length === 0
743736
) {
744737
// 自选审批人，则弹出选择审批人弹窗
745-
activityNodes.value = [nextNode]
746-
dialogVisibleSelectApproveUser.value = true
738+
// TODO @小北：需要考虑下，这里的 nextNode 可能是多个节点，需要怎么处理；类似你在后端的处理哈
739+
// TODO @小北：有点纠结，是不是写个预测下一个节点的接口，更合适？
740+
nextAssigneesActivityNode.value = [nextNode]
741+
nextAssigneesVisible.value = true
747742
}
743+
// TODO @小北：情况二：审批人选择的情况
748744
}
749745
}
750746
747+
/** 选择下一个节点的审批人 */
748+
const selectNextAssigneesConfirm = (id: string, userList: any[]) => {
749+
approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id)
750+
}
751+
751752
/** 处理审批通过和不通过的操作 */
752753
const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) => {
753754
formLoading.value = true
@@ -764,10 +765,7 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
764765
765766
if (pass) {
766767
// 如果需要自选审批人，则校验自选审批人
767-
if (
768-
dialogVisibleSelectApproveUser.value &&
769-
Object.keys(approveReasonForm.nextAssignees).length === 0
770-
) {
768+
if (nextAssigneesVisible.value && Object.keys(approveReasonForm.nextAssignees).length === 0) {
771769
message.warning('下一个节点的审批人不能为空!')
772770
return
773771
}
@@ -778,7 +776,7 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
778776
reason: approveReasonForm.reason,
779777
variables, // 审批通过, 把修改的字段值赋于流程实例变量
780778
nextAssignees: approveReasonForm.nextAssignees // 下个自选节点选择的审批人信息
781-
}
779+
} as any
782780
// 签名
783781
if (runningTask.value.signEnable) {
784782
data.signPicUrl = approveReasonForm.signPicUrl
@@ -793,7 +791,7 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
793791
}
794792
await TaskApi.approveTask(data)
795793
popOverVisible.value.approve = false
796-
dialogVisibleSelectApproveUser.value = false
794+
nextAssigneesVisible.value = false
797795
message.success('审批通过成功')
798796
} else {
799797
// 审批不通过数据

‎src/views/bpm/processInstance/detail/index.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,9 @@ const writableFields: Array<string> = [] // 表单可以编辑的字段
178178
179179
/** 获得详情 */
180180
const getDetail = () => {
181+
// 获得审批详情
181182
getApprovalDetail()
183+
// 获得流程模型视图
182184
getProcessModelView()
183185
}
184186

0 commit comments

Comments
 (0)