@tmagic/form 1.2.6 → 1.2.8

package/dist/tmagic-form.js

@@ -1,11 +1,10 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, watch, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, resolveDirective, createSlots, withModifiers } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, resolveDirective, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
+import { cloneDeep, isEqual } from 'lodash-es';
 import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicTabs, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicTimePicker } from '@tmagic/design';
-import { cloneDeep } from 'lodash-es';
 import Sortable from 'sortablejs';
 import { asyncLoadJs, sleep, datetimeFormatter, isNumber } from '@tmagic/utils';
 import cloneDeep$1 from 'lodash-es/cloneDeep';
-import isEqual from 'lodash-es/isEqual';
 
 const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
 const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -167,12 +166,20 @@ const initValue = async (mForm, { initValues, config }) => {
   return valuesTmp || {};
 };
 
-const _hoisted_1$b = ["innerHTML"];
+const _hoisted_1$c = ["innerHTML"];
 const _hoisted_2$7 = ["innerHTML"];
 const _hoisted_3$7 = ["innerHTML"];
 const _hoisted_4$6 = ["innerHTML"];
-const _hoisted_5$4 = {
-  key: 4,
+const _hoisted_5$4 = ["innerHTML"];
+const _hoisted_6$3 = ["innerHTML"];
+const _hoisted_7$3 = ["innerHTML"];
+const _hoisted_8$2 = ["innerHTML"];
+const _hoisted_9$1 = ["innerHTML"];
+const _hoisted_10$1 = ["innerHTML"];
+const _hoisted_11 = ["innerHTML"];
+const _hoisted_12 = ["innerHTML"];
+const _hoisted_13 = {
+  key: 5,
   style: { "text-align": "center" }
 };
 const __default__$v = defineComponent({
@@ -182,20 +189,29 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...__default__$v,
   props: {
     model: null,
+    lastValues: { default: () => ({}) },
     config: null,
     prop: { default: "" },
     disabled: { type: Boolean },
     labelWidth: null,
     expandMore: { type: Boolean, default: false },
     stepActive: null,
-    size: { default: "small" }
+    size: { default: "small" },
+    isCompare: { type: Boolean, default: false }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
     const expand = ref(false);
     const name = computed(() => props.config.name || "");
+    const showDiff = computed(() => {
+      if (!props.isCompare)
+        return false;
+      const curValue = name.value ? props.model[name.value] : props.model;
+      const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+      return !isEqual(curValue, lastValue);
+    });
     const items = computed(() => props.config.items);
     const itemProp = computed(() => {
       let n = "";
@@ -241,6 +257,21 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     watchEffect(() => {
       expand.value = props.expandMore;
     });
+    watch(
+      showDiff,
+      (showDiff2) => {
+        if (type.value === "hidden")
+          return;
+        if (items.value && !props.config.text && type.value && display$1.value)
+          return;
+        if (display$1.value && showDiff2 && type.value) {
+          emit("addDiffCount");
+        }
+      },
+      {
+        immediate: true
+      }
+    );
     const expandHandler = () => expand.value = !expand.value;
     const key = (config) => config[mForm?.keyProps];
     const filterHandler = (filter, value) => {
@@ -274,6 +305,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         return value.replace(/^\s*/, "").replace(/\s*$/, "");
       }
     };
+    const onAddDiffCount = () => emit("addDiffCount");
     const onChangeHandler = async function(v, key2) {
       const { filter, onChange, trim, name: name2, dynamicKey } = props.config;
       let value = v;
@@ -311,6 +343,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           key: key(__props.config),
           size: __props.size,
           model: __props.model,
+          "last-values": __props.lastValues,
+          "is-compare": __props.isCompare,
           config: __props.config,
           disabled: unref(disabled),
           name: unref(name),
@@ -318,8 +352,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           "step-active": __props.stepActive,
           "expand-more": expand.value,
           "label-width": unref(itemLabelWidth),
-          onChange: onChangeHandler
-        }, null, 40, ["size", "model", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : unref(type) && unref(display$1) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          onChange: onChangeHandler,
+          onAddDiffCount
+        }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : unref(type) && unref(display$1) && !unref(showDiff) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle(__props.config.tip ? "flex: 1" : ""),
             class: normalizeClass({ hidden: `${unref(itemLabelWidth)}` === "0" || !__props.config.text }),
@@ -330,7 +365,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             label: withCtx(() => [
               createElementVNode("span", {
                 innerHTML: unref(type) === "checkbox" ? "" : __props.config.text
-              }, null, 8, _hoisted_1$b)
+              }, null, 8, _hoisted_1$c)
             ]),
             default: withCtx(() => [
               unref(tooltip) ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
@@ -346,7 +381,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     name: unref(name),
                     disabled: unref(disabled),
                     prop: unref(itemProp),
-                    onChange: onChangeHandler
+                    onChange: onChangeHandler,
+                    onAddDiffCount
                   }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
                 ]),
                 _: 1
@@ -358,7 +394,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                 name: unref(name),
                 disabled: unref(disabled),
                 prop: unref(itemProp),
-                onChange: onChangeHandler
+                onChange: onChangeHandler,
+                onAddDiffCount
               }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
               unref(extra) ? (openBlock(), createElementBlock("div", {
                 key: 2,
@@ -387,11 +424,148 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : createCommentVNode("", true)
-        ], 64)) : unref(items) && unref(display$1) ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+        ], 64)) : unref(type) && unref(display$1) && unref(showDiff) ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+          createVNode(unref(TMagicFormItem), {
+            style: normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
+            class: normalizeClass({ hidden: `${unref(itemLabelWidth)}` === "0" || !__props.config.text }),
+            prop: unref(itemProp),
+            "label-width": unref(itemLabelWidth),
+            rules: unref(rule)
+          }, {
+            label: withCtx(() => [
+              createElementVNode("span", {
+                innerHTML: unref(type) === "checkbox" ? "" : __props.config.text
+              }, null, 8, _hoisted_5$4)
+            ]),
+            default: withCtx(() => [
+              unref(tooltip) ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
+                content: withCtx(() => [
+                  createElementVNode("div", { innerHTML: unref(tooltip) }, null, 8, _hoisted_6$3)
+                ]),
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(tagName)), {
+                    key: key(__props.config),
+                    size: __props.size,
+                    model: __props.lastValues,
+                    config: __props.config,
+                    name: unref(name),
+                    disabled: unref(disabled),
+                    prop: unref(itemProp),
+                    onChange: onChangeHandler
+                  }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                ]),
+                _: 1
+              })) : (openBlock(), createBlock(resolveDynamicComponent(unref(tagName)), {
+                key: key(__props.config),
+                size: __props.size,
+                model: __props.lastValues,
+                config: __props.config,
+                name: unref(name),
+                disabled: unref(disabled),
+                prop: unref(itemProp),
+                onChange: onChangeHandler
+              }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
+              unref(extra) ? (openBlock(), createElementBlock("div", {
+                key: 2,
+                innerHTML: unref(extra),
+                class: "m-form-tip"
+              }, null, 8, _hoisted_7$3)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          __props.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 0,
+            placement: "left"
+          }, {
+            content: withCtx(() => [
+              createElementVNode("div", {
+                innerHTML: __props.config.tip
+              }, null, 8, _hoisted_8$2)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
+                default: withCtx(() => [
+                  createVNode(unref(WarningFilled))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createVNode(unref(TMagicFormItem), {
+            style: normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
+            class: normalizeClass({ hidden: `${unref(itemLabelWidth)}` === "0" || !__props.config.text }),
+            prop: unref(itemProp),
+            "label-width": unref(itemLabelWidth),
+            rules: unref(rule)
+          }, {
+            label: withCtx(() => [
+              createElementVNode("span", {
+                innerHTML: unref(type) === "checkbox" ? "" : __props.config.text
+              }, null, 8, _hoisted_9$1)
+            ]),
+            default: withCtx(() => [
+              unref(tooltip) ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
+                content: withCtx(() => [
+                  createElementVNode("div", { innerHTML: unref(tooltip) }, null, 8, _hoisted_10$1)
+                ]),
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(tagName)), {
+                    key: key(__props.config),
+                    size: __props.size,
+                    model: __props.model,
+                    config: __props.config,
+                    name: unref(name),
+                    disabled: unref(disabled),
+                    prop: unref(itemProp),
+                    onChange: onChangeHandler
+                  }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                ]),
+                _: 1
+              })) : (openBlock(), createBlock(resolveDynamicComponent(unref(tagName)), {
+                key: key(__props.config),
+                size: __props.size,
+                model: __props.model,
+                config: __props.config,
+                name: unref(name),
+                disabled: unref(disabled),
+                prop: unref(itemProp),
+                onChange: onChangeHandler
+              }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
+              unref(extra) ? (openBlock(), createElementBlock("div", {
+                key: 2,
+                innerHTML: unref(extra),
+                class: "m-form-tip"
+              }, null, 8, _hoisted_11)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          __props.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
+            placement: "left"
+          }, {
+            content: withCtx(() => [
+              createElementVNode("div", {
+                innerHTML: __props.config.tip
+              }, null, 8, _hoisted_12)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
+                default: withCtx(() => [
+                  createVNode(unref(WarningFilled))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ], 64)) : unref(items) && unref(display$1) ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
           (unref(name) || unref(name) === 0 ? __props.model[unref(name)] : __props.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(items), (item) => {
             return openBlock(), createBlock(_component_Container, {
               key: key(item),
               model: unref(name) || unref(name) === 0 ? __props.model[unref(name)] : __props.model,
+              "last-values": unref(name) || unref(name) === 0 ? __props.lastValues[unref(name)] : __props.lastValues,
+              "is-compare": __props.isCompare,
               config: item,
               size: __props.size,
               disabled: unref(disabled),
@@ -399,11 +573,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               "expand-more": expand.value,
               "label-width": unref(itemLabelWidth),
               prop: unref(itemProp),
-              onChange: onChangeHandler
-            }, null, 8, ["model", "config", "size", "disabled", "step-active", "expand-more", "label-width", "prop"]);
+              onChange: onChangeHandler,
+              onAddDiffCount
+            }, null, 8, ["model", "last-values", "is-compare", "config", "size", "disabled", "step-active", "expand-more", "label-width", "prop"]);
           }), 128)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
-        __props.config.expand && unref(type) !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+        __props.config.expand && unref(type) !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_13, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             size: "small",
@@ -422,7 +597,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = ["innerHTML"];
+const _hoisted_1$b = ["innerHTML"];
 const _hoisted_2$6 = ["innerHTML"];
 const _hoisted_3$6 = { key: 1 };
 const _hoisted_4$5 = ["innerHTML"];
@@ -443,11 +618,13 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     prop: { default: "" },
     size: null,
     model: null,
+    lastValues: { default: () => ({}) },
+    isCompare: { type: Boolean, default: false },
     config: null,
     rules: { default: {} },
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
@@ -476,6 +653,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         }
       );
     }
+    const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
       return (unref(name) ? __props.model[unref(name)] : __props.model) ? (openBlock(), createElementBlock("fieldset", {
         key: 0,
@@ -494,7 +672,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: __props.config.legend
-                }, null, 8, _hoisted_1$a),
+                }, null, 8, _hoisted_1$b),
                 __props.config.extra ? (openBlock(), createElementBlock("span", {
                   key: 0,
                   innerHTML: __props.config.extra,
@@ -521,14 +699,17 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               return openBlock(), createBlock(_sfc_main$v, {
                 key: key(item, index),
                 model: unref(name) ? __props.model[unref(name)] : __props.model,
+                lastValues: unref(name) ? __props.lastValues[unref(name)] : __props.lastValues,
+                "is-compare": __props.isCompare,
                 rules: unref(name) ? __props.rules[unref(name)] : [],
                 config: item,
                 prop: __props.prop,
                 disabled: __props.disabled,
                 labelWidth: unref(lWidth),
                 size: __props.size,
-                onChange: change
-              }, null, 8, ["model", "rules", "config", "prop", "disabled", "labelWidth", "size"]);
+                onChange: change,
+                onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+              }, null, 8, ["model", "lastValues", "is-compare", "rules", "config", "prop", "disabled", "labelWidth", "size"]);
             }), 128))
           ]),
           createElementVNode("img", {
@@ -539,21 +720,24 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           return openBlock(), createBlock(_sfc_main$v, {
             key: key(item, index),
             model: unref(name) ? __props.model[unref(name)] : __props.model,
+            lastValues: unref(name) ? __props.lastValues[unref(name)] : __props.lastValues,
+            "is-compare": __props.isCompare,
             rules: unref(name) ? __props.rules[unref(name)] : [],
             config: item,
             prop: __props.prop,
             labelWidth: unref(lWidth),
             size: __props.size,
             disabled: __props.disabled,
-            onChange: change
-          }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size", "disabled"]);
+            onChange: change,
+            onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
+          }, null, 8, ["model", "lastValues", "is-compare", "rules", "config", "prop", "labelWidth", "size", "disabled"]);
         }), 128)) : createCommentVNode("", true)
       ], 4)) : createCommentVNode("", true);
     };
   }
 });
 
-const _hoisted_1$9 = { class: "m-fields-group-list-item" };
+const _hoisted_1$a = { class: "m-fields-group-list-item" };
 const _hoisted_2$5 = /* @__PURE__ */ createTextVNode("\u4E0A\u79FB");
 const _hoisted_3$5 = /* @__PURE__ */ createTextVNode("\u4E0B\u79FB");
 const _hoisted_4$4 = ["innerHTML"];
@@ -564,6 +748,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...__default__$t,
   props: {
     model: null,
+    lastValues: null,
+    isCompare: { type: Boolean },
     groupModel: null,
     config: null,
     labelWidth: null,
@@ -572,7 +758,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     index: null,
     disabled: { type: Boolean }
   },
-  emits: ["swap-item", "remove-item", "change"],
+  emits: ["swap-item", "remove-item", "change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
@@ -617,8 +803,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       }
       return movable2;
     };
+    const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("div", null, [
           createVNode(unref(TMagicIcon), {
             style: { "margin-right": "7px" },
@@ -698,18 +885,21 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           key: 0,
           config: unref(rowConfig),
           model: __props.model,
+          lastValues: __props.lastValues,
+          "is-compare": __props.isCompare,
           labelWidth: __props.labelWidth,
           prop: `${__props.prop}${__props.prop ? "." : ""}${String(__props.index)}`,
           size: __props.size,
           disabled: __props.disabled,
-          onChange: changeHandler
-        }, null, 8, ["config", "model", "labelWidth", "prop", "size", "disabled"])) : createCommentVNode("", true)
+          onChange: changeHandler,
+          onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
+        }, null, 8, ["config", "model", "lastValues", "is-compare", "labelWidth", "prop", "size", "disabled"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const _hoisted_1$8 = { class: "m-fields-group-list" };
+const _hoisted_1$9 = { class: "m-fields-group-list" };
 const _hoisted_2$4 = ["innerHTML"];
 const _hoisted_3$4 = {
   key: 1,
@@ -728,6 +918,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...__default__$s,
   props: {
     model: null,
+    lastValues: null,
+    isCompare: { type: Boolean },
     config: null,
     name: null,
     labelWidth: null,
@@ -735,7 +927,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     size: null,
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
@@ -799,8 +991,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         text: null
       }));
     };
