@juzhenfe/page-model 3.9.24 → 3.9.26

package/dist/index.es.js

@@ -187,8 +187,8 @@ const throttle$1 = (fn, interval = 300) => {
     }
   };
 };
-const RANDOM_RANGE = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_=";
-const RANDOM_RANGE_LENGTH = 54;
+const RANDOM_RANGE = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_";
+const RANDOM_RANGE_LENGTH = 53;
 const randomStr = (len = 16) => {
   return Array(len).fill(0).map((_, index2) => {
     return RANDOM_RANGE[Math.floor(Math.random() * RANDOM_RANGE_LENGTH)];
@@ -217,11 +217,11 @@ function retryFunc(fn, isCanExecute, retryTimes = 3, interval = 100) {
     });
   };
 }
-const _hoisted_1$q = { class: "scenes-tab" };
+const _hoisted_1$s = { class: "scenes-tab" };
 const __default__$n = {
   name: "ScenesTab"
 };
-const _sfc_main$P = defineComponent({
+const _sfc_main$R = defineComponent({
   ...__default__$n,
   setup(__props, { expose: __expose }) {
     const getValue = () => {
@@ -231,7 +231,7 @@ const _sfc_main$P = defineComponent({
       getValue
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q);
+      return openBlock(), createElementBlock("div", _hoisted_1$s);
     };
   }
 });
@@ -239,7 +239,7 @@ var index_vue_vue_type_style_index_0_lang$c = "";
 const __default__$m = {
   name: "NormalTab"
 };
-const _sfc_main$O = defineComponent({
+const _sfc_main$Q = defineComponent({
   ...__default__$m,
   props: {
     panes: {},
@@ -1035,7 +1035,7 @@ var index_vue_vue_type_style_index_0_lang$b = "";
 const __default__$l = {
   name: "TopTabs"
 };
-const _sfc_main$N = defineComponent({
+const _sfc_main$P = defineComponent({
   ...__default__$l,
   props: {
     tabs: {},
@@ -1056,12 +1056,12 @@ const _sfc_main$N = defineComponent({
     const tabComponent = computed(() => {
       if (props.tabs.useScene) {
         return {
-          component: _sfc_main$P,
+          component: _sfc_main$R,
           props: props.tabs.sceneTab
         };
       } else {
         return {
-          component: _sfc_main$O,
+          component: _sfc_main$Q,
           props: {
             panes: props.tabs.panes,
             props: props.tabs.props
@@ -1676,9 +1676,51 @@ var _export_sfc$1 = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$M = defineComponent({
+const _sfc_main$O = defineComponent({
   name: "ArrowDownBold"
 });
+const _hoisted_1$r = {
+  class: "icon",
+  width: "200",
+  height: "200",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$m = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M104.704 338.752a64 64 0 0190.496 0l316.8 316.8 316.8-316.8a64 64 0 0190.496 90.496L557.248 791.296a64 64 0 01-90.496 0L104.704 429.248a64 64 0 010-90.496z"
+}, null, -1);
+const _hoisted_3$l = [
+  _hoisted_2$m
+];
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$r, _hoisted_3$l);
+}
+var arrowDownBold = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["render", _sfc_render$g]]);
+const _sfc_main$N = defineComponent({
+  name: "ArrowDown"
+});
+const _hoisted_1$q = {
+  class: "icon",
+  width: "200",
+  height: "200",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$l = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 00-42.752 0 29.12 29.12 0 000 41.6L489.664 714.24a32 32 0 0044.672 0l340.288-331.712a29.12 29.12 0 000-41.728 30.592 30.592 0 00-42.752 0z"
+}, null, -1);
+const _hoisted_3$k = [
+  _hoisted_2$l
+];
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$q, _hoisted_3$k);
+}
+var arrowDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["render", _sfc_render$f]]);
+const _sfc_main$M = defineComponent({
+  name: "CaretBottom"
+});
 const _hoisted_1$p = {
   class: "icon",
   width: "200",
@@ -1688,7 +1730,7 @@ const _hoisted_1$p = {
 };
 const _hoisted_2$k = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M104.704 338.752a64 64 0 0190.496 0l316.8 316.8 316.8-316.8a64 64 0 0190.496 90.496L557.248 791.296a64 64 0 01-90.496 0L104.704 429.248a64 64 0 010-90.496z"
+  d: "M192 384l320 384 320-384z"
 }, null, -1);
 const _hoisted_3$j = [
   _hoisted_2$k
@@ -1696,9 +1738,9 @@ const _hoisted_3$j = [
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$p, _hoisted_3$j);
 }
-var arrowDownBold = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["render", _sfc_render$e]]);
+var caretBottom = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["render", _sfc_render$e]]);
 const _sfc_main$L = defineComponent({
-  name: "ArrowDown"
+  name: "CaretRight"
 });
 const _hoisted_1$o = {
   class: "icon",
@@ -1709,7 +1751,7 @@ const _hoisted_1$o = {
 };
 const _hoisted_2$j = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 00-42.752 0 29.12 29.12 0 000 41.6L489.664 714.24a32 32 0 0044.672 0l340.288-331.712a29.12 29.12 0 000-41.728 30.592 30.592 0 00-42.752 0z"
+  d: "M384 192v640l384-320.064z"
 }, null, -1);
 const _hoisted_3$i = [
   _hoisted_2$j
@@ -1717,9 +1759,9 @@ const _hoisted_3$i = [
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$o, _hoisted_3$i);
 }
-var arrowDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["render", _sfc_render$d]]);
+var caretRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["render", _sfc_render$d]]);
 const _sfc_main$K = defineComponent({
-  name: "CaretBottom"
+  name: "CaretTop"
 });
 const _hoisted_1$n = {
   class: "icon",
@@ -1730,7 +1772,7 @@ const _hoisted_1$n = {
 };
 const _hoisted_2$i = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M192 384l320 384 320-384z"
+  d: "M512 320L192 704h639.936z"
 }, null, -1);
 const _hoisted_3$h = [
   _hoisted_2$i
@@ -1738,9 +1780,9 @@ const _hoisted_3$h = [
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$n, _hoisted_3$h);
 }
-var caretBottom = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["render", _sfc_render$c]]);
+var caretTop = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["render", _sfc_render$c]]);
 const _sfc_main$J = defineComponent({
-  name: "CaretRight"
+  name: "CirclePlusFilled"
 });
 const _hoisted_1$m = {
   class: "icon",
@@ -1751,7 +1793,7 @@ const _hoisted_1$m = {
 };
 const _hoisted_2$h = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M384 192v640l384-320.064z"
+  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-38.4 409.6H326.4a38.4 38.4 0 100 76.8h147.2v147.2a38.4 38.4 0 0076.8 0V550.4h147.2a38.4 38.4 0 000-76.8H550.4V326.4a38.4 38.4 0 10-76.8 0v147.2z"
 }, null, -1);
 const _hoisted_3$g = [
   _hoisted_2$h
@@ -1759,9 +1801,9 @@ const _hoisted_3$g = [
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$m, _hoisted_3$g);
 }
