cloud-web-corejs 1.0.54-dev.200 → 1.0.54-dev.202

package/src/components/xform/form-designer/setting-panel/property-editor/formula-editor.vue

@@ -1,28 +1,35 @@
 <template>
   <div>
-    <el-form-item v-if="optionModel.formulaEnabled" :label="i18nt('designer.setting.formula')">
-      <el-tooltip effect="light" :content="formulaForView" placement="top">
+    <el-form-item
+      :label="i18nt('designer.setting.formula')"
+      v-if="optionModel.formulaEnabled">
+    </el-form-item>
+    <el-form-item label-width="0" v-if="optionModel.formulaEnabled">
+      <el-tooltip
+        :content="formulaForView"
+        effect="light"
+        placement="top">
         <el-input v-model="formulaForView" readonly>
-          <template slot="append">
-            <el-button icon="el-icon-edit" @click="editFormula"></el-button>
+          <template #append>
+            <el-button
+              @click="editFormula"
+              icon="el-icon-edit"></el-button>
           </template>
         </el-input>
       </el-tooltip>
     </el-form-item>
     <el-dialog
+      v-if="formulaDialogVisible"
       :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"
-      top="0px"
       width="70%"
-      ref="colFormulaDialog"
-      custom-class="dialog-style list-dialog dialog-checkbox pd_0"
-      v-el-drag-dialog
-      v-el-dialog-center
-    >
+      top="0px"
+      ref="colFormulaDialog">
       <div class="cont">
         <el-row>
           <el-col :span="24">
@@ -30,98 +37,64 @@
               <div class="editor-top">
                 <el-row>
                   <el-col :span="22">
-                    <div style="font-weight: bold;"> {{ optionModel.label }} =</div>
+                    <div style="font-weight: bold">
+                      {{ this.optionModel.label }} =
+                    </div>
                   </el-col>
+                  <!-- el-tag 模式 按钮 end -->
                   <el-col :span="2">
-                    <el-button size="small" @click="clearFormula" type="danger"
-                               plain=""> 清除
+                    <el-button
+                      size="small"
+                      @click="clearFormula"
+                      type="danger"
+                      plain>
+                      {{ i18nt("designer.hint.formulaClear") }}
                     </el-button>
                   </el-col>
                 </el-row>
-                <!--              <div class="el-row">
-                                <div class="el-col el-col-22">
-                                  <div style="font-weight: bold;"> 年龄 =</div>
-                                </div>
-                                <div class="el-col el-col-2">
-                                  <button type="button"
-                                          class="el-button el-button&#45;&#45;danger el-button&#45;&#45;small is-plain">&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;<span> 清除 </span>
-                                  </button>
-                                </div>
-                              </div>-->
-                <div ref="cmRef" style="height: 110px; width: 100%;">
-                  <editor-content :editor="codeMirror" />
-                </div>
-<!--                <div style="height: 110px; width: 100%;">
-                  <codemirror
-                    ref="codeEditor"
-                    v-model="formulaStr"
-                    :options="cmOptions"
-                    @input="codeMirrorChange"
-                  ></codemirror>
-                </div>-->
+                <div ref="cmRef" style="height:83px;width:100%"></div>
               </div>
+              <!-- -->
               <div class="editor-bottom">
-                <template v-for="(item,index) in operate">
-                  <el-button :key="index" size="default" @click="insertSymbol(item)">{{ item }}</el-button>
-                </template>
-                <!--              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> + </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> - </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> * </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> / </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> != </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> == </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> &lt; </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> &gt; </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> &lt;= </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> &gt;= </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> ( </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> ) </span></button>
-                              <button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;default">&lt;!&ndash;&ndash;&gt;
-                                &lt;!&ndash;&ndash;&gt;<span> , </span></button>-->
+                <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-row style="margin: 10px">
           <el-col :span="6">
             <div class="group-item-left">
