React后台管理系统-品类的增加、修改和查看

React后台管理系统-品类的增加、修改和查看

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="0">根品类/</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;