Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhoubichuan
zhoubichuan committed Nov 12, 2023
1 parent db4ee9d commit 5114022
Show file tree
Hide file tree
Showing 6 changed files with 287 additions and 252 deletions.
1 change: 1 addition & 0 deletions src/global.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ canvas {
}

body {
overflow: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Expand Down
15 changes: 13 additions & 2 deletions src/pages/list/list/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@
@import '~antd/es/style/themes/default.less';

.pro-container {
margin: 0 !important;

:global {
.ant-pro-grid-content {
.ant-pro-grid-content-children {
height: calc(100vh - 163px);

.ant-pro-layout-watermark-wrapper {
height: 100%;

.ant-pro-page-container-children-content {
height: 100%;

.ant-pro-table {
display: flex;
flex-direction: column;
height: 100%;

.ant-pro-card {
&:first-child {
flex-basis: 100px;
}

&:last-child {
flex-grow: 1;
}

.ant-pro-card-body {
.ant-table-wrapper {
height: calc(100% - 64px);

.ant-spin-nested-loading {
height: 100%;

.ant-spin-container {
height: 100%;

.ant-table {
height: calc(100% - 24px);

.ant-table-container {
height: 100%;

.ant-table-body {
width: 100%;
height: calc(100% - 47px);
Expand Down
156 changes: 98 additions & 58 deletions src/pages/list/list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,15 @@ import {
} from '@ant-design/pro-form';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import { list, addList, updateList, removeList, importList, getTemplate } from './service';
import {
requestList,
addList,
updateList,
removeList,
importList,
getTemplate,
exportList,
} from './service';
import type { TableListItem, TableListPagination } from './data';
import { useParams } from 'react-router';
import { history } from 'umi';
Expand Down Expand Up @@ -130,6 +138,7 @@ const TableList: React.FC = () => {
const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
const params: any = useParams();
const [templateData, setTemplateData] = useState<any>([]);
const [options, setOptions] = useState<any[]>([]);
const getTemplateData = async (key: string) => {
let template: any = [];
if (path.includes('template')) {
Expand All @@ -154,13 +163,26 @@ const TableList: React.FC = () => {
if (location.href.includes('id')) {
const arr = location.href.split('?id=');
const id: string = arr[arr.length - 1];
const result = await list({ current: 1, pageSize: 1 }, { id });
setCurrentRow(result.data[0]);
setShowDetail(true);
const result = await requestList({ current: 1, pageSize: 1 }, { id });
setOptions(result.data);
}
};
const handleOnSearch = async () => {
const { data } = await requestList({ current: 1, pageSize: 1000 });
const targetArr = [],
obj = {};
for (let i = 0; i < data.length; i++) {
const { typeName = '' } = data[i];
if (!obj[typeName]) {
obj[typeName] = true;
targetArr.push({ label: typeName, value: typeName });
}
}
setOptions(targetArr);
};
useEffect(() => {
getTemplateData(params.id);
handleOnSearch();
}, []);
const handleOnTabChange = async (key: string) => {
await getTemplateData(key);
Expand Down Expand Up @@ -192,37 +214,40 @@ const TableList: React.FC = () => {
);
},
},
...templateData.map((item: any) => ({
...item,
...item.table,
renderFormItem: () => {
if (item.search && item.search.type === 'select') {
return <ProFormSelect name={item.dataIndex} options={item.search.data} />;
} else {
return <ProFormText name={item.dataIndex} />;
}
},
render: (dom: any) => {
if (!item.hideInTable && item.table && item.table.type === 'image') {
if (Array.isArray(dom)) {
return dom.map((i: any) => <Image height={100} src={i} />);
...templateData.map((item: any) => {
item.hideInSearch = !item.search || JSON.stringify(item.search) === '{}';
item.hideInTable = !item.table || JSON.stringify(item.table) === '{}';
return {
...item,
defaultSortOrder: 'descend',
sorter: (a: any, b: any) => a[item.dataIndex] - b[item.dataIndex],
...item.table,
renderFormItem: () => {
if (item.search && item.search.type === 'select') {
// if(item.search.data){
// return <ProFormSelect name={item.dataIndex} options={item.search.data} />;
// }else{
return <ProFormSelect name={item.dataIndex} options={options} />;
// }
} else {
return <Image height={100} src={dom} />;
return <ProFormText name={item.dataIndex} />;
}
}
if (!item.hideInTable && item.table && item.table.type === 'time') {
return <div style={{ whiteSpace: 'pre-line' }}>{moment(dom).fromNow()}</div>;
}
if (!item.hideInTable && item.table && item.table.type === 'select') {
return (
<div style={{ whiteSpace: 'pre-line' }}>
{item.table.data.find((o: any) => o.value === dom).name}
</div>
);
}
return dom;
},
})),
},
render: (dom: any) => {
if (!item.hideInTable && item.table && item.table.type === 'image') {
if (Array.isArray(dom)) {
return dom.map((i: any) => <Image height={100} src={i} />);
} else {
return <Image height={100} src={dom} />;
}
}
if (!item.hideInTable && item.table && item.table.type === 'time') {
return <div style={{ whiteSpace: 'pre-line' }}>{moment(dom).fromNow()}</div>;
}
return dom;
},
};
}),
{
title: '操作',
dataIndex: 'option',
Expand Down Expand Up @@ -292,27 +317,27 @@ const TableList: React.FC = () => {
},
];
const descriptions: ProColumns<TableListItem>[] = templateData
.filter((item: any) => item.view)
.filter((item: any) => JSON.stringify(item.view) !== '{}')
.map((item: any) => {
const { width, view, ellipsis, ...rest } = item;
return {
...rest,
render: (text: any) => {
if (!item.hideInTable && item.view && item.view.type === 'image') {
if (item.view && item.view.type === 'image') {
if (Array.isArray(text)) {
return text.map((i: any) => <Image height={300} src={i} />);
} else {
return <Image height={300} src={text} />;
}
}
if (!item.hideInTable && item.view && item.view.type === 'time') {
return (
<div style={{ color: 'lightblue', whiteSpace: 'pre-line' }}>
{moment(text).fromNow()}
</div>
);
if (item.view && item.view.type === 'time') {
return <div style={{ whiteSpace: 'pre-line' }}>{moment(text).fromNow()}</div>;
}
return <div style={{ color: 'lightblue', whiteSpace: 'pre-line' }}>{text}</div>;
return (
<div style={{ whiteSpace: 'pre-line' }}>
{typeof text === 'string' ? text : JSON.stringify(text)}
</div>
);
},
};
});
Expand Down Expand Up @@ -365,6 +390,7 @@ const TableList: React.FC = () => {
actionRef={actionRef}
ghost={true}
rowKey="id"
scroll={{ x: 1500, y: 480 }}
search={{
labelWidth: 100,
optionRender: (searchConfig, formProps, dom) => {
Expand Down Expand Up @@ -400,20 +426,13 @@ const TableList: React.FC = () => {
type="primary"
key="primary"
onClick={(): any => {
if (!selectedRowsState.length) {
return message.warning('请选择数据');
}
Modal.confirm({
title: '删除数据',
content: '确定删除该数据吗？',
title: '导出数据',
content: '确定导出全部数据吗？',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await handleDelete(selectedRowsState);
setSelectedRows([]);
if (actionRef.current) {
actionRef.current.reload();
}
await exportList();
},
});
}}
Expand All @@ -424,11 +443,32 @@ const TableList: React.FC = () => {
type="primary"
key="primary"
onClick={async () => {
await handleDelete(selectedRowsState);
setSelectedRows([]);
if (actionRef.current) {
actionRef.current.reload();
}
Modal.confirm({
title: '导出数据',
content: '确定导出选中数据吗？',
okText: '确认',
cancelText: '取消',
onOk: async () => {
const res: any = await exportList(selectedRowsState);
debugger;
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel;charset=utf-8',
});
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download =
decodeURI(res.headers['content-disposition'].split('filename=')[1]) || ''; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
setSelectedRows([]);
if (actionRef.current) {
actionRef.current.reload();
}
},
});
}}
>
批量导出
Expand Down Expand Up @@ -471,7 +511,7 @@ const TableList: React.FC = () => {
<PlusOutlined /> 批量添加
</Button>,
]}
request={list}
request={requestList}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
Expand Down
3 changes: 2 additions & 1 deletion src/pages/list/list/service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export async function getTemplate(key: string, type: string) {
},
});
}
export async function list(
export async function requestList(
params: {
current?: number;
pageSize?: number;
Expand Down Expand Up @@ -68,6 +68,7 @@ export async function exportList(options?: { [key: string]: any }) {
'/api' + location.pathname.replace('/antdpro-demo', '') + '/export',
{
method: 'POST',
responseType: 'blob',
data: options,
},
);
Expand Down
Loading

0 comments on commit 5114022

Please sign in to comment.