cloud-web-corejs 1.0.54-dev.52 → 1.0.54-dev.520

package/src/components/xform/form-designer/form-widget/dialog/formulaDialog.vue

@@ -0,0 +1,799 @@
+<template>
+  <el-dialog
+    :visible.sync="formulaDialogVisible"
+    :title="i18nt('designer.hint.formulaSetting')"
+    custom-class="dialog-style list-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    width="70%"
+    top="0px"
+    ref="colFormulaDialog"
+    @close="dialogClose"
+  >
+    <div class="cont">
+      <el-row>
+        <el-col :span="24">
+          <div class="editor">
+            <div class="editor-top">
+              <el-row>
+                <el-col :span="22">
+                  <div style="font-weight: bold">value =</div>
+                </el-col>
+                <!-- el-tag 模式 按钮 end -->
+                <el-col :span="2">
+                  <el-button size="small" @click="clearFormula" type="danger" plain>
+                    {{ i18nt("designer.hint.formulaClear") }}
+                  </el-button>
+                </el-col>
+              </el-row>
+              <div ref="cmRef" style="height: 83px; width: 100%"></div>
+            </div>
+            <!-- -->
+            <div class="editor-bottom">
+              <el-button
+                v-on:click="insertSymbol(item)"
+                size="default"
+                v-for="(item, idx) in operate"
+                :key="idx"
+              >
+                {{ item }}
+              </el-button>
+            </div>
+            <!-- -->
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="margin: 10px">
+        <el-col :span="6">
+          <div class="group-item-left">
+            <div class="item-header">
+              {{ i18nt("designer.hint.formulaWidgetList") }}
+            </div>
+            <el-input
+              :placeholder="i18nt('designer.hint.formulaSearch')"
+              v-model="filterText"
+              clearable
+            ></el-input>
+            <div class="item-body-left">
+              <el-tree
+                ref="fieldTree"
+                :data="fieldTreeData"
+                :filter-node-method="filterNode"
+                @node-click="insertField"
+              >
+                <template #default="{ node, data }">
+                  <span class="custom-tree-node">
+                    <el-tooltip effect="dark" :content="node.label" placement="right">
+                      <span>{{ node.label }}</span>
+                    </el-tooltip>
+                  </span>
+                </template>
+              </el-tree>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-row>
+            <el-col :span="24">
+              <div class="group-item-right-top">
+                <div class="item-header">
+                  {{ i18nt("designer.hint.formulaFunctionList") }}
+                </div>
+                <div class="function-list">
+                  <el-collapse v-model="funcActiveCollapseNames">
+                    <template v-for="(item, index) in funcList">
+                      <el-collapse-item
+                        :key="index"
+                        :title="i18nt(item.fClass)"
+                        :name="index"
+                        v-if="index < 2"
+                      >
+                        <div
+                          v-for="(info, i) in item.flist"
+                          :key="i"
+                          class="field-item"
+                          @click="insertFunction(info.fName + '(')"
+                          @mouseenter="
+                            showIntro(
+                              i18nt(info.fName),
+                              i18nt(item.fClass),
+                              i18nt(info.fIntro)
+                            )
+                          "
+                          v-on:mouseleave="resetIntro"
+                        >
+                          <span>{{ info.fName }}</span>
+                          <el-tag :type="getClass(info.fType)"
+                            >{{ i18nt(info.fType) }}
+                          </el-tag>
+                        </div>
+                      </el-collapse-item>
+                    </template>
+                  </el-collapse>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="12">
+          <div class="group-item-right-bottom">
+            <div class="item-header">{{ introTitle }}</div>
+            <div class="item-body-right-bottom">
+              <ul>
+                <li
+                  v-if="introduction.title !== ''"
+                  style="font-size: 16px; color: #0a5d7c"
+                >
+                  {{ introduction.title }}
+                </li>
+                <li>
+                  <div class="intro-content" v-html="introduction.content"></div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="dialog-footer" slot="footer">
+      <el-button
+        @click="formulaDialogVisible = false"
+        class="button-sty"
+        icon="el-icon-close"
+      >
+        {{ i18nt("designer.hint.cancel") }}
+      </el-button>
+      <el-button
+        type="primary"
+        @click="saveFormula"
+        class="button-sty"
+        icon="el-icon-check"
+      >
+        {{ i18nt("designer.hint.confirm") }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { basicSetup, EditorView } from "codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { EditorState } from "@codemirror/state";
+import i18n from "@base/components/xform/utils/i18n";
+import {
+  deepClone,
+  getAllContainerWidgets,
+  getAllFieldWidgets,
+  getFieldWidgetById,
+  traverseFieldWidgetsOfContainer,
+  loopHandleWidget,
+} from "@base/components/xform/utils/util";
+import {
+  placeholders,
+  baseTheme,
+  formulas,
+  FORMULA_REG_EXP,
+} from "@base/components/xform/utils/formula-util";
+
+export default {
+  name: "formula-editor",
+  mixins: [i18n],
+  components: {},
+  props: {
+    option: Object,
+  },
+  computed: {
+    formulaForView() {
+      const matchResult = this.formula.match(FORMULA_REG_EXP);
+      if (!matchResult) {
+        return this.formula;
+      }
+
+      let resultFormula = this.formula;
+      matchResult.forEach((mi) => {
+        const secondPart = mi.split(".")[1];
+        resultFormula = resultFormula.replaceAll(mi, secondPart);
+      });
+
+      return resultFormula;
+    },
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.fieldTree.filter(val);
+    },
+  },
+  data() {
+    return {
+      codeMirror: null,
+      formula: "",
+      tags: [], // 公式页签集合
+      fieldTreeData: [], // 设计器字段树
+      filterText: "",
+      formulaDialogVisible: true,
+      operate: ["+", "-", "*", "/", "!=", "==", "<", ">", "<=", ">=", "(", ")", ","],
+      insertNum: 0,
+      insertStr: "",
+      activeNames: ["1"],
+      widgetSizes: [
+        {
+          label: this.i18nt("designer.hint.formulaSizeLarge"),
+          value: "large",
+        },
+        {
+          label: this.i18nt("designer.hint.formulaSizeMedium"),
+          value: "default",
+        },
+        {
+          label: this.i18nt("designer.hint.formulaSizeSmall"),
+          value: "small",
+        },
+        {
+          label: this.i18nt("designer.hint.formulaSizeMini"),
+          value: "small",
+        },
+      ],
+      introTitle: this.i18nt("designer.hint.formulaFunctionExplain"),
+      introduction: {
+        title: this.i18nt("designer.hint.formulaPleaseSelect"),
+        content:
+          '<span class="cg">' +
+          this.i18nt("designer.hint.formulaSample") +
+          '：</span><span class="fname">SUM</span><span class="cg">(</span><span class="cs">' +
+          this.i18nt("designer.hint.formulaPara") +
+          '1</span><span class="cg">,</span><span class="cs">' +
+          this.i18nt("designer.hint.formulaPara") +
+          '2</span><span class="cg">)</span>',
+      },
+      funcList: formulas,
+      funcActiveCollapseNames: [0],
+    };
+  },
+  created() {
+    this.editFormula();
+  },
+  mounted() {},
+  methods: {
+    dialogClose() {
+      this.formulaDialogVisible = false;
+      this.$emit("update:visiable", false);
+    },
+    clearFormula(event) {
+      this.formula = ""; //CodeMirror 模式
+      this.tags = []; //el-tag模式
+      this.codeMirror.dispatch({
+        changes: { from: 0, to: this.codeMirror.state.doc.length, insert: "" },
+      });
+    },
+
+    /** 删除字符串str中的第n个subStr
+     * @param {Object} str
+     * @param {Object} subStr
+     * @param {Object} n
+     */
+    deleteChar(str, subStr, n) {
+      let num = -1;
+      return str.replace(/a/g, (item) => {
+        num++;
+        return num === n ? "" : item;
+      });
+    },
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    handleTableConfigData(widget, callback) {
+      callback(widget);
+    },
+    loadFieldListToTree() {
+      this.fieldTreeData.length = 0; //先清空
+      let newItems = this.option.fieldData.map((item) => {
+        const fieldNode = {
+          id: item.id,
+          name: item.label,
+          label: item.label,
+          type: "input",
+          formItemFlag: true,
+        };
+        return fieldNode;
+      });
+      this.fieldTreeData.push(...newItems);
+    },
+
+    // 插入字段
+    insertField(obj, node, self) {
+      if (!!obj.formItemFlag) {
+        let fieldId = obj.id + "";
+        let fieldLabel = "[" + obj.label + "]";
+        this.updateCodeMirror(fieldId, fieldLabel, "field");
+      }
+    },
+
+    // 插入符号
+    insertSymbol(opt) {
+      this.updateCodeMirror(opt, opt, null);
+    },
+
+    // 插入函数
+    insertFunction(opt) {
+      const val = opt.substring(0, opt.length - 1);
+      this.updateCodeMirror(val, val, "func");
+    },
+
+    updateCodeMirror(field, text, type = null) {
+      if (type) {
+        let obj = {
+          field: field,
+          text: text,
+          type: type,
+        };
+        let selectionLet = obj.field.length + obj.text.length + obj.type.length; //光标位置；
+        let code = `{{${obj.field}.${obj.text}.${obj.type}}}`;
+        if (type === "func") {
+          code += "()";
+          selectionLet = selectionLet + 7;
+        } else {
+          selectionLet = selectionLet + 6;
+        }
+
+        if (code) {
+          this.codeMirror.dispatch({
+            changes: {
+              from: this.codeMirror.state.selection.main.head,
+              to: this.codeMirror.state.selection.main.head,
+              insert: code,
+            },
+            selection: {
+              anchor: this.codeMirror.state.selection.main.head + selectionLet,
+            },
+          });
+        }
+      } else {
+        this.codeMirror.dispatch({
+          changes: {
+            from: this.codeMirror.state.selection.main.head,
+            to: this.codeMirror.state.selection.main.head,
+            insert: text,
+          },
+          selection: {
+            anchor: this.codeMirror.state.selection.main.head + text.length,
+          },
+        });
+      }
+    },
+
+    // 在字符串中查找[开始]结尾的字符串，并删除
+    removeStr(str) {
+      let a = str.indexOf("[");
+      if (a === -1) {
+        return str;
+      }
+      let b = str.indexOf("]", a) + 1;
+      let c = str.substring(a, b);
+      let strArr = str.split(c);
+      let newStr = "";
+      for (let i = 0; i < strArr.length; i++) {
+        newStr += strArr[i];
+      }
+      return this.removeStr(newStr);
+    },
+    extractFieldNames(formula) {
+      if (!formula) return [];
+      const fieldArray = [];
+      let tempFormula = formula;
+
+      // 循环查找所有 [字段名] 格式的引用
+      while (true) {
+        const startIndex = tempFormula.indexOf("[");
+        if (startIndex === -1) {
+          break; // 没有更多字段引用了
+        }
+
+        const endIndex = tempFormula.indexOf("]", startIndex);
+        if (endIndex === -1) {
+          break; // 格式不正确，没有匹配的右括号
+        }
+
+        // 提取字段名（不包含方括号）
+        const fieldName = tempFormula.substring(startIndex + 1, endIndex);
+
+        // 避免重复添加相同的字段名
+        if (!fieldArray.includes(fieldName)) {
+          fieldArray.push(fieldName);
+        }
+
+        // 从剩余部分继续查找
+        tempFormula = tempFormula.substring(endIndex + 1);
+      }
+
+      return fieldArray;
+    },
+    /**
+     * 字段label可能在公式保存后再次被修改，当编辑公式时需要再次刷新公式中的字段label（不刷新也不会影响公式计算结果）
+     */
+    refreshFormula() {
+      let formula = this.option.formula;
+
+      let fieldTreeData = this.fieldTreeData;
+      let paramCodes = this.extractFieldNames(formula);
+      paramCodes.forEach((paramCode) => {
+        let fieldNode = fieldTreeData.find((item) => item.id === paramCode);
+        if (!!fieldNode) {
+          let newParamCode = `{{${fieldNode.id}.[${fieldNode.label}].field}}`;
+          formula = formula.replaceAll(`[${paramCode}]`, newParamCode);
+        } else {
+          let newParamCode = `{{${paramCode}.[paramCode(未定义)].field}}`;
+          formula = formula.replaceAll(`[${paramCode}]`, newParamCode);
+        }
+      });
+      this.formula = formula;
+    },
+
+    // 打开编辑公式弹窗
+    editFormula() {
+      this.fieldTreeData.length = 0;
+      // 初始化字段树
+
+      this.loadFieldListToTree();
+
+      console.log("设计器字段===>", this.fieldTreeData);
+
+      // 加载当前字段计算公式tags
+      this.refreshFormula();
+      const code = this.formula;
+      this.formulaDialogVisible = true;
+
+      //==== codeMirror 挂载视图 ====
+      this.$nextTick(() => {
+        this.codeMirror = new EditorView({
+          state: EditorState.create({
+            doc: code,
+            extensions: [basicSetup, javascript(), [baseTheme, [], placeholders]],
+          }),
+          parent: this.$refs.cmRef,
+        });
+        console.log("编辑器实例==>", this.codeMirror);
+      });
+    },
+
+    // 保存计算公式
+    getFormulaForView(formula) {
+      const matchResult = formula.match(FORMULA_REG_EXP);
+      if (!matchResult) {
+        return {
+          formula: formula,
+          showFormula: formula,
+        };
+      }
+
+      let fullFormula = this.formula;
+      let showFormula = this.formula;
+      let realFormula = this.formula;
+      matchResult.forEach((mi) => {
+        let arr = mi.split(".");
+        const firstPart = arr[0];
+        const secondPart = arr[1];
+        const thirdPart = arr[2];
+        const fieldId = firstPart.substring(2, firstPart.length);
+        const nodeType = thirdPart.substring(0, thirdPart.length - 2);
+
+        showFormula = showFormula.replaceAll(mi, secondPart);
+        if (nodeType == "field") {
+          realFormula = realFormula.replaceAll(mi, `[${fieldId}]`);
+        } else {
+          realFormula = realFormula.replaceAll(mi, secondPart);
+        }
+      });
+
+      return {
+        showFormula,
+        fullFormula,
+        formula: realFormula,
+      };
+    },
+    saveFormula() {
+      this.formula = this.codeMirror.state.doc.text.join("");
+      let resultObj = this.getFormulaForView(this.formula);
+      this.option.confirm && this.option.confirm(resultObj);
+      this.dialogClose();
+    },
+    getClass(type) {
+      if (type === this.i18nt("designer.hint.formulaNumber")) {
+        return "warning";
+      }
+      if (type === this.i18nt("designer.hint.formulaChar")) {
+        return "";
+      }
+      if (type === this.i18nt("designer.hint.formulaObject")) {
+        return "danger";
+      }
+    },
+
+    resetIntro() {
+      this.introTitle = this.i18nt("designer.hint.formulaFunctionExplain");
+      this.introduction = {
+        title: this.i18nt("designer.hint.formulaPleaseSelect"),
+        content:
+          '<span class="cg">' +
+          this.i18nt("designer.hint.formulaSample") +
+          '：</span><span class="fname">SUM</span><span class="cg">(</span><span class="cs">参数1</span><span class="cg">,</span><span class="cs">参数2</span><span class="cg">)</span>',
+      };
+    },
+
+    showIntro(name, title, content) {
+      content = '<span class="cg">' + content + "</span>";
+      this.introduction = {
+        title: title,
+        content: content,
+      };
+      this.introTitle = name;
+    },
+
+    /**
+     * 校验计算公式是否正确
+     * @param s
+     * @returns {boolean}
+     */
+    isValid(s) {
+      let a = []; //存储左括号出现的地方
+      let l = s.length;
+      let k = 0;
+      let flag = 1;
+      let j;
+      for (let i = 0; i < l && flag; i++) {
+        switch (s[i]) {
+          case "(":
+            a[k] = i;
+            k++;
+            break;
+          case ")":
+            j = a[k - 1];
+            if (s[j] === "(") {
+              a[k] = 0;
+              k--;
+            } else {
+              flag = 0;
+            }
+            break;
+          case "{":
+            a[k] = i;
+            k++;
+            break;
+          case "}":
+            j = a[k - 1];
+            if (s[j] === "{") {
+              a[k] = 0;
+              k--;
+            } else {
+              flag = 0;
+            }
+            break;
+          case "[":
+            a[k] = i;
+            k++;
+            break;
+          case "]":
+            j = a[k - 1];
+            if (s[j] === "[") {
+              a[k] = 0;
+              k--;
+            } else {
+              flag = 0;
+            }
+            break;
+        }
+      }
+      if (k !== 0) {
+        flag = 0;
+      }
+      return flag !== 0;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.cm-editor) {
+  height: 100%;
+}
+
+li {
+  list-style: none;
+}
+
+/*去掉li前面的点*/
+.el-input-group {
+  cursor: pointer;
+}
+
+.header {
+  width: 97%;
+  border: 1px solid #ccc;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  height: 31px;
+  line-height: 31px;
+  padding-left: 15px;
+}
+
+.editor {
+  margin-left: 10px;
+  margin-right: 10px;
+  height: 200px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.editor-top {
+  //margin-left: 10px;
+  height: 130px;
+  width: 100%;
+  padding: 8px;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.editor-bottom {
+  border-left: 1px solid #ccc;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 5px;
+  align-content: flex-start;
+}
+
+.body-right-button {
+  width: 60px;
+  height: 40px;
+}
+
+.group-form {
+  margin-top: 15px;
+  display: flex;
+  justify-content: space-between;
+  height: 350px;
+}
+
+.group-item-left {
+  height: 350px;
+  border: 1px solid #ccc;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  margin-bottom: 5px;
+  padding: 0;
+  width: 100%;
+}
+
+.group-item-right-top {
+  height: 350px;
+  border: 1px solid #ccc;
+  border-radius: 0;
+  margin-bottom: 5px;
+  width: 100%;
+}
+
+.group-item-right-bottom {
+  height: 350px;
+  border: 1px solid #ccc;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  margin-bottom: 5px;
+  width: 100%;
+}
+
+.item-header {
+  border-bottom: 1px solid #ccc;
+  height: 29px;
+  line-height: 29px;
+  padding-left: 15px;
+  font-weight: bold;
+}
+
+.item-body-left {
+  height: 320px;
+  overflow-y: auto;
+}
+
+.function-list {
+  height: 320px;
+  overflow-y: auto;
+
+  :deep(.el-collapse-item__header) {
+    font-weight: normal !important;
+  }
+}
+
+.item-body-right-bottom {
+  height: 152px;
+  overflow-y: auto;
+}
+
+.el-collapse {
+  border: none;
+}
+
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+}
+
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+  border: none;
+}
+
+:deep(.el-collapse-item__wrap) {
+  border: none;
+}
+
+:deep(.el-collapse-item__arrow) {
+  margin-left: 8px;
+}
+
+.field-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  padding-left: 30px;
+  padding-right: 15px;
+  cursor: pointer;
+}
+
+.field-item:hover {
+  background-color: #f8f8f8;
+}
+
+p::before {
+  content: "●  ";
+  color: #0a5d7c;
+}
+
+p {
+  height: 24px;
+  line-height: 24px;
+  padding: 0 15px;
+  font-size: 16px;
+  color: #0a5d7c;
+}
+
+.intro-content {
+  padding-left: 30px;
+}
+
+.cg {
+  color: #0a5d7c;
+}
+
+.fname {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 0 5px;
+  margin: 1px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #708;
+  background: #fff;
+}
+
+.cs {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 0 5px;
+  margin: 1px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 20px;
+  background: #178cdf;
+}
+
+:deep(.el-dialog__body) {
+  padding: 0;
+}
+
+.small-padding-dialog {
+  /* margin-top: 0px; */
+}
+</style>