仿钉钉流程设计器- 操作按钮设置

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -81,8 +81,6 @@ const addNode = (type: number) => {
       type: NodeType.USER_TASK_NODE,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       candidateStrategy: CandidateStrategy.USER,
-      // candidateParam: undefined,
-      // fieldsPermission: undefined,
       // 超时处理
       rejectHandler: {
         type: RejectHandlerType.FINISH_PROCESS
@@ -92,20 +90,6 @@ const addNode = (type: number) => {
       },
 
       childNode: props.childNode
-      // 审批节点配置
-      // attributes: {
-      //   approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
-      //   candidateStrategy: CandidateStrategy.USER,
-      //   candidateParam: undefined,
-      //   fieldsPermission: undefined,
-      //    // 超时处理
-      //   timeoutHandler: {
-      //     enable: false
-      //   },
-      //   rejectHandler: {
-      //     type: RejectHandlerType.FINISH_PROCESS
-      //   }
-      // },
     }
     emits('update:childNode', data)
   }
@@ -118,12 +102,6 @@ const addNode = (type: number) => {
       candidateStrategy: CandidateStrategy.USER,
       candidateParam: undefined,
       fieldsPermission: undefined,
-      // 审批节点配置
-      // attributes: {
-      //   candidateStrategy: CandidateStrategy.USER,
-      //   candidateParam: undefined,
-      //   fieldsPermission: undefined
-      // },
       childNode: props.childNode
     }
     emits('update:childNode', data)

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -182,6 +182,8 @@ export type SimpleFlowNode = {
   approveMethod?: ApproveMethodType
   //通过比例
   approveRatio?: number
+  // 审批按钮设置
+  buttonsSetting?: any[]
   // 表单权限
   fieldsPermission?: any[]
   // 审批任务超时处理
@@ -214,6 +216,40 @@ export type ConditionRule = {
   rightSide: string
 }
 
+// 审批操作按钮类型
+export enum OpsButtonType {
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 回退
+   */
+  RETURN = 6
+}
+
+export type ButtonSetting = {
+  id: OpsButtonType
+  displayName: string
+  enable: boolean
+}
+
 export const NODE_DEFAULT_TEXT = new Map<number, string>()
 NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
@@ -281,3 +317,21 @@ export const COMPARISON_OPERATORS: DictDataVO = [
     label: '小于等于'
   }
 ]
+// 审批操作按钮名称
+export const OPERATION_BUTTON_NAME = new Map<number, string>()
+OPERATION_BUTTON_NAME.set(OpsButtonType.APPROVE, '通过')
+OPERATION_BUTTON_NAME.set(OpsButtonType.REJECT, '拒绝')
+OPERATION_BUTTON_NAME.set(OpsButtonType.TRANSFER, '转办')
+OPERATION_BUTTON_NAME.set(OpsButtonType.DELEGATE, '委派')
+OPERATION_BUTTON_NAME.set(OpsButtonType.ADD_SIGN, '加签')
+OPERATION_BUTTON_NAME.set(OpsButtonType.RETURN, '回退')
+
+// 默认的按钮权限设置
+export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OpsButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OpsButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OpsButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OpsButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OpsButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OpsButtonType.RETURN, displayName: '回退', enable: false }
+]

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

@@ -280,6 +280,40 @@
           </el-form>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="操作按钮设置" name="buttons" v-if="formType === 10">
+        <div class="button-setting-pane">
+          <div class="button-setting-desc">操作按钮</div>
+          <div class="button-setting-title">
+            <div class="button-title-label">操作按钮</div>
+            <div class="pl-4 button-title-label">显示名称</div>
+            <div class="button-title-label">启用</div>
+          </div>
+          <div
+            class="button-setting-item"
+            v-for="(item, index) in configForm.buttonsSetting"
+            :key="index"
+          >
+            <div class="button-setting-item-label"> {{ OPERATION_BUTTON_NAME.get(item.id) }} </div>
+            <div class="button-setting-item-label">
+              <input
+                type="text"
+                class="editable-title-input"
+                @blur="btnDisplayNameBlurEvent(index)"
+                v-mountedFocus
+                v-model="item.displayName"
+                :placeholder="item.displayName"
+                v-if="btnDisplayNameEdit[index]"
+              />
+              <el-button v-else text @click="changeBtnDisplayName(index)"
+                >{{ item.displayName }} &nbsp;<Icon icon="ep:edit"
+              /></el-button>
+            </div>
+            <div class="button-setting-item-label">
+              <el-switch v-model="item.enable" />
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
       <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
         <div class="field-setting-pane">
           <div class="field-setting-desc">字段权限</div>
@@ -334,7 +368,9 @@ import {
   TIMEOUT_HANDLER_ACTION_TYPES,
   TIME_UNIT_TYPES,
   REJECT_HANDLER_TYPES,
-  NODE_DEFAULT_NAME
+  NODE_DEFAULT_NAME,
+  DEFAULT_BUTTON_SETTING,
+  OPERATION_BUTTON_NAME
 } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { getDefaultFieldsPermission } from '../utils'
@@ -345,7 +381,6 @@ import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { cloneDeep } from 'lodash-es'
-
 defineOptions({
   name: 'UserTaskNodeConfig'
 })
@@ -385,7 +420,8 @@ const configForm = ref<any>({
   timeoutHandlerAction: 1,
   timeDuration: 6, // 默认 6小时
   maxRemindCount: 1, // 默认 提醒 1次
-  fieldsPermission: []
+  fieldsPermission: [],
+  buttonsSetting: []
 })
 // 表单校验规则
 const formRules = reactive({
@@ -432,6 +468,8 @@ const saveConfig = async () => {
   }
   // 设置表单权限
   currentNode.value.fieldsPermission = configForm.value.fieldsPermission
+  // 设置按钮权限
+  currentNode.value.buttonsSetting = configForm.value.buttonsSetting
 
   currentNode.value.showText = getShowText()
   settingVisible.value = false
@@ -533,6 +571,7 @@ const setCurrentNode = (node: SimpleFlowNode) => {
   currentNode.value = node
   configForm.value.fieldsPermission =
     cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.buttonsSetting = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
   configForm.value.candidateStrategy = node.candidateStrategy
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -614,6 +653,7 @@ const blurEvent = () => {
   currentNode.value.name =
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
+
 const approveMethodChanged = () => {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
@@ -703,6 +743,99 @@ const convertTimeUnit = (strTimeUnit: string) => {
   }
   return TimeUnitType.HOUR
 }
+
+// 操作按钮显示名称可编辑
+const btnDisplayNameEdit = ref<boolean[]>([])
+const changeBtnDisplayName = (index: number) => {
+  btnDisplayNameEdit.value[index] = true
+}
+const btnDisplayNameBlurEvent = (index: number) => {
+  btnDisplayNameEdit.value[index] = false
+  const buttonItem = configForm.value.buttonPermission[index]
+  buttonItem.displayName = buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.button-setting-pane {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+
+  .button-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .button-setting-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    & > :first-child {
+      width: 100px !important;
+      text-align: left !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-title-label {
+      width: 150px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: left;
+    }
+  }
+
+  .button-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    & > :first-child {
+      width: 100px !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-setting-item-label {
+      width: 150px;
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .editable-title-input {
+      height: 24px;
+      max-width: 130px;
+      margin-left: 4px;
+      line-height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+</style>