From f3869aa9615751cd40fa5426f20ca083a31f08f8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 15 Apr 2023 22:46:45 +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/editor/index.vue |  5 ++--
 src/views/infra/build/index.vue     | 41 ++++++++++++++++++++++++-----
 3 files changed, 38 insertions(+), 14 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/editor/index.vue b/src/views/bpm/form/editor/index.vue
index 14a2c50f..c56a7747 100644
--- a/src/views/bpm/form/editor/index.vue
+++ b/src/views/bpm/form/editor/index.vue
@@ -1,14 +1,14 @@
 <template>
   <ContentWrap>
     <!-- 表单设计器 -->
-    <fc-designer ref="designer" height="780px">
+    <FcDesigner ref="designer" height="780px">
       <template #handle>
         <el-button round size="small" type="primary" @click="handleSave">
           <Icon class="mr-5px" icon="ep:plus" />
           保存
         </el-button>
       </template>
-    </fc-designer>
+    </FcDesigner>
   </ContentWrap>
 
   <!-- 表单保存的弹窗 -->
@@ -42,6 +42,7 @@
 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'
 
 const { t } = useI18n() // 国际化
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index c7ff86eb..9d420df9 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -4,13 +4,13 @@
       <el-col>
         <div class="mb-2 float-right">
           <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
-          <el-button size="small" type="success" @click="showOption">生成O ptions</el-button>
+          <el-button size="small" type="success" @click="showOption">生成 Options</el-button>
           <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
         </div>
       </el-col>
       <!-- 表单设计器 -->
       <el-col>
-        <fc-designer ref="designer" height="780px" />
+        <FcDesigner ref="designer" height="780px" />
       </el-col>
     </el-row>
   </ContentWrap>
@@ -22,18 +22,17 @@
         {{ t('common.copy') }}
       </el-button>
       <el-scrollbar height="580">
-        <div v-highlight>
-          <code class="hljs">
-            {{ formData }}
-          </code>
+        <div>
+          <pre><code class="hljs" v-html="highlightedCode(formData)"></code></pre>
         </div>
       </el-scrollbar>
     </div>
   </Dialog>
 </template>
 <script setup lang="ts" name="InfraBuild">
-import formCreate from '@form-create/element-ui'
+import FcDesigner from '@form-create/designer'
 import { useClipboard } from '@vueuse/core'
+import { isString } from '@/utils/is'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
 
@@ -109,4 +108,32 @@ const copy = async (text: string) => {
     }
   }
 }
+
+/**
+ * 代码高亮
+ */
+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)
+})
 </script>