index.tsx
3.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import { defineComponent, computed, ref, unref } from 'vue';
import { Descriptions } from 'ant-design-vue';
import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index';
import type { DescOptions, DescInstance, DescItem } from './types';
import descProps from './props';
import { isFunction } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { cloneDeep } from 'lodash-es';
import { deepMerge } from '/@/utils';
const prefixCls = 'description';
export default defineComponent({
props: descProps,
emits: ['register'],
setup(props, { attrs, slots, emit }) {
// props来自设置
const propsRef = ref<Partial<DescOptions> | null>(null);
// 自定义title组件：获得title
const getMergeProps = computed(() => {
return {
...props,
...unref(propsRef),
};
});
const getProps = computed(() => {
const opt = {
...props,
...(unref(propsRef) || {}),
title: undefined,
};
return opt;
});
/**
* @description: 是否使用标题
*/
const useWrapper = computed(() => {
return !!unref(getMergeProps).title;
});
/**
* @description: 获取配置Collapse
*/
const getCollapseOptions = computed(
(): CollapseContainerOptions => {
return {
// 默认不能展开
canExpand: false,
...unref(getProps).collapseOptions,
};
}
);
/**
* @description:设置desc
*/
function setDescProps(descProps: Partial<DescOptions>): void {
// 保留上一次的setDrawerProps
const mergeProps = deepMerge(unref(propsRef) || {}, descProps);
propsRef.value = cloneDeep(mergeProps);
}
const methods: DescInstance = {
setDescProps,
};
emit('register', methods);
// 防止换行
function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
if (!labelStyle && !labelMinWidth) {
return label;
}
return (
<div
style={{
...labelStyle,
minWidth: `${labelMinWidth}px`,
}}
>
{label}
</div>
);
}
function renderItem() {
const { schema } = unref(getProps);
return unref(schema).map((item) => {
const { render, field, span, show, contentMinWidth } = item;
const { data } = unref(getProps) as any;
if (show && isFunction(show) && !show(data)) {
return null;
}
const getContent = () =>
isFunction(render)
? render(data && data[field], data)
: unref(data) && unref(data)[field];
const width = contentMinWidth;
return (
<Descriptions.Item label={renderLabel(item)} key={field} span={span}>
{() =>
contentMinWidth ? (
<div
style={{
minWidth: `${width}px`,
}}
>
{getContent()}
</div>
) : (
getContent()
)
}
</Descriptions.Item>
);
});
}
const renderDesc = () => {
return (
<Descriptions class={`${prefixCls}`} {...{ ...attrs, ...unref(getProps) }}>
{() => renderItem()}
</Descriptions>
);
};
const renderContainer = () => {
const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
// 减少dom层级
return props.useCollapse ? (
<CollapseContainer
title={unref(getMergeProps).title}
canExpan={unref(getCollapseOptions).canExpand}
helpMessage={unref(getCollapseOptions).helpMessage}
>
{{
default: () => content,
action: () => getSlot(slots, 'action'),
}}
</CollapseContainer>
) : (
content
);
};
return () => (unref(useWrapper) ? renderContainer() : renderDesc());
},
});