w-vue-middle/monacoEditor/sqlEditor/sql.js

统一公共服务组件

import * as monaco from 'monaco-editor'
import {conf as sqlConf, language as sqlLanguage, customTheme} from './config'

let monacoProvider = null // 存储提示实例

/**
 * 自定义sql库表提示，并保留原有sql提示
 * @returns {{label: string, kind: *, insertText: string}[]}
 */
const getSqlSuggestions = () => {
  return sqlLanguage.keywords.map(key => ({
    label: key,
    kind: monaco.languages.CompletionItemKind['Function'],
    insertText: key
  }))
}

/**
 * 补全表名
 * @param tables
 * @returns {{label: string, kind: *, insertText: string}[]}
 */
const getTableSuggestions = (tables) => {
  return Object.keys(tables).map((key) => ({
    label: key,
    kind: monaco.languages.CompletionItemKind.Variable,
    insertText: key,
  }))
}

/**
 * 补全表的字段
 * @param tables
 * @param tableName
 * @returns {*}
 */
const getFieldsSuggestions = (tables, tableName) => {
  const fields = tables[tableName]
  if (!fields) {
    return []
  }
  return fields.map(name => ({
    label: name,
    kind: monaco.languages.CompletionItemKind.Field,
    insertText: `${name}`
  }))
}


/**
 * sql 智能提示
 * @param language
 * @param suggestions
 * @returns {{suggestions: *}}
 */
export function registerSqlSuggestions(language, tables) {
  if (monacoProvider) {
    monacoProvider.dispose()
  }
  monacoProvider = monaco.languages.registerCompletionItemProvider(language, {
    triggerCharacters:  ['.', ' ',], // 点号和空格触发提示
    provideCompletionItems(model, position) {
      let suggestions = []
      const words = model.getValueInRange({
        startLineNumber: position.lineNumber,
        startColumn: 0,
        endLineNumber: position.lineNumber,
        endColumn: position.column
      }).trim().split(/\s+/)
      const lastWord = words[words.length - 1]

      if (lastWord.endsWith('.')) { // 补全表的字段
        const tableName = lastWord.slice(0, lastWord.length - 1) // 去掉.
        if (tableName in tables) {
          suggestions = [...getFieldsSuggestions(tables, tableName)]
        }
      } else if (lastWord === '.' || lastWord.startsWith('--') || lastWord.startsWith('/*')) {
        suggestions = []
      } else { // 补全表名、关键字
        suggestions = [...getTableSuggestions(tables), ...getSqlSuggestions()]
      }

      return {
        suggestions
      }
    }
  })
}

/**
 * sql 自定义主题
 * @param themeName
 */
export function customSqlTheme(themeName) {
  monaco.editor.defineTheme(themeName, customTheme)
  monaco.editor.setTheme(themeName)
}

/**
 * sql 自定义配置（高亮、语法格式校验）
 * @param language
 */
export function customSqlConf(language) {
  monaco.languages.register({ id: language });
  monaco.languages.setMonarchTokensProvider(language, sqlLanguage)
  monaco.languages.setLanguageConfiguration(language, sqlConf)
}