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/ConditionDialog.vue | 309 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 309 insertions(+), 0 deletions(-)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
new file mode 100644
index 0000000..79816c6
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
@@ -0,0 +1,309 @@
+<!-- TODO @jason锛氭湁鍙兘锛屽畠閲岄潰濂� Condition 涔堬紵 -->
+<!-- TODO 鎬曞奖鍝嶅叾瀹冭妭鐐瑰姛鑳斤紝鍚庨潰鐪嬬湅濡備綍濡備綍澶嶇敤 Condtion -->
+<template>
+ <Dialog v-model="dialogVisible" title="鏉′欢閰嶇疆" width="600px" :fullscreen="false">
+ <div class="h-410px">
+ <el-scrollbar wrap-class="h-full">
+ <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">
+ <el-option
+ v-for="(field, fIdx) in fieldOptions"
+ :key="fIdx"
+ :label="field.title"
+ :value="field.field"
+ :disabled="!field.required"
+ />
+ </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="cursor-pointer mr-1 flex items-center"
+ v-if="equation.rules.length > 1"
+ >
+ <Icon
+ icon="ep:delete"
+ :size="18"
+ @click="deleteConditionRule(equation, rIdx)"
+ />
+ </div>
+ <div class="cursor-pointer 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>
+ </el-scrollbar>
+ </div>
+ <template #footer>
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ </template>
+ </Dialog>
+</template>
+
+<script setup lang="ts">
+import {
+ COMPARISON_OPERATORS,
+ CONDITION_CONFIG_TYPES,
+ ConditionType,
+ ConditionGroup,
+ DEFAULT_CONDITION_GROUP_VALUE
+} from '../../consts'
+import { BpmModelFormType } from '@/utils/constants'
+import { useFormFieldsAndStartUser } from '../../node'
+import { cloneDeep } from 'lodash-es'
+defineOptions({
+ name: 'ConditionDialog'
+})
+
+const condition = ref<{
+ conditionType: ConditionType
+ conditionExpression?: string
+ conditionGroups?: ConditionGroup
+}>({
+ conditionType: ConditionType.RULE,
+ conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE)
+})
+
+const emit = defineEmits<{
+ updateCondition: [condition: object]
+}>()
+const message = useMessage() // 娑堟伅寮圭獥
+const dialogVisible = ref(false) // 寮圭獥鐨勬槸鍚﹀睍绀�
+
+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 submitForm = async () => {
+ // 鏍￠獙琛ㄥ崟
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) {
+ message.warning('璇峰畬鍠勬潯浠惰鍒�')
+ return
+ }
+ dialogVisible.value = false
+ // 璁剧疆瀹岀殑鏉′欢浼犻�掔粰鐖剁粍浠�
+ emit('updateCondition', condition.value)
+}
+
+const open = (conditionObj: any | undefined) => {
+ if (conditionObj) {
+ condition.value.conditionType = conditionObj.conditionType
+ condition.value.conditionExpression = conditionObj.conditionExpression
+ condition.value.conditionGroups = conditionObj.conditionGroups
+ }
+ dialogVisible.value = true
+}
+
+defineExpose({ open })
+</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