cloud-web-corejs 1.0.0

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

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