cloud-web-corejs 1.0.54-dev.661 → 1.0.54-dev.662

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.661",
+  "version": "1.0.54-dev.662",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/xform/form-designer/form-widget/container-widget/data-table-widget.vue

@@ -190,6 +190,7 @@ import TableCellWidget from '../../../../../components/xform/form-designer/form-
 import FieldComponents from '../../../../../components/xform/form-designer/form-widget/field-widget/index';
 import Draggable from 'vuedraggable';
 import dataTableMixin from './data-table-mixin.js';
+import { enrichTableColumnsWithLabelIcon } from '../../../utils/tableColumnHelper';
 
 export default {
   name: 'data-table-widget',
@@ -200,6 +201,15 @@ export default {
     ...FieldComponents
   },
   mixins: [dataTableMixin],
+  computed: {
+    columns() {
+      const baseColumns = dataTableMixin.computed.columns.call(this);
+      return enrichTableColumnsWithLabelIcon(
+        baseColumns,
+        this.widget.options.tableColumns || []
+      );
+    },
+  },
   created() {
     if(this.widget.options.isNotQueryAllPage===undefined)this.widget.options.isNotQueryAllPage = false;
   }

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/table-column-dialog.vue

@@ -615,6 +615,27 @@
               <el-option value="#ea5353" label="红"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label-width="0">
+            <el-divider class="custom-divider">{{
+              i18nt("designer.setting.customLabelIcon")
+            }}</el-divider>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelIconClass')">
+            <icon-picker v-model="rowData.labelIconClass"></icon-picker>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelIconPosition')">
+            <el-select v-model="rowData.labelIconPosition" clearable>
+              <el-option label="front" value="front"></el-option>
+              <el-option label="rear" value="rear"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelTooltip')">
+            <el-input
+              type="text"
+              v-model="rowData.labelTooltip"
+              clearable
+            ></el-input>
+          </el-form-item>
         </el-form>
       </div>
       <div class="dialog-footer" slot="footer">
@@ -648,6 +669,7 @@ import {
 } from "../../../../../../components/xform/utils/util";
 import columnRenderDialog from "./columnRenderDialog.vue";
 import editTreeButtonGroupConfigDialog from "./edit-tree-button-group-config-dialog.vue";
+import IconPicker from "@base/components/xform/icon-picker/index.vue";
 
 let businessOptions = [
   {
@@ -680,7 +702,11 @@ export default {
       default: false,
     },
   },
-  components: { columnRenderDialog, editTreeButtonGroupConfigDialog },
+  components: {
+    columnRenderDialog,
+    editTreeButtonGroupConfigDialog,
+    IconPicker,
+  },
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
@@ -937,6 +963,7 @@ export default {
       rowData: null,
       rowDataIndex: 0,
       showRowEditDialog: false,
+      sourceTableColumnsSnapshot: null,
     };
   },
   beforeDestroy() {
@@ -991,21 +1018,38 @@ export default {
       if (!Array.isArray(columns)) {
         return [];
       }
-      const skipKeys = ["widget", "editWidget"];
+      const refKeys = ["widget", "editWidget", "widgetList"];
       const cloneRow = (row) => {
         if (!row || typeof row !== "object") {
           return row;
         }
         const cloned = {};
         Object.keys(row).forEach((key) => {
-          if (skipKeys.includes(key)) {
-            return;
-          }
           const val = row[key];
           if (key === "children" && Array.isArray(val) && val.length) {
             cloned.children = val.map(cloneRow);
             return;
           }
+          if (refKeys.includes(key)) {
+            cloned[key] = val;
+            return;
+          }
+          if (key === "columnOption") {
+            cloned.columnOption = row.widget
+              ? row.widget.options
+              : val !== null && typeof val === "object"
+                ? deepClone(val)
+                : val;
+            return;
+          }
+          if (key === "editColumnOption") {
+            cloned.editColumnOption = row.editWidget
+              ? row.editWidget.options
+              : val !== null && typeof val === "object"
+                ? deepClone(val)
+                : val;
+            return;
+          }
           if (val !== null && typeof val === "object") {
             try {
               cloned[key] = deepClone(val);
@@ -1016,10 +1060,79 @@ export default {
           }
           cloned[key] = val;
         });
+        if (row.widget && !cloned.widget) {
+          cloned.widget = row.widget;
+        }
+        if (row.editWidget && !cloned.editWidget) {
+          cloned.editWidget = row.editWidget;
+        }
+        if (row.widget) {
+          cloned.columnOption = row.widget.options;
+        }
+        if (row.editWidget) {
+          cloned.editColumnOption = row.editWidget.options;
+        }
         return cloned;
       };
       return columns.map(cloneRow);
     },
+    buildColumnWidgetMap(columns, map = {}) {
+      if (!Array.isArray(columns)) {
+        return map;
+      }
+      columns.forEach((col) => {
+        if (col && col.columnId) {
+          map[col.columnId] = col;
+        }
+        if (col.children && col.children.length) {
+          this.buildColumnWidgetMap(col.children, map);
+        }
+      });
+      return map;
+    },
+    restoreColumnWidgetRefs(columns, widgetMap) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      return columns.map((row) => {
+        const next = Object.assign({}, row);
+        const orig = widgetMap[next.columnId];
+        if (orig) {
+          if (!next.widget && orig.widget) {
+            next.widget = orig.widget;
+          }
+          if (!next.editWidget && orig.editWidget) {
+            next.editWidget = orig.editWidget;
+          }
+          if (
+            (!next.widgetList || !next.widgetList.length) &&
+            orig.widgetList &&
+            orig.widgetList.length
+          ) {
+            next.widgetList = orig.widgetList;
+          }
+        }
+        if (next.widget) {
+          next.columnOption = next.widget.options;
+        } else if (orig && orig.widget) {
+          next.widget = orig.widget;
+          next.columnOption = orig.widget.options;
+        }
+        if (next.editWidget) {
+          next.editColumnOption = next.editWidget.options;
+        } else if (orig && orig.editWidget) {
+          next.editWidget = orig.editWidget;
+          next.editColumnOption = orig.editWidget.options;
+        }
+        if (next.children && next.children.length) {
+          next.children = this.restoreColumnWidgetRefs(
+            next.children,
+            widgetMap
+          );
+        }
+        return next;
+      });
+    },
     editFormEventHandler(row, index, eventName) {
       this.curEventRow = row;
       this.curEventName = eventName;
@@ -1050,6 +1163,7 @@ export default {
     },
     onDialogClose() {
       this.tableReady = false;
+      this.sourceTableColumnsSnapshot = null;
       if (this.dragSort) {
         this.dragSort.destroy();
         this.dragSort = null;
@@ -1080,15 +1194,19 @@ export default {
     },
     loadTableData() {
       const source = this.optionModel.tableColumns || [];
-      try {
-        this.tableData = this.cloneTableColumnsForEdit(source);
-      } catch (e) {
-        this.tableData = this.$baseLodash.cloneDeep(source);
-      }
+      this.sourceTableColumnsSnapshot = source;
+      this.tableData = this.cloneTableColumnsForEdit(source);
     },
     colSubmit() {
       this.dialogVisible = !1;
-      this.optionModel.tableColumns = this.tableData;
+      const widgetMap = this.buildColumnWidgetMap(
+        this.sourceTableColumnsSnapshot || []
+      );
+      this.optionModel.tableColumns = this.restoreColumnWidgetRefs(
+        this.tableData,
+        widgetMap
+      );
+      this.sourceTableColumnsSnapshot = null;
       this.closeHandle();
     },
     openWidgetRenderDialog(row, sourceData) {
@@ -1217,6 +1335,9 @@ export default {
         rowAddShow: null,
         rowEditShow: null,
         utcTransformEnabled: false,
+        labelIconClass: null,
+        labelIconPosition: "front",
+        labelTooltip: null,
         // treeNode: false,
       };
       return row;
@@ -1515,27 +1636,32 @@ export default {
       let type = this.columnFormatMap[formatS];
 
       if (type) {
-        // columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
-        columnSelectedWidget = this.designer.copyNewFieldWidget(
-          this.designer.getFieldWidgetByType(type)
-        );
-        /*let tmpId = generateId();
-        let idVal = row.prop ? row.prop : (type + tmpId);*/
-        /*columnSelectedWidget.id = idVal;*/
-        // columnSelectedWidget.options.name = idVal;
-        /*if (isEdit) {
-          columnSelectedWidget.id = "edit_" + row.columnId;
+        const existingWidget = isEdit ? row.editWidget : row.widget;
+        if (!isChange && existingWidget) {
+          columnSelectedWidget = this.$baseLodash.cloneDeep(existingWidget);
         } else {
-          columnSelectedWidget.id = row.columnId;
-        }*/
-        // columnSelectedWidget.id = row.columnId;
+          columnSelectedWidget = this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type)
+          );
+        }
         let columnOption;
         if (!isEdit) {
           columnOption = row.columnOption;
         } else {
           columnOption = row.editColumnOption;
         }
-        if (!isChange && columnOption && Object.keys(columnOption).length) {
+        if (!isChange && existingWidget) {
+          columnOption = columnSelectedWidget.options;
+          columnOption.required = row.required || false;
+          if ("editDelete" == formatS) {
+            columnOption.hiddenByWf = columnOption.hiddenByWf ?? true;
+            columnOption.prefixIcon =
+              columnOption.prefixIcon || "el-icon-delete";
+          } else if ("editButton" == formatS) {
+            columnOption.prefixIcon =
+              columnOption.prefixIcon || "el-icon-edit";
+          }
+        } else if (!isChange && columnOption && Object.keys(columnOption).length) {
           columnOption.required = row.required || false;
           columnSelectedWidget.options = columnOption;
           if ("editDelete" == formatS) {
@@ -1664,7 +1790,15 @@ export default {
       }
       if (row.formatS == "widgetRender") {
         let formWidgetList = deepClone(this.designer.widgetList);
-        let tableData = deepClone(this.tableData);
+        const widgetMap = this.buildColumnWidgetMap(
+          this.sourceTableColumnsSnapshot
+            || this.optionModel.tableColumns
+            || []
+        );
+        let tableData = this.restoreColumnWidgetRefs(
+          this.cloneTableColumnsForEdit(this.tableData),
+          widgetMap
+        );
         let columnId = row.columnId;
 
         let dataTableName = this.optionModel.name;
@@ -1711,7 +1845,7 @@ export default {
         index: index,
         columnEditFields,
         callback: (columnOption) => {
-          this.confirmFormatConfigDialog(columnOption, row);
+          this.confirmFormatConfigDialog(columnOption, row, columnSelectedWidget);
         },
       });
     },
@@ -1719,16 +1853,26 @@ export default {
       let o = options.name;
       return (options.keyNameEnabled && options.keyName) || o;
     },
-    confirmFormatConfigDialog(columnOption, row) {
+    confirmFormatConfigDialog(columnOption, row, columnSelectedWidget) {
       // let row = this.tableData[this.operateIndex];
       row.columnOption = columnOption;
 
       if (row.widget) {
         row.widget.options = columnOption;
+        if (columnSelectedWidget && columnSelectedWidget.widgetList) {
+          row.widget.widgetList = this.$baseLodash.cloneDeep(
+            columnSelectedWidget.widgetList
+          );
+        }
       } else {
         let type = this.columnFormatMap[row.formatS];
         let fieldWidget = this.designer.createColumnWidget(row, false);
         fieldWidget.options = columnOption;
+        if (columnSelectedWidget && columnSelectedWidget.widgetList) {
+          fieldWidget.widgetList = this.$baseLodash.cloneDeep(
+            columnSelectedWidget.widgetList
+          );
+        }
         row.widget = fieldWidget;
         this.$forceUpdate();
       }
@@ -1758,21 +1902,35 @@ export default {
         index: index,
         columnEditFields,
         callback: (columnOption) => {
-          this.confirmEditFormatConfigDialog(columnOption, row);
+          this.confirmEditFormatConfigDialog(
+            columnOption,
+            row,
+            columnSelectedWidget
+          );
         },
       });
     },
-    confirmEditFormatConfigDialog(columnOption, row) {
+    confirmEditFormatConfigDialog(columnOption, row, columnSelectedWidget) {
       // let row = this.tableData[this.operateIndex];
       row.editColumnOption = columnOption;
       // row.editWidget.options = columnOption;
 
       if (row.editWidget) {
         row.editWidget.options = columnOption;
+        if (columnSelectedWidget && columnSelectedWidget.widgetList) {
+          row.editWidget.widgetList = this.$baseLodash.cloneDeep(
+            columnSelectedWidget.widgetList
+          );
+        }
       } else {
         let type = this.columnFormatMap[row.editFormatS];
         let fieldWidget = this.designer.createColumnWidget(row, true);
         fieldWidget.options = columnOption;
+        if (columnSelectedWidget && columnSelectedWidget.widgetList) {
+          fieldWidget.widgetList = this.$baseLodash.cloneDeep(
+            columnSelectedWidget.widgetList
+          );
+        }
         row.editWidget = fieldWidget;
         this.$forceUpdate();
       }
@@ -1870,13 +2028,23 @@ export default {
     },
     openRowEditDialog(row, index) {
       this.editRowData = row;
-      this.rowData = this.$baseLodash.cloneDeep(row);
+      this.rowData = this.cloneTableColumnsForEdit([row])[0];
       this.rowDataIndex = index;
       this.showRowEditDialog = true;
     },
     submitRowEditDialog() {
-      Object.assign(this.editRowData, this.$baseLodash.cloneDeep(this.rowData));
-      // this.editRowData = this.$baseLodash.cloneDeep(this.rowData);
+      Object.assign(this.editRowData, this.rowData);
+      if (this.rowData.widget) {
+        this.editRowData.widget = this.rowData.widget;
+        this.editRowData.columnOption = this.rowData.widget.options;
+      }
+      if (this.rowData.editWidget) {
+        this.editRowData.editWidget = this.rowData.editWidget;
+        this.editRowData.editColumnOption = this.rowData.editWidget.options;
+      }
+      if (this.rowData.widgetList && this.rowData.widgetList.length) {
+        this.editRowData.widgetList = this.rowData.widgetList;
+      }
       this.showRowEditDialog = false;
     },
     closeRowEditDialog() {

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

@@ -15,6 +15,7 @@ import {
   columnFormatMap,
   traverseAllWidgetsNew,
 } from "../../../../components/xform/utils/util";
+import { applyColumnLabelIcon } from "../../../../components/xform/utils/tableColumnHelper";
 import { tableTreeMixins } from "../../../../mixins/tableTree/index.js";
 
 let modules = {};
@@ -750,17 +751,7 @@ modules = {
           visible: t.show,
           slots: {},
         };
-        if (t.required) {
-          col.title = col.title;
-          /* if(!isEditTable){
-            col.titlePrefix = {
-              icon: "vxe-cell--required-icon"
-            }
-          } */
-          col.titlePrefix = {
-            icon: "vxe-cell--required-icon",
-          };
-        }
+        applyColumnLabelIcon(col, t);
         if (t.treeNode) {
           col.treeNode = true;
         }