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

.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

@@ -40,13 +40,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' //导入代码高亮样式  新版
 
@@ -66,8 +59,6 @@ const setupAll = async () => {
 
   await setupI18n(app)
 
-  MyPD(app)
-
   setupStore(app)
 
   setupGlobCom(app)

src/views/bpm/definition/index.vue

@@ -49,7 +49,7 @@
     </XModal>
     <!-- 流程模型图的预览 -->
     <XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
-      <my-process-viewer
+      <MyProcessViewer
         key="designer"
         v-model="bpmnXML"
         :value="bpmnXML"
@@ -66,6 +66,7 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import { allSchemas } from './definition.data'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { DICT_TYPE } from '@/utils/dict'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 
 const bpmnXML = ref(null)
 const showBpmnOpen = ref(false)

src/views/bpm/model/index.vue

@@ -305,7 +305,7 @@
 
     <!-- 流程模型图的预览 -->
     <XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
-      <my-process-viewer
+      <MyProcessViewer
         key="designer"
         v-model="bpmnXML"
         :value="bpmnXML"
@@ -319,6 +319,7 @@
 <script setup lang="ts">
 // 全局相关的 import
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import { FormInstance, UploadInstance } from 'element-plus'
 
 // 业务相关的 import

src/views/bpm/model/modelEditor.vue

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

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"
       :value="bpmnXml"
       v-bind="bpmnControlForm"
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes'
 import * as ActivityApi from '@/api/bpm/activity'
-// import * as DefinitionApi from '@/api/bpm/definition'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 
 const props = defineProps({
   loading: propTypes.bool, // 是否加载中