cloud-web-corejs 1.0.54-dev.653 → 1.0.54-dev.654

package/package.json

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

package/src/components/xform/form-designer/form-widget/field-widget/date-range-widget.vue

@@ -25,11 +25,12 @@ import FormItemWrapper from './form-item-wrapper'
 import emitter from '../../../../../components/xform/utils/emitter'
 import i18n from "../../../../../components/xform/utils/i18n";
 import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
 
 export default {
   name: "date-range-widget",
   componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-  mixins: [emitter, fieldMixin, i18n],
+  mixins: [emitter, fieldMixin, i18n, utcTransformMixin],
   props: {
     field: Object,
     parentWidget: Object,
@@ -69,11 +70,11 @@ export default {
   },
   computed: {
     contentForReadMode() {
-      if (!this.fieldModel) {
-        return ''
-      } else {
-        return this.fieldModel[0] + ' - ' + this.fieldModel[1]
+      if (!this.fieldModel || !this.fieldModel.length) {
+        return '';
       }
+      const values = this.transformUtcToLocalValue(this.fieldModel);
+      return values[0] + ' - ' + values[1];
     },
   },
   beforeCreate() {

package/src/components/xform/form-designer/form-widget/field-widget/date-widget.vue

@@ -26,11 +26,12 @@ import emitter from '../../../../../components/xform/utils/emitter'
 import i18n from "../../../../../components/xform/utils/i18n";
 import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
 import dateLimitMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/date-limit-mixin";
+import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
 
 export default {
   name: "date-widget",
   componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-  mixins: [emitter, fieldMixin, i18n, dateLimitMixin],
+  mixins: [emitter, fieldMixin, i18n, dateLimitMixin, utcTransformMixin],
   props: {
     field: Object,
     parentWidget: Object,
@@ -71,7 +72,10 @@ export default {
   },
   computed: {
     contentForReadMode() {
-      return this.fieldModel ? this.fieldModel : ''
+      if (!this.fieldModel) {
+        return '';
+      }
+      return this.transformUtcToLocalValue(this.fieldModel);
     },
   },
   watch: {

package/src/components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin.js

@@ -0,0 +1,59 @@
+const DATE_FORMAT_TYPES = ["d1", "d2", "d3", "d4", "d5"];
+
+export default {
+  methods: {
+    isUtcTransformEnabled() {
+      return !!this.field?.options?.utcTransformEnabled;
+    },
+    transformUtcToLocalValue(value) {
+      if (value == null || value === "" || !this.isUtcTransformEnabled()) {
+        return value;
+      }
+      if (Array.isArray(value)) {
+        return value.map((item) => this.transformUtcToLocalSingle(item));
+      }
+      return this.transformUtcToLocalSingle(value);
+    },
+    transformUtcToLocalSingle(value) {
+      if (value == null || value === "") {
+        return value;
+      }
+      const localValue = this.$utcToLocal(value);
+      if (!localValue) {
+        return localValue;
+      }
+      const widgetType = this.field?.type;
+      const options = this.field?.options || {};
+      if (widgetType === "time") {
+        const parts = String(localValue).split(" ");
+        return parts.length > 1 ? parts[1] : localValue;
+      }
+      if (widgetType === "time-range") {
+        return localValue;
+      }
+      const dateType = options.type;
+      const valueFormat = options.valueFormat || "";
+      if (widgetType === "date" || widgetType === "date-range") {
+        if (
+          dateType === "datetime" ||
+          (valueFormat && /[HhmSs]/.test(valueFormat))
+        ) {
+          return localValue;
+        }
+        return String(localValue).split(" ")[0];
+      }
+      return localValue;
+    },
+    transformUtcForDateFormat(cellValue, formatType) {
+      if (
+        !cellValue ||
+        !this.field?.options?.utcTransformEnabled ||
+        !formatType ||
+        !DATE_FORMAT_TYPES.includes(formatType)
+      ) {
+        return cellValue;
+      }
+      return this.$utcToLocal(cellValue);
+    },
+  },
+};

package/src/components/xform/form-designer/form-widget/field-widget/text-widget.vue

@@ -20,12 +20,13 @@ import FormItemWrapper from "./form-item-wrapper";
 import emitter from "../../../../../components/xform/utils/emitter";
 import i18n from "../../../../../components/xform/utils/i18n";
 import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
 import * as formatUtil from "../../../../../components/xform/utils/format.js";
 
 export default {
   name: "text-widget",
   componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-  mixins: [emitter, fieldMixin, i18n],
+  mixins: [emitter, fieldMixin, i18n, utcTransformMixin],
   props: {
     field: Object,
     parentWidget: Object,
@@ -97,7 +98,10 @@ export default {
   methods: {
     formatterValue() {
       let formatType = this.field.options.formatType;
-      let cellValue = this.fieldModel;
+      let cellValue = this.transformUtcForDateFormat(
+        this.fieldModel,
+        formatType
+      );
       if (formatType === null || formatType === undefined) return cellValue;
       if (formatType)
         switch (formatType) {

package/src/components/xform/form-designer/form-widget/field-widget/time-range-widget.vue

@@ -20,11 +20,12 @@
   import emitter from '../../../../../components/xform/utils/emitter'
   import i18n from "../../../../../components/xform/utils/i18n";
   import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+  import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
 
   export default {
     name: "time-range-widget",
     componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-    mixins: [emitter, fieldMixin, i18n],
+    mixins: [emitter, fieldMixin, i18n, utcTransformMixin],
     props: {
       field: Object,
       parentWidget: Object,

package/src/components/xform/form-designer/form-widget/field-widget/time-widget.vue

@@ -19,11 +19,12 @@
   import emitter from '../../../../../components/xform/utils/emitter'
   import i18n from "../../../../../components/xform/utils/i18n";
   import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+  import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
 
   export default {
     name: "time-widget",
     componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-    mixins: [emitter, fieldMixin, i18n],
+    mixins: [emitter, fieldMixin, i18n, utcTransformMixin],
     props: {
       field: Object,
       parentWidget: Object,

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

@@ -312,7 +312,7 @@
       </span>
     </el-dialog>
     <tableColumnDialog
-      v-if="dialogVisible"
+      v-if="columnDialogMounted"
       :visiable.sync="dialogVisible"
       :designer="designer"
       :selectedWidget="selectedWidget"
@@ -370,6 +370,7 @@ export default {
       showTableConfigDialog: false,
       tableConfigCode: null,
       dialogVisible: !1,
+      columnDialogMounted: !1,
       dataDialogVisible: !1,
       showButtonsEditDialog: !1,
       oldButtonName: "",
@@ -594,8 +595,14 @@ export default {
       this.$set(this.optionModel, "tableConfig", "");
   },
   mounted: function () {
-    /*let dateFieldList = Object.keys(dateFieldComponents);
-    this.dateFieldList = dateFieldList;*/
+    const preloadColumnDialog = () => {
+      this.columnDialogMounted = true;
+    };
+    if (typeof requestIdleCallback === "function") {
+      requestIdleCallback(preloadColumnDialog, { timeout: 200 });
+    } else {
+      this.$nextTick(preloadColumnDialog);
+    }
   },
   methods: {
     dragSort: function () {
@@ -636,11 +643,10 @@ export default {
       }
     },
     openSetting: function () {
-      var e = this;
-      this.dialogVisible = !0; /*,
-        this.$nextTick(function () {
-          e.dragSort();
-        });*/
+      if (!this.columnDialogMounted) {
+        this.columnDialogMounted = true;
+      }
+      this.dialogVisible = true;
     },
     colSubmit: function () {
       this.dialogVisible = !1;

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

@@ -1,20 +1,27 @@
 <template>
   <el-dialog
-    custom-class="dialog-style list-dialog"
+    custom-class="dialog-style list-dialog table-column-config-dialog"
     :title="i18nt('designer.setting.tableColEdit')"
     :visible.sync="showDialog"
     :modal="false"
     :show-close="!0"
     :close-on-click-modal="!1"
     :close-on-press-escape="!1"
-    :destroy-on-close="!0"
+    :destroy-on-close="false"
     top="5vh"
     width="1220px"
     v-dialog-drag
     :before-close="closeHandle"
   >
-    <div class="cont">
+    <div
+      class="cont table-column-dialog-cont"
+      v-loading="!tableReady"
+      element-loading-background="rgba(0, 0, 0, 0)"
+      element-loading-text="数据正在加载中"
+      element-loading-spinner="el-icon-loading"
+    >
       <el-table
+        v-if="tableReady"
         ref="singleTable"
         width="100%"
         :data="tableData"
@@ -23,11 +30,7 @@
         row-key="columnId"
         stripe=""
         :tree-props="{ children: 'children' }"
-        default-expand-all
-        v-loading="pictLoading"
-        element-loading-background="rgba(0, 0, 0, 0)"
-        element-loading-text="数据正在加载中"
-        element-loading-spinner="el-icon-loading"
+        :default-expand-all="shouldExpandAllTable"
       >
         <el-table-column label="" width="80" fixed="left">
           <template #default="scope">
@@ -175,6 +178,14 @@
             <el-switch v-model="scope.row.filterable"></el-switch>
           </template>
         </el-table-column>
+        <el-table-column label="UTC时差" width="90" align="center">
+          <template #default="scope">
+            <el-switch
+              v-if="isUtcTransformColumn(scope.row)"
+              v-model="scope.row.utcTransformEnabled"
+            ></el-switch>
+          </template>
+        </el-table-column>
         <el-table-column
           label="编辑更多属性"
           width="100"
@@ -424,7 +435,7 @@
     </el-dialog>
 
     <el-dialog
-      custom-class="dialog-style list-dialog"
+      custom-class="dialog-style list-dialog table-column-row-edit-dialog"
       :title="i18nt('designer.setting.tableColEdit')"
       :visible.sync="showRowEditDialog"
       v-if="showRowEditDialog"
@@ -433,11 +444,13 @@
       :close-on-click-modal="!1"
       :close-on-press-escape="!1"
       :destroy-on-close="!0"
+      :append-to-body="true"
+      :modal-append-to-body="true"
       top="5vh"
-      width="409px"
+      width="480px"
       v-dialog-drag
     >
-      <div class="cont">
+      <div class="cont table-column-row-edit-cont">
         <el-form :model="rowData" class="form-m2" label-position="top">
           <el-form-item :label="i18nt('designer.setting.columnLabel')">
             <el-input
@@ -512,6 +525,12 @@
               @click="showRenderDialog(rowData)"
             ></el-button>
           </el-form-item>
+          <el-form-item
+            v-if="isUtcTransformColumn(rowData)"
+            label="UTC时差转换"
+          >
+            <el-switch v-model="rowData.utcTransformEnabled"></el-switch>
+          </el-form-item>
           <el-form-item :label="i18nt('designer.setting.visibleColumn')">
             <el-switch v-model="rowData.show"></el-switch>
           </el-form-item>
@@ -656,18 +675,20 @@ export default {
     designer: Object,
     selectedWidget: Object,
     optionModel: Object,
+    visiable: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: { columnRenderDialog, editTreeButtonGroupConfigDialog },
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
-      pictLoading: true,
+      tableReady: false,
       tableColumnConfigTitle: null,
       showTableColumnConfigDialog: false,
       tableColumnConfigHeader: null,
       tableColumnConfigCode: null,
-      showDialog: true,
-      dialogVisible: true,
       showEditTreeButtonGroupConfigDialog: false,
       currentEditTreeButtonGroupRow: null,
       editTreeButtonGroupRowData: null,
@@ -921,11 +942,84 @@ export default {
   beforeDestroy() {
     if (this.dragSort) this.dragSort.destroy();
   },
+  computed: {
+    showDialog: {
+      get() {
+        return this.visiable;
+      },
+      set(val) {
+        this.$emit("update:visiable", val);
+      },
+    },
+    shouldExpandAllTable() {
+      return this.countTreeRows(this.tableData) <= 30;
+    },
+  },
+  watch: {
+    visiable(val) {
+      if (val) {
+        this.onDialogOpen();
+      } else {
+        this.onDialogClose();
+      }
+    },
+  },
   created() {},
   mounted() {
-    this.init();
+    if (this.visiable) {
+      this.onDialogOpen();
+    }
   },
   methods: {
+    countTreeRows(rows) {
+      if (!Array.isArray(rows) || !rows.length) {
+        return 0;
+      }
+      let count = 0;
+      const walk = (list) => {
+        list.forEach((item) => {
+          count += 1;
+          if (item.children && item.children.length) {
+            walk(item.children);
+          }
+        });
+      };
+      walk(rows);
+      return count;
+    },
+    cloneTableColumnsForEdit(columns) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      const skipKeys = ["widget", "editWidget"];
+      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 (val !== null && typeof val === "object") {
+            try {
+              cloned[key] = deepClone(val);
+            } catch (e) {
+              cloned[key] = val;
+            }
+            return;
+          }
+          cloned[key] = val;
+        });
+        return cloned;
+      };
+      return columns.map(cloneRow);
+    },
     editFormEventHandler(row, index, eventName) {
       this.curEventRow = row;
       this.curEventName = eventName;
@@ -954,22 +1048,43 @@ export default {
       this.curEventRow[this.curEventName] = this.formEventHandlerCode;
       this.showFormEventDialogFlag = false;
     },
-    init() {
-      setTimeout(() => {
-        this.tableData = this.$baseLodash.cloneDeep(
-          this.optionModel.tableColumns
-        );
-        this.$nextTick(() => {
-          this.rowDrop();
-          setTimeout(() => {
-            this.pictLoading = false;
-          }, 200);
-        });
-      }, 10);
-
-      /*this.$nextTick(() => {
-        this.rowDrop();
-      });*/
+    onDialogClose() {
+      this.tableReady = false;
+      if (this.dragSort) {
+        this.dragSort.destroy();
+        this.dragSort = null;
+      }
+    },
+    onDialogOpen() {
+      this.tableReady = false;
+      if (this.dragSort) {
+        this.dragSort.destroy();
+        this.dragSort = null;
+      }
+      this.$nextTick(() => {
+        const load = () => {
+          this.loadTableData();
+          this.tableReady = true;
+          this.$nextTick(() => {
+            requestAnimationFrame(() => {
+              this.rowDrop();
+            });
+          });
+        };
+        if (typeof requestIdleCallback === "function") {
+          requestIdleCallback(load, { timeout: 80 });
+        } else {
+          setTimeout(load, 0);
+        }
+      });
+    },
+    loadTableData() {
+      const source = this.optionModel.tableColumns || [];
+      try {
+        this.tableData = this.cloneTableColumnsForEdit(source);
+      } catch (e) {
+        this.tableData = this.$baseLodash.cloneDeep(source);
+      }
     },
     colSubmit() {
       this.dialogVisible = !1;
@@ -1101,10 +1216,18 @@ export default {
         rowEditAuthName: this.createRowAuthName("Edit"),
         rowAddShow: null,
         rowEditShow: null,
+        utcTransformEnabled: false,
         // treeNode: false,
       };
       return row;
     },
+    isUtcTransformColumn(row) {
+      const formatS = row.formatS;
+      if (!formatS) {
+        return true;
+      }
+      return ["d1", "d2", "d3", "d4", "d5", "render"].includes(formatS);
+    },
     // 添加根节点
     onAddRoot() {
       this.tableData.push(this.generateRow());
@@ -1561,16 +1684,22 @@ export default {
         return;
       }
 
-      let selectedWidget = row.widget;
+      const { columnSelectedWidget, columnEditFields } =
+        this.getColumnWidgetConfig(row);
+      if (!columnSelectedWidget) {
+        this.$message.warning(this.$t1("请先选择列格式化类型"));
+        return;
+      }
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
       this.operateIndex = index;
-
-      let tableColumns = this.tableData;
       this.openWidgetPropertyDialog({
         row: row,
-        columnSelectedWidget: selectedWidget,
-        tableColumns,
+        columnSelectedWidget,
+        tableColumns: this.tableData,
         index: index,
-        // columnEditFields: columnEditFields,
+        columnEditFields,
         callback: (columnOption) => {
           this.confirmFormatConfigDialog(columnOption, row);
         },
@@ -1602,16 +1731,22 @@ export default {
       }
     },
     openEditFormatConfigDialog(row, index) {
-      let selectedWidget = row.editWidget;
+      const { columnSelectedWidget, columnEditFields } =
+        this.getColumnWidgetConfig(row, false, true);
+      if (!columnSelectedWidget) {
+        this.$message.warning(this.$t1("请先选择编辑列格式化类型"));
+        return;
+      }
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
       this.operateIndex = index;
-
-      let tableColumns = this.tableData;
       this.openWidgetPropertyDialog({
         row: row,
-        tableColumns,
-        columnSelectedWidget: selectedWidget,
+        tableColumns: this.tableData,
+        columnSelectedWidget,
         index: index,
-        // columnEditFields: columnEditFields,
+        columnEditFields,
         callback: (columnOption) => {
           this.confirmEditFormatConfigDialog(columnOption, row);
         },
@@ -1744,4 +1879,37 @@ export default {
 .icon-drag:before {
   content: "\e61d";
 }
+
+/* 固定弹框内容区高度，避免加载前后抖动 */
+::v-deep .table-column-config-dialog.el-dialog {
+  .el-dialog__body {
+    height: 532px;
+    max-height: 532px;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}
+
+.table-column-dialog-cont {
+  height: 516px;
+  min-height: 516px;
+  max-height: 516px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* 完整列配置弹框：挂到 body，内容区可滚动 */
+::v-deep .table-column-row-edit-dialog.el-dialog {
+  .el-dialog__body {
+    max-height: calc(90vh - 130px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+  }
+}
+
+.table-column-row-edit-cont {
+  padding-bottom: 8px;
+  box-sizing: border-box;
+}
 </style>

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

@@ -0,0 +1,19 @@
+<template>
+  <el-form-item label="UTC时差转换">
+    <el-switch v-model="optionModel.utcTransformEnabled"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../../components/xform/utils/i18n";
+
+export default {
+  name: "utcTransformEnabled-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
+</script>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -44,6 +44,7 @@ const COMMON_PROPERTIES = {
   format: "format-editor",
   valueFormat: "valueFormat-editor",
   dateLimit: "dateLimit-editor",
+  utcTransformEnabled: "utcTransformEnabled-editor",
   defaultTime: "defaultTime-editor",
   filterable: "filterable-editor",
   allowCreate: "allowCreate-editor",

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

@@ -1417,6 +1417,7 @@ export const basicFields = [
       clearable: !0,
       editable: !1,
       format: "HH:mm:ss",
+      utcTransformEnabled: !1,
       required: !1,
       requiredHint: "",
       validation: "",
@@ -1470,6 +1471,7 @@ export const basicFields = [
       clearable: !0,
       editable: !1,
       format: "HH:mm:ss",
+      utcTransformEnabled: !1,
       required: !1,
       requiredHint: "",
       validation: "",
@@ -1528,6 +1530,7 @@ export const basicFields = [
       limitEndField: null,
       minDate: null,
       maxDate: null,
+      utcTransformEnabled: !1,
       required: !1,
       requiredHint: "",
       validation: "",
@@ -1584,6 +1587,7 @@ export const basicFields = [
       format: "yyyy-MM-dd",
       valueFormat: "yyyy-MM-dd",
       defaultTime: ["00:00:00", "23:59:59"],
+      utcTransformEnabled: !1,
       required: !1,
       requiredHint: "",
       validation: "",
@@ -1944,6 +1948,7 @@ export const basicFields = [
       autoValueHanlde: null,
       formatType: null,
       renderHandle: null,
+      utcTransformEnabled: !1,
 
       showRuleFlag: 1,
       showRuleEnabled: 1,

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

@@ -521,42 +521,71 @@ modules = {
     selectWidget: function (e) {
       this.designer.setSelected(e);
     },
-    getFormatterValue(cellValue, formatS) {
+    getFormatterValue(cellValue, formatS, utcTransformEnabled) {
+      let value = cellValue;
+      if (utcTransformEnabled && value != null && value !== "") {
+        const dateFormats = ["d1", "d2", "d3", "d4", "d5", "render"];
+        if (!formatS || dateFormats.includes(formatS)) {
+          value = this.$utcToLocal(value);
+        }
+      }
+      if (!formatS) {
+        return value;
+      }
       switch (formatS) {
         case "d1":
-          return baseRefUtil.formatUtil.formatDate1(cellValue);
+          return baseRefUtil.formatUtil.formatDate1(value);
         case "d2":
-          return baseRefUtil.formatUtil.formatDate2(cellValue);
+          return baseRefUtil.formatUtil.formatDate2(value);
         case "d3":
-          return baseRefUtil.formatUtil.formatDate3(cellValue);
+          return baseRefUtil.formatUtil.formatDate3(value);
         case "d4":
-          return baseRefUtil.formatUtil.formatDate4(cellValue);
+          return baseRefUtil.formatUtil.formatDate4(value);
         case "d5":
-          return baseRefUtil.formatUtil.formatDate4(cellValue);
+          return baseRefUtil.formatUtil.formatDate4(value);
         case "n1":
-          return baseRefUtil.formatUtil.formatNumber1(cellValue);
+          return baseRefUtil.formatUtil.formatNumber1(value);
         case "n2":
-          return baseRefUtil.formatUtil.formatNumber2(cellValue);
+          return baseRefUtil.formatUtil.formatNumber2(value);
         case "n3":
-          return baseRefUtil.formatUtil.formatNumber3(cellValue);
+          return baseRefUtil.formatUtil.formatNumber3(value);
         case "n4":
-          return baseRefUtil.formatUtil.formatNumber4(cellValue);
+          return baseRefUtil.formatUtil.formatNumber4(value);
         case "n5":
-          return baseRefUtil.formatUtil.formatNumber5(cellValue);
+          return baseRefUtil.formatUtil.formatNumber5(value);
         case "n6":
-          return baseRefUtil.formatUtil.formatNumber6(cellValue);
+          return baseRefUtil.formatUtil.formatNumber6(value);
         case "n7":
-          return baseRefUtil.formatUtil.formatNumber7(cellValue);
+          return baseRefUtil.formatUtil.formatNumber7(value);
       }
-      return cellValue;
+      return value;
+    },
+    isColumnLevelUtcFormat(formatS) {
+      if (!formatS) {
+        return true;
+      }
+      return ["d1", "d2", "d3", "d4", "d5", "render"].includes(formatS);
+    },
+    getColumnUtcTransformEnabled(column) {
+      const formatS = column.params?.formatS;
+      if (!this.isColumnLevelUtcFormat(formatS)) {
+        return false;
+      }
+      return !!(
+        column.params.utcTransformEnabled ||
+        column.params.columnConfig?.utcTransformEnabled
+      );
     },
     formatterValue: function ({ cellValue, row, column }) {
       if (cellValue === null || cellValue === undefined) return cellValue;
+      if (!column.params) return cellValue;
 
-      if (column.params && column.params.formatS) {
-        return this.getFormatterValue(cellValue, column.params.formatS);
+      const formatS = column.params.formatS || null;
+      const utcTransformEnabled = this.getColumnUtcTransformEnabled(column);
+      if (!formatS && !utcTransformEnabled) {
+        return cellValue;
       }
-      return cellValue;
+      return this.getFormatterValue(cellValue, formatS, utcTransformEnabled);
     },
     getRowIndex: function (e) {
       return this.widget.options.tableData.lastIndexOf(e);
@@ -695,6 +724,10 @@ modules = {
             footerMethodConfg: t.footerMethodConfg,
             widgetList: t.widgetList,
             tableWidgetName,
+            utcTransformEnabled: this.isColumnLevelUtcFormat(t.formatS)
+              ? t.utcTransformEnabled
+              : false,
+            columnConfig: t,
           },
           visible: t.show,
           slots: {},
@@ -786,6 +819,11 @@ modules = {
           required: t.required || false,
           columnConfig: t,
           editWidget,
+          utcTransformEnabled: widget || editWidget
+            ? !!columnOption.utcTransformEnabled
+            : this.isColumnLevelUtcFormat(t.formatS)
+              ? !!t.utcTransformEnabled
+              : false,
         };
 
         Object.assign(col.params, params);
@@ -845,22 +883,32 @@ modules = {
                 }
                 return result;
               } else if ("date" === widgetType) {
+                let displayVal = value;
+                if (
+                  fieldWidget.options.utcTransformEnabled &&
+                  displayVal != null &&
+                  displayVal !== ""
+                ) {
+                  displayVal = this.$utcToLocal(displayVal);
+                }
                 let dateType = fieldWidget.options.type;
                 if (["date", "week"].includes(dateType)) {
-                  return value ? value.substring(0, 10) : null;
+                  return displayVal ? displayVal.substring(0, 10) : null;
                 } else if (dateType === "dates") {
-                  if (value) {
-                    if (Array.isArray(value)) {
-                      return value
-                        .map((item) => item.substring(0, 10))
+                  if (displayVal) {
+                    if (Array.isArray(displayVal)) {
+                      return displayVal
+                        .map((item) =>
+                          typeof item === "string" ? item.substring(0, 10) : item
+                        )
                         .join(",");
                     } else {
-                      return value;
+                      return displayVal;
                     }
                   }
                   return null;
                 } else {
-                  return value;
+                  return displayVal;
                 }
               }
             } else {
@@ -1336,7 +1384,11 @@ modules = {
               columnSlots = {
                 default: (params, h) => {
                   let cellValue = params.row[params.column.field];
-                  return this.getFormatterValue(cellValue, item.formatS);
+                  return this.getFormatterValue(
+                    cellValue,
+                    item.formatS,
+                    item.utcTransformEnabled
+                  );
                 },
               };
             }

package/src/components/xform/form-render/container-item/list-h5-item.vue

@@ -911,6 +911,12 @@ export default {
             formatS: t.formatS,
             required: t.required || false,
             columnConfig: t,
+            utcTransformEnabled: widget
+              ? !!columnOption.utcTransformEnabled
+              : !t.formatS ||
+                  ["d1", "d2", "d3", "d4", "d5", "render"].includes(t.formatS)
+                ? !!t.utcTransformEnabled
+                : false,
           },
           visible: t.show,
         };
@@ -1022,35 +1028,55 @@ export default {
     },
     formatterValue: function ({ cellValue, row, column }) {
       if (cellValue === null || cellValue === undefined) return cellValue;
+      if (!column.params) return cellValue;
 
-      if (column.params && column.params.formatS)
-        switch (column.params.formatS) {
-          case "d1":
-            return baseRefUtil.formatUtil.formatDate1(cellValue);
-          case "d2":
-            return baseRefUtil.formatUtil.formatDate2(cellValue);
-          case "d3":
-            return baseRefUtil.formatUtil.formatDate3(cellValue);
-          case "d4":
-            return baseRefUtil.formatUtil.formatDate4(cellValue);
-          case "d5":
-            return baseRefUtil.formatUtil.formatDate4(cellValue);
-          case "n1":
-            return baseRefUtil.formatUtil.formatNumber1(cellValue);
-          case "n2":
-            return baseRefUtil.formatUtil.formatNumber2(cellValue);
-          case "n3":
-            return baseRefUtil.formatUtil.formatNumber3(cellValue);
-          case "n4":
-            return baseRefUtil.formatUtil.formatNumber4(cellValue);
-          case "n5":
-            return baseRefUtil.formatUtil.formatNumber5(cellValue);
-          case "n6":
-            return baseRefUtil.formatUtil.formatNumber6(cellValue);
-          case "n7":
-            return baseRefUtil.formatUtil.formatNumber7(cellValue);
-        }
-      return cellValue;
+      let value = cellValue;
+      const formatS = column.params.formatS;
+      const dateFormats = ["d1", "d2", "d3", "d4", "d5", "render"];
+      const isColumnLevelUtc =
+        !formatS || dateFormats.includes(formatS);
+      const utcTransformEnabled = isColumnLevelUtc
+        ? !!(
+            column.params.utcTransformEnabled ||
+            column.params.columnConfig?.utcTransformEnabled
+          )
+        : false;
+
+      if (utcTransformEnabled && value != null && value !== "") {
+        value = this.$utcToLocal(value);
+      }
+
+      if (!formatS) {
+        return value;
+      }
+
+      switch (formatS) {
+        case "d1":
+          return baseRefUtil.formatUtil.formatDate1(value);
+        case "d2":
+          return baseRefUtil.formatUtil.formatDate2(value);
+        case "d3":
+          return baseRefUtil.formatUtil.formatDate3(value);
+        case "d4":
+          return baseRefUtil.formatUtil.formatDate4(value);
+        case "d5":
+          return baseRefUtil.formatUtil.formatDate4(value);
+        case "n1":
+          return baseRefUtil.formatUtil.formatNumber1(value);
+        case "n2":
+          return baseRefUtil.formatUtil.formatNumber2(value);
+        case "n3":
+          return baseRefUtil.formatUtil.formatNumber3(value);
+        case "n4":
+          return baseRefUtil.formatUtil.formatNumber4(value);
+        case "n5":
+          return baseRefUtil.formatUtil.formatNumber5(value);
+        case "n6":
+          return baseRefUtil.formatUtil.formatNumber6(value);
+        case "n7":
+          return baseRefUtil.formatUtil.formatNumber7(value);
+      }
+      return value;
     },
     searchEvent() {
       // this.getGridTable().commitProxy('reload');