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

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.     }

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

posted on 2020-04-16 19:47  six、hc  阅读(...)  评论(...)  编辑  收藏

上一篇:小白爬虫综合项目1


下一篇:面相对象的三大特征-封装