Skip to content

phsl / admin

Go to a project
Commit 9e798fb7 by YunaiV
Options

Vue3 重构：去除 modelEditor.vue 冗余代码

parent 7463eea2
Showing with 38 additions and 124 deletions
src/api/bpm/model/index.ts
...@@ -29,7 +29,7 @@ export const getModelPageApi = async (params) => { ...@@ -29,7 +29,7 @@ export const getModelPageApi = async (params) => {
return await request.get({ url: '/bpm/model/page', params }) return await request.get({ url: '/bpm/model/page', params })
} }
export const getModelApi = async (id: number) => { export const getModel = async (id: number) => {
return await request.get({ url: '/bpm/model/get?id=' + id }) return await request.get({ url: '/bpm/model/get?id=' + id })
} }
......
src/views/bpm/model/index.vue
...@@ -389,7 +389,7 @@ const handleFormDetail = async (row) => { ...@@ -389,7 +389,7 @@ const handleFormDetail = async (row) => {
const handleBpmnDetail = (row) => { const handleBpmnDetail = (row) => {
// TODO 芋艿：流程组件开发中 // TODO 芋艿：流程组件开发中
console.log(row) console.log(row)
ModelApi.getModelApi(row).then((response) => { ModelApi.getModel(row).then((response) => {
console.log(response, 'response') console.log(response, 'response')
bpmnXML.value = response.bpmnXml bpmnXML.value = response.bpmnXml
// 弹窗打开 // 弹窗打开
...@@ -432,7 +432,7 @@ const handleUpdate = async (rowId: number) => { ...@@ -432,7 +432,7 @@ const handleUpdate = async (rowId: number) => {
resetForm() resetForm()
await setDialogTile('edit') await setDialogTile('edit')
// 设置数据 // 设置数据
saveForm.value = await ModelApi.getModelApi(rowId) saveForm.value = await ModelApi.getModel(rowId)
if (saveForm.value.category == null) { if (saveForm.value.category == null) {
saveForm.value.category = 1 saveForm.value.category = 1
} else { } else {
......
src/views/bpm/model/modelEditor.vue
<template> <template>
<div class="app-container">
<!-- 流程设计器，负责绘制流程等 --> <!-- 流程设计器，负责绘制流程等 -->
<!-- <myProcessDesigner -->
<my-process-designer <my-process-designer
:key="`designer-${reloadIndex}`" key="designer"
v-if="xmlString !== undefined" v-if="xmlString !== undefined"
v-model="xmlString" v-model="xmlString"
:value="xmlString" :value="xmlString"
...@@ -15,39 +13,28 @@ ...@@ -15,39 +13,28 @@
@save="save" @save="save"
/> />
<!-- 流程属性器，负责编辑每个流程节点的属性 --> <!-- 流程属性器，负责编辑每个流程节点的属性 -->
<!-- <MyProcessPalette -->
<my-properties-panel <my-properties-panel
:key="`penal-${reloadIndex}`" key="penal"
:bpmnModeler="modeler" :bpmnModeler="modeler"
:prefix="controlForm.prefix" :prefix="controlForm.prefix"
class="process-panel" class="process-panel"
:model="model" :model="model"
/> />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务） // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad' import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务） // 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette' import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
// import xmlObj2json from "./utils/xml2json"; import * as ModelApi from '@/api/bpm/model'
// import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
import { createModelApi, getModelApi, updateModelApi, ModelVO } from '@/api/bpm/model'
const router = useRouter() const router = useRouter() // 路由
const message = useMessage() const { query } = useRoute() // 路由的查询
const message = useMessage() // 国际化
// 自定义侧边栏
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
const xmlString = ref(undefined) // BPMN XML const xmlString = ref(undefined) // BPMN XML
const modeler = ref(null) const modeler = ref(null)
const reloadIndex = ref(0)
// const controlDrawerVisible = ref(false)
// const translationsSelf = translations
const controlForm = ref({ const controlForm = ref({
simulation: true, simulation: true,
labelEditing: false, labelEditing: false,
...@@ -56,128 +43,55 @@ const controlForm = ref({ ...@@ -56,128 +43,55 @@ const controlForm = ref({
headerButtonSize: 'mini', headerButtonSize: 'mini',
additionalModel: [CustomContentPadProvider, CustomPaletteProvider] additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
}) })
// const addis = ref({ const model = ref<ModelApi.ModelVO>() // 流程模型的信息
// CustomContentPadProvider,
// CustomPaletteProvider
// })
// 流程模型的信息
const model = ref<ModelVO>()
onMounted(() => {
// 如果 modelId 非空，说明是修改流程模型
const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
console.log(modelId, 'modelId')
if (modelId) {
// let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
getModelApi(modelId as unknown as number).then((data) => {
console.log(data, 'response')
xmlString.value = data.bpmnXml
model.value = {
...data,
bpmnXml: undefined // 清空 bpmnXml 属性
}
// this.controlForm.processId = data.key
// xmlString.value = /** 初始化 modeler */
// '<?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>'
// model.value = {
// key: 'flowable_01',
// name: 'flowable测试',
// description: 'ooxx',
// category: '1',
// formType: 10,
// formId: 11,
// formCustomCreatePath: null,
// formCustomViewPath: null,
// id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
// createTime: 1645978019795,
// bpmnXml: undefined // 清空 bpmnXml 属性
// }
// console.log(modeler.value, 'modeler11111111')
})
}
})
const initModeler = (item) => { const initModeler = (item) => {
setTimeout(() => { setTimeout(() => {
modeler.value = item modeler.value = item
console.log(item, 'initModeler方法modeler')
console.log(modeler.value, 'initModeler方法modeler')
// controlForm.value.prefix = '2222'
}, 10) }, 10)
} }
const save = (bpmnXml) => { /** 添加/修改模型 */
const data: ModelVO = { const save = async (bpmnXml) => {
...(model.value ?? ({} as ModelVO)), const data = {
...model.value,
bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得 bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
} } as unknown as ModelApi.ModelVO
console.log(data, 'data') // 提交
// 修改的提交
if (data.id) { if (data.id) {
updateModelApi(data).then((response) => { await ModelApi.updateModelApi(data)
console.log(response, 'response')
message.success('修改成功') message.success('修改成功')
// 跳转回去 } else {
close() await ModelApi.createModelApi(data)
}) message.success('新增成功')
return
} }
// 添加的提交
createModelApi(data).then((response) => {
console.log(response, 'response1')
message.success('保存成功')
// 跳转回去 // 跳转回去
close() close()
})
} }
/** 关闭按钮 */ /** 关闭按钮 */
const close = () => { const close = () => {
router.push({ path: '/bpm/manager/model' }) router.push({ path: '/bpm/manager/model' })
} }
</script>
<style lang="scss"> /** 初始化 */
//body { onMounted(async () => {
// overflow: hidden; const modelId = query.modelId as unknown as number
// margin: 0; if (!modelId) {
// box-sizing: border-box; message.error('缺少模型 modelId 编号')
//} return
//.app {
// width: 100%;
// height: 100%;
// box-sizing: border-box;
// display: inline-grid;
// grid-template-columns: 100px auto max-content;
//}
.demo-control-bar {
position: fixed;
right: 8px;
bottom: 8px;
z-index: 1;
.open-control-dialog {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 32px;
background: rgba(64, 158, 255, 1);
color: #ffffff;
cursor: pointer;
} }
} // 查询模型
const data = await ModelApi.getModel(modelId)
// TODO 芋艿：去掉多余的 faq xmlString.value = data.bpmnXml
//.info-tip { model.value = {
// position: fixed; ...data,
// top: 40px; bpmnXml: undefined // 清空 bpmnXml 属性
// right: 500px; }
// z-index: 10; })
// color: #999999; </script>
//} <style lang="scss">
.control-form { .control-form {
.el-radio { .el-radio {
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment