From 47f1f13ca24fbeb3a8e283a56177515fab711f7d Mon Sep 17 00:00:00 2001 From: jason <2667446@qq.com> Date: Fri, 22 Nov 2024 08:21:34 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84=E5=AE=A1?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E3=80=91=E5=AE=A1=E6=89=B9=E4=BA=BA=E4=B8=BA?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=94=A8=E6=88=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormCreate/src/utils/index.ts | 43 ++++++++++++++ .../SimpleProcessDesignerV2/src/node.ts | 59 ++++--------------- .../src/nodes-config/CopyTaskNodeConfig.vue | 20 ++++--- .../src/nodes-config/UserTaskNodeConfig.vue | 23 ++++---- 4 files changed, 77 insertions(+), 68 deletions(-) diff --git a/src/components/FormCreate/src/utils/index.ts b/src/components/FormCreate/src/utils/index.ts index 2d4a6fd7..a2b3e67f 100644 --- a/src/components/FormCreate/src/utils/index.ts +++ b/src/components/FormCreate/src/utils/index.ts @@ -16,3 +16,46 @@ export const localeProps = (t, prefix, rules) => { return rule }) } + +/** + * 解析表单组件的 field, title 等字段（递归，如果组件包含子组件） + * + * @param rule 组件的生成规则 https://www.form-create.com/v3/guide/rule + * @param fields 解析后表单组件字段 + * @param parentTitle 如果是子表单，子表单的标题，默认为空 + */ +export const parseFormFields = ( + rule: Record, + fields: Array> = [], + 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) => { + parseFormFields(rule, fields) + }) + } +} diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts index 06612d44..0810c1f5 100644 --- a/src/components/SimpleProcessDesignerV2/src/node.ts +++ b/src/components/SimpleProcessDesignerV2/src/node.ts @@ -17,6 +17,7 @@ import { FieldPermissionType, ProcessVariableEnum } from './consts' +import { parseFormFields } from '@/components/FormCreate/src/utils/index' export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref { const node = ref(props.flowNode) watch( @@ -33,7 +34,7 @@ const parseFormCreateFields = (formFields?: string[]) => { const result: Array> = [] if (formFields) { formFields.forEach((fieldStr: string) => { - parseFields(JSON.parse(fieldStr), result) + parseFormFields(JSON.parse(fieldStr), result) }) } // 固定添加发起人 ID 字段 @@ -46,44 +47,6 @@ const parseFormCreateFields = (formFields?: string[]) => { return result } -// TODO @jason：parse 方法，是不是搞到 formCreate.ts。统一维护管理 -const parseFields = ( - rule: Record, - fields: Array>, - parentTitle: string = '' -) => { - const { type, field, $required, title: tempTitle, children } = rule - if (field && tempTitle) { - let title = tempTitle - if (parentTitle) { - title = `${parentTitle}.${tempTitle}` - } - // TODO @jason：按照微信讨论的，非 $required 显示，但是 disable 不可选择 - 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 表单数据权限配置，用于发起人节点 、审批节点、抄送节点 */ @@ -144,8 +107,8 @@ export type UserTaskFormType = { userGroups?: number[] // 用户组 postIds?: number[] // 岗位 expression?: string // 流程表达式 - userFieldOnForm?: string // 表单内用户字段 - deptFieldOnForm?: string // 表单内部门字段 + formUser?: string // 表单内用户字段 + formDept?: string // 表单内部门字段 approveRatio?: number rejectHandlerType?: RejectHandlerType returnNodeId?: string @@ -168,8 +131,8 @@ export type CopyTaskFormType = { userIds?: number[] // 用户 userGroups?: number[] // 用户组 postIds?: number[] // 岗位 - userFieldOnForm?: string // 表单内用户字段 - deptFieldOnForm?: string // 表单内部门字段 + formUser?: string // 表单内用户字段 + formDept?: string // 表单内部门字段 expression?: string // 流程表达式 } @@ -282,7 +245,7 @@ export function useNodeForm(nodeType: NodeType) { // 表单内用户字段 if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) { const formFieldOptions = parseFormCreateFields(unref(formFields)) - const item = formFieldOptions.find((item) => item.field === configForm.value?.userFieldOnForm) + const item = formFieldOptions.find((item) => item.field === configForm.value?.formUser) showText = `表单用户：${item?.title}` } @@ -338,7 +301,7 @@ export function useNodeForm(nodeType: NodeType) { candidateParam = configForm.value.userGroups!.join(',') break case CandidateStrategy.FORM_USER: - candidateParam = configForm.value.userFieldOnForm! + candidateParam = configForm.value.formUser! break case CandidateStrategy.EXPRESSION: candidateParam = configForm.value.expression! @@ -362,7 +325,7 @@ export function useNodeForm(nodeType: NodeType) { // 表单内部门的负责人 case CandidateStrategy.FORM_DEPT_LEADER: { // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级 - const deptFieldOnForm = configForm.value.deptFieldOnForm! + const deptFieldOnForm = configForm.value.formDept! candidateParam = deptFieldOnForm.concat('|' + configForm.value.deptLevel + '') break } @@ -396,7 +359,7 @@ export function useNodeForm(nodeType: NodeType) { configForm.value.userGroups = candidateParam.split(',').map((item) => +item) break case CandidateStrategy.FORM_USER: - configForm.value.userFieldOnForm = candidateParam + configForm.value.formUser = candidateParam break case CandidateStrategy.EXPRESSION: configForm.value.expression = candidateParam @@ -422,7 +385,7 @@ export function useNodeForm(nodeType: NodeType) { case CandidateStrategy.FORM_DEPT_LEADER: { // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级 const paramArray = candidateParam.split('|') - configForm.value.deptFieldOnForm = paramArray[0] + configForm.value.formDept = paramArray[0] configForm.value.deptLevel = +paramArray[1] break } diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue index eeb51bd4..f83f1850 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue @@ -126,28 +126,30 @@ - + - + @@ -293,11 +295,11 @@ const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFie useFormFieldsPermission(FieldPermissionType.READ) // 表单内用户字段选项, 必须是必填和用户选择器 const userFieldOnFormOptions = computed(() => { - return formFieldOptions.filter((item) => item.required && item.type === 'UserSelect') + return formFieldOptions.filter((item) => item.type === 'UserSelect') }) // 表单内部门字段选项, 必须是必填和部门选择器 const deptFieldOnFormOptions = computed(() => { - return formFieldOptions.filter((item) => item.required && item.type === 'DeptSelect') + return formFieldOptions.filter((item) => item.type === 'DeptSelect') }) // 抄送人表单配置 const formRef = ref() // 表单 Ref @@ -309,8 +311,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' }], + formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }], + formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }], expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }] }) @@ -338,7 +340,7 @@ const changeCandidateStrategy = () => { configForm.value.postIds = [] configForm.value.userGroups = [] configForm.value.deptLevel = 1 - configForm.value.userFieldOnForm = '' + configForm.value.formUser = '' } // 保存配置 const saveConfig = async () => { diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue index ebb41278..a088b6d0 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue @@ -140,28 +140,30 @@ - + - + @@ -517,11 +519,11 @@ const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFie useFormFieldsPermission(FieldPermissionType.READ) // 表单内用户字段选项, 必须是必填和用户选择器 const userFieldOnFormOptions = computed(() => { - return formFieldOptions.filter((item) => item.required && item.type === 'UserSelect') + return formFieldOptions.filter((item) => item.type === 'UserSelect') }) // 表单内部门字段选项, 必须是必填和部门选择器 const deptFieldOnFormOptions = computed(() => { - return formFieldOptions.filter((item) => item.required && item.type === 'DeptSelect') + return formFieldOptions.filter((item) => item.type === 'DeptSelect') }) // 操作按钮设置 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } = @@ -536,8 +538,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' }], + formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }], + formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }], postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }], expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }], approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }], @@ -573,9 +575,8 @@ const changeCandidateStrategy = () => { configForm.value.postIds = [] configForm.value.userGroups = [] configForm.value.deptLevel = 1 - // TODO @jason：是不是 userFieldOnForm => formUser；deptFieldOnForm => formDeptLeader；原因是：想通前缀，好管理点 - configForm.value.userFieldOnForm = '' - configForm.value.deptFieldOnForm = '' + configForm.value.formUser = '' + configForm.value.formDept = '' configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE }