ant design Table查询 封装使用
2021-03-09 本文已影响0人
ticktackkk
封装
import React, { useEffect, useRef, useState } from "react";
import { Button, Space, Table, Input, Form, Select, DatePicker, Pagination } from "antd";
import { lib } from "react-single-app";
import './NewTable.less'
/**
* 详细示例见 https://www.jianshu.com/p/6f20ed46d774
* @param columns 列描述数据对象
* @param serachList [{ type: 'Input', label: '输入', name: 'input', }, { type: 'Select', label: '下拉', name: 'changeType', option: [{ name: "收入", id: "IN" },{ name: "支出", id: "OUT" } ] },
{
type: 'Select',
label: '接口下拉',
name: 'costType',
option: [],
request: '/acco.t-we...tCo.Type', 接口下拉的接口
data: []
},
{
type: 'Date',
label: '时间1',
name: 'getStart,getEnd',
},
{
type: 'Date',
label: '时间2',
name: 'startTime,endTime',
}]
* @param url 分页查询的url
* @param urlParam 分页查询的需要的默认参数
* @param renderLeftOperation 在Table 与搜索框之间的需要添加的操作
* @param renderRightOperation
*
*/
export default function MyTable({ columns, serachList, url, urlParam, renderLeftOperation, renderRightOperation }) {
const [form] = Form.useForm();
const { RangePicker } = DatePicker;
const { Option } = Select;
const [dataList, setDataList] = useState([])//分页返回数据
const [values, setValues] = useState(null)
const [page, setPage] = useState({
currentPage: 1,
pageSize: 20,
total: 0,
})
useEffect(() => {
requestTable()
}, [])
function requestTable(currentPage, pageSize, param) {
lib.request({
url,
needMask: true,
data: {
...urlParam,
currentPage,
pageSize,
...param
},
success: res => {
setDataList(res.dataList)
setPage({
currentPage: res.page.currentPage,
pageSize: res.page.pageSize,
total: res.page.totalCount
})
}
})
}
function changePageSize(currentPage, pageSize) {
requestTable(currentPage, pageSize, values)
}
const onFinish = (values) => {
for (let [key, value] of Object.entries(values)) {
value == undefined && delete values[key]
if (Object.prototype.toString.call(value) == '[object Array]') {
delete values[key]
values[key.split(',')[0]] = value[0].valueOf()
values[key.split(',')[1]] = value[1].valueOf()
}
}
console.log(values);
requestTable(page.currentPage, page.pageSize, values)
setValues(values)
};
function reset() {
form.resetFields();
requestTable(1, page.pageSize)
}
function renderSearchList() {
return serachList.map(item => {
switch (item.type) {
case 'Input':
return (
<Form.Item label={item.label} name={item.name} colon={false} >
<Input style={{ width: 250, float: 'left', marginRight: '30px' }}></Input>
</Form.Item>
)
case 'Select':
return (
<Form.Item label={item.label} name={item.name} colon={false}>
<Select style={{ width: 250, float: 'left', marginRight: '30px' }}
optionFilterProp="children"
showSearch
allowClear>
{item.option.map(items => {
return <Option key={items.id} value={items.id}>{items.name}</Option>
})}
</Select>
</Form.Item>
)
case 'Date':
return <Form.Item label={item.label} name={item.name} colon={false}>
<RangePicker />
</Form.Item>
default:
return null;
}
})
}
return (
<div style={{ padding: '0px 24px' }}>
<Form form={form} layout="inline" onFinish={onFinish}>
{renderSearchList()}
<Space style={{ margin: '8px 8px 8px 80px' }}>
<Button type='primary' htmlType='submit'>查询</Button>
<Button onClick={() => { reset() }}>重置</Button>
</Space>
</Form>
{(renderLeftOperation || renderRightOperation) ? <div style={{ height: '100px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
{renderLeftOperation}
{renderRightOperation}
</div> : <div style={{ height: '30px' }}></div>}
<Table
columns={columns}
dataSource={dataList}
rowKey={columns.dataIndex}
pagination={false}
/>
<Pagination
showSizeChanger
showQuickJumper
pageSize={Number(page.pageSize)}
pageSizeOptions={['10', '20', '30', '40', '50', '100', '200']}
total={page.total}
current={page.currentPage}
showTotal={() => `总共 ${page.total || 0} 条`}
onChange={changePageSize}
style={{ marginLeft: '33%', marginTop: '16px' }}
/>
</div>
)
}
css
.ant-form-item{
margin: 8px;
}
.ant-form-item-label{
width: 80px;
}
.ant-picker-range{
width: 250px;
}
使用
import NewTable from './component/NewTable'
const columns = [
{
title: '交易时间',
dataIndex: 'changeTime'
},
{
title: '业务单号',
dataIndex: 'serialNo'
},
{
title: '费用类型',
dataIndex: 'costType'
},
{
title: '费用金额',
dataIndex: 'changeNum',
}
},
{
title: '收支类型',
dataIndex: 'changeType'
},
{
title: '平台交易流水号',
dataIndex: 'platformSerialNumber'
},
{
title: '备注',
dataIndex: 'remarks'
},
{
title: '操作',
dataIndex: 'getOperation',
},
},
]
const [serachList, setSerachList] = useState([
{
type: 'Input',
label: '输入',
name: 'input',
},
{
type: 'Select',
label: '下拉',
name: 'changeType',
option: [
{ name: "收入", id: "IN" },
{ name: "支出", id: "OUT" }
]
},
{
type: 'Select',
label: '接口下拉',
name: 'costType',
option: [],
request: '/accoun.../../ccountCType',
data: []
},
{
type: 'Date',
label: '时间1',
name: 'getStart,getEnd',
},
{
type: 'Date',
label: '时间2',
name: 'startTime,endTime',
},
])
function getOptions() {
serachList.map(item => {
if (item.request && !item.option.length) {
lib.request({
url: item.request,
needMask: false,
data: item.data,
success: res => {
console.log(res);
item.option = res || []
setSerachList(serachList)
}
})
}
})
return serachList;
}
function renderLeftOperation() {
return (
<div style={{ margin: '8px' }}>
<Button type='primary'>新增左边</Button>
</div>
)
}
function renderRightOperation() {
return (
<Button type='primary'>新增右边</Button>
)
}
return (
<div>
<NewTable columns={columns}
dataSource={dataList}
serachList={getOptions()}
url='/accoun...///./weryList'
urlParam={{ accountType: 'EXPENSE_ACCOUNT' }}
renderRightOperation={renderRightOperation()}
renderLeftOperation={renderLeftOperation()}
/>
</div>
)
