| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ContentWrap> |
| 3 | <el-row> | |
| 4 | <el-col> | |
| 5 | <div class="float-right mb-2"> | |
| 6 | <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button> | |
| 7 | <el-button size="small" type="success" @click="showOption">生成 Options</el-button> | |
| 8 | <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button> | |
| 9 | </div> | |
| 10 | </el-col> | |
| 11 | </el-row> | |
| 12 | <!-- 表单设计器 --> | |
| 13 | <FcDesigner ref="designer" height="780px" /> | |
| 14 | </ContentWrap> | |
| 15 | ||
| 16 | <!-- 弹窗：表单预览 --> | |
| 17 | <Dialog v-model="dialogVisible" :title="dialogTitle" max-height="600"> | |
| 18 | <div v-if="dialogVisible" ref="editor"> | |
| 19 | <el-button style="float: right" @click="copy(formData)"> | |
| 20 | {{ t('common.copy') }} | |
| 21 | </el-button> | |
| 22 | <el-scrollbar height="580"> | |
| 23 | <div> | |
| 24 | <pre><code v-dompurify-html="highlightedCode(formData)" class="hljs"></code></pre> | |
| 25 | </div> | |
| 26 | </el-scrollbar> | |
| 27 | </div> | |
| 28 | </Dialog> | |
| 29 | </template> | |
| 30 | <script lang="ts" setup> | |
| 31 | import { useFormCreateDesigner } from '@/components/FormCreate' | |
| 32 | import { useClipboard } from '@vueuse/core' | |
| 33 | import { isString } from '@/utils/is' | |
| 34 | ||
| 35 | import hljs from 'highlight.js' // 导入代码高亮文件 | |
| 36 | import 'highlight.js/styles/github.css' // 导入代码高亮样式 | |
| 37 | import xml from 'highlight.js/lib/languages/java' | |
| 38 | import json from 'highlight.js/lib/languages/json' | |
| 39 | import formCreate from '@form-create/element-ui' | |
| 40 | ||
| 41 | defineOptions({ name: 'InfraBuild' }) | |
| 42 | ||
| 43 | const { t } = useI18n() // 国际化 | |
| 44 | const message = useMessage() // 消息 | |
| 45 | ||
| 46 | const designer = ref() // 表单设计器 | |
| 47 | const dialogVisible = ref(false) // 弹窗的是否展示 | |
| 48 | const dialogTitle = ref('') // 弹窗的标题 | |
| 49 | const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件 | |
| 50 | const formData = ref('') // 表单数据 | |
| 51 | useFormCreateDesigner(designer) // 表单设计器增强 | |
| 52 | ||
| 53 | /** 打开弹窗 */ | |
| 54 | const openModel = (title: string) => { | |
| 55 | dialogVisible.value = true | |
| 56 | dialogTitle.value = title | |
| 57 | } | |
| 58 | ||
| 59 | /** 生成 JSON */ | |
| 60 | const showJson = () => { | |
| 61 | openModel('生成 JSON') | |
| 62 | formType.value = 0 | |
| 63 | formData.value = designer.value.getRule() | |
| 64 | } | |
| 65 | ||
| 66 | /** 生成 Options */ | |
| 67 | const showOption = () => { | |
| 68 | openModel('生成 Options') | |
| 69 | formType.value = 1 | |
| 70 | formData.value = designer.value.getOption() | |
| 71 | } | |
| 72 | ||
| 73 | /** 生成组件 */ | |
| 74 | const showTemplate = () => { | |
| 75 | openModel('生成组件') | |
| 76 | formType.value = 2 | |
| 77 | formData.value = makeTemplate() | |
| 78 | } | |
| 79 | ||
| 80 | const makeTemplate = () => { | |
| 81 | const rule = designer.value.getRule() | |
| 82 | const opt = designer.value.getOption() | |
| 83 | return `<template> | |
| 84 | <form-create | |
| 85 | v-model:api="fApi" | |
| 86 | :rule="rule" | |
| 87 | :option="option" | |
| 88 | @submit="onSubmit" | |
| 89 | ></form-create> | |
| 90 | </template> | |
| 91 | <script setup lang=ts> | |
| 92 | const faps = ref(null) | |
| 93 | const rule = ref('') | |
| 94 | const option = ref('') | |
| 95 | const init = () => { | |
| 96 | rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}') | |
| 97 | option.value = formCreate.parseJson('${JSON.stringify(opt)}') | |
| 98 | } | |
| 99 | const onSubmit = (formData) => { | |
| 100 | //todo 提交表单 | |
| 101 | } | |
| 102 | init() | |
| 103 | <\/script>` | |
| 104 | } | |
| 105 | ||
| 106 | /** 复制 **/ | |
| 107 | const copy = async (text: string) => { | |
| 108 | const { copy, copied, isSupported } = useClipboard({ source: text }) | |
| 109 | if (!isSupported) { | |
| 110 | message.error(t('common.copyError')) | |
| 111 | } else { | |
| 112 | await copy() | |
| 113 | if (unref(copied)) { | |
| 114 | message.success(t('common.copySuccess')) | |
| 115 | } | |
| 116 | } | |
| 117 | } | |
| 118 | ||
| 119 | /** | |
| 120 | * 代码高亮 | |
| 121 | */ | |
| 122 | const highlightedCode = (code) => { | |
| 123 | // 处理语言和代码 | |
| 124 | let language = 'json' | |
| 125 | if (formType.value === 2) { | |
| 126 | language = 'xml' | |
| 127 | } | |
| 128 | if (!isString(code)) { | |
| 129 | code = JSON.stringify(code) | |
| 130 | } | |
| 131 | // 高亮 | |
| 132 | const result = hljs.highlight(language, code, true) | |
| 133 | return result.value || ' ' | |
| 134 | } | |
| 135 | ||
| 136 | /** 初始化 **/ | |
| 137 | onMounted(async () => { | |
| 138 | // 注册代码高亮的各种语言 | |
| 139 | hljs.registerLanguage('xml', xml) | |
| 140 | hljs.registerLanguage('json', json) | |
| 141 | }) | |
| 142 | </script> | |
