React后台管理系统-商品管理列表组件

1.商品列表页面结构

1. <div id=”page-wrapper”>
2.              <PageTitle title=”商品列表”>
3.                  <div className=”page-header-right”>
4.                      <Link to=”/product/save” className=”btn btn-primary”>
5.                          <i className=”fa fa-plus”></i>
6.                          <span>添加商品</span>
7.                      </Link>
8.                  </div>
9.              </PageTitle>
10.              <ListSearch onSearch={(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}} />
11.              <TableList tableHeads={tableHeads}>
12.                  {
13.                      this.state.list.map((product, index) => {
14.                          return (
15.                              <tr key={index}>
16.                                  <td>{product.id}</td>
17.                                  <td>
18.                                      <p>{product.name}</p>
19.                                      <p>{product.subtitle}</p>
20.                                  </td>
21.                                  <td>￥{product.price}</td>
22.                                  <td>
23.                                      <span>{product.status == 1 ? ‘在售’ : ‘已下架’}</span>
24.                                      <button className=”btn btn-xs btn-warning”
25.                                          onClick={(e) => {this.onSetProductStatus(e, product.id, product.status)}}>{product.status == 1 ? ‘下架’ : ‘上架’}</button>
26.                                  </td>
27.                                  <td>
28.                                      <Link className=”opear” to={`/product/detail/${product.id}`}>详情</Link>
29.                                      <Link className=”opear” to={`/product/save/${product.id}`}>编辑</Link>
30.                                  </td>
31.                              </tr>
32.                          );
33.                      })
34.                  }
35.              </TableList>
36.              <Pagination current={this.state.pageNum}
37.                  total={this.state.total}
38.                  onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
39.          </div>

2.请求后台数据

1. this.state = {
2.            list : [],
3.            pageNum : 1,
4.            listType : ‘list’
5.        };
6. componentDidMount(){
7.      this.loadProductList();
8.    }
9.    // 加载商品列表
10.    loadProductList(){
11.        let listParam = {};
12.        listParam.listType = this.state.listType;
13.        listParam.pageNum = this.state.pageNum;
14.        //如果是搜索的话需要传入搜索类型和搜索关键字
15.        if(this.state.listType === ‘search’){
16.            listParam.searchType=this.state.searchType;
17.            listParam.keyword = this.state.searchKeyword;
18.        }
19.        _product.getProductList(listParam).then( res => {
20.            this.setState(res);
21.        }, errMsg => {
22.            this.setState({
23.                list : []
24.            })
25.            _mm.errorTips(errMsg);
26.        })
27.    }

3.当页码切换时，更新state里边pageNum的值

1. //更新页码
2.    onPageNumChange(pageNum){
3.       //获取当前页，然后更改this.state里边的pageNum,成功以后调用this.loadProductList()方法
4.       this.setState({
5.          pageNum:pageNum
6.       }, () => {
7.           this.loadProductList();
8.       });
9.    }

4.改变商品的上下架状态

1. //改变商品的上下架状态
2.     //1是上架,2是下架
3.     onSetProductStatus(e,productId,currentStatus){
4.         let newStatus = currentStatus == 1 ? 2 : 1;
5.         // 1是上架 ，2 是下架 确认应该是说相反的
6.         let confirmTips=currentStatus == 1 ? “确认下架该商品吗” : “确认上架该商品吗”
7.         if(window.confirm(confirmTips)){
8.             _product.setProductStatus(
9.                 {
10.                     productId:productId,
11.                     status:newStatus
12.                 }
13.             ).then(res => {
14.                 _mm.successTips(res);
15.                 this.loadProductList();
16.             }, errorMsg => {
17.                 _mm.errorTips(res);
18.  
19.             });
20.         }
21.     }