fix(form): form-item style error

This commit is contained in:
vben 2020-12-28 01:47:24 +08:00
parent 3b126e011c
commit 08df198710
8 changed files with 44 additions and 91 deletions

View File

@ -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;
}
}
}

View File

@ -55,7 +55,7 @@
export default defineComponent({
name: 'BasicFormAction',
components: {
FormItem: Form,
FormItem: Form.Item,
Button,
BasicArrow,
},

View File

@ -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

View File

@ -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[]) {

View File

@ -75,7 +75,9 @@
onUnmounted(() => {
const vditorInstance = unref(vditorRef);
if (!vditorInstance) return;
vditorInstance?.destroy?.();
try {
vditorInstance?.destroy?.();
} catch (error) {}
});
return {

View File

@ -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,

View File

@ -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>,
},

View File

@ -1,6 +1,6 @@
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;
}