-var caretRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["render", _sfc_render$b]]);
+var circlePlusFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["render", _sfc_render$b]]);
 const _sfc_main$I = defineComponent({
-  name: "CaretTop"
+  name: "CirclePlus"
 });
 const _hoisted_1$l = {
   class: "icon",
@@ -1772,17 +1814,27 @@ const _hoisted_1$l = {
 };
 const _hoisted_2$g = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M512 320L192 704h639.936z"
+  d: "M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"
 }, null, -1);
-const _hoisted_3$f = [
-  _hoisted_2$g
+const _hoisted_3$f = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M480 672V352a32 32 0 1164 0v320a32 32 0 01-64 0z"
+}, null, -1);
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
+}, null, -1);
+const _hoisted_5$3 = [
+  _hoisted_2$g,
+  _hoisted_3$f,
+  _hoisted_4$5
 ];
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$l, _hoisted_3$f);
+  return openBlock(), createElementBlock("svg", _hoisted_1$l, _hoisted_5$3);
 }
-var caretTop = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["render", _sfc_render$a]]);
+var circlePlus = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["render", _sfc_render$a]]);
 const _sfc_main$H = defineComponent({
-  name: "CirclePlusFilled"
+  name: "CloseBold"
 });
 const _hoisted_1$k = {
   class: "icon",
@@ -1793,7 +1845,7 @@ const _hoisted_1$k = {
 };
 const _hoisted_2$f = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-38.4 409.6H326.4a38.4 38.4 0 100 76.8h147.2v147.2a38.4 38.4 0 0076.8 0V550.4h147.2a38.4 38.4 0 000-76.8H550.4V326.4a38.4 38.4 0 10-76.8 0v147.2z"
+  d: "M195.2 195.2a64 64 0 0190.496 0L512 421.504 738.304 195.2a64 64 0 0190.496 90.496L602.496 512 828.8 738.304a64 64 0 01-90.496 90.496L512 602.496 285.696 828.8a64 64 0 01-90.496-90.496L421.504 512 195.2 285.696a64 64 0 010-90.496z"
 }, null, -1);
 const _hoisted_3$e = [
   _hoisted_2$f
@@ -1801,9 +1853,9 @@ const _hoisted_3$e = [
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$k, _hoisted_3$e);
 }
