1.页面

2.品类列表展示

  1. let listBody = this.state.list.map((category, index) => {
  2.             return (
  3.                 <tr key={index}>
  4.                     <td>{category.id}</td>
  5.                     <td>{category.name}</td>
  6.                     <td>
  7.                         <a className="opear"
  8.                             onClick={(e) => this.onUpdateName(category.id, category.name)}>修改名称</a>
  9.                         {
  10.                             category.parentId === 0
  11.                             ? <Link to={`/product-category/index/${category.id}`}>查看子品类</Link>
  12.                             : null
  13.                         }
  14.                     </td>
  15.                 </tr>
  16.             );
  17.         });
  18.         return (
  19.             <div id="page-wrapper">
  20.                 <PageTitle title="品类列表">
  21.                     <div className="page-header-right">
  22.                         <Link to="/product-category/add" className="btn btn-primary">
  23.                             <i className="fa fa-plus"></i>
  24.                             <span>添加品类</span>
  25.                         </Link>
  26.                     </div>
  27.                 </PageTitle>
  28.                 <div className="row">
  29.                     <div className="col-md-12">
  30.                         <p>父品类ID: {this.state.parentCategoryId}</p>
  31.                     </div>
  32.                 </div>
  33.                 <TableList tableHeads={['品类ID', '品类名称', '操作']}>
  34.                     {listBody}
  35.                 </TableList>
  36.             </div>
  37.         );
  38.     }

3.加载品类列表

  1. // 加载品类列表
  2.     loadCategoryList(){
  3.        _product.getCategoryList(this.state.parentCategoryId).then(res => {
  4.            this.setState({
  5.                list : res
  6.            });
  7.        }, errMsg => {
  8.            this.setState({
  9.                list : []
  10.            });
  11.            _mm.errorTips(errMsg);
  12.        });
  13.    }

4.修改品类名称

  1. // 更新品类的名字
  2.     onUpdateName(categoryId, categoryName){
  3.        let newName = window.prompt('请输入新的品类名称', categoryName);
  4.        if(newName){
  5.            _product.updateCategoryName({
  6.                categoryId: categoryId,
  7.                categoryName : newName
  8.            }).then(res => {
  9.                _mm.successTips(res);
  10.                this.loadCategoryList();
  11.            }, errMsg => {
  12.                _mm.errorTips(errMsg);
  13.            });
  14.        }
  15.    }

5.添加品类

  1. import React from 'react';
  2. import MUtil from 'util/mm.jsx'
  3. import Product from 'service/product-service.jsx'
  4.  
  5. import PageTitle from 'component/page-title/index.jsx';
  6.  
  7. const _mm = new MUtil();
  8. const _product = new Product();
  9.  
  10.  
  11. class CategoryAdd extends React.Component{
  12.     constructor(props){
  13.         super(props);
  14.         this.state = {
  15.             categoryList : [],
  16.             parentId : 0,
  17.             categoryName : ''
  18.         };
  19.     }
  20.     componentDidMount(){
  21.         this.loadCategoryList();
  22.     }
  23.     // 加载品类列表,显示父品类列表
  24.     loadCategoryList(){
  25.         _product.getCategoryList().then(res => {
  26.             this.setState({
  27.                 categoryList : res
  28.             });
  29.         }, errMsg => {
  30.             _mm.errorTips(errMsg);
  31.         });
  32.     }
  33.     // 表单的值发生变化
  34.     onValueChange(e){
  35.         let name = e.target.name,
  36.             value = e.target.value;
  37.         this.setState({
  38.             [name] : value
  39.         });
  40.     }
  41.     // 提交
  42.     onSubmit(e){
  43.         let categoryName = this.state.categoryName.trim();
  44.         // 品类名称不为空,提交数据
  45.         if(categoryName){
  46.             _product.saveCategory({
  47.                 parentId : this.state.parentId,
  48.                 categoryName : categoryName
  49.             }).then((res) => {
  50.                 _mm.successTips(res);
  51.                 this.props.history.push('/product-category/index');
  52.             }, (errMsg) => {
  53.                 _mm.errorTips(errMsg);
  54.             });
  55.         }
  56.         // 否则,提示错误
  57.         else{
  58.             _mm.errorTips('请输入品类名称');
  59.         }
  60.     }
  61.     render(){
  62.         return (
  63.             <div id="page-wrapper">
  64.                 <PageTitle title="品类列表"/>
  65.                 <div className="row">
  66.                     <div className="col-md-12">
  67.                         <div className="form-horizontal">
  68.                             <div className="form-group">
  69.                                 <label className="col-md-2 control-label">所属品类</label>
  70.                                 <div className="col-md-5">
  71.                                     <select name="parentId"
  72.                                         className="form-control"
  73.                                         onChange={(e) => this.onValueChange(e)}>
  74.                                         <option value="">根品类/</option>
  75.                                         {
  76.                                             this.state.categoryList.map((category, index) => {
  77.                                                 return <option value={category.id} key={index}>根品类/{category.name}</option>
  78.                                             })
  79.                                         }
  80.                                     </select>
  81.                                 </div>
  82.                             </div>
  83.                             <div className="form-group">
  84.                                 <label className="col-md-2 control-label">品类名称</label>
  85.                                 <div className="col-md-5">
  86.                                     <input type="text" className="form-control"
  87.                                         placeholder="请输入品类名称"
  88.                                         name="categoryName"
  89.                                         value={this.state.name}
  90.                                         onChange={(e) => this.onValueChange(e)}/>
  91.                                 </div>
  92.                             </div>
  93.                             <div className="form-group">
  94.                                 <div className="col-md-offset-2 col-md-10">
  95.                                     <button type="submit" className="btn btn-primary"
  96.                                         onClick={(e) => {this.onSubmit(e)}}>提交</button>
  97.                                 </div>
  98.                             </div>
  99.                         </div>
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.         );
  104.     }
  105. }
  106.  
  107. export default CategoryAdd;

