@tmagic/form 1.5.0-beta.4 → 1.5.0-beta.6

package/dist/tmagic-form.js

@@ -1,9 +1,11 @@
 import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import Sortable from 'sortablejs';
-import { sleep, asyncLoadJs, datetimeFormatter, getValueByKeyPath, isNumber } from '@tmagic/utils';
+import { sleep, asyncLoadJs, getValueByKeyPath, isNumber } from '@tmagic/utils';
 
 const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
 const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -164,8 +166,26 @@ const initValue = async (mForm, { initValues, config }) => {
   }
   return valuesTmp || {};
 };
+const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss") => {
+  if (v) {
+    let time;
+    if (["x", "timestamp"].includes(format)) {
+      time = dayjs(v).valueOf();
+    } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+      dayjs.extend(utc);
+      time = dayjs(v).utcOffset(8).format(format);
+    } else {
+      time = dayjs(v).format(format);
+    }
+    if (time !== "Invalid Date") {
+      return time;
+    }
+    return defaultValue;
+  }
+  return defaultValue;
+};
 
-const _hoisted_1$d = ["id", "data-magic-id"];
+const _hoisted_1$d = ["data-tmagic-id"];
 const _hoisted_2$8 = ["innerHTML", "title"];
 const _hoisted_3$5 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
@@ -319,8 +339,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const _component_Container = resolveComponent("Container", true);
       return _ctx.config ? (openBlock(), createElementBlock("div", {
         key: 0,
-        id: _ctx.config.id,
-        "data-magic-id": _ctx.config.id,
+        "data-tmagic-id": _ctx.config.id,
         style: normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
         class: normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
       }, [
@@ -1567,6 +1586,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
       timer = setTimeout(() => {
         swapArray(index, index - 1);
+        timer = void 0;
       }, 300);
     };
     const topHandler = (index) => {
@@ -1585,6 +1605,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
       timer = setTimeout(() => {
         swapArray(index, index + 1);
+        timer = void 0;
       }, 300);
     };
     const bottomHandler = (index) => {
@@ -1973,8 +1994,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   },
   emits: ["change", "addDiffCount"],
   setup(__props, { emit: __emit }) {
-    const tabPaneComponent = getConfig$1("components")?.tabPane;
-    const tabsComponent = getConfig$1("components")?.tabs;
+    const tabPaneComponent = getDesignConfig("components")?.tabPane;
+    const tabsComponent = getDesignConfig("components")?.tabs;
     const getActive = (mForm2, props2, activeTabName2) => {
       const { config, model, prop } = props2;
       const { active } = config;
@@ -2457,7 +2478,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     useAddField(props.prop);
-    props.model[props.name] = datetimeFormatter(props.model[props.name], "");
+    props.model[props.name] = datetimeFormatter(props.model[props.name], "", "YYYY/MM/DD");
     const changeHandler = (v) => {
       emit("change", v);
     };
@@ -2469,8 +2490,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         size: _ctx.size,
         placeholder: _ctx.config.placeholder,
         disabled: _ctx.disabled,
-        format: _ctx.config.format,
-        "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+        format: _ctx.config.format || "YYYY/MM/DD",
+        "value-format": _ctx.config.valueFormat || "YYYY/MM/DD",
         onChange: changeHandler
       }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
     };
@@ -2534,7 +2555,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           return;
         }
         if (Array.isArray(v)) {
-          props.model[item] = datetimeFormatter(v[index]?.toString(), "");
+          props.model[item] = datetimeFormatter(
+            v[index]?.toString(),
+            "",
+            props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+          );
         } else {
           props.model[item] = void 0;
         }
@@ -2546,7 +2571,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         emit(
           "change",
           value2.map((item) => {
-            if (item) return datetimeFormatter(item, "");
+            if (item) return datetimeFormatter(item, "", props.config.valueFormat || "YYYY/MM/DD HH:mm:ss");
             return void 0;
           })
         );
@@ -2569,8 +2594,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         "unlink-panels": true,
         disabled: _ctx.disabled,
         "default-time": _ctx.config.defaultTime,
+        "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+        "date-format": _ctx.config.dateFormat || "YYYY/MM/DD",
+        "time-format": _ctx.config.timeFormat || "HH:mm:ss",
         onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+      }, null, 8, ["modelValue", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
     };
   }
 });
