这次的需求是列表页可以按照时间进行升降序的排列(直接请求后端)及列筛选，如图：
在打开页面时，我们要首先请求接口，获取缺卡类型的筛选数据，然后把数据拼成正确的格式赋给table的column：
// 获取缺卡类型和缺卡状态的筛选菜单数据
getTypeListAll = () => {
const { dispatch } = this.props;
const param = {
dictCode: 'lackStatus'
};
const param2 = {
dictCode: 'lackType'
};
dispatch({
type: 'abnormalRank/fetchTypeList',
payload: param,
callback: () => {
dispatch({
type: 'abnormalRank/fetchLackTypeList',
payload: param2,
callback: () => {
this.setfilters();
}
});
}
});
};
// 类型/状态-加入表格的筛选，并将最新的column存入state
setfilters = () => {
const {
abnormalRank: { typeList, lackTypeList }
} = this.props;
const column = [
{
title: '工号',
dataIndex: 'userNo',
key: 'userNo'
},
{
title: '姓名',
dataIndex: 'userName',
key: 'userName'
},
{
title: '部门',
dataIndex: 'departName',
key: 'departName'
},
{
title: '缺卡类型',
dataIndex: 'typeNick',
key: 'typeNick',
filters: []
},
{
title: '缺卡时间',
dataIndex: 'lackTime',
key: 'lackTime',
render: (text, record) => {
return {record.lackTime};
},
sorter: () => {}
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
filters: []
},
{
title: '补卡时间',
dataIndex: 'reissueTime',
key: 'reissueTime',
render: (text, record) => {
return {record.reissueTime};
},
sorter: () => {}
},
{
title: '相关流程',
dataIndex: 'applicationNo',
key: 'applicationNo',
render: (text, record) => {
return (
onClick={() =>
router.push(
`/xxx?abnormalId=${record.userNo}`
)
}
>
{record.applicationNo}
);
}
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
render: (text, record) => {
return (
to={{
pathname:
'/xxxx',
query: {
id: record.employeeId,
name: record.employeeName,
signDate: record.signDate
}
}}
>
打卡记录
this.seeDetail(record)}>补卡
);
}
}
];
const lackStatus = [];
const lackType = [];
for (let index = 0; index < typeList.length; index += 1) {
const list = {
text: typeList[index].dictName,
value: typeList[index].dictKey
};
lackStatus.push(list);
}
for (let index = 0; index < lackTypeList.length; index += 1) {
const list = {
text: lackTypeList[index].dictName,
value: lackTypeList[index].dictKey
};
lackType.push(list);
}
column[3].filters = lackType;
column[5].filters = lackStatus;
this.setState({
columns: column
});
};
可以注意到代码中的两个时间的列加了一个空的sorter：
而table的onChange事件里有sorter和filters两个参数【可以参考文档】，jsx代码：
render() {
const { loading, dispatch, abnormalRank, form } = this.props;
const { missData, pagination } = abnormalRank;
const { columns } = this.state;
const { locale } = new Locale('stat.overtime');
return (
bordered={false}
title="缺卡记录"
extra={
{locale('form.search', false)}
}
>
form={form}
config={getPath(this.props, 'config')}
/>
dataSource={missData}
columns={columns}
loading={loading}
rowKey="id"
onChange={this.changeTable}
pagination={{
...pagination,
showTotal: total => (
itemsName={Locale.set('items')}
total={total}
pageSize={pagination.pageSize}
onChange={async pageSize => {
await dispatch({
type: 'abnormalRank/setPagination',
pagination: {
...pagination,
pageSize,
current: 1
}
});
this.fetchList();
}}
/>
)
}}
/>
);
}
在事件中可以进行类型、状态、以及排序的参数的存储，再通过调用接口请求数据：
changeTable = async (pagination, filters, sorter) => {
// orderBy用来拼接 ‘排序根据词+空格+升序/降序’ 的字符串，用来传给后端，由后端进行数据的整理
let orderBy;
let sorterField;
if (sorter && sorter.field) {
if (sorter.field === 'lackTime') {
sorterField = 'lack_time';
}
if (sorter.field === 'reissueTime') {
sorterField = 'reissue_time';
}
const order = sorter.order.trim().split('end')[0];
orderBy = `${sorterField} ${order}`;
this.setState({
orderByField: orderBy
});
} else {
this.setState({
orderByField: ''
});
}
const {
dispatch,
abnormalRank: { pagination: curPagination }
} = this.props;
await dispatch({
type: 'abnormalRank/setPagination',
pagination: {
...curPagination,
current: pagination.current
}
});
this.setState(
{
lackStatus: filters.status,
lackType: filters.typeNick
},
() => {
this.fetchList();
}
);
};
请求其他部分代码：
constructor(props) {
super(props);
this.state = {
lackStatus: [],
lackType: [],
columns: [],
orderByField: ''
};
}
componentDidMount() {
this.getTypeListAll();
this.fetchList();
}
// 获取列表
fetchList = () => {
const {
dispatch,
abnormalRank: { pagination },
form
} = this.props;
const { getFieldsValue } = form;
const { companyDepart, date, userName } = getFieldsValue();
const parame = {
companyId: companyDepart.companyId,
startTime: date.range[0].format('YYYY-MM-DD'),
endTime: date.range[1].format('YYYY-MM-DD'),
employeeName: userName || '',
pageNo: pagination.current,
pageSize: pagination.pageSize,
orderByField: getPath(this.state, 'orderByField', ''),
lackStatus: getPath(this.state, 'lackStatus', []),
lackType: getPath(this.state, 'lackType', [])
};
dispatch({
type: 'abnormalRank/fetchMylack',
payload: parame
});
};
补充：有一个列表页需要从其他页面跳转，需要携带查询参数，包括了类型，因此做一些补充：
setfilters这个方法里添加类型的初始化：这里用到了antd表格筛选的一个属性：filteredValue
因为加入初始化设置后，在刷新页面时，column的渲染依旧会走这个初始化设置，会导致页面选中筛选项进行查询后，渲染出来的表头没有加入筛选的选中状态与选中项，所以我们在table的changeTable事件里需要补充：