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

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

@@ -2,18 +2,14 @@
   <div>
     <el-form-item
       :label="i18nt('designer.setting.formula')"
-      v-if="optionModel.formulaEnabled">
+      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-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>
+            <el-button @click="editFormula" icon="el-icon-edit"></el-button>
           </template>
         </el-input>
       </el-tooltip>
@@ -29,7 +25,8 @@
       :append-to-body="true"
       width="70%"
       top="0px"
-      ref="colFormulaDialog">
+      ref="colFormulaDialog"
+    >
       <div class="cont">
         <el-row>
           <el-col :span="24">
@@ -47,12 +44,13 @@
                       size="small"
                       @click="clearFormula"
                       type="danger"
-                      plain>
+                      plain
+                    >
                       {{ i18nt("designer.hint.formulaClear") }}
                     </el-button>
                   </el-col>
                 </el-row>
-                <div ref="cmRef" style="height:83px;width:100%"></div>
+                <div ref="cmRef" style="height: 83px; width: 100%"></div>
               </div>
               <!-- -->
               <div class="editor-bottom">
@@ -60,7 +58,8 @@
                   v-on:click="insertSymbol(item)"
                   size="default"
                   v-for="(item, idx) in operate"
-                  :key="idx">
+                  :key="idx"
+                >
                   {{ item }}
                 </el-button>
               </div>
@@ -77,22 +76,25 @@
               <el-input
                 :placeholder="i18nt('designer.hint.formulaSearch')"
                 v-model="filterText"
-                clearable></el-input>
+                clearable
+              ></el-input>
               <div class="item-body-left">
                 <el-tree
                   ref="fieldTree"
                   :data="fieldTreeData"
                   :filter-node-method="filterNode"
-                  @node-click="insertField">
+                  @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>
+                    <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>
@@ -103,11 +105,7 @@
               <el-col :span="24">
                 <div class="group-item-right-top">
                   <div class="item-header">
-                    {{
-                      i18nt(
-                        "designer.hint.formulaFunctionList"
-                      )
-                    }}
+                    {{ i18nt("designer.hint.formulaFunctionList") }}
                   </div>
                   <div class="function-list">
                     <el-collapse v-model="funcActiveCollapseNames">
@@ -115,20 +113,26 @@
                         v-for="(item, index) in funcList"
                         :key="index"
                         :title="i18nt(item.fClass)"
-                        :name="index">
+                        :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">
+                          @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)"
+                          <el-tag :type="getClass(info.fType)"
                           >{{ i18nt(info.fType) }}
-                          </el-tag
-                          >
+                          </el-tag>
                         </div>
                       </el-collapse-item>
                     </el-collapse>
@@ -144,13 +148,15 @@
                 <ul>
                   <li
                     v-if="introduction.title !== ''"
-                    style="font-size: 16px; color: #0a5d7c">
+                    style="font-size: 16px; color: #0a5d7c"
+                  >
                     {{ introduction.title }}
                   </li>
                   <li>
                     <div
                       class="intro-content"
-                      v-html="introduction.content"></div>
+                      v-html="introduction.content"
+                    ></div>
                   </li>
                 </ul>
               </div>
@@ -159,7 +165,11 @@
         </el-row>
       </div>
       <div class="dialog-footer" slot="footer">
-        <el-button @click="formulaDialogVisible = false" class="button-sty" icon="el-icon-close">
+        <el-button
+          @click="formulaDialogVisible = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
           {{ i18nt("designer.hint.cancel") }}
         </el-button>
         <el-button
@@ -176,8 +186,8 @@
 </template>
 
 <script>
-import {basicSetup, EditorView} from "codemirror"
-import {javascript} from "@codemirror/lang-javascript"
+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 {
@@ -185,9 +195,15 @@ import {
   getAllContainerWidgets,
   getAllFieldWidgets,
   getFieldWidgetById,
-  traverseFieldWidgetsOfContainer
+  traverseFieldWidgetsOfContainer,
+  loopHandleWidget
 } from "@base/components/xform/utils/util";
-import {placeholders, baseTheme, formulas, FORMULA_REG_EXP} from "@base/components/xform/utils/formula-util";
+import {
+  placeholders,
+  baseTheme,
+  formulas,
+  FORMULA_REG_EXP,
+} from "@base/components/xform/utils/formula-util";
 
 export default {
   name: "formula-editor",
@@ -197,21 +213,22 @@ export default {
     designer: Object,
     selectedWidget: Object,
     optionModel: Object,
+    tableColumns: Array
   },
   computed: {
     formulaForView() {
-      const matchResult = this.optionModel.formula.match(FORMULA_REG_EXP)
+      const matchResult = this.optionModel.formula.match(FORMULA_REG_EXP);
       if (!matchResult) {
-        return this.optionModel.formula
+        return this.optionModel.formula;
       }
 
-      let resultFormula = this.optionModel.formula
-      matchResult.forEach(mi => {
-        const secondPart = mi.split('.')[1]
-        resultFormula = resultFormula.replaceAll(mi, secondPart)
-      })
+      let resultFormula = this.optionModel.formula;
+      matchResult.forEach((mi) => {
+        const secondPart = mi.split(".")[1];
+        resultFormula = resultFormula.replaceAll(mi, secondPart);
+      });
 
-      return resultFormula
+      return resultFormula;
     },
   },
   watch: {
@@ -285,7 +302,9 @@ export default {
     clearFormula(event) {
       this.formula = ""; //CodeMirror 模式
       this.tags = []; //el-tag模式
-      this.codeMirror.dispatch({changes: {from: 0, to: this.codeMirror.state.doc.length, insert: ""}})
+      this.codeMirror.dispatch({
+        changes: {from: 0, to: this.codeMirror.state.doc.length, insert: ""},
+      });
     },
 
     /** 删除字符串str中的第n个subStr
@@ -306,83 +325,134 @@ export default {
       return data.label.indexOf(value) !== -1;
     },
 
+    traverseFieldWidgetsOfTableDataWidget(widget, callback) {
+      if (widget.type == "data-table") {
+        debugger
+        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);
+    },
     loadFieldListToTree() {
-      this.fieldTreeData.length = 0 //先清空
+      this.fieldTreeData.length = 0; //先清空
 
       const allFields = getAllFieldWidgets(this.designer.widgetList);
-      const allContainers = getAllContainerWidgets(this.designer.widgetList)
+      const allContainers = getAllContainerWidgets(this.designer.widgetList);
 
-      const subFormArray = []
-      let sfFieldArray = []
-      const subFormFieldMap = {}
+      const subFormArray = [];
+      let sfFieldArray = [];
+      const subFormFieldMap = {};
 
       //获取子表单容器内部的字段
-      allContainers.forEach(con => {
-        if ((con.type === 'sub-form') || (con.type === 'grid-sub-form')) {
-          subFormArray.push(con.container)
+      allContainers.forEach((con) => {
+        if (con.type === "sub-form" || con.type === "grid-sub-form") {
+          subFormArray.push(con.container);
 
-          const tmpFieldArray = []
+          const tmpFieldArray = [];
           const fwHandler = (fw) => {
-            if (!!fw.formItemFlag && (fw.type === 'number')) {
-              tmpFieldArray.push(fw)
+            if (!!fw.formItemFlag && fw.type === "number") {
+              tmpFieldArray.push(fw);
             }
-          }
-          traverseFieldWidgetsOfContainer(con.container, fwHandler)
-          subFormFieldMap[con.container.options.name] = tmpFieldArray
-          sfFieldArray = sfFieldArray.concat(tmpFieldArray)
+          };
+          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);
+          subFormFieldMap[con.container.options.name] = tmpFieldArray;
+          sfFieldArray = sfFieldArray.concat(tmpFieldArray);
         }
-      })
+      });
 
       //加载到树形组件数据对象
-      allFields.forEach(fld => {
-        if (!sfFieldArray.find(item => item.id === fld.field.id)) {  //排除子表单字段
+      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)
+            formItemFlag: true,
+          };
+
+          if (
+            fieldNode.name !== this.optionModel.name &&
+            fieldNode.type === "number"
+          ) {
+            //排除当前设置公式字段
+            this.fieldTreeData.push(fieldNode);
           }
         }
-      })
+      });
 
-      subFormArray.forEach(sf => {
+      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: []
-        }
+          children: [],
+        };
 
-        subFormFieldMap[sf.options.name].forEach(fld => {
+        subFormFieldMap[sf.options.name].forEach((fld) => {
           const fieldNode = {
             id: fld.id,
             name: fld.options.name,
             label: fld.options.label,
             type: fld.type,
-            formItemFlag: true
-          }
+            formItemFlag: true,
+          };
 
-          if (fieldNode.name !== this.optionModel.name) {  //排除当前设置公式字段
-            subFormNode.children.push(fieldNode)
+          if (fieldNode.name !== this.optionModel.name) {
+            //排除当前设置公式字段
+            subFormNode.children.push(fieldNode);
           }
-        })
+        });
 
-        this.fieldTreeData.push(subFormNode)
-      })
+        this.fieldTreeData.push(subFormNode);
+      });
     },
 
     // 插入字段
     insertField(obj, node, self) {
       if (!!obj.formItemFlag) {
-        let fieldId = obj.id
-        let fieldLabel = '[' + obj.label + ']'
+        let fieldId = obj.id + "";
+        let fieldLabel = "[" + obj.label + "]";
         this.updateCodeMirror(fieldId, fieldLabel, "field");
       }
     },
@@ -403,13 +473,13 @@ export default {
         let obj = {
           field: field,
           text: text,
-          type: type
-        }
-        let selectionLet = obj.field.length + obj.text.length + obj.type.length;//光标位置；
+          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
+          selectionLet = selectionLet + 7;
         } else {
           selectionLet = selectionLet + 6;
         }
@@ -419,19 +489,24 @@ export default {
             changes: {
               from: this.codeMirror.state.selection.main.head,
               to: this.codeMirror.state.selection.main.head,
-              insert: code
+              insert: code,
+            },
+            selection: {
+              anchor: this.codeMirror.state.selection.main.head + selectionLet,
             },
-            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
+            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,
           },
-          selection: {anchor: this.codeMirror.state.selection.main.head + text.length}
         });
-
       }
     },
 
@@ -455,71 +530,83 @@ export default {
      * 字段label可能在公式保存后再次被修改，当编辑公式时需要再次刷新公式中的字段label（不刷新也不会影响公式计算结果）
      */
     refreshFormula() {
-      const matchResult = this.optionModel.formula.match(FORMULA_REG_EXP)
+      const matchResult = this.optionModel.formula.match(FORMULA_REG_EXP);
       if (!matchResult) {
-        return this.optionModel.formula
+        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
+      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)
+        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)
+          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)
+          this.$message.error(
+            this.i18nt("designer.hint.deletedFieldInFormula") + secondPart
+          );
         }
-      })
+      });
     },
 
     // 打开编辑公式弹窗
     editFormula() {
-      this.fieldTreeData.length = 0
+      this.fieldTreeData.length = 0;
       // 初始化字段树
       this.designer.widgetList.forEach((wItem) => {
         if (this.optionModel.name !== wItem.id) {
           //this.buildTreeNodeOfWidget(wItem, this.fieldTreeData);
-          this.loadFieldListToTree()
+          this.loadFieldListToTree();
         }
-      })
+      });
 
