Skip to content

Commit f308be8

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!730 feat: 流程前后置通知
Merge pull request !730 from Lesan/feature/bpm-流程前后置通知
2 parents 77a0801 + a1f1f9a commit f308be8

File tree

4 files changed

+216
-101
lines changed

4 files changed

+216
-101
lines changed

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

+5-98
Original file line numberDiff line numberDiff line change
@@ -43,91 +43,11 @@
4343
) && configForm.httpRequestSetting
4444
"
4545
>
46-
<el-form-item>
47-
<el-alert
48-
title="仅支持 POST 请求，以请求体方式接收参数"
49-
type="warning"
50-
show-icon
51-
:closable="false"
52-
/>
53-
</el-form-item>
54-
<!-- 请求地址-->
55-
<el-form-item label="请求地址" prop="httpRequestSetting.url">
56-
<el-input v-model="configForm.httpRequestSetting.url" />
57-
</el-form-item>
58-
<!-- 请求头，请求体设置-->
59-
<HttpRequestParamSetting
60-
:header="configForm.httpRequestSetting.header"
61-
:body="configForm.httpRequestSetting.body"
62-
:bind="'httpRequestSetting'"
46+
<HttpRequestSetting
47+
v-model:setting="configForm.httpRequestSetting"
48+
:responseEnable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
49+
:formItemPrefix="'httpRequestSetting'"
6350
/>
64-
<!-- 返回值设置-->
65-
<div v-if="configForm.type === TriggerTypeEnum.HTTP_REQUEST">
66-
<el-form-item label="返回值">
67-
<el-alert
68-
title="通过请求返回值, 可以修改流程表单的值"
69-
type="warning"
70-
show-icon
71-
:closable="false"
72-
/>
73-
</el-form-item>
74-
<el-form-item>
75-
<div
76-
class="flex pt-2"
77-
v-for="(item, index) in configForm.httpRequestSetting.response"
78-
:key="index"
79-
>
80-
<div class="mr-2">
81-
<el-form-item
82-
:prop="`httpRequestSetting.response.${index}.key`"
83-
:rules="{
84-
required: true,
85-
message: '表单字段不能为空',
86-
trigger: 'blur'
87-
}"
88-
>
89-
<el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
90-
<el-option
91-
v-for="(field, fIdx) in formFields"
92-
:key="fIdx"
93-
:label="field.title"
94-
:value="field.field"
95-
:disabled="!field.required"
96-
/>
97-
</el-select>
98-
</el-form-item>
99-
</div>
100-
<div class="mr-2">
101-
<el-form-item
102-
:prop="`httpRequestSetting.response.${index}.value`"
103-
:rules="{
104-
required: true,
105-
message: '请求返回字段不能为空',
106-
trigger: 'blur'
107-
}"
108-
>
109-
<el-input class="w-160px" v-model="item.value" placeholder="请求返回字段" />
110-
</el-form-item>
111-
</div>
112-
<div class="mr-1 pt-1 cursor-pointer">
113-
<Icon
114-
icon="ep:delete"
115-
:size="18"
116-
@click="
117-
deleteHttpResponseSetting(configForm.httpRequestSetting.response!, index)
118-
"
119-
/>
120-
</div>
121-
</div>
122-
<el-button
123-
type="primary"
124-
text
125-
@click="addHttpResponseSetting(configForm.httpRequestSetting.response!)"
126-
>
127-
<Icon icon="ep:plus" class="mr-5px" />添加一行
128-
</el-button>
129-
</el-form-item>
130-
</div>
13151
</div>
13252