+    const onAddDiffCount = () => emit("addDiffCount");
+    const getLastValues = (item, index) => item?.[index] || {};
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         __props.config.extra ? (openBlock(), createElementBlock("div", {
           key: 0,
           innerHTML: __props.config.extra,
@@ -810,6 +1004,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           return openBlock(), createBlock(_sfc_main$t, {
             key: index,
             model: item,
+            lastValues: getLastValues(__props.lastValues[__props.name], index),
+            "is-compare": __props.isCompare,
             config: __props.config,
             prop: __props.prop,
             index,
@@ -819,8 +1015,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             "group-model": __props.model[__props.name],
             onRemoveItem: removeHandler,
             onSwapItem: swapHandler,
-            onChange: changeHandler
-          }, null, 8, ["model", "config", "prop", "index", "label-width", "size", "disabled", "group-model"]);
+            onChange: changeHandler,
+            onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
+          }, null, 8, ["model", "lastValues", "is-compare", "config", "prop", "index", "label-width", "size", "disabled", "group-model"]);
         }), 128)),
         unref(addable) ? (openBlock(), createBlock(unref(TMagicButton), {
           key: 3,
@@ -849,7 +1046,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "clearfix" };
+const _hoisted_1$8 = { class: "clearfix" };
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$3 = {
   key: 0,
@@ -864,6 +1061,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...__default__$r,
   props: {
     model: null,
+    lastValues: null,
+    isCompare: { type: Boolean },
     config: null,
     name: null,
     labelWidth: null,
@@ -871,7 +1070,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     size: null,
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
@@ -879,6 +1078,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const items = computed(() => props.config.items);
     const filter = (config) => filterFunction(mForm, config, props);
     const changeHandler = () => emit("change", props.model);
+    const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
       return unref(items) && unref(items).length ? (openBlock(), createBlock(unref(TMagicCard), {
         key: 0,
@@ -886,7 +1086,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "body-style": { display: expand.value ? "block" : "none" }
       }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$7, [
+          createElementVNode("div", _hoisted_1$8, [
             createElementVNode("a", {
               href: "javascript:",
               style: { "width": "100%", "display": "block" },
@@ -917,12 +1117,15 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                     key: item[unref(mForm)?.keyProp || "__key"] ?? index,
                     config: item,
                     model: __props.name ? __props.model[__props.name] : __props.model,
+                    lastValues: __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+                    "is-compare": __props.isCompare,
                     prop: __props.prop,
                     size: __props.size,
                     disabled: __props.disabled,
                     "label-width": __props.config.labelWidth || __props.labelWidth,
-                    onChange: changeHandler
-                  }, null, 8, ["config", "model", "prop", "size", "disabled", "label-width"]);
+                    onChange: changeHandler,
+                    onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                  }, null, 8, ["config", "model", "lastValues", "is-compare", "prop", "size", "disabled", "label-width"]);
                 }), 128))
               ]),
               createElementVNode("img", {
@@ -934,12 +1137,15 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 key: item[unref(mForm)?.keyProp || "__key"] ?? index,
                 config: item,
                 model: __props.name ? __props.model[__props.name] : __props.model,
+                lastValues: __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+                "is-compare": __props.isCompare,
                 prop: __props.prop,
                 size: __props.size,
                 disabled: __props.disabled,
                 "label-width": __props.config.labelWidth || __props.labelWidth,
-                onChange: changeHandler
-              }, null, 8, ["config", "model", "prop", "size", "disabled", "label-width"]);
+                onChange: changeHandler,
+                onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
+              }, null, 8, ["config", "model", "lastValues", "is-compare", "prop", "size", "disabled", "label-width"]);
             }), 128))
           ])
         ]),
