feat: ConditionNodeConfig使用Condition组件
Lesan
parent
96d1fcedde
commit
dd72d35fe4
|
|
@ -67,6 +67,7 @@ import {
|
|||
ApproveMethodType,
|
||||
AssignEmptyHandlerType,
|
||||
AssignStartUserHandlerType,
|
||||
ConditionType,
|
||||
NODE_DEFAULT_NAME,
|
||||
NodeType,
|
||||
RejectHandlerType,
|
||||
|
|
@ -163,7 +164,7 @@ const addNode = (type: number) => {
|
|||
showText: '',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
conditionType: 1,
|
||||
conditionType: ConditionType.RULE,
|
||||
defaultFlow: false
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -30,117 +30,7 @@
|
|||
>未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div
|
||||
>
|
||||
<div v-else>
|
||||
<el-form ref="formRef" :model="currentNode" :rules="formRules" label-position="top">
|
||||
<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>
|
||||
<Condition ref="conditionRef" v-model="condition" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -155,33 +45,17 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
SimpleFlowNode,
|
||||
CONDITION_CONFIG_TYPES,
|
||||
ConditionType,
|
||||
COMPARISON_OPERATORS,
|
||||
ConditionGroup,
|
||||
Condition,
|
||||
ConditionRule,
|
||||
ProcessVariableEnum
|
||||
} from '../consts'
|
||||
import { getDefaultConditionNodeName } from '../utils'
|
||||
import { useFormFields } from '../node'
|
||||
import { BpmModelFormType } from '@/utils/constants'
|
||||
import Condition from './components/Condition.vue'
|
||||
const message = useMessage() // 消息弹窗
|
||||
defineOptions({
|
||||
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({
|
||||
conditionNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
|
|
@ -193,11 +67,26 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
const settingVisible = ref(false)
|
||||
const condition = ref<any>()
|
||||
const open = () => {
|
||||
if (currentNode.value.conditionType === ConditionType.RULE) {
|
||||
if (currentNode.value.conditionGroups) {
|
||||
conditionGroups.value = currentNode.value.conditionGroups
|
||||
condition.value = {
|
||||
conditionType: currentNode.value.conditionType,
|
||||
conditionExpression: currentNode.value.conditionExpression ?? '',
|
||||
conditionGroups: currentNode.value.conditionGroups ?? {
|
||||
and: true,
|
||||
conditions: [
|
||||
{
|
||||
and: true,
|
||||
rules: [
|
||||
{
|
||||
opCode: '==',
|
||||
leftSide: '',
|
||||
rightSide: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
settingVisible.value = true
|
||||
}
|
||||
|
|
@ -239,31 +128,27 @@ const handleClose = async (done: (cancel?: boolean) => void) => {
|
|||
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 () => {
|
||||
if (!currentNode.value.defaultFlow) {
|
||||
// 校验表单
|
||||
if (!formRef) return false
|
||||
const valid = await formRef.value.validate()
|
||||
const valid = await conditionRef.value.validate()
|
||||
if (!valid) return false
|
||||
const showText = getShowText()
|
||||
if (!showText) {
|
||||
return false
|
||||
}
|
||||
currentNode.value.showText = showText
|
||||
currentNode.value.conditionType = condition.value.conditionType
|
||||
if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
|
||||
currentNode.value.conditionGroups = undefined
|
||||
currentNode.value.conditionExpression = condition.value.conditionExpression
|
||||
}
|
||||
if (currentNode.value.conditionType === ConditionType.RULE) {
|
||||
currentNode.value.conditionExpression = undefined
|
||||
currentNode.value.conditionGroups = conditionGroups.value
|
||||
currentNode.value.conditionGroups = condition.value.conditionGroups
|
||||
}
|
||||
}
|
||||
settingVisible.value = false
|
||||
|
|
@ -271,16 +156,16 @@ const saveConfig = async () => {
|
|||
}
|
||||
const getShowText = (): string => {
|
||||
let showText = ''
|
||||
if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
|
||||
if (currentNode.value.conditionExpression) {
|
||||
showText = `表达式：${currentNode.value.conditionExpression}`
|
||||
if (condition.value.conditionType === ConditionType.EXPRESSION) {
|
||||
if (condition.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
|
||||
const conditionGroup = conditionGroups.value.conditions.map((item) => {
|
||||
const conditionGroup = condition.value.conditionGroups.conditions.map((item) => {
|
||||
return (
|
||||
'(' +
|
||||
item.rules
|
||||
|
|
@ -309,60 +194,7 @@ const getShowText = (): string => {
|
|||
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 fieldOptions = computed(() => {
|
||||
const fieldsCopy = fieldsInfo.slice()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<!-- TODO @lesan：其它路由条件，可以使用这个哇？ -->
|
||||
<template>
|
||||
<el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
|
||||
<el-form-item label="配置方式" prop="conditionType">
|
||||
|
|
@ -118,8 +117,8 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
CONDITION_CONFIG_TYPES,
|
||||
COMPARISON_OPERATORS,
|
||||
CONDITION_CONFIG_TYPES,
|
||||
ConditionType,
|
||||
ProcessVariableEnum
|
||||
} from '../../consts'
|
||||
|
|
@ -200,6 +199,13 @@ const addConditionGroup = (conditions) => {
|
|||
}
|
||||
conditions.push(condition)
|
||||
}
|
||||
|
||||
const validate = async () => {
|
||||
if (!formRef) return false
|
||||
return await formRef.value.validate();
|
||||
}
|
||||
|
||||
defineExpose({validate})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue