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