@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnFunExpr/BnFunExpr.vue

@@ -0,0 +1,608 @@
+<!--
+  @Auther:辛巴
+  @Date:2024/7/22
+  @Description:小程序高级功能，函数组件
+  @VERSION:1.0-->
+<template>
+  <div class="BnFunExpr" v-loading="loading">
+    <div class="BnFunExpr-left">
+      <div class="BnFunExpr-left-top">
+        <div class="BnFunExpr-left-top-btns">
+          <div class="BnFunExpr-left-top-btn" :class="{'active':listType == 1}" @click="listType = 1;searchInput=''">
+            函数
+          </div>
+          <div class="BnFunExpr-left-top-btn" :class="{'active':listType == 2}" @click="listType = 2;searchInput=''">
+            字段
+          </div>
+        </div>
+        <div class="BnFunExpr-left-top-input">
+          <el-input placeholder="请输入关键字搜索" v-model="searchInput"></el-input>
+        </div>
+      </div>
+      <div class="BnFunExpr-left-body">
+        <div class="BnFunExpr-left-body-list" v-if="listType == 1">
+          <div v-for="(itemClass,index) in functionList" :key="index">
+            <div class="BnFunExpr-left-body-class" @click="changeOpenClass(itemClass)" :title="itemClass.name">
+				  <span class="bnUIcon bnUIcon-arrow"
+                :class="{'bnUIcon-arrowDown':openFunClass.indexOf(itemClass.name)>-1}"
+                style="color: rgba(0,0,0,.5);margin-right: 5px"></span>
+              {{ itemClass.name }}
+            </div>
+            <div
+                v-if="itemClass.children && itemClass.children.length>0 && openFunClass.indexOf(itemClass.name)>-1">
+              <div class="BnFunExpr-left-body-item-out" v-for="(item,index) in itemClass.children" :key="index">
+                <div class="BnFunExpr-left-body-item " @click="onSelectFun(item)" @mouseenter="checkFun = item"
+                     style="margin: 4px 0"
+                     v-show="item.name.indexOf(searchInput)>-1 || item.usage.indexOf(searchInput)>-1">
+                  <div class="BnFunExpr-left-body-item-top w-text-over" :title="item.name">{{ item.name }}</div>
+                  <div class="BnFunExpr-left-body-item-text w-text-over" :title="item.usage">{{ item.usage }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="BnFunExpr-left-body-list" v-if="listType == 2">
+          <div v-for="(itemClass,index) in columnList" :key="index">
+            <div class="BnFunExpr-left-body-class" @click="changeOpenColumn(itemClass)" :title="itemClass.name">
+				  <span class="bnUIcon bnUIcon-arrow"
+                :class="{'bnUIcon-arrowDown':openColumnClass.indexOf(itemClass.name)>-1}"
+                style="color: rgba(0,0,0,.5);margin-right: 5px"></span>
+              {{ itemClass.name }}
+            </div>
+            <div
+                v-if="itemClass.children && itemClass.children.length>0 && openColumnClass.indexOf(itemClass.name)>-1">
+              <div class="BnFunExpr-left-body-item-out" v-for="(item,index) in itemClass.children" :key="index">
+                <div class="BnFunExpr-left-body-item " @click="onSelectCol(item)"
+                     v-show="item.name.indexOf(searchInput)>-1">
+                  <div class="BnFunExpr-left-body-item-title w-text-over" :title="item.name">{{ item.name }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="BnFunExpr-right">
+      <div class="BnFunExpr-right-title">结果 =</div>
+      <div class="BnFunExpr-right-input" @click="onCodemirrorFocus">
+        <!-- eslint-disable vue/no-v-model-argument -->
+        <Codemirror
+            v-if="functions.length > 0"
+            ref="cm" height="310"
+            placeholder="请设置计算公式"
+            v-model:value="exprExec"
+            :options="cmOptions"
+            @beforeChange="handleBeforeChange"
+        ></Codemirror>
+        <!-- eslint-enable vue/no-v-model-argument -->
+      </div>
+      <div class="BnFunExpr-right-desc">
+        <div class="BnFunExpr-right-desc-title">{{ checkFun.name }}</div>
+        <div class="BnFunExpr-right-desc-content">{{ checkFun.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "codemirror/mode/javascript/javascript.js";
+import "codemirror/addon/display/placeholder.js";
+
+export default {
+  name: "BnFunExpr",
+  props: {
+    // 组件列表：可供选择的组件列表，二维数组，【{类别，【组件、组件】}，...】
+    columnList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 支持外部查询的方法，使用者传进来
+    postFunc: Function,
+    // 函数规则id
+    id: {},
+    // 写入到的组件
+    setToColumn: {}
+  },
+  data() {
+    return {
+      searchInput: "",//筛选输入框
+      listType: 1,//左侧列表展示 1：函数 2：字段
+      openFunClass: ["数字函数", "文本函数", "日期函数", "逻辑函数"],//已打开的函数分类
+      openColumnClass: ["工作表组件"],//已打开的函数分类
+      exprExec: "",//输入框内容
+      //鼠标悬浮时，展示的函数解释实例
+      checkFun: {},
+      // 函数列表
+      functionList: [],
+      functions: [],
+      // 代码编辑器配置
+      cmOptions: {
+        mode: "pseudo",
+        lineWrapping: true,
+        lineNumbers: false,
+        gutters: [],
+        height: 'atuo',
+      },
+      loading: false
+    }
+  },
+  computed: {
+    // 字段列表转化成schema格式
+    schema: {
+      get() {
+        let list = [
+          {
+            "fieldCode": 'table',
+            "fieldName": "工作表",
+            "type": "object",
+            "children": []
+          },
+          {
+            "fieldCode": 'flow',
+            "fieldName": "工作流",
+            "type": "object",
+            "children": []
+          }
+        ];
+        this.columnList.map(item => {
+          switch (item.name) {
+            case '工作表组件': {
+              item.children.map(column => {
+                this.loadColumn(list[0].children, column)
+              })
+              break;
+            }
+            case '流程参数': {
+              item.children.map(column => {
+                this.loadColumn(list[1].children, column)
+              })
+              break;
+            }
+          }
+        })
+        return list;
+      },
+    },
+    // 字段列表汇总
+    columns: {
+      get() {
+        let list = [];
+        this.columnList.map(item => {
+          list = [...list, ...item.children]
+        })
+        return list;
+      },
+    },
+
+  },
+  methods: {
+    async getFunctionList() {
+      let res = await this.postFunc('/expr/functions', null, 'get')
+      if (!res.code) {
+        let arr = []
+        this.functionList = res.data.groups || [];
+        this.functionList.map(item => {
+          arr = [...arr, ...item.children]
+        })
+        this.functions = arr;
+        this.codeMirrorDefineMode();
+      }
+    },
+    async init() {
+      this.loading = true;
+      await this.getFunctionList();
+      if (this.id) {
+        let res = await this.postFunc(`/expr/query/${this.id}`, null, 'get')
+        if (!res.code) {
+          this.exprExec = res.data.exprDisplay;
+        }
+      }
+      this.loading = false;
+    },
+    handleBeforeChange(instance, changeObj) {
+      if (changeObj.origin == '+delete') {
+        // 判断是否为删除操作
+        let from = changeObj.from; // 删除开始位置
+        let to = changeObj.to;     // 删除结束位置
+        let lineText = this.$refs.cm.cminstance.getLine(from.line); // 获取当前行的文本
+        let charBeforeCursor = lineText.charAt(from.ch); // 光标前的字符
+        // 如果删除的是空格
+        if (charBeforeCursor === ' ') {
+          // 找到光标前的上一个空格的位置
+          let lastSpaceIndex = lineText.lastIndexOf(' ', from.ch - 2);
+          // 删除开始的位置（从上一个空格之后）
+          let startPos = {line: from.line, ch: lastSpaceIndex};
+          // 获取即将要删除的字段名字，判断是否是组件
+          let delColumn = this.$refs.cm.cminstance.getRange(startPos, to);
+          let columnNames = this.columns.map(item => `${this.specialString(item.name)}`)
+          if (columnNames.includes(delColumn)) {
+            // 更新删除范围
+            changeObj.update(startPos, to, "");
+          }
+        }
+      }
+    },
+    /**
+     * 整理组件列表为schema
+     *@param array 组件插入到数组
+     *@param column 组件
+     * */
+    loadColumn(array, column) {
+      let data = {
+        fieldCode: (column.id|| '') +'',
+        fieldName: column.name,
+        type: 'string'
+      }
+      if (column.behaviorType == 2) {
+        data.type = 'number'
+      } else if (column.behaviorType == 7 || column.behaviorType == 8) {
+        data.type = 'date'
+      }
+      if (column.parentId) {
+        let flag = false;
+        for (let i in array) {
+          if (array[i].fieldCode == column.parentId) {
+            array[i].children.push(data)
+            flag = true;
+            break;
+          }
+        }
+        if (!flag) {
+          let parent = {
+            fieldCode: column.parentId.toString(),
+            fieldName: column.parentName,
+            type: 'array',
+            children: [data]
+          }
+          array.push(parent)
+        }
+      } else {
+        array.push(data)
+      }
+    },
+    /**
+     * 切换函数分类的打开挂壁
+     * */
+    changeOpenClass(item) {
+      let index = this.openFunClass.indexOf(item.name);
+      if (index == -1) {
+        this.openFunClass.push(item.name)
+      } else {
+        this.openFunClass.splice(index, 1)
+      }
+    },
+    /**
+     * 切换字段分类的打开挂壁
+     * */
+    changeOpenColumn(item) {
+      let index = this.openColumnClass.indexOf(item.name);
+      if (index == -1) {
+        this.openColumnClass.push(item.name)
+      } else {
+        this.openColumnClass.splice(index, 1)
+      }
+    },
+    /**
+     * 获取焦点
+     * */
+    onCodemirrorFocus() {
+      this.$nextTick(() => {
+        this.$refs.cm && this.$refs.cm.cminstance.focus();
+        // 清空标记
+        // if(this.errorTip.length>0){
+        // this.errorTip.forEach(marker => marker.clear());
+        // this.errorTip = [];
+        // }
+      });
+    },
+    /**
+     * 高亮代码
+     */
+    specialString(str) {
+      let specialRegExp = /\*|\+|\?|\||\{|\}|\[|\]|\(|\)|\^|\$|\./g;
+      let s = str.replace(specialRegExp, item => '\\' + item) || '';
+      if (s.indexOf('-') > -1) {
+        s = `\`${s}\``
+      } else {
+        s = ` ${s} `
+      }
+      return s
+    },
+    codeMirrorDefineMode() {
+      let funNames = this.functions.map(item => item.name).join('|') || '=-=**=-=';
+      let columnNames = this.columns.map(item => `${this.specialString(item.name)}`).join('|') || '=-=**=-=';
+      CodeMirror.defineMode("pseudo", (config, parserConfig) => {
+        let funRegExp = new RegExp(`^(${funNames})\(\\b\)`, 'g');
+        let columnRegExp = new RegExp(`^(${columnNames})`, 'g');
+        return {
+          startState: function () {
+            return {
+              inString: false,
+              inChar: false
+            };
+          },
+          token: (stream, state) => {
+            if (state.inString) {
+              return "string";
+            } else if (state.inChar) {
+              return "string";
+            } else {
+              if (stream.match(/^[+-\/*%<>=\(\)]+/)) {
+                return "operator";
+              }
+              if (stream.match(funRegExp)) {
+                return "keyword";
+              } else if (stream.match(columnRegExp)) {
+                return "bnColumn"
+              } else if (stream.match(/^\d*\.\d+|\d+/)) {
+                return "number";
+              } else if (stream.match(/^[a-zA-Z_][a-zA-Z0-9_]*/)) {
+                return "variable";
+              } else {
+                stream.next();
+                return null;
+              }
+            }
+          }
+        };
+      });
+    },
+    /**
+     * 选择函数
+     */
+    onSelectFun(item) {
+      this.$nextTick(() => {
+        let cursor = this.$refs.cm && this.$refs.cm.cminstance.getCursor();
+        this.$refs.cm && this.$refs.cm.cminstance.replaceRange(`${item.name}()`, cursor, cursor); // 在当前光标位置插入文本
+        cursor.ch += item.name.length + 1;
+        this.$refs.cm && this.$refs.cm.cminstance.setCursor(cursor); // 将光标移动到指定位置
+        this.$refs.cm && this.$refs.cm.cminstance.focus(); // 确保编辑器获得焦点
+      });
+    },
+    /**
+     * 选择字段
+     */
+    onSelectCol(item) {
+      this.$nextTick(() => {
+        let cursor = this.$refs.cm && this.$refs.cm.cminstance.getCursor();
+        // 需要判断插入时，前面是不是 ( 符号，如果不是需要在字段前加个 , 号
+        let lastChar = this.$refs.cm.cminstance.getRange({line: 0, ch: 0}, cursor).slice(-1)
+        // 判断插入字段后，光标需要指向的位置
+        let addIndex = 2;
+        let name = item.name;
+        if (item.name.indexOf('-') > -1) {
+          name = `\`${name}\``
+        } else {
+          name = ` ${name} `
+        }
+        if (lastChar != '(') {
+          name = ',' + name
+          addIndex++;
+        }
+        this.$refs.cm && this.$refs.cm.cminstance.replaceRange(name, cursor, cursor); // 在当前光标位置插入文本
+        cursor.ch += item.name.length + addIndex;
+        this.$refs.cm && this.$refs.cm.cminstance.setCursor(cursor); // 将光标移动到指定位置
+        this.$refs.cm && this.$refs.cm.cminstance.focus(); // 确保编辑器获得焦点
+      });
+    },
+    /**
+     * 保存
+     * */
+    saveRule() {
+      return {
+        id: this.id || '',//函数规则id
+        schema: this.schema,
+        exprDisplay: this.exprExec
+      };
+    },
+  },
+  mounted() {
+    this.init()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "../font/iconfont.css";
+
+:deep(.cm-bnColumn) {
+  color: #2DACFC;
+  background-color: #F1F7FF; /* 你可以根据需要改变背景色 */
+}
+
+:deep(.cm-bnErrTip) {
+  color: red !important;
+}
+
+:deep(.CodeMirror) {
+  height: auto;
+  font-size: 14px;
+}
+
+:deep(.CodeMirror-code),
+:deep(.CodeMirror-lines),
+:deep(.CodeMirror-line) {
+  font-size: 14px;
+}
+
+:deep(.CodeMirror-activeline-background) {
+  min-height: 24px;
+  top: -3px;
+}
+
+.BnFunExpr {
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  &-left {
+    flex-grow: 0;
+    height: 572px;
+    width: 225px;
+
+    &-top {
+      padding: 0 16px;
+
+      &-btns {
+        display: flex;
+        justify-content: space-around;
+        position: relative;
+        width: 100%;
+        padding: 8px 16px 0 16px;
+        height: 48px;
+        border-bottom: 1px solid rgba(0, 0, 0, .06);
+      }
+
+      &-btn {
+        width: 60px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-size: 14px;
+        color: #000;
+        cursor: pointer;
+
+        &:hover {
+          color: #2783F2;
+        }
+
+        &.active {
+          color: #2783F2;
+          border-bottom: 2px solid #2783F2;
+        }
+      }
+
+      &-input {
+        padding: 12px 0;
+
+        :deep(.el-input__wrapper) {
+          border-radius: 0;
+        }
+      }
+    }
+
+    &-body {
+      position: relative;
+      height: calc(100% - 110px);
+      overflow-y: auto;
+
+      &-class {
+        height: 46px;
+        padding: 0 16px;
+        line-height: 46px;
+        font-size: 14px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, .8);
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &-item-out {
+        padding: 0 16px;
+      }
+
+      &-item {
+        position: relative;
+        padding: 0 8px 0 24px;
+        cursor: pointer;
+
+        &:hover {
+          background: #F1F7FF;
+        }
+
+        &-top {
+          height: 22px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, .85);
+          font-size: 13px;
+          font-weight: 600;
+        }
+
+        &-text {
+          height: 22px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, .45);
+          font-weight: 400;
+          font-size: 12px;
+        }
+
+        &-title {
+          height: 40px;
+          line-height: 40px;
+          color: rgba(0, 0, 0, .65);
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  &-right {
+    position: relative;
+    flex-grow: 1;
+    width: calc(100% - 225px);
+    height: 572px;
+
+    &-title {
+      height: 58px;
+      line-height: 58px;
+      font-size: 20px;
+      font-weight: 600;
+      color: #000;
+      padding: 0 24px;
+    }
+
+    &-input {
+      position: relative;
+      width: 100%;
+      height: 320px;
+      overflow-y: auto;
+      border-bottom: 1px solid rgba(0, 0, 0, .06);
+      padding-left: 20px;
+    }
+
+    &-desc {
+      height: 250px;
+      padding: 0 20px;
+      overflow-y: auto;
+
+      &-title {
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, .85);
+      }
+
+      &-content {
+        line-height: 24px;
+        color: rgba(0, 0, 0, .65);
+        font-size: 12px;
+        white-space: break-spaces;
+      }
+    }
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 24px;
+    border-top: 1px solid #eee;
+
+    &-a {
+      font-size: 12px;
+      color: #2783F2;
+      text-decoration: none;
+    }
+  }
+}
+
+:deep(.CodeMirror-gutters) {
+  display: none;
+}
+
+:deep(.CodeMirror-sizer) {
+  margin-left: 0;
+}
+</style>