Skip to content

phsl / admin

Go to a project
Commit dd72d35f by Lesan
Options

feat: ConditionNodeConfig使用Condition组件

parent 96d1fced
Showing with 44 additions and 205 deletions
src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
...@@ -67,12 +67,13 @@ import { ...@@ -67,12 +67,13 @@ import {
ApproveMethodType, ApproveMethodType,
AssignEmptyHandlerType, AssignEmptyHandlerType,
AssignStartUserHandlerType, AssignStartUserHandlerType,
ConditionType,
NODE_DEFAULT_NAME, NODE_DEFAULT_NAME,
NodeType, NodeType,
RejectHandlerType, RejectHandlerType,
SimpleFlowNode SimpleFlowNode
} from './consts' } from './consts'
import { generateUUID } from '@/utils' import {generateUUID} from '@/utils'
defineOptions({ defineOptions({
name: 'NodeHandler' name: 'NodeHandler'
...@@ -163,7 +164,7 @@ const addNode = (type: number) => { ...@@ -163,7 +164,7 @@ const addNode = (type: number) => {
showText: '', showText: '',
type: NodeType.CONDITION_NODE, type: NodeType.CONDITION_NODE,
childNode: undefined, childNode: undefined,
conditionType: 1, conditionType: ConditionType.RULE,
defaultFlow: false defaultFlow: false
}, },
{ {
......
src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
...@@ -30,117 +30,7 @@ ...@@ -30,117 +30,7 @@
>未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div >未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div
> >
<div v-else> <div v-else>
<el-form ref="formRef" :model="currentNode" :rules="formRules" label-position="top"> <Condition ref="conditionRef" v-model="condition" />
<el-form-item label="配置方式" prop="conditionType">
<el-radio-group v-model="currentNode.conditionType" @change="changeConditionType">
<el-radio
v-for="(dict, index) in conditionConfigTypes"
:key="index"
:value="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="currentNode.conditionType === 1"
label="条件表达式"
prop="conditionExpression"
>
<el-input
type="textarea"
v-model="currentNode.conditionExpression"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item v-if="currentNode.conditionType === 2" label="条件规则">
<div class="condition-group-tool">
<div class="flex items-center">
<div class="mr-4">条件组关系</div>
<el-switch
v-model="conditionGroups.and"
inline-prompt
active-text="且"
inactive-text="或"
/>
</div>
</div>
<el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
<el-card
class="condition-group"
style="width: 530px"
v-for="(condition, cIdx) in conditionGroups.conditions"
:key="cIdx"
>
<div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
<Icon
color="#0089ff"
icon="ep:circle-close-filled"
:size="18"
@click="deleteConditionGroup(cIdx)"
/>
</div>
<template #header>
<div class="flex items-center justify-between">
<div>条件组</div>
<div class="flex">
<div class="mr-4">规则关系</div>
<el-switch
v-model="condition.and"
inline-prompt
active-text="且"
inactive-text="或"
/>
</div>
</div>
</template>
<div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
<div class="mr-2">
<el-select style="width: 160px" v-model="rule.leftSide">
<el-option
v-for="(item, index) in fieldOptions"
:key="index"
:label="item.title"
:value="item.field"
:disabled="!item.required"
/>
</el-select>
</div>
<div class="mr-2">
<el-select v-model="rule.opCode" style="width: 100px">
<el-option
v-for="item in COMPARISON_OPERATORS"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="mr-2">
<el-input v-model="rule.rightSide" style="width: 160px" />
</div>
<div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
<Icon
icon="ep:delete"
:size="18"
@click="deleteConditionRule(condition, rIdx)"
/>
</div>
<div class="flex items-center">
<Icon icon="ep:plus" :size="18" @click="addConditionRule(condition, rIdx)" />
</div>
</div>
</el-card>
</el-space>
<div title="添加条件组" class="mt-4 cursor-pointer">
<Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup" />
</div>
</el-form-item>
</el-form>
</div> </div>
</div> </div>
<template #footer> <template #footer>
...@@ -155,33 +45,17 @@ ...@@ -155,33 +45,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
SimpleFlowNode, SimpleFlowNode,
CONDITION_CONFIG_TYPES,
ConditionType, ConditionType,
COMPARISON_OPERATORS, COMPARISON_OPERATORS,
ConditionGroup,
Condition,
ConditionRule,
ProcessVariableEnum ProcessVariableEnum
} from '../consts' } from '../consts'
import { getDefaultConditionNodeName } from '../utils' import { getDefaultConditionNodeName } from '../utils'
import { useFormFields } from '../node' import { useFormFields } from '../node'
import { BpmModelFormType } from '@/utils/constants' import Condition from './components/Condition.vue'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
defineOptions({ defineOptions({
name: 'ConditionNodeConfig' name: 'ConditionNodeConfig'
}) })
const formType = inject<Ref<number>>('formType') // 表单类型
const conditionConfigTypes = computed(() => {
return CONDITION_CONFIG_TYPES.filter((item) => {
// 业务表单暂时去掉条件规则选项
if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
return false
} else {
return true
}
})
})
const props = defineProps({ const props = defineProps({
conditionNode: { conditionNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
...@@ -193,11 +67,26 @@ const props = defineProps({ ...@@ -193,11 +67,26 @@ const props = defineProps({
} }
}) })
const settingVisible = ref(false) const settingVisible = ref(false)
const condition = ref<any>()
const open = () => { const open = () => {
if (currentNode.value.conditionType === ConditionType.RULE) { condition.value = {
if (currentNode.value.conditionGroups) { conditionType: currentNode.value.conditionType,
conditionGroups.value = currentNode.value.conditionGroups conditionExpression: currentNode.value.conditionExpression ?? '',
conditionGroups: currentNode.value.conditionGroups ?? {
and: true,
conditions: [
{
and: true,
rules: [
{
opCode: '==',
leftSide: '',
rightSide: ''
} }
]
}
]
},
} }
settingVisible.value = true settingVisible.value = true
} }
...@@ -239,31 +128,27 @@ const handleClose = async (done: (cancel?: boolean) => void) => { ...@@ -239,31 +128,27 @@ const handleClose = async (done: (cancel?: boolean) => void) => {
done() done()
} }
} }
// 表单校验规则
const formRules = reactive({
conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const conditionRef = ref()
// 保存配置 // 保存配置
const saveConfig = async () => { const saveConfig = async () => {
if (!currentNode.value.defaultFlow) { if (!currentNode.value.defaultFlow) {
// 校验表单 // 校验表单
if (!formRef) return false const valid = await conditionRef.value.validate()
const valid = await formRef.value.validate()
if (!valid) return false if (!valid) return false
const showText = getShowText() const showText = getShowText()
if (!showText) { if (!showText) {
return false return false
} }
currentNode.value.showText = showText currentNode.value.showText = showText
currentNode.value.conditionType = condition.value.conditionType
if (currentNode.value.conditionType === ConditionType.EXPRESSION) { if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
currentNode.value.conditionGroups = undefined currentNode.value.conditionGroups = undefined
currentNode.value.conditionExpression = condition.value.conditionExpression
} }
if (currentNode.value.conditionType === ConditionType.RULE) { if (currentNode.value.conditionType === ConditionType.RULE) {
currentNode.value.conditionExpression = undefined currentNode.value.conditionExpression = undefined
currentNode.value.conditionGroups = conditionGroups.value currentNode.value.conditionGroups = condition.value.conditionGroups
} }
} }
settingVisible.value = false settingVisible.value = false
...@@ -271,16 +156,16 @@ const saveConfig = async () => { ...@@ -271,16 +156,16 @@ const saveConfig = async () => {
} }
const getShowText = (): string => { const getShowText = (): string => {
let showText = '' let showText = ''
if (currentNode.value.conditionType === ConditionType.EXPRESSION) { if (condition.value.conditionType === ConditionType.EXPRESSION) {
if (currentNode.value.conditionExpression) { if (condition.value.conditionExpression) {
showText = `表达式：${currentNode.value.conditionExpression}` showText = `表达式：${condition.value.conditionExpression}`
} }
} }
if (currentNode.value.conditionType === ConditionType.RULE) { if (condition.value.conditionType === ConditionType.RULE) {
// 条件组是否为与关系 // 条件组是否为与关系
const groupAnd = conditionGroups.value.and const groupAnd = condition.value.conditionGroups.and
let warningMesg: undefined | string = undefined let warningMesg: undefined | string = undefined
const conditionGroup = conditionGroups.value.conditions.map((item) => { const conditionGroup = condition.value.conditionGroups.conditions.map((item) => {
return ( return (
'(' + '(' +
item.rules item.rules
...@@ -309,60 +194,7 @@ const getShowText = (): string => { ...@@ -309,60 +194,7 @@ const getShowText = (): string => {
return showText return showText
} }
// 改变条件配置方式
const changeConditionType = () => {}
const conditionGroups = ref<ConditionGroup>({
and: true,
conditions: [
{
and: true,
rules: [
{
opCode: '==',
leftSide: '',
rightSide: ''
}
]
}
]
})
// 添加条件组
const addConditionGroup = () => {
const condition = {
and: true,
rules: [
{
type: 1,
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
}
]
}
conditionGroups.value.conditions.push(condition)
}
// 删除条件组
const deleteConditionGroup = (idx: number) => {
conditionGroups.value.conditions.splice(idx, 1)
}
// 添加条件规则
const addConditionRule = (condition: Condition, idx: number) => {
const rule: ConditionRule = {
opCode: '==',
leftSide: '',
rightSide: ''
}
condition.rules.splice(idx + 1, 0, rule)
}
const deleteConditionRule = (condition: Condition, idx: number) => {
condition.rules.splice(idx, 1)
}
const fieldsInfo = useFormFields() const fieldsInfo = useFormFields()
/** 条件规则可选择的表单字段 */ /** 条件规则可选择的表单字段 */
const fieldOptions = computed(() => { const fieldOptions = computed(() => {
const fieldsCopy = fieldsInfo.slice() const fieldsCopy = fieldsInfo.slice()
......
src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue
<!-- TODO @lesan：其它路由条件，可以使用这个哇？ -->
<template> <template>
<el-form ref="formRef" :model="condition" :rules="formRules" label-position="top"> <el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
<el-form-item label="配置方式" prop="conditionType"> <el-form-item label="配置方式" prop="conditionType">
...@@ -118,13 +117,13 @@ ...@@ -118,13 +117,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
CONDITION_CONFIG_TYPES,
COMPARISON_OPERATORS, COMPARISON_OPERATORS,
CONDITION_CONFIG_TYPES,
ConditionType, ConditionType,
ProcessVariableEnum ProcessVariableEnum
} from '../../consts' } from '../../consts'
import { BpmModelFormType } from '@/utils/constants' import {BpmModelFormType} from '@/utils/constants'
import { useFormFields } from '../../node' import {useFormFields} from '../../node'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
...@@ -200,6 +199,13 @@ const addConditionGroup = (conditions) => { ...@@ -200,6 +199,13 @@ const addConditionGroup = (conditions) => {
} }
conditions.push(condition) conditions.push(condition)
} }
const validate = async () => {
if (!formRef) return false
return await formRef.value.validate();
}
defineExpose({validate})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
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