【代码评审修改】审批人为表单用户

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<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) => {
+      parseFormFields(rule, fields)
+    })
+  }
+}

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<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
   watch(
@@ -33,7 +34,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
   const result: Array<Record<string, any>> = []
   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<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}`
-    }
-    // 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
       }

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

@@ -126,28 +126,30 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
               label="表单内用户字段"
-              prop="userFieldOnForm"
+              prop="formUser"
             >
-              <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formUser" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
               label="表单内部门字段"
-              prop="deptFieldOnForm"
+              prop="formDept"
             >
-              <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formDept" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -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 () => {

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

@@ -140,28 +140,30 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
               label="表单内用户字段"
-              prop="userFieldOnForm"
+              prop="formUser"
             >
-              <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formUser" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
               label="表单内部门字段"
-              prop="deptFieldOnForm"
+              prop="formDept"
             >
-              <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formDept" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -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
 }