@@ -956,6 +1162,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...__default__$q,
   props: {
     model: null,
+    lastValues: null,
+    isCompare: { type: Boolean },
     config: null,
     labelWidth: null,
     expandMore: { type: Boolean },
@@ -964,25 +1172,29 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     prop: null,
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
     const display$1 = computed(() => display(mForm, props.config.display, props));
     const changeHandler = () => emit("change", props.model);
+    const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(unref(TMagicCol), { span: __props.span }, {
         default: withCtx(() => [
           createVNode(_sfc_main$v, {
             model: __props.model,
+            lastValues: __props.lastValues,
+            "is-compare": __props.isCompare,
             config: __props.config,
             prop: __props.prop,
             "label-width": __props.config.labelWidth || __props.labelWidth,
             "expand-more": __props.expandMore,
             size: __props.size,
             disabled: __props.disabled,
-            onChange: changeHandler
-          }, null, 8, ["model", "config", "prop", "label-width", "expand-more", "size", "disabled"])
+            onChange: changeHandler,
+            onAddDiffCount
+          }, null, 8, ["model", "lastValues", "is-compare", "config", "prop", "label-width", "expand-more", "size", "disabled"])
         ]),
         _: 1
       }, 8, ["span"])), [
@@ -999,6 +1211,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...__default__$p,
   props: {
     model: null,
+    lastValues: null,
+    isCompare: { type: Boolean },
     config: null,
     name: null,
     labelWidth: null,
@@ -1007,11 +1221,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     expandMore: { type: Boolean },
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
     const changeHandler = () => emit("change", props.name ? props.model[props.name] : props.model);
+    const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicRow), { gutter: 10 }, {
         default: withCtx(() => [
@@ -1023,11 +1238,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               labelWidth: __props.config.labelWidth || __props.labelWidth,
               expandMore: __props.expandMore,
               model: __props.name ? __props.model[__props.name] : __props.model,
+              lastValues: __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+              "is-compare": __props.isCompare,
               prop: __props.prop,
               size: __props.size,
               disabled: __props.disabled,
-              onChange: changeHandler
-            }, null, 8, ["span", "config", "labelWidth", "expandMore", "model", "prop", "size", "disabled"]);
+              onChange: changeHandler,
+              onAddDiffCount
+            }, null, 8, ["span", "config", "labelWidth", "expandMore", "model", "lastValues", "is-compare", "prop", "size", "disabled"]);
           }), 128))
         ]),
         _: 1
