Skip to content

Commit 9e798fb

Browse files
YunaiVYunaiV
committed
Vue3 重构：去除 modelEditor.vue 冗余代码
1 parent 7463eea commit 9e798fb

File tree

3 files changed

+60
-146
lines changed

3 files changed

+60
-146
lines changed

‎src/api/bpm/model/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const getModelPageApi = async (params) => {
2929
return await request.get({ url: '/bpm/model/page', params })
3030
}
3131

32-
export const getModelApi = async (id: number) => {
32+
export const getModel = async (id: number) => {
3333
return await request.get({ url: '/bpm/model/get?id=' + id })
3434
}
3535

‎src/views/bpm/model/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@ const handleFormDetail = async (row) => {
389389
const handleBpmnDetail = (row) => {
390390
// TODO 芋艿：流程组件开发中
391391
console.log(row)
392-
ModelApi.getModelApi(row).then((response) => {
392+
ModelApi.getModel(row).then((response) => {
393393
console.log(response, 'response')
394394
bpmnXML.value = response.bpmnXml
395395
// 弹窗打开
@@ -432,7 +432,7 @@ const handleUpdate = async (rowId: number) => {
432432
resetForm()
433433
await setDialogTile('edit')
434434
// 设置数据
435-
saveForm.value = await ModelApi.getModelApi(rowId)
435+
saveForm.value = await ModelApi.getModel(rowId)
436436
if (saveForm.value.category == null) {
437437
saveForm.value.category = 1
438438
} else {

‎src/views/bpm/model/modelEditor.vue

Lines changed: 57 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,40 @@
11
<template>
2-
<div class="app-container">
3-
<!-- 流程设计器，负责绘制流程等 -->
4-
<!-- <myProcessDesigner -->
5-
<my-process-designer
6-
:key="`designer-${reloadIndex}`"
7-
v-if="xmlString !== undefined"
8-
v-model="xmlString"
9-
:value="xmlString"
10-
v-bind="controlForm"
11-
keyboard
12-
ref="processDesigner"
13-
@init-finished="initModeler"
14-
:additionalModel="controlForm.additionalModel"
15-
@save="save"
16-
/>
17-
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
18-
<!-- <MyProcessPalette -->
19-
<my-properties-panel
20-
:key="`penal-${reloadIndex}`"
21-
:bpmnModeler="modeler"
22-
:prefix="controlForm.prefix"
23-
class="process-panel"
24-
:model="model"
25-
/>
26-
</div>
2+
<!-- 流程设计器，负责绘制流程等 -->
3+
<my-process-designer
4+
key="designer"
5+
v-if="xmlString !== undefined"
6+
v-model="xmlString"
7+
:value="xmlString"
8+
v-bind="controlForm"
9+
keyboard
10+
ref="processDesigner"
11+
@init-finished="initModeler"
12+
:additionalModel="controlForm.additionalModel"
13+
@save="save"
14+
/>
15+
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
16+
<my-properties-panel
17+
key="penal"
18+
:bpmnModeler="modeler"
19+
:prefix="controlForm.prefix"
20+
class="process-panel"
21+
:model="model"
22+
/>
2723
</template>
2824

2925
<script setup lang="ts">
30-
// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
3126
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
3227
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
3328
// 自定义左侧菜单（修改 默认任务 为 用户任务）
3429
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
35-
// import xmlObj2json from "./utils/xml2json";
36-
// import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
37-
// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
38-
import { createModelApi, getModelApi, updateModelApi, ModelVO } from '@/api/bpm/model'
30+
import * as ModelApi from '@/api/bpm/model'
3931
40-
const router = useRouter()
41-
const message = useMessage()
42-
43-
// 自定义侧边栏
44-
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
32+
const router = useRouter() // 路由
33+
const { query } = useRoute() // 路由的查询
34+
const message = useMessage() // 国际化
4535
4636
const xmlString = ref(undefined) // BPMN XML
4737
const modeler = ref(null)
48-
const reloadIndex = ref(0)
49-
// const controlDrawerVisible = ref(false)
50-
// const translationsSelf = translations
5138
const controlForm = ref({
5239
simulation: true,
5340
labelEditing: false,
@@ -56,128 +43,55 @@ const controlForm = ref({
5643
headerButtonSize: 'mini',
5744
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
5845
})
59-
// const addis = ref({
60-
// CustomContentPadProvider,
61-
// CustomPaletteProvider
62-
// })
63-
// 流程模型的信息
64-
const model = ref<ModelVO>()
65-
onMounted(() => {
66-
// 如果 modelId 非空，说明是修改流程模型
67-
const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
68-
console.log(modelId, 'modelId')
69-
if (modelId) {
70-
// let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
71-
getModelApi(modelId as unknown as number).then((data) => {
72-
console.log(data, 'response')
73-
xmlString.value = data.bpmnXml
74-
model.value = {
75-
...data,
76-
bpmnXml: undefined // 清空 bpmnXml 属性
77-
}
78-
// this.controlForm.processId = data.key
79-
80-
// xmlString.value =
81-
// '<?xml version="1.0" encoding="UTF-8"?>\n<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
46+
const model = ref<ModelApi.ModelVO>() // 流程模型的信息
8247
83-
// model.value = {
84-
// key: 'flowable_01',
85-
// name: 'flowable测试',
86-
// description: 'ooxx',
87-
// category: '1',
88-
// formType: 10,
89-
// formId: 11,
90-
// formCustomCreatePath: null,
91-
// formCustomViewPath: null,
92-
// id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
93-
// createTime: 1645978019795,
94-
// bpmnXml: undefined // 清空 bpmnXml 属性
95-
// }
96-
// console.log(modeler.value, 'modeler11111111')
97-
})
98-
}
99-
})
48+
/** 初始化 modeler */
10049
const initModeler = (item) => {
10150
setTimeout(() => {
10251
modeler.value = item
103-
console.log(item, 'initModeler方法modeler')
104-
console.log(modeler.value, 'initModeler方法modeler')
105-
// controlForm.value.prefix = '2222'
10652
}, 10)
10753
}
10854
109-
const save = (bpmnXml) => {
110-
const data: ModelVO = {
111-
...(model.value ?? ({} as ModelVO)),
55+
/** 添加/修改模型 */
56+
const save = async (bpmnXml) => {
57+
const data = {
58+
...model.value,
11259
bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
113-
}
114-
console.log(data, 'data')
115-
116-
// 修改的提交
60+
} as unknown as ModelApi.ModelVO
61+
// 提交
11762
if (data.id) {
118-
updateModelApi(data).then((response) => {
119-
console.log(response, 'response')
120-
message.success('修改成功')
121-
// 跳转回去
122-
close()
123-
})
124-
return
63+
await ModelApi.updateModelApi(data)
64+
message.success('修改成功')
65+
} else {
66+
await ModelApi.createModelApi(data)
67+
message.success('新增成功')
12568
}
126-
// 添加的提交
127-
createModelApi(data).then((response) => {
128-
console.log(response, 'response1')
129-
message.success('保存成功')
130-
// 跳转回去
131-
close()
132-
})
69+
// 跳转回去
70+
close()
13371
}
72+
13473
/** 关闭按钮 */
13574
const close = () => {
13675
router.push({ path: '/bpm/manager/model' })
13776
}
138-
</script>
13977
140-
<style lang="scss">
141-
//body {
142-
// overflow: hidden;
143-
// margin: 0;
144-
// box-sizing: border-box;
145-
//}
146-
//.app {
147-
// width: 100%;
148-
// height: 100%;
149-
// box-sizing: border-box;
150-
// display: inline-grid;
151-
// grid-template-columns: 100px auto max-content;
152-
//}
153-
.demo-control-bar {
154-
position: fixed;
155-
right: 8px;
156-
bottom: 8px;
157-
z-index: 1;
158-
.open-control-dialog {
159-
width: 48px;
160-
height: 48px;
161-
display: flex;
162-
align-items: center;
163-
justify-content: center;
164-
border-radius: 4px;
165-
font-size: 32px;
166-
background: rgba(64, 158, 255, 1);
167-
color: #ffffff;
168-
cursor: pointer;
78+
/** 初始化 */
79+
onMounted(async () => {
80+
const modelId = query.modelId as unknown as number
81+
if (!modelId) {
82+
message.error('缺少模型 modelId 编号')
83+
return
16984
}
170-
}
171-
172-
// TODO 芋艿：去掉多余的 faq
173-
//.info-tip {
174-
// position: fixed;
175-
// top: 40px;
176-
// right: 500px;
177-
// z-index: 10;
178-
// color: #999999;
179-
//}
180-
85+
// 查询模型
86+
const data = await ModelApi.getModel(modelId)
87+
xmlString.value = data.bpmnXml
88+
model.value = {
89+
...data,
90+
bpmnXml: undefined // 清空 bpmnXml 属性
91+
}
92+
})
93+
</script>
94+
<style lang="scss">
18195
.control-form {
18296
.el-radio {
18397
width: 100%;

0 commit comments

Comments
 (0)