@tmagic/form 1.2.6 → 1.2.7

package/dist/tmagic-form.umd.cjs

@@ -1,14 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('lodash-es'), require('sortablejs'), require('@tmagic/utils'), require('lodash-es/cloneDeep'), require('lodash-es/isEqual')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', '@tmagic/design', 'lodash-es', 'sortablejs', '@tmagic/utils', 'lodash-es/cloneDeep', 'lodash-es/isEqual'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.design, global.lodashEs, global.Sortable, global.utils, global.cloneDeep, global.isEqual));
-})(this, (function (exports, vue, iconsVue, design, lodashEs, Sortable, utils, cloneDeep, isEqual) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('sortablejs'), require('@tmagic/utils'), require('lodash-es/cloneDeep')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'sortablejs', '@tmagic/utils', 'lodash-es/cloneDeep'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.Sortable, global.utils, global.cloneDeep));
+})(this, (function (exports, vue, iconsVue, lodashEs, design, Sortable, utils, cloneDeep) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
   const Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
   const cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
-  const isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
   const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -170,12 +169,20 @@
     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 = vue.defineComponent({
@@ -185,20 +192,29 @@
     ...__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 = vue.inject("mForm");
       const expand = vue.ref(false);
       const name = vue.computed(() => props.config.name || "");
+      const showDiff = vue.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 !lodashEs.isEqual(curValue, lastValue);
+      });
       const items = vue.computed(() => props.config.items);
       const itemProp = vue.computed(() => {
         let n = "";
@@ -244,6 +260,21 @@
       vue.watchEffect(() => {
         expand.value = props.expandMore;
       });
+      vue.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) => {
@@ -277,6 +308,7 @@
           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;
@@ -314,6 +346,8 @@
             key: key(__props.config),
             size: __props.size,
             model: __props.model,
+            "last-values": __props.lastValues,
+            "is-compare": __props.isCompare,
             config: __props.config,
             disabled: vue.unref(disabled),
             name: vue.unref(name),
@@ -321,8 +355,9 @@
             "step-active": __props.stepActive,
             "expand-more": expand.value,
             "label-width": vue.unref(itemLabelWidth),
-            onChange: onChangeHandler
-          }, null, 40, ["size", "model", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : vue.unref(type) && vue.unref(display$1) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            onChange: onChangeHandler,
+            onAddDiffCount
+          }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : vue.unref(type) && vue.unref(display$1) && !vue.unref(showDiff) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle(__props.config.tip ? "flex: 1" : ""),
               class: vue.normalizeClass({ hidden: `${vue.unref(itemLabelWidth)}` === "0" || !__props.config.text }),
@@ -333,7 +368,7 @@
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
                   innerHTML: vue.unref(type) === "checkbox" ? "" : __props.config.text
-                }, null, 8, _hoisted_1$b)
+                }, null, 8, _hoisted_1$c)
               ]),
               default: vue.withCtx(() => [
                 vue.unref(tooltip) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
@@ -349,7 +384,8 @@
                       name: vue.unref(name),
                       disabled: vue.unref(disabled),
                       prop: vue.unref(itemProp),
-                      onChange: onChangeHandler
+                      onChange: onChangeHandler,
+                      onAddDiffCount
                     }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
                   ]),
                   _: 1
@@ -361,7 +397,8 @@
                   name: vue.unref(name),
                   disabled: vue.unref(disabled),
                   prop: vue.unref(itemProp),
-                  onChange: onChangeHandler
+                  onChange: onChangeHandler,
+                  onAddDiffCount
                 }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
                 vue.unref(extra) ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 2,
@@ -390,11 +427,148 @@
               ]),
               _: 1
             })) : vue.createCommentVNode("", true)
