React后台管理系统-商品管理列表组件
React台管理系统-商品管理列表组件
1.商品列表页面结构
<div id="page-wrapper">
<PageTitle title="商品列表">
<div className="page-header-right">
<Link to="/product/save" className="btn btn-primary">
<i className="fa fa-plus"></i>
<span>添加商品</span>
</Link>
</div>
</PageTitle>
<ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}} />
<TableList tableHeads={tableHeads}>
{
this.state.list.map((product, index) => {
return (
<tr key={index}>
<td>{product.id}</td>
<td>
<p>{product.name}</p>
<p>{product.subtitle}</p>
</td>
<td>￥{product.price}</td>
<td>
<span>{product.status == 1 ? \'在售\' : \'已下架\'}</span>
<button className="btn btn-xs btn-warning"
onClick={(e) => {this.onSetProductStatus(e, product.id, product.status)}}>{product.status == 1 ? \'下架\' : \'上架\'}</button>
</td>
<td>
<Link className="opear" to={`/product/detail/${product.id}`}>详情</Link>
<Link className="opear" to={`/product/save/${product.id}`}>编辑</Link>
</td>
</tr>
);
})
}
</TableList>
<Pagination current={this.state.pageNum}
total={this.state.total}
onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
</div>
2.请求后台数据
this.state = {
list : [],
pageNum : 1,
listType : \'list\'
};
componentDidMount(){
this.loadProductList();
}
// 加载商品列表
loadProductList(){
let listParam = {};
listParam.listType = this.state.listType;
listParam.pageNum = this.state.pageNum;
//如果是搜索的话需要传入搜索类型和搜索关键字
if(this.state.listType === \'search\'){
listParam.searchType=this.state.searchType;
listParam.keyword = this.state.searchKeyword;
}
_product.getProductList(listParam).then( res => {
this.setState(res);
}, errMsg => {
this.setState({
list : []
})
_mm.errorTips(errMsg);
})
}
3.当页码切换时，更新state里边pageNum的值
//更新页码
onPageNumChange(pageNum){
//获取当前页，然后更改this.state里边的pageNum,成功以后调用this.loadProductList()方法
this.setState({
pageNum:pageNum
}, () => {
this.loadProductList();
});
}
4.改变商品的上下架状态
//改变商品的上下架状态
//1是上架,2是下架
onSetProductStatus(e,productId,currentStatus){
let newStatus = currentStatus == 1 ? 2 : 1;
// 1是上架 ，2 是下架 确认应该是说相反的
let confirmTips=currentStatus == 1 ? "确认下架该商品吗" : "确认上架该商品吗"
if(window.confirm(confirmTips)){
_product.setProductStatus(
{
productId:productId,
status:newStatus
}
).then(res => {
_mm.successTips(res);
this.loadProductList();
}, errorMsg => {
_mm.errorTips(res);
});
}
}
以上是 React后台管理系统-商品管理列表组件 的全部内容， 来源链接： utcz.com/z/384034.html
