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后台管理系统-商品管理列表组件的更多相关文章
- React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...
- React后台管理系统-订单管理
1.订单管理页面和商品管理页面类似,都是一个搜索组件+列表组件 2.搜索框search组件 import React from 'react'; class ListSearch extends ...
- React后端管理系统-商品详情detail组件
import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'service/product-serv ...
- 「超市管理系统——商品管理」 · Java Swing + MySQL JDBC开发
项目下载:https://download.csdn.net/download/weixin_44893902/13715024 1.9元付费赞助下载:https://download.csdn.ne ...
- 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 《React后台管理系统实战 零》:基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
随机推荐
- 理解js继承的6种方式
想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一.原型链继承 重点:让新实例的原型等于父类的实例. 特点:1.实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性.(新 ...
- Scrapy框架中的Pipeline组件
简介 在下图中可以看到items.py与pipeline.py,其中items是用来定义抓取内容的实体:pipeline则是用来处理抓取的item的管道 Item管道的主要责任是负责处理有蜘蛛从网页中 ...
- jetty-env.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE Configure PUBLIC &quo ...
- rest get post 请求工具_restclient.jar
下载 :restclient.jar 启动命令 : java -jar restclient.jar 界面如图所示:
- 多级联动的select框
JS文件: ; (function($, w) { var LinkSelect = function(config) { var opt = { doms: config.doms || [], u ...
- Problem Statement
题目链接:https://vjudge.net/contest/239445#problem/E E - Problem Statement You are given nn strings ...
- Bazinga HDU - 5510 不可做的暴力
http://acm.hdu.edu.cn/showproblem.php?pid=5510 想了很久队友叫我用ufs + kmp暴力过去了. fa[x] = y表示x是y的子串,所以只有fa[x] ...
- Hive项目实战:用Hive分析“余额宝”躺着赚大钱背后的逻辑
一.项目背景 前两年,支付宝推出的“余额宝”赚尽无数人的眼球,同时也吸引的大量的小额资金进入.“余额宝”把用户的散钱利息提高到了年化收益率4.0%左右,比起银行活期存储存款0.3%左右高出太多了,也正 ...
- Asp.NetCore WebApi 引入Swagger
一.创建一个Asp.NetCore WebApi 项目 二.引入NuGet包 SwashBuckle.AspNetCore 三.在项目属性配置中设置 四.修改项目的启动文件Startup.cs 1). ...
- Get和Post的请求
get post请求 <form method="post","get", action="a.ashx"> <input ...