@tmagic/form 1.1.4 → 1.1.6

package/dist/tmagic-form.mjs

@@ -1,5 +1,5 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, watch, unref, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, reactive, onBeforeUnmount, vModelText, onBeforeMount, resolveDirective, createSlots, withModifiers, provide } from 'vue';
-import { WarningFilled, CaretBottom, CaretRight, CaretTop, Delete, ArrowDown, ArrowUp, FullScreen, Grid } from '@element-plus/icons-vue';
+import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, watch, unref, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, reactive, onBeforeUnmount, vModelText, onBeforeMount, resolveDirective, createSlots, withModifiers, provide, Teleport } from 'vue';
+import { WarningFilled, CaretBottom, CaretRight, CaretTop, Delete, Grid, ArrowDown, ArrowUp, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual } from 'lodash-es';
 import { ElMessage } from 'element-plus';
 import Sortable from 'sortablejs';
@@ -126,20 +126,24 @@ const getRules = function(mForm, rules = [], props) {
   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;
   });
@@ -316,7 +320,7 @@ const _hoisted_1$c = ["innerHTML"];
 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" }
 };
@@ -434,7 +438,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["model", "config", "size", "step-active", "expand-more", "label-width", "prop", "onChange"]);
       }), 128)) : createCommentVNode("", true)
     ], 64)) : createCommentVNode("", true),
-    _ctx.config.expand && _ctx.type !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+    _ctx.config.expand && _ctx.type !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
       createVNode(_component_el_button, {
         text: "",
         onClick: _ctx.expandHandler
@@ -453,7 +457,7 @@ const _hoisted_1$b = ["innerHTML"];
 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" }
@@ -492,9 +496,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
     if (props.config.checkbox && name.value) {
-      watch(() => props.model[name.value]?.value, () => {
-        emit("change", props.model);
-      });
+      watch(
+        () => props.model[name.value]?.value,
+        () => {
+          emit("change", props.model);
+        }
+      );
     }
     return (_ctx, _cache) => {
       const _component_el_checkbox = resolveComponent("el-checkbox");
@@ -535,7 +542,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             key: 0,
             innerHTML: __props.config.extra,
             class: "m-form-tip"
-          }, null, 8, _hoisted_5$3)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_5$4)) : createCommentVNode("", true)
         ])),
         __props.config.schematic && unref(show) ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
           createElementVNode("div", _hoisted_7$2, [
@@ -841,6 +848,7 @@ const _sfc_main$r = defineComponent({
       }));
     };
     return {
+      Grid,
       addable,
       toggleMode,
       removeHandler,
@@ -858,7 +866,7 @@ const _hoisted_3$4 = {
   class: "el-table__empty-block"
 };
 const _hoisted_4$3 = /* @__PURE__ */ 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__ */ createTextVNode("\u6DFB\u52A0\u7EC4");
@@ -872,7 +880,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
       innerHTML: _ctx.config.extra,
       style: { "color": "rgba(0, 0, 0, 0.45)" }
     }, null, 8, _hoisted_2$4)) : createCommentVNode("", true),
-    !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$4, _hoisted_5$2)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.model[_ctx.name], (item, index) => {
+    !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$4, _hoisted_5$3)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.model[_ctx.name], (item, index) => {
       return openBlock(), createBlock(_component_m_fields_group_list_item, {
         key: index,
         model: item,
@@ -899,7 +907,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onClick"])) : createCommentVNode("", true),
     _ctx.config.enableToggleMode ? (openBlock(), createBlock(_component_el_button, {
       key: 4,
-      icon: "el-icon-s-grid",
+      icon: _ctx.Grid,
       size: "small",
       onClick: _ctx.toggleMode
     }, {
@@ -907,7 +915,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
         _hoisted_7$1
       ]),
       _: 1
-    }, 8, ["onClick"])) : createCommentVNode("", true)
+    }, 8, ["icon", "onClick"])) : createCommentVNode("", true)
   ]);
 }
 const GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$m]]);
@@ -953,7 +961,7 @@ const _hoisted_3$3 = {
   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 = resolveComponent("caret-bottom");
   const _component_caret_right = resolveComponent("caret-right");
@@ -1007,7 +1015,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("img", {
             class: "m-form-schematic",
             src: _ctx.config.schematic
-          }, null, 8, _hoisted_5$1)
+          }, null, 8, _hoisted_5$2)
         ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
           return openBlock(), createBlock(_component_m_form_container, {
             key: item[_ctx.mForm?.keyProp || "__key"] ?? index,
@@ -1210,10 +1218,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
 }
 const MStep = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$i]]);
 
