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;