wy-editor 1.0.0

package/src/core/index.js

@@ -0,0 +1,249 @@
+import { generateRandomData } from '../utils'
+import { calculate } from './calculate'
+
+export default class FormulaEditorCore {
+  editor = null // 编辑器实例
+  formulaObjList = [] // 公式对象列表
+  text = '' // 公式文本
+  marks = [] // 需替换的变量列表
+  listen = ['change', 'inputRead', 'beforeChange'] // 监听方法
+
+  constructor(editor, text = '', formulaObjList = []) {
+    this.editor = editor
+    this.text = text
+    this.formulaObjList = formulaObjList
+  }
+
+  // 获取公式列表
+  getFormulaList() {
+    return this.formulaObjList.flatMap(o => o.formula)
+  }
+
+  // 数据回显
+  renderData(formulaData) {
+    if (Object.keys(formulaData).length === 0) return
+
+    this.editor.setValue(formulaData.text)
+    this.marks = formulaData.marks
+    this.marks.forEach(o => {
+      this.editor.doc.markText(o.from, o.to, {
+        className: 'cm-field',
+        attributes: {
+          'data-menuId': o.menuId,
+          'data-enCode': o.enCode,
+        },
+        atomic: true,
+      })
+    })
+  }
+
+  // 校验公式
+  validateFormula(fieldList) {
+    const variable = fieldList.reduce((acc, cur) => {
+      acc[cur.enCode] = generateRandomData(cur.value)
+      return acc
+    }, {})
+    const result = calculate({ ...this.getData(), value: variable })
+    const calculateResult = result.toString().includes('Error: #VALUE!')
+    if (calculateResult) {
+      return { error: true, message: '公式计算错误，请检查公式' }
+    }
+    if (result.error) {
+      return result
+    }
+    return { error: false }
+  }
+
+  // 注册监听器
+  registerListen() {
+    for (const item of this.listen) {
+      const fn = this[`on${item.charAt(0).toUpperCase()}${item.slice(1)}`]
+      this.editor.on(item, fn.bind(this, ...arguments))
+    }
+  }
+
+  onInputRead(cm, change) {
+    cm.showHint({
+      hint: this.customHint.bind(this),
+      completeSingle: false,
+    })
+  }
+
+  getData() {
+    return {
+      text: this.text,
+      marks: this.marks,
+    }
+  }
+
+  reset() {
+    this.editor.setValue('')
+    this.text = ''
+    this.marks = []
+  }
+
+  // 当编辑器中文本内容改变
+  onChange(cm, changeObj) {
+    this.marks = cm
+      .getAllMarks()
+      .filter(o => o.className === 'cm-field')
+      .map(marks => {
+        const { attributes } = marks
+        return {
+          ...marks.find(),
+          enCode: attributes['data-enCode'],
+          menuId: attributes['data-menuId'],
+        }
+      })
+    this.text = cm.getValue()
+    if (changeObj.origin === 'complete') {
+      // 向左移动一个字符
+      this.moveCursor('left', 1)
+    }
+  }
+
+  /**
+   * 插入文本
+   * @param {string | object} text
+   * @param {'formula' | 'field'} type
+   */
+  insertText(data, type) {
+    const cursor = this.editor.getCursor()
+
+    this.editor.replaceRange(
+      type === 'field' ? JSON.stringify(data) : data,
+      cursor
+    )
+    type === 'formula' && this.moveCursor('left', 1)
+    this.editor.focus()
+  }
+
+  /**
+   *
+   * @param {'left' | 'right' | 'up' | 'down'} direction 方向
+   * @param {number} step 步长
+   */
+  moveCursor(direction, step) {
+    const cursor = this.editor.getCursor()
+    const line = cursor.line
+    const ch = cursor.ch
+
+    // 检查是否已经在行首
+    if (direction === 'left') {
+      // 如果不是行首，则向左移动字符
+      this.editor.setCursor({ line: line, ch: ch - step })
+    } else if (direction === 'right') {
+      // 如果是行首，则向右移动字符
+      this.editor.setCursor({ line: line, ch: ch + step })
+    } else if (direction === 'up') {
+      // 如果是行首，则向上移动行
+      this.editor.setCursor({ line: line - step, ch: ch })
+    } else if (direction === 'down') {
+      // 如果是行首，则向下移动行
+      this.editor.setCursor({ line: line + step, ch: ch })
+    }
+  }
+
+  onBeforeChange(cm, changeObj) {
+    const { text, from, cancel } = changeObj
+    const data = this.matchField(text[0])
+    if (data.length) {
+      cancel()
+      const field = JSON.parse(data[0])
+      const fieldFrom = { ...from }
+      const to = { ...from, ch: from.ch + field.fullName.length }
+      cm.replaceRange(field.fullName, fieldFrom)
+      cm.doc.markText(fieldFrom, to, {
+        className: 'cm-field',
+        attributes: {
+          'data-menuId': field.menuId,
+          'data-enCode': field.enCode,
+        },
+        atomic: true,
+      })
+    }
+  }
+
+  // 匹配字段
+  matchField(text) {
+    const regex = /\{[^}]+\}/g
+    return text.match(regex) || []
+  }
+
+  // 匹配当前行的公式
+  matchWord(text) {
+    // 使用正则表达式提取出字母部分
+    const match = text.match(/[a-zA-Z]+$/)
+    return match ? match[0] : ''
+  }
+
+  // 匹配当前行的公式
+  matchFormula(text) {
+    if (!text) return false
+
+    const suggestions = this.getFormulaList()
+    const match = suggestions.find(o => o.name === text)
+    return match
+  }
+
+  // 自定义提示函数
+  customHint(cm) {
+    // 游标
+    const cursor = cm.getCursor()
+    // 当前行文本
+    const currentLineText = cm.getLine(cursor.line)
+    const matchWords = this.matchWord(currentLineText)
+    const start = cursor.ch
+    const suggestions = this.getFormulaList()
+    const result = {
+      list: suggestions
+        .map(o => ({ text: `${o.name}()`, displayText: o.name, tip: o.tip }))
+        .filter(
+          suggestion =>
+            matchWords && 
+            suggestion.text.toLowerCase().includes(matchWords.toLowerCase())
+        )
+        .map(suggestion => {
+          const text = suggestion.displayText
+          const matchIndex = text
+            .toLowerCase()
+            .indexOf(matchWords.toLowerCase())
+          suggestion.render = function (element, self, data) {
+            if (matchIndex >= 0) {
+              const beforeMatch = text.slice(0, matchIndex)
+              const match = text.slice(
+                matchIndex,
+                matchIndex + matchWords.length
+              )
+              const afterMatch = text.slice(matchIndex + matchWords.length)
+
+              const span = document.createElement('span')
+
+              if (beforeMatch) {
+                span.appendChild(document.createTextNode(beforeMatch))
+              }
+
+              const highlight = document.createElement('span')
+              highlight.textContent = match
+              highlight.style.fontWeight = 'bold'
+              highlight.style.color = '#ff0000'
+              span.appendChild(highlight)
+
+              if (afterMatch) {
+                span.appendChild(document.createTextNode(afterMatch))
+              }
+
+              element.appendChild(span)
+            } else {
+              element.appendChild(document.createTextNode(text))
+            }
+          }
+
+          return suggestion
+        }),
+      from: { line: cursor.line, ch: start - matchWords.length },
+      to: { line: cursor.line, ch: start },
+    }
+    return result
+  }
+}

