@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnFunExpr/BnFunExpr.vue

@@ -1,608 +0,0 @@
-<!--
-  @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>