React后台管理系统-订单管理

摘要:
'list':'search';

1.订单管理页面和商品管理页面类似,都是一个搜索组件+列表组件

React后台管理系统-订单管理第1张

2.搜索框search组件

  1. import React from 'react';
  2.  
  3. class ListSearch extends React.Component{
  4.     constructor(props){
  5.         super(props);
  6.         this.state = {
  7.             orderNumber : ''
  8.         }
  9.     }
  10.     // 数据变化的时候
  11.     onValueChange(e){
  12.         let name = e.target.name,
  13.             value = e.target.value.trim();
  14.         this.setState({
  15.             [name] : value
  16.         });
  17.     }
  18.     // 点击搜索按钮的时候
  19.     onSearch(){
  20.         this.props.onSearch(this.state.orderNumber);
  21.     }
  22.     // 输入关键字后按回车,自动提交
  23.     onSearchKeywordKeyUp(e){
  24.         if(e.keyCode === 13){
  25.             this.onSearch();
  26.         }
  27.     }
  28.     render(){
  29.         return (
  30.             <div className="row search-wrap">
  31.                 <div className="col-md-12">
  32.                     <div className="form-inline">
  33.                         <div className="form-group">
  34.                             <select className="form-control">
  35.                                 <option value="">按订单号查询</option>
  36.                             </select>
  37.                         </div>
  38.                         <div className="form-group">
  39.                             <input type="text"
  40.                                 className="form-control"
  41.                                 placeholder="订单号"
  42.                                 name="orderNumber"
  43.                                 onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
  44.                                 onChange={(e) => this.onValueChange(e)}/>
  45.                         </div>
  46.                         <button className="btn btn-primary"
  47.                             onClick={(e) => this.onSearch()}>搜索</button>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         )
  52.     }
  53. }
  54. export default ListSearch;

3.订单列表组件

  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import MUtil from 'util/mm.jsx'
  4. import Order from 'service/order-service.jsx'
  5.  
  6. import PageTitle from 'component/page-title/index.jsx';
  7. import ListSearch from './index-list-search.jsx';
  8. import TableList from 'util/table-list/index.jsx';
  9. import Pagination from 'util/pagination/index.jsx';
  10.  
  11.  
  12. const _mm = new MUtil();
  13. const _order = new Order();
  14.  
  15. class OrderList extends React.Component{
  16.     constructor(props){
  17.         super(props);
  18.         this.state = {
  19.             list : [],
  20.             pageNum : 1,
  21.             listType : 'list' // list / search
  22.         };
  23.     }
  24.     componentDidMount(){
  25.         this.loadOrderList();
  26.     }
  27.     // 加载商品列表
  28.     loadOrderList(){
  29.         let listParam = {};
  30.         listParam.listType = this.state.listType;
  31.         listParam.pageNum = this.state.pageNum;
  32.         // 如果是搜索的话,需要传入搜索类型和搜索关键字
  33.         if(this.state.listType === 'search'){
  34.             listParam.orderNo = this.state.orderNumber;
  35.         }
  36.         // 请求接口
  37.         _order.getOrderList(listParam).then(res => {
  38.             this.setState(res);
  39.         }, errMsg => {
  40.             this.setState({
  41.                 list : []
  42.             });
  43.             _mm.errorTips(errMsg);
  44.         });
  45.     }
  46.     // 搜索
  47.     onSearch(orderNumber){
  48.         let listType = orderNumber === '' ? 'list' : 'search';
  49.         this.setState({
  50.             listType : listType,
  51.             pageNum : 1,
  52.             orderNumber : orderNumber
  53.         }, () => {
  54.             this.loadOrderList();
  55.         });
  56.     }
  57.     // 页数发生变化的时候
  58.     onPageNumChange(pageNum){
  59.         this.setState({
  60.             pageNum : pageNum
  61.         }, () => {
  62.             this.loadOrderList();
  63.         });
  64.     }
  65.     render(){
  66.         let tableHeads = ['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作'];
  67.         return (
  68.             <div id="page-wrapper">
  69.                 <PageTitle title="订单列表" />
  70.                 <ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)}}/>
  71.                 <TableList tableHeads={tableHeads}>
  72.                     {
  73.                         this.state.list.map((order, index) => {
  74.                             return (
  75.                                 <tr key={index}>
  76.                                     <td>
  77.                                         <Link to={ `/order/detail/${order.orderNo}` }>{order.orderNo}</Link>
  78.                                     </td>
  79.                                     <td>{order.receiverName}</td>
  80.                                     <td>{order.statusDesc}</td>
  81.                                     <td>¥{order.payment}</td>
  82.                                     <td>{order.createTime}</td>
  83.                                     <td>
  84.                                         <Link to={ `/order/detail/${order.orderNo}` }>详情</Link>
  85.                                     </td>
  86.                                 </tr>
  87.                             );
  88.                         })
  89.                     }
  90.                 </TableList>
  91.                 <Pagination current={this.state.pageNum}
  92.                     total={this.state.total}
  93.                     onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
  94.             </div>
  95.         );
  96.     }
  97. }
  98.  
  99. export default OrderList;

