|
|
|
|
@ -3,8 +3,6 @@
|
|
|
|
|
<!-- 表单设计器 -->
|
|
|
|
|
<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>
|
|
|
|
|
</FcDesigner>
|
|
|
|
|
@ -13,7 +11,7 @@
|
|
|
|
|
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
|
|
|
|
|
<el-scrollbar height="580">
|
|
|
|
|
<div>
|
|
|
|
|
<pre><code class="hljs" v-html="highlightedCode(formValue)"></code></pre>
|
|
|
|
|
<pre><code v-dompurify-html="highlightedCode(formValue)" class="hljs"></code></pre>
|
|
|
|
|
</div>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</div>
|
|
|
|
|
@ -68,7 +66,6 @@ const message = useMessage() // 消息
|
|
|
|
|
const { query } = useRoute() // 路由
|
|
|
|
|
|
|
|
|
|
const designer = ref() // 表单设计器
|
|
|
|
|
const type = ref(-1)
|
|
|
|
|
const formValue = ref('')
|
|
|
|
|
const dialogTitle = ref('')
|
|
|
|
|
const dialogVisible = ref(false) // 弹窗是否展示
|
|
|
|
|
@ -116,20 +113,7 @@ const submitForm = async () => {
|
|
|
|
|
dialogLoading.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const showJson = () => {
|
|
|
|
|
openModel('生成JSON')
|
|
|
|
|
type.value = 0
|
|
|
|
|
formValue.value = designer.value.getRule()
|
|
|
|
|
}
|
|
|
|
|
const showOption = () => {
|
|
|
|
|
openModel('生成Options')
|
|
|
|
|
type.value = 1
|
|
|
|
|
formValue.value = designer.value.getOption()
|
|
|
|
|
}
|
|
|
|
|
const openModel = (title: string) => {
|
|
|
|
|
dialogVisible1.value = true
|
|
|
|
|
dialogTitle.value = title
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 复制 **/
|
|
|
|
|
const copy = async (text: string) => {
|
|
|
|
|
// const { copy, copied, isSupported } = useClipboard({ source: JSON.stringify(text) })
|
|
|
|
|
@ -152,22 +136,6 @@ const copy = async (text: string) => {
|
|
|
|
|
oInput.remove()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 代码高亮
|
|
|
|
|
*/
|
|
|
|
|
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 || ' '
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 初始化 **/
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
// 场景一:新增表单
|
|
|
|
|
@ -180,13 +148,5 @@ onMounted(async () => {
|
|
|
|
|
formValues.value = data
|
|
|
|
|
setConfAndFields(designer, data.conf, data.fields)
|
|
|
|
|
})
|
|
|
|
|
// 注册代码高亮的各种语言
|
|
|
|
|
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)
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|