13353
<!-- 表单数据修改触发器 -->
@@ -332,7 +252,7 @@ import {
332252
DEFAULT_CONDITION_GROUP_VALUE
333253
} from '../consts'
334254
import { useWatchNode, useDrawer, useNodeName, useFormFields, getConditionShowText } from '../node'
335-
import HttpRequestParamSetting from './components/HttpRequestParamSetting.vue'
255+
import HttpRequestSetting from './components/HttpRequestSetting.vue'
336256
import ConditionDialog from './components/ConditionDialog.vue'
337257
const { proxy } = getCurrentInstance() as any
338258
@@ -451,19 +371,6 @@ const changeTriggerType = () => {
451371
}
452372
}
453373
454-
/** 添加 HTTP 请求返回值设置项 */
455-
const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
456-
responseSetting.push({
457-
key: '',
458-
value: ''
459-
})
460-
}
461-
462-
/** 删除 HTTP 请求返回值设置项 */
463-
const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], index: number) => {
464-
responseSetting.splice(index, 1)
465-
}
466-
467374
/** 添加新的修改表单设置 */
468375
const addFormSetting = () => {
469376
configForm.value.formSettings!.push({

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<el-form-item label="请求头">
2+
<el-form-item label-position="top" label="请求头">
33
<div class="flex pt-2" v-for="(item, index) in props.header" :key="index">
44
<div class="mr-2">
55
<el-form-item
@@ -69,7 +69,7 @@
6969
<Icon icon="ep:plus" class="mr-5px" />添加一行
7070
</el-button>
7171
</el-form-item>
72-
<el-form-item label="请求体">
72+
<el-form-item label-position="top" label="请求体">
7373
<div class="flex pt-2" v-for="(item, index) in props.body" :key="index">
7474
<div class="mr-2">
7575
<el-form-item
@@ -141,7 +141,11 @@
141141
</el-form-item>
142142
</template>
143143
<script setup lang="ts">
144-
import { HttpRequestParam, BPM_HTTP_REQUEST_PARAM_TYPES, BpmHttpRequestParamTypeEnum } from '../../consts'
144+
import {
145+
HttpRequestParam,
146+
BPM_HTTP_REQUEST_PARAM_TYPES,
147+
BpmHttpRequestParamTypeEnum
148+
} from '../../consts'
145149
import { useFormFieldsAndStartUser } from '../../node'
146150
defineOptions({
147151
name: 'HttpRequestParamSetting'

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

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<el-form-item>
3+
<el-alert
4+
title="仅支持 POST 请求，以请求体方式接收参数"
5+
type="warning"
6+
show-icon
7+
:closable="false"
8+
/>
9+
</el-form-item>
10+
<!-- 请求地址-->
11+
<el-form-item
12+
label-position="top"
13+
label="请求地址"
14+
:prop="`${formItemPrefix}.url`"
15+
:rules="{
16+
required: true,
17+
message: '请求地址不能为空',
18+
trigger: 'blur'
19+
}"
20+
>
21+
<el-input v-model="setting.url" />
22+
</el-form-item>
23+
<!-- 请求头，请求体设置-->
24+
<HttpRequestParamSetting :header="setting.header" :body="setting.body" :bind="formItemPrefix" />
25+
<!-- 返回值设置-->
26+
<div v-if="responseEnable">
27+
<el-form-item label="返回值" label-position="top">
28+
<el-alert
29+
title="通过请求返回值, 可以修改流程表单的值"
30+
type="warning"
31+
show-icon
32+
:closable="false"
33+
/>
34+
</el-form-item>
35+
<el-form-item>
36+
<div class="flex pt-2" v-for="(item, index) in setting.response" :key="index">
37+
<div class="mr-2">
38+
<el-form-item
39+
:prop="`${formItemPrefix}.response.${index}.key`"
40+
:rules="{
41+
required: true,
42+
message: '表单字段不能为空',
43+
trigger: 'blur'
44+
}"
45+
>
46+
<el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
47+
<el-option
48+
v-for="(field, fIdx) in formFields"
49+
:key="fIdx"
50+
:label="field.title"
51+
:value="field.field"
52+
:disabled="!field.required"
53+
/>
54+
</el-select>
55+
</el-form-item>
56+
</div>
57+
<div class="mr-2">
58+
<el-form-item
59+
:prop="`${formItemPrefix}.response.${index}.value`"
60+
:rules="{
61+
required: true,
62+
message: '请求返回字段不能为空',
63+
trigger: 'blur'
64+
}"
65+
>
66+
<el-input class="w-160px" v-model="item.value" placeholder="请求返回字段" />
67+
</el-form-item>
68+
</div>
69+
<div class="mr-1 pt-1 cursor-pointer">
70+
<Icon
71+
icon="ep:delete"
72+
:size="18"
73+
@click="deleteHttpResponseSetting(setting.response!, index)"
74+
/>
75+
</div>
76+
</div>
77+
<el-button type="primary" text @click="addHttpResponseSetting(setting.response!)">
78+
<Icon icon="ep:plus" class="mr-5px" />添加一行
79+
</el-button>
80+
</el-form-item>
81+
</div>
82+
</template>
83+
<script setup lang="ts">
84+
import HttpRequestParamSetting from './HttpRequestParamSetting.vue'
85+
import { useFormFields } from '../../node'
86+
87+
const props = defineProps({
88+
setting: {
89+
type: Object,
90+
required: true
91+
},
92+
responseEnable: {
93+
type: Boolean,
94+
required: true
95+
},
96+
formItemPrefix: {
97+
type: String,
98+
required: true
99+
}
100+
})
101+
const { setting } = toRefs(props)
102+
const emits = defineEmits(['update:setting'])
103+
watch(
104+
() => setting,
105+
(val) => {
106+
emits('update:setting', val)
107+
}
108+
)
109+
110+
/** 流程表单字段 */
111+
const formFields = useFormFields()
112+
113+
/** 添加 HTTP 请求返回值设置项 */
114+
const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
115+
responseSetting.push({
116+
key: '',
117+
value: ''
118+
})
119+
}
120+
121+
/** 删除 HTTP 请求返回值设置项 */
122+
const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], index: number) => {
123+
responseSetting.splice(index, 1)
124+
}
125+
</script>
126+
127+
<style lang="scss" scoped></style>

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

