Skip to content

phsl / admin

Go to a project
Commit a1f1f9ae by Lesan
Options

feat: 流程前后置通知

parent 77a0801a
Showing with 216 additions and 101 deletions
src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
...@@ -43,91 +43,11 @@ ...@@ -43,91 +43,11 @@
) && configForm.httpRequestSetting ) && 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> </div>
<!-- 表单数据修改触发器 --> <!-- 表单数据修改触发器 -->
...@@ -332,7 +252,7 @@ import { ...@@ -332,7 +252,7 @@ import {
DEFAULT_CONDITION_GROUP_VALUE DEFAULT_CONDITION_GROUP_VALUE
} from '../consts' } from '../consts'
import { useWatchNode, useDrawer, useNodeName, useFormFields, getConditionShowText } from '../node' 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' import ConditionDialog from './components/ConditionDialog.vue'
const { proxy } = getCurrentInstance() as any const { proxy } = getCurrentInstance() as any
...@@ -451,19 +371,6 @@ const changeTriggerType = () => { ...@@ -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 = () => { const addFormSetting = () => {
configForm.value.formSettings!.push({ configForm.value.formSettings!.push({
......
src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestParamSetting.vue
<template> <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="flex pt-2" v-for="(item, index) in props.header" :key="index">
<div class="mr-2"> <div class="mr-2">
<el-form-item <el-form-item
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
<Icon icon="ep:plus" class="mr-5px" />添加一行 <Icon icon="ep:plus" class="mr-5px" />添加一行
</el-button> </el-button>
</el-form-item> </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="flex pt-2" v-for="(item, index) in props.body" :key="index">
<div class="mr-2"> <div class="mr-2">
<el-form-item <el-form-item
...@@ -141,7 +141,11 @@ ...@@ -141,7 +141,11 @@
</el-form-item> </el-form-item>
</template> </template>
<script setup lang="ts"> <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' import { useFormFieldsAndStartUser } from '../../node'
defineOptions({ defineOptions({
name: 'HttpRequestParamSetting' name: 'HttpRequestParamSetting'
......
src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue 0 → 100644
<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 @@ ...@@ -140,6 +140,46 @@
</el-select> </el-select>
</div> </div>
</el-form-item> </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> </el-form>
</template> </template>
...@@ -149,6 +189,7 @@ import { BpmAutoApproveType, BpmModelFormType } from '@/utils/constants' ...@@ -149,6 +189,7 @@ import { BpmAutoApproveType, BpmModelFormType } from '@/utils/constants'
import * as FormApi from '@/api/bpm/form' import * as FormApi from '@/api/bpm/form'
import { parseFormFields } from '@/components/FormCreate/src/utils' import { parseFormFields } from '@/components/FormCreate/src/utils'
import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts' import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts'
import HttpRequestSetting from '@/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue'
const modelData = defineModel<any>() const modelData = defineModel<any>()
...@@ -205,6 +246,36 @@ const numberExample = computed(() => { ...@@ -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 formField = ref<Array<{ field: string; title: string }>>([])
const formFieldOptions4Title = computed(() => { const formFieldOptions4Title = computed(() => {
...@@ -264,6 +335,12 @@ const initData = () => { ...@@ -264,6 +335,12 @@ const initData = () => {
summary: [] summary: []
} }
} }
if (modelData.value.preProcessNotifySetting) {
preProcessNotifyEnable.value = true
}
if (modelData.value.postProcessNotifySetting) {
postProcessNotifyEnable.value = true
}
} }
defineExpose({ initData }) defineExpose({ initData })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment