@tmagic/form 1.1.4 → 1.1.6

package/dist/tmagic-form.umd.js

@@ -129,20 +129,24 @@
     return rules.map((item) => {
       if (typeof item.validator === "function") {
         const fnc = item.validator;
-        item.validator = (rule, value, callback, source, options) => fnc({
-          rule,
-          value: props.config.names ? props.model : value,
-          callback,
-          source,
-          options
-        }, {
-          values: mForm?.initValues || {},
-          model: props.model,
-          parent: mForm?.parentValues || {},
-          formValue: mForm?.values || props.model,
-          prop: props.prop,
-          config: props.config
-        }, mForm);
+        item.validator = (rule, value, callback, source, options) => fnc(
+          {
+            rule,
+            value: props.config.names ? props.model : value,
+            callback,
+            source,
+            options
+          },
+          {
+            values: mForm?.initValues || {},
+            model: props.model,
+            parent: mForm?.parentValues || {},
+            formValue: mForm?.values || props.model,
+            prop: props.prop,
+            config: props.config
+          },
+          mForm
+        );
       }
       return item;
     });
@@ -319,7 +323,7 @@
   const _hoisted_2$7 = ["innerHTML"];
   const _hoisted_3$7 = ["innerHTML"];
   const _hoisted_4$6 = ["innerHTML"];
-  const _hoisted_5$4 = {
+  const _hoisted_5$5 = {
     key: 4,
     style: { "text-align": "center" }
   };
@@ -437,7 +441,7 @@
           }, null, 8, ["model", "config", "size", "step-active", "expand-more", "label-width", "prop", "onChange"]);
         }), 128)) : vue.createCommentVNode("", true)
       ], 64)) : vue.createCommentVNode("", true),
-      _ctx.config.expand && _ctx.type !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
+      _ctx.config.expand && _ctx.type !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$5, [
         vue.createVNode(_component_el_button, {
           text: "",
           onClick: _ctx.expandHandler
@@ -456,7 +460,7 @@
   const _hoisted_2$6 = ["innerHTML"];
   const _hoisted_3$6 = { key: 1 };
   const _hoisted_4$5 = ["innerHTML"];
-  const _hoisted_5$3 = ["innerHTML"];
+  const _hoisted_5$4 = ["innerHTML"];
   const _hoisted_6$2 = {
     key: 2,
     style: { "display": "flex" }
@@ -495,9 +499,12 @@
       };
       const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
       if (props.config.checkbox && name.value) {
-        vue.watch(() => props.model[name.value]?.value, () => {
-          emit("change", props.model);
-        });
+        vue.watch(
+          () => props.model[name.value]?.value,
+          () => {
+            emit("change", props.model);
+          }
+        );
       }
       return (_ctx, _cache) => {
         const _component_el_checkbox = vue.resolveComponent("el-checkbox");
@@ -538,7 +545,7 @@
               key: 0,
               innerHTML: __props.config.extra,
               class: "m-form-tip"
-            }, null, 8, _hoisted_5$3)) : vue.createCommentVNode("", true)
+            }, null, 8, _hoisted_5$4)) : vue.createCommentVNode("", true)
           ])),
           __props.config.schematic && vue.unref(show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [
             vue.createElementVNode("div", _hoisted_7$2, [
@@ -844,6 +851,7 @@
         }));
       };
       return {
+        Grid: iconsVue.Grid,
         addable,
         toggleMode,
         removeHandler,
@@ -861,7 +869,7 @@
     class: "el-table__empty-block"
   };
   const _hoisted_4$3 = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-table__empty-text" }, "\u6682\u65E0\u6570\u636E", -1);
-  const _hoisted_5$2 = [
+  const _hoisted_5$3 = [
     _hoisted_4$3
   ];
   const _hoisted_6$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0\u7EC4");
@@ -875,7 +883,7 @@
         innerHTML: _ctx.config.extra,
         style: { "color": "rgba(0, 0, 0, 0.45)" }
       }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true),
