@tmagic/form 1.0.0-beta.8 → 1.0.0-rc.11

package/src/fields/Select.vue

@@ -15,20 +15,15 @@
     :value-key="config.valueKey || 'value'"
     :allow-create="config.allowCreate"
     :disabled="disabled"
-    :remote-method="remoteMethod"
+    :remote-method="config.remote && remoteMethod"
     @change="changeHandler"
     @visible-change="visibleHandler"
   >
     <template v-if="config.group">
-      <el-option-group
-        v-for="(group, index) in options"
-        :key="group.label + index"
-        :label="group.label"
-        :disabled="group.disabled"
-      >
+      <el-option-group v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
         <el-option
           v-for="(item, index) in group.options"
-          :key="item.label + index"
+          :key="index"
           :label="item.label"
           :value="item.value"
           :disabled="item.disabled"
@@ -139,6 +134,7 @@ export default defineComponent({
             model: props.model,
             formValue: mForm?.values,
             formValues: mForm?.values,
+            config: props.config,
           }) as Record<string, any>;
         }
 
@@ -168,6 +164,7 @@ export default defineComponent({
           model: props.model,
           formValue: mForm?.values,
           formValues: mForm?.values,
+          config: props.config,
         });
       }
 
@@ -289,8 +286,10 @@ export default defineComponent({
             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;
@@ -349,12 +348,12 @@ export default defineComponent({
       moreLoadingVisible,
       popperClass: mForm?.popperClass,
 
+      getOptions,
+
       getRequestFuc() {
         return getConfig('request');
       },
 
-      async getInitOption() {},
-
       changeHandler(value: any) {
         emit('change', value);
       },
@@ -372,11 +371,6 @@ export default defineComponent({
         }
       },
 
-      async editAfterAction() {
-        pgIndex.value = 0;
-        options.value = await getOptions();
-      },
-
       async remoteMethod(q: string) {
         if (!localOptions.value.length) {
           query.value = q;

package/src/fields/Text.vue

@@ -14,7 +14,8 @@
       <el-button
         v-if="typeof config.append === 'object' && config.append.type === 'button'"
         style="color: #409eff"
-        @click="buttonClickHandler"
+        :size="size"
+        @click.prevent="buttonClickHandler"
       >
         {{ config.append.text }}
       </el-button>
@@ -43,6 +44,8 @@ export default defineComponent({
   emits: ['change', 'input'],
 
   setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
     useAddField(props.prop);
 
     const modelName = computed(() => props.name || props.config.name || '');
@@ -54,14 +57,11 @@ export default defineComponent({
       },
 
       inputHandler(v: string | number) {
-        const mForm = inject<FormState | undefined>('mForm');
         emit('input', v);
         mForm?.$emit('field-input', props.prop, v);
       },
 
       buttonClickHandler() {
-        const mForm = inject<FormState | undefined>('mForm');
-
         if (typeof props.config.append === 'string') return;
 
         if (props.config.append?.handler) {

package/src/fields/Textarea.vue

@@ -1,17 +1,15 @@
 <template>
-  <div v-if="model">
-    <el-input
-      v-model="model[name]"
-      type="textarea"
-      :size="size"
-      clearable
-      :placeholder="config.placeholder"
-      :disabled="disabled"
-      @change="changeHandler"
-      @input="inputHandler"
-    >
-    </el-input>
-  </div>
+  <el-input
+    v-model="model[name]"
+    type="textarea"
+    :size="size"
+    clearable
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    @change="changeHandler"
+    @input="inputHandler"
+  >
+  </el-input>
 </template>
 
 <script lang="ts">

package/src/schema.ts

@@ -120,6 +120,7 @@ export interface Rule {
       /** 整个表单的值 */
       formValue: FormValue;
       prop: string;
+      config: any;
     },
     mForm: FormState | undefined,
   ) => void;
@@ -145,6 +146,7 @@ type FilterFunction = (
     parent?: Record<any, any>;
     formValue: Record<any, any>;
     prop: string;
+    config: any;
   },
 ) => boolean;
 
@@ -156,6 +158,7 @@ type OnChangeHandler = (
     values: Record<any, any>;
     parent?: Record<any, any>;
     formValue: Record<any, any>;
+    config: any;
   },
 ) => any;
 
@@ -188,8 +191,10 @@ type SelectOptionFunction = (
   mForm: FormState | undefined,
   data: {
     model: any;
+    prop?: string;
     formValues: any;
     formValue: any;
+    config: any;
   },
 ) => SelectOption[] | SelectGroupOption[];
 
@@ -199,6 +204,7 @@ type RemoteSelectOptionBodyFunction = (
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
   },
 ) => Record<string, any>;
 
@@ -209,6 +215,7 @@ type RemoteSelectOptionRequestFunction = (
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
   },
 ) => any;
 
@@ -499,6 +506,7 @@ export interface TabPaneConfig {
   lazy?: boolean;
   labelWidth?: string;
   items: FormConfig;
+  [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
   type: 'tab' | 'dynamic-tab';
@@ -539,6 +547,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
   label: string;
   width: string | number;
   sortable: boolean;
+  [key: string]: any;
 }
 
 /**

package/src/theme/form.scss

@@ -2,29 +2,36 @@
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-.m-form,
-.m-form-panel.el-card .el-card__body {
-  color: #333;
-  background-color: #fff;
-}
+.m-form {
+  .m-form-tip {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
 
-.m-form .m-form-tip {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
+  .m-form-schematic {
+    max-width: 50%;
+    height: 100%;
+  }
 
-.m-form .m-form-schematic {
-  max-width: 50%;
-  height: 100%;
-}
+  .el-table {
+    .cell > div.m-form-container {
+      display: block;
+    }
+  }
+
+  .el-tabs {
+    margin-bottom: 10px;
+  }
 
-.el-table {
-  .cell > div.m-form-container {
-    display: block;
+  .el-form-item.hidden {
+    .el-form-item__label {
+      display: none;
+    }
   }
 }

package/src/utils/form.ts

@@ -122,7 +122,11 @@ const initValueItem = function (
   // 这种情况比较多，提前结束
   if (name && !items && typeof initValue[name] !== 'undefined') {
     if (typeof value[name] === 'undefined') {
-      value[name] = typeof initValue[name] === 'object' ? cloneDeep(initValue[name]) : initValue[name];
+      if (type === 'number') {
+        value[name] = Number(initValue[name]);
+      } else {
+        value[name] = typeof initValue[name] === 'object' ? cloneDeep(initValue[name]) : initValue[name];
+      }
     }
 
     return value;
@@ -197,6 +201,7 @@ export const filterFunction = (mForm: FormState | undefined, config: any, props:
     parent: mForm?.parentValues || {},
     formValue: mForm?.values || props.model,
     prop: props.prop,
+    config: props.config,
   });
 };
 
@@ -238,6 +243,7 @@ export const getRules = function (mForm: FormState | undefined, rules: Rule[] |
             parent: mForm?.parentValues || {},
             formValue: mForm?.values || props.model,
             prop: props.prop,
+            config: props.config,
           },
           mForm,
         );