【功能新增】Http 请求触发器，增加返回值设置

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -371,13 +371,13 @@ export enum TimeUnitType {
 /**
  * 条件节点设置结构定义，用于条件节点
  */
-export type ConditionSetting =  {
+export type ConditionSetting = {
   // 条件类型
-  conditionType?: ConditionType,
+  conditionType?: ConditionType
   // 条件表达式
-  conditionExpression?: string,
+  conditionExpression?: string
   // 条件组
-  conditionGroups?: ConditionGroup,
+  conditionGroups?: ConditionGroup
   // 是否默认的条件
   defaultFlow?: boolean
 }
@@ -726,7 +726,7 @@ export enum TriggerTypeEnum {
   /**
    * 发送 HTTP 请求触发器
    */
-  HTTP_REQUEST = 1,
+  HTTP_REQUEST = 1
 }
 
 /**
@@ -739,6 +739,8 @@ export type HttpRequestTriggerSetting = {
   header?: HttpRequestParam[]
   // 请求体参数设置
   body?: HttpRequestParam[]
+  // 请求响应设置
+  response?: Record<string, string>[]
 }
 
 export const TRIGGER_TYPES: DictDataVO[] = [

src/components/SimpleProcessDesignerV2/src/node.ts

@@ -14,7 +14,8 @@ import {
   AssignStartUserHandlerType,
   AssignEmptyHandlerType,
   FieldPermissionType,
-  HttpRequestParam
+  HttpRequestParam,
+  ProcessVariableEnum
 } from './consts'
 import { parseFormFields } from '@/components/FormCreate/src/utils'
 
@@ -106,13 +107,28 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
   }
 }
 /**
- * @description 获取表单的字段
+ * @description 获取流程表单的字段。
  */
 export function useFormFields() {
   const formFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
   return parseFormCreateFields(unref(formFields))
 }
 
+/**
+ * @description 获取流程表单的字段和发起人字段
+ */
+export function useFormFieldsAndStartUser() {
+  const injectFormFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
+  const formFields = parseFormCreateFields(unref(injectFormFields))
+  // 添加发起人
+  formFields.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    required: true
+  })
+  return formFields
+}
+
 export type UserTaskFormType = {
   candidateStrategy: CandidateStrategy
   approveMethod: ApproveMethodType

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

@@ -35,6 +35,7 @@
             />
           </el-select>
         </el-form-item>
+        <!-- HTTP 请求触发器 -->
         <div
           v-if="configForm.type === TriggerTypeEnum.HTTP_REQUEST && configForm.httpRequestSetting"
         >
@@ -46,14 +47,79 @@
               :closable="false"
             />
           </el-form-item>
+          <!-- 请求地址-->
           <el-form-item label="请求地址" prop="httpRequestSetting.url">
             <el-input v-model="configForm.httpRequestSetting.url" />
           </el-form-item>
+          <!-- 请求头，请求体设置-->
           <HttpRequestParamSetting
             :header="configForm.httpRequestSetting.header"
             :body="configForm.httpRequestSetting.body"
             :bind="'httpRequestSetting'"
           />
+          <!-- 返回值设置-->
+          <el-form-item label="返回值">
+            <el-alert
+              title="通过请求返回值, 可以修改流程表单的值"
+              type="warning"
+              show-icon
+              :closable="false"
+            />
+          </el-form-item>
+          <el-form-item>
+            <div
+              class="flex pt-2"
+              v-for="(item, index) in configForm.httpRequestSetting.response"
+              :key="index"
+            >
+              <div class="mr-2">
+                <el-form-item
+                  :prop="`httpRequestSetting.response.${index}.key`"
+                  :rules="{
+                    required: true,
+                    message: '表单字段不能为空',
+                    trigger: 'blur'
+                  }"
+                >
+                  <el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
+                    <el-option
+                      v-for="(field, fIdx) in formFieldOptions"
+                      :key="fIdx"
+                      :label="field.title"
+                      :value="field.field"
+                      :disabled="!field.required"
+                    />
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div class="mr-2">
+                <el-form-item
+                  :prop="`httpRequestSetting.response.${index}.value`"
+                  :rules="{
+                    required: true,
+                    message: '请求返回字段不能为空',
+                    trigger: 'blur'
+                  }"
+                >
+                  <el-input class="w-160px" v-model="item.value" placeholder="请求返回字段" />
+                </el-form-item>
+              </div>
+              <div class="mr-1 pt-1 cursor-pointer">
+                <Icon
+                  icon="ep:delete"
+                  :size="18"
+                  @click="deleteHttpResponseSetting(configForm.httpRequestSetting.response!, index)"
+                />
+              </div>
+            </div>
+            <el-button
+              type="primary"
+              text
+              @click="addHttpResponseSetting(configForm.httpRequestSetting.response!)"
+            >
+              <Icon icon="ep:plus" class="mr-5px" />添加一行
+            </el-button>
+          </el-form-item>
         </div>
       </el-form>
     </div>
@@ -68,7 +134,7 @@
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, TriggerSetting, TRIGGER_TYPES, TriggerTypeEnum } from '../consts'
-import { useWatchNode, useDrawer, useNodeName } from '../node'
+import { useWatchNode, useDrawer, useNodeName, useFormFields } from '../node'
 import HttpRequestParamSetting from './components/HttpRequestParamSetting.vue'
 
 defineOptions({
@@ -91,19 +157,33 @@ const formRef = ref() // 表单 Ref
 // 表单校验规则
 const formRules = reactive({
   type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
-  httpRequestSetting: {
-    url: [{ required: true, message: '请求地址不能为空', trigger: 'blur' }]
-  }
+  'httpRequestSetting.url': [{ required: true, message: '请求地址不能为空', trigger: 'blur' }]
 })
 // 触发器配置表单数据
 const configForm = ref<TriggerSetting>({
   type: TriggerTypeEnum.HTTP_REQUEST,
   httpRequestSetting: {
     url: '',
     header: [],
-    body: []
+    body: [],
+    response: []
   }
 })
+// 流程表单字段
+const formFieldOptions = useFormFields()
+
+/** 添加 HTTP 请求返回值设置项*/
+const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
+  responseSetting.push({
+    key: '',
+    value: ''
+  })
+}
+
+/** 删除 HTTP 请求返回值设置项 */
+const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], index: number) => {
+  responseSetting.splice(index, 1)
+}
 
 /** 保存配置 */
 const saveConfig = async () => {

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

@@ -142,7 +142,7 @@
 </template>
 <script setup lang="ts">
 import { HttpRequestParam, BPM_HTTP_REQUEST_PARAM_TYPES, BpmHttpRequestParamTypeEnum } from '../../consts'
-import { useFormFields } from '../../node'
+import { useFormFieldsAndStartUser } from '../../node'
 defineOptions({
   name: 'HttpRequestParamSetting'
 })
@@ -164,16 +164,19 @@ const props = defineProps({
   }
 })
 
-const formFieldOptions = useFormFields()
-
-const addHttpRequestParam = (arr: ListenerParam[]) => {
+// 流程表单字段，发起人字段
+const formFieldOptions = useFormFieldsAndStartUser()
+/** 添加请求配置项 */
+const addHttpRequestParam = (arr: HttpRequestParam[]) => {
   arr.push({
     key: '',
-    type: ListenerParamTypeEnum.FIXED_VALUE,
+    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
     value: ''
   })
 }
-const deleteHttpRequestParam = (arr: ListenerParam[], index: number) => {
+
+/** 删除请求配置项 */
+const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
   arr.splice(index, 1)
 }
 </script>