将 FcDesigner 改成局部注册,减少包大小
This commit is contained in:
parent
d32537e3ef
commit
f3869aa961
@ -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)
|
||||
}
|
||||
|
@ -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() // 国际化
|
||||
|
@ -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 || ' '
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
// 注册代码高亮的各种语言
|
||||
hljs.registerLanguage('xml', xml)
|
||||
hljs.registerLanguage('json', json)
|
||||
})
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user