@@ -1043,13 +1261,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...__default__$o,
   props: {
     model: null,
+    lastValues: null,
+    isCompare: { type: Boolean },
     config: null,
     stepActive: { default: 1 },
     labelWidth: null,
     size: null,
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const mForm = inject("mForm");
@@ -1064,6 +1284,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     const changeHandler = () => {
       emit("change", props.model);
     };
+    const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
         createVNode(unref(TMagicSteps), {
@@ -1091,12 +1312,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   key: item[unref(mForm)?.keyProp || "__key"],
                   config: item,
                   model: step.name ? __props.model[step.name] : __props.model,
+                  lastValues: step.name ? __props.lastValues[step.name] : __props.lastValues,
+                  "is-compare": __props.isCompare,
                   prop: `${step.name}`,
                   size: __props.size,
                   disabled: __props.disabled,
                   "label-width": __props.config.labelWidth || __props.labelWidth,
-                  onChange: changeHandler
-                }, null, 8, ["config", "model", "prop", "size", "disabled", "label-width"])), [
+                  onChange: changeHandler,
+                  onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
+                }, null, 8, ["config", "model", "lastValues", "is-compare", "prop", "size", "disabled", "label-width"])), [
                   [vShow, active.value - 1 === index]
                 ]) : createCommentVNode("", true)
               ], 64);
