Skip to content

phsl / admin

Go to a project
Commit 7683aa2e by Lesan
Options

feat: Simple设计器-监听器

parent 0da3a9bf
Showing with 183 additions and 134 deletions
src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
...@@ -128,7 +128,13 @@ const addNode = (type: number) => { ...@@ -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
} }
} }
......
src/components/SimpleProcessDesignerV2/src/consts.ts
...@@ -98,7 +98,11 @@ export interface SimpleFlowNode { ...@@ -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 = { ...@@ -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
......
src/components/SimpleProcessDesignerV2/src/node.ts
...@@ -14,7 +14,8 @@ import { ...@@ -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 = { ...@@ -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 = {
......
src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
...@@ -436,133 +436,119 @@ ...@@ -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 class="mr-2">
<el-input v-model="item.value" style="width: 160px" />
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="deleteTaskListenerMap(configForm.createTaskListenerHeader, index)"
/>
</div> </div>
</div> <el-button
<el-button type="primary"
type="primary" text
text @click="addTaskListenerMap(configForm[`task${listener.type}ListenerHeader`])"
@click="addTaskListenerMap(configForm.createTaskListenerHeader)" >
> <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="请求体" prop="createTaskListenerBody"> <div
<div class="flex pt-2"
class="flex pt-2" v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
v-for="(item, index) in configForm.createTaskListenerBody" :key="index"
:key="index" >
> <div class="mr-2">
<div class="mr-2"> <el-input class="w-160px" v-model="item.key" />
<el-input v-model="item.key" style="width: 160px" /> </div>
</div> <div class="mr-2">
<div class="mr-2"> <el-select class="w-100px!" v-model="item.type">
<el-select v-model="item.type" style="width: 100px"> <el-option
<el-option v-for="types in LISTENER_MAP_TYPES"
v-for="types in LISTENER_MAP_TYPES" :key="types.value"
:key="types.value" :label="types.label"
:label="types.label" :value="types.value"
: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}ListenerBody`],
index
)
"
/> />
</el-select> </div>
</div>
<div class="mr-2">
<el-input v-model="item.value" style="width: 160px" />
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="deleteTaskListenerMap(configForm.createTaskListenerBody, index)"
/>
</div> </div>
</div> <el-button
<el-button type="primary"
type="primary" text
text @click="addTaskListenerMap(configForm[`task${listener.type}ListenerBody`])"
@click="addTaskListenerMap(configForm.createTaskListenerBody)" >
> <Icon icon="ep:plus" class="mr-5px" />添加一行
<Icon icon="ep:plus" class="mr-5px" />添加一行 </el-button>
</el-button> </el-form-item>
</el-form-item> </div>
</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({ ...@@ -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 () => { ...@@ -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) => { ...@@ -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 }) // 暴露方法给父组件
......
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