Skip to content

Commit 0fef87f

Browse files
chenshuai2144chenshuai2144
committed
chrome: update snapshot
1 parent f2b6929 commit 0fef87f

File tree

3 files changed

+874
-0
lines changed

3 files changed

+874
-0
lines changed

‎packages/table/src/components/EditableTable/demos/fuza.tsx

+273
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import {
2+
ProCard,
3+
ProForm,
4+
ProFormDependency,
5+
ProFormField,
6+
ProTable,
7+
} from '@ant-design/pro-components';
8+
import { FormInstance, Input, Tabs } from 'antd';
9+
import { useRef } from 'react';
10+
11+
const defaultData = [
12+
{
13+
name: 'company_total',
14+
value: {
15+
schemaName: 'namespace_e0d8926c7cd51a4ce3ca3675ee370478',
16+
tableName: 'company_total',
17+
},
18+
columnsInfo: [
19+
{
20+
name: 'auto_id_by_system',
21+
dataType: 'bigint',
22+
description: '系统自动生成-自增主键',
23+
supplementComment: '系统自动生成-自增主键',
24+
},
25+
{
26+
name: 'project_name',
27+
dataType: 'text',
28+
description:
29+
'project; 保险项目名称，包括赔款支出、保险金额、总资产、责任险、农业保险、原保险保费收入、健康险、意外险等。',
30+
supplementComment:
31+
'project; 保险项目名称，包括赔款支出、保险金额、总资产、责任险、农业保险、原保险保费收入、健康险、意外险等。',
32+
},
33+
{
34+
name: 'amount',
35+
dataType: 'numeric(24,5)',
36+
description: 'amount; 数值金额，代表各种保险项目的金额。',
37+
supplementComment: 'amount; 数值金额，代表各种保险项目的金额。',
38+
},
39+
],
40+
description: '7月财产险公司经营情况表',
41+
},
42+
{
43+
name: 'part_compay_info',
44+
value: {
45+
schemaName: 'namespace_e0d8926c7cd51a4ce3ca3675ee370478',
46+
tableName: 'part_compay_info',
47+
},
48+
columnsInfo: [
49+
{
50+
name: 'auto_id_by_system',
51+
dataType: 'bigint',
52+
description: '系统自动生成-自增主键',
53+
supplementComment: '系统自动生成-自增主键',
54+
},
55+
{
56+
name: 'mct_one_id',
57+
dataType: 'text',
58+
description: 'mct_one_id; 唯一标识符',
59+
supplementComment: 'mct_one_id; 唯一标识符',
60+
},
61+
{
62+
name: 'list_type',
63+
dataType: 'text',
64+
description: 'list_type; 上市板块类型',
65+
supplementComment: 'list_type; 上市板块类型',
66+
},
67+
{
68+
name: 'report_year',
69+
dataType: 'numeric(24,5)',
70+
description: 'report_year; 报告年份',
71+
supplementComment: 'report_year; 报告年份',
72+
},
73+
{
74+
name: 'org_name',
75+
dataType: 'text',
76+
description: 'org_name; 公司名称',
77+
supplementComment: 'org_name; 公司名称',
78+
},
79+
{
80+
name: 'total_assets',
81+
dataType: 'numeric(24,5)',
82+
description: 'total_assets; 总资产',
83+
supplementComment: 'total_assets; 总资产',
84+
},
85+
{
86+
name: 'total_liability',
87+
dataType: 'numeric(24,5)',
88+
description: 'total_liability; 总负债',
89+
supplementComment: 'total_liability; 总负债',
90+
},
91+
{
92+
name: 'equity',
93+
dataType: 'numeric(24,5)',
94+
description: 'equity; 股东权益',
95+
supplementComment: 'equity; 股东权益',
96+
},
97+
{
98+
name: 'total_profit',
99+
dataType: 'numeric(24,5)',
100+
description: 'total_profit; 总利润',
101+
supplementComment: 'total_profit; 总利润',
102+
},
103+
{
104+
name: 'net_profit',
105+
dataType: 'numeric(24,5)',
106+
description: 'net_profit; 净利润',
107+
supplementComment: 'net_profit; 净利润',
108+
},
109+
{
110+
name: 'tax',
111+
dataType: 'numeric(24,5)',
112+
description: 'tax; 税额',
113+
supplementComment: 'tax; 税额',
114+
},
115+
],
116+
description: '企业年报',
117+
},
118+
];
119+
120+
export default () => {
121+
const formRef = useRef<FormInstance>();
122+
return (
123+
<ProForm
124+
formRef={formRef}
125+
onValuesChange={(_, e) => {
126+
console.log(e);
127+
}}
128+
initialValues={{ columnsInfo: defaultData, table: defaultData }}
129+
>
130+
<ProFormDependency name={['columnsInfo']}>
131+
{({ columnsInfo }) => {
132+
const list = (columnsInfo || []) as any[];
133+
return (
134+
<Tabs
135+
style={{
136+
padding: '0 8px',
137+
maxWidth: '100%',
138+
}}
139+
items={list.map((item: any, index) => {
140+
return {
141+
key: item.name || '',
142+
tab: (
143+
<div
144+
style={{
145+
padding: 4,
146+
}}
147+
>
148+
{item.name}
149+
</div>
150+
),
151+
label: (
152+
<div
153+
style={{
154+
padding: 4,
155+
}}
156+
>
157+
{item.name}
158+
</div>
159+
),
160+
children: (
161+
<div
162+
style={{
163+
display: 'flex',
164+
maxWidth: '1024px',
165+
}}
166+
>
167+
<div
168+
style={{
169+
flex: 1,
170+
overflow: 'auto',
171+
}}
172+
>
173+
<ProTable
174+
scroll={{ x: 'max-content' }}
175+
size="small"
176+
pagination={false}
177+
search={false}
178+
editable={{
179+
editableKeys: item?.columnsInfo?.map(
180+
(row: any) => row.name || '',
181+
),
182+
}}
183+
rowKey="name"
184+
name={['table', index, 'columnsInfo']}
185+
columns={[
186+
{
187+
title: '字段名称',
188+
dataIndex: 'name',
189+
editable: false,
190+
},
191+
{
192+
title: '字段类型',
193+
dataIndex: 'dataType',
194+
editable: false,
195+
},
196+
{
197+
title: '字段别名',
198+
dataIndex: 'description',
199+
editable: false,
200+
width: 140,
201+
render: (text, record) => {
202+
return (
203+
<div
204+
style={{
205+
WebkitLineClamp: 2,
206+
maxHeight: 40,
207+
lineHeight: '20px',
208+
textOverflow: 'ellipsis',
209+
overflow: 'hidden',
210+
display: '-webkit-box',
211+
WebkitBoxOrient: 'vertical',
212+
wordBreak: 'break-all',
213+
}}
214+
>
215+
{record.description
216+
? record.description
217+
: '-'}
218+
</div>
219+
);
220+
},
221+
},
222+
{
223+
title: '补充说明',
224+
dataIndex: 'supplementComment',
225+
renderFormItem: () => {
226+
return (
227+
<Input.TextArea
228+
placeholder="请输入补充说明"
229+
maxLength={200}
230+
/>
231+
);
232+
},
233+
},
234+
]}
235+
toolBarRender={false}
236+
request={async () => {
237+
return {
238+
data: item.columnsInfo,
239+
};
240+
}}
241+
/>
242+
</div>
243+
</div>
244+
),
245+
};
246+
})}
247+
/>
248+
);
249+
}}
250+
</ProFormDependency>
251+
252+
<ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
253+
<ProFormDependency name={['table']}>
254+
{({ table }) => {
255+
return (
256+
<ProFormField
257+
ignoreFormItem
258+
fieldProps={{
259+
style: {
260+
width: '100%',
261+
},
262+
}}
263+
mode="read"
264+
valueType="jsonCode"
265+
text={JSON.stringify(table, null, 2)}
266+
/>
267+
);
268+
}}
269+
</ProFormDependency>
270+
</ProCard>
271+
</ProForm>
272+
);
273+
};

‎packages/table/src/components/EditableTable/index.md

+4
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ atomId: EditableProTable
4141

4242
<code src="./demos/real-time-editing.tsx" background="var(--main-bg-color)" ></code>
4343

44+
### 复杂的编辑表格
45+
46+
<code src="./demos/fuza.tsx" background="var(--main-bg-color)" ></code>
47+
4448
## EditableProTable
4549

4650
| 属性 | 描述 | 类型 | 默认值 |

0 commit comments

Comments
 (0)