@@ -2601,7 +2629,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       if (value === "Invalid Date") {
         props.model[props.name] = "";
       } else {
-        props.model[props.name] = datetimeFormatter(props.model[props.name], "", props.config.valueFormat);
+        props.model[props.name] = datetimeFormatter(
+          props.model[props.name],
+          "",
+          props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+        );
       }
     }
     const changeHandler = (v) => {
@@ -3416,8 +3448,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const optionComponent = getConfig$1("components")?.option;
-    const optionGroupComponent = getConfig$1("components")?.optionGroup;
+    const optionComponent = getDesignConfig("components")?.option;
+    const optionGroupComponent = getDesignConfig("components")?.optionGroup;
     if (!props.model) throw new Error("不能没有model");
     useAddField(props.prop);
     const tMagicSelect = ref();
@@ -4168,7 +4200,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           return;
         }
         if (Array.isArray(v)) {
-          props.model[item] = datetimeFormatter(v[index]?.toString(), "");
+          props.model[item] = v[index];
         } else {
           props.model[item] = void 0;
         }
@@ -4527,4 +4559,4 @@ const index = {
   }
 };
 
-export { _sfc_main$n as MCascader, _sfc_main$m as MCheckbox, _sfc_main$l as MCheckboxGroup, _sfc_main$k as MColorPicker, _sfc_main$x as MContainer, _sfc_main$j as MDate, _sfc_main$h as MDateTime, _sfc_main$i as MDaterange, _sfc_main$g as MDisplay, _sfc_main$f as MDynamicField, _sfc_main$w as MFieldset, _sfc_main$d as MForm, _sfc_main as MFormBox, _sfc_main$c as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$u as MGroupList, _sfc_main$e as MHidden, _sfc_main$b as MLink, _sfc_main$a as MNumber, _sfc_main$9 as MNumberRange, _sfc_main$t as MPanel, _sfc_main$8 as MRadioGroup, _sfc_main$r as MRow, _sfc_main$7 as MSelect, _sfc_main$6 as MSwitch, _sfc_main$p as MTable, _sfc_main$o as MTabs, _sfc_main$5 as MText, _sfc_main$4 as MTextarea, _sfc_main$3 as MTime, _sfc_main$2 as MTimerange, createForm, createValues, index as default, display, filterFunction, getRules, initValue, useAddField };
+export { _sfc_main$n as MCascader, _sfc_main$m as MCheckbox, _sfc_main$l as MCheckboxGroup, _sfc_main$k as MColorPicker, _sfc_main$x as MContainer, _sfc_main$j as MDate, _sfc_main$h as MDateTime, _sfc_main$i as MDaterange, _sfc_main$g as MDisplay, _sfc_main$f as MDynamicField, _sfc_main$w as MFieldset, _sfc_main$d as MForm, _sfc_main as MFormBox, _sfc_main$c as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$u as MGroupList, _sfc_main$e as MHidden, _sfc_main$b as MLink, _sfc_main$a as MNumber, _sfc_main$9 as MNumberRange, _sfc_main$t as MPanel, _sfc_main$8 as MRadioGroup, _sfc_main$r as MRow, _sfc_main$7 as MSelect, _sfc_main$6 as MSwitch, _sfc_main$p as MTable, _sfc_main$o as MTabs, _sfc_main$5 as MText, _sfc_main$4 as MTextarea, _sfc_main$3 as MTime, _sfc_main$2 as MTimerange, createForm, createValues, datetimeFormatter, index as default, display, filterFunction, getRules, initValue, useAddField };

package/dist/tmagic-form.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('sortablejs'), require('@tmagic/utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'sortablejs', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.Sortable, global.utils));
-})(this, (function (exports, vue, iconsVue, lodashEs, design, Sortable, utils) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('dayjs'), require('dayjs/plugin/utc'), require('sortablejs'), require('@tmagic/utils')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'dayjs', 'dayjs/plugin/utc', 'sortablejs', '@tmagic/utils'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.dayjs, global.utc, global.Sortable, global.utils));
+})(this, (function (exports, vue, iconsVue, lodashEs, design, dayjs, utc, Sortable, utils) { 'use strict';
 
   const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -163,8 +163,26 @@
     }
     return valuesTmp || {};
   };
+  const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss") => {
+    if (v) {
+      let time;
+      if (["x", "timestamp"].includes(format)) {
+        time = dayjs(v).valueOf();
+      } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+        dayjs.extend(utc);
+        time = dayjs(v).utcOffset(8).format(format);
+      } else {
+        time = dayjs(v).format(format);
+      }
+      if (time !== "Invalid Date") {
+        return time;
+      }
+      return defaultValue;
+    }
+    return defaultValue;
+  };
 
