feat: 流程前后置通知

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

@@ -43,91 +43,11 @@
             ) && configForm.httpRequestSetting
           "
         >
-          <el-form-item>
+          <HttpRequestSetting
-            <el-alert
+            v-model:setting="configForm.httpRequestSetting"
-              title="仅支持 POST 请求，以请求体方式接收参数"
+            :responseEnable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
-              type="warning"
+            :formItemPrefix="'httpRequestSetting'"
-              show-icon
-              :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'"
-          />
-          <!-- 返回值设置-->
-          <div v-if="configForm.type === TriggerTypeEnum.HTTP_REQUEST">
-            <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 formFields"
-                        :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>
         </div>
 
         <!-- 表单数据修改触发器 -->
@@ -332,7 +252,7 @@ import {
   DEFAULT_CONDITION_GROUP_VALUE
 } from '../consts'
 import { useWatchNode, useDrawer, useNodeName, useFormFields, getConditionShowText } from '../node'
-import HttpRequestParamSetting from './components/HttpRequestParamSetting.vue'
+import HttpRequestSetting from './components/HttpRequestSetting.vue'
 import ConditionDialog from './components/ConditionDialog.vue'
 const { proxy } = getCurrentInstance() as any
 
@@ -451,19 +371,6 @@ const changeTriggerType = () => {
   }
 }
 
-/** 添加 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 addFormSetting = () => {
   configForm.value.formSettings!.push({

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

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item label="请求头">
+  <el-form-item label-position="top" label="请求头">
     <div class="flex pt-2" v-for="(item, index) in props.header" :key="index">
       <div class="mr-2">
         <el-form-item
@@ -69,7 +69,7 @@
       <Icon icon="ep:plus" class="mr-5px" />添加一行
     </el-button>
   </el-form-item>
-  <el-form-item label="请求体">
+  <el-form-item label-position="top" label="请求体">
     <div class="flex pt-2" v-for="(item, index) in props.body" :key="index">
       <div class="mr-2">
         <el-form-item
@@ -141,7 +141,11 @@
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { HttpRequestParam, BPM_HTTP_REQUEST_PARAM_TYPES, BpmHttpRequestParamTypeEnum } from '../../consts'
+import {
+  HttpRequestParam,
+  BPM_HTTP_REQUEST_PARAM_TYPES,
+  BpmHttpRequestParamTypeEnum
+} from '../../consts'
 import { useFormFieldsAndStartUser } from '../../node'
 defineOptions({
   name: 'HttpRequestParamSetting'

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

@@ -0,0 +1,127 @@
+<template>
+  <el-form-item>
+    <el-alert
+      title="仅支持 POST 请求，以请求体方式接收参数"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+  </el-form-item>
+  <!-- 请求地址-->
+  <el-form-item
+    label-position="top"
+    label="请求地址"
+    :prop="`${formItemPrefix}.url`"
+    :rules="{
+      required: true,
+      message: '请求地址不能为空',
+      trigger: 'blur'
+    }"
+  >
+    <el-input v-model="setting.url" />
+  </el-form-item>
+  <!-- 请求头，请求体设置-->
+  <HttpRequestParamSetting :header="setting.header" :body="setting.body" :bind="formItemPrefix" />
+  <!-- 返回值设置-->
+  <div v-if="responseEnable">
+    <el-form-item label="返回值" label-position="top">
+      <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 setting.response" :key="index">
+        <div class="mr-2">
+          <el-form-item
+            :prop="`${formItemPrefix}.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 formFields"
+                :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="`${formItemPrefix}.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(setting.response!, index)"
+          />
+        </div>
+      </div>
+      <el-button type="primary" text @click="addHttpResponseSetting(setting.response!)">
+        <Icon icon="ep:plus" class="mr-5px" />添加一行
+      </el-button>
+    </el-form-item>
+  </div>
+</template>
+<script setup lang="ts">
+import HttpRequestParamSetting from './HttpRequestParamSetting.vue'
+import { useFormFields } from '../../node'
+
+const props = defineProps({
+  setting: {
+    type: Object,
+    required: true
+  },
+  responseEnable: {
+    type: Boolean,
+    required: true
+  },
+  formItemPrefix: {
+    type: String,
+    required: true
+  }
+})
+const { setting } = toRefs(props)
+const emits = defineEmits(['update:setting'])
+watch(
+  () => setting,
+  (val) => {
+    emits('update:setting', val)
+  }
+)
+
+/** 流程表单字段 */
+const formFields = 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)
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/bpm/model/form/ExtraSettings.vue

@@ -140,6 +140,46 @@
         </el-select>
       </div>
     </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">流程前置通知</el-text>
+      </template>
+      <div class="flex flex-col w-100%">
+        <div class="flex">
+          <el-switch
+            v-model="preProcessNotifyEnable"
+            @change="handlePreProcessNotifyEnableChange"
+          />
+          <div class="ml-80px">流程启动后通知</div>
+        </div>
+        <HttpRequestSetting
+          v-if="preProcessNotifyEnable"
+          v-model:setting="modelData.preProcessNotifySetting"
+          :responseEnable="true"
+          :formItemPrefix="'preProcessNotifySetting'"
+        />
+      </div>
+    </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">流程后置通知</el-text>
+      </template>
+      <div class="flex flex-col w-100%">
+        <div class="flex">
+          <el-switch
+            v-model="postProcessNotifyEnable"
+            @change="handlePostProcessNotifyEnableChange"
+          />
+          <div class="ml-80px">流程启动后通知</div>
+        </div>
+        <HttpRequestSetting
+          v-if="postProcessNotifyEnable"
+          v-model:setting="modelData.postProcessNotifySetting"
+          :responseEnable="true"
+          :formItemPrefix="'postProcessNotifySetting'"
+        />
+      </div>
+    </el-form-item>
   </el-form>
 </template>
 
@@ -149,6 +189,7 @@ import { BpmAutoApproveType, BpmModelFormType } from '@/utils/constants'
 import * as FormApi from '@/api/bpm/form'
 import { parseFormFields } from '@/components/FormCreate/src/utils'
 import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts'
+import HttpRequestSetting from '@/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue'
 
 const modelData = defineModel<any>()
 
@@ -205,6 +246,36 @@ const numberExample = computed(() => {
   }
 })
 
+/** 是否开启流程前置通知 */
+const preProcessNotifyEnable = ref(false)
+const handlePreProcessNotifyEnableChange = (val: boolean | string | number) => {
+  if (val) {
+    modelData.value.preProcessNotifySetting = {
+      url: '',
+      header: [],
+      body: [],
+      response: []
+    }
+  } else {
+    modelData.value.preProcessNotifySetting = null
+  }
+}
+
+/** 是否开启流程后置通知 */
+const postProcessNotifyEnable = ref(false)
+const handlePostProcessNotifyEnableChange = (val: boolean | string | number) => {
+  if (val) {
+    modelData.value.postProcessNotifySetting = {
+      url: '',
+      header: [],
+      body: [],
+      response: []
+    }
+  } else {
+    modelData.value.postProcessNotifySetting = null
+  }
+}
+
 /** 表单选项 */
 const formField = ref<Array<{ field: string; title: string }>>([])
 const formFieldOptions4Title = computed(() => {
@@ -264,6 +335,12 @@ const initData = () => {
       summary: []
     }
   }
+  if (modelData.value.preProcessNotifySetting) {
+    preProcessNotifyEnable.value = true
+  }
+  if (modelData.value.postProcessNotifySetting) {
+    postProcessNotifyEnable.value = true
+  }
 }
 defineExpose({ initData })