package/src/formula/base.js

@@ -0,0 +1,11 @@
+export default class BaseFormula {
+  name = ''
+  formula = []
+  enCode = ''
+  constructor (params) {
+    const { name, formula, enCode } = params
+    this.name = name
+    this.formula = formula
+    this.enCode = enCode
+  }
+}

package/src/formula/frequentlyUse/formula.json

@@ -0,0 +1,30 @@
+[
+  {
+    "name": "CONCATENATE",
+    "enCode": "CONCATENATE",
+    "tip": "合并多个文本",
+    "example": "CONCATENATE(\"Hello\",\"World\") = \"HelloWorld\"",
+    "usage": "CONCATENATE(文本1,文本2,...)。"
+  },
+  {
+    "name": "SUM",
+    "enCode": "SUM",
+    "tip": "求和",
+    "example": "SUM(数学成绩,语文成绩,英语成绩,...) = 各科总成绩",
+    "usage": "SUM(数值1,数值2,...)。"
+  },
+  {
+    "name": "DATE",
+    "enCode": "DATE",
+    "tip": "返回特定日期",
+    "example": "DATE(2021,1,1)",
+    "usage": "DATE(year,month,day)。"
+  },
+  {
+    "name": "IF",
+    "enCode": "IF",
+    "tip": "条件判断",
+    "example": "IF(成绩>60,'及格','不及格')",
+    "usage": "IF(逻辑语句,真值,假值)。"
+  }
+]