-              <div class="item-header"> 组件列表</div>
-              <el-input v-model="filterText" :placeholder="i18nt('designer.hint.formulaSearch')" clearable></el-input>
+              <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"
-                >
-                <span class="custom-tree-node" slot-scope="{ node }">
-                  <el-tooltip effect="dark" :content="node.label" placement="right">
-                    <span>{{ node.label }}</span>
-                  </el-tooltip>
-                </span>
+                  @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 role="tree" class="el-tree">
-                                <div role="treeitem" tabindex="0" draggable="false" class="el-tree-node is-focusable">
-                                  <div class="el-tree-node__content" style="padding-left: 0px;"><span
-                                    class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;
-                                    <span
-                                    class="custom-tree-node"><span class="el-tooltip"
-                                                                   aria-describedby="el-tooltip-4169" tabindex="0">number</span></span>
-                                  </div>&lt;!&ndash;&ndash;&gt;</div>&lt;!&ndash;&ndash;&gt;
-                                <div class="el-tree__drop-indicator" style="display: none;"></div>
-                              </div>-->
               </div>
             </div>
           </el-col>
@@ -129,77 +102,36 @@
             <el-row>
               <el-col :span="24">
                 <div class="group-item-right-top">
-                  <div class="item-header"> 函数列表</div>
+                  <div class="item-header">
+                    {{
+                      i18nt(
+                        "designer.hint.formulaFunctionList"
+                      )
+                    }}
+                  </div>
                   <div class="function-list">
                     <el-collapse v-model="funcActiveCollapseNames">
-                      <el-collapse-item v-for="(item,index) in funcList" :key="index" :name="index"
-                                        :title="i18nt(item.fClass)">
-                        <div v-for="(item2,index2) in item.flist" :key="index2" class="field-item"
-                             @click="insertFunction(item2.fName +'(')"
-                             @mouseenter="showIntro(i18nt(item2.fName),i18nt(item.fClass),i18nt(item2.fIntro))"
-                             @mouseleave="resetIntro">
-                          <span>{{ item2.fName }}</span><span
-                          class="el-tag el-tag--light">{{ i18nt(item2.fType) }} </span></div>
-                        <!--                      <div class="field-item"><span>SUM</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>AVERAGE</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>MAX</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>MIN</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>ABS</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>ROUND</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>CEILING</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>LOG</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>MOD</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>POWER</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>-->
+                      <el-collapse-item
+                        v-for="(item, index) in funcList"
+                        :key="index"
+                        :title="i18nt(item.fClass)"
+                        :name="index">
+                        <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>
                     </el-collapse>
-                    <!--                  <div role="tablist" aria-multiselectable="true" class="el-collapse">
-                                        <div class="el-collapse-item is-active">
-                                          <div role="tab" aria-expanded="true" aria-controls="el-collapse-content-7683"
-                                               aria-describedby="el-collapse-content-7683">
-                                            <div role="button" id="el-collapse-head-7683" tabindex="0"
-                                                 class="el-collapse-item__header is-active">数学函数<i
-                                              class="el-collapse-item__arrow el-icon-arrow-right is-active"></i></div>
-                                          </div>
-                                          <div role="tabpanel" aria-labelledby="el-collapse-head-7683" id="el-collapse-content-7683"
-                                               class="el-collapse-item__wrap">
-                                            <div class="el-collapse-item__content">
-                                              <div class="field-item"><span>INT</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>SUM</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>AVERAGE</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>MAX</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>MIN</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>ABS</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>ROUND</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>CEILING</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>LOG</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>MOD</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                              <div class="field-item"><span>POWER</span><span
-                                                class="el-tag el-tag&#45;&#45;light">数字 </span></div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>-->
-
                   </div>
                 </div>
               </el-col>
@@ -210,12 +142,15 @@
               <div class="item-header">{{ introTitle }}</div>
               <div class="item-body-right-bottom">
                 <ul>
-                  <li v-if="!!introduction.title" style="font-size: 16px; color: rgb(10, 93, 124);"> {{
-                      introduction.title
-                    }}
+                  <li
+                    v-if="introduction.title !== ''"
+                    style="font-size: 16px; color: #0a5d7c">
+                    {{ introduction.title }}
                   </li>
                   <li>
-                    <div class="intro-content" v-html="introduction.content"></div>
+                    <div
+                      class="intro-content"
+                      v-html="introduction.content"></div>
                   </li>
                 </ul>
               </div>
@@ -223,37 +158,41 @@
           </el-col>
         </el-row>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="formulaDialogVisible = false">{{ $t2('取 消', 'system.button.cancel2') }}</el-button>