-          ], 64)) : vue.unref(items) && vue.unref(display$1) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+          ], 64)) : vue.unref(type) && vue.unref(display$1) && vue.unref(showDiff) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+            vue.createVNode(vue.unref(design.TMagicFormItem), {
+              style: vue.normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
+              class: vue.normalizeClass({ hidden: `${vue.unref(itemLabelWidth)}` === "0" || !__props.config.text }),
+              prop: vue.unref(itemProp),
+              "label-width": vue.unref(itemLabelWidth),
+              rules: vue.unref(rule)
+            }, {
+              label: vue.withCtx(() => [
+                vue.createElementVNode("span", {
+                  innerHTML: vue.unref(type) === "checkbox" ? "" : __props.config.text
+                }, null, 8, _hoisted_5$4)
+              ]),
+              default: vue.withCtx(() => [
+                vue.unref(tooltip) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
+                  content: vue.withCtx(() => [
+                    vue.createElementVNode("div", { innerHTML: vue.unref(tooltip) }, null, 8, _hoisted_6$3)
+                  ]),
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+                      key: key(__props.config),
+                      size: __props.size,
+                      model: __props.lastValues,
+                      config: __props.config,
+                      name: vue.unref(name),
+                      disabled: vue.unref(disabled),
+                      prop: vue.unref(itemProp),
+                      onChange: onChangeHandler
+                    }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                  ]),
+                  _: 1
+                })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+                  key: key(__props.config),
+                  size: __props.size,
+                  model: __props.lastValues,
+                  config: __props.config,
+                  name: vue.unref(name),
+                  disabled: vue.unref(disabled),
+                  prop: vue.unref(itemProp),
+                  onChange: onChangeHandler
+                }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
+                vue.unref(extra) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 2,
+                  innerHTML: vue.unref(extra),
+                  class: "m-form-tip"
+                }, null, 8, _hoisted_7$3)) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            __props.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 0,
+              placement: "left"
+            }, {
+              content: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  innerHTML: __props.config.tip
+                }, null, 8, _hoisted_8$2)
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.WarningFilled))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            vue.createVNode(vue.unref(design.TMagicFormItem), {
+              style: vue.normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
+              class: vue.normalizeClass({ hidden: `${vue.unref(itemLabelWidth)}` === "0" || !__props.config.text }),
+              prop: vue.unref(itemProp),
+              "label-width": vue.unref(itemLabelWidth),
+              rules: vue.unref(rule)
+            }, {
+              label: vue.withCtx(() => [
+                vue.createElementVNode("span", {
+                  innerHTML: vue.unref(type) === "checkbox" ? "" : __props.config.text
+                }, null, 8, _hoisted_9$1)
+              ]),
+              default: vue.withCtx(() => [
+                vue.unref(tooltip) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
+                  content: vue.withCtx(() => [
+                    vue.createElementVNode("div", { innerHTML: vue.unref(tooltip) }, null, 8, _hoisted_10$1)
+                  ]),
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+                      key: key(__props.config),
+                      size: __props.size,
+                      model: __props.model,
+                      config: __props.config,
+                      name: vue.unref(name),
+                      disabled: vue.unref(disabled),
+                      prop: vue.unref(itemProp),
+                      onChange: onChangeHandler
+                    }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                  ]),
+                  _: 1
+                })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+                  key: key(__props.config),
+                  size: __props.size,
+                  model: __props.model,
+                  config: __props.config,
+                  name: vue.unref(name),
+                  disabled: vue.unref(disabled),
+                  prop: vue.unref(itemProp),
+                  onChange: onChangeHandler
+                }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
+                vue.unref(extra) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 2,
+                  innerHTML: vue.unref(extra),
+                  class: "m-form-tip"
+                }, null, 8, _hoisted_11)) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            __props.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 1,
+              placement: "left"
+            }, {
+              content: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  innerHTML: __props.config.tip
+                }, null, 8, _hoisted_12)
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.WarningFilled))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ], 64)) : vue.unref(items) && vue.unref(display$1) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 4 }, [
             (vue.unref(name) || vue.unref(name) === 0 ? __props.model[vue.unref(name)] : __props.model) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(items), (item) => {
               return vue.openBlock(), vue.createBlock(_component_Container, {
                 key: key(item),
                 model: vue.unref(name) || vue.unref(name) === 0 ? __props.model[vue.unref(name)] : __props.model,
+                "last-values": vue.unref(name) || vue.unref(name) === 0 ? __props.lastValues[vue.unref(name)] : __props.lastValues,
+                "is-compare": __props.isCompare,
                 config: item,
                 size: __props.size,
                 disabled: vue.unref(disabled),
@@ -402,11 +576,12 @@
                 "expand-more": expand.value,
                 "label-width": vue.unref(itemLabelWidth),
                 prop: vue.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)) : vue.createCommentVNode("", true)
           ], 64)) : vue.createCommentVNode("", true),
-          __props.config.expand && vue.unref(type) !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
+          __props.config.expand && vue.unref(type) !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               size: "small",
@@ -425,7 +600,7 @@
     }
   });
 
-  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"];
@@ -446,11 +621,13 @@
       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 = vue.inject("mForm");
