高亮

gexinzhineng/gxzn27
1 parent 2be0ea5f
Showing 3 changed files with 27 additions and 21 deletions
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
yudao-ui-admin-vue3/src/main.ts
@@ -183,18 +183,26 @@
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <el-dialog
+    <XModal
       title="预览"
       width="80%"
+      height="90%"
       v-model="previewModelVisible"
       append-to-body
       destroy-on-close
     >
-      <pre>
-        <!-- <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code> -->
-        {{ previewResult }}
-      </pre>
-    </el-dialog>
+      <div v-highlight>
+        <pre>
+            <code>
+            <!-- 高亮代码块 -->
+            {{ previewResult }}
+            </code>
+        </pre>
+      </div>
+      <!-- <pre>
+        <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code>
+      </pre> -->
+    </XModal>
   </div>
 </template>
  
@@ -204,7 +212,7 @@
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 // import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
-import { ElTooltip, ElButtonGroup, ElDialog, ElButton, ElMessage, ElMessageBox } from 'element-plus'
+import { ElTooltip, ElButtonGroup, ElButton, ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, provide, ref } from 'vue'
 import BpmnModeler from 'bpmn-js/lib/Modeler'
 import DefaultEmptyXML from './plugins/defaultEmpty'
@@ -246,7 +246,7 @@
   </div>
 </template>
 <script setup lang="ts" name="ElementListeners">
-import { ref, inject, watch, nextTick, toRaw } from 'vue'
+import { ref, inject, watch, nextTick } from 'vue'
 import {
   ElMessageBox,
   ElTable,
@@ -285,10 +285,8 @@ const listenerFormRef = ref()
 const listenerFieldFormRef = ref()
  
 const resetListenersList = () => {
-  console.log(window, 'window')
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
-  console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
@@ -348,7 +346,6 @@ const saveListenerFiled = async () =&gt; {
 }
 // 移除监听器字段
 const removeListenerField = (field, index) => {
-  console.log(field, 'field')
   ElMessageBox.confirm('确认移除该字段吗？', '提示', {
     confirmButtonText: '确 认',
     cancelButtonText: '取 消'
@@ -361,7 +358,6 @@ const removeListenerField = (field, index) =&gt; {
 }
 // 移除监听器
 const removeListener = (listener, index) => {
-  console.log(listener, 'listener')
   ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
     confirmButtonText: '确 认',
     cancelButtonText: '取 消'
@@ -389,18 +385,10 @@ const saveListenerConfig = async () =&gt; {
     elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
   }
   // 保存其他配置
-  console.log(bpmnElement.value, 'bpmnElement.value')
   otherExtensionList.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter(
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  console.log(bpmnElement.value, 'bpmnElement.value')
-  console.log(toRaw(bpmnElement.value), 'toRawtoRawtoRawtoRawtoRaw')
-  console.log(
-    otherExtensionList.value.concat(bpmnElementListeners.value),
-    'otherExtensionList.value.concat(bpmnElementListeners.value).value'
-  )
   updateElementExtensions(
     bpmnElement.value,
     otherExtensionList.value.concat(bpmnElementListeners.value)
@@ -413,7 +401,6 @@ const saveListenerConfig = async () =&gt; {
 watch(
   () => props.id,
   (val) => {
-    console.log(val, 'propsId变化')
     val &&
       val.length &&
       nextTick(() => {
@@ -49,6 +49,9 @@ import &#39;bpmn-js/dist/assets/bpmn-font/css/bpmn.css&#39;
 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-gist.css' //导入代码高亮样式
+
 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
   console.info(isDevMode())
@@ -59,6 +62,14 @@ if (isDevMode()) {
 const setupAll = async () => {
   const app = createApp(App)
  
+  //自定义一个代码高亮指令
+  app.directive('highlight', function (el) {
+    const blocks = el.querySelectorAll('code')
+    blocks.forEach((block: any) => {
+      hljs.highlightBlock(block)
+    })
+  })
+
   await setupI18n(app)
  
   MyPD(app)