package/src/formula/frequentlyUse/index.js

@@ -0,0 +1,13 @@
+// 常用函数
+import BaseFormula from '../base'
+import formula from './formula.json'
+
+export default class FrequentlyUse extends BaseFormula {
+  constructor () {
+    super({
+      name: '常用函数',
+      enCode: 'frequentlyUse',
+      formula,
+    })
+  }
+}

package/src/formula/index.js

@@ -0,0 +1,12 @@
+import frequentlyUse from './frequentlyUse'
+import mathFormula from './mathFormula'
+import statistics from './statistics'
+import stringData from './stringData'
+
+export default [
+  // 常用函数
+  frequentlyUse,
+  mathFormula,
+  statistics,
+  stringData,
+]

package/src/formula/mathFormula/formula.json

@@ -0,0 +1,142 @@
+[
+  {
+    "name": "ABS",
+    "enCode": "ABS",
+    "tip": "返回数字的绝对值",
+    "example": "Abs(-5) = 5",
+    "usage": "Abs(number)"
+  },
+  {
+    "name": "Ceiling",
+    "enCode": "Ceiling",
+    "tip": "向上舍入到最接近的整数",
+    "example": "Ceiling(4.2) = 5",
+    "usage": "Ceiling(number)"
+  },
+  {
+    "name": "Floor",
+    "enCode": "Floor",
+    "tip": "向下舍入到最接近的整数",
+    "example": "Floor(4.7) = 4",
+    "usage": "Floor(number)"
+  },
+  {
+    "name": "Round",
+    "enCode": "Round",
+    "tip": "四舍五入到指定小数位数",
+    "example": "Round(4.5) = 4（银行家舍入法）",
+    "usage": "Round(number, [decimals])"
+  },
+  {
+    "name": "Round",
+    "enCode": "Round1",
+    "tip": "四舍五入到整数",
+    "example": "Round(4.5, 0) = 4",
+    "usage": "Round(number, 0)"
+  },
+  {
+    "name": "Truncate",
+    "enCode": "Truncate",
+    "tip": "截断数字的小数部分",
+    "example": "Truncate(4.7) = 4",
+    "usage": "Truncate(number)"
+  },
+  {
+    "name": "Sign",
+    "enCode": "Sign",
+    "tip": "返回数字的符号",
+    "example": "Sign(-10) = -1",
+    "usage": "Sign(number)"
+  },
+  {
+    "name": "Sin",
+    "enCode": "Sin",
+    "tip": "返回角度的正弦值",
+    "example": "Sin(PI/2) = 1",
+    "usage": "Sin(angle)"
+  },
+  {
+    "name": "Cos",
+    "enCode": "Cos",
+    "tip": "返回角度的余弦值",
+    "example": "Cos(0) = 1",
+    "usage": "Cos(angle)"
+  },
+  {
+    "name": "Tan",
+    "enCode": "Tan",
+    "tip": "返回角度的正切值",
+    "example": "Tan(PI/4) ≈ 1",
+    "usage": "Tan(angle)"
+  },
+  {
+    "name": "Asin",
+    "enCode": "Asin",
+    "tip": "返回反正弦值",
+    "example": "Asin(1) = PI/2",
+    "usage": "Asin(number)"
+  },
+  {
+    "name": "ACos",
+    "enCode": "ACos",
+    "tip": "返回反余弦值",
+    "example": "ACos(0) = PI/2",
+    "usage": "ACos(number)"
+  },
+  {
+    "name": "Atan",
+    "enCode": "Atan",
+    "tip": "返回反正切值",
+    "example": "Atan(1) = PI/4",
+    "usage": "Atan(number)"
+  },
+  {
+    "name": "Atan2",
+    "enCode": "Atan2",
+    "tip": "返回两个数字的反正切值",
+    "example": "Atan2(1, 1) = PI/4",
+    "usage": "Atan2(y, x)"
+  },
+  {
+    "name": "Pow",
+    "enCode": "Pow",
+    "tip": "返回指定数字的指定次幂",
+    "example": "Pow(2, 3) = 8",
+    "usage": "Pow(base, exponent)"
+  },
+  {
+    "name": "Sqrt",
+    "enCode": "Sqrt",
+    "tip": "返回数字的平方根",
+    "example": "Sqrt(16) = 4",
+    "usage": "Sqrt(number)"
+  },
+  {
+    "name": "Exp",
+    "enCode": "Exp",
+    "tip": "返回e的指定次幂",
+    "example": "Exp(1) ≈ 2.71828",
+    "usage": "Exp(exponent)"
+  },
+  {
+    "name": "Log",
+    "enCode": "Log",
+    "tip": "返回指定底数的对数",
+    "example": "Log(100, 10) = 2",
+    "usage": "Log(number, base)"
+  },
+  {
+    "name": "Log10",
+    "enCode": "Log10",
+    "tip": "返回以10为底的对数",
+    "example": "Log10(100) = 2",
+    "usage": "Log10(number)"
+  },
+  {
+    "name": "Ln",
+    "enCode": "Ln",
+    "tip": "返回自然对数（以e为底）",
+    "example": "Ln(E) = 1",
+    "usage": "Ln(number)"
+  }
+]