4.详情detail组件

  1. import React from 'react';
  2. import MUtil from 'util/mm.jsx'
  3. import Order from 'service/order-service.jsx'
  4. import PageTitle from 'component/page-title/index.jsx';
  5. import TableList from 'util/table-list/index.jsx';
  6.  
  7. import './detail.scss';
  8. const _mm = new MUtil();
  9. const _order = new Order();
  10.  
  11. class OrderDetail extends React.Component{
  12.     constructor(props){
  13.         super(props);
  14.         this.state = {
  15.             orderNumber : this.props.match.params.orderNumber,
  16.             orderInfo : {}
  17.         }
  18.     }
  19.     componentDidMount(){
  20.         this.loadOrderDetail();
  21.     }
  22.     // 加载商品详情
  23.     loadOrderDetail(){
  24.         _order.getOrderDetail(this.state.orderNumber).then((res) => {
  25.             this.setState({
  26.                 orderInfo : res
  27.             });
  28.         }, (errMsg) => {
  29.             _mm.errorTips(errMsg);
  30.         });
  31.     }
  32.     // 发货操作
  33.     onSendGoods(){
  34.         if(window.confirm('是否确认该订单已经发货?')){
  35.             _order.sendGoods(this.state.orderNumber).then((res) => {
  36.                 _mm.successTips('发货成功');
  37.                 this.loadOrderDetail();
  38.             }, (errMsg) => {
  39.                 _mm.errorTips(errMsg);
  40.             });
  41.         }
  42.     }
  43.     render(){
  44.         let receiverInfo = this.state.orderInfo.shippingVo || {},
  45.             productList = this.state.orderInfo.orderItemVoList || [];
  46.         let tableHeads = [
  47.             {name: '商品图片', '10%'},
  48.             {name: '商品信息', '45%'},
  49.             {name: '单价', '15%'},
  50.             {name: '数量', '15%'},
  51.             {name: '合计', '15%'}
  52.         ];
  53.         return (
  54.             <div id="page-wrapper">
  55.                 <PageTitle title="订单详情" />
  56.                 <div className="form-horizontal">
  57.                     <div className="form-group">
  58.                         <label className="col-md-2 control-label">订单号</label>
  59.                         <div className="col-md-5">
  60.                             <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
  61.                         </div>
  62.                     </div>
  63.                     <div className="form-group">
  64.                         <label className="col-md-2 control-label">创建时间</label>
  65.                         <div className="col-md-5">
  66.                             <p className="form-control-static">{this.state.orderInfo.createTime}</p>
  67.                         </div>
  68.                     </div>
  69.                     <div className="form-group">
  70.                         <label className="col-md-2 control-label">收件人</label>
  71.                         <div className="col-md-5">
  72.                             <p className="form-control-static">
  73.                                 {receiverInfo.receiverName},
  74.                                 {receiverInfo.receiverProvince}
  75.                                 {receiverInfo.receiverCity}
  76.                                 {receiverInfo.receiverAddress}
  77.                                 {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
  78.                             </p>
  79.                         </div>
  80.                     </div>
  81.                     <div className="form-group">
  82.                         <label className="col-md-2 control-label">订单状态</label>
  83.                         <div className="col-md-5">
  84.                             <p className="form-control-static">
  85.                                 {this.state.orderInfo.statusDesc}
  86.                                 {
  87.                                     this.state.orderInfo.status === 20
  88.                                     ? <button className="btn btn-default btn-sm btn-send-goods"
  89.                                         onClick={(e) => {this.onSendGoods(e)}}>立即发货</button>
  90.                                     : null
  91.                                 }
  92.                             </p>
  93.                         </div>
  94.                     </div>
  95.                     <div className="form-group">
  96.                         <label className="col-md-2 control-label">支付方式</label>
  97.                         <div className="col-md-5">
  98.                             <p className="form-control-static">
  99.                                 {this.state.orderInfo.paymentTypeDesc}
  100.                             </p>
  101.                         </div>
  102.                     </div>
  103.                     <div className="form-group">
  104.                         <label className="col-md-2 control-label">订单金额</label>
  105.                         <div className="col-md-5">
  106.                             <p className="form-control-static">
  107.                                 ¥{this.state.orderInfo.payment}
  108.                             </p>
  109.                         </div>
  110.                     </div>
  111.                     <div className="form-group">
  112.                         <label className="col-md-2 control-label">商品列表</label>
  113.                         <div className="col-md-10">
  114.                             <TableList tableHeads={tableHeads}>
  115.                                 {
  116.                                     productList.map((product, index) => {
  117.                                         return (
  118.                                             <tr key={index}>
  119.                                                 <td>
  120.                                                     <img className="p-img" alt={product.productName}
  121.                                                         src={`${this.state.orderInfo.imageHost}${product.productImage}`}/>
  122.                                                 </td>
  123.                                                 <td>{product.productName}</td>
  124.                                                 <td>¥{product.currentUnitPrice}</td>
  125.                                                 <td>{product.quantity}</td>
  126.                                                 <td>¥{product.totalPrice}</td>
  127.                                             </tr>
  128.                                         );
  129.                                     })
  130.                                 }
  131.                             </TableList>
  132.                         </div>
  133.                     </div>
  134.                 </div>
  135.             </div>
  136.         )
  137.     }
  138. }
  139. export default OrderDetail;

免责声明:文章转载自《React后台管理系统-订单管理》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇精选30道Java笔试题解答向其他进程注入代码的三种方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

axios请求提交的form data格式 明明是JSON格式的参数却转成了字符串格式

问题:传的参数成为了字符数格式  解决:把参数的格式转换 const params = new URLSearchParams() params.append('USER_LOGIN', 'admin') params.append('PASS_WORD', '123456')...

npm install -g create-react-app MacOS 报错解决

macOS 安装create-react-app报错解决: sudo npm uninstall -g create-react-app //删除之前对镜像 npm config set registry https://registry.npm.taobao.org // 安装还是不成功直接切换成淘宝镜像安装 npm config get regist...

excel数据批量导入

1.  html           <form action="@Url.Action("UpLoadFile")" enctype="multipart/form-data" method="post">                                  <td>                         ...

订单系统学习

概述 本文主要讲述了在传统电商企业中,订单系统应承载的角色,就订单系统所包含的主要功能模块梳理了设计思路,并对订单系统未来的发展做了一些思考。 1、订单系统在企业中的角色 在搭建企业订单系统之前,需要先梳理企业整体业务系统之间的关系和订单系统上下游关系,只有划分清业务系统边界,才能确定订单系统的职责与功能,进而保证各系统之间高效简洁的工作。 2、订单系统与...

Reactjs相比较原生方案是绝对的快吗?哪些情况下React有优势

作者:尤雨溪链接:http://www.zhihu.com/question/31809713/answer/53544875来源:知乎著作权归作者所有,转载请联系作者获得授权。   1. 原生 DOM 操作 vs. 通过框架封装操作。这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从...

FORM开发笔记

1, 界面对行循环后在回到循环前的行 v_current_record number:=Get_Block_Property('block名称', Current_Record); --返回当前行号 go_record(v_current_record); --回到以前的当前行 2,Form中的系统变量,它存在于一个Form的整个运行时期的会话之中,变量包...