review:【全局】Description 组件
parent
7a9df83d71
commit
059687e1f5
|
@ -1,12 +1,14 @@
|
||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
|
|
||||||
import type { DescriptionsProps } from 'ant-design-vue';
|
import type { DescriptionsProps } from 'ant-design-vue';
|
||||||
|
|
||||||
import type { PropType } from 'vue';
|
import type { PropType } from 'vue';
|
||||||
|
|
||||||
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
|
||||||
|
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||||
|
|
||||||
/** 对 Descriptions 进行二次封装 */
|
/** 对 Descriptions 进行二次封装 */
|
||||||
const Description = defineComponent({
|
const Description = defineComponent({
|
||||||
name: 'Descriptions',
|
name: 'Descriptions',
|
||||||
|
@ -27,15 +29,21 @@ const Description = defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
setup(props: DescriptionsOptions) {
|
setup(props: DescriptionsOptions) {
|
||||||
|
// TODO @puhui999:每个 field 的 slot 的考虑
|
||||||
|
// TODO @puhui999:from 5.0:extra: () => getSlot(slots, 'extra')
|
||||||
/** 过滤掉不需要展示的 */
|
/** 过滤掉不需要展示的 */
|
||||||
const shouldShowItem = (item: DescriptionItemSchema) => {
|
const shouldShowItem = (item: DescriptionItemSchema) => {
|
||||||
if (item.hidden === undefined) return true;
|
if (item.hidden === undefined) return true;
|
||||||
return typeof item.hidden === 'function' ? !item.hidden(props.data) : !item.hidden;
|
return typeof item.hidden === 'function'
|
||||||
|
? !item.hidden(props.data)
|
||||||
|
: !item.hidden;
|
||||||
};
|
};
|
||||||
/** 渲染内容 */
|
/** 渲染内容 */
|
||||||
const renderContent = (item: DescriptionItemSchema) => {
|
const renderContent = (item: DescriptionItemSchema) => {
|
||||||
if (item.content) {
|
if (item.content) {
|
||||||
return typeof item.content === 'function' ? item.content(props.data) : item.content;
|
return typeof item.content === 'function'
|
||||||
|
? item.content(props.data)
|
||||||
|
: item.content;
|
||||||
}
|
}
|
||||||
return item.field ? props.data?.[item.field] : null;
|
return item.field ? props.data?.[item.field] : null;
|
||||||
};
|
};
|
||||||
|
@ -67,5 +75,6 @@ const Description = defineComponent({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// TODO @puhui999:from 5.0:emits: ['register'] 事件
|
||||||
export default Description;
|
export default Description;
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
import type { DescriptionsProps } from 'ant-design-vue';
|
import type { DescriptionsProps } from 'ant-design-vue';
|
||||||
|
|
||||||
import type { CSSProperties, VNode } from 'vue';
|
import type { CSSProperties, VNode } from 'vue';
|
||||||
|
|
||||||
|
// TODO @puhui999:【content】这个纠结下;1)vben2.0 是 render;https://doc.vvbin.cn/components/desc.html#usage 2)
|
||||||
|
// TODO @puhui999:vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
|
||||||
|
// TODO @puhui999:【hidden】这个纠结下;1)vben2.0 是 show;
|
||||||
export interface DescriptionItemSchema {
|
export interface DescriptionItemSchema {
|
||||||
label: string | VNode; // 内容的描述
|
label: string | VNode; // 内容的描述
|
||||||
field?: string; // 对应 data 中的字段名
|
field?: string; // 对应 data 中的字段名
|
||||||
|
@ -11,6 +15,11 @@ export interface DescriptionItemSchema {
|
||||||
hidden?: ((data: any) => boolean) | boolean; // 是否显示
|
hidden?: ((data: any) => boolean) | boolean; // 是否显示
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO @puhui999:vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
|
||||||
|
// TODO @puhui999:from 5.0:bordered 默认为 true
|
||||||
|
// TODO @puhui999:from 5.0:column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
|
||||||
|
// TODO @puhui999:from 5.0:size 默认为 small;有 'default', 'middle', 'small', undefined
|
||||||
|
// TODO @puhui999:from 5.0:useCollapse 默认为 true
|
||||||
export interface DescriptionsOptions {
|
export interface DescriptionsOptions {
|
||||||
data?: Record<string, any>; // 数据
|
data?: Record<string, any>; // 数据
|
||||||
schema?: DescriptionItemSchema[]; // 描述项配置
|
schema?: DescriptionItemSchema[]; // 描述项配置
|
||||||
|
|
|
@ -16,6 +16,7 @@ class DescriptionApi {
|
||||||
return this.state as DescriptionsOptions;
|
return this.state as DescriptionsOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO @puhui999:【setState】纠结下:1)vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage;
|
||||||
setState(newState: Partial<DescriptionsOptions>) {
|
setState(newState: Partial<DescriptionsOptions>) {
|
||||||
this.state = { ...this.state, ...newState };
|
this.state = { ...this.state, ...newState };
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,8 +10,10 @@ import { useDescription } from '#/components/description';
|
||||||
import { DictTag } from '#/components/dict-tag';
|
import { DictTag } from '#/components/dict-tag';
|
||||||
import { DICT_TYPE } from '#/utils/dict';
|
import { DICT_TYPE } from '#/utils/dict';
|
||||||
|
|
||||||
|
// TODO @puhui999:formData 貌似不需要了
|
||||||
const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
|
const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
|
||||||
|
|
||||||
|
// TODO @puhui999:descriptionApi 好点,更清晰哈;
|
||||||
const [Description, descApi] = useDescription({
|
const [Description, descApi] = useDescription({
|
||||||
componentProps: {
|
componentProps: {
|
||||||
bordered: true,
|
bordered: true,
|
||||||
|
@ -19,6 +21,7 @@ const [Description, descApi] = useDescription({
|
||||||
size: 'middle',
|
size: 'middle',
|
||||||
class: 'mx-4',
|
class: 'mx-4',
|
||||||
},
|
},
|
||||||
|
// TODO @puhui999:是不是也放到 data 里;
|
||||||
schema: [
|
schema: [
|
||||||
{
|
{
|
||||||
field: 'templateNickname',
|
field: 'templateNickname',
|
||||||
|
|
Loading…
Reference in New Issue