其他分享
首页 > 其他分享> > React管理系统-添加商品组件

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

作者:互联网

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;

posted on 2020-04-16 17:48  six、hc  阅读(...)  评论(...)  编辑  收藏

标签:name,管理系统,res,value,categoryId,React,state,组件,subImages
来源: https://www.cnblogs.com/six-hc/p/12714510.html