-let loadedAMapJS = false;
-let firstLoadingAMapJS = true;
 const _sfc_main$m = defineComponent({
-  name: "m-form-table",
   props: {
     name: {
       type: String,
@@ -1250,9 +1255,14 @@ const _sfc_main$m = defineComponent({
     enableToggleMode: {
       type: Boolean,
       default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["change", "select"],
+  components: { Delete },
   setup(props, { emit }) {
     let timer = null;
     const mForm = inject("mForm");
@@ -1276,7 +1286,11 @@ const _sfc_main$m = defineComponent({
       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;
@@ -1363,17 +1377,14 @@ const _sfc_main$m = defineComponent({
       props.model[modelName.value].push(inputs);
       emit("change", props.model[modelName.value]);
     };
-    if (!loadedAMapJS && firstLoadingAMapJS && !globalThis.XLSX) {
-      firstLoadingAMapJS = false;
-      asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js").then(() => {
-        loadedAMapJS = true;
-      }).catch(() => {
-        firstLoadingAMapJS = true;
-      });
+    if (!globalThis.XLSX) {
+      asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js");
     }
     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]);
@@ -1398,7 +1409,11 @@ const _sfc_main$m = defineComponent({
       Delete,
       FullScreen,
       Grid,
-      data: computed(() => props.model[modelName.value].filter((item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value)),
+      data: computed(
+        () => props.model[modelName.value].filter(
+          (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
+        )
+      ),
       addable: computed(() => {
         if (!props.model[modelName.value].length) {
           return true;
@@ -1586,7 +1601,7 @@ const _hoisted_1$7 = ["innerHTML"];
 const _hoisted_2$2 = { class: "el-form-item__content" };
 const _hoisted_3$2 = ["innerHTML"];
 const _hoisted_4$1 = /* @__PURE__ */ createTextVNode("\u6DFB\u52A0");
-const _hoisted_5 = /* @__PURE__ */ createTextVNode(" \xA0 ");
+const _hoisted_5$1 = /* @__PURE__ */ createTextVNode(" \xA0 ");
 const _hoisted_6 = /* @__PURE__ */ createTextVNode("\u5C55\u5F00\u914D\u7F6E");
 const _hoisted_7 = /* @__PURE__ */ createTextVNode("\u5BFC\u5165EXCEL");
 const _hoisted_8 = /* @__PURE__ */ createTextVNode("\xA0 ");
@@ -1597,6 +1612,8 @@ const _hoisted_10 = {
 };
 function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_table_column = resolveComponent("el-table-column");
+  const _component_Delete = resolveComponent("Delete");
+  const _component_el_icon = resolveComponent("el-icon");
   const _component_el_button = resolveComponent("el-button");
   const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_m_form_container = resolveComponent("m-form-container");
@@ -1647,16 +1664,20 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
               })) : createCommentVNode("", true),
               createVNode(_component_el_table_column, {
                 label: "\u64CD\u4F5C",
-                width: "60",
+                width: "55",
+                align: "center",
                 fixed: _ctx.config.fixed === false ? void 0 : "left"
               }, {
                 default: withCtx((scope) => [
-                  withDirectives(createVNode(_component_el_button, {
-                    type: "danger",
-                    text: "",
-                    icon: _ctx.Delete,
+                  withDirectives(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: withCtx(() => [
+                      createVNode(_component_Delete)
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick"]), [
                     [vShow, _ctx.showDelete(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1)]
                   ])
                 ]),
@@ -1714,7 +1735,8 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
                 type: "selection",
                 width: "45"
               })) : createCommentVNode("", true),
-              createVNode(_component_el_table_column, {
+              _ctx.showIndex && _ctx.config.showIndex ? (openBlock(), createBlock(_component_el_table_column, {
+                key: 3,
                 width: "60",
                 label: "\u5E8F\u53F7"
               }, {
@@ -1722,7 +1744,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
                   createTextVNode(toDisplayString(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize), 1)
                 ]),
                 _: 1
-              }),
+              })) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (column, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   column.type !== "hidden" && _ctx.display(column.display) ? (openBlock(), createBlock(_component_el_table_column, {
@@ -1769,7 +1791,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       })) : createCommentVNode("", true),
-      _hoisted_5,
+      _hoisted_5$1,
       _ctx.enableToggleMode && !_ctx.isFullscreen ? (openBlock(), createBlock(_component_el_button, {
         key: 1,
         icon: _ctx.Grid,
@@ -2043,15 +2065,19 @@ const useAddField = (prop) => {
     return;
   const mForm = inject("mForm");
   const instance = getCurrentInstance();
-  watch(() => instance?.proxy, (vm) => {
-    if (vm) {
-      mForm?.setField(prop, vm);
-    } else {
-      mForm?.deleteField(prop);
+  watch(
+    () => instance?.proxy,
+    (vm) => {
+      if (vm) {
+        mForm?.setField(prop, vm);
+      } else {
+        mForm?.deleteField(prop);
+      }
+    },
+    {
+      immediate: true
     }
-  }, {
-    immediate: true
-  });
+  );
 };
 
 const _sfc_main$l = defineComponent({
@@ -2103,7 +2129,9 @@ const _sfc_main$l = defineComponent({
       }
     };
     if (typeof props.config.options === "function" && props.model && mForm) {
-      watchEffect(() => options.value = props.config.options(vm, { model: props.model, formValues: mForm.values }));
+      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());
     }
@@ -2367,26 +2395,34 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const value = ref([]);
     if (props.model !== void 0) {
       if (names?.length) {
-        watch([() => props.model[names[0]], () => props.model[names[1]]], ([start, end], [preStart, preEnd]) => {
-          if (!value.value) {
-            value.value = [];
+        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]) {
-        watch(() => props.model[props.name], (start, preStart) => {
-          if (start !== preStart)
-            value.value = start.map((item) => item ? new Date(item) : void 0);
-        }, {
-          immediate: true
-        });
+        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) => {
@@ -2404,11 +2440,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const changeHandler = (v) => {
       const value2 = v || [];
       if (props.name) {
-        emit("change", value2.map((item) => {
-          if (item)
-            return datetimeFormatter(item, "");
-          return void 0;
-        }));
+        emit(
+          "change",
+          value2.map((item) => {
+            if (item)
+              return datetimeFormatter(item, "");
+            return void 0;
+          })
+        );
       } else {
         if (names?.length) {
           setValue(value2);
@@ -2542,13 +2581,17 @@ const _sfc_main$d = defineComponent({
         fieldLabelMap.value[v.name] = v.label || "";
       });
     };
-    const unwatch = watch(() => props.model?.[props.config.dynamicKey], (val) => {
-      if (val !== "") {
-        changeFieldMap();
+    const unwatch = watch(
+      () => props.model?.[props.config.dynamicKey],
+      (val) => {
+        if (val !== "") {
+          changeFieldMap();
+        }
+      },
+      {
+        immediate: true
       }
-    }, {
-      immediate: true
-    });
+    );
     onBeforeUnmount(() => {
       if (typeof unwatch === "function") {
         unwatch();
@@ -3013,12 +3056,18 @@ const _sfc_main$6 = defineComponent({
       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));
     };
@@ -3064,24 +3113,34 @@ const _sfc_main$6 = defineComponent({
       return options2;
     };
     if (typeof props.config.options === "function") {
-      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
-      });
+      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)) {
-      watch(() => props.config.options, () => {
-        options.value = props.config.options;
-      }, { immediate: true });
+      watch(
+        () => props.config.options,
+        () => {
+          options.value = props.config.options;
+        },
+        { immediate: true }
+      );
     } else if (props.config.option) {
       onBeforeMount(() => {
         if (!props.model)
@@ -3548,18 +3607,22 @@ const _sfc_main$1 = defineComponent({
       }
     });
     provide("mForm", formState);
-    watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
-      if (!isEqual(toRaw(config), toRaw(preConfig))) {
-        initialized.value = false;
-      }
-      initValue(formState, {
-        initValues: props.initValues,
-        config: props.config
-      }).then((value) => {
-        values.value = value;
-        initialized.value = true;
-      });
-    }, { immediate: true });
+    watch(
+      [() => props.config, () => props.initValues],
+      ([config], [preConfig]) => {
+        if (!isEqual(toRaw(config), 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,
@@ -3630,6 +3693,9 @@ const _sfc_main = defineComponent({
       type: Object,
       default: () => ({})
     },
+    parentValues: {
+      type: Object
+    },
     width: [Number, String],
     fullscreen: Boolean,
     title: String,
@@ -3712,116 +3778,120 @@ const _sfc_main = defineComponent({
   }
 });
 
-const _hoisted_1 = { style: { "min-height": "1px" } };
-const _hoisted_2 = /* @__PURE__ */ createTextVNode("\u53D6 \u6D88");
-const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u4E0A\u4E00\u6B65");
-const _hoisted_4 = /* @__PURE__ */ createTextVNode("\u4E0B\u4E00\u6B65");
+const _hoisted_1 = { class: "m-form-dialog" };
+const _hoisted_2 = { style: { "min-height": "1px" } };
+const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u53D6 \u6D88");
+const _hoisted_4 = /* @__PURE__ */ createTextVNode("\u4E0A\u4E00\u6B65");
+const _hoisted_5 = /* @__PURE__ */ createTextVNode("\u4E0B\u4E00\u6B65");
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   const _component_el_col = resolveComponent("el-col");
   const _component_el_button = resolveComponent("el-button");
   const _component_el_row = resolveComponent("el-row");
   const _component_el_dialog = resolveComponent("el-dialog");
-  return openBlock(), createElementBlock("div", null, [
-    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: withCtx(() => [
-        createVNode(_component_el_row, { class: "dialog-footer" }, {
-          default: withCtx(() => [
-            createVNode(_component_el_col, {
-              span: 12,
-              style: { "text-align": "left" }
-            }, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_1, [
-                  renderSlot(_ctx.$slots, "left")
-                ])
-              ]),
-              _: 3
-            }),
-            createVNode(_component_el_col, { span: 12 }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "footer", {}, () => [
-                  createVNode(_component_el_button, {
-                    onClick: _ctx.cancel,
-                    size: "small"
-                  }, {
-                    default: withCtx(() => [
-                      _hoisted_2
-                    ]),
-                    _: 1
-                  }, 8, ["onClick"]),
-                  _ctx.hasStep && _ctx.stepActive > 1 ? (openBlock(), createBlock(_component_el_button, {
-                    key: 0,
-                    type: "info",
-                    size: "small",
-                    onClick: _ctx.preStep
-                  }, {
-                    default: withCtx(() => [
-                      _hoisted_3
-                    ]),
-                    _: 1
-                  }, 8, ["onClick"])) : createCommentVNode("", true),
-                  _ctx.hasStep && _ctx.stepCount > _ctx.stepActive ? (openBlock(), createBlock(_component_el_button, {
-                    key: 1,
-                    type: "info",
-                    size: "small",
-                    onClick: _ctx.nextStep
-                  }, {
-                    default: withCtx(() => [
-                      _hoisted_4
-                    ]),
-                    _: 1
-                  }, 8, ["onClick"])) : (openBlock(), createBlock(_component_el_button, {
-                    key: 2,
-                    type: "primary",
-                    size: "small",
-                    loading: _ctx.saveFetch,
-                    onClick: _ctx.save
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.confirmText), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["loading", "onClick"]))
-                ])
-              ]),
-              _: 3
-            })
-          ]),
-          _: 3
-        })
-      ]),
-      default: withCtx(() => [
-        createElementVNode("div", {
-          class: "m-dialog-body",
-          style: normalizeStyle(`max-height: ${_ctx.bodyHeight}; overflow-y: auto; overflow-x: hidden;`)
-        }, [
-          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"]),
-          renderSlot(_ctx.$slots, "default")
-        ], 4)
-      ]),
-      _: 3
-    }, 8, ["modelValue", "title", "width", "fullscreen", "onClose"])
+  return openBlock(), createBlock(Teleport, { to: "body" }, [
+    withDirectives(createElementVNode("div", _hoisted_1, [
+      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: withCtx(() => [
+          createVNode(_component_el_row, { class: "dialog-footer" }, {
+            default: withCtx(() => [
+              createVNode(_component_el_col, {
+                span: 12,
+                style: { "text-align": "left" }
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_2, [
+                    renderSlot(_ctx.$slots, "left")
+                  ])
+                ]),
+                _: 3
+              }),
+              createVNode(_component_el_col, { span: 12 }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "footer", {}, () => [
+                    createVNode(_component_el_button, {
+                      onClick: _ctx.cancel,
+                      size: "small"
+                    }, {
+                      default: withCtx(() => [
+                        _hoisted_3
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"]),
+                    _ctx.hasStep && _ctx.stepActive > 1 ? (openBlock(), createBlock(_component_el_button, {
+                      key: 0,
+                      type: "info",
+                      size: "small",
+                      onClick: _ctx.preStep
+                    }, {
+                      default: withCtx(() => [
+                        _hoisted_4
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])) : createCommentVNode("", true),
+                    _ctx.hasStep && _ctx.stepCount > _ctx.stepActive ? (openBlock(), createBlock(_component_el_button, {
+                      key: 1,
+                      type: "info",
+                      size: "small",
+                      onClick: _ctx.nextStep
+                    }, {
+                      default: withCtx(() => [
+                        _hoisted_5
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])) : (openBlock(), createBlock(_component_el_button, {
+                      key: 2,
+                      type: "primary",
+                      size: "small",
+                      loading: _ctx.saveFetch,
+                      onClick: _ctx.save
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.confirmText), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["loading", "onClick"]))
+                  ])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: "m-dialog-body",
+            style: normalizeStyle(`max-height: ${_ctx.bodyHeight}; overflow-y: auto; overflow-x: hidden;`)
+          }, [
+            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"]),
+            renderSlot(_ctx.$slots, "default")
+          ], 4)
+        ]),
+        _: 3
+      }, 8, ["modelValue", "title", "width", "fullscreen", "onClose"])
+    ], 512), [
+      [vShow, _ctx.dialogVisible]
+    ])
   ]);
 }
 const FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
@@ -3841,7 +3911,7 @@ const install = (app, opt) => {
   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);