@tmagic/form 1.0.0-rc.9 → 1.0.2

package/dist/types/src/schema.d.ts

@@ -92,6 +92,7 @@ export interface Rule {
         /** 整个表单的值 */
         formValue: FormValue;
         prop: string;
+        config: any;
     }, mForm: FormState | undefined) => void;
 }
 export interface Input {
@@ -107,12 +108,14 @@ declare type FilterFunction = (mForm: FormState | undefined, data: {
     parent?: Record<any, any>;
     formValue: Record<any, any>;
     prop: string;
+    config: any;
 }) => boolean;
 declare type OnChangeHandler = (mForm: FormState | undefined, value: any, data: {
     model: Record<any, any>;
     values: Record<any, any>;
     parent?: Record<any, any>;
     formValue: Record<any, any>;
+    config: any;
 }) => any;
 declare type DefaultValueFunction = (mForm: FormState | undefined) => any;
 /**
@@ -141,16 +144,19 @@ declare type SelectOptionFunction = (mForm: FormState | undefined, data: {
     prop?: string;
     formValues: any;
     formValue: any;
+    config: any;
 }) => SelectOption[] | SelectGroupOption[];
 declare type RemoteSelectOptionBodyFunction = (mForm: FormState | undefined, data: {
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
 }) => Record<string, any>;
 declare type RemoteSelectOptionRequestFunction = (mForm: FormState | undefined, res: any, data: {
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
 }) => any;
 declare type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[];
 declare type SelectOptionValueFunction = (item: Record<string, any>) => any;
@@ -168,6 +174,7 @@ interface CascaderOption {
  */
 export interface DaterangeConfig extends FormItem {
     type: 'daterange';
+    defaultTime?: Date[];
     names?: string[];
 }
 /**
@@ -235,6 +242,7 @@ export interface DateConfig extends FormItem, Input {
  */
 export interface DateTimeConfig extends FormItem, Input {
     type: 'datetime';
+    defaultTime?: Date[];
     format?: 'YYYY-MM-dd HH:mm:ss' | string;
     valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
 }
@@ -396,6 +404,7 @@ export interface TabPaneConfig {
     lazy?: boolean;
     labelWidth?: string;
     items: FormConfig;
+    [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
     type: 'tab' | 'dynamic-tab';
@@ -433,6 +442,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
     label: string;
     width: string | number;
     sortable: boolean;
+    [key: string]: any;
 }
 /**
  * 表格容器

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.9",
+  "version": "1.0.2",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "1.0.0-rc.9",
+    "@tmagic/utils": "1.0.2",
     "element-plus": "^2.2.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.2",

package/src/containers/Container.vue

@@ -217,6 +217,7 @@ export default defineComponent({
           values: mForm?.initValues,
           formValue: mForm?.values,
           prop: itemProp.value,
+          config: props.config,
         });
       }
 
@@ -234,6 +235,7 @@ export default defineComponent({
           values: mForm?.initValues,
           formValue: mForm?.values,
           prop: itemProp.value,
+          config: props.config,
         });
       }
     };

package/src/containers/GroupList.vue

@@ -80,6 +80,8 @@ export default defineComponent({
         return props.config.addable(mForm, {
           model: props.model[props.name],
           formValue: mForm?.values,
+          prop: props.prop,
+          config: props.config,
         });
       }
 
@@ -101,6 +103,8 @@ export default defineComponent({
         initValues = await props.config.defaultAdd(mForm, {
           model: props.model[props.name],
           formValue: mForm?.values,
+          prop: props.prop,
+          config: props.config,
         });
       } else if (props.config.defaultAdd) {
         initValues = props.config.defaultAdd;

package/src/containers/Table.vue

@@ -154,7 +154,7 @@
 /* eslint-disable no-param-reassign */
 import { computed, defineComponent, inject, onMounted, PropType, ref, toRefs } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons';
-import { ElMessage, ElTable, ElUpload } from 'element-plus';
+import { ElMessage, ElTable, UploadFile } from 'element-plus';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';
 
@@ -163,23 +163,6 @@ import { asyncLoadJs, sleep } from '@tmagic/utils';
 import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
 import { display, initValue } from '../utils/form';
 
-export type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail';
-
-export interface ElFile extends File {
-  uid: number;
-}
-
-export type UploadFile = {
-  name: string;
-  percentage?: number;
-  status: UploadStatus;
-  size: number;
-  response?: unknown;
-  uid: number;
-  url?: string;
-  raw: ElFile;
-};
-
 let loadedAMapJS = false; // 是否加载完js
 let firstLoadingAMapJS = true; // 否是第一次请求
 
@@ -241,7 +224,7 @@ export default defineComponent({
     const mForm = inject<FormState | undefined>('mForm');
 
     const elTable = ref<InstanceType<typeof ElTable>>();
-    const excelBtn = ref<InstanceType<typeof ElUpload>>();
+    const excelBtn = ref<any>();
     const mTable = ref<HTMLDivElement>();
 
     const pagesize = ref(10);
@@ -476,7 +459,7 @@ export default defineComponent({
         }
         emit('select', selection, row);
         if (typeof props.config.onSelect === 'function') {
-          props.config.onSelect(mForm, { selection, row });
+          props.config.onSelect(mForm, { selection, row, config: props.config });
         }
       },
 

package/src/containers/Tabs.vue

@@ -59,12 +59,12 @@ const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) =>
   tab.name = tab.paneName;
 
   if (typeof config.onTabClick === 'function') {
-    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
   }
 
   const tabConfig = config.items.find((item: TabPaneConfig) => tab.name === item.status);
   if (tabConfig && typeof tabConfig.onTabClick === 'function') {
-    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
   }
 };
 
@@ -136,7 +136,11 @@ const Tab = defineComponent({
         if (!props.config.name) throw new Error('dynamic tab 必须配置name');
 
         if (typeof props.config.onTabAdd === 'function') {
-          props.config.onTabAdd(mForm, { model: props.model });
+          props.config.onTabAdd(mForm, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config,
+          });
         } else if (tabs.value.length > 0) {
           const newObj = cloneDeep(tabs.value[0]);
           newObj.title = `标签${tabs.value.length + 1}`;
@@ -150,7 +154,11 @@ const Tab = defineComponent({
         if (!props.config.name) throw new Error('dynamic tab 必须配置name');
 
         if (typeof props.config.onTabRemove === 'function') {
-          props.config.onTabRemove(mForm, tabName, { model: props.model });
+          props.config.onTabRemove(mForm, tabName, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config,
+          });
         } else {
           props.model[props.config.name].splice(+tabName, 1);
 
@@ -169,7 +177,7 @@ const Tab = defineComponent({
       changeHandler: () => {
         emit('change', props.model);
         if (typeof props.config.onChange === 'function') {
-          props.config.onChange(mForm, { model: props.model });
+          props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
         }
       },
     };

package/src/fields/DateTime.vue

@@ -1,17 +1,16 @@
 <template>
-  <div v-if="model">
-    <el-date-picker
-      v-model="model[name]"
-      popper-class="magic-datetime-picker-popper"
-      type="datetime"
-      :size="size"
-      :placeholder="config.placeholder"
-      :disabled="disabled"
-      :format="config.format || 'YYYY-MM-DD HH:mm:ss'"
-      :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
-      @change="changeHandler"
-    ></el-date-picker>
-  </div>
+  <el-date-picker
+    v-model="model[name]"
+    popper-class="magic-datetime-picker-popper"
+    type="datetime"
+    :size="size"
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    :format="config.format || 'YYYY-MM-DD HH:mm:ss'"
+    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+    :default-time="config.defaultTime || [new Date(2000, 1, 1, 23, 59, 59)]"
+    @change="changeHandler"
+  ></el-date-picker>
 </template>
 
 <script lang="ts">

package/src/fields/Daterange.vue

@@ -1,17 +1,16 @@
 <template>
-  <div>
-    <el-date-picker
-      v-model="value"
-      type="datetimerange"
-      range-separator="-"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      :size="size"
-      :unlink-panels="true"
-      :disabled="disabled"
-      @change="changeHandler"
-    ></el-date-picker>
-  </div>
+  <el-date-picker
+    v-model="value"
+    type="datetimerange"
+    range-separator="-"
+    start-placeholder="开始日期"
+    end-placeholder="结束日期"
+    :size="size"
+    :unlink-panels="true"
+    :disabled="disabled"
+    :default-time="config.defaultTime || [new Date(2000, 1, 1, 23, 59, 59)]"
+    @change="changeHandler"
+  ></el-date-picker>
 </template>
 
 <script lang="ts">

package/src/fields/Select.vue

@@ -134,6 +134,7 @@ export default defineComponent({
             model: props.model,
             formValue: mForm?.values,
             formValues: mForm?.values,
+            config: props.config,
           }) as Record<string, any>;
         }
 
@@ -163,6 +164,7 @@ export default defineComponent({
           model: props.model,
           formValue: mForm?.values,
           formValues: mForm?.values,
+          config: props.config,
         });
       }
 
@@ -287,6 +289,7 @@ export default defineComponent({
                 prop: props.prop,
                 formValues: mForm?.values,
                 formValue: mForm?.values,
+                config: props.config,
               }),
             ).then((data) => {
               options.value = data;

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;
 
@@ -191,6 +194,7 @@ type SelectOptionFunction = (
     prop?: string;
     formValues: any;
     formValue: any;
+    config: any;
   },
 ) => SelectOption[] | SelectGroupOption[];
 
@@ -200,6 +204,7 @@ type RemoteSelectOptionBodyFunction = (
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
   },
 ) => Record<string, any>;
 
@@ -210,6 +215,7 @@ type RemoteSelectOptionRequestFunction = (
     model: any;
     formValue: any;
     formValues: any;
+    config: any;
   },
 ) => any;
 
@@ -231,6 +237,7 @@ interface CascaderOption {
  */
 export interface DaterangeConfig extends FormItem {
   type: 'daterange';
+  defaultTime?: Date[];
   names?: string[];
 }
 
@@ -311,6 +318,7 @@ export interface DateConfig extends FormItem, Input {
  */
 export interface DateTimeConfig extends FormItem, Input {
   type: 'datetime';
+  defaultTime?: Date[];
   format?: 'YYYY-MM-dd HH:mm:ss' | string;
   valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
 }
@@ -500,6 +508,7 @@ export interface TabPaneConfig {
   lazy?: boolean;
   labelWidth?: string;
   items: FormConfig;
+  [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
   type: 'tab' | 'dynamic-tab';
@@ -540,6 +549,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
   label: string;
   width: string | number;
   sortable: boolean;
+  [key: string]: any;
 }
 
 /**

package/src/utils/form.ts

@@ -71,7 +71,7 @@ const initItemsValue = (
   { items, name, extensible }: any,
 ) => {
   if (Array.isArray(initValue[name])) {
-    value[name] = initValue[name].map((v: any) => init(mForm, items, v));
+    value[name] = initValue[name].map((v: any, index: number) => init(mForm, items, v, value[name]?.[index]));
   } else {
     value[name] = init(mForm, items, initValue[name], value[name]);
     if (extensible) {
@@ -201,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,
   });
 };
 
@@ -242,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,
         );