Skip to content

Commit eb7e939

Browse files
cooling-jasoncooling-jason
committed
仿钉钉流程设计器- 新增审批类型
1 parent 996fe33 commit eb7e939

File tree

6 files changed

+124
-61
lines changed

6 files changed

+124
-61
lines changed

‎src/components/SimpleProcessDesignerV2/src/consts.ts

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ export interface SimpleFlowNode {
6262
childNode?: SimpleFlowNode
6363
// 条件节点
6464
conditionNodes?: SimpleFlowNode[]
65+
// 审批类型
66+
approveType?: ApproveType
6567
// 候选人策略
6668
candidateStrategy?: number
6769
// 候选人参数
@@ -249,7 +251,23 @@ export enum AssignStartUserHandlerType {
249251
/**
250252
* 转交给部门负责人审批
251253
*/
252-
ASSIGN_DEPT_LEADER
254+
ASSIGN_DEPT_LEADER = 3
255+
}
256+
257+
// 用户任务的审批类型。 【参考飞书】
258+
export enum ApproveType {
259+
/**
260+
* 人工审批
261+
*/
262+
USER = 1,
263+
/**
264+
* 自动通过
265+
*/
266+
AUTO_APPROVE = 2,
267+
/**
268+
* 自动拒绝
269+
*/
270+
AUTO_REJECT = 3
253271
}
254272

255273
// 时间单位枚举
@@ -285,13 +303,13 @@ export enum ConditionConfigType {
285303
* 操作按钮权限结构定义
286304
*/
287305
export type ButtonSetting = {
288-
id: OpsButtonType
306+
id: OperationButtonType
289307
displayName: string
290308
enable: boolean
291309
}
292310

293-
// 操作按钮类型枚举 (用于审批节点) // TODO @jason：建议不缩写哈
294-
export enum OpsButtonType {
311+
// 操作按钮类型枚举 (用于审批节点)
312+
export enum OperationButtonType {
295313
/**
296314
* 通过
297315
*/
@@ -371,6 +389,12 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
371389
{ label: '用户组', value: CandidateStrategy.USER_GROUP },
372390
{ label: '流程表达式', value: CandidateStrategy.EXPRESSION }
373391
]
392+
// 审批节点 的审批类型
393+
export const APPROVE_TYPE: DictDataVO[] = [
394+
{ label: '人工审批', value: ApproveType.USER },
395+
{ label: '自动通过', value: ApproveType.AUTO_APPROVE },
396+
{ label: '自动拒绝', value: ApproveType.AUTO_REJECT }
397+
]
374398

375399
export const APPROVE_METHODS: DictDataVO[] = [
376400
{ label: '随机挑选一人审批', value: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE },
@@ -442,21 +466,21 @@ export const COMPARISON_OPERATORS: DictDataVO = [
442466
]
443467
// 审批操作按钮名称
444468
export const OPERATION_BUTTON_NAME = new Map<number, string>()
445-
OPERATION_BUTTON_NAME.set(OpsButtonType.APPROVE, '通过')
446-
OPERATION_BUTTON_NAME.set(OpsButtonType.REJECT, '拒绝')
447-
OPERATION_BUTTON_NAME.set(OpsButtonType.TRANSFER, '转办')
448-
OPERATION_BUTTON_NAME.set(OpsButtonType.DELEGATE, '委派')
449-
OPERATION_BUTTON_NAME.set(OpsButtonType.ADD_SIGN, '加签')
450-
OPERATION_BUTTON_NAME.set(OpsButtonType.RETURN, '回退')
469+
OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过')
470+
OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝')
471+
OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
472+
OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
473+
OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
474+
OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
451475

452476
// 默认的按钮权限设置
453477
export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
454-
{ id: OpsButtonType.APPROVE, displayName: '通过', enable: true },
455-
{ id: OpsButtonType.REJECT, displayName: '拒绝', enable: true },
456-
{ id: OpsButtonType.TRANSFER, displayName: '转办', enable: false },
457-
{ id: OpsButtonType.DELEGATE, displayName: '委派', enable: false },
458-
{ id: OpsButtonType.ADD_SIGN, displayName: '加签', enable: false },
459-
{ id: OpsButtonType.RETURN, displayName: '回退', enable: false }
478+
{ id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
479+
{ id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
480+
{ id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
481+
{ id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
482+
{ id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
483+
{ id: OperationButtonType.RETURN, displayName: '回退', enable: false }
460484
]
461485

462486
export const MULTI_LEVEL_DEPT: DictDataVO = [

‎src/components/SimpleProcessDesignerV2/src/node.ts

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -293,9 +293,9 @@ export function useNodeForm(nodeType: NodeType) {
293293
break
294294
// 指定连续多级部门的负责人
295295
case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
296-
// 候选人参数格式 ,分隔。 被分隔的最后一个为部门层级
296+
// 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
297297
const deptIds = configForm.value.deptIds!.join(',')
298-
candidateParam = deptIds.concat(',' + configForm.value.deptLevel + '')
298+
candidateParam = deptIds.concat('|' + configForm.value.deptLevel + '')
299299
break
300300
}
301301
default:
@@ -341,13 +341,10 @@ export function useNodeForm(nodeType: NodeType) {
341341
break
342342
// 指定连续多级部门的负责人
343343
case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
344-
// 候选人参数格式 ,分隔。 被分隔的最后一个为部门层级
345-
const paramArray = candidateParam.split(',')
346-
configForm.value.deptIds = []
347-
for (let i = 0; i < paramArray.length - 1; i++) {
348-
configForm.value.deptIds.push(+paramArray[i])
349-
}
350-
configForm.value.deptLevel = +paramArray[paramArray.length - 1]
344+
// 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
345+
const paramArray = candidateParam.split('|')
346+
configForm.value.deptIds = paramArray[0].split(',').map((item) => +item)
347+
configForm.value.deptLevel = +paramArray[1]
351348
break
352349
}
353350
default:

‎src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,6 @@
181181
</template>
182182
<script setup lang="ts">
183183
import { SimpleFlowNode, CandidateStrategy, NodeType, CANDIDATE_STRATEGY } from '../consts'
184-
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
185184
import {
186185
useWatchNode,
187186
useDrawer,
@@ -261,7 +260,7 @@ const saveConfig = async () => {
261260
const showText = getShowText()
262261
if (!showText) return false
263262
currentNode.value.name = nodeName.value!
264-
handleCandidateParam()
263+
currentNode.value.candidateParam = handleCandidateParam()
265264
currentNode.value.candidateStrategy = configForm.value.candidateStrategy
266265
currentNode.value.showText = showText
267266
currentNode.value.fieldsPermission = fieldsPermissionConfig.value

‎src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,20 @@
2424
<div class="divide-line"></div>
2525
</div>
2626
</template>
27-
<el-tabs type="border-card" v-model="activeTabName">
27+
<div class="flex flex-items-center mb-3">
28+
<span class="font-size-4 mr-3">审批类型 :</span>
29+
<el-radio-group v-model="approveType">
30+
<el-radio
31+
v-for="(item, index) in APPROVE_TYPE"
32+
:key="index"
33+
:value="item.value"
34+
:label="item.value"
35+
>
36+
{{ item.label }}
37+
</el-radio>
38+
</el-radio-group>
39+
</div>
40+
<el-tabs type="border-card" v-model="activeTabName" v-if="approveType === ApproveType.USER">
2841
<el-tab-pane label="审批人" name="user">
2942
<div>
3043
<el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
@@ -58,7 +71,6 @@
5871
/>
5972
</el-select>
6073
</el-form-item>
61-
<!-- TODO @jason：指定部门的选择，不用联动父子。例如说：可能就是想某个比较高级别的部门审批。 -->
6274
<el-form-item
6375
v-if="
6476
configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
@@ -77,7 +89,7 @@
7789
empty-text="加载中，请稍后"
7890
multiple
7991
node-key="id"
80-
check-strictly
92+
:check-strictly="true"
8193
style="width: 100%"
8294
show-checkbox
8395
/>
@@ -404,6 +416,8 @@
404416
<script setup lang="ts">
405417
import {
406418
SimpleFlowNode,
419+
APPROVE_TYPE,
420+
ApproveType,
407421
APPROVE_METHODS,
408422
CandidateStrategy,
409423
NodeType,
@@ -434,7 +448,7 @@ import {
434448
} from '../node'
435449
import { defaultProps } from '@/utils/tree'
436450
import { cloneDeep } from 'lodash-es'
437-
import { convertTimeUnit } from '../utils'
451+
import { convertTimeUnit, getApproveTypeText } from '../utils'
438452
defineOptions({
439453
name: 'UserTaskNodeConfig'
440454
})
@@ -469,7 +483,7 @@ const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFie
469483
// 操作按钮设置
470484
const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
471485
useButtonsSetting()
472-
486+
const approveType = ref(ApproveType.USER)
473487
// 审批人表单设置
474488
const formRef = ref() // 表单 Ref
475489
// 表单校验规则
@@ -563,12 +577,23 @@ const {
563577
// 保存配置
564578
const saveConfig = async () => {
565579
activeTabName.value = 'user'
580+
// 设置审批节点名称
581+
currentNode.value.name = nodeName.value!
582+
// 设置审批类型
583+
currentNode.value.approveType = approveType.value
584+
// 如果不是人工审批。返回
585+
if (approveType.value !== ApproveType.USER) {
586+
currentNode.value.showText = getApproveTypeText(approveType.value)
587+
settingVisible.value = false
588+
return true
589+
}
590+
566591
if (!formRef) return false
567592
const valid = await formRef.value.validate()
568593
if (!valid) return false
569594
const showText = getShowText()
570595
if (!showText) return false
571-
currentNode.value.name = nodeName.value!
596+
572597
currentNode.value.candidateStrategy = configForm.value.candidateStrategy
573598
// 处理 candidateParam 参数
574599
currentNode.value.candidateParam = handleCandidateParam()
@@ -612,7 +637,14 @@ const saveConfig = async () => {
612637
// 显示审批节点配置， 由父组件传过来
613638
const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
614639
nodeName.value = node.name
615-
//1.1 审批人设置
640+
// 1 审批类型
641+
approveType.value = node.approveType ? node.approveType : ApproveType.USER
642+
// 如果审批类型不是人工审批返回
643+
if (approveType.value !== ApproveType.USER) {
644+
return
645+
}
646+
647+
//2.1 审批人设置
616648
configForm.value.candidateStrategy = node.candidateStrategy!
617649
// 解析候选人参数
618650
parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
@@ -621,18 +653,18 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
621653
} else {
622654
notAllowedMultiApprovers.value = false
623655
}
624-
// 1.2 设置审批方式
656+
// 2.2 设置审批方式
625657
configForm.value.approveMethod = node.approveMethod!
626658
if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
627659
configForm.value.approveRatio = node.approveRatio!
628660
}
629-
// 1.3 设置审批拒绝处理
661+
// 2.3 设置审批拒绝处理
630662
configForm.value.rejectHandlerType = node.rejectHandler!.type
631663
configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
632664
const matchNodeList = []
633665
emits('find:returnTaskNodes', matchNodeList)
634666
returnTaskList.value = matchNodeList
635-
// 1.4 设置审批超时处理
667+
// 2.4 设置审批超时处理
636668
configForm.value.timeoutHandlerEnable = node.timeoutHandler!.enable
637669
if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
638670
const strTimeDuration = node.timeoutHandler.timeDuration
@@ -643,14 +675,14 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
643675
}
644676
configForm.value.timeoutHandlerType = node.timeoutHandler?.type
645677
configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
646-
// 1.5 设置审批人为空时
678+
// 2.5 设置审批人为空时
647679
configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type
648680
configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds
649-
// 1.6 设置用户任务的审批人与发起人相同时
681+
// 2.6 设置用户任务的审批人与发起人相同时
650682
configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType
651-
// 2. 操作按钮设置
683+
// 3. 操作按钮设置
652684
buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
653-
// 3. 表单字段权限配置
685+
// 4. 表单字段权限配置
654686
getNodeConfigFormFields(node.fieldsPermission)
655687
}
656688

‎src/components/SimpleProcessDesignerV2/src/utils.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { TimeUnitType } from './consts'
1+
import { TimeUnitType, ApproveType, APPROVE_TYPE } from './consts'
22

33
// 获取条件节点默认的名称
44
export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean): string => {
@@ -20,3 +20,14 @@ export const convertTimeUnit = (strTimeUnit: string) => {
2020
}
2121
return TimeUnitType.HOUR
2222
}
23+
24+
export const getApproveTypeText = (approveType: ApproveType): string => {
25+
let approveTypeText = ''
26+
APPROVE_TYPE.forEach((item) => {
27+
if (item.value === approveType) {
28+
approveTypeText = item.label
29+
return
30+
}
31+
})
32+
return approveTypeText
33+
}

0 commit comments

Comments
 (0)