-var circlePlusFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["render", _sfc_render$9]]);
+var closeBold = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["render", _sfc_render$9]]);
 const _sfc_main$G = defineComponent({
-  name: "CirclePlus"
+  name: "Filter"
 });
 const _hoisted_1$j = {
   class: "icon",
@@ -1814,27 +1866,17 @@ const _hoisted_1$j = {
 };
 const _hoisted_2$e = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"
-}, null, -1);
-const _hoisted_3$d = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "M480 672V352a32 32 0 1164 0v320a32 32 0 01-64 0z"
-}, null, -1);
-const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
+  d: "M384 523.392V928a32 32 0 0046.336 28.608l192-96A32 32 0 00640 832V523.392l280.768-343.104a32 32 0 10-49.536-40.576l-288 352A32 32 0 00576 512v300.224l-128 64V512a32 32 0 00-7.232-20.288L195.52 192H704a32 32 0 100-64H128a32 32 0 00-24.768 52.288L384 523.392z"
 }, null, -1);
-const _hoisted_5$3 = [
-  _hoisted_2$e,
-  _hoisted_3$d,
-  _hoisted_4$5
+const _hoisted_3$d = [
+  _hoisted_2$e
 ];
 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$j, _hoisted_5$3);
+  return openBlock(), createElementBlock("svg", _hoisted_1$j, _hoisted_3$d);
 }
-var circlePlus = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["render", _sfc_render$8]]);
+var filter = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["render", _sfc_render$8]]);
 const _sfc_main$F = defineComponent({
-  name: "Filter"
+  name: "Grid"
 });
 const _hoisted_1$i = {
   class: "icon",
@@ -1845,7 +1887,7 @@ const _hoisted_1$i = {
 };
 const _hoisted_2$d = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M384 523.392V928a32 32 0 0046.336 28.608l192-96A32 32 0 00640 832V523.392l280.768-343.104a32 32 0 10-49.536-40.576l-288 352A32 32 0 00576 512v300.224l-128 64V512a32 32 0 00-7.232-20.288L195.52 192H704a32 32 0 100-64H128a32 32 0 00-24.768 52.288L384 523.392z"
+  d: "M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z"
 }, null, -1);
 const _hoisted_3$c = [
   _hoisted_2$d
@@ -1853,9 +1895,9 @@ const _hoisted_3$c = [
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_3$c);
 }
-var filter = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["render", _sfc_render$7]]);
+var grid = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["render", _sfc_render$7]]);
 const _sfc_main$E = defineComponent({
-  name: "Grid"
+  name: "Loading"
 });
 const _hoisted_1$h = {
   class: "icon",
@@ -1866,7 +1908,7 @@ const _hoisted_1$h = {
 };
 const _hoisted_2$c = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M640 384v256H384V384h256zm64 0h192v256H704V384zm-64 512H384V704h256v192zm64 0V704h192v192H704zm-64-768v192H384V128h256zm64 0h192v192H704V128zM320 384v256H128V384h192zm0 512H128V704h192v192zm0-768v192H128V128h192z"
+  d: "M512 64a32 32 0 0132 32v192a32 32 0 01-64 0V96a32 32 0 0132-32zm0 640a32 32 0 0132 32v192a32 32 0 11-64 0V736a32 32 0 0132-32zm448-192a32 32 0 01-32 32H736a32 32 0 110-64h192a32 32 0 0132 32zm-640 0a32 32 0 01-32 32H96a32 32 0 010-64h192a32 32 0 0132 32zM195.2 195.2a32 32 0 0145.248 0L376.32 331.008a32 32 0 01-45.248 45.248L195.2 240.448a32 32 0 010-45.248zm452.544 452.544a32 32 0 0145.248 0L828.8 783.552a32 32 0 01-45.248 45.248L647.744 692.992a32 32 0 010-45.248zM828.8 195.264a32 32 0 010 45.184L692.992 376.32a32 32 0 01-45.248-45.248l135.808-135.808a32 32 0 0145.248 0zm-452.544 452.48a32 32 0 010 45.248L240.448 828.8a32 32 0 01-45.248-45.248l135.808-135.808a32 32 0 0145.248 0z"
 }, null, -1);
 const _hoisted_3$b = [
   _hoisted_2$c
@@ -1874,7 +1916,7 @@ const _hoisted_3$b = [
 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_3$b);
 }
-var grid = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["render", _sfc_render$6]]);
+var loading = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["render", _sfc_render$6]]);
 const _sfc_main$D = defineComponent({
   name: "QuestionFilled"
 });
@@ -6771,6 +6813,9 @@ class TableManager extends IManager {
     __publicField(this, "sortParams", {});
     __publicField(this, "randomRowKey", null);
     __publicField(this, "totalEls", []);
+    __publicField(this, "focusCellKey");
+    __publicField(this, "currentRow");
+    __publicField(this, "currentColumn");
     __publicField(this, "radioData", null);
     __publicField(this, "currentRenderTableEls");
     __publicField(this, "innerFilters", null);
@@ -6803,8 +6848,8 @@ class TableManager extends IManager {
       this.tableRef = markRaw(tableRef);
     }
   }
