mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-17 20:32:01 +08:00
refactor(components): 移除废弃的Description组件并改用原生antd组件
移除已废弃的Description组件及其相关类型定义和hook，替换为直接使用antd原生Descriptions组件 更新user-reset-pwd-modal和user-info-modal使用新的实现方式
This commit is contained in:
dap
@@ -1,3 +0,0 @@
|
||||
export { default as Description } from './src/description.vue';
|
||||
export * from './src/typing';
|
||||
export { useDescription } from './src/useDescription';
|
||||
@@ -1,205 +0,0 @@
|
||||
<script lang="tsx">
|
||||
import type { CardSize } from 'antdv-next/es/card/Card';
|
||||
import type { DescriptionsProps } from 'antdv-next/es/descriptions';
|
||||
|
||||
import type { CSSProperties, PropType, Slots } from 'vue';
|
||||
|
||||
import type { DescInstance, DescItem, DescriptionProps } from './typing';
|
||||
|
||||
import { computed, defineComponent, ref, toRefs, unref, useAttrs } from 'vue';
|
||||
|
||||
import { Card, Descriptions } from 'antdv-next';
|
||||
import { get, isFunction } from 'lodash-es';
|
||||
|
||||
const props = {
|
||||
bordered: { default: true, type: Boolean },
|
||||
column: {
|
||||
default: () => {
|
||||
return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
|
||||
},
|
||||
type: [Number, Object],
|
||||
},
|
||||
data: { type: Object },
|
||||
schema: {
|
||||
default: () => [],
|
||||
type: Array as PropType<DescItem[]>,
|
||||
},
|
||||
size: {
|
||||
default: 'small',
|
||||
type: String,
|
||||
validator: (v: string) =>
|
||||
['default', 'middle', 'small', undefined].includes(v),
|
||||
},
|
||||
title: { default: '', type: String },
|
||||
useCollapse: { default: true, type: Boolean },
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated 使用antd原生组件替代 下个版本将会移除
|
||||
*/
|
||||
export default defineComponent({
|
||||
emits: ['register'],
|
||||
// eslint-disable-next-line vue/order-in-components
|
||||
name: 'Description',
|
||||
// eslint-disable-next-line vue/order-in-components
|
||||
props,
|
||||
setup(props, { emit, slots }) {
|
||||
const propsRef = ref<null | Partial<DescriptionProps>>(null);
|
||||
|
||||
const prefixCls = 'description';
|
||||
const attrs = useAttrs();
|
||||
|
||||
// Custom title component: get title
|
||||
const getMergeProps = computed(() => {
|
||||
return {
|
||||
...props,
|
||||
...(unref(propsRef) as any),
|
||||
} as DescriptionProps;
|
||||
});
|
||||
|
||||
const getProps = computed(() => {
|
||||
const opt = {
|
||||
...unref(getMergeProps),
|
||||
title: undefined,
|
||||
};
|
||||
return opt as DescriptionProps;
|
||||
});
|
||||
|
||||
/**
|
||||
* @description: Whether to setting title
|
||||
*/
|
||||
const useWrapper = computed(() => !!unref(getMergeProps).title);
|
||||
|
||||
const getDescriptionsProps = computed(() => {
|
||||
return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
|
||||
});
|
||||
|
||||
/**
|
||||
* @description:设置desc
|
||||
*/
|
||||
function setDescProps(descProps: Partial<DescriptionProps>): void {
|
||||
// Keep the last setDrawerProps
|
||||
propsRef.value = {
|
||||
...(unref(propsRef) as Record<string, any>),
|
||||
...descProps,
|
||||
} as Record<string, any>;
|
||||
}
|
||||
|
||||
// Prevent line breaks
|
||||
function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
|
||||
if (!labelStyle && !labelMinWidth) {
|
||||
return label;
|
||||
}
|
||||
|
||||
const labelStyles: CSSProperties = {
|
||||
...labelStyle,
|
||||
minWidth: `${labelMinWidth}px `,
|
||||
};
|
||||
return <div style={labelStyles}>{label}</div>;
|
||||
}
|
||||
|
||||
function renderItem() {
|
||||
const { data, schema } = unref(getProps);
|
||||
return unref(schema)
|
||||
.map((item) => {
|
||||
const { contentMinWidth, field, render, show, span } = item;
|
||||
|
||||
if (show && isFunction(show) && !show(data)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getContent = () => {
|
||||
const _data = unref(getProps)?.data;
|
||||
if (!_data) {
|
||||
return null;
|
||||
}
|
||||
const getField = get(_data, field);
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
if (getField && !toRefs(_data).hasOwnProperty(field)) {
|
||||
return isFunction(render) ? render!('', _data) : '';
|
||||
}
|
||||
return isFunction(render)
|
||||
? render!(getField, _data)
|
||||
: (getField ?? '');
|
||||
};
|
||||
|
||||
const width = contentMinWidth;
|
||||
return (
|
||||
<Descriptions.Item
|
||||
key={field}
|
||||
label={renderLabel(item)}
|
||||
span={span}
|
||||
>
|
||||
{() => {
|
||||
if (!contentMinWidth) {
|
||||
return getContent();
|
||||
}
|
||||
const style: CSSProperties = {
|
||||
minWidth: `${width}px`,
|
||||
};
|
||||
return <div style={style}>{getContent()}</div>;
|
||||
}}
|
||||
</Descriptions.Item>
|
||||
);
|
||||
})
|
||||
.filter((item) => !!item);
|
||||
}
|
||||
|
||||
const renderDesc = () => {
|
||||
return (
|
||||
<Descriptions
|
||||
class={`${prefixCls}`}
|
||||
{...(unref(getDescriptionsProps) as any)}
|
||||
>
|
||||
{renderItem()}
|
||||
</Descriptions>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContainer = () => {
|
||||
const content = props.useCollapse ? (
|
||||
renderDesc()
|
||||
) : (
|
||||
<div>{renderDesc()}</div>
|
||||
);
|
||||
// Reduce the dom level
|
||||
if (!props.useCollapse) {
|
||||
return content;
|
||||
}
|
||||
|
||||
// const { canExpand, helpMessage } = unref(getCollapseOptions);
|
||||
const { title } = unref(getMergeProps);
|
||||
|
||||
function getSlot(slots: Slots, slot = 'default', data?: any) {
|
||||
if (!slots || !Reflect.has(slots, slot)) {
|
||||
return null;
|
||||
}
|
||||
if (!isFunction(slots[slot])) {
|
||||
console.error(`${slot} is not a function!`);
|
||||
return null;
|
||||
}
|
||||
const slotFn = slots[slot];
|
||||
if (!slotFn) return null;
|
||||
const params = { ...data };
|
||||
return slotFn(params);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card size={props.size as CardSize} title={title}>
|
||||
{{
|
||||
default: () => content,
|
||||
extra: () => getSlot(slots, 'extra'),
|
||||
}}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const methods: DescInstance = {
|
||||
setDescProps,
|
||||
};
|
||||
|
||||
emit('register', methods);
|
||||
return () => (unref(useWrapper) ? renderContainer() : renderDesc());
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -1,48 +0,0 @@
|
||||
import type { DescriptionsProps } from 'antdv-next/es/descriptions';
|
||||
import type { JSX } from 'vue/jsx-runtime';
|
||||
|
||||
import type { CSSProperties, VNode } from 'vue';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
export interface DescItem {
|
||||
labelMinWidth?: number;
|
||||
contentMinWidth?: number;
|
||||
labelStyle?: CSSProperties;
|
||||
field: string;
|
||||
label: JSX.Element | string | VNode;
|
||||
// Merge column
|
||||
span?: number;
|
||||
show?: (...arg: any) => boolean;
|
||||
// render
|
||||
render?: (
|
||||
val: any,
|
||||
data: Recordable<any>,
|
||||
) => Element | JSX.Element | number | string | undefined | VNode;
|
||||
}
|
||||
|
||||
export interface DescriptionProps extends DescriptionsProps {
|
||||
// Whether to include the collapse component
|
||||
useCollapse?: boolean;
|
||||
/**
|
||||
* item configuration
|
||||
* @type DescItem
|
||||
*/
|
||||
schema: DescItem[];
|
||||
/**
|
||||
* 数据
|
||||
* @type object
|
||||
*/
|
||||
data: Recordable<any>;
|
||||
}
|
||||
|
||||
export interface DescInstance {
|
||||
setDescProps(descProps: Partial<DescriptionProps>, delay?: boolean): void;
|
||||
}
|
||||
|
||||
export type Register = (descInstance: DescInstance) => void;
|
||||
|
||||
/**
|
||||
* @description:
|
||||
*/
|
||||
export type UseDescReturnType = [Register, DescInstance];
|
||||
@@ -1,47 +0,0 @@
|
||||
import type {
|
||||
DescInstance,
|
||||
DescriptionProps,
|
||||
UseDescReturnType,
|
||||
} from './typing';
|
||||
|
||||
import { getCurrentInstance, ref, unref } from 'vue';
|
||||
|
||||
/**
|
||||
* @deprecated 使用antd原生组件替代 下个版本将会移除
|
||||
*/
|
||||
export function useDescription(
|
||||
props?: Partial<DescriptionProps>,
|
||||
): UseDescReturnType {
|
||||
if (!getCurrentInstance()) {
|
||||
throw new Error(
|
||||
'useDescription() can only be used inside setup() or functional components!',
|
||||
);
|
||||
}
|
||||
const desc = ref<DescInstance | null>(null);
|
||||
const loaded = ref(false);
|
||||
|
||||
function register(instance: DescInstance) {
|
||||
// if (unref(loaded) && import.meta.env.PROD) {
|
||||
// return;
|
||||
// }
|
||||
desc.value = instance;
|
||||
props && instance.setDescProps(props);
|
||||
loaded.value = true;
|
||||
}
|
||||
|
||||
const methods: DescInstance = {
|
||||
setDescProps: (
|
||||
descProps: Partial<DescriptionProps>,
|
||||
delay = false,
|
||||
): void => {
|
||||
if (!delay) {
|
||||
unref(desc)?.setDescProps(descProps);
|
||||
return;
|
||||
}
|
||||
// 奇怪的问题 在modal中需要setTimeout才会生效
|
||||
setTimeout(() => unref(desc)?.setDescProps(descProps));
|
||||
},
|
||||
};
|
||||
|
||||
return [register, methods];
|
||||
}
|
||||
Reference in New Issue
Block a user