-        <el-button type="primary" @click="saveFormula">{{ $t2('确 定', 'system.button.confirm2') }}</el-button>
-      </span>
+      <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>
   </div>
 </template>
 
 <script>
-import i18n from "../../../../../components/xform/utils/i18n"
-
-/*import { Editor, EditorContent } from '@tiptap/vue-2'
-import StarterKit from '@tiptap/starter-kit'
-import {Schema, DOMParser} from "prosemirror-model"*/
-
-import {
-  formulas,
-  FORMULA_REG_EXP,
-} from "../../../../../components/xform/utils/formula";
+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,
-  getAllFieldWidgets,
   getAllContainerWidgets,
-  traverseFieldWidgetsOfContainer, getFieldWidgetById
-} from "../../../../../components/xform/utils/util";
-
+  getAllFieldWidgets,
+  getFieldWidgetById,
+  traverseFieldWidgetsOfContainer
+} 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: {/*EditorContent*/},
+  components: {},
   props: {
     designer: Object,
     selectedWidget: Object,
@@ -261,46 +200,33 @@ export default {
   },
   computed: {
     formulaForView() {
-      const o = this.optionModel.formula.match(FORMULA_REG_EXP);
-      if (!o) return this.optionModel.formula;
-      let e = this.optionModel.formula;
-      return (
-        o.forEach((n) => {
-          const l = n.split(".")[1];
-          e = e.replaceAll(n, l);
-        }),
-          e
-      );
+      const matchResult = this.optionModel.formula.match(FORMULA_REG_EXP)
+      if (!matchResult) {
+        return this.optionModel.formula
+      }
+
+      let resultFormula = this.optionModel.formula
+      matchResult.forEach(mi => {
+        const secondPart = mi.split('.')[1]
+        resultFormula = resultFormula.replaceAll(mi, secondPart)
+      })
+
+      return resultFormula
     },
   },
   watch: {
-    filterText(o) {
-      this.$refs.fieldTree.filter(o);
+    filterText(val) {
+      this.$refs.fieldTree.filter(val);
     },
   },
   data() {
     return {
-      cmOptions: {
-        // 语言及语法模式
-        mode: 'text/javascript',
-        // 主题
-        theme: "idea",
-        // 显示函数
-        line: true,
-        lineNumbers: false,
-        // 软换行
-        lineWrapping: true,
-        // tab宽度
-        tabSize: 4,
-      },
-      formulaStr:"",
-
       codeMirror: null,
       formula: "",
-      tags: [],
-      fieldTreeData: [],
+      tags: [], // 公式页签集合
+      fieldTreeData: [], // 设计器字段树
       filterText: "",
-      formulaDialogVisible: !1,
+      formulaDialogVisible: false,
       operate: [
         "+",
         "-",
@@ -325,9 +251,7 @@ export default {
           value: "large",
         },
         {
-          label: this.i18nt(
-            "designer.hint.formulaSizeMedium"
-          ),
+          label: this.i18nt("designer.hint.formulaSizeMedium"),
           value: "default",
         },
         {
@@ -339,19 +263,17 @@ export default {
           value: "small",
         },
       ],
-      introTitle: this.i18nt(
-        "designer.hint.formulaFunctionExplain"
-      ),
+      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>',
+          '<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],
@@ -360,332 +282,476 @@ export default {
   mounted() {
   },
   methods: {
-    clearFormula(o) {
-      (this.formula = ""),
-        (this.tags = []),
-        this.codeMirror.view.dispatch({
-          changes: {
-            from: 0,
-            to: this.codeMirror.view.state.doc.length,
-            insert: "",
-          },
-        });
+    clearFormula(event) {
+      this.formula = ""; //CodeMirror 模式
+      this.tags = []; //el-tag模式
+      this.codeMirror.dispatch({changes: {from: 0, to: this.codeMirror.state.doc.length, insert: ""}})
     },
-    deleteChar(o, e, n) {
-      let l = -1;
-      return o.replace(/a/g, (s) => (l++, l === n ? "" : s));
+
+    /** 删除字符串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(o, e) {
-      return o ? e.label.indexOf(o) !== -1 : !0;
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
     },
+
     loadFieldListToTree() {
-      this.fieldTreeData.length = 0;
-      const o = getAllFieldWidgets(this.designer.widgetList),
-        e = getAllContainerWidgets(this.designer.widgetList),
-        n = [];
-      let l = [];
-      const s = {};
-      e.forEach((c) => {
-        if (
-          c.type === "sub-form"
-          || c.type === "grid-sub-form"
-        ) {
-          n.push(c.container);
-          const u = [],
-            $ = (g) => {
-              !!g.formItemFlag
-              && g.type === "number"
-              && u.push(g);
-            };
-          traverseFieldWidgetsOfContainer(c.container, $),
-            (s[c.container.options.name] = u),
-            (l = l.concat(u));
+      this.fieldTreeData.length = 0 //先清空
+
+      const allFields = getAllFieldWidgets(this.designer.widgetList);
+      const allContainers = getAllContainerWidgets(this.designer.widgetList)
+
+      const subFormArray = []
+      let sfFieldArray = []
+      const subFormFieldMap = {}
+
+      //获取子表单容器内部的字段
+      allContainers.forEach(con => {
+        if ((con.type === 'sub-form') || (con.type === 'grid-sub-form')) {
+          subFormArray.push(con.container)
+
+          const tmpFieldArray = []
+          const fwHandler = (fw) => {
+            if (!!fw.formItemFlag && (fw.type === 'number')) {
+              tmpFieldArray.push(fw)
+            }
+          }
+          traverseFieldWidgetsOfContainer(con.container, fwHandler)
+          subFormFieldMap[con.container.options.name] = tmpFieldArray
+          sfFieldArray = sfFieldArray.concat(tmpFieldArray)
         }
-      }),
-        o.forEach((c) => {
-          if (!l.find((u) => u.id === c.field.id)) {
-            const u = {
-              id: c.field.id,
-              name: c.field.options.name,
-              label: c.field.options.label,
-              type: c.field.type,
-              formItemFlag: !0,
-            };
-            u.name !== this.optionModel.name
-            && u.type === "number"
-            && this.fieldTreeData.push(u);
+      })
+
+      //加载到树形组件数据对象
+      allFields.forEach(fld => {
+        if (!sfFieldArray.find(item => item.id === fld.field.id)) {  //排除子表单字段
+          const fieldNode = {
+            id: fld.field.id,
+            name: fld.field.options.name,
+            label: fld.field.options.label,
+            type: fld.field.type,
+            formItemFlag: true
           }
-        }),
-        n.forEach((c) => {
-          const u = {
-            id: c.id,
-            name: c.options.name,
-            label: c.options.label || c.options.name,
-            type: c.type,
-            formItemFlag: !1,
-            children: [],
-          };
-          s[c.options.name].forEach(($) => {
-            const g = {
-              id: $.id,
-              name: $.options.name,
-              label: $.options.label,
-              type: $.type,
-              formItemFlag: !0,
-            };
-            g.name !== this.optionModel.name
-            && u.children.push(g);
-          }),
-            this.fieldTreeData.push(u);
-        });
+
+          if ((fieldNode.name !== this.optionModel.name) && (fieldNode.type === 'number')) {  //排除当前设置公式字段
+            this.fieldTreeData.push(fieldNode)
+          }
+        }
+      })
+
+      subFormArray.forEach(sf => {
+        const subFormNode = {
+          id: sf.id,
+          name: sf.options.name,
+          label: sf.options.label || sf.options.name,
+          type: sf.type,
+          formItemFlag: false,
+          children: []
+        }
+
+        subFormFieldMap[sf.options.name].forEach(fld => {
+          const fieldNode = {
+            id: fld.id,
+            name: fld.options.name,
+            label: fld.options.label,
+            type: fld.type,
+            formItemFlag: true
+          }
+
+          if (fieldNode.name !== this.optionModel.name) {  //排除当前设置公式字段
+            subFormNode.children.push(fieldNode)
+          }
+        })
+
+        this.fieldTreeData.push(subFormNode)
+      })
     },
-    insertField(o, e, n) {
-      if (o.formItemFlag) {
-        let l = o.id,
-          s = "[" + o.label + "]";
-        this.updateCodeMirror(l, s, "field");
+
+    // 插入字段
+    insertField(obj, node, self) {
+      if (!!obj.formItemFlag) {
+        let fieldId = obj.id
+        let fieldLabel = '[' + obj.label + ']'
+        this.updateCodeMirror(fieldId, fieldLabel, "field");
       }
     },
-    insertSymbol(o) {
-      this.updateCodeMirror(o, o, null);
+
+    // 插入符号
+    insertSymbol(opt) {
+      this.updateCodeMirror(opt, opt, null);
     },
-    insertFunction(o) {
-      const e = o.substring(0, o.length - 1);
-      this.updateCodeMirror(e, e, "func");
+
+    // 插入函数
+    insertFunction(opt) {
+      const val = opt.substring(0, opt.length - 1);
+      this.updateCodeMirror(val, val, "func");
     },
-    updateCodeMirror(o, e, n = null) {
-      if (n) {
-        let l = {field: o, text: e, type: n},
-          s = l.field.length + l.text.length + l.type.length,
-          c = `{{${l.field}.${l.text}.${l.type}}}`;
-        n === "func" ? ((c += "()"), (s = s + 7)) : (s = s + 6),
-        c
-        && this.codeMirror.view.dispatch({
-          changes: {
-            from: this.codeMirror.view.state.selection.head,
-            to: this.codeMirror.view.state.selection
-              .head,
-            insert: c,
-          },
-          selection: {
-            anchor:
-              this.codeMirror.view.state.selection
-                .head + s,
-          },
-        });
-      } else
-        this.codeMirror.view.dispatch({
+
+    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.view.state.selection.head,
-            to: this.codeMirror.view.state.selection.head,
-            insert: e,
-          },
-          selection: {
-            anchor:
-              this.codeMirror.view.state.selection.head
-              + e.length,
+            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(o) {
-      let e = o.indexOf("[");
-      if (e === -1) return o;
-      let n = o.indexOf("]", e) + 1,
-        l = o.substring(e, n),
-        s = o.split(l),
-        c = "";
-      for (let u = 0; u < s.length; u++) c += s[u];
-      return this.removeStr(c);
+
+    // 在字符串中查找[开始]结尾的字符串，并删除
+    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);
     },
+
+    /**
+     * 字段label可能在公式保存后再次被修改，当编辑公式时需要再次刷新公式中的字段label（不刷新也不会影响公式计算结果）
+     */
     refreshFormula() {
-      const o = this.optionModel.formula.match(FORMULA_REG_EXP);
-      if (!o) return this.optionModel.formula;
-      o.forEach((e) => {
-        const n = e.split(".")[0],
-          l = e.split(".")[2];
-        if (l.substring(0, l.length - 2) === "func") return;
-        const c = n.substring(2, n.length),
-          u = getFieldWidgetById(
-            this.designer.widgetList,
-            c,
-            !1
-          ),
-          $ = u.options.label || u.options.name;
-        this.optionModel.formula
-          = this.optionModel.formula.replace(
-          e,
-          n + ".[" + $ + "]." + l
-        );
-      });
+      const matchResult = this.optionModel.formula.match(FORMULA_REG_EXP)
+      if (!matchResult) {
+        return this.optionModel.formula
+      }
+
+      matchResult.forEach(mi => {
+        const firstPart = mi.split('.')[0]
+        const secondPart = mi.split('.')[1]
+        const thirdPart = mi.split('.')[2]
+        const nodeType = thirdPart.substring(0, thirdPart.length - 2)
+        if (nodeType === 'func') {
+          return
+        }
+
+        const fieldId = firstPart.substring(2, firstPart.length)
+        const fieldSchema = getFieldWidgetById(this.designer.widgetList, fieldId, false)
+        if (!!fieldSchema) {
+          const newLabel = fieldSchema.options.label || fieldSchema.options.name
+          this.optionModel.formula = this.optionModel.formula.replace(mi,
+            firstPart + '.[' + newLabel + '].' + thirdPart)
+        } else {
+          this.$message.error(this.i18nt("designer.hint.deletedFieldInFormula") + secondPart)
+        }
+      })
     },
+
+    // 打开编辑公式弹窗
     editFormula() {
-      (this.fieldTreeData.length = 0),
-        this.designer.widgetList.forEach((e) => {
-          this.optionModel.name !== e.id
-          && this.loadFieldListToTree();
-        }),
-        console.log(
-          "设计器字段===>",
-          this.fieldTreeData
-        ),
-        (this.tags = deepClone(this.optionModel.formulaTags)),
-        this.refreshFormula();
-      const o = this.optionModel.formula || "";
-      (this.formulaDialogVisible = !0),
-        this.$nextTick(() => {
-
-          this.codeMirror = new Editor({
-            content: o,
-            extensions: [
-              StarterKit,
-            ],
-          })
-
-          /*(this.codeMirror = new EditorView({
-            state: EditorState.create({
-              doc: o,
-              /!*extensions: [
-                basicSetup,
-                javascript(),
-                [baseTheme, [], placeholders],
-              ],*!/
-            }),
-            parent: this.$refs.cmRef,
-          })),
-            console.log(
-              "编辑器实例==>",
-              this.codeMirror
-            );*/
+      this.fieldTreeData.length = 0
+      // 初始化字段树
+      this.designer.widgetList.forEach((wItem) => {
+        if (this.optionModel.name !== wItem.id) {
+          //this.buildTreeNodeOfWidget(wItem, this.fieldTreeData);
+          this.loadFieldListToTree()
+        }
+      })
+
+      console.log("设计器字段===>", this.fieldTreeData)
+
+      // 加载当前字段计算公式tags
+      this.tags = deepClone(this.optionModel.formulaTags)
+      // this.formula = deepClone(this.optionModel.formula);
+
+      //const code = this.optionModel.formulaShow;
+      this.refreshFormula()
+      const code = this.optionModel.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)
+      })
     },
+
+    // 保存计算公式
     saveFormula() {
-      (this.optionModel.formula
-        = this.codeMirror.view.state.doc.text.join("")),
-        (this.formulaDialogVisible = !1);
+      this.optionModel.formula = this.codeMirror.state.doc.text.join('')
+      this.formulaDialogVisible = false;
     },
-    analysisFormula(o) {
-      let e = o.indexOf("[");
-      if (e === -1) return o;
-      let n = o.indexOf("]", e) + 1,
-        l = o.substring(e, n),
-        s = this.findTreeNodeByCnName(l);
-      return s
-        ? ((o = o.replace(l, "{" + s + "}")),
-          this.analysisFormula(o))
-        : (this.$message.error(
-          l + " 字段无法识别"
-        ),
-          !1);
+
+    // 解析计算公式 STEP1：将公式中的字段转换为【英文表名.英文字段名】
+    analysisFormula(formula) {
+      let a = formula.indexOf("[");
+      if (a === -1) {
+        return formula;
+      }
+      let b = formula.indexOf("]", a) + 1;
+      let cnField = formula.substring(a, b);
+      let enFieldName = this.findTreeNodeByCnName(cnField);
+      if (!!enFieldName) {
+        formula = formula.replace(cnField, "{" + enFieldName + "}");
+        return this.analysisFormula(formula);
+      } else {
+        this.$message.error(cnField + " 字段无法识别");
+        return false;
+      }
     },
-    findTreeNodeByCnName(o) {
-      let e = "",
-        n = "",
-        l = o.split("[")[1].split("]")[0],
-        s = l.split("-")[0],
-        c = l.split("-")[1],
-        u = this.fieldTreeData;
-      for (let $ = 0; $ < u.length; $++) {
-        let g = u[$].children;
-        for (let y = 0; y < g.length; y++)
-          if (g[y].cnTitle === s) {
-            e = g[y].enTitle;
-            let f = g[y].children;
-            for (let v = 0; v < f.length; v++)
-              if (f[v].cnTitle === c)
-                return (n = f[v].enTitle), e + "-" + n;
+
+    // 根据树节点中文名查找树节点
+    findTreeNodeByCnName(nodeCnName) {
+      let enTableName = "",
+        enFieldName = "";
+      let tableFieldName = nodeCnName.split("[")[1].split("]")[0];
+      let tableName = tableFieldName.split("-")[0];
+      let fieldName = tableFieldName.split("-")[1];
+      let moduleList = this.fieldTreeData;
+      for (let i = 0; i < moduleList.length; i++) {
+        let tableList = moduleList[i].children;
+        for (let j = 0; j < tableList.length; j++) {
+          if (tableList[j].cnTitle === tableName) {
+            enTableName = tableList[j].enTitle;
+            let fieldList = tableList[j].children;
+            for (let k = 0; k < fieldList.length; k++) {
+              if (fieldList[k].cnTitle === fieldName) {
+                enFieldName = fieldList[k].enTitle;
+                return enTableName + "-" + enFieldName;
+              }
+            }
           }
+        }
       }
+      // 没找到节点返回NULL
       return null;
     },
-    getClass(o) {
-      if (o === this.i18nt("designer.hint.formulaNumber"))
+
+    getClass(type) {
+      if (type === this.i18nt("designer.hint.formulaNumber")) {
         return "warning";
-      if (o === this.i18nt("designer.hint.formulaChar"))
+      }
+      if (type === this.i18nt("designer.hint.formulaChar")) {
         return "";
-      if (o === this.i18nt("designer.hint.formulaObject"))
+      }
+      if (type === this.i18nt("designer.hint.formulaObject")) {
         return "danger";
+      }
     },
+
     resetIntro() {
-      (this.introTitle = this.i18nt(
+      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>',
-        });
+      );
+      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(o, e, n) {
-      (n = '<span class="cg">' + n + "</span>"),
-        (this.introduction = {title: e, content: n}),
-        (this.introTitle = o);
+
+    showIntro(name, title, content) {
+      content = '<span class="cg">' + content + "</span>";
+      this.introduction = {
+        title: title,
+        content: content,
+      };
+      this.introTitle = name;
     },
-    isValid(o) {
-      let e = [],
-        n = o.length,
-        l = 0,
-        s = 1,
-        c;
-      for (let u = 0; u < n && s; u++)
-        switch (o[u]) {
+
+    /**
+     * 校验计算公式是否正确
+     * @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 "(":
-            (e[l] = u), l++;
+            a[k] = i;
+            k++;
             break;
           case ")":
-            (c = e[l - 1]),
-              o[c] === "(" ? ((e[l] = 0), l--) : (s = 0);
+            j = a[k - 1];
+            if (s[j] === "(") {
+              a[k] = 0;
+              k--;
+            } else {
+              flag = 0;
+            }
             break;
           case "{":
-            (e[l] = u), l++;
+            a[k] = i;
+            k++;
             break;
           case "}":
-            (c = e[l - 1]),
-              o[c] === "{" ? ((e[l] = 0), l--) : (s = 0);
+            j = a[k - 1];
+            if (s[j] === "{") {
+              a[k] = 0;
+              k--;
+            } else {
+              flag = 0;
+            }
             break;
           case "[":
-            (e[l] = u), l++;
+            a[k] = i;
+            k++;
             break;
           case "]":
-            (c = e[l - 1]),
-              o[c] === "[" ? ((e[l] = 0), l--) : (s = 0);
+            j = a[k - 1];
+            if (s[j] === "[") {
+              a[k] = 0;
+              k--;
+            } else {
+              flag = 0;
+            }
             break;
         }
-      return l !== 0 && (s = 0), s !== 0;
+      }
+      if (k !== 0) {
+        flag = 0;
+      }
+      return flag !== 0;
     },
   },
-}
+};
 </script>
 
-<style scoped>
+<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: 400px;
+  height: 350px;
   border: 1px solid #ccc;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   margin-bottom: 5px;
   padding: 0;
-  width: 100%
+  width: 100%;
 }
 
 .group-item-right-top {
-  height: 400px;
+  height: 350px;
   border: 1px solid #ccc;
   border-radius: 0;
   margin-bottom: 5px;
-  width: 100%
+  width: 100%;
 }
 
 .group-item-right-bottom {
-  height: 400px;
+  height: 350px;
   border: 1px solid #ccc;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   margin-bottom: 5px;
-  width: 100%
+  width: 100%;
 }
 
 .item-header {
@@ -693,25 +759,111 @@ export default {
   height: 29px;
   line-height: 29px;
   padding-left: 15px;
-  font-weight: 700
+  font-weight: bold;
 }
 
 .item-body-left {
   height: 320px;
-  overflow-y: auto
+  overflow-y: auto;
 }
 
 .function-list {
-  height: 360px;
-  overflow-y: auto
-}
+  height: 320px;
+  overflow-y: auto;
 
-.function-list .el-collapse-item__header {
-  font-weight: 400 !important
+  :deep(.el-collapse-item__header) {
+    font-weight: normal !important;
+  }
 }
 
 .item-body-right-bottom {
   height: 152px;
-  overflow-y: auto
+  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>