demo：TYXK：AddOperator
1.点击page换页 table中的数据不改变：
原因：page没有去获取用户数据 因此不管怎么点击更换页码，
数据永远展示的是page为1的数据。
参数page_rows：每页数量
page_rows:PAGE_SIZE, 中的PAGE_SIZE是一个变量。
const PAGE_SIZE = 8 ;
/**方便以后需要更改每页数量的时候 只需要改这个地方就可以*/
解决方法：
page change时调用handlePageChange函数：
<Pagination
onChange={(page)=>this.handlePageChange(page)}
total={operatorList.total}
showTotal={total => `总共 ${total} 个项目`}
pageSize={PAGE_SIZE}
current={this.state.current}
/>
handlePageChange函数的代码：
/**页码更改时触发models里命名空间为operator中的fetchOperatorList方法
*fetchOperatorList再次发起请求 获取当前page的用户列表
*/
handlePageChange = (page) => {
this.setState({current:page})
this.props.dispatch({
type:'operator/fetchOperatorList',
payload:{
page: page,
page_rows:PAGE_SIZE,
}
})
}
2.page默认为1首次进入页面时没有样式
想要的效果：
原因：ant design中的pagination的参数defaultCurrent只会初始化一次，
解决方法：(变为可控)Pagination中使用current参数：当前页数。current={this.state.current}
初始化状态：
page更换时样式跟着改变：
handlePageChange 函数中使用this.setState更新状态。this.setState({current:page})
3.进入页面时数据未加载完的时候的效果
处理方法：使用antd中的Table的参数loading：页面是否加载中loading={this.state.loadingLogList}
初始化时为true
{/*拿到operatorList中的list数据作为table的数据源*/}
<Table
loading={this.state.loadingLogList}
rowSelection={rowSelection}
columns={columns}
dataSource={operatorList.list}
pagination={false}
className="table"
/>
页面加载完之后将状态loadingLogList设为false。
4.接口数据为数字，显示要为对应内容
处理：
const sexs = ['未知','女','男'];
const isOperator = ['设为操作员','已是操作员']
/**tabel const column 中：*/
{
title: '性别',
dataIndex: 'sex',
render: (sexIndex)=> sexs[sexIndex]
}, {
title: '所属单位',
dataIndex: 'title',
}, {
title: '操作',
dataIndex:'is_operator',
key: 'action',
render: (is_operatorIndex, record) => (
<span>
{
is_operatorIndex ?
isOperator[is_operatorIndex] :
<a onClick={()=>this.addOperator(record.id)}>{isOperator[is_operatorIndex]}</a>
}
</span>
),
}
5.添加操作员操作，
点击设为操作员时，更改为已是操作员。处理代码见上段代码中的span。
<a>onClick时调用函数addOperator，
addOperator = (id)=>{
this.props.dispatch({
type:'operator/AddOperator',
payload:{
uid: id
}
}).then((code)=> {
if(code === 200) {
this.props.dispatch({
type:'operator/fetchUserOperator',
payload:{
page:this.state.current,
page_rows:PAGE_SIZE,
}
})
this.props.dispatch({
type:'operator/fetchOperatorList',
payload:{
page:this.props.operatorListPage,
page_rows:8,
}
})
}
})
}
点击设为操作员时触发models/effects的AddOperator方法：
effects里发起添加操作员请求。
请求添加操作员完毕之后，if(code === 200）也就是添加成功之后，再去触发另外的方法，fetchUserOperator和fetchOperatorList，更改视图状态，更新用户表和操作员表。
注意：触发fetchOperatorList方法中：
payload里的page和page_rows一定要是父组件OperatorList的page和page_rows。
page:this.props.operatorListPage,
page_rows:8,
此处涉及父组件向子组件传值的问题：
父组件OperatorList中向子组件传一个current状态值，
6.批量删除操作员: OperatorList.jsx
不同批次勾选需要删除的操作员，连续批量删除操作的时候出现以下bug：
解决方法如下：
7.批量删除操作在其中进行单个删除会报错：
删除操作员时勾选若干项后，将其中一项单独删除之后，再点击批量删除会操作失败
解决思路：在点击删除时候，获取勾选的数组，删除单个的时候把this.state.selectedRowKeys里面对应的值删掉。
代码如下：
补充：
filter() 方法创建一个新数组，其包含所提供函数实现的测试的所有元素
语法：
var new_arr = arr.filter(callback[, thisArg])
参数：
[callback：用来测试数组的每个元素的函数，调用时使用参数(element, index, array),返回true表示保留该元素(通过测试), false则不保留。]
[thisArg：可选。执行callback时的用于this的值。]
返回值：
一个新的通过测试的元素的集合的数组。
filter不会改变原数组，它返回过滤后的新数组。
8.添加操作员模块框中的搜索功能
(1)设定学工号和姓名的初始状态：
(2)将学工号和姓名的input框中的值变成状态：
学工号 <Input placeholder="请输入" onChange={(e)=> this.setState({username: e.target.value})} />
姓名 <Input placeholder="请输入" onChange={(e)=> this.setState({name:e.target.value})} />
(3)搜索button绑定函数onSearch：
<Button type="primary" onClick={this.onSearch}>搜索</Button>
(4)编写onSearch函数：
需求：点击搜索按钮之后要将当前页码默认变回1,
this.setState({current:1});
page:1,
onSearch = () => {
this.setState({current: 1});
this.props.dispatch({
type:'operator/fetchUserOperator',
payload:{
username: this.state.username,
name:this.state.name,
page: 1,
page_rows: PAGE_SIZE,
},
})
}
网友评论