标签：product pageNum loadProductList 管理系统 res React state 组件 listParam

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

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

标签：product,pageNum,loadProductList,管理系统,res,React,state,组件,listParam
来源： https://www.cnblogs.com/six-hc/p/12715201.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。