Skip to content

Commit 5114022

Browse files
zhoubichuanzhoubichuan
committed
update
1 parent db4ee9d commit 5114022

File tree

6 files changed

+287
-252
lines changed

6 files changed

+287
-252
lines changed

‎src/global.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ canvas {
2222
}
2323

2424
body {
25+
overflow: hidden;
2526
text-rendering: optimizeLegibility;
2627
-webkit-font-smoothing: antialiased;
2728
-moz-osx-font-smoothing: grayscale;

‎src/pages/list/list/index.less

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,47 @@
11
@import '~antd/es/style/themes/default.less';
22

33
.pro-container {
4+
margin: 0 !important;
5+
46
:global {
57
.ant-pro-grid-content {
68
.ant-pro-grid-content-children {
79
height: calc(100vh - 163px);
10+
811
.ant-pro-layout-watermark-wrapper {
912
height: 100%;
13+
1014
.ant-pro-page-container-children-content {
1115
height: 100%;
16+
1217
.ant-pro-table {
13-
display: flex;
14-
flex-direction: column;
1518
height: 100%;
19+
1620
.ant-pro-card {
1721
&:first-child {
1822
flex-basis: 100px;
1923
}
24+
2025
&:last-child {
2126
flex-grow: 1;
2227
}
28+
2329
.ant-pro-card-body {
2430
.ant-table-wrapper {
2531
height: calc(100% - 64px);
32+
2633
.ant-spin-nested-loading {
2734
height: 100%;
35+
2836
.ant-spin-container {
2937
height: 100%;
38+
3039
.ant-table {
3140
height: calc(100% - 24px);
41+
3242
.ant-table-container {
3343
height: 100%;
44+
3445
.ant-table-body {
3546
width: 100%;
3647
height: calc(100% - 47px);

‎src/pages/list/list/index.tsx

Lines changed: 98 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,15 @@ import {
1414
} from '@ant-design/pro-form';
1515
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
1616
import ProDescriptions from '@ant-design/pro-descriptions';
17-
import { list, addList, updateList, removeList, importList, getTemplate } from './service';
17+
import {
18+
requestList,
19+
addList,
20+
updateList,
21+
removeList,
22+
importList,
23+
getTemplate,
24+
exportList,
25+
} from './service';
1826
import type { TableListItem, TableListPagination } from './data';
1927
import { useParams } from 'react-router';
2028
import { history } from 'umi';
@@ -130,6 +138,7 @@ const TableList: React.FC = () => {
130138
const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
131139
const params: any = useParams();
132140
const [templateData, setTemplateData] = useState<any>([]);
141+
const [options, setOptions] = useState<any[]>([]);
133142
const getTemplateData = async (key: string) => {
134143
let template: any = [];
135144
if (path.includes('template')) {
@@ -154,13 +163,26 @@ const TableList: React.FC = () => {
154163
if (location.href.includes('id')) {
155164
const arr = location.href.split('?id=');
156165
const id: string = arr[arr.length - 1];
157-
const result = await list({ current: 1, pageSize: 1 }, { id });
158-
setCurrentRow(result.data[0]);
159-
setShowDetail(true);
166+
const result = await requestList({ current: 1, pageSize: 1 }, { id });
167+
setOptions(result.data);
168+
}
169+
};
170+
const handleOnSearch = async () => {
171+
const { data } = await requestList({ current: 1, pageSize: 1000 });
172+
const targetArr = [],
173+
obj = {};
174+
for (let i = 0; i < data.length; i++) {
175+
const { typeName = '' } = data[i];
176+
if (!obj[typeName]) {
177+
obj[typeName] = true;
178+
targetArr.push({ label: typeName, value: typeName });
179+
}
160180
}
181+
setOptions(targetArr);
161182
};
162183
useEffect(() => {
163184
getTemplateData(params.id);
185+
handleOnSearch();
164186
}, []);
165187
const handleOnTabChange = async (key: string) => {
166188
await getTemplateData(key);
@@ -192,37 +214,40 @@ const TableList: React.FC = () => {
192214
);
193215
},
194216
},
195-
...templateData.map((item: any) => ({
196-
...item,
197-
...item.table,
198-
renderFormItem: () => {
199-
if (item.search && item.search.type === 'select') {
200-
return <ProFormSelect name={item.dataIndex} options={item.search.data} />;
201-
} else {
202-
return <ProFormText name={item.dataIndex} />;
203-
}
204-
},
205-
render: (dom: any) => {
206-
if (!item.hideInTable && item.table && item.table.type === 'image') {
207-
if (Array.isArray(dom)) {
208-
return dom.map((i: any) => <Image height={100} src={i} />);
217+
...templateData.map((item: any) => {
218+
item.hideInSearch = !item.search || JSON.stringify(item.search) === '{}';
219+
item.hideInTable = !item.table || JSON.stringify(item.table) === '{}';
220+
return {
221+
...item,
222+
defaultSortOrder: 'descend',
223+
sorter: (a: any, b: any) => a[item.dataIndex] - b[item.dataIndex],
224+
...item.table,
225+
renderFormItem: () => {
226+
if (item.search && item.search.type === 'select') {
227+
// if(item.search.data){
228+
// return <ProFormSelect name={item.dataIndex} options={item.search.data} />;
229+
// }else{
230+
return <ProFormSelect name={item.dataIndex} options={options} />;
231+
// }
209232
} else {
210-
return <Image height={100} src={dom} />;
233+
return <ProFormText name={item.dataIndex} />;
211234
}
212-
}
213-
if (!item.hideInTable && item.table && item.table.type === 'time') {
214-
return <div style={{ whiteSpace: 'pre-line' }}>{moment(dom).fromNow()}</div>;
215-
}
216-
if (!item.hideInTable && item.table && item.table.type === 'select') {
217-
return (
218-
<div style={{ whiteSpace: 'pre-line' }}>
219-
{item.table.data.find((o: any) => o.value === dom).name}
220-
</div>
221-
);
222-
}
223-
return dom;
224-
},
225-
})),
235+
},
236+
render: (dom: any) => {
237+
if (!item.hideInTable && item.table && item.table.type === 'image') {
238+
if (Array.isArray(dom)) {
239+
return dom.map((i: any) => <Image height={100} src={i} />);
240+
} else {
241+
return <Image height={100} src={dom} />;
242+
}
243+
}
244+
if (!item.hideInTable && item.table && item.table.type === 'time') {
245+
return <div style={{ whiteSpace: 'pre-line' }}>{moment(dom).fromNow()}</div>;
246+
}
247+
return dom;
248+
},
249+
};
250+
}),
226251
{
227252
title: '操作',
228253
dataIndex: 'option',
@@ -292,27 +317,27 @@ const TableList: React.FC = () => {
292317
},
293318
];
294319
const descriptions: ProColumns<TableListItem>[] = templateData
295-
.filter((item: any) => item.view)
320+
.filter((item: any) => JSON.stringify(item.view) !== '{}')
296321
.map((item: any) => {
297322
const { width, view, ellipsis, ...rest } = item;
298323
return {
299324
...rest,
300325
render: (text: any) => {
301-
if (!item.hideInTable && item.view && item.view.type === 'image') {
326+
if (item.view && item.view.type === 'image') {
302327
if (Array.isArray(text)) {
303328
return text.map((i: any) => <Image height={300} src={i} />);
304329
} else {
305330
return <Image height={300} src={text} />;
306331
}
307332
}
308-
if (!item.hideInTable && item.view && item.view.type === 'time') {
309-
return (
310-
<div style={{ color: 'lightblue', whiteSpace: 'pre-line' }}>
311-
{moment(text).fromNow()}
312-
</div>
313-
);
333+
if (item.view && item.view.type === 'time') {
334+
return <div style={{ whiteSpace: 'pre-line' }}>{moment(text).fromNow()}</div>;
314335
}
315-
return <div style={{ color: 'lightblue', whiteSpace: 'pre-line' }}>{text}</div>;
336+
return (
337+
<div style={{ whiteSpace: 'pre-line' }}>
338+
{typeof text === 'string' ? text : JSON.stringify(text)}
339+
</div>
340+
);
316341
},
317342
};
318343
});
@@ -365,6 +390,7 @@ const TableList: React.FC = () => {
365390
actionRef={actionRef}
366391
ghost={true}
367392
rowKey="id"
393+
scroll={{ x: 1500, y: 480 }}
368394
search={{
369395
labelWidth: 100,
370396
optionRender: (searchConfig, formProps, dom) => {
@@ -400,20 +426,13 @@ const TableList: React.FC = () => {
400426
type="primary"
401427
key="primary"
402428
onClick={(): any => {
403-
if (!selectedRowsState.length) {
404-
return message.warning('请选择数据');
405-
}
406429
Modal.confirm({
407-
title: '删除数据',
408-
content: '确定删除该数据吗？',
430+
title: '导出数据',
431+
content: '确定导出全部数据吗？',
409432
okText: '确认',
410433
cancelText: '取消',
411434
onOk: async () => {
412-
await handleDelete(selectedRowsState);
413-
setSelectedRows([]);
414-
if (actionRef.current) {
415-
actionRef.current.reload();
416-
}
435+
await exportList();
417436
},
418437
});
419438
}}
@@ -424,11 +443,32 @@ const TableList: React.FC = () => {
424443
type="primary"
425444
key="primary"
426445
onClick={async () => {
427-
await handleDelete(selectedRowsState);
428-
setSelectedRows([]);
429-
if (actionRef.current) {
430-
actionRef.current.reload();
431-
}
446+
Modal.confirm({
447+
title: '导出数据',
448+
content: '确定导出选中数据吗？',
449+
okText: '确认',
450+
cancelText: '取消',
451+
onOk: async () => {
452+
const res: any = await exportList(selectedRowsState);
453+
debugger;
454+
const blob = new Blob([res.data], {
455+
type: 'application/vnd.ms-excel;charset=utf-8',
456+
});
457+
const downloadElement = document.createElement('a');
458+
const href = window.URL.createObjectURL(blob); //创建下载的链接
459+
downloadElement.href = href;
460+
downloadElement.download =
461+
decodeURI(res.headers['content-disposition'].split('filename=')[1]) || ''; //下载后文件名
462+
document.body.appendChild(downloadElement);
463+
downloadElement.click(); //点击下载
464+
document.body.removeChild(downloadElement); //下载完成移除元素
465+
window.URL.revokeObjectURL(href); //释放掉blob对象
466+
setSelectedRows([]);
467+
if (actionRef.current) {
468+
actionRef.current.reload();
469+
}
470+
},
471+
});
432472
}}
433473
>
434474
批量导出
@@ -471,7 +511,7 @@ const TableList: React.FC = () => {
471511
<PlusOutlined /> 批量添加
472512
</Button>,
473513
]}
474-
request={list}
514+
request={requestList}
475515
columns={columns}
476516
rowSelection={{
477517
onChange: (_, selectedRows) => {

‎src/pages/list/list/service.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export async function getTemplate(key: string, type: string) {
1414
},
1515
});
1616
}
17-
export async function list(
17+
export async function requestList(
1818
params: {
1919
current?: number;
2020
pageSize?: number;
@@ -68,6 +68,7 @@ export async function exportList(options?: { [key: string]: any }) {
6868
'/api' + location.pathname.replace('/antdpro-demo', '') + '/export',
6969
{
7070
method: 'POST',
71+
responseType: 'blob',
7172
data: options,
7273
},
7374
);

0 commit comments

Comments
 (0)