-  updateLoading(loading) {
-    this.loadingData = loading;
+  updateLoading(loading2) {
+    this.loadingData = loading2;
   }
   getReqParams() {
     return {
@@ -6859,15 +6904,23 @@ class TableManager extends IManager {
     let noRepeatSelection = Object.keys(_selectionMap).map((rowKey2) => {
       return selection[_selectionMap[rowKey2]];
     });
-    const { adds, dels, upds } = compareTwoList(this.currentPageSelection, noRepeatSelection, rowKey);
+    const { adds, dels, upds } = compareTwoList(
+      this.currentPageSelection,
+      noRepeatSelection,
+      rowKey
+    );
     dels.forEach((item) => {
-      const delIndex = this.selection.findIndex((a) => a[rowKey] === item[rowKey]);
+      const delIndex = this.selection.findIndex(
+        (a) => a[rowKey] === item[rowKey]
+      );
       if (delIndex !== -1) {
         this.selection.splice(delIndex, 1);
       }
     });
     upds.forEach((item) => {
-      const updIndex = this.selection.findIndex((a) => a[rowKey] === item[rowKey]);
+      const updIndex = this.selection.findIndex(
+        (a) => a[rowKey] === item[rowKey]
+      );
       if (updIndex !== -1) {
         this.selection[updIndex] = item;
       }
@@ -6889,7 +6942,11 @@ class TableManager extends IManager {
     } else {
       this.tableProps = {};
     }
-    this.tableProps = merge(cloneDeep(DEFAULT_TABLE_PROPS), oldTableProps, this.tableProps);
+    this.tableProps = merge(
+      cloneDeep(DEFAULT_TABLE_PROPS),
+      oldTableProps,
+      this.tableProps
+    );
     this.size = ((_a = this.tableProps) == null ? void 0 : _a.size) || ((_b = this.config) == null ? void 0 : _b.size) || "default";
   }
   updateEvents() {
@@ -6927,7 +6984,9 @@ class TableManager extends IManager {
         this.tableEvents["rowClick"] = function(row, column, event) {
           _rowClick == null ? void 0 : _rowClick.call(this, row, column, event);
           const currentPageSelection = this.currentPageSelection;
-          const findIndex = currentPageSelection.findIndex((item) => item === row);
+          const findIndex = currentPageSelection.findIndex(
+            (item) => item === row
+          );
           const selectList = [...currentPageSelection];
           if (findIndex === -1) {
             selectList.push(row);
@@ -6955,7 +7014,11 @@ class TableManager extends IManager {
       _sortChange == null ? void 0 : _sortChange.call(this, sort2);
       const index2 = _this.sortOrders.findIndex((val) => val === sort2.order);
       if (index2 !== -1) {
-        const elItems = _this.context.JZUtils.findDataFromTree(_this.table.els, "prop", sort2.prop);
+        const elItems = _this.context.JZUtils.findDataFromTree(
+          _this.table.els,
+          "prop",
+          sort2.prop
+        );
         if (elItems.length) {
           const sortValues = elItems.slice(-1)[0].sortValues;
           _this.sortParams = sortValues[index2] || {};
@@ -6972,7 +7035,24 @@ class TableManager extends IManager {
   }
   composeTableCellKey(columnKey, rowIndex) {
     const currentPage = this.currentPage;
-    return `${columnKey}_${currentPage}_${rowIndex}`;
+    return `column-${columnKey}_${currentPage}_${rowIndex}`;
+  }
+  blurCell(blurRowData, blurColumn) {
+    if (this.focusCellKey) {
+      const cellEle = document.querySelector(`#${this.focusCellKey}`);
+      cellEle.setAttribute("data-focus", "false");
+      if (cellEle.getAttribute("data-edit") === "true") {
+        const tableEl = this.currentRenderTableEls.find((el) => el._key === blurColumn.columnKey);
+        this.restoreCellValue(blurRowData, this.focusCellKey, tableEl.editData.prop || tableEl.prop);
+      }
+      this.closeCellEditing(this.focusCellKey);
+    }
+  }
+  focusCell(cell) {
+    if (this.focusCellKey) {
+      let focusCell = cell != null ? cell : document.querySelector(`#${this.focusCellKey}`);
+      focusCell.setAttribute("data-focus", "true");
+    }
   }
   patchTableEditable() {
     if (!this.table.editable) {
@@ -6990,27 +7070,64 @@ class TableManager extends IManager {
         return false;
       }
       const rowIndex = cellInnerContainer.getAttribute("data-index");
-      const key = this.composeTableCellKey(column.columnKey, rowIndex);
-      this.setCellEditing(key, column.columnKey);
-      this.saveRowData(key, row);
+      const cellKey = this.composeTableCellKey(column.columnKey, rowIndex);
+      if (this.focusCellKey !== cellKey) {
+        this.blurCell(this.currentRow, this.currentColumn);
+        cell.id = this.focusCellKey = cellKey;
+        this.focusCell(cell);
+        return false;
+      }
+      this.currentRow = row;
+      this.currentColumn = column;
+      this.setCellEditing(cellKey);
+      this.saveRowData(cellKey, row);
     }.bind(this);
   }
-  setCellEditing(mapKey, valueKey) {
-    const value = this.editableOpen.get(mapKey) || {};
-    value[valueKey] = true;
-    this.editableOpen.set(mapKey, value);
+  setCellEditing(cellKey) {
+    this.editableOpen.set(cellKey, true);
+    const cellEle = document.querySelector(`#${this.focusCellKey}`);
+    cellEle.setAttribute("data-edit", "true");
+    nextTick(() => {
+      var _a;
+      (_a = cellEle.querySelector("input")) == null ? void 0 : _a.focus();
+    });
+  }
+  closeCellEditing(cellKey) {
+    this.editableOpen.set(cellKey, false);
+    const cellEle = document.querySelector(`#${this.focusCellKey}`);
+    cellEle.setAttribute("data-edit", "false");
   }
-  saveRowData(key, data) {
-    this.editableData.set(key, JSON.parse(JSON.stringify(data)));
+  saveRowData(cellKey, data) {
+    this.editableData.set(cellKey, JSON.parse(JSON.stringify(data)));
   }
-  closeCellEditing(mapKey, valueKey) {
-    const value = this.editableOpen.get(mapKey) || {};
-    value[valueKey] = false;
-    this.editableOpen.set(mapKey, value);
+  clearRowData(cellKey) {
+    this.editableData.delete(cellKey);
+  }
+  setRowUpdateLoading(cellKey, loading2) {
+    this.editableOpen.set(`${cellKey}-loading`, loading2);
+  }
+  restoreCellValue(row, cellKey, restoreKey) {
+    const originForm = this.editableData.get(cellKey);
+    row[restoreKey] = originForm[restoreKey];
+  }
+  resetTableEdit() {
+    if (this.table.editable) {
+      if (this.focusCellKey) {
+        this.blurCell(this.currentRow, this.currentColumn);
+      }
+      this.editableData.clear();
+      this.editableOpen.clear();
+      this.currentRow = null;
+      this.currentColumn = null;
+      this.focusCellKey = null;
+    }
   }
   updatePagination() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    this.pagination = merge(cloneDeep(DEFAULT_PAGINATION_CONFIG), (_b = (_a = this.table) == null ? void 0 : _a.pagination) != null ? _b : {});
+    this.pagination = merge(
+      cloneDeep(DEFAULT_PAGINATION_CONFIG),
+      (_b = (_a = this.table) == null ? void 0 : _a.pagination) != null ? _b : {}
+    );
     this.pageSize = (_f = (_d = this.pagination.pageSize) != null ? _d : (_c = this.pagination.pageSizes) == null ? void 0 : _c[0]) != null ? _f : (_e = DEFAULT_PAGINATION_CONFIG.pageSizes) == null ? void 0 : _e[0];
     this.pagination.pageSizes = (_i = (_h = (_g = this.table) == null ? void 0 : _g.pagination) == null ? void 0 : _h.pageSizes) != null ? _i : DEFAULT_PAGINATION_CONFIG.pageSizes;
   }
@@ -7093,7 +7210,9 @@ class TableManager extends IManager {
   }
   _syncRadioData() {
     if (this.radioData) {
-      const data = this.tableData.find((a) => a[this.rowKey] === this.radioData[this.rowKey]);
+      const data = this.tableData.find(
+        (a) => a[this.rowKey] === this.radioData[this.rowKey]
+      );
       if (data) {
         this.setRadioData(data);
       }
@@ -7113,7 +7232,10 @@ class TableManager extends IManager {
       }
       const loadXlsxStyleResult = await JZUtils.loadResource(
         "xlsx.full.min.js",
-        ["http://cdn-static.juzhentech.com/xlsx-style@0.8.13/", "/scripts/xlsx-style/"],
+        [
+          "http://cdn-static.juzhentech.com/xlsx-style@0.8.13/",
+          "/scripts/xlsx-style/"
+        ],
         "js"
       );
       return loadXlsxResult && loadXlsxStyleResult;
@@ -7195,7 +7317,11 @@ class TableManager extends IManager {
       };
       var sheet = window.oXlsx.utils.aoa_to_sheet(excelData);
       if (typeof ((_c = this.table.xlsx) == null ? void 0 : _c.mergeFn) === "function") {
-        sheet["!merges"] = this.table.xlsx.mergeFn.call(this, exportData, exportEls);
+        sheet["!merges"] = this.table.xlsx.mergeFn.call(
+          this,
+          exportData,
+          exportEls
+        );
       }
       Object.keys(sheet).forEach((colKey) => {
         if (!colKey[0].match(/\w/)) {
@@ -7339,11 +7465,15 @@ const _hoisted_3$4 = {
   key: 0,
   class: "el-table-cell_editable"
 };
-const _hoisted_4$3 = {
+const _hoisted_4$3 = { class: "el-table-cell_editable-inputer" };
+const _hoisted_5$2 = { class: "el-table-cell_editable-buttons" };
+const _hoisted_6$2 = ["onClick"];
+const _hoisted_7$2 = ["onClick"];
+const _hoisted_8 = {
   key: 1,
   class: "empty-edit"
 };
-const _hoisted_5$2 = { key: 0 };
+const _hoisted_9 = { key: 0 };
 const __default__$g = {
   name: "TableColumn"
 };
@@ -7358,8 +7488,14 @@ const _sfc_main$p = defineComponent({
     const tableManager = computed(() => {
       return props.context;
     });
-    const onSaveEditContent = async (row, mapKey, column) => {
-      var _a, _b;
+    const onUpdateTableCellModelValue = (row, prop, value) => {
+      row[prop] = value;
+    };
+    const onSaveEditContent = async (row, cellKey, column) => {
+      var _a;
+      if (tableManager.value.editableOpen.get(`${cellKey}-loading`)) {
+        return;
+      }
       const manager = tableManager.value.manager;
       let submitData = await manager.getSubmitFormData(row, false);
       if (submitData === false) {
@@ -7374,40 +7510,44 @@ const _sfc_main$p = defineComponent({
         }
       }
       if (submitData === false) {
+        onCancelEditContent(row, cellKey, column.editData.prop || column.prop);
         return false;
       }
       let updateResult;
-      if ((_b = column.editData) == null ? void 0 : _b.api) {
-        let api = typeof column.editData.api === "function" ? column.editData.api.call(tableManager, submitData) : column.editData.api;
-        updateResult = await manager.baseUpdDataRequest(
-          api,
-          column.editData.method || tableManager.value.config.updMethod,
-          submitData
-        );
-      } else {
-        updateResult = await manager.postUpdDataRequest(submitData);
-      }
-      if (updateResult) {
-        props.context.closeCellEditing(mapKey, column._key);
-      }
-    };
-    const onCellDataChange = (isShowEditable, row, mapKey, column) => {
-      if (isShowEditable) {
-        onSaveEditContent(row, mapKey, column);
+      props.context.setRowUpdateLoading(cellKey, true);
+      try {
+        if (column.editData.api) {
+          let api = typeof column.editData.api === "function" ? column.editData.api.call(tableManager, submitData) : column.editData.api;
+          updateResult = await manager.baseUpdDataRequest(
+            api,
+            column.editData.method || tableManager.value.config.updMethod,
+            submitData
+          );
+        } else {
+          updateResult = await manager.postUpdDataRequest(submitData);
+        }
+        if (updateResult) {
+          props.context.closeCellEditing(cellKey);
+        } else {
+          onCancelEditContent(row, cellKey, column.editData.prop || column.prop);
+          ElMessage.error("\u66F4\u65B0\u5931\u8D25!");
+        }
+      } catch (error) {
+      } finally {
+        props.context.setRowUpdateLoading(cellKey, false);
       }
     };
-    const onCancelEditContent = (row, mapKey, valueKey) => {
-      props.context.closeCellEditing(mapKey, valueKey);
-      const originForm = tableManager.value.editableData.get(mapKey);
-      const el = props.els.find((a) => a._key === valueKey);
-      if (el.prop) {
-        row[el.prop] = originForm[el.prop];
+    const onCancelEditContent = (row, cellKey, restoreKey) => {
+      if (tableManager.value.editableOpen.get(`${cellKey}-loading`)) {
+        return;
       }
+      props.context.closeCellEditing(cellKey);
+      props.context.restoreCellValue(row, cellKey, restoreKey);
+      props.context.clearRowData(cellKey);
     };
     return (_ctx, _cache) => {
       const _component_el_icon = resolveComponent("el-icon");
       const _component_TableColumn = resolveComponent("TableColumn");
-      const _component_el_button = resolveComponent("el-button");
       const _component_el_table_column = resolveComponent("el-table-column");
       return openBlock(true), createElementBlock(Fragment, null, renderList(props.els, (column, index2) => {
         return openBlock(), createBlock(_component_el_table_column, mergeProps({
@@ -7433,91 +7573,99 @@ const _sfc_main$p = defineComponent({
               }, 1032, ["title"])) : createCommentVNode("", true)
             ])
           ]),
-          default: withCtx(({ row, $index, column: columnEl }) => {
-            var _a;
-            return [
-              column.children ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                column.children ? (openBlock(), createBlock(_component_TableColumn, {
-                  key: 0,
-                  els: column.children,
-                  context: props.context
-                }, null, 8, ["els", "context"])) : createCommentVNode("", true)
-              ], 64)) : (openBlock(), createElementBlock("div", {
-                key: 1,
-                "data-index": $index,
-                editable: column.editData ? 1 : 0,
-                class: normalizeClass([
-                  "el-table-cell_inner",
-                  column.showRowNumbers != null ? `show-${column.showRowNumbers}` : ""
-                ])
-              }, [
-                column.showEdit || ((_a = tableManager.value.editableOpen.get(
-                  tableManager.value.composeTableCellKey(columnEl.columnKey, $index)
-                )) == null ? void 0 : _a[column._key]) ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
-                  column.editData ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          default: withCtx(({ row, $index, column: columnEl }) => [
+            column.children ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              column.children ? (openBlock(), createBlock(_component_TableColumn, {
+                key: 0,
+                els: column.children,
+                context: props.context
+              }, null, 8, ["els", "context"])) : createCommentVNode("", true)
+            ], 64)) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              "data-index": $index,
+              editable: column.editData ? 1 : 0,
+              class: normalizeClass([
+                "el-table-cell_inner",
+                column.showRowNumbers != null ? `show-${column.showRowNumbers}` : ""
+              ])
+            }, [
+              column.showEdit || tableManager.value.editableOpen.get(
+                tableManager.value.composeTableCellKey(columnEl.columnKey, $index)
+              ) ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+                column.editData ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createElementVNode("div", _hoisted_4$3, [
                     createVNode(_sfc_main$u, {
                       modelValue: row[column.editData.prop || column.prop],
-                      "onUpdate:modelValue": ($event) => row[column.editData.prop || column.prop] = $event,
                       renderFn: column.editData.renderFn,
                       context: props.context,
                       options: column.editData,
                       model: row,
-                      onChange: ($event) => onCellDataChange(
-                        column.showEdit,
+                      "onUpdate:modelValue": ($event) => onUpdateTableCellModelValue(
                         row,
-                        tableManager.value.composeTableCellKey(columnEl.columnKey, $index),
-                        column
+                        column.editData.prop || column.prop,
+                        $event
                       )
-                    }, null, 8, ["modelValue", "onUpdate:modelValue", "renderFn", "context", "options", "model", "onChange"]),
-                    !column.showEdit ? (openBlock(), createBlock(_component_el_button, {
+                    }, null, 8, ["modelValue", "renderFn", "context", "options", "model", "onUpdate:modelValue"])
+                  ]),
+                  createElementVNode("div", _hoisted_5$2, [
+                    !column.showEdit ? (openBlock(), createElementBlock("span", {
                       key: 0,
-                      size: "small",
-                      link: "",
-                      type: "primary",
-                      style: { "margin-left": "10px" },
+                      class: "el-table-cell_editable-button btn-save",
+                      title: "\u4FDD\u5B58",
                       onClick: ($event) => onSaveEditContent(
                         row,
                         tableManager.value.composeTableCellKey(columnEl.columnKey, $index),
                         column
                       )
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(" \u4FDD\u5B58 ")
-                      ]),
-                      _: 2
-                    }, 1032, ["onClick"])) : createCommentVNode("", true)
-                  ], 64)) : (openBlock(), createElementBlock("div", _hoisted_4$3, "\u8BE5\u5217\u672A\u8BBE\u7F6E\u7F16\u8F91\u7EC4\u4EF6")),
-                  !column.showEdit ? (openBlock(), createBlock(_component_el_button, {
-                    key: 2,
-                    size: "small",
-                    link: "",
-                    type: "primary",
-                    onClick: ($event) => onCancelEditContent(
-                      row,
-                      tableManager.value.composeTableCellKey(columnEl.columnKey, $index),
-                      column._key
-                    )
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(" \u53D6\u6D88 ")
-                    ]),
-                    _: 2
-                  }, 1032, ["onClick"])) : createCommentVNode("", true)
-                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  column.renderFn && $index !== -1 ? (openBlock(), createBlock(_sfc_main$q, {
-                    key: 0,
-                    "render-fn": column.renderFn,
-                    context: props.context,
-                    pure: "",
-                    row,
-                    index: $index
-                  }, null, 8, ["render-fn", "context", "row", "index"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    column.prop ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(row[column.prop]), 1)) : createCommentVNode("", true)
-                  ], 64))
+                    }, [
+                      createVNode(_component_el_icon, null, {
+                        default: withCtx(() => [
+                          tableManager.value.editableOpen.get(
+                            `${tableManager.value.composeTableCellKey(
+                              columnEl.columnKey,
+                              $index
+                            )}-loading`
+                          ) ? (openBlock(), createBlock(unref(loading), {
+                            key: 0,
+                            class: "el-table-cell_editable-icon-loading"
+                          })) : (openBlock(), createBlock(unref(select), { key: 1 }))
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ], 8, _hoisted_6$2)) : createCommentVNode("", true),
+                    !column.showEdit ? (openBlock(), createElementBlock("span", {
+                      key: 1,
+                      class: "el-table-cell_editable-button btn-cancel",
+                      title: "\u4FDD\u5B58",
+                      onClick: ($event) => onCancelEditContent(
+                        row,
+                        tableManager.value.composeTableCellKey(columnEl.columnKey, $index),
+                        column.editData.prop || column.prop
+                      )
+                    }, [
+                      createVNode(_component_el_icon, null, {
+                        default: withCtx(() => [
+                          createVNode(unref(closeBold))
+                        ]),
+                        _: 1
+                      })
+                    ], 8, _hoisted_7$2)) : createCommentVNode("", true)
+                  ])
+                ], 64)) : (openBlock(), createElementBlock("div", _hoisted_8, "\u8BE5\u5217\u672A\u8BBE\u7F6E\u7F16\u8F91\u7EC4\u4EF6"))
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                column.renderFn && $index !== -1 ? (openBlock(), createBlock(_sfc_main$q, {
+                  key: 0,
+                  "render-fn": column.renderFn,
+                  context: props.context,
+                  pure: "",
+                  row,
+                  index: $index
+                }, null, 8, ["render-fn", "context", "row", "index"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  column.prop ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(row[column.prop]), 1)) : createCommentVNode("", true)
                 ], 64))
-              ], 10, _hoisted_2$5))
-            ];
-          }),
+              ], 64))
+            ], 10, _hoisted_2$5))
+          ]),
           _: 2
         }, 1040, ["label", "prop", "width", "min-width", "fixed", "column-key"]);
       }), 128);
@@ -10965,6 +11113,7 @@ const _sfc_main$h = defineComponent({
       if (tableManager.currentPage !== current) {
         tableManager.currentPage = current;
         tableManager.refreshPage();
+        tableManager.resetTableEdit();
       }
     };
     const onSaveColumns = async (columns) => {
@@ -11312,8 +11461,8 @@ class FormManager extends IManager {
   updateFormRef(formRef) {
     this.formRef = markRaw(formRef);
   }
-  updateSubmitLoading(loading) {
-    this.submitLoading = loading;
+  updateSubmitLoading(loading2) {
+    this.submitLoading = loading2;
   }
   updateReflections(reflections) {
     this.updateReflectionsData(reflections);
@@ -12441,7 +12590,7 @@ const _sfc_main$9 = defineComponent({
         }
       }
     });
-    const loading = computed(() => {
+    const loading2 = computed(() => {
       var _a;
       return (_a = props.formManager) == null ? void 0 : _a.submitLoading;
     });
@@ -12467,7 +12616,7 @@ const _sfc_main$9 = defineComponent({
             createVNode(_component_el_button, {
               style: { "width": "80px" },
               type: "primary",
-              loading: loading.value,
+              loading: loading2.value,
               onClick: submit
             }, {
               default: withCtx(() => [
@@ -12544,7 +12693,7 @@ const _sfc_main$8 = defineComponent({
         }
       }
     });
-    const loading = computed(() => {
+    const loading2 = computed(() => {
       var _a;
       return (_a = props.formManager) == null ? void 0 : _a.submitLoading;
     });
@@ -12591,7 +12740,7 @@ const _sfc_main$8 = defineComponent({
                   createVNode(_component_el_button, {
                     style: { "width": "80px" },
                     type: "primary",
-                    loading: loading.value,
+                    loading: loading2.value,
                     onClick: submit
                   }, {
                     default: withCtx(() => [
@@ -13743,7 +13892,7 @@ const _sfc_main$4 = defineComponent({
             key: 0,
             class: normalizeClass(unref(createBEMName)("top-tabs"))
           }, [
-            hasTabs.value ? (openBlock(), createBlock(_sfc_main$N, {
+            hasTabs.value ? (openBlock(), createBlock(_sfc_main$P, {
               key: 0,
               tabs: uConfig.value.tabs,
               manager,
@@ -14722,7 +14871,7 @@ const defineEditableTable = function(config) {
   return reactive(config);
 };
 const name = "@juzhenfe/page-model";
-const version = "3.9.24";
+const version = "3.9.26";
 const types = "dist/main.d.ts";
 const main = "dist/index.umd.js";
 const keywords = [
@@ -14768,6 +14917,7 @@ const devDependencies = {
   "xlsx-style": "^0.8.13"
 };
 const dependencies = {
+  "@juzhenfe/page-model": "^3.9.25",
   interactjs: "^1.10.11",
   "lodash.clonedeep": "4.5.0",
   "lodash.isequal": "^4.5.0",