-  const _hoisted_1$d = ["id", "data-magic-id"];
+  const _hoisted_1$d = ["data-tmagic-id"];
   const _hoisted_2$8 = ["innerHTML", "title"];
   const _hoisted_3$5 = ["innerHTML"];
   const _hoisted_4$4 = ["innerHTML"];
@@ -318,8 +336,7 @@
         const _component_Container = vue.resolveComponent("Container", true);
         return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          id: _ctx.config.id,
-          "data-magic-id": _ctx.config.id,
+          "data-tmagic-id": _ctx.config.id,
           style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
           class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
         }, [
@@ -1566,6 +1583,7 @@
         }
         timer = setTimeout(() => {
           swapArray(index, index - 1);
+          timer = void 0;
         }, 300);
       };
       const topHandler = (index) => {
@@ -1584,6 +1602,7 @@
         }
         timer = setTimeout(() => {
           swapArray(index, index + 1);
+          timer = void 0;
         }, 300);
       };
       const bottomHandler = (index) => {
@@ -1972,8 +1991,8 @@
     },
     emits: ["change", "addDiffCount"],
     setup(__props, { emit: __emit }) {
-      const tabPaneComponent = design.getConfig("components")?.tabPane;
-      const tabsComponent = design.getConfig("components")?.tabs;
+      const tabPaneComponent = design.getDesignConfig("components")?.tabPane;
+      const tabsComponent = design.getDesignConfig("components")?.tabs;
       const getActive = (mForm2, props2, activeTabName2) => {
         const { config, model, prop } = props2;
         const { active } = config;
@@ -2456,7 +2475,7 @@
       const props = __props;
       const emit = __emit;
       useAddField(props.prop);
-      props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "");
+      props.model[props.name] = datetimeFormatter(props.model[props.name], "", "YYYY/MM/DD");
       const changeHandler = (v) => {
         emit("change", v);
       };
@@ -2468,8 +2487,8 @@
           size: _ctx.size,
           placeholder: _ctx.config.placeholder,
           disabled: _ctx.disabled,
-          format: _ctx.config.format,
-          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+          format: _ctx.config.format || "YYYY/MM/DD",
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD",
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
       };
@@ -2533,7 +2552,11 @@
             return;
           }
           if (Array.isArray(v)) {
-            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+            props.model[item] = datetimeFormatter(
+              v[index]?.toString(),
+              "",
+              props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+            );
           } else {
             props.model[item] = void 0;
           }
@@ -2545,7 +2568,7 @@
           emit(
             "change",
             value2.map((item) => {
-              if (item) return utils.datetimeFormatter(item, "");
+              if (item) return datetimeFormatter(item, "", props.config.valueFormat || "YYYY/MM/DD HH:mm:ss");
               return void 0;
             })
           );
@@ -2568,8 +2591,11 @@
           "unlink-panels": true,
           disabled: _ctx.disabled,
           "default-time": _ctx.config.defaultTime,
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+          "date-format": _ctx.config.dateFormat || "YYYY/MM/DD",
+          "time-format": _ctx.config.timeFormat || "HH:mm:ss",
           onChange: changeHandler
-        }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+        }, null, 8, ["modelValue", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
       };
     }
   });
@@ -2600,7 +2626,11 @@
         if (value === "Invalid Date") {
           props.model[props.name] = "";
         } else {
-          props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "", props.config.valueFormat);
+          props.model[props.name] = datetimeFormatter(
+            props.model[props.name],
+            "",
+            props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+          );
         }
       }
       const changeHandler = (v) => {
@@ -3415,8 +3445,8 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const optionComponent = design.getConfig("components")?.option;
-      const optionGroupComponent = design.getConfig("components")?.optionGroup;
+      const optionComponent = design.getDesignConfig("components")?.option;
+      const optionGroupComponent = design.getDesignConfig("components")?.optionGroup;
       if (!props.model) throw new Error("不能没有model");
       useAddField(props.prop);
       const tMagicSelect = vue.ref();
@@ -4167,7 +4197,7 @@
             return;
           }
           if (Array.isArray(v)) {
-            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+            props.model[item] = v[index];
           } else {
             props.model[item] = void 0;
           }
