update 完善流程线

This commit is contained in:
LiuHao 2024-02-01 15:19:39 +08:00
parent ed67a79951
commit bdfb55ae78

View File

@ -1,21 +1,47 @@
<template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<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.conditionExpression" @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-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
<ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
</el-form>
<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.conditionExpression" @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">
@ -23,9 +49,9 @@ import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
import { Modeler, Element } from 'bpmn';
import { SequenceFlowPanel } from 'bpmnDesign';
import useModelerStore from '@/store/modules/modeler';
interface PropType {
modeler: Modeler;
element: Element;
}
const props = withDefaults(defineProps<PropType>(), {});
@ -35,7 +61,8 @@ const { nameChange, idChange, updateProperties } = usePanel({
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>({
@ -46,7 +73,7 @@ const formRules = ref<ElFormRules>({
const conditionExpressionChange = (val: string) => {
if (val) {
const newCondition = props.modeler.get('moddle').create('bpmn:FormalExpression', { body: val });
const newCondition = moddle.create('bpmn:FormalExpression', { body: val });
updateProperties({ conditionExpression: newCondition });
} else {
updateProperties({ conditionExpression: null });