@@ -1108,7 +1332,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["innerHTML"];
+const _hoisted_1$7 = ["innerHTML"];
 const _hoisted_2$2 = { class: "el-form-item__content" };
 const _hoisted_3$2 = ["innerHTML"];
 const _hoisted_4$1 = /* @__PURE__ */ createTextVNode("\u6DFB\u52A0");
@@ -1129,6 +1353,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...__default__$n,
   props: {
     model: null,
+    lastValues: { default: () => ({}) },
+    isCompare: { type: Boolean, default: false },
     config: null,
     name: null,
     prop: { default: "" },
@@ -1141,7 +1367,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     enableToggleMode: { type: Boolean, default: true },
     showIndex: { type: Boolean, default: true }
   },
-  emits: ["change", "select"],
+  emits: ["change", "select", "addDiffCount"],
   setup(__props, { expose, emit }) {
     const props = __props;
     let timer = null;
@@ -1159,6 +1385,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
       ) : props.model[modelName.value]
     );
+    const lastData = computed(
+      () => props.config.pagination ? props.lastValues[modelName.value].filter(
+        (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
+      ) : props.lastValues[modelName.value] || {}
+    );
     const sortChange = ({ prop, order }) => {
       if (order === "ascending") {
         props.model[modelName.value] = props.model[modelName.value].sort((a, b) => a[prop] - b[prop]);
@@ -1460,6 +1691,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       const { prop } = toRefs(props);
       return `${prop.value}${prop.value ? "." : ""}${index + 1 + pagecontext.value * pagesize.value - 1}`;
     };
+    const onAddDiffCount = () => emit("addDiffCount");
     expose({
       toggleRowSelection
     });
@@ -1473,7 +1705,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           key: 0,
           style: { "color": "rgba(0, 0, 0, 0.45)" },
           innerHTML: __props.config.extra
-        }, null, 8, _hoisted_1$6)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_1$7)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$2, [
           createVNode(unref(TMagicTooltip), {
             content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
@@ -1487,6 +1719,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 style: { "width": "100%" },
                 "row-key": __props.config.rowKey || "id",
                 data: unref(data),
+                lastData: unref(lastData),
                 border: __props.config.border,
                 "max-height": __props.config.maxHeight,
                 "default-expand-all": true,
@@ -1615,9 +1848,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                             rules: column.rules,
                             config: makeConfig(column, scope.row),
                             model: scope.row,
+                            lastValues: unref(lastData)[scope.$index],
+                            "is-compare": __props.isCompare,
                             size: __props.size,
-                            onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", __props.model[unref(modelName)]))
-                          }, null, 8, ["disabled", "prop", "rules", "config", "model", "size"])) : createCommentVNode("", true)
+                            onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", __props.model[unref(modelName)])),
+                            onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                          }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : createCommentVNode("", true)
                         ]),
                         _: 2
                       }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : createCommentVNode("", true)