+77
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,46 @@
140140
</el-select>
141141
</div>
142142
</el-form-item>
143+
<el-form-item class="mb-20px">
144+
<template #label>
145+
<el-text size="large" tag="b">流程前置通知</el-text>
146+
</template>
147+
<div class="flex flex-col w-100%">
148+
<div class="flex">
149+
<el-switch
150+
v-model="preProcessNotifyEnable"
151+
@change="handlePreProcessNotifyEnableChange"
152+
/>
153+
<div class="ml-80px">流程启动后通知</div>
154+
</div>
155+
<HttpRequestSetting
156+
v-if="preProcessNotifyEnable"
157+
v-model:setting="modelData.preProcessNotifySetting"
158+
:responseEnable="true"
159+
:formItemPrefix="'preProcessNotifySetting'"
160+
/>
161+
</div>
162+
</el-form-item>
163+
<el-form-item class="mb-20px">
164+
<template #label>
165+
<el-text size="large" tag="b">流程后置通知</el-text>
166+
</template>
167+
<div class="flex flex-col w-100%">
168+
<div class="flex">
169+
<el-switch
170+
v-model="postProcessNotifyEnable"
171+
@change="handlePostProcessNotifyEnableChange"
172+
/>
173+
<div class="ml-80px">流程启动后通知</div>
174+
</div>
175+
<HttpRequestSetting
176+
v-if="postProcessNotifyEnable"
177+
v-model:setting="modelData.postProcessNotifySetting"
178+
:responseEnable="true"
179+
:formItemPrefix="'postProcessNotifySetting'"
180+
/>
181+
</div>
182+
</el-form-item>
143183
</el-form>
144184
</template>
145185

@@ -149,6 +189,7 @@ import { BpmAutoApproveType, BpmModelFormType } from '@/utils/constants'
149189
import * as FormApi from '@/api/bpm/form'
150190
import { parseFormFields } from '@/components/FormCreate/src/utils'
151191
import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts'
192+
import HttpRequestSetting from '@/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue'
152193
153194
const modelData = defineModel<any>()
154195
@@ -205,6 +246,36 @@ const numberExample = computed(() => {
205246
}
206247
})
207248
249+
/** 是否开启流程前置通知 */
250+
const preProcessNotifyEnable = ref(false)
251+
const handlePreProcessNotifyEnableChange = (val: boolean | string | number) => {
252+
if (val) {
253+
modelData.value.preProcessNotifySetting = {
254+
url: '',
255+
header: [],
256+
body: [],
257+
response: []
258+
}
259+
} else {
260+
modelData.value.preProcessNotifySetting = null
261+
}
262+
}
263+
264+
/** 是否开启流程后置通知 */
265+
const postProcessNotifyEnable = ref(false)
266+
const handlePostProcessNotifyEnableChange = (val: boolean | string | number) => {
267+
if (val) {
268+
modelData.value.postProcessNotifySetting = {
269+
url: '',
270+
header: [],
271+
body: [],
272+
response: []
273+
}
274+
} else {
275+
modelData.value.postProcessNotifySetting = null
276+
}
277+
}
278+
208279
/** 表单选项 */
209280
const formField = ref<Array<{ field: string; title: string }>>([])
210281
const formFieldOptions4Title = computed(() => {
@@ -264,6 +335,12 @@ const initData = () => {
264335
summary: []
265336
}
266337
}
338+
if (modelData.value.preProcessNotifySetting) {
339+
preProcessNotifyEnable.value = true
340+
}
341+
if (modelData.value.postProcessNotifySetting) {
342+
postProcessNotifyEnable.value = true
343+
}
267344
}
268345
defineExpose({ initData })
269346

0 commit comments

Comments
 (0)