@@ -479,6 +656,7 @@
           }
         );
       }
+      const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return (vue.unref(name) ? __props.model[vue.unref(name)] : __props.model) ? (vue.openBlock(), vue.createElementBlock("fieldset", {
           key: 0,
@@ -497,7 +675,7 @@
                 default: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: __props.config.legend
-                  }, null, 8, _hoisted_1$a),
+                  }, null, 8, _hoisted_1$b),
                   __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: __props.config.extra,
@@ -524,14 +702,17 @@
                 return vue.openBlock(), vue.createBlock(_sfc_main$v, {
                   key: key(item, index),
                   model: vue.unref(name) ? __props.model[vue.unref(name)] : __props.model,
+                  lastValues: vue.unref(name) ? __props.lastValues[vue.unref(name)] : __props.lastValues,
+                  "is-compare": __props.isCompare,
                   rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
                   config: item,
                   prop: __props.prop,
                   disabled: __props.disabled,
                   labelWidth: vue.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))
             ]),
             vue.createElementVNode("img", {
@@ -542,21 +723,24 @@
             return vue.openBlock(), vue.createBlock(_sfc_main$v, {
               key: key(item, index),
               model: vue.unref(name) ? __props.model[vue.unref(name)] : __props.model,
+              lastValues: vue.unref(name) ? __props.lastValues[vue.unref(name)] : __props.lastValues,
+              "is-compare": __props.isCompare,
               rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
               config: item,
               prop: __props.prop,
               labelWidth: vue.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)) : vue.createCommentVNode("", true)
         ], 4)) : vue.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__ */ vue.createTextVNode("\u4E0A\u79FB");
   const _hoisted_3$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u79FB");
   const _hoisted_4$4 = ["innerHTML"];
@@ -567,6 +751,8 @@
     ...__default__$t,
     props: {
       model: null,
+      lastValues: null,
+      isCompare: { type: Boolean },
       groupModel: null,
       config: null,
       labelWidth: null,
@@ -575,7 +761,7 @@
       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 = vue.inject("mForm");
@@ -620,8 +806,9 @@
         }
         return movable2;
       };
+      const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(design.TMagicIcon), {
               style: { "margin-right": "7px" },
@@ -701,18 +888,21 @@
             key: 0,
             config: vue.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"])) : vue.createCommentVNode("", true)
+            onChange: changeHandler,
+            onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
+          }, null, 8, ["config", "model", "lastValues", "is-compare", "labelWidth", "prop", "size", "disabled"])) : vue.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,
@@ -731,6 +921,8 @@
     ...__default__$s,
     props: {
       model: null,
+      lastValues: null,
+      isCompare: { type: Boolean },
       config: null,
       name: null,
       labelWidth: null,
@@ -738,7 +930,7 @@
       size: null,
       disabled: { type: Boolean }
     },
-    emits: ["change"],
+    emits: ["change", "addDiffCount"],
     setup(__props, { emit }) {
       const props = __props;
       const mForm = vue.inject("mForm");
@@ -802,8 +994,10 @@
           text: null
         }));
       };
+      const onAddDiffCount = () => emit("addDiffCount");
+      const getLastValues = (item, index) => item?.[index] || {};
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
           __props.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             innerHTML: __props.config.extra,
@@ -813,6 +1007,8 @@
             return vue.openBlock(), vue.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,
@@ -822,8 +1018,9 @@
               "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)),
           vue.unref(addable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 3,
@@ -852,7 +1049,7 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "clearfix" };
+  const _hoisted_1$8 = { class: "clearfix" };
   const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$3 = {
     key: 0,
@@ -867,6 +1064,8 @@
     ...__default__$r,
     props: {
       model: null,
+      lastValues: null,
+      isCompare: { type: Boolean },
       config: null,
       name: null,
       labelWidth: null,
@@ -874,7 +1073,7 @@
       size: null,
       disabled: { type: Boolean }
     },
-    emits: ["change"],
+    emits: ["change", "addDiffCount"],
     setup(__props, { emit }) {
       const props = __props;
       const mForm = vue.inject("mForm");
@@ -882,6 +1081,7 @@
       const items = vue.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 vue.unref(items) && vue.unref(items).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), {
           key: 0,
@@ -889,7 +1089,7 @@
           "body-style": { display: expand.value ? "block" : "none" }
         }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$7, [
+            vue.createElementVNode("div", _hoisted_1$8, [
               vue.createElementVNode("a", {
                 href: "javascript:",
                 style: { "width": "100%", "display": "block" },
@@ -920,12 +1120,15 @@
                       key: item[vue.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))
                 ]),
                 vue.createElementVNode("img", {
@@ -937,12 +1140,15 @@
                   key: item[vue.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))
             ])
           ]),
