From 9c6408b7a9c0eab9c8b82682c6ab44b34e95da7d Mon Sep 17 00:00:00 2001
From: shizhong <124974919@qq.com>
Date: Tue, 13 Jun 2023 13:14:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=20FcDesigner=20=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E5=B1=80=E9=83=A8=E6=B3=A8=E5=86=8C=EF=BC=8C=E5=87=8F=E5=B0=91?=
 =?UTF-8?q?=E5=8C=85=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/formCreate/index.ts   |  6 +----
 src/views/bpm/form/formEditor.vue |  5 ++--
 src/views/infra/build/index.vue   | 38 +++++++++++++++++++++++++++----
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts
index 0d72048e..a6cb8213 100644
--- a/src/plugins/formCreate/index.ts
+++ b/src/plugins/formCreate/index.ts
@@ -17,7 +17,6 @@ import {
 
 import formCreate from '@form-create/element-ui'
 import install from '@form-create/element-ui/auto-import'
-import FcDesigner from '@form-create/designer'
 
 const components = [
   ElAside,
@@ -34,14 +33,11 @@ const components = [
   ElTabPane
 ]
 
+// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
 export const setupFormCreate = (app: App<Element>) => {
   components.forEach((component) => {
     app.component(component.name, component)
   })
-
   formCreate.use(install)
-
   app.use(formCreate)
-
-  app.use(FcDesigner)
 }
diff --git a/src/views/bpm/form/formEditor.vue b/src/views/bpm/form/formEditor.vue
index 2893249d..6202c5fa 100644
--- a/src/views/bpm/form/formEditor.vue
+++ b/src/views/bpm/form/formEditor.vue
@@ -1,13 +1,13 @@
 <template>
   <ContentWrap>
     <!-- 表单设计器 -->
-    <fc-designer ref="designer" height="780px">
+    <FcDesigner ref="designer" height="780px">
       <template #handle>
         <XButton type="primary" title="生成JSON" @click="showJson" />
         <XButton type="primary" title="生成Options" @click="showOption" />
         <XButton type="primary" :title="t('action.save')" @click="handleSave" />
       </template>
-    </fc-designer>
+    </FcDesigner>
     <Dialog :title="dialogTitle" v-model="dialogVisible1" maxHeight="600">
       <div ref="editor" v-if="dialogVisible1">
         <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
@@ -61,6 +61,7 @@ import { FormInstance } from 'element-plus'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as FormApi from '@/api/bpm/form'
+import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 // import { useClipboard } from '@vueuse/core'
 
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 0421eb16..1a01b290 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -12,17 +12,15 @@
         </div>
       </el-col>
       <el-col>
-        <fc-designer ref="designer" height="780px" />
+        <FcDesigner ref="designer" height="780px" />
       </el-col>
     </el-row>
     <Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
       <div ref="editor" v-if="dialogVisible">
         <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
         <el-scrollbar height="580">
-          <div v-highlight>
-            <code class="hljs">
-              {{ formValue }}
-            </code>
+          <div>
+            <pre><code class="hljs" v-html="highlightedCode(formData)"></code></pre>
           </div>
         </el-scrollbar>
       </div>
@@ -31,8 +29,10 @@
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Build">
+import FcDesigner from '@form-create/designer'
 import formCreate from '@form-create/element-ui'
 // import { useClipboard } from '@vueuse/core'
+import { isString } from '@/utils/is'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -97,6 +97,34 @@ const copy = async (text: string) => {
   oInput.remove()
 }
 
+/**
+ * 代码高亮
+ */
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import xml from 'highlight.js/lib/languages/java'
+import json from 'highlight.js/lib/languages/json'
+const highlightedCode = (code) => {
+  // 处理语言和代码
+  let language = 'json'
+  if (formType.value === 2) {
+    language = 'xml'
+  }
+  if (!isString(code)) {
+    code = JSON.stringify(code)
+  }
+  // 高亮
+  const result = hljs.highlight(language, code, true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('json', json)
+})
+
 const makeTemplate = () => {
   const rule = designer.value.getRule()
   const opt = designer.value.getOption()