lxd/FlowBL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vue3 重构：form 和 model 编辑器，调整路由

Browse Source
This commit is contained in:
YunaiV 2023-03-25 19:45:56 +08:00
parent 9e798fb7f8
commit d0ed5edb6e
3 changed files with 29 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/modules/remaining.ts
View File

@ -225,7 +225,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [ children: [
{ {
path: '/manager/form/edit', path: '/manager/form/edit',
component: () => import('@/views/bpm/form/FormEditor.vue'), component: () => import('@/views/bpm/form/editor/index.vue'),
name: 'bpmFormEditor', name: 'bpmFormEditor',
meta: { meta: {
noCache: true, noCache: true,
@ -237,14 +237,14 @@ const remainingRouter: AppRouteRecordRaw[] = [
}, },
{ {
path: '/manager/model/edit', path: '/manager/model/edit',
component: () => import('@/views/bpm/model/modelEditor.vue'), component: () => import('@/views/bpm/model/editor/index.vue'),
name: 'modelEditor', name: 'modelEditor',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
canTo: true, canTo: true,
title: '设计流程', title: '设计流程',
activeMenu: 'bpm/manager/model/design' activeMenu: '/bpm/manager/model'
} }
}, },
{ {

0
src/views/bpm/form/FormEditor.vue → src/views/bpm/form/editor/index.vue
View File

68
src/views/bpm/model/modelEditor.vue → src/views/bpm/model/editor/index.vue
View File

@ -1,25 +1,27 @@
<template> <template>
<!-- 流程设计器，负责绘制流程等 --> <ContentWrap>
<my-process-designer <!-- 流程设计器，负责绘制流程等 -->
key="designer" <my-process-designer
v-if="xmlString !== undefined" key="designer"
v-model="xmlString" v-if="xmlString !== undefined"
:value="xmlString" v-model="xmlString"
v-bind="controlForm" :value="xmlString"
keyboard v-bind="controlForm"
ref="processDesigner" keyboard
@init-finished="initModeler" ref="processDesigner"
:additionalModel="controlForm.additionalModel" @init-finished="initModeler"
@save="save" :additionalModel="controlForm.additionalModel"
/> @save="save"
<!-- 流程属性器，负责编辑每个流程节点的属性 --> />
<my-properties-panel <!-- 流程属性器，负责编辑每个流程节点的属性 -->
key="penal" <my-properties-panel
:bpmnModeler="modeler" key="penal"
:prefix="controlForm.prefix" :bpmnModeler="modeler"
class="process-panel" :prefix="controlForm.prefix"
:model="model" class="process-panel"
/> :model="model"
/>
</ContentWrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -34,7 +36,7 @@ const { query } = useRoute() // 路由的查询
const message = useMessage() // 国际化 const message = useMessage() // 国际化
const xmlString = ref(undefined) // BPMN XML const xmlString = ref(undefined) // BPMN XML
const modeler = ref(null) const modeler = ref(null) // BPMN Modeler
const controlForm = ref({ const controlForm = ref({
simulation: true, simulation: true,
labelEditing: false, labelEditing: false,
@ -92,27 +94,9 @@ onMounted(async () => {
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
.control-form {
.el-radio {
width: 100%;
line-height: 32px;
}
}
.element-overlays {
box-sizing: border-box;
padding: 8px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
color: #fafafa;
}
.my-process-designer {
height: calc(100vh - 84px);
}
.process-panel__container { .process-panel__container {
position: absolute; position: absolute;
right: 0; right: 60px;
top: 55px; top: 90px;
height: calc(100vh - 84px);
} }
</style> </style>