yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/bpm' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm

pull/586/MERGE
YunaiV 2024-11-19 21:06:03 +08:00
parent 6304a8e9b6 2fe28af05d
commit 158708c1b1
5 changed files with 278 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FormCreate/src/components/useApiSelect.tsx
View File

@ -185,7 +185,7 @@ export const useApiSelect = (option: ApiSelectProps) => {
</el-select>
)
}
debugger
// debugger
return (
<el-select
class="w-1/1"

22
src/components/SimpleProcessDesignerV2/src/consts.ts
View File

@ -79,7 +79,7 @@ export interface SimpleFlowNode {
// 审批按钮设置
buttonsSetting?: any[]
// 表单权限
fieldsPermission?: Array<Record<string, string>>
fieldsPermission?: Array<Record<string, any>>
// 审批任务超时处理
timeoutHandler?: TimeoutHandler
// 审批任务拒绝处理
@ -145,6 +145,14 @@ export enum CandidateStrategy {
* 指定用户组
*/
USER_GROUP = 40,
/**
* 表单内用户字段
*/
USER_FIELD_ON_FORM = 50,
/**
* 表单内部门负责人
*/
DEPT_LEADER_ON_FORM = 51,
/**
* 流程表达式
*/
@ -424,6 +432,8 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
{ label: '发起人部门负责人', value: CandidateStrategy.START_USER_DEPT_LEADER },
{ label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
{ label: '用户组', value: CandidateStrategy.USER_GROUP },
{ label: '表单内用户字段', value: CandidateStrategy.USER_FIELD_ON_FORM },
{ label: '表单内部门负责人', value: CandidateStrategy.DEPT_LEADER_ON_FORM },
{ label: '流程表达式', value: CandidateStrategy.EXPRESSION }
]
// 审批节点 的审批类型
@ -548,3 +558,13 @@ export const MULTI_LEVEL_DEPT: DictDataVO = [
{ label: '第 14 级部门', value: 14 },
{ label: '第 15 级部门', value: 15 }
]
/**
* 流程实例的变量枚举
*/
export enum ProcessVariableEnum {
/**
* 发起用户 ID
*/
START_USER_ID = 'PROCESS_START_USER_ID'
}

191
src/components/SimpleProcessDesignerV2/src/node.ts
View File

@ -14,7 +14,8 @@ import {
NODE_DEFAULT_NAME,
AssignStartUserHandlerType,
AssignEmptyHandlerType,
FieldPermissionType
FieldPermissionType,
ProcessVariableEnum
} from './consts'
export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
const node = ref<SimpleFlowNode>(props.flowNode)
@ -27,12 +28,67 @@ export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlo
return node
}
// 解析 formCreate 所有表单字段, 并返回
const parseFormCreateFields = (formFields?: string[]) => {
const result: Array<Record<string, any>> = []
if (formFields) {
formFields.forEach((fieldStr: string) => {
parseFields(JSON.parse(fieldStr), result)
})
}
// 固定添加发起人 ID 字段
result.unshift( {
field: ProcessVariableEnum.START_USER_ID,
title: '发起人',
type: 'UserSelect',
required: true
})
return result
}
const parseFields = (
rule: Record<string, any>,
fields: Array<Record<string, any>>,
parentTitle: string = ''
) => {
const { type, field, $required, title: tempTitle, children } = rule
if (field && tempTitle) {
let title = tempTitle
if (parentTitle) {
title = `${parentTitle}.${tempTitle}`
}
let required = false;
if($required) {
required = true;
}
fields.push({
field,
title,
type,
required
})
// TODO 子表单 需要处理子表单字段
// if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
// // 解析子表单的字段
// rule.props.rule.forEach((item) => {
// parseFields(item, fieldsPermission, title)
// })
// }
}
if (children && Array.isArray(children)) {
children.forEach((rule) => {
parseFields(rule, fields)
})
}
}
/**
* @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
*/
export function useFormFieldsPermission(defaultPermission: FieldPermissionType) {
// 字段权限配置. 需要有 field, title, permissioin 属性
const fieldsPermissionConfig = ref<Array<Record<string, string>>>([])
const fieldsPermissionConfig = ref<Array<Record<string, any>>>([])
const formType = inject<Ref<number>>('formType') // 表单类型
@ -45,49 +101,28 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
}
// 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
const getDefaultFieldsPermission = (formFields?: string[]) => {
const defaultFieldsPermission: Array<Record<string, string>> = []
let defaultFieldsPermission: Array<Record<string, any>> = []
if (formFields) {
formFields.forEach((fieldStr: string) => {
parseFieldsSetDefaultPermission(JSON.parse(fieldStr), defaultFieldsPermission)
})
defaultFieldsPermission = parseFormCreateFields(formFields).map( item => {
return {
field: item.field,
title: item.title,
permission: defaultPermission
}
});
}
return defaultFieldsPermission
}
// 解析字段。赋给默认权限
const parseFieldsSetDefaultPermission = (
rule: Record<string, any>,
fieldsPermission: Array<Record<string, string>>,
parentTitle: string = ''
) => {
const { /**type,*/ field, title: tempTitle, children } = rule
if (field && tempTitle) {
let title = tempTitle
if (parentTitle) {
title = `${parentTitle}.${tempTitle}`
}
fieldsPermission.push({
field,
title,
permission: defaultPermission
})
// TODO 子表单 需要处理子表单字段
// if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
// // 解析子表单的字段
// rule.props.rule.forEach((item) => {
// parseFieldsSetDefaultPermission(item, fieldsPermission, title)
// })
// }
}
if (children && Array.isArray(children)) {
children.forEach((rule) => {
parseFieldsSetDefaultPermission(rule, fieldsPermission)
})
}
}
// 获取表单的所有字段，作为下拉框选项
const formFieldOptions = parseFormCreateFields(unref(formFields))
return {
formType,
fieldsPermissionConfig,
formFieldOptions,
getNodeConfigFormFields
}
}
@ -95,50 +130,8 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
* @description 获取表单的字段
*/
export function useFormFields() {
// 解析后的表单字段
const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
const parseFormFields = () => {
const parsedFormFields: Array<Record<string, string>> = []
if (formFields) {
formFields.value.forEach((fieldStr: string) => {
parseField(JSON.parse(fieldStr), parsedFormFields)
})
}
return parsedFormFields
}
// 解析字段。
const parseField = (
rule: Record<string, any>,
parsedFormFields: Array<Record<string, string>>,
parentTitle: string = ''
) => {
const { field, title: tempTitle, children, type } = rule
if (field && tempTitle) {
let title = tempTitle
if (parentTitle) {
title = `${parentTitle}.${tempTitle}`
}
parsedFormFields.push({
field,
title,
type
})
// TODO 子表单 需要处理子表单字段
// if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
// // 解析子表单的字段
// rule.props.rule.forEach((item) => {
// parseFieldsSetDefaultPermission(item, fieldsPermission, title)
// })
// }
}
if (children && Array.isArray(children)) {
children.forEach((rule) => {
parseField(rule, parsedFormFields)
})
}
}
return parseFormFields()
return parseFormCreateFields(unref(formFields))
}
export type UserTaskFormType = {
@ -152,6 +145,8 @@ export type UserTaskFormType = {
userGroups?: number[] // 用户组
postIds?: number[] // 岗位
expression?: string // 流程表达式
userFieldOnForm?: string // 表单内用户字段
deptFieldOnForm?: string // 表单内部门字段
approveRatio?: number
rejectHandlerType?: RejectHandlerType
returnNodeId?: string
@ -174,6 +169,8 @@ export type CopyTaskFormType = {
userIds?: number[] // 用户
userGroups?: number[] // 用户组
postIds?: number[] // 岗位
userFieldOnForm?: string // 表单内用户字段
deptFieldOnForm?: string // 表单内部门字段
expression?: string // 流程表达式
}
@ -187,6 +184,7 @@ export function useNodeForm(nodeType: NodeType) {
const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
const deptTreeOptions = inject('deptTree') // 部门树
const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
const configForm = ref<UserTaskFormType | CopyTaskFormType>()
if (nodeType === NodeType.USER_TASK_NODE) {
configForm.value = {
@ -282,6 +280,18 @@ export function useNodeForm(nodeType: NodeType) {
}
}
// 表单内用户字段
if (configForm.value?.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM) {
const formFieldOptions = parseFormCreateFields(unref(formFields))
const item = formFieldOptions.find((item) => item.field === configForm.value?.userFieldOnForm)
showText = `表单用户：${item?.title}`
}
// 表单内部门负责人
if (configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM) {
showText = `表单内部门负责人`
}
// 发起人自选
if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
showText = `发起人自选`
@ -328,6 +338,9 @@ export function useNodeForm(nodeType: NodeType) {
case CandidateStrategy.USER_GROUP:
candidateParam = configForm.value.userGroups!.join(',')
break
case CandidateStrategy.USER_FIELD_ON_FORM:
candidateParam = configForm.value.userFieldOnForm!
break
case CandidateStrategy.EXPRESSION:
candidateParam = configForm.value.expression!
break
@ -347,6 +360,13 @@ export function useNodeForm(nodeType: NodeType) {
candidateParam = deptIds.concat('|' + configForm.value.deptLevel + '')
break
}
// 表单内部门的负责人
case CandidateStrategy.DEPT_LEADER_ON_FORM: {
// 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
const deptFieldOnForm = configForm.value.deptFieldOnForm!
candidateParam = deptFieldOnForm.concat('|' + configForm.value.deptLevel + '')
break
}
default:
break
}
@ -376,6 +396,9 @@ export function useNodeForm(nodeType: NodeType) {
case CandidateStrategy.USER_GROUP:
configForm.value.userGroups = candidateParam.split(',').map((item) => +item)
break
case CandidateStrategy.USER_FIELD_ON_FORM:
configForm.value.userFieldOnForm = candidateParam
break
case CandidateStrategy.EXPRESSION:
configForm.value.expression = candidateParam
break
@ -396,6 +419,14 @@ export function useNodeForm(nodeType: NodeType) {
configForm.value.deptLevel = +paramArray[1]
break
}
// 表单内的部门负责人
case CandidateStrategy.DEPT_LEADER_ON_FORM: {
// 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
const paramArray = candidateParam.split('|')
configForm.value.deptFieldOnForm = paramArray[0]
configForm.value.deptLevel = +paramArray[1]
break
}
default:
break
}

81
src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
View File

@ -60,7 +60,8 @@
<el-form-item
v-if="
configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
"
label="指定部门"
prop="deptIds"
@ -122,7 +123,54 @@
/>
</el-select>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
label="表单内用户字段"
prop="userFieldOnForm"
>
<el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
<el-option
v-for="(item,idx) in userFieldOnFormOptions"
:key="idx"
:label="item.title"
:value="item.field"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM"
label="表单内部门字段"
prop="deptFieldOnForm"
>
<el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
<el-option
v-for="(item,idx) in deptFieldOnFormOptions"
:key="idx"
:label="item.title"
:value="item.field"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="
configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM
"
:label="deptLevelLabel!"
prop="deptLevel"
span="24"
>
<el-select v-model="configForm.deptLevel" clearable>
<el-option
v-for="(item, index) in MULTI_LEVEL_DEPT"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
label="流程表达式"
@ -201,7 +249,8 @@ import {
CandidateStrategy,
NodeType,
CANDIDATE_STRATEGY,
FieldPermissionType
FieldPermissionType,
MULTI_LEVEL_DEPT
} from '../consts'
import {
useWatchNode,
@ -221,6 +270,15 @@ const props = defineProps({
required: true
}
})
const deptLevelLabel = computed(() => {
let label = '部门负责人来源'
if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
label = label + '(指定部门向上)'
} else {
label = label + '(发起人部门向上)'
}
return label
})
// 抽屉配置
const { settingVisible, closeDrawer, openDrawer } = useDrawer()
// 当前节点
@ -230,9 +288,21 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_
// 激活的 Tab 标签页
const activeTabName = ref('user')
// 表单字段权限配置
const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
FieldPermissionType.READ
)
// 表单内用户字段选项, 必须是必填和用户选择器
const userFieldOnFormOptions = computed(() => {
return formFieldOptions.filter(
(item) => item.required && item.type === 'UserSelect'
)
})
// 表单内部门字段选项, 必须是必填和部门选择器
const deptFieldOnFormOptions = computed(() => {
return formFieldOptions.filter(
(item) => item.required && item.type === 'DeptSelect'
)
})
// 抄送人表单配置
const formRef = ref() // 表单 Ref
// 表单校验规则
@ -243,6 +313,8 @@ const formRules = reactive({
deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
deptFieldOnForm: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
})
@ -272,6 +344,7 @@ const changeCandidateStrategy = () => {
configForm.value.postIds = []
configForm.value.userGroups = []
configForm.value.deptLevel = 1
configForm.value.userFieldOnForm = ''
}
// 保存配置
const saveConfig = async () => {

88
src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
View File

@ -56,7 +56,6 @@
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
label="指定角色"
@ -94,25 +93,6 @@
show-checkbox
/>
</el-form-item>
<el-form-item
v-if="
configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
"
:label="deptLevelLabel!"
prop="deptLevel"
span="24"
>
<el-select v-model="configForm.deptLevel" clearable>
<el-option
v-for="(item, index) in MULTI_LEVEL_DEPT"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy == CandidateStrategy.POST"
label="指定岗位"
@ -157,6 +137,54 @@
/>
</el-select>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
label="表单内用户字段"
prop="userFieldOnForm"
>
<el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
<el-option
v-for="(item,idx) in userFieldOnFormOptions"
:key="idx"
:label="item.title"
:value="item.field"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="configForm.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM"
label="表单内部门字段"
prop="deptFieldOnForm"
>
<el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
<el-option
v-for="(item,idx) in deptFieldOnFormOptions"
:key="idx"
:label="item.title"
:value="item.field"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="
configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM
"
:label="deptLevelLabel!"
prop="deptLevel"
span="24"
>
<el-select v-model="configForm.deptLevel" clearable>
<el-option
v-for="(item, index) in MULTI_LEVEL_DEPT"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- TODO @jason：后续要支持选择已经存好的表达式 -->
<el-form-item
v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
@ -468,6 +496,8 @@ const deptLevelLabel = computed(() => {
let label = '部门负责人来源'
if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
label = label + '(指定部门向上)'
} else if (configForm.value.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM) {
label = label + '(表单内部门向上)'
} else {
label = label + '(发起人部门向上)'
}
@ -482,9 +512,21 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_
// 激活的 Tab 标签页
const activeTabName = ref('user')
// 表单字段权限设置
const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
FieldPermissionType.READ
)
// 表单内用户字段选项, 必须是必填和用户选择器
const userFieldOnFormOptions = computed(() => {
return formFieldOptions.filter(
(item) => item.required && item.type === 'UserSelect'
)
})
// 表单内部门字段选项, 必须是必填和部门选择器
const deptFieldOnFormOptions = computed(() => {
return formFieldOptions.filter(
(item) => item.required && item.type === 'DeptSelect'
)
})
// 操作按钮设置
const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
useButtonsSetting()
@ -498,6 +540,8 @@ const formRules = reactive({
roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
deptFieldOnForm: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
@ -533,6 +577,8 @@ const changeCandidateStrategy = () => {
configForm.value.postIds = []
configForm.value.userGroups = []
configForm.value.deptLevel = 1
configForm.value.userFieldOnForm = ''
configForm.value.deptFieldOnForm = ''
configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
}