【代码评审】BPM：表单字段，批量选中

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

@@ -134,7 +134,7 @@
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
-                  :disabled ="!item.required"
+                  :disabled="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -149,7 +149,7 @@
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
-                  :disabled ="!item.required"
+                  :disabled="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -195,12 +195,14 @@
           <div class="field-permit-title">
             <div class="setting-title-label first-title"> 字段名称 </div>
             <div class="other-titles">
-              <span class="setting-title-label">只读
-                              <el-switch v-model="readSwitch" @change="updatePermission('READ')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')">
+                只读
               </span>
-              <span class="setting-title-label">可编辑</span>
-              <span class="setting-title-label">隐藏
-                                <el-switch v-model="noneSwitch" @change="updatePermission('NONE')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')">
+                可编辑
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')">
+                隐藏
               </span>
             </div>
           </div>
@@ -371,23 +373,20 @@ const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
   // 表单字段权限
   getNodeConfigFormFields(node.fieldsPermission)
 }
-const readSwitch = ref(false);
-const noneSwitch = ref(false);
-const updatePermission = (type: string) => {
-  if (type === 'READ') {
-    readSwitch.value = true;
-
-    noneSwitch.value = false;
-  }  else if (type === 'NONE') {
-    readSwitch.value = false;
 
-    noneSwitch.value = true;
-  }
+/** 批量更新权限 */
+// TODO @lesan：要不要 bpmn 也加下？
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
+}
 
-  fieldsPermissionConfig.value.forEach(field => {
-    field.permission = type === 'READ' ? FieldPermissionType.READ : FieldPermissionType.NONE;
-  });
-};
 defineExpose({ openDrawer, showCopyTaskNodeConfig }) // 暴露方法给父组件
 </script>
 

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

@@ -36,7 +36,8 @@
             placement="top"
             :content="getUserNicknames(startUserIds)"
           >
-            {{ getUserNicknames(startUserIds.slice(0,2)) }} 等 {{ startUserIds.length }} 人可发起流程
+            {{ getUserNicknames(startUserIds.slice(0, 2)) }} 等
+            {{ startUserIds.length }} 人可发起流程
           </el-tooltip>
         </el-text>
       </el-tab-pane>
@@ -46,14 +47,14 @@
           <div class="field-permit-title">
             <div class="setting-title-label first-title"> 字段名称 </div>
             <div class="other-titles">
-              <span class="setting-title-label">只读
-                <el-switch v-model="readSwitch" @change="updatePermission('READ')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')">
+                只读
               </span>
-              <span class="setting-title-label">可编辑
-                <el-switch v-model="writeSwitch" @change="updatePermission('WRITE')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')">
+                可编辑
               </span>
-              <span class="setting-title-label">隐藏
-                <el-switch v-model="noneSwitch" @change="updatePermission('NONE')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')">
+                隐藏
               </span>
             </div>
           </div>
@@ -162,32 +163,19 @@ const showStartUserNodeConfig = (node: SimpleFlowNode) => {
   // 表单字段权限
   getNodeConfigFormFields(node.fieldsPermission)
 }
-const readSwitch = ref(false)
-const writeSwitch = ref(false)
-const noneSwitch = ref(false)
-const updatePermission = (type) => {
-  if (type === 'READ') {
-    readSwitch.value = true;
-    writeSwitch.value = false;
-    noneSwitch.value = false;
-  } else if (type === 'WRITE') {
-    readSwitch.value = false;
-    writeSwitch.value = true;
-    noneSwitch.value = false;
-  } else if (type === 'NONE') {
-    readSwitch.value = false;
-    writeSwitch.value = false;
-    noneSwitch.value = true;
-  }
 
-  fieldsPermissionConfig.value.forEach(item => {
-    item.permission = type === 'READ' ? FieldPermissionType.READ :
-      type === 'WRITE' ? FieldPermissionType.WRITE :
-        FieldPermissionType.NONE;
-  });
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
 }
 defineExpose({ openDrawer, showStartUserNodeConfig }) // 暴露方法给父组件
-
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -454,14 +454,14 @@
           <div class="field-permit-title">
             <div class="setting-title-label first-title"> 字段名称 </div>
             <div class="other-titles">
-              <span class="setting-title-label">只读
-                <el-switch v-model="readSwitch" @change="updatePermission('READ')" />
-                </span>
-              <span class="setting-title-label">可编辑
-                <el-switch v-model="writeSwitch" @change="updatePermission('WRITE')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('READ')">
+                只读
               </span>
-              <span class="setting-title-label">隐藏
-                <el-switch v-model="noneSwitch" @change="updatePermission('NONE')" />
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('WRITE')">
+                可编辑
+              </span>
+              <span class="setting-title-label cursor-pointer" @click="updatePermission('NONE')">
+                隐藏
               </span>
             </div>
           </div>
@@ -959,31 +959,18 @@ function useTimeoutHandler() {
     cTimeoutMaxRemindCount
   }
 }
-const readSwitch = ref(false);
-const writeSwitch = ref(false);
-const noneSwitch = ref(false);
 
+/** 批量更新权限 */
 const updatePermission = (type: string) => {
-  if (type === 'READ') {
-    readSwitch.value = true;
-    writeSwitch.value = false;
-    noneSwitch.value = false;
-  } else if (type === 'WRITE') {
-    readSwitch.value = false;
-    writeSwitch.value = true;
-    noneSwitch.value = false;
-  } else if (type === 'NONE') {
-    readSwitch.value = false;
-    writeSwitch.value = false;
-    noneSwitch.value = true;
-  }
-
-  fieldsPermissionConfig.value.forEach(field => {
-    field.permission = type === 'READ' ? FieldPermissionType.READ :
-      type === 'WRITE' ? FieldPermissionType.WRITE :
-        FieldPermissionType.NONE;
-  });
-};
+  fieldsPermissionConfig.value.forEach((field) => {
+    field.permission =
+      type === 'READ'
+        ? FieldPermissionType.READ
+        : type === 'WRITE'
+          ? FieldPermissionType.WRITE
+          : FieldPermissionType.NONE
+  })
+}
 </script>
 
 <style lang="scss" scoped>