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;