仿钉钉流程设计- 表单字段权限设置

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

@@ -200,7 +200,11 @@ const handleAudit = async (task, pass) => {
   // 1.2 校验表单
   const elForm = unref(auditFormRef)
   if (!elForm) return
-  const valid = await elForm.validate()
+  let valid = await elForm.validate()
+  if (!valid) return
+  // 校验申请表单
+  if (!fApi.value) return
+  valid = await fApi.value.validate()
   if (!valid) return
 
   // 2.1 提交审批
@@ -216,6 +220,9 @@ const handleAudit = async (task, pass) => {
       await formCreateApi.validate()
       data.variables = approveForms.value[index].value
     }
+    // 获取表单可编辑字段的值
+    data.variables = getWritableValueOfForm(task.fieldsPermission)
+
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
   } else {
@@ -251,11 +258,11 @@ const handleSign = async (task: any) => {
 }
 
 /** 获得详情 */
-const getDetail = () => {
-  // 1. 获得流程实例相关
+const getDetail = async () => {
+  // 1. 获得流程任务列表（审批记录）。 需要先获取任务，表单的权限设置需要根据任务来设置
+  await getTaskList()
+  // 2. 获得流程实例相关
   getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
-  getTaskList()
 }
 
 /** 加载流程实例 */
@@ -283,6 +290,15 @@ const getProcessInstance = async () => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
         fApi.value?.disabled(true)
+        // 设置表单权限。后续需要改造成。只处理一个运行中的任务
+        if (runningTasks.value.length > 0) {
+          const task = runningTasks.value.at(0)
+          if (task.fieldsPermission) {
+            Object.keys(task.fieldsPermission).forEach((item) => {
+              setFieldPermission(item, task.fieldsPermission[item])
+            })
+          }
+        }
       })
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
@@ -353,6 +369,7 @@ const loadRunningTask = (tasks) => {
     if (!task.assigneeUser || task.assigneeUser.id !== userId) {
       return
     }
+
     // 2.3 添加到处理任务
     runningTasks.value.push({ ...task })
     auditForms.value.push({
@@ -371,6 +388,35 @@ const loadRunningTask = (tasks) => {
   })
 }
 
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === '1') {
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === '2') {
+    fApi.value?.disabled(false, field)
+  }
+  if (permission === '3') {
+    fApi.value?.hidden(true, field)
+  }
+}
+/**
+ * 获取可以编辑字段的值
+ */
+const getWritableValueOfForm = (fieldsPermission: Object) => {
+  const fieldsValue = {}
+  if (fieldsPermission && fApi.value) {
+    Object.keys(fieldsPermission).forEach((item) => {
+      if (fieldsPermission[item] === '2') {
+        fieldsValue[item] = fApi.value.getValue(item)
+      }
+    })
+  }
+  return fieldsValue
+}
+
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {