fix(form): form-item style error

vben
1 parent 3b126e01
Showing 8 changed files with 44 additions and 91 deletions
src/components/Form/src/BasicForm.vue
src/components/Form/src/components/FormAction.vue
src/components/Form/src/components/FormItem.tsx
src/components/Form/src/hooks/useFormEvents.ts
src/components/Markdown/src/index.vue
src/components/Table/src/BasicTable.vue
src/components/Table/src/props.ts
src/components/Table/src/types/tableAction.ts
@@ -53,7 +53,6 @@
   export default defineComponent({
     name: 'BasicForm',
     components: { FormItem, Form, Row, FormAction },
-    inheritAttrs: false,
     props: basicProps,
     emits: ['advanced-change', 'reset', 'submit', 'register'],
     setup(props, { emit }) {
@@ -279,7 +278,7 @@
  
     &--compact {
       .ant-form-item {
-        margin-bottom: 8px;
+        margin-bottom: 8px !important;
       }
     }
   }
@@ -55,7 +55,7 @@
   export default defineComponent({
     name: 'BasicFormAction',
     components: {
-      FormItem: Form,
+      FormItem: Form.Item,
       Button,
       BasicArrow,
     },
@@ -97,7 +97,7 @@ export default defineComponent({
       return disabled;
     });
  
-    const getShow = computed(() => {
+    function getShow() {
       const { show, ifShow } = props.schema;
       const { showAdvancedButton } = props.formProps;
       const itemIsAdvanced = showAdvancedButton
@@ -122,7 +122,7 @@ export default defineComponent({
       }
       isShow = isShow && itemIsAdvanced;
       return { isShow, isIfShow };
-    });
+    }
  
     function handleRules(): ValidationRule[] {
       const {
@@ -310,7 +310,7 @@ export default defineComponent({
       const { baseColProps = {} } = props.formProps;
  
       const realColProps = { ...baseColProps, ...colProps };
-      const { isIfShow, isShow } = unref(getShow);
+      const { isIfShow, isShow } = getShow();
  
       const getContent = () => {
         return colSlot
@@ -178,11 +178,12 @@ export function useFormEvents({
   }
  
   async function validateFields(nameList?: NamePath[] | undefined) {
-    return await unref(formElRef)?.validateFields(nameList);
+    const res = await unref(formElRef)?.validateFields(nameList || []);
+    return res;
   }
  
   async function validate(nameList?: NamePath[] | undefined) {
-    return await unref(formElRef)?.validate(nameList);
+    return await unref(formElRef)?.validate(nameList || []);
   }
  
   async function clearValidate(name?: string | string[]) {
@@ -75,7 +75,9 @@
       onUnmounted(() => {
         const vditorInstance = unref(vditorRef);
         if (!vditorInstance) return;
-        vditorInstance?.destroy?.();
+        try {
+          vditorInstance?.destroy?.();
+        } catch (error) {}
       });
  
       return {
@@ -80,14 +80,13 @@
       const innerPropsRef = ref<Partial<BasicTableProps>>();
       const [registerForm, { getFieldsValue }] = useForm();
  
-      const getMergeProps = computed(
-        (): BasicTableProps => {
-          return {
-            ...props,
-            ...unref(innerPropsRef),
-          } as BasicTableProps;
-        }
-      );
+      const getMergeProps = computed(() => {
+        return {
+          ...props,
+          ...unref(innerPropsRef),
+        } as BasicTableProps;
+      });
+
       const { loadingRef } = useLoading(getMergeProps);
       const { getPaginationRef, setPagination } = usePagination(getMergeProps);
       const { getColumnsRef, setColumns } = useColumns(getMergeProps, getPaginationRef);
@@ -123,7 +122,7 @@
           getMergeProps
         );
         const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting;
-        const titleData: any =
+        const titleData: Recordable =
           hideTitle && !isString(title)
             ? {}
             : {
@@ -313,6 +312,7 @@
       useExpose<TableActionType>(tableAction);
  
       emit('register', tableAction);
+
       return {
         tableElRef,
         getBindValues,
@@ -10,51 +10,31 @@ import type {
 } from './types/table';
 import type { FormProps } from '/@/components/Form';
 import { DEFAULT_SORT_FN, FETCH_SETTING } from './const';
+import { propTypes } from '/@/utils/propTypes';
  
 // 注释看 types/table
 export const basicProps = {
   tableSetting: {
     type: Object as PropType<TableSetting>,
   },
-  inset: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
+  inset: propTypes.bool,
   sortFn: {
     type: Function as PropType<(sortInfo: SorterResult) => any>,
     default: DEFAULT_SORT_FN,
   },
  
-  showTableSetting: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  autoCreateKey: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  striped: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  showSummary: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
+  showTableSetting: propTypes.bool,
+  autoCreateKey: propTypes.bool.def(true),
+  striped: propTypes.bool.def(true),
+  showSummary: propTypes.bool,
  
   summaryFunc: {
     type: [Function, Array] as PropType<(...arg: any[]) => any[]>,
     default: null,
   },
  
-  canColDrag: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  isTreeTable: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
+  canColDrag: propTypes.bool.def(true),
+  isTreeTable: propTypes.bool,
   api: {
     type: Function as PropType<(...arg: any[]) => Promise<any>>,
     default: null,
@@ -78,22 +58,16 @@ export const basicProps = {
     },
   },
   // 立即请求接口
-  immediate: { type: Boolean as PropType<boolean>, default: true },
+  immediate: propTypes.bool.def(true),
  
-  emptyDataIsShowTable: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  emptyDataIsShowTable: propTypes.bool.def(true),
   // 额外的请求参数
   searchInfo: {
     type: Object as PropType<any>,
     default: null,
   },
   // 使用搜索表单
-  useSearchForm: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
+  useSearchForm: propTypes.bool,
   // 表单配置
   formConfig: {
     type: Object as PropType<Partial<FormProps>>,
@@ -103,10 +77,7 @@ export const basicProps = {
     type: [Array] as PropType<BasicColumn[]>,
     default: null,
   },
-  showIndexColumn: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  showIndexColumn: propTypes.bool.def(true),
   indexColumnProps: {
     type: Object as PropType<BasicColumn>,
     default: null,
@@ -115,22 +86,10 @@ export const basicProps = {
     type: Object as PropType<BasicColumn>,
     default: null,
   },
-  ellipsis: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  canResize: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  clearSelectOnPageChange: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  resizeHeightOffset: {
-    type: Number as PropType<number>,
-    default: 0,
-  },
+  ellipsis: propTypes.bool.def(true),
+  canResize: propTypes.bool.def(true),
+  clearSelectOnPageChange: propTypes.bool,
+  resizeHeightOffset: propTypes.number.def(0),
   rowSelection: {
     type: Object as PropType<TableRowSelection | null>,
     default: null,
@@ -142,30 +101,22 @@ export const basicProps = {
   titleHelpMessage: {
     type: [String, Array] as PropType<string | string[]>,
   },
-  maxHeight: {
-    type: Number as PropType<number>,
-  },
+  maxHeight: propTypes.number,
   dataSource: {
-    type: Array as PropType<any[]>,
+    type: Array as PropType<Recordable[]>,
     default: null,
   },
   rowKey: {
-    type: [String, Function] as PropType<string | ((record: any) => string)>,
+    type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
     default: '',
   },
-  bordered: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
+  bordered: propTypes.bool,
   pagination: {
     type: [Object, Boolean] as PropType<PaginationProps | boolean>,
     default: null,
   },
  
-  loading: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
+  loading: propTypes.bool,
   rowClassName: {
     type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
   },
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 export interface ActionItem extends ButtonProps {
-  onClick?: any;
+  onClick?: Fn;
   label: string;
   color?: 'success' | 'error' | 'warning';
   icon?: string;
@@ -11,7 +11,7 @@ export interface PopConfirm {
   title: string;
   okText?: string;
   cancelText?: string;
-  confirm: any;
-  cancel?: any;
+  confirm: Fn;
+  cancel?: Fn;
   icon?: string;
 }