cloud-web-corejs 1.0.54-dev.8 → 1.0.54-dev.800

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

@@ -1,717 +1,972 @@
-<template>
-  <div>
-    <el-form-item v-if="optionModel.formulaEnabled" :label="i18nt('designer.setting.formula')">
-      <el-tooltip effect="light" :content="formulaForView" placement="top">
-        <el-input v-model="formulaForView" readonly>
-          <template slot="append">
-            <el-button icon="el-icon-edit" @click="editFormula"></el-button>
-          </template>
-        </el-input>
-      </el-tooltip>
-    </el-form-item>
-    <el-dialog
-      :visible.sync="formulaDialogVisible"
-      :title="i18nt('designer.hint.formulaSetting')"
-      :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
-    >
-      <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;"> {{ optionModel.label }} =</div>
-                  </el-col>
-                  <el-col :span="2">
-                    <el-button size="small" @click="clearFormula" type="danger"
-                               plain=""> 清除
-                    </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>
-              <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>-->
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <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-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>
-                </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>
-          <el-col :span="6">
-            <el-row>
-              <el-col :span="24">
-                <div class="group-item-right-top">
-                  <div class="item-header"> 函数列表</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>
-                    </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>
-            </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: rgb(10, 93, 124);"> {{
-                      introduction.title
-                    }}
-                  </li>
-                  <li>
-                    <div class="intro-content" v-html="introduction.content"></div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </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>
-    </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 {
-  deepClone,
-  getAllFieldWidgets,
-  getAllContainerWidgets,
-  traverseFieldWidgetsOfContainer, getFieldWidgetById
-} from "../../../../../components/xform/utils/util";
-
-
-export default {
-  name: "formula-editor",
-  mixins: [i18n],
-  components: {/*EditorContent*/},
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  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
-      );
-    },
-  },
-  watch: {
-    filterText(o) {
-      this.$refs.fieldTree.filter(o);
-    },
-  },
-  data() {
-    return {
-      cmOptions: {
-        // 语言及语法模式
-        mode: 'text/javascript',
-        // 主题
-        theme: "idea",
-        // 显示函数
-        line: true,
-        lineNumbers: false,
-        // 软换行
-        lineWrapping: true,
-        // tab宽度
-        tabSize: 4,
-      },
-      formulaStr:"",
-
-      codeMirror: null,
-      formula: "",
-      tags: [],
-      fieldTreeData: [],
-      filterText: "",
-      formulaDialogVisible: !1,
-      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],
-    };
-  },
-  mounted() {
-  },
-  methods: {
-    clearFormula(o) {
-      (this.formula = ""),
-        (this.tags = []),
-        this.codeMirror.view.dispatch({
-          changes: {
-            from: 0,
-            to: this.codeMirror.view.state.doc.length,
-            insert: "",
-          },
-        });
-    },
-    deleteChar(o, e, n) {
-      let l = -1;
-      return o.replace(/a/g, (s) => (l++, l === n ? "" : s));
-    },
-    filterNode(o, e) {
-      return o ? e.label.indexOf(o) !== -1 : !0;
-    },
-    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));
-        }
-      }),
-        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);
-          }
-        }),
-        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);
-        });
-    },
-    insertField(o, e, n) {
-      if (o.formItemFlag) {
-        let l = o.id,
-          s = "[" + o.label + "]";
-        this.updateCodeMirror(l, s, "field");
-      }
-    },
-    insertSymbol(o) {
-      this.updateCodeMirror(o, o, null);
-    },
-    insertFunction(o) {
-      const e = o.substring(0, o.length - 1);
-      this.updateCodeMirror(e, e, "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({
-          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,
-          },
-        });
-    },
-    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);
-    },
-    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
-        );
-      });
-    },
-    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
-            );*/
-        });
-    },
-    saveFormula() {
-      (this.optionModel.formula
-        = this.codeMirror.view.state.doc.text.join("")),
-        (this.formulaDialogVisible = !1);
-    },
-    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);
-    },
-    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;
-          }
-      }
-      return null;
-    },
-    getClass(o) {
-      if (o === this.i18nt("designer.hint.formulaNumber"))
-        return "warning";
-      if (o === this.i18nt("designer.hint.formulaChar"))
-        return "";
-      if (o === 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(o, e, n) {
-      (n = '<span class="cg">' + n + "</span>"),
-        (this.introduction = {title: e, content: n}),
-        (this.introTitle = o);
-    },
-    isValid(o) {
-      let e = [],
-        n = o.length,
-        l = 0,
-        s = 1,
-        c;
-      for (let u = 0; u < n && s; u++)
-        switch (o[u]) {
-          case "(":
-            (e[l] = u), l++;
-            break;
-          case ")":
-            (c = e[l - 1]),
-              o[c] === "(" ? ((e[l] = 0), l--) : (s = 0);
-            break;
-          case "{":
-            (e[l] = u), l++;
-            break;
-          case "}":
-            (c = e[l - 1]),
-              o[c] === "{" ? ((e[l] = 0), l--) : (s = 0);
-            break;
-          case "[":
-            (e[l] = u), l++;
-            break;
-          case "]":
-            (c = e[l - 1]),
-              o[c] === "[" ? ((e[l] = 0), l--) : (s = 0);
-            break;
-        }
-      return l !== 0 && (s = 0), s !== 0;
-    },
-  },
-}
-</script>
-
-<style scoped>
-.group-item-left {
-  height: 400px;
-  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: 400px;
-  border: 1px solid #ccc;
-  border-radius: 0;
-  margin-bottom: 5px;
-  width: 100%
-}
-
-.group-item-right-bottom {
-  height: 400px;
-  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: 700
-}
-
-.item-body-left {
-  height: 320px;
-  overflow-y: auto
-}
-
-.function-list {
-  height: 360px;
-  overflow-y: auto
-}
-
-.function-list .el-collapse-item__header {
-  font-weight: 400 !important
-}
-
-.item-body-right-bottom {
-  height: 152px;
-  overflow-y: auto
-}
-</style>
+<template>
+  <div>
+    <el-form-item
+      :label="i18nt('designer.setting.formula')"
+      v-if="optionModel.formulaEnabled"
+    >
+    </el-form-item>
+    <el-form-item class="form-item-label-top" label-width="0" v-if="optionModel.formulaEnabled">
+      <el-tooltip :content="formulaForView" effect="light" placement="top">
+        <el-input v-model="formulaForView" readonly>
+          <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"
+      width="70%"
+      top="0px"
+      ref="colFormulaDialog"
+    >
+      <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">
+                      {{ this.optionModel.label }} =
+                    </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">
+                      <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>
+                </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>
+  </div>
+</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: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    tableColumns: Array
+  },
+  inject:["columnFlag","sourceData"],
+  computed: {
+    formulaForView() {
+      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(val) {
+      this.$refs.fieldTree.filter(val);
+    },
+  },
+  data() {
+    return {
+      codeMirror: null,
+      formula: "",
+      tags: [], // 公式页签集合
+      fieldTreeData: [], // 设计器字段树
+      filterText: "",
+      formulaDialogVisible: false,
+      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],
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    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;
+    },
+
+    traverseFieldWidgetsOfTableDataWidget(widget, callback) {
+      if (widget.type == "data-table") {
+        let loopDo = (t) => {
+          if (t.children && t.children.length) {
+            t.children.forEach((item) => {
+              loopDo(item);
+            });
+          } else {
+            if (t.widget) {
+              if (t.formatS == "editNumber") {
+                t.widget.options.label = t.label;
+                this.handleTableConfigData(t.widget, callback);
+              }
+            }
+          }
+        };
+
+        let tableColumns = this.tableColumns;
+        let columns = tableColumns ? tableColumns : widget.options.tableColumns
+        columns.forEach((item) => {
+          loopDo(item);
+          loopHandleWidget(item.widgetList, (item1) => {
+            if (item1.type == "number") {
+              this.handleTableConfigData(item1, callback);
+            }
+          });
+        });
+      }
+    },
+    handleTableConfigData(widget, callback) {
+      callback(widget);
+    },
+    getTargetWidgetList(){
+      let widgetList = this.designer.widgetList;
+      if(this.columnFlag){
+        let sourceData = this.sourceData;
+        let formWidgetList = sourceData.getWidgetList(widgetList)
+        widgetList = formWidgetList;
+      }
+      return widgetList;
+    },
+    loadFieldListToTree() {
+      this.fieldTreeData.length = 0; //先清空
+
+      let widgetList = this.getTargetWidgetList();
+
+      const allFields = getAllFieldWidgets(widgetList);
+      const allContainers = getAllContainerWidgets(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);
+        } else if (con.type === "data-table") {
+          subFormArray.push(con.container);
+
+          const tmpFieldArray = [];
+          const fwHandler = (fw) => {
+            if (!!fw.formItemFlag && fw.type === "number") {
+              tmpFieldArray.push(fw);
+            }
+          };
+
+          // this.traverseFieldWidgetsOfTableDataWidget(con.container, fwHandler);
+          traverseFieldWidgetsOfContainer(con.container, fwHandler);
+          subFormFieldMap[con.container.options.name] = tmpFieldArray;
+          sfFieldArray = sfFieldArray.concat(tmpFieldArray);
+        }
+      });
+
+      //加载到树形组件数据对象
+      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,
+          };
+
+          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(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);
+    },
+
+    /**
+     * 字段label可能在公式保存后再次被修改，当编辑公式时需要再次刷新公式中的字段label（不刷新也不会影响公式计算结果）
+     */
+    refreshFormula() {
+      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,
+          this.getTargetWidgetList(),
+          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;
+      // 初始化字段树
+      if(this.columnFlag){
+        this.loadFieldListToTree();
+      }else{
+        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.state.doc.text.join("");
+      this.formulaDialogVisible = false;
+    },
+
+    // 解析计算公式 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(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(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>