-      !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, _hoisted_5$2)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.model[_ctx.name], (item, index) => {
+      !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, _hoisted_5$3)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.model[_ctx.name], (item, index) => {
         return vue.openBlock(), vue.createBlock(_component_m_fields_group_list_item, {
           key: index,
           model: item,
@@ -902,7 +910,7 @@
       }, 8, ["onClick"])) : vue.createCommentVNode("", true),
       _ctx.config.enableToggleMode ? (vue.openBlock(), vue.createBlock(_component_el_button, {
         key: 4,
-        icon: "el-icon-s-grid",
+        icon: _ctx.Grid,
         size: "small",
         onClick: _ctx.toggleMode
       }, {
@@ -910,7 +918,7 @@
           _hoisted_7$1
         ]),
         _: 1
-      }, 8, ["onClick"])) : vue.createCommentVNode("", true)
+      }, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
     ]);
   }
   const GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$m]]);
@@ -956,7 +964,7 @@
     style: { "display": "flex" }
   };
   const _hoisted_4$2 = { style: { "flex": "1" } };
-  const _hoisted_5$1 = ["src"];
+  const _hoisted_5$2 = ["src"];
   function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_caret_right = vue.resolveComponent("caret-right");
@@ -1010,7 +1018,7 @@
             vue.createElementVNode("img", {
               class: "m-form-schematic",
               src: _ctx.config.schematic
-            }, null, 8, _hoisted_5$1)
+            }, null, 8, _hoisted_5$2)
           ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index) => {
             return vue.openBlock(), vue.createBlock(_component_m_form_container, {
               key: item[_ctx.mForm?.keyProp || "__key"] ?? index,
@@ -1213,10 +1221,7 @@
   }
   const MStep = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$i]]);
 
-  let loadedAMapJS = false;
-  let firstLoadingAMapJS = true;
   const _sfc_main$m = vue.defineComponent({
-    name: "m-form-table",
     props: {
       name: {
         type: String,
@@ -1253,9 +1258,14 @@
       enableToggleMode: {
         type: Boolean,
         default: true
+      },
+      showIndex: {
+        type: Boolean,
+        default: true
       }
     },
     emits: ["change", "select"],
+    components: { Delete: iconsVue.Delete },
     setup(props, { emit }) {
       let timer = null;
       const mForm = vue.inject("mForm");
@@ -1279,7 +1289,11 @@
         setTimeout(() => rowDrop());
       };
       const swapArray = (index1, index2) => {
-        [props.model[modelName.value][index1]] = props.model[modelName.value].splice(index2, 1, props.model[modelName.value][index1]);
+        [props.model[modelName.value][index1]] = props.model[modelName.value].splice(
+          index2,
+          1,
+          props.model[modelName.value][index1]
+        );
         if (props.sortKey) {
           for (let i = props.model[modelName.value].length - 1, v = 0; i >= 0; i--, v++) {
             props.model[modelName.value][v][props.sortKey] = i;
@@ -1366,17 +1380,14 @@
         props.model[modelName.value].push(inputs);
         emit("change", props.model[modelName.value]);
       };
-      if (!loadedAMapJS && firstLoadingAMapJS && !globalThis.XLSX) {
-        firstLoadingAMapJS = false;
-        utils.asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js").then(() => {
-          loadedAMapJS = true;
-        }).catch(() => {
-          firstLoadingAMapJS = true;
-        });
+      if (!globalThis.XLSX) {
+        utils.asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js");
       }
       vue.onMounted(() => {
         if (props.config.defautSort) {
           sortChange(props.config.defautSort);
+        } else if (props.config.defaultSort) {
+          sortChange(props.config.defaultSort);
         }
         if (props.sort && props.sortKey) {
           props.model[modelName.value].sort((a, b) => b[props.sortKey] - a[props.sortKey]);
@@ -1401,7 +1412,11 @@
         Delete: iconsVue.Delete,
         FullScreen: iconsVue.FullScreen,
         Grid: iconsVue.Grid,
-        data: vue.computed(() => props.model[modelName.value].filter((item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value)),
+        data: vue.computed(
+          () => props.model[modelName.value].filter(
+            (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
+          )
+        ),
         addable: vue.computed(() => {
           if (!props.model[modelName.value].length) {
             return true;
@@ -1589,7 +1604,7 @@
   const _hoisted_2$2 = { class: "el-form-item__content" };
   const _hoisted_3$2 = ["innerHTML"];
   const _hoisted_4$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0");
-  const _hoisted_5 = /* @__PURE__ */ vue.createTextVNode(" \xA0 ");
+  const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode(" \xA0 ");
   const _hoisted_6 = /* @__PURE__ */ vue.createTextVNode("\u5C55\u5F00\u914D\u7F6E");
   const _hoisted_7 = /* @__PURE__ */ vue.createTextVNode("\u5BFC\u5165EXCEL");
   const _hoisted_8 = /* @__PURE__ */ vue.createTextVNode("\xA0 ");
@@ -1600,6 +1615,8 @@
   };
   function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_table_column = vue.resolveComponent("el-table-column");
+    const _component_Delete = vue.resolveComponent("Delete");
+    const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
@@ -1650,16 +1667,20 @@
                 })) : vue.createCommentVNode("", true),
                 vue.createVNode(_component_el_table_column, {
                   label: "\u64CD\u4F5C",
-                  width: "60",
+                  width: "55",
+                  align: "center",
                   fixed: _ctx.config.fixed === false ? void 0 : "left"
                 }, {
                   default: vue.withCtx((scope) => [
-                    vue.withDirectives(vue.createVNode(_component_el_button, {
-                      type: "danger",
-                      text: "",
-                      icon: _ctx.Delete,
+                    vue.withDirectives(vue.createVNode(_component_el_icon, {
+                      class: "m-table-delete-icon",
                       onClick: ($event) => _ctx.removeHandler(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1)
-                    }, null, 8, ["icon", "onClick"]), [
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_component_Delete)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"]), [
                       [vue.vShow, _ctx.showDelete(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1)]
                     ])
                   ]),
@@ -1717,7 +1738,8 @@
                   type: "selection",
                   width: "45"
                 })) : vue.createCommentVNode("", true),
-                vue.createVNode(_component_el_table_column, {
+                _ctx.showIndex && _ctx.config.showIndex ? (vue.openBlock(), vue.createBlock(_component_el_table_column, {
+                  key: 3,
                   width: "60",
                   label: "\u5E8F\u53F7"
                 }, {
@@ -1725,7 +1747,7 @@
                     vue.createTextVNode(vue.toDisplayString(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize), 1)
                   ]),
                   _: 1
-                }),
+                })) : vue.createCommentVNode("", true),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (column, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     column.type !== "hidden" && _ctx.display(column.display) ? (vue.openBlock(), vue.createBlock(_component_el_table_column, {
@@ -1772,7 +1794,7 @@
           ]),
           _: 1
         })) : vue.createCommentVNode("", true),
-        _hoisted_5,
+        _hoisted_5$1,
         _ctx.enableToggleMode && !_ctx.isFullscreen ? (vue.openBlock(), vue.createBlock(_component_el_button, {
           key: 1,
           icon: _ctx.Grid,
@@ -2046,15 +2068,19 @@
       return;
     const mForm = vue.inject("mForm");
     const instance = vue.getCurrentInstance();
-    vue.watch(() => instance?.proxy, (vm) => {
-      if (vm) {
-        mForm?.setField(prop, vm);
-      } else {
-        mForm?.deleteField(prop);
+    vue.watch(
+      () => instance?.proxy,
+      (vm) => {
+        if (vm) {
+          mForm?.setField(prop, vm);
+        } else {
+          mForm?.deleteField(prop);
+        }
+      },
+      {
+        immediate: true
       }
-    }, {
-      immediate: true
-    });
+    );
   };
 
   const _sfc_main$l = vue.defineComponent({
@@ -2106,7 +2132,9 @@
         }
       };
       if (typeof props.config.options === "function" && props.model && mForm) {
-        vue.watchEffect(() => options.value = props.config.options(vm, { model: props.model, formValues: mForm.values }));
+        vue.watchEffect(
+          () => options.value = props.config.options(vm, { model: props.model, formValues: mForm.values })
+        );
       } else if (!props.config.options || !props.config.options.length || props.config.remote) {
         Promise.resolve(setRemoteOptions());
       }
@@ -2370,26 +2398,34 @@
       const value = vue.ref([]);
       if (props.model !== void 0) {
         if (names?.length) {
-          vue.watch([() => props.model[names[0]], () => props.model[names[1]]], ([start, end], [preStart, preEnd]) => {
-            if (!value.value) {
-              value.value = [];
+          vue.watch(
+            [() => props.model[names[0]], () => props.model[names[1]]],
+            ([start, end], [preStart, preEnd]) => {
+              if (!value.value) {
+                value.value = [];
+              }
+              if (!start || !end)
+                value.value = [];
+              if (start !== preStart)
+                value.value[0] = new Date(start);
+              if (end !== preEnd)
+                value.value[1] = new Date(end);
+            },
+            {
+              immediate: true
             }
-            if (!start || !end)
-              value.value = [];
-            if (start !== preStart)
-              value.value[0] = new Date(start);
-            if (end !== preEnd)
-              value.value[1] = new Date(end);
-          }, {
-            immediate: true
-          });
+          );
         } else if (props.name && props.model[props.name]) {
-          vue.watch(() => props.model[props.name], (start, preStart) => {
-            if (start !== preStart)
-              value.value = start.map((item) => item ? new Date(item) : void 0);
-          }, {
-            immediate: true
-          });
+          vue.watch(
+            () => props.model[props.name],
+            (start, preStart) => {
+              if (start !== preStart)
+                value.value = start.map((item) => item ? new Date(item) : void 0);
+            },
+            {
+              immediate: true
+            }
+          );
         }
       }
       const setValue = (v) => {
@@ -2407,11 +2443,14 @@
       const changeHandler = (v) => {
         const value2 = v || [];
         if (props.name) {
-          emit("change", value2.map((item) => {
-            if (item)
-              return utils.datetimeFormatter(item, "");
-            return void 0;
-          }));
+          emit(
+            "change",
+            value2.map((item) => {
+              if (item)
+                return utils.datetimeFormatter(item, "");
+              return void 0;
+            })
+          );
         } else {
           if (names?.length) {
             setValue(value2);
@@ -2545,13 +2584,17 @@
           fieldLabelMap.value[v.name] = v.label || "";
         });
       };
-      const unwatch = vue.watch(() => props.model?.[props.config.dynamicKey], (val) => {
-        if (val !== "") {
-          changeFieldMap();
+      const unwatch = vue.watch(
+        () => props.model?.[props.config.dynamicKey],
+        (val) => {
+          if (val !== "") {
+            changeFieldMap();
+          }
+        },
+        {
+          immediate: true
         }
-      }, {
-        immediate: true
-      });
+      );
       vue.onBeforeUnmount(() => {
         if (typeof unwatch === "function") {
           unwatch();
@@ -3016,12 +3059,18 @@
         remote.value = false;
         if (config.group) {
           if (config.multiple && value.findIndex) {
-            return localOptions.value.filter((group) => group.options.findIndex((item) => value.find((v) => equalValue(item.value, v)) > -1) > -1);
+            return localOptions.value.filter(
+              (group) => group.options.findIndex((item) => value.find((v) => equalValue(item.value, v)) > -1) > -1
+            );
           }
-          return localOptions.value.filter((group) => group.options.findIndex((item) => equalValue(item.value, value)) > -1);
+          return localOptions.value.filter(
+            (group) => group.options.findIndex((item) => equalValue(item.value, value)) > -1
+          );
         }
         if (config.multiple && value.findIndex) {
-          return localOptions.value.filter((item) => value.findIndex((v) => equalValue(item.value, v)) > -1);
+          return localOptions.value.filter(
+            (item) => value.findIndex((v) => equalValue(item.value, v)) > -1
+          );
         }
         return localOptions.value.filter((item) => equalValue(item.value, value));
       };
@@ -3067,24 +3116,34 @@
         return options2;
       };
       if (typeof props.config.options === "function") {
-        vue.watch(() => mForm?.values, () => {
-          typeof props.config.options === "function" && Promise.resolve(props.config.options(mForm, {
-            model: props.model,
-            prop: props.prop,
-            formValues: mForm?.values,
-            formValue: mForm?.values,
-            config: props.config
-          })).then((data) => {
-            options.value = data;
-          });
-        }, {
-          deep: true,
-          immediate: true
-        });
+        vue.watch(
+          () => mForm?.values,
+          () => {
+            typeof props.config.options === "function" && Promise.resolve(
+              props.config.options(mForm, {
+                model: props.model,
+                prop: props.prop,
+                formValues: mForm?.values,
+                formValue: mForm?.values,
+                config: props.config
+              })
+            ).then((data) => {
+              options.value = data;
+            });
+          },
+          {
+            deep: true,
+            immediate: true
+          }
+        );
       } else if (Array.isArray(props.config.options)) {
-        vue.watch(() => props.config.options, () => {
-          options.value = props.config.options;
-        }, { immediate: true });
+        vue.watch(
+          () => props.config.options,
+          () => {
+            options.value = props.config.options;
+          },
+          { immediate: true }
+        );
       } else if (props.config.option) {
         vue.onBeforeMount(() => {
           if (!props.model)
@@ -3551,18 +3610,22 @@
         }
       });
       vue.provide("mForm", formState);
-      vue.watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
-        if (!lodashEs.isEqual(vue.toRaw(config), vue.toRaw(preConfig))) {
-          initialized.value = false;
-        }
-        initValue(formState, {
-          initValues: props.initValues,
-          config: props.config
-        }).then((value) => {
-          values.value = value;
-          initialized.value = true;
-        });
-      }, { immediate: true });
+      vue.watch(
+        [() => props.config, () => props.initValues],
+        ([config], [preConfig]) => {
+          if (!lodashEs.isEqual(vue.toRaw(config), vue.toRaw(preConfig))) {
+            initialized.value = false;
+          }
+          initValue(formState, {
+            initValues: props.initValues,
+            config: props.config
+          }).then((value) => {
+            values.value = value;
+            initialized.value = true;
+          });
+        },
+        { immediate: true }
+      );
       return {
         initialized,
         values,
@@ -3633,6 +3696,9 @@
         type: Object,
         default: () => ({})
       },
+      parentValues: {
+        type: Object
+      },
       width: [Number, String],
       fullscreen: Boolean,
       title: String,
@@ -3715,116 +3781,120 @@
     }
   });
 
-  const _hoisted_1 = { style: { "min-height": "1px" } };
-  const _hoisted_2 = /* @__PURE__ */ vue.createTextVNode("\u53D6 \u6D88");
-  const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u4E00\u6B65");
-  const _hoisted_4 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u4E00\u6B65");
+  const _hoisted_1 = { class: "m-form-dialog" };
+  const _hoisted_2 = { style: { "min-height": "1px" } };
+  const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u53D6 \u6D88");
+  const _hoisted_4 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u4E00\u6B65");
+  const _hoisted_5 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u4E00\u6B65");
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
     const _component_el_col = vue.resolveComponent("el-col");
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_row = vue.resolveComponent("el-row");
     const _component_el_dialog = vue.resolveComponent("el-dialog");
-    return vue.openBlock(), vue.createElementBlock("div", null, [
-      vue.createVNode(_component_el_dialog, {
-        modelValue: _ctx.dialogVisible,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.dialogVisible = $event),
-        class: "m-form-dialog",
-        top: "20px",
-        title: _ctx.title,
-        appendToBody: true,
-        width: _ctx.width,
-        fullscreen: _ctx.fullscreen,
-        "close-on-click-modal": false,
-        onClose: _ctx.closeHandler
-      }, {
-        footer: vue.withCtx(() => [
-          vue.createVNode(_component_el_row, { class: "dialog-footer" }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_el_col, {
-                span: 12,
-                style: { "text-align": "left" }
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_1, [
-                    vue.renderSlot(_ctx.$slots, "left")
-                  ])
-                ]),
-                _: 3
-              }),
-              vue.createVNode(_component_el_col, { span: 12 }, {
-                default: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "footer", {}, () => [
-                    vue.createVNode(_component_el_button, {
-                      onClick: _ctx.cancel,
-                      size: "small"
-                    }, {
-                      default: vue.withCtx(() => [
-                        _hoisted_2
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"]),
-                    _ctx.hasStep && _ctx.stepActive > 1 ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-                      key: 0,
-                      type: "info",
-                      size: "small",
-                      onClick: _ctx.preStep
-                    }, {
-                      default: vue.withCtx(() => [
-                        _hoisted_3
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"])) : vue.createCommentVNode("", true),
-                    _ctx.hasStep && _ctx.stepCount > _ctx.stepActive ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-                      key: 1,
-                      type: "info",
-                      size: "small",
-                      onClick: _ctx.nextStep
-                    }, {
-                      default: vue.withCtx(() => [
-                        _hoisted_4
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
-                      key: 2,
-                      type: "primary",
-                      size: "small",
-                      loading: _ctx.saveFetch,
-                      onClick: _ctx.save
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["loading", "onClick"]))
-                  ])
-                ]),
-                _: 3
-              })
-            ]),
-            _: 3
-          })
-        ]),
-        default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            class: "m-dialog-body",
-            style: vue.normalizeStyle(`max-height: ${_ctx.bodyHeight}; overflow-y: auto; overflow-x: hidden;`)
-          }, [
-            vue.createVNode(_component_m_form, {
-              modelValue: _ctx.stepActive,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.stepActive = $event),
-              ref: "form",
-              size: _ctx.size,
-              config: _ctx.config,
-              "init-values": _ctx.values,
-              "label-width": _ctx.labelWidth,
-              onChange: _ctx.changeHandler
-            }, null, 8, ["modelValue", "size", "config", "init-values", "label-width", "onChange"]),
-            vue.renderSlot(_ctx.$slots, "default")
-          ], 4)
-        ]),
-        _: 3
-      }, 8, ["modelValue", "title", "width", "fullscreen", "onClose"])
+    return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+      vue.withDirectives(vue.createElementVNode("div", _hoisted_1, [
+        vue.createVNode(_component_el_dialog, {
+          modelValue: _ctx.dialogVisible,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.dialogVisible = $event),
+          top: "20px",
+          title: _ctx.title,
+          width: _ctx.width,
+          fullscreen: _ctx.fullscreen,
+          "close-on-click-modal": false,
+          onClose: _ctx.closeHandler
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createVNode(_component_el_row, { class: "dialog-footer" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_el_col, {
+                  span: 12,
+                  style: { "text-align": "left" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_2, [
+                      vue.renderSlot(_ctx.$slots, "left")
+                    ])
+                  ]),
+                  _: 3
+                }),
+                vue.createVNode(_component_el_col, { span: 12 }, {
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+                      vue.createVNode(_component_el_button, {
+                        onClick: _ctx.cancel,
+                        size: "small"
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_3
+                        ]),
+                        _: 1
+                      }, 8, ["onClick"]),
+                      _ctx.hasStep && _ctx.stepActive > 1 ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                        key: 0,
+                        type: "info",
+                        size: "small",
+                        onClick: _ctx.preStep
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_4
+                        ]),
+                        _: 1
+                      }, 8, ["onClick"])) : vue.createCommentVNode("", true),
+                      _ctx.hasStep && _ctx.stepCount > _ctx.stepActive ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                        key: 1,
+                        type: "info",
+                        size: "small",
+                        onClick: _ctx.nextStep
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_5
+                        ]),
+                        _: 1
+                      }, 8, ["onClick"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
+                        key: 2,
+                        type: "primary",
+                        size: "small",
+                        loading: _ctx.saveFetch,
+                        onClick: _ctx.save
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["loading", "onClick"]))
+                    ])
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "m-dialog-body",
+              style: vue.normalizeStyle(`max-height: ${_ctx.bodyHeight}; overflow-y: auto; overflow-x: hidden;`)
+            }, [
+              vue.createVNode(_component_m_form, {
+                modelValue: _ctx.stepActive,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.stepActive = $event),
+                ref: "form",
+                size: _ctx.size,
+                config: _ctx.config,
+                "init-values": _ctx.values,
+                "parent-values": _ctx.parentValues,
+                "label-width": _ctx.labelWidth,
+                onChange: _ctx.changeHandler
+              }, null, 8, ["modelValue", "size", "config", "init-values", "parent-values", "label-width", "onChange"]),
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 4)
+          ]),
+          _: 3
+        }, 8, ["modelValue", "title", "width", "fullscreen", "onClose"])
+      ], 512), [
+        [vue.vShow, _ctx.dialogVisible]
+      ])
     ]);
   }
   const FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
@@ -3844,7 +3914,7 @@
     app.component(Panel.name, Panel);
     app.component(Row.name, Row);
     app.component(MStep.name, MStep);
-    app.component(Table.name, Table);
+    app.component("m-form-table", Table);
     app.component(Tabs.name, Tabs);
     app.component(Text.name, Text);
     app.component(Number$1.name, Number$1);