引入了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;

React后台管理系统-添加商品组件的更多相关文章

  1. React后台管理系统- rc-pagination分页组件封装

    1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...

  2. React后台管理系统-首页Home组件

    1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = {            u ...

  3. React后台管理系统-商品管理列表组件

    1.商品列表页面结构 <div id="page-wrapper">              <PageTitle title="商品列表" ...

  4. 《React后台管理系统实战 ：一》：目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  5. 《React后台管理系统实战 ：四》产品分类管理页：添加产品分类、修改(更新)产品分类

    一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...

  6. 【共享单车】—— React后台管理系统开发手记：主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  7. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  8. React后台管理系统-商品列表搜索框listSearch组件

    1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap">               <div classN ...

  9. 《React后台管理系统实战 ：二》antd左导航：cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

随机推荐

  1. UnityError 以下文件中的行尾不一致,要将行尾标准化吗？

  2. mac 下安装 mysql

    1. 下载mysql community server 2. 下载mysql workbench 3. 启动mysql server 4. 进入mysql命令行 5. 修改root密码 ALTER U ...

  3. .NET控制台程序监听程序退出

    There are mainly 2 types of Win32 applications, console application and window application. They hav ...

  4. DEDE模板中如何运行php脚本和php变量的使用

    在使用dede模板的时候,经常会需要直接对dede数据库的底层字段进行处理,如果dede中没有相应的函数的时候,往往就需要我们想办法来处理了. 举例:我想取出数据表addonimages中的某一条记录 ...

  5. Homemade Script Language: RED

    Made by C, named after RED(RecovEr from SaDness) 欢迎批评 :)

  6. php7.0.24-nts配置步骤

    php-cgi.exe文件运行 php-cgi.exe -b 127.0.0.1:9000 -c D:/myphp2017/php7-nts/php.ini nginx命令 启动 start ngin ...

  7. C语言答案解析

    1．设整型变量 a=2,则执行下列语句后,浮点型变量b的值不为0.5的是(  B ) A) b=1.0/a            B) b=(float)(1/a) C) b=1/(float)a   ...

  8. Oracle错误——ORA-03113:通信通道的文件结尾

    请参考:http://blog.csdn.net/zwk626542417/article/details/39667999 今天跟往常一样,登陆PL/SQL,确登陆失败,出现一个错误“ORA-010 ...

  9. js去除重复项

    window.onload = function(){ var array = [12, 14,15,17,12,11,12,14,16] alert(del(array)); } function ...

  10. #include stdio.h(3)

    #include <stdio.h> int main() { /* * ** *** **** ***** */ ;a<;a++) { printf("\n") ...