From 6b988bd582bfcd17fee48c476a5a6e5cc172b0d5 Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期三, 12 三月 2025 10:08:33 +0800 Subject: [PATCH] dev-2 --- src/bpmn/panel/SequenceFlowPanel.vue | 95 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 95 insertions(+), 0 deletions(-) diff --git a/src/bpmn/panel/SequenceFlowPanel.vue b/src/bpmn/panel/SequenceFlowPanel.vue new file mode 100644 index 0000000..eac8227 --- /dev/null +++ b/src/bpmn/panel/SequenceFlowPanel.vue @@ -0,0 +1,95 @@ +<template> + <div> + <el-collapse v-model="currentCollapseItem"> + <el-collapse-item name="1"> + <template #title> + <div class="collapse__title"> + <el-icon> + <InfoFilled /> + </el-icon> + 甯歌 + </div> + </template> + <div> + <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px"> + <el-form-item prop="id" label="鑺傜偣 ID"> + <el-input v-model="formData.id" @change="idChange"> </el-input> + </el-form-item> + <el-form-item prop="name" label="鑺傜偣鍚嶇О"> + <el-input v-model="formData.name" @change="nameChange"> </el-input> + </el-form-item> + <el-form-item prop="conditionExpression" label="璺宠浆鏉′欢"> + <el-input v-model="formData.conditionExpressionValue" @change="conditionExpressionChange"> </el-input> + </el-form-item> + <el-form-item prop="skipExpression" label="璺宠繃琛ㄨ揪寮�"> + <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input> + </el-form-item> + </el-form> + </div> + </el-collapse-item> + + <el-collapse-item name="2"> + <template #title> + <div class="collapse__title"> + <el-icon> + <BellFilled /> + </el-icon> + 鎵ц鐩戝惉鍣� + </div> + </template> + <div> + <ExecutionListener :element="element"></ExecutionListener> + </div> + </el-collapse-item> + </el-collapse> + </div> +</template> +<script setup lang="ts"> +import useParseElement from '../hooks/useParseElement'; +import useModelerStore from '@/store/modules/modeler'; +import usePanel from '../hooks/usePanel'; +import ExecutionListener from './property/ExecutionListener.vue'; +import type { Modeler, ModdleElement } from 'bpmn'; +import type { SequenceFlowPanel } from 'bpmnDesign'; + +interface PropType { + element: ModdleElement; +} +const props = withDefaults(defineProps<PropType>(), {}); +const { nameChange, idChange, updateProperties } = usePanel({ + element: toRaw(props.element) +}); +const { parseData } = useParseElement({ + element: toRaw(props.element) +}); +const moddle = useModelerStore().getModdle(); +const currentCollapseItem = ref(['1', '2']); +const formData = ref(parseData<SequenceFlowPanel>()); + +const formRules = ref<ElFormRules>({ + processCategory: [{ required: true, message: '璇烽�夋嫨', trigger: 'blur' }], + id: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }], + name: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }] +}); + +const conditionExpressionChange = (val: string) => { + if (val) { + const newCondition = moddle.create('bpmn:FormalExpression', { body: val }); + updateProperties({ conditionExpression: newCondition }); + } else { + updateProperties({ conditionExpression: null }); + } +}; + +const skipExpressionChange = (val: string) => { + updateProperties({ 'flowable:skipExpression': val }); +}; + +onBeforeMount(() => { + if (formData.value.conditionExpression) { + formData.value.conditionExpressionValue = formData.value.conditionExpression.body; + } +}); +</script> + +<style lang="scss" scoped></style> -- Gitblit v1.9.3