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

引入了CategorySelector 二级联动组件、FileUploader图片上传组件和RichEditor富文本编辑组件

1. import React from ‘react‘;
2. import MUtil from ‘util/mm.jsx‘
3. import Product from ‘service/product-service.jsx‘
4. import PageTitle from ‘component/page-title/index.jsx‘;
5. import CategorySelector from ‘./category-selector.jsx‘;
6. import FileUploader from ‘util/file-uploader/index.jsx‘
7. import RichEditor from ‘util/rich-editor/index.jsx‘
8. import ‘./save.scss‘;
9. ?
10. const _mm = new MUtil();
11. const _product = new Product();
12. ?
13. class ProductSave extends React.Component{
14. ????constructor(props){
15. ????????super(props);
16. ????????this.state = {
17. ????????????name : ‘‘,
18. ????????????subtitle : ‘‘,
19. ????????????categoryId : 0,
20. ????????????parentCategoryId : 0,
21. ????????????subImages : [],
22. ????????????detail : ‘‘,
23. ????????????price : ‘‘,
24. ????????????stock : ‘‘,
25. ????????????detail : ‘‘,
26. ????????????status : 1 //商品状态1为在售
27. ?
28. ????????}
29. ????}
30. ????componentDidMount(){
31. ????????this.loadProduct();
32. ????}
33. ????// 加载商品详情
34. ????loadProduct(){
35. ??????????// 有id的时候，表示是编辑功能，需要表单回填
36. ??????????if(this.state.id){
37. ????????????_product.getProduct(this.state.id).then((res) => {
38. ????????????????let images = res.subImages.split(‘,‘);
39. ????????????????res.subImages = images.map((imgUri) => {
40. ????????????????????return {
41. ????????????????????????uri: imgUri,
42. ????????????????????????url: res.imageHost + imgUri
43. ????????????????????}
44. ????????????????});
45. ????????????????res.defaultDetail = res.detail;
46. ????????????????this.setState(res);
47. ????????????},(errMsg) => {
48. ????????????????_mm.errorTips(errMsg);
49. ????????????});
50. ????????}
51. ????}
52. ????getSubImagesString(){
53. ????????return this.state.subImages.map((image) => image.uri).join(‘,‘);
54. ????}
55. ????//提交
56. ????onSubmit(e){
57. ????????let product = {
58. ????????????name : this.state.name,
59. ????????????subtitle : this.state.subtitle,
60. ????????????categoryId : parseInt(this.state.categoryId),
61. ????????????subImages : this.getSubImagesString(),
62. ????????????detail : this.state.detail,
63. ????????????price : parseFloat(this.state.price),
64. ????????????stock : parseInt(this.state.stock),
65. ????????????status : this.state.status
66. ????????}
67. ???????let productCheckResult = _product.checkProduct(product);
68. ????????// 表单验证成功
69. ????????if(productCheckResult.status){
70. ???????????_product.saveProduct(product).then((res) => {
71. ???????????????_mm.successTips(res);
72. ???????????????this.props.history.push(‘/product/index‘);
73. ???????????},(errMsg) => {
74. ???????????????_mm.errorTips(errMsg);
75. ???????????});
76. ???????}
77. ????}
78. ????//简单字段的改变，比如商品名称描述价格库存onValueChange
79. ????onValueChange(e){
80. ????????let name = e.target.name,
81. ????????value = e.target.value.trim();
82. ????????this.setState({
83. ????????????[name] : value
84. ????????});
85. ?
86. ????}
87. ????//品类改变事件
88. ????onCategoryChange(categoryId,parentCategoryId){
89. ????????this.setState({
90. ????????????categoryId : categoryId,
91. ????????????parentCategoryId : parentCategoryId
92. ????????});
93. ????}
94. ????//上传图片成功
95. ????onUploadSuccess(res){
96. ????????let subImages = this.state.subImages;
97. ????????subImages.push(res);
98. ????????this.setState({
99. ????????????subImages : subImages
100. ????????});
101. ????}
102. ????//上传图片失败
103. ????onUploadError(res){
104. ????????_mm.errorTips(errMsg);
105. ????}
106. ?????// 删除图片
107. ?????onImageDelete(e){
108. ????????let index = parseInt(e.target.getAttribute(‘index‘)),
109. ????????????subImages = this.state.subImages;
110. ????????subImages.splice(index,1);
111. ????????this.setState({
112. ????????????subImages : subImages
113. ????????});
114. ????}
115. ????//富文本编辑器
116. ????onDetailValueChange(value){
117. ????????this.setState({
118. ????????????detail : value
119. ????????})
120. ????}
121. ????render(){
122. ????????return (
123. ????????????<div id="page-wrapper">
124. ????????????????<PageTitle title={this.state.id ? ‘编辑商品‘ : ‘添加商品‘} />
125. ????????????????<div className="form-horizontal">
126. ????????????????????<div className="form-group">
127. ????????????????????????<label className="col-md-2 control-label">商品名称</label>
128. ????????????????????????<div className="col-md-5">
129. ????????????????????????????<input type="text" className="form-control"
130. ????????????????????????????????placeholder="请输入商品名称"
131. ????????????????????????????????name="name"
132. ????????????????????????????????value={this.state.name}
133. ????????????????????????????????onChange={(e) => this.onValueChange(e)}/>
134. ????????????????????????</div>
135. ????????????????????</div>
136. ????????????????????<div className="form-group">
137. ????????????????????????<label className="col-md-2 control-label">商品描述</label>
138. ????????????????????????<div className="col-md-5">
139. ????????????????????????????<input type="text" className="form-control"
140. ????????????????????????????????placeholder="请输入商品描述"
141. ????????????????????????????????name="subtitle"
142. ????????????????????????????????value={this.state.subtitle}
143. ????????????????????????????????onChange={(e) => this.onValueChange(e)}/>
144. ????????????????????????</div>
145. ????????????????????</div>
146. ????????????????????<div className="form-group">
147. ????????????????????????<label className="col-md-2 control-label">所属分类</label>
148. ????????????????????????<CategorySelector
149. ?????????????????????????categoryId={this.state.categoryId}
150. ?????????????????????????parentCategoryId={this.state.parentCategoryId}
151. ?????????????????????????onCategoryChange={ (categoryId,parentCategoryId) => this.onCategoryChange(categoryId,parentCategoryId)} />
152. ?
153. ????????????????????</div>
154. ????????????????????<div className="form-group">
155. ????????????????????????<label className="col-md-2 control-label">商品价格</label>
156. ????????????????????????<div className="col-md-3">
157. ????????????????????????????<div className="input-group">
158. ????????????????????????????????<input type="number" className="form-control"
159. ????????????????????????????????????placeholder="价格"
160. ????????????????????????????????????name="price"
161. ????????????????????????????????????value={this.state.price}
162. ????????????????????????????????????onChange={(e) => this.onValueChange(e)}/>
163. ????????????????????????????????<span className="input-group-addon">元</span>
164. ????????????????????????????</div>
165. ????????????????????????</div>
166. ????????????????????</div>
167. ????????????????????<div className="form-group">
168. ????????????????????????<label className="col-md-2 control-label">商品库存</label>
169. ????????????????????????<div className="col-md-3">
170. ????????????????????????????<div className="input-group">
171. ????????????????????????????????<input type="number" className="form-control"
172. ????????????????????????????????????placeholder="库存"
173. ????????????????????????????????????name="stock"
174. ????????????????????????????????????value={this.state.stock}
175. ????????????????????????????????????onChange={(e) => this.onValueChange(e)}/>
176. ????????????????????????????????<span className="input-group-addon">件</span>
177. ????????????????????????????</div>
178. ?
179. ????????????????????????</div>
180. ????????????????????</div>
181. ????????????????????<div className="form-group">
182. ????????????????????????<label className="col-md-2 control-label">商品图片</label>
183. ????????????????????????<div className="col-md-10">
184. ????????????????????????{
185. ??????????????????????????????this.state.subImages.length ? this.state.subImages.map(
186. ????????????????????????????????????(image,index) => (
187. ????????????????????????????????????<div className="img-con" key={index}>
188. ????????????????????????????????????????<img className="img" src={image.url} />
189. ????????????????????????????????????????<i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}></i>
190. ????????????????????????????????????</div>)
191. ????????????????????????????????) : (<div>请上传图片</div>)
192. ????????????????????????????}
193. ????????????????????????</div>
194. ????????????????????????<div className="col-md-offset-2 col-md-10 file-upload-con">
195. ????????????????????????<FileUploader onSuccess={(res) => this.onUploadSuccess(res)}
196. ????????????????????????????????onError={(errMsg) => this.onUploadError(errMsg)}/>
197. ????????????????????????</div>
198. ????????????????????</div>
199. ????????????????????<div className="form-group">
200. ????????????????????????<label className="col-md-2 control-label">商品详情</label>
201. ????????????????????????<div className="col-md-10">
202. ???????????????????????????<RichEditor onValueChange={(value) => {this.onDetailValueChange(value)}}/>
203. ????????????????????????</div>
204. ????????????????????</div>
205. ????????????????????<div className="form-group">
206. ????????????????????????<div className="col-md-offset-2 col-md-10">
207. ????????????????????????????<button type="submit" className="btn btn-primary"
208. ????????????????????????????????onClick={(e) => {this.onSubmit(e)}}>提交</button>
209. ????????????????????????</div>
210. ????????????????????</div>
211. ????????????????</div>
212. ????????????</div>
213. ????????)
214. ????}
215. }
216. export default ProductSave;