yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Simple设计器-监听器

pull/652/head
Lesan 2025-01-07 16:33:16 +08:00
parent 0da3a9bf7b
commit 7683aa2e7d
4 changed files with 183 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
View File

@ -128,7 +128,13 @@ const addNode = (type: number) => {
}, },
assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT, assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
childNode: props.childNode, childNode: props.childNode,
createTaskListener: { taskCreateListener: {
enable: false
},
taskAssignListener: {
enable: false
},
taskCompleteListener: {
enable: false enable: false
} }
} }

12
src/components/SimpleProcessDesignerV2/src/consts.ts
View File

@ -98,7 +98,11 @@ export interface SimpleFlowNode {
// 审批节点的审批人与发起人相同时，对应的处理类型 // 审批节点的审批人与发起人相同时，对应的处理类型
assignStartUserHandlerType?: number assignStartUserHandlerType?: number
// 创建任务监听器 // 创建任务监听器
createTaskListener: ListenerHandler taskCreateListener?: ListenerHandler
// 创建任务监听器
taskAssignListener?: ListenerHandler
// 创建任务监听器
taskCompleteListener?: ListenerHandler
// 条件类型 // 条件类型
conditionType?: ConditionType conditionType?: ConditionType
// 条件表达式 // 条件表达式
@ -236,9 +240,9 @@ export type AssignEmptyHandler = {
*/ */
export type ListenerHandler = { export type ListenerHandler = {
enable: boolean enable: boolean
path: string path?: string
header: ListenerMap[] header?: ListenerMap[]
body: ListenerMap[] body?: ListenerMap[]
} }
export type ListenerMap = { export type ListenerMap = {
key: string key: string

15
src/components/SimpleProcessDesignerV2/src/node.ts
View File

@ -14,7 +14,8 @@ import {
NODE_DEFAULT_NAME, NODE_DEFAULT_NAME,
AssignStartUserHandlerType, AssignStartUserHandlerType,
AssignEmptyHandlerType, AssignEmptyHandlerType,
FieldPermissionType FieldPermissionType,
ListenerMap
} from './consts' } from './consts'
import { parseFormFields } from '@/components/FormCreate/src/utils/index' import { parseFormFields } from '@/components/FormCreate/src/utils/index'
export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> { export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
@ -136,6 +137,18 @@ export type UserTaskFormType = {
timeDuration?: number timeDuration?: number
maxRemindCount?: number maxRemindCount?: number
buttonsSetting: any[] buttonsSetting: any[]
taskCreateListenerEnable?: boolean
taskCreateListenerPath?: string
taskCreateListenerHeader?: ListenerMap[]
taskCreateListenerBody?: ListenerMap[]
taskAssignListenerEnable?: boolean
taskAssignListenerPath?: string
taskAssignListenerHeader?: ListenerMap[]
taskAssignListenerBody?: ListenerMap[]
taskCompleteListenerEnable?: boolean
taskCompleteListenerPath?: string
taskCompleteListenerHeader?: ListenerMap[]
taskCompleteListenerBody?: ListenerMap[]
} }
export type CopyTaskFormType = { export type CopyTaskFormType = {

282
src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
View File

@ -436,133 +436,119 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="监听器" name="listener"> <el-tab-pane label="监听器" name="listener">
<div> <div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
<el-form label-position="top"> <el-form label-position="top">
<el-divider content-position="left"> <div>
<el-text tag="b" size="large">创建任务</el-text> <el-divider content-position="left">
</el-divider> <el-text tag="b" size="large">{{ listener.name }}</el-text>
<!-- TODO @lesan：createTaskListenerEnable、createTaskListenerPath 等 idea 红色的告警！ --> </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-form-item>
<el-alert <el-switch
title="仅支持 POST 请求，以请求体方式接收参数" v-model="configForm[`task${listener.type}ListenerEnable`]"
type="warning" active-text="开启"
show-icon inactive-text="关闭"
:closable="false"
/> />
</el-form-item> </el-form-item>
<el-form-item label="请求地址" prop="createTaskListenerPath"> <div v-if="configForm[`task${listener.type}ListenerEnable`]">
<el-input v-model="configForm.createTaskListenerPath" /> <el-form-item>
</el-form-item> <el-alert
<el-form-item label="请求头" prop="createTaskListenerHeader"> title="仅支持 POST 请求，以请求体方式接收参数"
<div type="warning"
class="flex pt-2" show-icon
v-for="(item, index) in configForm.createTaskListenerHeader" :closable="false"
:key="index" />
> </el-form-item>
<!-- TODO @lesan：css 尽量用 unocss 哈 --> <el-form-item label="请求地址">
<div class="mr-2"> <el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
<el-input v-model="item.key" style="width: 160px" /> </el-form-item>
</div> <el-form-item label="请求头">
<div class="mr-2"> <div
<el-select v-model="item.type" style="width: 100px"> class="flex pt-2"
<el-option v-for="(item, index) in configForm[`task${listener.type}ListenerHeader`]"
v-for="types in LISTENER_MAP_TYPES" :key="index"
:key="types.value" >
:label="types.label" <div class="mr-2">
:value="types.value" <el-input class="w-160px" v-model="item.key" />
</div>
<div class="mr-2">
<el-select class="w-100px!" v-model="item.type">
<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 class="w-160px" v-model="item.value" />
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="
deleteTaskListenerMap(
configForm[`task${listener.type}ListenerHeader`],
index
)
"
/> />
</el-select> </div>
</div> </div>
<div class="mr-2"> <el-button
<el-input v-model="item.value" style="width: 160px" /> type="primary"
</div> text
<div class="mr-1 flex items-center"> @click="addTaskListenerMap(configForm[`task${listener.type}ListenerHeader`])"
<Icon >
icon="ep:delete" <Icon icon="ep:plus" class="mr-5px" />添加一行
:size="18" </el-button>
@click="deleteTaskListenerMap(configForm.createTaskListenerHeader, index)" </el-form-item>
/> <el-form-item label="请求体">
</div> <div
</div> class="flex pt-2"
<el-button v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
type="primary" :key="index"
text >
@click="addTaskListenerMap(configForm.createTaskListenerHeader)" <div class="mr-2">
> <el-input class="w-160px" v-model="item.key" />
<Icon icon="ep:plus" class="mr-5px" />添加一行 </div>
</el-button> <div class="mr-2">
</el-form-item> <el-select class="w-100px!" v-model="item.type">
<el-form-item label="请求体" prop="createTaskListenerBody"> <el-option
<div v-for="types in LISTENER_MAP_TYPES"
class="flex pt-2" :key="types.value"
v-for="(item, index) in configForm.createTaskListenerBody" :label="types.label"
:key="index" :value="types.value"
> />
<div class="mr-2"> </el-select>
<el-input v-model="item.key" style="width: 160px" /> </div>
</div> <div class="mr-2">
<div class="mr-2"> <el-input class="w-160px" v-model="item.value" />
<el-select v-model="item.type" style="width: 100px"> </div>
<el-option <div class="mr-1 flex items-center">
v-for="types in LISTENER_MAP_TYPES" <Icon
:key="types.value" icon="ep:delete"
:label="types.label" :size="18"
:value="types.value" @click="
deleteTaskListenerMap(
configForm[`task${listener.type}ListenerBody`],
index
)
"
/> />
</el-select> </div>
</div> </div>
<div class="mr-2"> <el-button
<el-input v-model="item.value" style="width: 160px" /> type="primary"
</div> text
<div class="mr-1 flex items-center"> @click="addTaskListenerMap(configForm[`task${listener.type}ListenerBody`])"
<Icon >
icon="ep:delete" <Icon icon="ep:plus" class="mr-5px" />添加一行
:size="18" </el-button>
@click="deleteTaskListenerMap(configForm.createTaskListenerBody, index)" </el-form-item>
/> </div>
</div>
</div>
<el-button
type="primary"
text
@click="addTaskListenerMap(configForm.createTaskListenerBody)"
>
<Icon icon="ep:plus" class="mr-5px" />添加一行
</el-button>
</el-form-item>
</div> </div>
<!-- TODO lesan：待实现 -->
<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>
<!-- TODO lesan：待实现 -->
<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> </el-form>
</div> </div>
</el-tab-pane> </el-tab-pane>
@ -693,6 +679,21 @@ const formRules = reactive({
assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }], assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
assignStartUserHandlerType: [{ required: true }] assignStartUserHandlerType: [{ required: true }]
}) })
// 监听器数组
const taskListener = ref([
{
name: '创建任务',
type: 'Create'
},
{
name: '指派任务执行人员',
type: 'Assign'
},
{
name: '完成任务',
type: 'Complete'
}
])
const { const {
configForm: tempConfigForm, configForm: tempConfigForm,
@ -796,11 +797,25 @@ const saveConfig = async () => {
// 设置按钮权限 // 设置按钮权限
currentNode.value.buttonsSetting = buttonsSetting.value currentNode.value.buttonsSetting = buttonsSetting.value
// 创建任务监听器 // 创建任务监听器
currentNode.value.createTaskListener = { currentNode.value.taskCreateListener = {
enable: configForm.value.createTaskListenerEnable, enable: configForm.value.taskCreateListenerEnable ?? false,
path: configForm.value.createTaskListenerPath, path: configForm.value.taskCreateListenerPath,
header: configForm.value.createTaskListenerHeader, header: configForm.value.taskCreateListenerHeader,
body: configForm.value.createTaskListenerBody body: configForm.value.taskCreateListenerBody
}
// 指派任务监听器
currentNode.value.taskAssignListener = {
enable: configForm.value.taskAssignListenerEnable ?? false,
path: configForm.value.taskAssignListenerPath,
header: configForm.value.taskAssignListenerHeader,
body: configForm.value.taskAssignListenerBody
}
// 完成任务监听器
currentNode.value.taskCompleteListener = {
enable: configForm.value.taskCompleteListenerEnable ?? false,
path: configForm.value.taskCompleteListenerPath,
header: configForm.value.taskCompleteListenerHeader,
body: configForm.value.taskCompleteListenerBody
} }
currentNode.value.showText = showText currentNode.value.showText = showText
@ -853,11 +868,22 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
// 4. 表单字段权限配置 // 4. 表单字段权限配置
getNodeConfigFormFields(node.fieldsPermission) getNodeConfigFormFields(node.fieldsPermission)
// 5. 创建任务监听器 // 5. 监听器
configForm.value.createTaskListenerEnable = node.createTaskListener.enable // 5.1 创建任务
configForm.value.createTaskListenerPath = node.createTaskListener.path configForm.value.taskCreateListenerEnable = node.taskCreateListener!.enable
configForm.value.createTaskListenerHeader = node.createTaskListener.header ?? [] configForm.value.taskCreateListenerPath = node.taskCreateListener!.path
configForm.value.createTaskListenerBody = node.createTaskListener.body ?? [] configForm.value.taskCreateListenerHeader = node.taskCreateListener?.header ?? []
configForm.value.taskCreateListenerBody = node.taskCreateListener?.body ?? []
// 5.2 指派任务
configForm.value.taskAssignListenerEnable = node.taskAssignListener!.enable
configForm.value.taskAssignListenerPath = node.taskAssignListener!.path
configForm.value.taskAssignListenerHeader = node.taskAssignListener?.header ?? []
configForm.value.taskAssignListenerBody = node.taskAssignListener?.body ?? []
// 5.3 完成任务
configForm.value.taskCompleteListenerEnable = node.taskCompleteListener!.enable
configForm.value.taskCompleteListenerPath = node.taskCompleteListener!.path
configForm.value.taskCompleteListenerHeader = node.taskCompleteListener?.header ?? []
configForm.value.taskCompleteListenerBody = node.taskCompleteListener?.body ?? []
} }
defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件 defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件