package/src/formula/mathFormula/index.js

@@ -0,0 +1,13 @@
+// 数学函数
+import BaseFormula from '../base'
+import formula from './formula.json'
+
+export default class MathFormula extends BaseFormula {
+  constructor () {
+    super({
+      name: '数学函数',
+      enCode: 'math',
+      formula,
+    })
+  }
+}

package/src/formula/statistics/formula.json

@@ -0,0 +1,30 @@
+[
+  {
+    "name": "AVERAGE",
+    "enCode": "AVERAGE",
+    "tip": "计算平均值",
+    "example": "AVERAGE(数学成绩,语文成绩,英语成绩,...) = 平均成绩",
+    "usage": "AVERAGE(数值1,数值2,...)。"
+  },
+  {
+    "name": "MIN",
+    "enCode": "MIN",
+    "tip": "求最小值",
+    "example": "MIN(10,20,30,5,15) = 5",
+    "usage": "MIN(数值1,数值2,...)。"
+  },
+  {
+    "name": "MAX",
+    "enCode": "MAX",
+    "tip": "求最大值",
+    "example": "MAX(10,20,30,5,15) = 30",
+    "usage": "MAX(数值1,数值2,...)。"
+  },
+  {
+    "name": "COUNT",
+    "enCode": "COUNT",
+    "tip": "计数",
+    "example": "COUNT(学生1,学生2,学生3,...,学生n) = 学生总数",
+    "usage": "COUNT(值1,值2,...)。"
+  }
+]

package/src/formula/statistics/index.js

@@ -0,0 +1,13 @@
+// 统计函数
+import BaseFormula from '../base'
+import formula from './formula.json'
+
+export default class MathFormula extends BaseFormula {
+  constructor () {
+    super({
+      name: '统计函数',
+      enCode: 'statistics',
+      formula,
+    })
+  }
+}

package/src/formula/stringData/formula.json