-      console.log("设计器字段===>", this.fieldTreeData)
+      console.log("设计器字段===>", this.fieldTreeData);
 
       // 加载当前字段计算公式tags
-      this.tags = deepClone(this.optionModel.formulaTags)
+      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
+      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]],
+            extensions: [
+              basicSetup,
+              javascript(),
+              [baseTheme, [], placeholders],
+            ],
           }),
-          parent: this.$refs.cmRef
+          parent: this.$refs.cmRef,
         });
-        console.log("编辑器实例==>", this.codeMirror)
-      })
+        console.log("编辑器实例==>", this.codeMirror);
+      });
     },
 
     // 保存计算公式
     saveFormula() {
-      this.optionModel.formula = this.codeMirror.state.doc.text.join('')
+      this.optionModel.formula = this.codeMirror.state.doc.text.join("");
       this.formulaDialogVisible = false;
     },
 
@@ -581,9 +668,7 @@ export default {
     },
 
     resetIntro() {
-      this.introTitle = this.i18nt(
-        "designer.hint.formulaFunctionExplain"
-      );
+      this.introTitle = this.i18nt("designer.hint.formulaFunctionExplain");
       this.introduction = {
         title: this.i18nt("designer.hint.formulaPleaseSelect"),
         content:

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

@@ -1,7 +1,12 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.multiple')">
-    <el-switch v-model="optionModel.multiple" @change="onMultipleSelected"></el-switch>
-  </el-form-item>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.multiple')">
+      <el-switch v-model="optionModel.multiple" @change="onMultipleSelected"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('平铺选项')">
+      <el-switch v-model="optionModel.flatCollapseTags"></el-switch>
+    </el-form-item>
+  </div>
 </template>
 
 <script>

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -1339,6 +1339,8 @@ export const basicFields = [
       commonAttributeEnabled: false,
       commonAttributeCode: "",
 
+      showCollapseTags:false,
+
       showRuleFlag: 1,
       showRuleEnabled: 1,
       showRules: [],

package/src/components/xform/form-render/container-item/data-table-item.vue

@@ -207,14 +207,15 @@
     <template #widget="obj">
       <component
         :is="getColumnWidgetName(obj.column.params.widget)"
-        :field="getRowWidget(obj)"
+        :field="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.widget.id]"
         :form-model="globalModel.formModel"
         :designer="null"
-        :key="getRowWidgetKey(obj)"
+        :key="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.widget.id].id"
         :parent-widget="widget"
         :columnConfig="obj.column.params.columnConfig"
         :subFormRowIndex="obj.rowIndex"
         :formItemProp="getColumnProp(widget,obj)"
+        :subFormRowId="obj.row._X_ROW_KEY"
         :tableParam="obj"
       >
         <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
@@ -234,6 +235,7 @@
           :parent-widget="widget"
           :columnConfig="obj.column.params.columnConfig"
           :subFormRowIndex="obj.rowIndex"
+          :subFormRowId="obj.row._X_ROW_KEY"
           formItemProp="false"
           :tableParam="obj"
         >
@@ -246,13 +248,14 @@
     <template #editWidget="obj">
       <component
         :is="getColumnWidgetName(obj.column.params.editWidget)"
-        :field="getRowWidget(obj,obj.column.params.editWidget)"
+        :field="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.editWidget.id]"
         :form-model="globalModel.formModel"
         :designer="null"
-        :key="getRowWidgetKey(obj,obj.column.params.editWidget)"
+        :key="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.editWidget.id].id"
         :parent-widget="widget"
         :columnConfig="obj.column.params.columnConfig"
         :subFormRowIndex="obj.rowIndex"
+        :subFormRowId="obj.row._X_ROW_KEY"
         :formItemProp="getColumnProp(widget, obj,true)"
         :tableParam="obj"
       >