!651 Simple设计器-监听器

Merge pull request !651 from Lesan/feature/bpm-监听器

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -120,7 +120,10 @@ const addNode = (type: number) => {
         type: AssignEmptyHandlerType.APPROVE
       },
       assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
-      childNode: props.childNode
+      childNode: props.childNode,
+      createTaskListener: {
+        enable: false
+      }
     }
     emits('update:childNode', data)
   }

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -93,6 +93,8 @@ export interface SimpleFlowNode {
   assignEmptyHandler?: AssignEmptyHandler
   // 审批节点的审批人与发起人相同时，对应的处理类型
   assignStartUserHandlerType?: number
+  // 创建任务监听器
+  createTaskListener: ListenerHandler
   // 条件类型
   conditionType?: ConditionType
   // 条件表达式
@@ -222,6 +224,31 @@ export type AssignEmptyHandler = {
   userIds?: number[]
 }
 
+/**
+ * 监听器的结构定义
+ */
+export type ListenerHandler = {
+  enable: boolean
+  path: string
+  header: ListenerMap[]
+  body: ListenerMap[]
+}
+export type ListenerMap = {
+  key: string
+  type: number
+  value: string
+}
+export const LISTENER_MAP_TYPES = [
+  {
+    value: 1,
+    label: '固定值'
+  },
+  {
+    value: 2,
+    label: '表单'
+  }
+]
+
 // 审批拒绝类型枚举
 export enum RejectHandlerType {
   /**

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

@@ -3,7 +3,7 @@
     :append-to-body="true"
     v-model="settingVisible"
     :show-close="false"
-    :size="550"
+    :size="580"
     :before-close="saveConfig"
     class="justify-start"
   >
@@ -46,14 +46,13 @@
                 v-model="configForm.candidateStrategy"
                 @change="changeCandidateStrategy"
               >
-                <el-radio
+                <el-row>
-                  v-for="(dict, index) in CANDIDATE_STRATEGY"
+                  <el-col v-for="(dict, index) in CANDIDATE_STRATEGY" :key="index" :span="8">
-                  :key="index"
+                    <el-radio :value="dict.value" :label="dict.value">
-                  :value="dict.value"
+                      {{ dict.label }}
-                  :label="dict.value"
+                    </el-radio>
-                >
+                  </el-col>
-                  {{ dict.label }}
+                </el-row>
-                </el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item
@@ -148,7 +147,7 @@
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
-                  :disabled ="!item.required"
+                  :disabled="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -163,7 +162,7 @@
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
-                  :disabled ="!item.required"
+                  :disabled="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -435,6 +434,133 @@
           </div>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="监听器" name="listener">
+        <div>
+          <el-form label-position="top">
+            <el-divider content-position="left">
+              <el-text tag="b" size="large">创建任务</el-text>
+            </el-divider>
+            <el-form-item prop="createTaskListenerEnable">
+              <el-switch
+                v-model="configForm.createTaskListenerEnable"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-form-item>
+            <div v-if="configForm.createTaskListenerEnable">
+              <el-form-item>
+                <el-alert
+                  title="仅支持POST请求，以请求体方式接收参数"
+                  type="warning"
+                  show-icon
+                  :closable="false"
+                />
+              </el-form-item>
+              <el-form-item label="请求地址" prop="createTaskListenerPath">
+                <el-input v-model="configForm.createTaskListenerPath" />
+              </el-form-item>
+              <el-form-item label="请求头" prop="createTaskListenerHeader">
+                <div
+                  class="flex pt-2"
+                  v-for="(item, index) in configForm.createTaskListenerHeader"
+                  :key="index"
+                >
+                  <div class="mr-2">
+                    <el-input v-model="item.key" style="width: 160px" />
+                  </div>
+                  <div class="mr-2">
+                    <el-select v-model="item.type" style="width: 100px">
+                      <el-option
+                        v-for="types in LISTENER_MAP_TYPES"
+                        :key="types.value"
+                        :label="types.label"
+                        :value="types.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="mr-2">
+                    <el-input v-model="item.value" style="width: 160px" />
+                  </div>
+                  <div class="mr-1 flex items-center">
+                    <Icon
+                      icon="ep:delete"
+                      :size="18"
+                      @click="deleteTaskListenerMap(configForm.createTaskListenerHeader, index)"
+                    />
+                  </div>
+                </div>
+                <el-button
+                  type="primary"
+                  text
+                  @click="addTaskListenerMap(configForm.createTaskListenerHeader)"
+                >
+                  <Icon icon="ep:plus" class="mr-5px" />添加一行
+                </el-button>
+              </el-form-item>
+              <el-form-item label="请求体" prop="createTaskListenerBody">
+                <div
+                  class="flex pt-2"
+                  v-for="(item, index) in configForm.createTaskListenerBody"
+                  :key="index"
+                >
+                  <div class="mr-2">
+                    <el-input v-model="item.key" style="width: 160px" />
+                  </div>
+                  <div class="mr-2">
+                    <el-select v-model="item.type" style="width: 100px">
+                      <el-option
+                        v-for="types in LISTENER_MAP_TYPES"
+                        :key="types.value"
+                        :label="types.label"
+                        :value="types.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="mr-2">
+                    <el-input v-model="item.value" style="width: 160px" />
+                  </div>
+                  <div class="mr-1 flex items-center">
+                    <Icon
+                      icon="ep:delete"
+                      :size="18"
+                      @click="deleteTaskListenerMap(configForm.createTaskListenerBody, index)"
+                    />
+                  </div>
+                </div>
+                <el-button
+                  type="primary"
+                  text
+                  @click="addTaskListenerMap(configForm.createTaskListenerBody)"
+                >
+                  <Icon icon="ep:plus" class="mr-5px" />添加一行
+                </el-button>
+              </el-form-item>
+            </div>
+
+            <el-divider content-position="left">
+              <el-text tag="b" size="large">指派任务执行人员</el-text>
+            </el-divider>
+            <el-form-item prop="assignTaskListenerEnable">
+              <el-switch
+                v-model="configForm.assignTaskListenerEnable"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-form-item>
+
+            <el-divider content-position="left">
+              <el-text tag="b" size="large">完成任务</el-text>
+            </el-divider>
+            <el-form-item prop="completeTaskListenerEnable">
+              <el-switch
+                v-model="configForm.completeTaskListenerEnable"
+                active-text="开启"
+                inactive-text="关闭"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
     </el-tabs>
     <template #footer>
       <el-divider />
@@ -470,7 +596,8 @@ import {
   ASSIGN_EMPTY_HANDLER_TYPES,
   AssignEmptyHandlerType,
   FieldPermissionType,
-  ProcessVariableEnum
+  ProcessVariableEnum,
+  LISTENER_MAP_TYPES
 } from '../consts'
 
 import {
@@ -514,7 +641,7 @@ const { settingVisible, closeDrawer, openDrawer } = useDrawer()
 // 节点名称配置
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_TASK_NODE)
 // 激活的 Tab 标签页
-const activeTabName = ref('user')
+const activeTabName = ref('listener')
 // 表单字段权限设置
 const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } =
   useFormFieldsPermission(FieldPermissionType.READ)
@@ -663,6 +790,13 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   // 设置按钮权限
   currentNode.value.buttonsSetting = buttonsSetting.value
+  // 创建任务监听器
+  currentNode.value.createTaskListener = {
+    enable: configForm.value.createTaskListenerEnable,
+    path: configForm.value.createTaskListenerPath,
+    header: configForm.value.createTaskListenerHeader,
+    body: configForm.value.createTaskListenerBody
+  }
 
   currentNode.value.showText = showText
   settingVisible.value = false
@@ -714,6 +848,11 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
   // 4. 表单字段权限配置
   getNodeConfigFormFields(node.fieldsPermission)
+  // 创建任务监听器
+  configForm.value.createTaskListenerEnable = node.createTaskListener.enable
+  configForm.value.createTaskListenerPath = node.createTaskListener.path
+  configForm.value.createTaskListenerHeader = node.createTaskListener.header ?? []
+  configForm.value.createTaskListenerBody = node.createTaskListener.body ?? []
 }
 
 defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件
@@ -826,6 +965,17 @@ function useTimeoutHandler() {
     cTimeoutMaxRemindCount
   }
 }
+
+const addTaskListenerMap = (arr) => {
+  arr.push({
+    key: '',
+    type: 1,
+    value: ''
+  })
+}
+const deleteTaskListenerMap = (arr, index) => {
+  arr.splice(index, 1)
+}
 </script>
 
 <style lang="scss" scoped>