@@ -4559,6 +4589,7 @@
   exports.MTimerange = _sfc_main$2;
   exports.createForm = createForm;
   exports.createValues = createValues;
+  exports.datetimeFormatter = datetimeFormatter;
   exports.default = index;
   exports.display = display;
   exports.filterFunction = filterFunction;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.4",
+  "version": "1.5.0-beta.6",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "dayjs": "^1.11.11",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
   },
@@ -53,8 +54,8 @@
   "peerDependencies": {
     "vue": "^3.4.35",
     "typescript": "*",
-    "@tmagic/design": "1.5.0-beta.4",
-    "@tmagic/utils": "1.5.0-beta.4"
+    "@tmagic/design": "1.5.0-beta.6",
+    "@tmagic/utils": "1.5.0-beta.6"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     v-if="config"
-    :id="config.id"
-    :data-magic-id="config.id"
+    :data-tmagic-id="config.id"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >

package/src/containers/Table.vue

@@ -206,7 +206,7 @@ import {
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
-import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
+import { FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
@@ -484,7 +484,7 @@ const toggleRowSelection = (row: any, selected: boolean) => {
   tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
 };
 
-const makeConfig = (config: ColumnConfig, row: any) => {
+const makeConfig = (config: TableColumnConfig, row: any) => {
   const newConfig = cloneDeep(config);
   if (typeof config.itemsFunction === 'function') {
     newConfig.items = config.itemsFunction(row);
@@ -500,6 +500,7 @@ const upHandler = (index: number) => {
 
   timer = setTimeout(() => {
     swapArray(index, index - 1);
+    timer = undefined;
   }, 300);
 };
 
@@ -525,6 +526,7 @@ const downHandler = (index: number) => {
 
   timer = setTimeout(() => {
     swapArray(index, index + 1);
+    timer = undefined;
   }, 300);
 };
 

package/src/containers/Tabs.vue

@@ -73,7 +73,7 @@
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
-import { getConfig, TMagicBadge } from '@tmagic/design';
+import { getDesignConfig, TMagicBadge } from '@tmagic/design';
 
 import { FormState, TabConfig, TabPaneConfig } from '../schema';
 import { display as displayFunc, filterFunction } from '../utils/form';
@@ -88,8 +88,8 @@ type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
+const tabPaneComponent = getDesignConfig('components')?.tabPane;
+const tabsComponent = getDesignConfig('components')?.tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;

package/src/fields/Date.vue

@@ -5,17 +5,17 @@
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    :format="config.format"
-    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    :format="config.format || 'YYYY/MM/DD'"
+    :value-format="config.valueFormat || 'YYYY/MM/DD'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
 
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DateConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-props.model[props.name] = datetimeFormatter(props.model[props.name], '');
+props.model[props.name] = datetimeFormatter(props.model[props.name], '', 'YYYY/MM/DD');
 
 const changeHandler = (v: string) => {
   emit('change', v);

package/src/fields/DateTime.vue

@@ -15,9 +15,9 @@
 
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DateTimeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -37,7 +37,11 @@ if (props.model) {
   if (value === 'Invalid Date') {
     props.model[props.name] = '';
   } else {
-    props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
+    props.model[props.name] = datetimeFormatter(
+      props.model[props.name],
+      '',
+      props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
+    );
   }
 }
 

package/src/fields/Daterange.vue

@@ -9,6 +9,9 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    :date-format="config.dateFormat || 'YYYY/MM/DD'"
+    :time-format="config.timeFormat || 'HH:mm:ss'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
@@ -17,9 +20,9 @@
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -71,7 +74,11 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+      props.model[item] = datetimeFormatter(
+        v[index]?.toString(),
+        '',
+        props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
+      );
     } else {
       props.model[item] = undefined;
     }
@@ -85,7 +92,7 @@ const changeHandler = (v: Date[]) => {
     emit(
       'change',
       value.map((item?: Date) => {
-        if (item) return datetimeFormatter(item, '');
+        if (item) return datetimeFormatter(item, '', props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss');
         return undefined;
       }),
     );

package/src/fields/Select.vue

@@ -80,7 +80,7 @@
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue';
 
-import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
 import type { FieldProps, FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';

package/src/fields/Timerange.vue

@@ -17,7 +17,6 @@
 import { ref, watch } from 'vue';
 
 import { TMagicTimePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
@@ -59,7 +58,7 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+      props.model[item] = v[index];
     } else {
       props.model[item] = undefined;
     }

package/src/index.ts

@@ -91,14 +91,14 @@ export { default as MDynamicField } from './fields/DynamicField.vue';
 
 export const createForm = <T extends [] = []>(config: FormConfig | T) => config;
 
-export interface InstallOptions {
+export interface FormInstallOptions {
   [key: string]: any;
 }
 
-const defaultInstallOpt: InstallOptions = {};
+const defaultInstallOpt: FormInstallOptions = {};
 
 export default {
-  install(app: App, opt: InstallOptions = {}) {
+  install(app: App, opt: FormInstallOptions = {}) {
     const option = Object.assign(defaultInstallOpt, opt);
 
     // eslint-disable-next-line no-param-reassign

package/src/schema.ts

@@ -296,6 +296,9 @@ export interface DaterangeConfig extends FormItem {
   type: 'daterange';
   defaultTime?: Date[];
   names?: string[];
+  valueFormat?: string;
+  dateFormat?: string;
+  timeFormat?: string;
 }
 
 /**
@@ -632,7 +635,7 @@ export interface PanelConfig extends FormItem, ContainerCommonConfig {
   schematic?: string;
 }
 
-export interface ColumnConfig extends FormItem {
+export interface TableColumnConfig extends FormItem {
   name?: string;
   label: string;
   width?: string | number;
@@ -645,9 +648,9 @@ export interface ColumnConfig extends FormItem {
  */
 export interface TableConfig extends FormItem {
   type: 'table' | 'groupList' | 'group-list';
-  items: ColumnConfig[];
-  tableItems?: ColumnConfig[];
-  groupItems?: ColumnConfig[];
+  items: TableColumnConfig[];
+  tableItems?: TableColumnConfig[];
+  groupItems?: TableColumnConfig[];
   enableToggleMode?: boolean;
   /** 最大行数 */
   max?: number;

package/src/utils/form.ts

@@ -18,6 +18,8 @@
 
 /* eslint-disable no-param-reassign */
 import { toRaw } from 'vue';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
 
 import {
@@ -271,3 +273,28 @@ export const initValue = async (
 
   return valuesTmp || {};
 };
+
+export const datetimeFormatter = (
+  v: string | Date,
+  defaultValue = '-',
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string | number => {
+  if (v) {
+    let time: string | number;
+    if (['x', 'timestamp'].includes(format)) {
+      time = dayjs(v).valueOf();
+    } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
+      dayjs.extend(utc);
+      // UTC字符串时间或Date对象格式化为北京时间
+      time = dayjs(v).utcOffset(8).format(format);
+    } else {
+      time = dayjs(v).format(format);
+    }
+
+    if (time !== 'Invalid Date') {
+      return time;
+    }
+    return defaultValue;
+  }
+  return defaultValue;
+};

package/types/index.d.ts

@@ -232,6 +232,9 @@ interface DaterangeConfig extends FormItem {
     type: 'daterange';
     defaultTime?: Date[];
     names?: string[];
+    valueFormat?: string;
+    dateFormat?: string;
+    timeFormat?: string;
 }
 /**
  * html编辑器
@@ -520,7 +523,7 @@ interface PanelConfig extends FormItem, ContainerCommonConfig {
     title?: string;
     schematic?: string;
 }
-interface ColumnConfig extends FormItem {
+interface TableColumnConfig extends FormItem {
     name?: string;
     label: string;
     width?: string | number;
@@ -532,9 +535,9 @@ interface ColumnConfig extends FormItem {
  */
 interface TableConfig extends FormItem {
     type: 'table' | 'groupList' | 'group-list';
-    items: ColumnConfig[];
-    tableItems?: ColumnConfig[];
-    groupItems?: ColumnConfig[];
+    items: TableColumnConfig[];
+    tableItems?: TableColumnConfig[];
+    groupItems?: TableColumnConfig[];
     enableToggleMode?: boolean;
     /** 最大行数 */
     max?: number;
@@ -614,6 +617,7 @@ declare const initValue: (mForm: FormState | undefined, { initValues, config }:
     initValues: FormValue;
     config: FormConfig;
 }) => Promise<FormValue>;
+declare const datetimeFormatter: (v: string | Date, defaultValue?: string, format?: string) => string | number;
 
 declare const useAddField: (prop?: string) => void;
 
@@ -3229,11 +3233,11 @@ type __VLS_TypePropsToOption<T> = {
 };
 
 declare const createForm: <T extends [] = []>(config: FormConfig | T) => FormConfig | T;
-interface InstallOptions {
+interface FormInstallOptions {
     [key: string]: any;
 }
 declare const _default: {
-    install(app: App, opt?: InstallOptions): void;
+    install(app: App, opt?: FormInstallOptions): void;
 };
 
-export { type CascaderConfig, type CascaderOption, type CheckboxConfig, type CheckboxGroupConfig, type CheckboxGroupOption, type ChildConfig, type ColorPickConfig, type ColumnConfig, type ComponentConfig, type ContainerCommonConfig, type DateConfig, type DateTimeConfig, type DaterangeConfig, type DisplayConfig, type DynamicFieldConfig, type FieldProps, type FieldsetConfig, type FilterFunction, type FormConfig, type FormItem, type FormState, type FormValue, type GroupListConfig, type HiddenConfig, type HtmlField, type Input, type InstallOptions, type LinkConfig, _default$2 as MCascader, _default$c as MCheckbox, _default$7 as MCheckboxGroup, _default$8 as MColorPicker, _default$r as MContainer, _default$f as MDate, _default$e as MDateTime, _default$a as MDaterange, _default$5 as MDisplay, _default$1 as MDynamicField, _default$q as MFieldset, _default$v as MForm, _default$s as MFormBox, _default$u as MFormDialog, _default$t as MFormDrawer, _default$l as MGroupList, _default$g as MHidden, _default$4 as MLink, _default$j as MNumber, _default$i as MNumberRange, _default$p as MPanel, _default$6 as MRadioGroup, _default$o as MRow, _default$3 as MSelect, _default$b as MSwitch, _default$m as MTable, _default$n as MTabs, _default$k as MText, _default$h as MTextarea, _default$d as MTime, _default$9 as MTimerange, type NumberConfig, type NumberRangeConfig, type PanelConfig, type RadioGroupConfig, type RowConfig, type Rule, type SelectConfig, type SelectConfigGroupOption, type SelectConfigOption, type SelectGroupOption, type SelectOption, type SortProp, type StepConfig, type SwitchConfig, type TabConfig, type TabPaneConfig, type TableConfig, type TextConfig, type TextareaConfig, type TimeConfig, type TypeFunction, type ValidateError, createForm, createValues, _default as default, display, filterFunction, getRules, initValue, useAddField };
+export { type CascaderConfig, type CascaderOption, type CheckboxConfig, type CheckboxGroupConfig, type CheckboxGroupOption, type ChildConfig, type ColorPickConfig, type ComponentConfig, type ContainerCommonConfig, type DateConfig, type DateTimeConfig, type DaterangeConfig, type DisplayConfig, type DynamicFieldConfig, type FieldProps, type FieldsetConfig, type FilterFunction, type FormConfig, type FormInstallOptions, type FormItem, type FormState, type FormValue, type GroupListConfig, type HiddenConfig, type HtmlField, type Input, type LinkConfig, _default$2 as MCascader, _default$c as MCheckbox, _default$7 as MCheckboxGroup, _default$8 as MColorPicker, _default$r as MContainer, _default$f as MDate, _default$e as MDateTime, _default$a as MDaterange, _default$5 as MDisplay, _default$1 as MDynamicField, _default$q as MFieldset, _default$v as MForm, _default$s as MFormBox, _default$u as MFormDialog, _default$t as MFormDrawer, _default$l as MGroupList, _default$g as MHidden, _default$4 as MLink, _default$j as MNumber, _default$i as MNumberRange, _default$p as MPanel, _default$6 as MRadioGroup, _default$o as MRow, _default$3 as MSelect, _default$b as MSwitch, _default$m as MTable, _default$n as MTabs, _default$k as MText, _default$h as MTextarea, _default$d as MTime, _default$9 as MTimerange, type NumberConfig, type NumberRangeConfig, type PanelConfig, type RadioGroupConfig, type RowConfig, type Rule, type SelectConfig, type SelectConfigGroupOption, type SelectConfigOption, type SelectGroupOption, type SelectOption, type SortProp, type StepConfig, type SwitchConfig, type TabConfig, type TabPaneConfig, type TableColumnConfig, type TableConfig, type TextConfig, type TextareaConfig, type TimeConfig, type TypeFunction, type ValidateError, createForm, createValues, datetimeFormatter, _default as default, display, filterFunction, getRules, initValue, useAddField };