React后台管理系统-品类的增加、修改和查看的更多相关文章

  1. React后台管理系统-品类选择器二级联动组件

    1.页面大致是这个样子 2.页面结构 <div className="col-md-10">            <select name="&quo ...

  2. 《React后台管理系统实战 :四》产品分类管理页:添加产品分类、修改(更新)产品分类

    一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...

  3. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  4. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  5. 【共享单车】—— React后台管理系统开发手记:主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  6. 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

  7. 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  8. 《React后台管理系统实战 零》:基础笔记

    day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...

  9. React后台管理系统-添加商品组件

    引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...

随机推荐

  1. Mybatis学习笔记9 - 鉴别器discriminator

    鉴别器:mybatis可以使用discriminator判断某列的值,然后根据某列的值改变封装行为. 示例如下: DeptmentMapper接口定义: package com.mybatis.dao ...

  2. SQL事务的四种隔离级别

    1未提交读(Read uncommitted):完全不锁表,所以会出现脏数据.2提交读(Read committed):1.事务1中update才锁表,可以select到最新数据. 事务2select ...

  3. leetcode 196. Delete Duplicate Emails 配合查询的delete

    https://leetcode.com/problems/delete-duplicate-emails/description/ 题意要对原来的数据表进行删除,不删除不行,它每次只输出原来那个表. ...

  4. 第8章 IO类

    8.1 IO类 iostream                    istream, wistream从流中读取数据 ostream, wostream iostream, wiostream读写 ...

  5. Neutron命令测试5

    jolin@jolin:/$ route -nKernel IP routing tableDestination Gateway Genmask Flags Metric Ref Use Iface ...

  6. #define\const\inline的区别与联系

    总结: const用于代替#define一个固定的值,inline用于代替#define一个函数.是#define的升级版,为了消除#define的缺陷. 参考内容:http://www.cnblog ...

  7. javaSE练习2——流程控制_2.2

    一.假设某员工今年的年薪是30000元,年薪的年增长率6%.编写一个Java应用程序计算该员工10年后的年薪,并统计未来10年(从今年算起)总收入. package com.test; public ...

  8. intellijidea课程 intellijidea神器使用技巧 4-1 重构

    1 重构变量 shift + F6 将选中的变量以及用到该变量的部分全部修改 2 重构方法 Ctrl  + F6 重构变量

  9. Mybatis通用Mapper(转)

    转自:http://blog.csdn.net/isea533/article/details/41457529 极其方便的使用Mybatis单表的增删改查 项目地址:http://git.oschi ...

  10. mint-ui popup自动关闭

    <template> <div class="hello"> <input type="text" v-model="n ...