update 更新开始面板和泳道面板样式

This commit is contained in:
LiuHao 2024-03-18 13:56:16 +08:00
parent b6415c21be
commit 12458177be
2 changed files with 74 additions and 22 deletions

View File

@ -1,16 +1,42 @@
<template> <template>
<div> <div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px"> <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-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input> <el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="name" label="节点名称"> <el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input> <el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
<ExecutionListener :element="element"></ExecutionListener>
</el-form> </el-form>
</div> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement'; import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
@ -30,7 +56,7 @@ const { parseData } = useParseElement({
}); });
const formData = ref(parseData<StartEndPanel>()); const formData = ref(parseData<StartEndPanel>());
const currentCollapseItem = ref(['1', '2']);
const formRules = ref<ElFormRules>({ const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }], id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }] name: [{ required: true, message: '请输入', trigger: 'blur' }]

View File

@ -1,16 +1,42 @@
<template> <template>
<div> <div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px"> <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-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input> <el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="name" label="节点名称"> <el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input> <el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
<ExecutionListener :element="element"></ExecutionListener>
</el-form> </el-form>
</div> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement'; import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
@ -30,7 +56,7 @@ const { parseData } = useParseElement({
}); });
const formData = ref(parseData<StartEndPanel>()); const formData = ref(parseData<StartEndPanel>());
const currentCollapseItem = ref(['1', '2']);
const formRules = ref<ElFormRules>({ const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }], id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }] name: [{ required: true, message: '请输入', trigger: 'blur' }]