@@ -0,0 +1,93 @@
+[
+  {
+    "name": "CONCAT",
+    "enCode": "CONCAT",
+    "tip": "合并多个文本",
+    "example": "CONCAT(\"Hello\",\"World\") = \"HelloWorld\"",
+    "usage": "CONCAT(文本1,文本2,...)。"
+  },
+  {
+    "name": "LENGTH",
+    "enCode": "LENGTH",
+    "tip": "返回文本长度",
+    "example": "LENGTH(\"Hello\") = 5",
+    "usage": "LENGTH(文本)。"
+  },
+  {
+    "name": "SUBSTRING",
+    "enCode": "SUBSTRING",
+    "tip": "提取子字符串",
+    "example": "SUBSTRING(\"HelloWorld\",1,5) = \"Hello\"",
+    "usage": "SUBSTRING(文本,开始位置,长度)。"
+  },
+  {
+    "name": "TOUPPER",
+    "enCode": "TOUPPER",
+    "tip": "转换为大写",
+    "example": "TOUPPER(\"hello\") = \"HELLO\"",
+    "usage": "TOUPPER(文本)。"
+  },
+  {
+    "name": "TOLOWER",
+    "enCode": "TOLOWER",
+    "tip": "转换为小写",
+    "example": "TOLOWER(\"HELLO\") = \"hello\"",
+    "usage": "TOLOWER(文本)。"
+  },
+  {
+    "name": "TRIM",
+    "enCode": "TRIM",
+    "tip": "去除首尾空格",
+    "example": "TRIM(\"  Hello  \") = \"Hello\"",
+    "usage": "TRIM(文本)。"
+  },
+  {
+    "name": "REPLACE",
+    "enCode": "REPLACE",
+    "tip": "替换文本中的字符",
+    "example": "REPLACE(\"HelloWorld\",\"World\",\"Java\") = \"HelloJava\"",
+    "usage": "REPLACE(文本,旧文本,新文本)。"
+  },
+  {
+    "name": "INDEXOF",
+    "enCode": "INDEXOF",
+    "tip": "查找字符位置",
+    "example": "INDEXOF(\"HelloWorld\",\"World\") = 6",
+    "usage": "INDEXOF(文本,查找内容)。"
+  },
+  {
+    "name": "CONTAINS",
+    "enCode": "CONTAINS",
+    "tip": "判断是否包含文本",
+    "example": "CONTAINS(\"HelloWorld\",\"World\") = true",
+    "usage": "CONTAINS(文本,查找内容)。"
+  },
+  {
+    "name": "STARTSWITH",
+    "enCode": "STARTSWITH",
+    "tip": "判断是否以指定文本开头",
+    "example": "STARTSWITH(\"HelloWorld\",\"Hello\") = true",
+    "usage": "STARTSWITH(文本,开头文本)。"
+  },
+  {
+    "name": "ENDSWITH",
+    "enCode": "ENDSWITH",
+    "tip": "判断是否以指定文本结尾",
+    "example": "ENDSWITH(\"HelloWorld\",\"World\") = true",
+    "usage": "ENDSWITH(文本,结尾文本)。"
+  },
+  {
+    "name": "FORMAT",
+    "enCode": "FORMAT",
+    "tip": "格式化文本",
+    "example": "FORMAT(\"{0}年{1}月{2}日\",2024,12,1) = \"2024年12月1日\"",
+    "usage": "FORMAT(模板,参数1,参数2,...)。"
+  },
+  {
+    "name": "TOSTRING",
+    "enCode": "TOSTRING",
+    "tip": "转换为文本",
+    "example": "TOSTRING(123) = \"123\"",
+    "usage": "TOSTRING(值)。"
+  }
+]

package/src/formula/stringData/index.js

@@ -0,0 +1,13 @@
+// 字符串函数
+import BaseFormula from '../base'
+import formula from './formula.json'
+
+export default class MathFormula extends BaseFormula {
+  constructor () {
+    super({
+      name: '字符串函数',
+      enCode: 'string',
+      formula,
+    })
+  }
+}

package/src/index.js

@@ -0,0 +1,5 @@
+import FormulaEditor from './index.vue'
+import { calculate, formulaWatcher } from './core/calculate'
+
+export default FormulaEditor
+export { FormulaEditor, calculate, formulaWatcher }