@tmagic/form 1.7.0-beta.1 → 1.7.0-beta.2

package/dist/tmagic-form.js

@@ -1,4 +1,4 @@
-import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createBlock, createCommentVNode, mergeProps, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, renderList, createTextVNode, toDisplayString, readonly, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createBlock, createCommentVNode, mergeProps, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, renderList, createTextVNode, toDisplayString, readonly, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, onUnmounted, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, DocumentCopy, CaretTop, Position, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
 import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicPopover, TMagicInputNumber, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessage, tMagicMessageBox, TMagicDialog, TMagicRadioButton, TMagicRadio, TMagicRadioGroup, TMagicSelect, TMagicSwitch, TMagicTimePicker, useZIndex, TMagicTable, TMagicUpload, TMagicPagination, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
@@ -272,10 +272,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     const items = computed(() => props.config.items);
     const itemProp = computed(() => {
       let n = "";
-      const { names } = props.config;
-      if (names?.[0]) {
-        [n] = names;
-      } else if (name.value) {
+      if (name.value) {
         n = name.value;
       } else {
         return props.prop;
@@ -2382,7 +2379,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const value = ref([]);
     if (props.model !== void 0) {
       if (names?.length) {
-        watch(
+        const unWatch = watch(
           [() => props.model[names[0]], () => props.model[names[1]]],
           ([start, end], [preStart, preEnd]) => {
             if (!value.value) {
@@ -2397,8 +2394,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             immediate: true
           }
         );
+        onUnmounted(() => {
+          unWatch();
+        });
       } else if (props.name && props.model[props.name]) {
-        watch(
+        const unWatch = watch(
           () => props.model[props.name],
           (start, preStart) => {
             const format = `${props.config.dateFormat || "YYYY/MM/DD"} ${props.config.timeFormat || "HH:mm:ss"}`;
@@ -2411,29 +2411,38 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             immediate: true
           }
         );
+        onUnmounted(() => {
+          unWatch();
+        });
       }
     }
-    const setValue = (v) => {
-      names?.forEach((item, index) => {
-        if (!props.model) {
-          return;
-        }
-        if (Array.isArray(v)) {
-          props.model[item] = v[index];
-        } else {
-          props.model[item] = void 0;
-        }
-      });
-    };
     const changeHandler = (v) => {
       const value2 = v || [];
       if (props.name) {
         emit("change", value2);
       } else {
-        if (names?.length) {
-          setValue(value2);
+        if (props.config.names?.length) {
+          const newChangeRecords = [];
+          props.config.names.forEach((item, index) => {
+            if (!props.model) {
+              return;
+            }
+            if (Array.isArray(v)) {
+              newChangeRecords.push({
+                propPath: props.prop ? `${props.prop}.${item}` : item,
+                value: v[index]
+              });
+            } else {
+              newChangeRecords.push({
+                propPath: props.prop ? `${props.prop}.${item}` : item,
+                value: void 0
+              });
+            }
+          });
+          emit("change", props.model, {
+            changeRecords: newChangeRecords
+          });
         }
-        emit("change", props.model);
       }
     };
     return (_ctx, _cache) => {
@@ -2447,11 +2456,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         "unlink-panels": true,
         disabled: __props.disabled,
         "default-time": __props.config.defaultTime,
+        format: `${__props.config.dateFormat || "YYYY/MM/DD"} ${__props.config.timeFormat || "HH:mm:ss"}`,
         "value-format": __props.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
         "date-format": __props.config.dateFormat || "YYYY/MM/DD",
         "time-format": __props.config.timeFormat || "HH:mm:ss",
         "onUpdate:modelValue": changeHandler
-      }, null, 8, ["model-value", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
+      }, null, 8, ["model-value", "size", "disabled", "default-time", "format", "value-format", "date-format", "time-format"]);
     };
   }
 });
@@ -2960,8 +2970,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
     const save = async () => {
       try {
+        const changeRecords = form.value?.changeRecords;
         const values = await form.value?.submitForm();
-        emit("submit", values, { changeRecords: form.value?.changeRecords });
+        emit("submit", values, { changeRecords });
       } catch (e) {
         emit("error", e);
       }
@@ -3026,6 +3037,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "footer", {}, () => [
                     createVNode(unref(TMagicButton), {
+                      type: "default",
                       onClick: cancel,
                       size: "small"
                     }, {
@@ -5105,33 +5117,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }, 8, ["disabled"]),
               renderSlot(_ctx.$slots, "default"),
               createElementVNode("div", _hoisted_3, [
-                unref(addable) ? (openBlock(), createBlock(unref(TMagicButton), {
-                  key: 0,
-                  size: "small",
-                  type: "primary",
-                  disabled: __props.disabled,
-                  plain: "",
-                  onClick: _cache[0] || (_cache[0] = ($event) => unref(newHandler)())
-                }, {
-                  default: withCtx(() => [..._cache[1] || (_cache[1] = [
-                    createTextVNode(
-                      "新增一行",
-                      -1
-                      /* CACHED */
-                    )
-                  ])]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["disabled"])) : createCommentVNode("v-if", true),
                 createElementVNode("div", _hoisted_4, [
                   __props.enableToggleMode && __props.config.enableToggleMode !== false && !unref(isFullscreen) ? (openBlock(), createBlock(unref(TMagicButton), {
                     key: 0,
                     icon: unref(Grid),
                     size: "small",
-                    type: "primary",
+                    type: "defalut",
                     onClick: toggleMode
                   }, {
-                    default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                    default: withCtx(() => [..._cache[1] || (_cache[1] = [
                       createTextVNode(
                         "展开配置",
                         -1
@@ -5145,7 +5139,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     key: 1,
                     icon: unref(FullScreen),
                     size: "small",
-                    type: "primary",
+                    type: "defalut",
                     onClick: unref(toggleFullscreen)
                   }, {
                     default: withCtx(() => [
@@ -5174,7 +5168,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         disabled: __props.disabled,
                         plain: ""
                       }, {
-                        default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                        default: withCtx(() => [..._cache[2] || (_cache[2] = [
                           createTextVNode(
                             "导入EXCEL",
                             -1
@@ -5196,7 +5190,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     plain: "",
                     onClick: unref(clearHandler)
                   }, {
-                    default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                    default: withCtx(() => [..._cache[3] || (_cache[3] = [
                       createTextVNode(
                         "清空",
                         -1
@@ -5206,7 +5200,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     _: 1
                     /* STABLE */
                   }, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
-                ])
+                ]),
+                unref(addable) ? (openBlock(), createBlock(unref(TMagicButton), {
+                  key: 0,
+                  size: "small",
+                  type: "primary",
+                  disabled: __props.disabled,
+                  plain: "",
+                  onClick: _cache[0] || (_cache[0] = ($event) => unref(newHandler)())
+                }, {
+                  default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                    createTextVNode(
+                      "新增一行",
+                      -1
+                      /* CACHED */
+                    )
+                  ])]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled"])) : createCommentVNode("v-if", true)
               ]),
               __props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_5, [
                 createVNode(unref(TMagicPagination), {
@@ -5269,8 +5281,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     const submitHandler = async () => {
       try {
+        const changeRecords = form.value?.changeRecords;
         const values = await form.value?.submitForm();
-        emit("submit", values, { changeRecords: form.value?.changeRecords });
+        emit("submit", values, { changeRecords });
       } catch (e) {
         emit("error", e);
       }
@@ -5345,7 +5358,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createVNode(unref(TMagicCol), { span: 12 }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "footer", {}, () => [
-                    createVNode(unref(TMagicButton), { onClick: handleClose }, {
+                    createVNode(unref(TMagicButton), {
+                      type: "default",
+                      onClick: handleClose
+                    }, {
                       default: withCtx(() => [..._cache[1] || (_cache[1] = [
                         createTextVNode(
                           "关闭",
@@ -5464,8 +5480,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const submitHandler = async () => {
       try {
+        const changeRecords = form.value?.changeRecords;
         const values = await form.value?.submitForm();
-        emit("submit", values, { changeRecords: form.value?.changeRecords });
+        emit("submit", values, { changeRecords });
       } catch (e) {
         emit("error", e);
       }

package/dist/tmagic-form.umd.cjs

@@ -3202,10 +3202,7 @@
       const items = vue.computed(() => props.config.items);
       const itemProp = vue.computed(() => {
         let n = "";
-        const { names } = props.config;
-        if (names?.[0]) {
-          [n] = names;
-        } else if (name.value) {
+        if (name.value) {
           n = name.value;
         } else {
           return props.prop;
@@ -5312,7 +5309,7 @@
       const value = vue.ref([]);
       if (props.model !== void 0) {
         if (names?.length) {
-          vue.watch(
+          const unWatch = vue.watch(
             [() => props.model[names[0]], () => props.model[names[1]]],
             ([start, end], [preStart, preEnd]) => {
               if (!value.value) {
@@ -5327,8 +5324,11 @@
               immediate: true
             }
           );
+          vue.onUnmounted(() => {
+            unWatch();
+          });
         } else if (props.name && props.model[props.name]) {
-          vue.watch(
+          const unWatch = vue.watch(
             () => props.model[props.name],
             (start, preStart) => {
               const format = `${props.config.dateFormat || "YYYY/MM/DD"} ${props.config.timeFormat || "HH:mm:ss"}`;
@@ -5341,29 +5341,38 @@
               immediate: true
             }
           );
+          vue.onUnmounted(() => {
+            unWatch();
+          });
         }
       }
-      const setValue = (v) => {
-        names?.forEach((item, index) => {
-          if (!props.model) {
-            return;
-          }
-          if (Array.isArray(v)) {
-            props.model[item] = v[index];
-          } else {
-            props.model[item] = void 0;
-          }
-        });
-      };
       const changeHandler = (v) => {
         const value2 = v || [];
         if (props.name) {
           emit("change", value2);
         } else {
-          if (names?.length) {
-            setValue(value2);
+          if (props.config.names?.length) {
+            const newChangeRecords = [];
+            props.config.names.forEach((item, index) => {
+              if (!props.model) {
+                return;
+              }
+              if (Array.isArray(v)) {
+                newChangeRecords.push({
+                  propPath: props.prop ? `${props.prop}.${item}` : item,
+                  value: v[index]
+                });
+              } else {
+                newChangeRecords.push({
+                  propPath: props.prop ? `${props.prop}.${item}` : item,
+                  value: void 0
+                });
+              }
+            });
+            emit("change", props.model, {
+              changeRecords: newChangeRecords
+            });
           }
-          emit("change", props.model);
         }
       };
       return (_ctx, _cache) => {
@@ -5377,11 +5386,12 @@
           "unlink-panels": true,
           disabled: __props.disabled,
           "default-time": __props.config.defaultTime,
+          format: `${__props.config.dateFormat || "YYYY/MM/DD"} ${__props.config.timeFormat || "HH:mm:ss"}`,
           "value-format": __props.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
           "date-format": __props.config.dateFormat || "YYYY/MM/DD",
           "time-format": __props.config.timeFormat || "HH:mm:ss",
           "onUpdate:modelValue": changeHandler
-        }, null, 8, ["model-value", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
+        }, null, 8, ["model-value", "size", "disabled", "default-time", "format", "value-format", "date-format", "time-format"]);
       };
     }
   });
@@ -5890,8 +5900,9 @@
       };
       const save = async () => {
         try {
+          const changeRecords = form.value?.changeRecords;
           const values = await form.value?.submitForm();
-          emit("submit", values, { changeRecords: form.value?.changeRecords });
+          emit("submit", values, { changeRecords });
         } catch (e) {
           emit("error", e);
         }
@@ -5956,6 +5967,7 @@
                   default: vue.withCtx(() => [
                     vue.renderSlot(_ctx.$slots, "footer", {}, () => [
                       vue.createVNode(vue.unref(design.TMagicButton), {
+                        type: "default",
                         onClick: cancel,
                         size: "small"
                       }, {
@@ -8035,33 +8047,15 @@
                 }, 8, ["disabled"]),
                 vue.renderSlot(_ctx.$slots, "default"),
                 vue.createElementVNode("div", _hoisted_3, [
-                  vue.unref(addable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                    key: 0,
-                    size: "small",
-                    type: "primary",
-                    disabled: __props.disabled,
-                    plain: "",
-                    onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(newHandler)())
-                  }, {
-                    default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
-                      vue.createTextVNode(
-                        "新增一行",
-                        -1
-                        /* CACHED */
-                      )
-                    ])]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true),
                   vue.createElementVNode("div", _hoisted_4, [
                     __props.enableToggleMode && __props.config.enableToggleMode !== false && !vue.unref(isFullscreen) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                       key: 0,
                       icon: vue.unref(iconsVue.Grid),
                       size: "small",
-                      type: "primary",
+                      type: "defalut",
                       onClick: toggleMode
                     }, {
-                      default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                      default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
                         vue.createTextVNode(
                           "展开配置",
                           -1
@@ -8075,7 +8069,7 @@
                       key: 1,
                       icon: vue.unref(iconsVue.FullScreen),
                       size: "small",
-                      type: "primary",
+                      type: "defalut",
                       onClick: vue.unref(toggleFullscreen)
                     }, {
                       default: vue.withCtx(() => [
@@ -8104,7 +8098,7 @@
                           disabled: __props.disabled,
                           plain: ""
                         }, {
-                          default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                          default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
                             vue.createTextVNode(
                               "导入EXCEL",
                               -1
@@ -8126,7 +8120,7 @@
                       plain: "",
                       onClick: vue.unref(clearHandler)
                     }, {
-                      default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                      default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
                         vue.createTextVNode(
                           "清空",
                           -1
@@ -8136,7 +8130,25 @@
                       _: 1
                       /* STABLE */
                     }, 8, ["disabled", "onClick"])) : vue.createCommentVNode("v-if", true)
-                  ])
+                  ]),
+                  vue.unref(addable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                    key: 0,
+                    size: "small",
+                    type: "primary",
+                    disabled: __props.disabled,
+                    plain: "",
+                    onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(newHandler)())
+                  }, {
+                    default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                      vue.createTextVNode(
+                        "新增一行",
+                        -1
+                        /* CACHED */
+                      )
+                    ])]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true)
                 ]),
                 __props.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
                   vue.createVNode(vue.unref(design.TMagicPagination), {
@@ -8199,8 +8211,9 @@
       });
       const submitHandler = async () => {
         try {
+          const changeRecords = form.value?.changeRecords;
           const values = await form.value?.submitForm();
-          emit("submit", values, { changeRecords: form.value?.changeRecords });
+          emit("submit", values, { changeRecords });
         } catch (e) {
           emit("error", e);
         }
@@ -8275,7 +8288,10 @@
                 vue.createVNode(vue.unref(design.TMagicCol), { span: 12 }, {
                   default: vue.withCtx(() => [
                     vue.renderSlot(_ctx.$slots, "footer", {}, () => [
-                      vue.createVNode(vue.unref(design.TMagicButton), { onClick: handleClose }, {
+                      vue.createVNode(vue.unref(design.TMagicButton), {
+                        type: "default",
+                        onClick: handleClose
+                      }, {
                         default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
                           vue.createTextVNode(
                             "关闭",
@@ -8394,8 +8410,9 @@
       });
       const submitHandler = async () => {
         try {
+          const changeRecords = form.value?.changeRecords;
           const values = await form.value?.submitForm();
-          emit("submit", values, { changeRecords: form.value?.changeRecords });
+          emit("submit", values, { changeRecords });
         } catch (e) {
           emit("error", e);
         }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -51,9 +51,9 @@
   "peerDependencies": {
     "vue": "^3.5.22",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.0-beta.1",
-    "@tmagic/form-schema": "1.7.0-beta.1",
-    "@tmagic/utils": "1.7.0-beta.1"
+    "@tmagic/utils": "1.7.0-beta.2",
+    "@tmagic/design": "1.7.0-beta.2",
+    "@tmagic/form-schema": "1.7.0-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/FormBox.vue

@@ -101,8 +101,9 @@ watchEffect(() => {
 
 const submitHandler = async () => {
   try {
+    const changeRecords = form.value?.changeRecords;
     const values = await form.value?.submitForm();
-    emit('submit', values, { changeRecords: form.value?.changeRecords });
+    emit('submit', values, { changeRecords });
   } catch (e) {
     emit('error', e);
   }

package/src/FormDialog.vue

@@ -42,7 +42,7 @@
         </TMagicCol>
         <TMagicCol :span="12">
           <slot name="footer">
-            <TMagicButton @click="cancel" size="small">取 消</TMagicButton>
+            <TMagicButton type="default" @click="cancel" size="small">取 消</TMagicButton>
             <TMagicButton v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep"
               >上一步</TMagicButton
             >
@@ -131,8 +131,9 @@ const closeHandler = () => {
 
 const save = async () => {
   try {
+    const changeRecords = form.value?.changeRecords;
     const values = await form.value?.submitForm();
-    emit('submit', values, { changeRecords: form.value?.changeRecords });
+    emit('submit', values, { changeRecords });
   } catch (e) {
     emit('error', e);
   }

package/src/FormDrawer.vue

@@ -42,7 +42,7 @@
         </TMagicCol>
         <TMagicCol :span="12">
           <slot name="footer">
-            <TMagicButton @click="handleClose">关闭</TMagicButton>
+            <TMagicButton type="default" @click="handleClose">关闭</TMagicButton>
             <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
               confirmText
             }}</TMagicButton>
@@ -109,8 +109,9 @@ watchEffect(() => {
 
 const submitHandler = async () => {
   try {
+    const changeRecords = form.value?.changeRecords;
     const values = await form.value?.submitForm();
-    emit('submit', values, { changeRecords: form.value?.changeRecords });
+    emit('submit', values, { changeRecords });
   } catch (e) {
     emit('error', e);
   }

package/src/containers/Container.vue

@@ -208,10 +208,7 @@ const items = computed(() => (props.config as ContainerCommonConfig).items);
 
 const itemProp = computed(() => {
   let n: string | number = '';
-  const { names } = props.config as any;
-  if (names?.[0]) {
-    [n] = names;
-  } else if (name.value) {
+  if (name.value) {
     n = name.value;
   } else {
     return props.prop;

package/src/fields/Daterange.vue

@@ -9,6 +9,7 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
+    :format="`${config.dateFormat || 'YYYY/MM/DD'} ${config.timeFormat || 'HH:mm:ss'}`"
     :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :date-format="config.dateFormat || 'YYYY/MM/DD'"
     :time-format="config.timeFormat || 'HH:mm:ss'"
@@ -17,11 +18,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DaterangeConfig, FieldProps } from '../schema';
+import type { ChangeRecord, DaterangeConfig, FieldProps } from '../schema';
 import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -40,7 +41,7 @@ const value = ref<(Date | string | undefined)[] | null>([]);
 
 if (props.model !== undefined) {
   if (names?.length) {
-    watch(
+    const unWatch = watch(
       [() => props.model[names[0]], () => props.model[names[1]]],
       ([start, end], [preStart, preEnd]) => {
         if (!value.value) {
@@ -56,8 +57,12 @@ if (props.model !== undefined) {
         immediate: true,
       },
     );
+
+    onUnmounted(() => {
+      unWatch();
+    });
   } else if (props.name && props.model[props.name]) {
-    watch(
+    const unWatch = watch(
       () => props.model[props.name],
       (start, preStart) => {
         const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
@@ -71,32 +76,41 @@ if (props.model !== undefined) {
         immediate: true,
       },
     );
+    onUnmounted(() => {
+      unWatch();
+    });
   }
 }
 
-const setValue = (v: Date[] | Date) => {
-  names?.forEach((item, index) => {
-    if (!props.model) {
-      return;
-    }
-    if (Array.isArray(v)) {
-      props.model[item] = v[index];
-    } else {
-      props.model[item] = undefined;
-    }
-  });
-};
-
 const changeHandler = (v: Date[]) => {
   const value = v || [];
 
   if (props.name) {
     emit('change', value);
   } else {
-    if (names?.length) {
-      setValue(value);
+    if (props.config.names?.length) {
+      const newChangeRecords: ChangeRecord[] = [];
+      props.config.names.forEach((item, index) => {
+        if (!props.model) {
+          return;
+        }
+        if (Array.isArray(v)) {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: v[index],
+          });
+        } else {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: undefined,
+          });
+        }
+      });
+
+      emit('change', props.model, {
+        changeRecords: newChangeRecords,
+      });
     }
-    emit('change', props.model);
   }
 };
 </script>

package/src/table/Table.vue

@@ -24,15 +24,11 @@
         <slot></slot>
 
         <div style="display: flex; justify-content: space-between; margin: 10px 0">
-          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-            >新增一行</TMagicButton
-          >
-
           <div style="display: flex">
             <TMagicButton
               :icon="Grid"
               size="small"
-              type="primary"
+              type="defalut"
               @click="toggleMode"
               v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
               >展开配置</TMagicButton
@@ -40,7 +36,7 @@
             <TMagicButton
               :icon="FullScreen"
               size="small"
-              type="primary"
+              type="defalut"
               @click="toggleFullscreen"
               v-if="config.enableFullscreen !== false"
             >
@@ -61,6 +57,9 @@
               >清空</TMagicButton
             >
           </div>
+          <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+            >新增一行</TMagicButton
+          >
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">

package/types/index.d.ts

@@ -67,14 +67,14 @@ declare const __VLS_export$v: _vue_runtime_core.DefineComponent<__VLS_Props$u, {
     submitForm: (native?: boolean) => Promise<any>;
     getTextByName: (name: string, config?: FormConfig) => string | undefined;
 }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-    change: (...args: any[]) => void;
     error: (...args: any[]) => void;
+    change: (...args: any[]) => void;
     "update:stepActive": (...args: any[]) => void;
     "field-change": (...args: any[]) => void;
     "field-input": (...args: any[]) => void;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$u> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
     "onField-change"?: ((...args: any[]) => any) | undefined;
     "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -139,8 +139,8 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -155,8 +155,8 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
         submitForm: (native?: boolean) => Promise<any>;
         getTextByName: (name: string, config?: FormConfig) => string | undefined;
     }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-        change: (...args: any[]) => void;
         error: (...args: any[]) => void;
+        change: (...args: any[]) => void;
         "update:stepActive": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
         "field-input": (...args: any[]) => void;
@@ -198,8 +198,8 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -244,8 +244,8 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -260,8 +260,8 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
         submitForm: (native?: boolean) => Promise<any>;
         getTextByName: (name: string, config?: FormConfig) => string | undefined;
     }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-        change: (...args: any[]) => void;
         error: (...args: any[]) => void;
+        change: (...args: any[]) => void;
         "update:stepActive": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
         "field-input": (...args: any[]) => void;
@@ -303,8 +303,8 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -339,14 +339,14 @@ declare const __VLS_base$4: _vue_runtime_core.DefineComponent<__VLS_Props$t, {
     show: () => void;
     hide: () => void;
 }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
     change: (...args: any[]) => void;
     close: (...args: any[]) => void;
-    error: (...args: any[]) => void;
     submit: (...args: any[]) => void;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$t> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
-    onError?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {
     values: Object;
@@ -409,8 +409,8 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -425,8 +425,8 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
         submitForm: (native?: boolean) => Promise<any>;
         getTextByName: (name: string, config?: FormConfig) => string | undefined;
     }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-        change: (...args: any[]) => void;
         error: (...args: any[]) => void;
+        change: (...args: any[]) => void;
         "update:stepActive": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
         "field-input": (...args: any[]) => void;
@@ -468,8 +468,8 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -514,8 +514,8 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -530,8 +530,8 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
         submitForm: (native?: boolean) => Promise<any>;
         getTextByName: (name: string, config?: FormConfig) => string | undefined;
     }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-        change: (...args: any[]) => void;
         error: (...args: any[]) => void;
+        change: (...args: any[]) => void;
         "update:stepActive": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
         "field-input": (...args: any[]) => void;
@@ -573,8 +573,8 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -608,17 +608,17 @@ declare const __VLS_base$3: _vue_runtime_core.DefineComponent<__VLS_Props$s, {
     hide: () => void;
     handleClose: () => void;
 }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
     change: (...args: any[]) => void;
     close: (...args: any[]) => void;
-    error: (...args: any[]) => void;
     submit: (...args: any[]) => void;
     open: (...args: any[]) => void;
     opened: (...args: any[]) => void;
     closed: (...args: any[]) => void;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$s> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
-    onError?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onOpened?: ((...args: any[]) => any) | undefined;
@@ -681,8 +681,8 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -697,8 +697,8 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
         submitForm: (native?: boolean) => Promise<any>;
         getTextByName: (name: string, config?: FormConfig) => string | undefined;
     }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-        change: (...args: any[]) => void;
         error: (...args: any[]) => void;
+        change: (...args: any[]) => void;
         "update:stepActive": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
         "field-input": (...args: any[]) => void;
@@ -740,8 +740,8 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -786,8 +786,8 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -802,8 +802,8 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
         submitForm: (native?: boolean) => Promise<any>;
         getTextByName: (name: string, config?: FormConfig) => string | undefined;
     }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-        change: (...args: any[]) => void;
         error: (...args: any[]) => void;
+        change: (...args: any[]) => void;
         "update:stepActive": (...args: any[]) => void;
         "field-change": (...args: any[]) => void;
         "field-input": (...args: any[]) => void;
@@ -845,8 +845,8 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
         preventSubmitDefault?: boolean;
         extendState?: (_state: _tmagic_form_schema.FormState) => Record<string, any> | Promise<Record<string, any>>;
     }> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
         onError?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:stepActive"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -878,12 +878,12 @@ declare const __VLS_base$2: _vue_runtime_core.DefineComponent<__VLS_Props$r, {
     show: () => void;
     hide: () => void;
 }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-    change: (v: any, eventData: ContainerChangeEventData) => any;
     error: (e: any) => any;
+    change: (v: any, eventData: ContainerChangeEventData) => any;
     submit: (v: any, eventData: ContainerChangeEventData) => any;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$r> & Readonly<{
-    onChange?: ((v: any, eventData: ContainerChangeEventData) => any) | undefined;
     onError?: ((e: any) => any) | undefined;
+    onChange?: ((v: any, eventData: ContainerChangeEventData) => any) | undefined;
     onSubmit?: ((v: any, eventData: ContainerChangeEventData) => any) | undefined;
 }>, {
     values: Object;