@@ -959,6 +1165,8 @@
     ...__default__$q,
     props: {
       model: null,
+      lastValues: null,
+      isCompare: { type: Boolean },
       config: null,
       labelWidth: null,
       expandMore: { type: Boolean },
@@ -967,25 +1175,29 @@
       prop: null,
       disabled: { type: Boolean }
     },
-    emits: ["change"],
+    emits: ["change", "addDiffCount"],
     setup(__props, { emit }) {
       const props = __props;
       const mForm = vue.inject("mForm");
       const display$1 = vue.computed(() => display(mForm, props.config.display, props));
       const changeHandler = () => emit("change", props.model);
+      const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCol), { span: __props.span }, {
           default: vue.withCtx(() => [
             vue.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"])), [
@@ -1002,6 +1214,8 @@
     ...__default__$p,
     props: {
       model: null,
+      lastValues: null,
+      isCompare: { type: Boolean },
       config: null,
       name: null,
       labelWidth: null,
@@ -1010,11 +1224,12 @@
       expandMore: { type: Boolean },
       disabled: { type: Boolean }
     },
-    emits: ["change"],
+    emits: ["change", "addDiffCount"],
     setup(__props, { emit }) {
       const props = __props;
       const mForm = vue.inject("mForm");
       const changeHandler = () => emit("change", props.name ? props.model[props.name] : props.model);
+      const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRow), { gutter: 10 }, {
           default: vue.withCtx(() => [
@@ -1026,11 +1241,14 @@
                 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
@@ -1046,13 +1264,15 @@
     ...__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 = vue.inject("mForm");
@@ -1067,6 +1287,7 @@
       const changeHandler = () => {
         emit("change", props.model);
       };
+      const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", null, [
           vue.createVNode(vue.unref(design.TMagicSteps), {
@@ -1094,12 +1315,15 @@
                     key: item[vue.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"])), [
                     [vue.vShow, active.value - 1 === index]
                   ]) : vue.createCommentVNode("", true)
                 ], 64);
@@ -1111,7 +1335,7 @@
     }
   });
 
-  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__ */ vue.createTextVNode("\u6DFB\u52A0");
@@ -1132,6 +1356,8 @@
     ...__default__$n,
     props: {
       model: null,
+      lastValues: { default: () => ({}) },
+      isCompare: { type: Boolean, default: false },
       config: null,
       name: null,
       prop: { default: "" },
@@ -1144,7 +1370,7 @@
       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;
@@ -1162,6 +1388,11 @@
           (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
         ) : props.model[modelName.value]
       );
+      const lastData = vue.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]);
@@ -1463,6 +1694,7 @@
         const { prop } = vue.toRefs(props);
         return `${prop.value}${prop.value ? "." : ""}${index + 1 + pagecontext.value * pagesize.value - 1}`;
       };
+      const onAddDiffCount = () => emit("addDiffCount");
       expose({
         toggleRowSelection
       });
@@ -1476,7 +1708,7 @@
             key: 0,
             style: { "color": "rgba(0, 0, 0, 0.45)" },
             innerHTML: __props.config.extra
-          }, null, 8, _hoisted_1$6)) : vue.createCommentVNode("", true),
+          }, null, 8, _hoisted_1$7)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_2$2, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
@@ -1490,6 +1722,7 @@
                   style: { "width": "100%" },
                   "row-key": __props.config.rowKey || "id",
                   data: vue.unref(data),
+                  lastData: vue.unref(lastData),
                   border: __props.config.border,
                   "max-height": __props.config.maxHeight,
                   "default-expand-all": true,
@@ -1618,9 +1851,12 @@
                               rules: column.rules,
                               config: makeConfig(column, scope.row),
                               model: scope.row,
+                              lastValues: vue.unref(lastData)[scope.$index],
+                              "is-compare": __props.isCompare,
                               size: __props.size,
-                              onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", __props.model[vue.unref(modelName)]))
-                            }, null, 8, ["disabled", "prop", "rules", "config", "model", "size"])) : vue.createCommentVNode("", true)
+                              onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", __props.model[vue.unref(modelName)])),
+                              onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                            }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : vue.createCommentVNode("", true)
                           ]),
                           _: 2
                         }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
