From 99774fc6228d7a1e42b8fcb2bfd98e526ef9cdc4 Mon Sep 17 00:00:00 2001
From: shizhong <124974919@qq.com>
Date: Tue, 13 Jun 2023 21:42:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=20highlight=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E7=9A=84=E5=85=A8=E5=B1=80=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=EF=BC=8C=E6=94=B9=E6=88=90=E5=B1=80=E9=83=A8=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue      | 66 ++++++++++++-------
 src/locales/en.ts                             |  3 +-
 src/locales/zh-CN.ts                          |  3 +-
 src/views/bpm/model/modelEditor.vue           | 18 ++---
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index fb1af307..66cd019b 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -196,11 +196,8 @@
       max-height="600px"
     >
       <!-- append-to-body -->
-      <div v-highlight>
-        <code class="hljs">
-          <!-- 高亮代码块 -->
-          {{ previewResult }}
-        </code>
+      <div>
+        <pre><code class="hljs" v-html="highlightedCode(previewResult)"></code></pre>
       </div>
     </Dialog>
   </div>
@@ -368,9 +365,9 @@ const additionalModules = computed(() => {
   return Modules
 })
 const moddleExtensions = computed(() => {
-  console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
-  console.log(props.moddleExtension, 'props.moddleExtension')
-  console.log(props.prefix, 'props.prefix')
+  // console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+  // console.log(props.moddleExtension, 'props.moddleExtension')
+  // console.log(props.prefix, 'props.prefix')
   const Extensions: any = {}
   // 仅使用用户自定义模块
   if (props.onlyCustomizeModdle) {
@@ -433,22 +430,22 @@ const initBpmnModeler = () => {
 
   // bpmnModeler.createDiagram()
 
-  console.log(bpmnModeler, 'bpmnModeler111111')
+  // console.log(bpmnModeler, 'bpmnModeler111111')
   emit('init-finished', bpmnModeler)
   initModelListeners()
 }
 
 const initModelListeners = () => {
   const EventBus = bpmnModeler.get('eventBus')
-  console.log(EventBus, 'EventBus')
+  // console.log(EventBus, 'EventBus')
   // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
   props.events.forEach((event: any) => {
     EventBus.on(event, function (eventObj) {
-      let eventName = event.replace(/\./g, '-')
+      // let eventName = event.replace(/\./g, '-')
       // eventName.name = eventName
       let element = eventObj ? eventObj.element : null
-      console.log(eventName, 'eventName')
-      console.log(element, 'element')
+      // console.log(eventName, 'eventName')
+      // console.log(element, 'element')
       emit('element-click', element, eventObj)
       // emit(eventName, element, eventObj)
     })
@@ -475,7 +472,7 @@ const initModelListeners = () => {
 }
 /* 创建新的流程图 */
 const createNewDiagram = async (xml) => {
-  console.log(xml, 'xml')
+  // console.log(xml, 'xml')
   // 将字符串转换成图显示出来
   let newId = props.processId || `Process_${new Date().getTime()}`
   let newName = props.processName || `业务流程_${new Date().getTime()}`
@@ -484,7 +481,7 @@ const createNewDiagram = async (xml) => {
     // console.log(xmlString, 'xmlString')
     // console.log(this.bpmnModeler.importXML);
     let { warnings } = await bpmnModeler.importXML(xmlString)
-    console.log(warnings, 'warnings')
+    // console.log(warnings, 'warnings')
     if (warnings && warnings.length) {
       warnings.forEach((warn) => console.warn(warn))
     }
@@ -564,7 +561,7 @@ const downloadProcessAsSvg = () => {
 }
 const processSimulation = () => {
   simulationStatus.value = !simulationStatus.value
-  console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+  // console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
   props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
 }
 const processRedo = () => {
@@ -627,7 +624,7 @@ const elementsAlign = (align) => {
 }
 /*-----------------------------    方法结束     ---------------------------------*/
 const previewProcessXML = () => {
-  console.log(bpmnModeler.saveXML, 'bpmnModeler')
+  // console.log(bpmnModeler.saveXML, 'bpmnModeler')
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
     // console.log(xml, 'xml111111')
     previewResult.value = xml
@@ -663,10 +660,10 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-  console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
+  // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
   const { err, xml } = await bpmnModeler.saveXML()
-  console.log(err, 'errerrerrerrerr')
-  console.log(xml, 'xmlxmlxmlxmlxml')
+  // console.log(err, 'errerrerrerrerr')
+  // console.log(xml, 'xmlxmlxmlxmlxml')
   // 读取异常时抛出异常
   if (err) {
     // this.$modal.msgError('保存模型失败，请重试！')
@@ -685,11 +682,36 @@ const processSave = async () => {
 //   return result.value || '&nbsp;'
 // }
 onBeforeMount(() => {
-  console.log(props, 'propspropspropsprops')
+  // console.log(props, 'propspropspropsprops')
 })
-onMounted(() => {
+/**
+ * 代码高亮
+ */
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import java from 'highlight.js/lib/languages/java'
+import xml from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import sql from 'highlight.js/lib/languages/sql'
+import typescript from 'highlight.js/lib/languages/typescript'
+const highlightedCode = (item) => {
+  const language = item.filePath.substring(item.filePath.lastIndexOf('.') + 1)
+  const result = hljs.highlight(language, item.code || '', true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
   initBpmnModeler()
   createNewDiagram(props.value)
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('java', java)
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('html', xml)
+  hljs.registerLanguage('vue', xml)
+  hljs.registerLanguage('javascript', javascript)
+  hljs.registerLanguage('sql', sql)
+  hljs.registerLanguage('typescript', typescript)
 })
 onBeforeUnmount(() => {
   // this.$once('hook:beforeDestroy', () => {
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 4f4d4895..5f448e72 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -443,5 +443,6 @@ export default {
     btn_zoom_in: 'Zoom in',
     btn_zoom_out: 'Zoom out',
     preview: 'Preivew'
-  }
+  },
+  'OAuth 2.0': 'OAuth 2.0'
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index cc4bb47e..26a7b5ee 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -436,5 +436,6 @@ export default {
     btn_zoom_in: '放大',
     btn_zoom_out: '缩小',
     preview: '预览'
-  }
+  },
+  'OAuth 2.0': 'OAuth 2.0'
 }
diff --git a/src/views/bpm/model/modelEditor.vue b/src/views/bpm/model/modelEditor.vue
index 32f94e05..4c07a928 100644
--- a/src/views/bpm/model/modelEditor.vue
+++ b/src/views/bpm/model/modelEditor.vue
@@ -66,11 +66,11 @@ const model = ref<ModelVO>()
 onMounted(() => {
   // 如果 modelId 非空，说明是修改流程模型
   const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
-  console.log(modelId, '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')
+      // console.log(data, 'response')
       xmlString.value = data.bpmnXml
       model.value = {
         ...data,
@@ -101,8 +101,8 @@ onMounted(() => {
 const initModeler = (item) => {
   setTimeout(() => {
     modeler.value = item
-    console.log(item, 'initModeler方法modeler')
-    console.log(modeler.value, 'initModeler方法modeler')
+    // console.log(item, 'initModeler方法modeler')
+    // console.log(modeler.value, 'initModeler方法modeler')
     // controlForm.value.prefix = '2222'
   }, 10)
 }
@@ -112,12 +112,12 @@ const save = (bpmnXml) => {
     ...(model.value ?? ({} as ModelVO)),
     bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
   }
-  console.log(data, 'data')
+  // console.log(data, 'data')
 
   // 修改的提交
   if (data.id) {
-    updateModelApi(data).then((response) => {
-      console.log(response, 'response')
+    updateModelApi(data).then(() => {
+      // console.log(response, 'response')
       message.success('修改成功')
       // 跳转回去
       close()
@@ -125,8 +125,8 @@ const save = (bpmnXml) => {
     return
   }
   // 添加的提交
-  createModelApi(data).then((response) => {
-    console.log(response, 'response1')
+  createModelApi(data).then(() => {
+    // console.log(response, 'response1')
     message.success('保存成功')
     // 跳转回去
     close()