1.封装sql编辑器组件
<template><div :id="id"></div>
</template><script lang="ts" setup>
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor'
import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js'
import { nextTick, ref, onBeforeUnmount, onMounted } from 'vue'import { ElMessage } from 'element-plus'
const language = ref('sql')
const editorTheme = ref('vs-dark')const props = defineProps({id: {type: String,required: true},value: {type: String,required: false,default: () => ''}
})
//
// MonacoEditor start
//
onBeforeUnmount(() => {editor.dispose()console.log('editor dispose')
})onMounted(() => {editorInit()console.log('editor init')
})// @ts-ignore
self.MonacoEnvironment = {getWorker(_: string, label: string) {return new EditorWorker()}
}let editor = nullconst editorInit = () => {nextTick(() => {!editor? (editor = monaco.editor.create(document.getElementById(props.id) as HTMLElement, {value: props.value, // 编辑器初始显示文字language: language.value, // 语言支持自行查阅demoautomaticLayout: true, // 自适应布局theme: editorTheme.value, // 官方自带三种主题vs, hc-black, or vs-dark//foldingStrategy: 'indentation',renderLineHighlight: 'all', // 行亮selectOnLineNumbers: true, // 显示行号minimap: {enabled: true},cursorStyle: 'line', //光标样式readOnly: true, // 只读fontSize: 16, // 字体大小autoIndent: true, //自动布局useTabStops: false,scrollBeyondLastLine: false, // 取消代码后面一大段空白overviewRulerBorder: false // 不要滚动条的边框})): editor.setValue(props.value)})
}const setEditorValue = (value: any) => {editor.setValue(value)
}
const getEditorValue = () => {return editor.getValue()
}defineExpose({setEditorValue,getEditorValue
})
</script><style scoped></style>
2.调用组件
<el-form-item label="sql语句" label-width="auto" prop="sqlText"><ReadOnlyStudio id="apiSqlId" ref="sqlStudioRef" style="height: 260px; width: 100%"></ReadOnlyStudio></el-form-item>const sqlStudioRef = ref()const init = (id?: number, authId: any) => {visible.value = truedataForm.id = ''// 重置表单数据if (basicDataFormRef.value) {basicDataFormRef.value.resetFields()}if (apiSqlFormRef.value) {sqlStudioRef.value.setEditorValue('')}if (id) {getApiConfig(id, authId)}
}const getApiConfig = (id: number, authId: any) => {useApiConfigApi(id).then(res => {Object.assign(dataForm, res.data)Object.assign(basicDataForm, res.data)Object.assign(apiSqlForm, res.data)sqlStudioRef.value.setEditorValue(apiSqlForm.sqlText)})if (authId) {//获取授权信息getAuthInfoApi(authId).then(res => {authDataForm.id = authIdauthDataForm.limited = res.data.requestTimes == -1 ? false : trueauthDataForm.requestTimes = res.data.requestTimesauthDataForm.requestedTimes = res.data.requestedTimesauthDataForm.requestedSuccessTimes = res.data.requestedSuccessTimesauthDataForm.requestedFailedTimes = res.data.requestedFailedTimesauthDataForm.startTime = res.data.startTimeauthDataForm.endTime = res.data.endTimeifAuth.value = true})} else {ifAuth.value = false}
}