From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue | 277 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 277 insertions(+), 0 deletions(-)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue
new file mode 100644
index 0000000..7ef092d
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue
@@ -0,0 +1,277 @@
+<template>
+ <el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
+ <el-form-item label="閰嶇疆鏂瑰紡" prop="conditionType">
+ <el-radio-group v-model="condition.conditionType" @change="changeConditionType">
+ <el-radio
+ v-for="(dict, indexConditionType) in conditionConfigTypes"
+ :key="indexConditionType"
+ :value="dict.value"
+ :label="dict.value"
+ >
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item
+ v-if="condition.conditionType === ConditionType.RULE && condition.conditionGroups"
+ label="鏉′欢瑙勫垯"
+ >
+ <div class="condition-group-tool">
+ <div class="flex items-center">
+ <div class="mr-4">鏉′欢缁勫叧绯�</div>
+ <el-switch
+ v-model="condition.conditionGroups.and"
+ inline-prompt
+ active-text="涓�"
+ inactive-text="鎴�"
+ />
+ </div>
+ </div>
+ <el-space direction="vertical" :spacer="condition.conditionGroups.and ? '涓�' : '鎴�'">
+ <el-card
+ class="condition-group"
+ style="width: 530px"
+ v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+ :key="cIdx"
+ >
+ <div
+ class="condition-group-delete"
+ v-if="condition.conditionGroups.conditions.length > 1"
+ >
+ <Icon
+ color="#0089ff"
+ icon="ep:circle-close-filled"
+ :size="18"
+ @click="deleteConditionGroup(condition.conditionGroups.conditions, 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="equation.and"
+ inline-prompt
+ active-text="涓�"
+ inactive-text="鎴�"
+ />
+ </div>
+ </div>
+ </template>
+
+ <div class="flex pt-2" v-for="(rule, rIdx) in equation.rules" :key="rIdx">
+ <div class="mr-2">
+ <el-form-item
+ :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
+ :rules="{
+ required: true,
+ message: '宸﹀�间笉鑳戒负绌�',
+ trigger: 'change'
+ }"
+ >
+ <el-select style="width: 160px" v-model="rule.leftSide" clearable>
+ <el-option
+ v-for="(field, fIdx) in fieldOptions"
+ :key="fIdx"
+ :label="field.title"
+ :value="field.field"
+ :disabled="!field.required"
+ >
+ <el-tooltip
+ content="琛ㄥ崟瀛楁闈炲繀濉椂涓嶈兘浣滀负娴佺▼鍒嗘敮鏉′欢"
+ effect="dark"
+ placement="right-start"
+ v-if="!field.required"
+ >
+ <span>{{ field.title }}</span>
+ </el-tooltip>
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </div>
+ <div class="mr-2">
+ <el-select v-model="rule.opCode" style="width: 100px">
+ <el-option
+ v-for="operator in COMPARISON_OPERATORS"
+ :key="operator.value"
+ :label="operator.label"
+ :value="operator.value"
+ />
+ </el-select>
+ </div>
+ <div class="mr-2">
+ <el-form-item
+ :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
+ :rules="{
+ required: true,
+ message: '鍙冲�间笉鑳戒负绌�',
+ trigger: 'blur'
+ }"
+ >
+ <el-input v-model="rule.rightSide" style="width: 160px" />
+ </el-form-item>
+ </div>
+ <div class="mr-1 flex items-center" v-if="equation.rules.length > 1">
+ <Icon icon="ep:delete" :size="18" @click="deleteConditionRule(equation, rIdx)" />
+ </div>
+ <div class="flex items-center">
+ <Icon icon="ep:plus" :size="18" @click="addConditionRule(equation, rIdx)" />
+ </div>
+ </div>
+ </el-card>
+ </el-space>
+ <div title="娣诲姞鏉′欢缁�" class="mt-4 cursor-pointer">
+ <Icon
+ color="#0089ff"
+ icon="ep:plus"
+ :size="24"
+ @click="addConditionGroup(condition.conditionGroups?.conditions)"
+ />
+ </div>
+ </el-form-item>
+ <el-form-item
+ v-if="condition.conditionType === ConditionType.EXPRESSION"
+ label="鏉′欢琛ㄨ揪寮�"
+ prop="conditionExpression"
+ >
+ <el-input
+ type="textarea"
+ v-model="condition.conditionExpression"
+ clearable
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-form>
+</template>
+
+<script setup lang="ts">
+import {
+ COMPARISON_OPERATORS,
+ CONDITION_CONFIG_TYPES,
+ ConditionType,
+ DEFAULT_CONDITION_GROUP_VALUE
+} from '../../consts'
+import { BpmModelFormType } from '@/utils/constants'
+import { useFormFieldsAndStartUser } from '../../node'
+import { cloneDeep } from 'lodash-es'
+
+const props = defineProps({
+ modelValue: {
+ type: Object,
+ required: true
+ }
+})
+const emit = defineEmits(['update:modelValue'])
+const condition = computed({
+ get() {
+ return props.modelValue
+ },
+ set(newValue) {
+ emit('update:modelValue', newValue)
+ }
+})
+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 fieldOptions = useFormFieldsAndStartUser()
+
+// 琛ㄥ崟鏍￠獙瑙勫垯
+const formRules = reactive({
+ conditionType: [{ required: true, message: '閰嶇疆鏂瑰紡涓嶈兘涓虹┖', trigger: 'blur' }],
+ conditionExpression: [{ required: true, message: '鏉′欢琛ㄨ揪寮忎笉鑳戒负绌�', trigger: 'blur' }]
+})
+const formRef = ref() // 琛ㄥ崟 Ref
+
+/** 鍒囨崲鏉′欢閰嶇疆鏂瑰紡 */
+const changeConditionType = () => {
+ if (condition.value.conditionType === ConditionType.RULE) {
+ if (!condition.value.conditionGroups) {
+ condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+ }
+ }
+}
+const deleteConditionGroup = (conditions, index) => {
+ conditions.splice(index, 1)
+}
+
+const deleteConditionRule = (condition, index) => {
+ condition.rules.splice(index, 1)
+}
+
+const addConditionRule = (condition, index) => {
+ const rule = {
+ opCode: '==',
+ leftSide: '',
+ rightSide: ''
+ }
+ condition.rules.splice(index + 1, 0, rule)
+}
+
+const addConditionGroup = (conditions) => {
+ const condition = {
+ and: true,
+ rules: [
+ {
+ opCode: '==',
+ leftSide: '',
+ rightSide: ''
+ }
+ ]
+ }
+ conditions.push(condition)
+}
+
+const validate = async () => {
+ if (!formRef) return false
+ return await formRef.value.validate()
+}
+
+defineExpose({ validate })
+</script>
+
+<style lang="scss" scoped>
+.condition-group-tool {
+ display: flex;
+ justify-content: space-between;
+ width: 500px;
+ margin-bottom: 20px;
+}
+
+.condition-group {
+ position: relative;
+
+ &:hover {
+ border-color: #0089ff;
+
+ .condition-group-delete {
+ opacity: 1;
+ }
+ }
+
+ .condition-group-delete {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ cursor: pointer;
+ opacity: 0;
+ }
+}
+
+::v-deep(.el-card__header) {
+ padding: 8px var(--el-card-padding);
+ border-bottom: 1px solid var(--el-card-border-color);
+ box-sizing: border-box;
+}
+</style>
--
Gitblit v1.8.0