@tmagic/form 1.1.6 → 1.2.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.0-beta.2",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/utils": "1.1.6",
+    "@tmagic/utils": "1.2.0-beta.2",
     "element-plus": "^2.2.17",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",

package/src/FormDialog.vue

@@ -1,53 +1,55 @@
 <template>
-  <teleport to="body">
-    <div class="m-form-dialog" v-show="dialogVisible">
-      <el-dialog
-        v-model="dialogVisible"
-        top="20px"
-        :title="title"
-        :width="width"
-        :fullscreen="fullscreen"
-        :close-on-click-modal="false"
-        @close="closeHandler"
-      >
-        <div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`">
-          <m-form
-            v-model="stepActive"
-            ref="form"
-            :size="size"
-            :config="config"
-            :init-values="values"
-            :parent-values="parentValues"
-            :label-width="labelWidth"
-            @change="changeHandler"
-          ></m-form>
-          <slot></slot>
-        </div>
-
-        <template #footer>
-          <el-row class="dialog-footer">
-            <el-col :span="12" style="text-align: left">
-              <div style="min-height: 1px">
-                <slot name="left"></slot>
-              </div>
-            </el-col>
-            <el-col :span="12">
-              <slot name="footer">
-                <el-button @click="cancel" size="small">取 消</el-button>
-                <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
-                <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
-                  >下一步</el-button
-                >
-                <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
-                  confirmText
-                }}</el-button>
-              </slot>
-            </el-col>
-          </el-row>
-        </template>
-      </el-dialog>
+  <el-dialog
+    v-model="dialogVisible"
+    class="m-form-dialog"
+    top="20px"
+    append-to-body
+    :title="title"
+    :width="width"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="false"
+    @close="closeHandler"
+  >
+    <div
+      v-if="dialogVisible"
+      class="m-dialog-body"
+      :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
+    >
+      <m-form
+        v-model="stepActive"
+        ref="form"
+        :size="size"
+        :config="config"
+        :init-values="values"
+        :parent-values="parentValues"
+        :label-width="labelWidth"
+        @change="changeHandler"
+      ></m-form>
+      <slot></slot>
     </div>
-  </teleport>
+
+    <template #footer>
+      <el-row class="dialog-footer">
+        <el-col :span="12" style="text-align: left">
+          <div style="min-height: 1px">
+            <slot name="left"></slot>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <slot name="footer">
+            <el-button @click="cancel" size="small">取 消</el-button>
+            <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
+            <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
+              >下一步</el-button
+            >
+            <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+              confirmText
+            }}</el-button>
+          </slot>
+        </el-col>
+      </el-row>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts">

package/src/fields/Select.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, onBeforeMount, onMounted, PropType, Ref, ref, watch } from 'vue';
+import { defineComponent, inject, onBeforeMount, onMounted, PropType, Ref, ref, watchEffect } from 'vue';
 
 import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
@@ -264,35 +264,24 @@ export default defineComponent({
     };
 
     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,
-        },
-      );
+      watchEffect(() => {
+        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;
+          });
+      });
     } else if (Array.isArray(props.config.options)) {
-      watch(
-        () => props.config.options,
-        () => {
-          options.value = props.config.options as SelectOption[] | SelectGroupOption[];
-        },
-        { immediate: true },
-      );
+      watchEffect(() => {
+        options.value = props.config.options as SelectOption[] | SelectGroupOption[];
+      });
     } else if (props.config.option) {
       onBeforeMount(() => {
         if (!props.model) return;