@tmagic/form 1.2.0-beta.8 → 1.2.0

package/src/fields/DynamicField.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDynamicField">
 /**
  * 动态表单，目前只支持input类型字段
  * inputType: 'dynamic-field',
@@ -39,7 +39,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Hidden.vue

@@ -2,7 +2,7 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormHidden">
 import { HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 

package/src/fields/Link.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormLink">
 import { computed, inject, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -33,7 +33,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Number.vue

@@ -15,7 +15,7 @@
   ></TMagicInputNumber>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormNumber">
 import { inject } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
@@ -31,7 +31,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change', 'input']);

package/src/fields/RadioGroup.vue

@@ -1,12 +1,16 @@
 <template>
   <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <TMagicRadio v-for="option in config.options" :label="option.value" :key="`${option.value}`">{{
-      option.text
-    }}</TMagicRadio>
+    <TMagicRadio
+      v-for="option in config.options"
+      :label="option.value"
+      :value="option.value"
+      :key="`${option.value}`"
+      >{{ option.text }}</TMagicRadio
+    >
   </TMagicRadioGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormRadioGroup">
 import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
 import { RadioGroupConfig } from '../schema';
@@ -20,7 +24,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Select.vue

@@ -25,7 +25,7 @@
   </TMagicSelect>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelect">
 import { inject, nextTick, onBeforeMount, onMounted, Ref, ref, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
@@ -45,7 +45,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);
@@ -99,11 +99,16 @@ const getOptions = async () => {
 
   const { config } = props;
   const { option } = config;
-  let { body } = option;
+  const { root = '', totalKey = 'total' } = option;
+  let { body = {}, url } = option;
+
+  if (typeof url === 'function') {
+    url = await url(mForm, { model: props.model, formValue: mForm?.values });
+  }
 
   let postOptions: Record<string, any> = {
     method: option.method || 'POST',
-    url: option.url,
+    url,
     cache: option.cache,
     timeout: option.timeout,
     mode: option.mode,
@@ -111,22 +116,21 @@ const getOptions = async () => {
     json: option.json || false,
   };
 
-  if (body) {
-    if (typeof body === 'function') {
-      body = body(mForm, {
-        model: props.model,
-        formValue: mForm?.values,
-        formValues: mForm?.values,
-        config: props.config,
-      }) as Record<string, any>;
-    }
-
-    body.query = query.value;
-    body.pgSize = pgSize.value;
-    body.pgIndex = pgIndex.value;
-    postOptions.data = body;
+  if (typeof body === 'function') {
+    body = body(mForm, {
+      model: props.model,
+      formValue: mForm?.values,
+      formValues: mForm?.values,
+      config: props.config,
+    }) as Record<string, any>;
   }
 
+  body.query = query.value;
+  body.pgSize = pgSize.value;
+  body.pgIndex = pgIndex.value;
+
+  postOptions.data = body;
+
   const requestFuc = getConfig('request') as Function;
 
   if (typeof option.beforeRequest === 'function') {
@@ -151,10 +155,14 @@ const getOptions = async () => {
     });
   }
 
-  const optionsData = res[option.root];
+  const optionsData = root.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
 
-  if (res.total > 0) {
-    total.value = res.total;
+  const resTotal = globalThis.parseInt(
+    totalKey.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res),
+    10,
+  );
+  if (resTotal > 0) {
+    total.value = resTotal;
   }
 
   remoteData.value = remoteData.value.concat(optionsData);
@@ -214,6 +222,8 @@ const getInitOption = async () => {
 
   const { config } = props;
   const { option } = config;
+  const { root = '', initRoot = '' } = option;
+  let { initBody = {} } = option;
 
   let options: SelectOption[] | SelectGroupOption[] = [];
 
@@ -226,24 +236,53 @@ const getInitOption = async () => {
     url = await url(mForm, { model: props.model, formValue: mForm?.values });
   }
 
-  const postOptions: Record<string, any> = {
+  if (typeof initBody === 'function') {
+    initBody = initBody(mForm, {
+      model: props.model,
+      formValue: mForm?.values,
+      formValues: mForm?.values,
+      config: props.config,
+    }) as Record<string, any>;
+  }
+
+  let postOptions: Record<string, any> = {
     method: option.method || 'POST',
     url,
     data: {
       id: props.model[props.name],
+      ...initBody,
     },
     mode: option.mode,
     headers: option.headers || {},
     json: option.json || false,
   };
+
+  if (typeof option.beforeInitRequest === 'function') {
+    postOptions = option.beforeInitRequest(mForm, postOptions, {
+      model: props.model,
+      formValue: mForm?.values,
+    });
+  }
+
   if (option.method?.toLocaleLowerCase() === 'jsonp') {
     postOptions.jsonpCallback = option.jsonpCallback || 'callback';
   }
 
   const requestFuc = getConfig('request') as Function;
-  const res = await requestFuc(postOptions);
+  let res = await requestFuc(postOptions);
+
+  if (typeof option.afterRequest === 'function') {
+    res = option.afterRequest(mForm, res, {
+      model: props.model,
+      formValue: mForm?.values,
+      formValues: mForm?.values,
+      config: props.config,
+    });
+  }
 
-  let initData = res[option.root];
+  let initData = (initRoot || root)
+    .split('.')
+    .reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
   if (initData) {
     if (!Array.isArray(initData)) {
       initData = [initData];

package/src/fields/SelectOptionGroups.vue

@@ -12,7 +12,7 @@
   </TMagicOptionGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelectOptionGroups">
 import { getConfig, TMagicOptionGroup } from '@tmagic/design';
 
 import { SelectGroupOption } from '../schema';

package/src/fields/SelectOptions.vue

@@ -8,7 +8,7 @@
   ></TMagicOption>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelectOptions">
 import { TMagicOption } from '@tmagic/design';
 
 import { SelectOption } from '../schema';

package/src/fields/Switch.vue

@@ -9,7 +9,7 @@
   ></TMagicSwitch>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSwitch">
 import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
@@ -25,7 +25,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Text.vue

@@ -23,7 +23,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormText">
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
@@ -40,7 +40,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change', 'input']);

package/src/fields/Textarea.vue

@@ -12,7 +12,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormTextarea">
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
@@ -28,7 +28,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change', 'input']);

package/src/fields/Time.vue

@@ -1,6 +1,8 @@
 <template>
   <TMagicTimePicker
     v-model="model[name]"
+    :value-format="config.valueFormat || 'HH:mm:ss'"
+    :format="config.format || 'HH:mm:ss'"
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
@@ -8,7 +10,7 @@
   ></TMagicTimePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormTime">
 import { TMagicTimePicker } from '@tmagic/design';
 
 import { TimeConfig } from '../schema';
@@ -22,7 +24,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/schema.ts

@@ -348,6 +348,7 @@ export interface HiddenConfig extends FormItem {
 export interface DateConfig extends FormItem, Input {
   type: 'date';
   format?: 'YYYY-MM-dd HH:mm:ss' | string;
+  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
 }
 
 /**
@@ -365,6 +366,8 @@ export interface DateTimeConfig extends FormItem, Input {
  */
 export interface TimeConfig extends FormItem, Input {
   type: 'time';
+  format?: 'HH:mm:ss' | string;
+  valueFormat?: 'HH:mm:ss' | string;
 }
 
 /**
@@ -430,7 +433,7 @@ export interface SelectConfig extends FormItem, Input {
   options: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
   remote: true;
   option: {
-    url: string;
+    url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
     initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
     method?: 'jsonp' | string;
     cache?: boolean;
@@ -441,13 +444,22 @@ export interface SelectConfig extends FormItem, Input {
     };
     json?: false | boolean;
     body?: Record<string, any> | RemoteSelectOptionBodyFunction;
+    initBody?: Record<string, any> | RemoteSelectOptionBodyFunction;
     jsonpCallback?: 'callback' | string;
     afterRequest?: RemoteSelectOptionRequestFunction;
+    afterInitRequest?: RemoteSelectOptionRequestFunction;
     beforeRequest?: (mForm: FormState | undefined, postOptions: Record<string, any>, data: any) => Record<string, any>;
-    root: string;
+    beforeInitRequest?: (
+      mForm: FormState | undefined,
+      postOptions: Record<string, any>,
+      data: any,
+    ) => Record<string, any>;
+    root?: string;
+    totalKey?: string;
+    initRoot?: string;
     item?: RemoteSelectOptionItemFunction;
-    value: string | SelectOptionValueFunction;
-    text: string | SelectOptionTextFunction;
+    value?: string | SelectOptionValueFunction;
+    text?: string | SelectOptionTextFunction;
   };
 }
 
@@ -610,6 +622,7 @@ export interface TableConfig extends FormItem {
   border?: boolean;
   /** 显示行号 */
   showIndex?: boolean;
+  pagination?: boolean;
   enum?: any[];
   /** 是否显示添加按钮 */
   addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
@@ -629,6 +642,7 @@ export interface TableConfig extends FormItem {
   enableFullscreen?: boolean;
   fixed?: boolean;
   itemExtra?: string | FilterFunction;
+  rowKey: string;
 }
 
 export interface GroupListConfig extends FormItem {

package/src/theme/form.scss

@@ -30,7 +30,7 @@
   }
 
   .el-form-item.hidden {
-    .el-form-item__label {
+    > .el-form-item__label {
       display: none;
     }
   }

package/src/utils/form.ts

@@ -62,9 +62,9 @@ const initItemsValue = (
   { items, name, extensible }: any,
 ) => {
   if (Array.isArray(initValue[name])) {
-    value[name] = initValue[name].map((v: any, index: number) => init(mForm, items, v, value[name]?.[index]));
+    value[name] = initValue[name].map((v: any, index: number) => createValues(mForm, items, v, value[name]?.[index]));
   } else {
-    value[name] = init(mForm, items, initValue[name], value[name]);
+    value[name] = createValues(mForm, items, initValue[name], value[name]);
     if (extensible) {
       value[name] = Object.assign({}, initValue[name], value[name]);
     }
@@ -129,7 +129,7 @@ const initValueItem = function (
 
   if (!name) {
     // 没有配置name，直接跳过
-    return init(mForm, items, initValue, value);
+    return createValues(mForm, items, initValue, value);
   }
 
   setValue(mForm, value, initValue, item);
@@ -137,7 +137,7 @@ const initValueItem = function (
   return value;
 };
 
-const init = function (
+export const createValues = function (
   mForm: FormState | undefined,
   config: FormConfig | TabPaneConfig[] = [],
   initValue: FormValue = {},
@@ -197,6 +197,10 @@ export const filterFunction = (mForm: FormState | undefined, config: any, props:
 };
 
 export const display = function (mForm: FormState | undefined, config: any, props: any) {
+  if (config === 'expand') {
+    return config;
+  }
+
   if (typeof config === 'function') {
     return filterFunction(mForm, config, props);
   }
@@ -249,7 +253,7 @@ export const initValue = async (
 ) => {
   if (!Array.isArray(config)) throw new Error('config应该为数组');
 
-  let valuesTmp = init(mForm, config, toRaw(initValues), {});
+  let valuesTmp = createValues(mForm, config, toRaw(initValues), {});
 
   const [firstForm] = config as [ContainerCommonConfig];
   if (firstForm && typeof firstForm.onInitValue === 'function') {