@@ -1625,7 +1861,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   }), 256))
                 ]),
                 _: 3
-              }, 8, ["row-key", "data", "border", "max-height"])) : createCommentVNode("", true)
+              }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : createCommentVNode("", true)
             ]),
             _: 3
           }, 8, ["disabled"]),
@@ -1636,7 +1872,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             type: "primary",
             disabled: __props.disabled,
             plain: "",
-            onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
+            onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
           }, {
             default: withCtx(() => [
               _hoisted_4$1
@@ -1700,7 +1936,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             type: "warning",
             disabled: __props.disabled,
             plain: "",
-            onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
+            onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
           }, {
             default: withCtx(() => [
               _hoisted_9
@@ -1725,6 +1961,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$6 = { class: "custom-tabs-label" };
 const __default__$m = defineComponent({
   name: "MFormTabs"
 });
@@ -1732,6 +1969,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...__default__$m,
   props: {
     model: null,
+    lastValues: { default: () => ({}) },
+    isCompare: { type: Boolean, default: false },
     config: null,
     name: null,
     size: null,
@@ -1740,7 +1979,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     expandMore: { type: Boolean },
     disabled: { type: Boolean }
   },
-  emits: ["change"],
+  emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
     const uiComponent = getConfig$1("components").tabPane;
@@ -1768,6 +2007,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
     const mForm = inject("mForm");
     const activeTabName = ref(getActive(mForm, props, ""));
+    const diffCount = ref({});
     const tabs = computed(() => {
       if (props.config.dynamic) {
         if (!props.config.name)
@@ -1830,7 +2070,27 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
       }
     };
+    const getValues = (model, tabIndex, tab) => {
+      const tabName = props.config.dynamic ? (model[props?.name] || model)[tabIndex] : tab.name;
+      let propName = props.name;
+      if (tabName) {
+        propName = (model[props?.name] || model)[tab.name];
+      }
+      if (propName) {
+        return model[props.name];
+      }
+      return model;
+    };
+    const onAddDiffCount = (tabIndex) => {
+      if (!diffCount.value[tabIndex]) {
+        diffCount.value[tabIndex] = 1;
+      } else {
+        diffCount.value[tabIndex] += 1;
+      }
+      emit("addDiffCount");
+    };
     return (_ctx, _cache) => {
+      const _component_el_badge = resolveComponent("el-badge");
       return openBlock(), createBlock(unref(TMagicTabs), {
         modelValue: activeTabName.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
@@ -1851,19 +2111,32 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 label: filter(tab.title),
                 lazy: tab.lazy || false
               }, {
+                label: withCtx(() => [
+                  createElementVNode("span", _hoisted_1$6, [
+                    createTextVNode(toDisplayString(filter(tab.title)), 1),
+                    createVNode(_component_el_badge, {
+                      hidden: !diffCount.value[tabIndex],
+                      value: diffCount.value[tabIndex],
+                      class: "diff-count-badge"
+                    }, null, 8, ["hidden", "value"])
+                  ])
+                ]),
                 default: withCtx(() => [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(tabItems(tab), (item) => {
                     return openBlock(), createBlock(_sfc_main$v, {
                       key: item[unref(mForm)?.keyProp || "__key"],
                       config: item,
                       disabled: __props.disabled,
-                      model: __props.config.dynamic ? (__props.name ? __props.model[__props.name] : __props.model)[tabIndex] : tab.name ? (__props.name ? __props.model[__props.name] : __props.model)[tab.name] : __props.name ? __props.model[__props.name] : __props.model,
+                      model: getValues(__props.model, tabIndex, tab),
+                      "last-values": getValues(__props.lastValues, tabIndex, tab),
+                      "is-compare": __props.isCompare,
                       prop: __props.config.dynamic ? `${__props.prop}${__props.prop ? "." : ""}${String(tabIndex)}` : __props.prop,
                       size: __props.size,
                       "label-width": tab.labelWidth || __props.labelWidth,
                       "expand-more": __props.expandMore,
-                      onChange: changeHandler
-                    }, null, 8, ["config", "disabled", "model", "prop", "size", "label-width", "expand-more"]);
+                      onChange: changeHandler,
+                      onAddDiffCount: ($event) => onAddDiffCount(tabIndex)
+                    }, null, 8, ["config", "disabled", "model", "last-values", "is-compare", "prop", "size", "label-width", "expand-more", "onAddDiffCount"]);
                   }), 128))
                 ]),
                 _: 2
@@ -2488,6 +2761,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   props: {
     config: { default: () => [] },
     initValues: { default: () => ({}) },
+    lastValues: { default: () => ({}) },
+    isCompare: { type: Boolean, default: false },
     parentValues: { default: () => ({}) },
     labelWidth: { default: "200px" },
     disabled: { type: Boolean, default: false },
@@ -2505,6 +2780,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const tMagicForm = ref();
     const initialized = ref(false);
     const values = ref({});
+    const lastValuesProcessed = ref({});
     const fields = /* @__PURE__ */ new Map();
     const requestFuc = getConfig("request");
     const formState = reactive({
@@ -2512,8 +2788,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       popperClass: props.popperClass,
       config: props.config,
       initValues: props.initValues,
+      isCompare: props.isCompare,
+      lastValues: props.lastValues,
       parentValues: props.parentValues,
       values,
+      lastValuesProcessed,
       $emit: emit,
       fields,
       setField: (prop, field) => fields.set(prop, field),
@@ -2530,6 +2809,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     });
     watchEffect(() => {
       formState.initValues = props.initValues;
+      formState.lastValues = props.lastValues;
+      formState.isCompare = props.isCompare;
       formState.config = props.config;
       formState.keyProp = props.keyProp;
       formState.popperClass = props.popperClass;
@@ -2547,8 +2828,17 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           config: props.config
         }).then((value) => {
           values.value = value;
-          initialized.value = true;
+          initialized.value = !props.isCompare;
         });
+        if (props.isCompare) {
+          initValue(formState, {
+            initValues: props.lastValues,
+            config: props.config
+          }).then((value) => {
+            lastValuesProcessed.value = value;
+            initialized.value = true;
+          });
+        }
       },
       { immediate: true }
     );
@@ -2557,6 +2847,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
     expose({
       values,
+      lastValuesProcessed,
       formState,
       initialized,
       changeHandler,
@@ -2599,11 +2890,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               key: item[__props.keyProp] ?? index,
               config: item,
               model: values.value,
+              "last-values": lastValuesProcessed.value,
+              "is-compare": __props.isCompare,
               "label-width": item.labelWidth || __props.labelWidth,
               "step-active": __props.stepActive,
               size: __props.size,
               onChange: changeHandler
-            }, null, 8, ["disabled", "config", "model", "label-width", "step-active", "size"]);
+            }, null, 8, ["disabled", "config", "model", "last-values", "is-compare", "label-width", "step-active", "size"]);
           }), 128)) : createCommentVNode("", true)
         ]),
         _: 1