@@ -1628,7 +1864,7 @@
                     }), 256))
                   ]),
                   _: 3
-                }, 8, ["row-key", "data", "border", "max-height"])) : vue.createCommentVNode("", true)
+                }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : vue.createCommentVNode("", true)
               ]),
               _: 3
             }, 8, ["disabled"]),
@@ -1639,7 +1875,7 @@
               type: "primary",
               disabled: __props.disabled,
               plain: "",
-              onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
+              onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
             }, {
               default: vue.withCtx(() => [
                 _hoisted_4$1
@@ -1703,7 +1939,7 @@
               type: "warning",
               disabled: __props.disabled,
               plain: "",
-              onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
+              onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
             }, {
               default: vue.withCtx(() => [
                 _hoisted_9
@@ -1728,6 +1964,7 @@
     }
   });
 
+  const _hoisted_1$6 = { class: "custom-tabs-label" };
   const __default__$m = vue.defineComponent({
     name: "MFormTabs"
   });
@@ -1735,6 +1972,8 @@
     ...__default__$m,
     props: {
       model: null,
+      lastValues: { default: () => ({}) },
+      isCompare: { type: Boolean, default: false },
       config: null,
       name: null,
       size: null,
@@ -1743,7 +1982,7 @@
       expandMore: { type: Boolean },
       disabled: { type: Boolean }
     },
-    emits: ["change"],
+    emits: ["change", "addDiffCount"],
     setup(__props, { emit }) {
       const props = __props;
       const uiComponent = design.getConfig("components").tabPane;
@@ -1771,6 +2010,7 @@
       };
       const mForm = vue.inject("mForm");
       const activeTabName = vue.ref(getActive(mForm, props, ""));
+      const diffCount = vue.ref({});
       const tabs = vue.computed(() => {
         if (props.config.dynamic) {
           if (!props.config.name)
@@ -1833,7 +2073,27 @@
           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 = vue.resolveComponent("el-badge");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTabs), {
           modelValue: activeTabName.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
@@ -1854,19 +2114,32 @@
                   label: filter(tab.title),
                   lazy: tab.lazy || false
                 }, {
+                  label: vue.withCtx(() => [
+                    vue.createElementVNode("span", _hoisted_1$6, [
+                      vue.createTextVNode(vue.toDisplayString(filter(tab.title)), 1),
+                      vue.createVNode(_component_el_badge, {
+                        hidden: !diffCount.value[tabIndex],
+                        value: diffCount.value[tabIndex],
+                        class: "diff-count-badge"
+                      }, null, 8, ["hidden", "value"])
+                    ])
+                  ]),
                   default: vue.withCtx(() => [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabItems(tab), (item) => {
                       return vue.openBlock(), vue.createBlock(_sfc_main$v, {
                         key: item[vue.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
@@ -2491,6 +2764,8 @@
     props: {
       config: { default: () => [] },
       initValues: { default: () => ({}) },
+      lastValues: { default: () => ({}) },
+      isCompare: { type: Boolean, default: false },
       parentValues: { default: () => ({}) },
       labelWidth: { default: "200px" },
       disabled: { type: Boolean, default: false },
@@ -2508,6 +2783,7 @@
       const tMagicForm = vue.ref();
       const initialized = vue.ref(false);
       const values = vue.ref({});
+      const lastValuesProcessed = vue.ref({});
       const fields = /* @__PURE__ */ new Map();
       const requestFuc = getConfig("request");
       const formState = vue.reactive({
@@ -2515,8 +2791,11 @@
         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),
@@ -2533,6 +2812,8 @@
       });
       vue.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;
@@ -2542,7 +2823,7 @@
       vue.watch(
         [() => props.config, () => props.initValues],
         ([config], [preConfig]) => {
-          if (!isEqual__default.default(vue.toRaw(config), vue.toRaw(preConfig))) {
+          if (!lodashEs.isEqual(vue.toRaw(config), vue.toRaw(preConfig))) {
             initialized.value = false;
           }
           initValue(formState, {
@@ -2550,8 +2831,17 @@
             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 }
       );
@@ -2560,6 +2850,7 @@
       };
       expose({
         values,
+        lastValuesProcessed,
         formState,
         initialized,
         changeHandler,
@@ -2602,11 +2893,13 @@
                 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)) : vue.createCommentVNode("", true)
           ]),
           _: 1