将 BPMNJS 全局引入，改成局部引入

Author: YunaiV

.env.test

@@ -25,7 +25,7 @@ VITE_DROP_CONSOLE=false
 VITE_SOURCEMAP=true
 
 # 打包路径
-VITE_BASE_PATH=/dist-test/
+VITE_BASE_PATH=/
 
 # 输出路径
 VITE_OUT_DIR=dist-test

src/components/bpmnProcessDesigner/package/index.ts

@@ -1,37 +1,11 @@
-import { App } from 'vue'
 import MyProcessDesigner from './designer'
 import MyProcessPenal from './penal'
 import MyProcessViewer from './designer/index2'
 
-const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer]
+import './theme/index.scss'
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 
-// const install = function (Vue) {
-//   components.forEach(component => {
-//     Vue.component(component.name, component)
-//   })
-// }
-
-// if (typeof window !== "undefined" && window.Vue) {
-//   install(window.Vue)
-// }
-//   components.forEach(component => {
-//     Vue.component(component.name, component)
-//   })
-const componentss = {
-  install: (Vue: App): void => {
-    components.forEach((component) => {
-      Vue.component(component.name, component)
-    })
-  }
-}
-// let version = "0.0.1"
-export const MyPD = (app) => {
-  // export default {
-  // app.use(version)
-  // app.use(install)
-  // app.use(MyProcessDesigner)
-  // app.use(MyProcessPenal)
-  // app.use(MyProcessViewer)
-  // app.use(components)
-  app.use(componentss)
-}
+export { MyProcessDesigner, MyProcessPenal, MyProcessViewer }

src/main.ts

@@ -37,13 +37,6 @@ import App from './App.vue'
 
 import './permission'
 
-import { MyPD } from '@/components/bpmnProcessDesigner/package/index.js'
-import '@/components/bpmnProcessDesigner/package/theme/index.scss'
-import 'bpmn-js/dist/assets/diagram-js.css'
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
-
 import hljs from 'highlight.js' //导入代码高亮文件
 import 'highlight.js/styles/github.css' //导入代码高亮样式  新版
 
@@ -65,8 +58,6 @@ const setupAll = async () => {
 
   await setupI18n(app)
 
-  MyPD(app)
-
   setupStore(app)
 
   setupGlobCom(app)

src/views/bpm/definition/index.vue

@@ -84,7 +84,7 @@
 
   <!-- 弹窗：流程模型图的预览 -->
   <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <my-process-viewer
+    <MyProcessViewer
       key="designer"
       v-model="bpmnXML"
       :value="bpmnXML"
@@ -97,6 +97,7 @@
 <script setup lang="ts" name="BpmProcessDefinition">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as DefinitionApi from '@/api/bpm/definition'
 import { setConfAndFields2 } from '@/utils/formCreate'
 const { push } = useRouter() // 路由

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

@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 流程设计器，负责绘制流程等 -->
-    <my-process-designer
+    <MyProcessDesigner
       key="designer"
       v-if="xmlString !== undefined"
       v-model="xmlString"
@@ -14,7 +14,7 @@
       @save="save"
     />
     <!-- 流程属性器，负责编辑每个流程节点的属性 -->
-    <my-properties-panel
+    <MyProcessPenal
       key="penal"
       :bpmnModeler="modeler"
       :prefix="controlForm.prefix"
@@ -25,6 +25,7 @@
 </template>
 
 <script setup lang="ts" name="BpmModelEditor">
+import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
 // 自定义左侧菜单（修改 默认任务 为 用户任务）

src/views/bpm/model/index.vue

@@ -216,7 +216,7 @@
 
   <!-- 弹窗：流程模型图的预览 -->
   <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <my-process-viewer
+    <MyProcessViewer
       key="designer"
       v-model="bpmnXML"
       :value="bpmnXML"
@@ -229,6 +229,7 @@
 <script setup lang="ts" name="BpmModel">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'

src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

@@ -3,7 +3,7 @@
     <template #header>
       <span class="el-icon-picture-outline">流程图</span>
     </template>
-    <my-process-viewer
+    <MyProcessViewer
       key="designer"
       :activityData="activityList"
       :prefix="bpmnControlForm.prefix"
@@ -16,8 +16,8 @@
 </template>
 <script lang="ts" name="BpmProcessInstanceBpmnViewer" setup>
 import { propTypes } from '@/utils/propTypes'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as ActivityApi from '@/api/bpm/activity'
-// import * as DefinitionApi from '@/api/bpm/definition'
 
 const props = defineProps({
   loading: propTypes.bool, // 是否加载中