好好编程-物流项目21【订单管理-新增订单】-阿里云开发者社区

订单管理

新增订单

新增订单的规则如下

序号规则

【1】指定客户，如果新的客户，则跳转到新增客户页面，添加客户信息。

【2】货运区间默认选择客户的常用货运区间

【3】指定配送货物的明细。

【4】选择取件方式，取件方式分为上门取件、客户自行配送到仓库上门取件需要收取费用，指定取件地址、联系人、电话等；客户自己配送则不需要收取配送费用；快递邮递（即客户自行发送快递至仓库），需要提供快递单号及公司。

【5】指定付款方式（预付全款、预付定金&到付尾款、到付）

【6】指定物流方式（海运、陆运、空运），不同物流方式收费标准不同。

【7】录入货物估价信息，用来收取关税&申请价保。

【8】提交之后，在后台将订单状态修改为取件。

1.实现效果

添加成功

2.具体实现步骤

2.1 进入添加界面前

2.1.1 left.jsp

注意：只有业务员和操作员可以添加订单

<dd><div class="title"><span><img src="images/leftico03.png" /></span>订单管理</div>
  <ul class="menuson">
    <shiro:hasAnyRoles name="业务员,操作员">
        <li><cite></cite><a href="/order/orderUpdate" target="rightFrame">新增订单</a><i></i></li>
      </shiro:hasAnyRoles>
      <li><cite></cite><a href="#">常用资料</a><i></i></li>
      <li><cite></cite><a href="#">信息列表</a><i></i></li>
      <li><cite></cite><a href="#">其他</a><i></i></li>
  </ul>    
</dd>

2.1.2 控制层

@Resource
private IOrderService orderService;
@RequestMapping("/orderUpdate")
public String orderUpdate(Integer id,Model m){
  orderService.getUpdateInfo(id, m);
  return "order/orderUpdate";
}

2.1.3 业务逻辑层

package com.bobo.service.impl;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import org.springframework.ui.Model;
import com.bobo.dto.OrderDto;
import com.bobo.mapper.OrderDetailMapper;
import com.bobo.mapper.OrderMapper;
import com.bobo.pojo.BasicData;
import com.bobo.pojo.Customer;
import com.bobo.pojo.OrderDetail;
import com.bobo.pojo.User;
import com.bobo.service.IBasicService;
import com.bobo.service.ICustomerService;
import com.bobo.service.IOrderService;
import com.bobo.service.IUserService;
import com.bobo.utils.Constant;
@Service
public class OrderServiceImpl implements IOrderService {
  @Resource
  private OrderMapper orderMapper;
  @Resource
  private OrderDetailMapper orderDetailMapper;
  @Resource
  private IUserService userService;
  @Resource
  private IBasicService basicService;
  @Resource
  private ICustomerService customerService;
  /**
   * 新增订单需要查询的信息有
   * 1.查询出所有的业务员
   * 2.查询出所有的客户
   * 3.查询基础数据
   *     付款方式:BASIC_PAYMENT_TYPE
   *   货运方式:BASIC_FREIGHT_TYPE
   *   取件方式:BASIC_FETCH_TYPE
   *   常用区间:BASIC_COMMON_INTERVAL
   *   国家：Constant.BASIC_COMMON_INTERVAL
   *   单位：Constant.BASIC_UNIT
   */
  @Override
  public void getUpdateInfo(Integer id, Model m) {
    // 1.查询所有具有业务员角色的用户信息
    List<User> users = userService.queryUserByRoleName(Constant.ROLE_SALESMAN);
    // 2.查询 常用区间的基础数据
    List<BasicData> intervals = basicService.getBasicDataByParentName(Constant.BASIC_COMMON_INTERVAL);
    // 3.付款方式
    List<BasicData> payments = basicService.getBasicDataByParentName(Constant.BASIC_PAYMENT_TYPE);
    // 4.货运方式
    List<BasicData> freights = basicService.getBasicDataByParentName(Constant.BASIC_FREIGHT_TYPE);
    // 5.取件方式
    List<BasicData> fetchs = basicService.getBasicDataByParentName(Constant.BASIC_FETCH_TYPE);
    // 6.查询客户信息
    List<Customer> customers = customerService.query(null);
    // 7.国家
    List<BasicData> countrys = basicService.getBasicDataByParentName(Constant.BASIC_COMMON_INTERVAL);
    // 8.单位
    List<BasicData> units = basicService.getBasicDataByParentName(Constant.BASIC_UNIT);
    m.addAttribute("users", users);
    m.addAttribute("intervals", intervals);
    m.addAttribute("payments", payments);
    m.addAttribute("freights", freights);
    m.addAttribute("fetchs", fetchs);
    m.addAttribute("customers", customers);
    m.addAttribute("countrys", countrys);
    m.addAttribute("units", units);
  }
  @Override
  public void addOrder(OrderDto dto) {
    orderMapper.insertSelective(dto);
    List<OrderDetail> details = dto.getOrderDetails();
    if(details !=null && details.size() > 0 ){
      for (OrderDetail orderDetail : details) {
        orderDetail.setOrderId(dto.getOrderId());
        orderDetailMapper.insertSelective(orderDetail);
      }
    }
  }
}

2.1.4 常量设置

public static final String ROLE_SALESMAN = "业务员";
public static final String ROLE_OPERATOR = "操作员";
public static final String ROLE_ADMIN = "管理员";
public static final String BASIC_COMMON_INTERVAL = "常用区间";
public static final String BASIC_FETCH_TYPE = "取件方式";
public static final String BASIC_FREIGHT_TYPE = "货运方式";
public static final String BASIC_PAYMENT_TYPE = "付款方式";
public static final String BASIC_UNIT = "单位";
public static final String PAGE_MODEL = "pageModel";

此处service中调用的相关方法已经在之前的客户管理模块中已经实现了！

2.2添加界面

2.2.1 整体实现

代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.6.2/jquery.serializejson.js"></script>
<style type="text/css">
  .tablelist1{border:solid 1px #cbcbcb; width:90%; clear:both;margin: 10px;}
  .tablelist1 td{height:35px;line-height:35px; text-indent:11px; border: solid 1px #3B3B3B;padding-right: 5px;}
  table .td1{
    text-align: right;
    background-color: #F1F1F1;
    font-weight: bold;
  }
  table .td2{
    text-align: center;
    background-color: #F1F1F1;
    font-weight: bold;
  }
  table select{
    width: 100px;
    border: 1px solid #3B3B3B;
    height: 23px;
  }
  table input{
    width: 150px;
    border: 1px solid #3B3B3B;
    height: 23px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
</style>
</head>
<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
      <li><a href="/">首页</a></li>
      <li><a href="/user/query">订单管理</a></li>
    </ul>
  </div>
  <div class="formbody">
    <div class="formtitle">
      <span>新增订单</span>
    </div>
    <div style="border: 0px red solid;">
      <form action="/order/save" method="post" id="myform">
        <table  class="tablelist1" >
          <tr>
            <td class="td1">业务员:</td>
            <td>
              <select name="userId">
                <c:forEach items="${users }" var="sale">
                  <option value="${sale.userId }">${sale.realName }</option>
                </c:forEach>
              </select>
            </td>
            <td class="td1" >客户:</td>
            <td>
              <select name="customerId" id="customerId">
                <c:forEach items="${customers }" var="c">
                  <option value="${c.customerId }" >${c.customerName }</option>
                </c:forEach>
              </select>
            </td>
            <td class="td1">到达国家:</td>
            <td>
              <!-- 货运区间默认选择客户的常用货运区间 -->
              <select name="destAreaId" id="destAreaId">
                <c:forEach items="${countrys }" var="country">
                  <option value="${country.baseId }" >${country.baseName}</option>
                </c:forEach>
              </select>
            </td>
          </tr>
          <tr>
            <td class="td1" >收货地址:</td>
            <td>
              <input type="text" name="shippingAddress">
            </td>
            <td class="td1" >收货人:</td>
            <td>
              <input type="text" name="shippingName">
            </td>
            <td class="td1">联系电话: </td>
            <td>
              <input type="text" name="shippingPhone">
            </td>
          </tr>
          <tr>
            <td class="td1">付款方式:</td>
            <td>
              <select name="paymentMethodId">
                <c:forEach items="${payments }" var="pay">
                  <option value="${pay.baseId }">${pay.baseName }</option>
                </c:forEach>
              </select>
            </td>
            <td class="td1">货运方式:</td>
            <td colspan="3">
              <select name="transMethodId">
                <c:forEach items="${freights }" var="freight">
                  <option value="${freight.baseId }">${freight.baseName }</option>
                </c:forEach>
              </select>
            </td>
          </tr>
          <tr>
            <td class="td1">取件方式:</td>
            <td>
              <select name="takeMethodId">
                <c:forEach items="${fetchs }" var="fetch">
                  <option value="${fetch.baseId }">${fetch.baseName }</option>
                </c:forEach>
              </select>
            </td>
            <td class="td1">物流公司:</td>
            <td>
              <input type="text" value="xxx" disabled="disabled">
            </td>
            <td class="td1">物流单号:</td>
            <td>
              <input type="text" value="xxx" disabled="disabled">
            </td>
          </tr>
          <tr>
            <td class="td1">收件人:</td>
            <td>
              <input type="text" value="xxx" disabled="disabled">
            </td>
            <td class="td1">收货地址:</td>
            <td>
              <input type="text" value="深圳宝安区固戍..." disabled="disabled">
            </td>
            <td class="td1">联系电话:</td>
            <td>
              <input type="text" value="xxx" disabled="disabled">
            </td>
          </tr>
          <tr>
            <td class="td1">取件地址:</td>
            <td>
              <input type="text" name="takeAddress">
            </td>
            <td class="td1" >联系电话:</td>
            <td>
              <input type="text" name="takePhone">
            </td>
            <td class="td1">取件联系人:</td>
            <td>
              <input type="text" name="takeName">
            </td>
          </tr>
          <tr>
            <td class="td1">订单备注:</td>
            <td colspan="5">
              <input type="text" style="width: 600px;" name="orderDesc">
            </td>
          </tr>
        </table>
        <table class="tablelist1" id="orderDetailID">
          <tr>
            <td class="td2">货物名称</td>
            <td class="td2">数量</td>
            <td class="td2">单位</td>
            <td class="td2">单价</td>
            <td class="td2">总价值(计算关联)</td>
            <td class="td2">备注</td>
            <td align="center"><img  src="/images/t01.png" id="mytab1" style="width: 20xpx;height: 20px;"></td>
          </tr>
          <tr class="mytr" >
            <td align="center"><input type="text" name="orderDetails[][goodsName]"></td>
            <td align="center"><input type="text" class="goodsNumber" style="width: 50px;" name="orderDetails[][goodsNumber]" onblur="calculateTotalNumber(this)"></td>
            <td align="center"> 
              <select name="orderDetails[][goodsUnit]">
                <c:forEach items="${units }" var="unit">
                  <option value="${unit.baseId }">${unit.baseName }</option>
                </c:forEach>
              </select>
              <!-- <input type="text" style="width: 50px;" name="orderDetails[][goodsUnit]"> -->
            </td>
            <td align="center"><input type="text" class="goodsUnitPrice" style="width: 50px;" name="orderDetails[][goodsUnitPrice]" onblur="calculateTotalPrice(this)"></td>
            <td align="center">
              <input type="text" class="goodsTotal1"  style="width: 50px;"  disabled="disabled">
              <input type="hidden" class="goodsTotal2"   name="orderDetails[][goodsTotal]">
              </td>
            <td align="center"><input type="text" name="orderDetails[][goodsRemark]"></td>
            <td align="center"><img class="mytab2" onclick="removeTr(this)"  src="/images/t03.png" style="width: 20xpx;height: 20px;"></td>
          </tr>
        </table>
        <div style="width: 100%;text-align: center; margin: 20px;" >
          <input type="button" value="提交" onclick="submitForm();"
            style="width: 200px;height: 40px;font-size: 24px;background-color: #41A8C6;color: #ffffff;">
        </div>
      </form>
    </div>
    <script type="text/javascript">
      var index = 0;
      $(function(){
        $("#mytab1").click(function(){
          var tab = $("#orderDetailID");
          var mytr = $(".mytr").clone().attr("class","mytr"+index);
          index++;
          mytr.find("td").find("input").val("");
          tab.append(mytr);
        });
        // 客户选择改变 同时更新区间为客户默认的区间
        $("#customerId").change(function(){
          // 获取选中的客户编号
          var customerId = $(this).val();
          changeInterval(customerId);
        });
        // 页面加载完成设置 常用区间
        var opt = $("#customerId option").first().get(0);
        changeInterval(opt.value);
      });
      // 单价按钮触发计算总价
      function calculateTotalPrice(ct){
        // 单价
        var price = $(ct).val();
        var tr = $(ct).parent().parent();
        // 数量
        var number = tr.find(".goodsNumber").val();
        // 设置总价
        tr.find(".goodsTotal1").val(price*number);
        tr.find(".goodsTotal2").val(price*number);
      }
      // 数量按钮触发计算总价
      function calculateTotalNumber(ct){
        // 数量
        var number = $(ct).val();
        var tr = $(ct).parent().parent();
        // 单价
        var price = tr.find(".goodsUnitPrice").val();
        // 设置总价
        tr.find(".goodsTotal1").val(price*number);
        tr.find(".goodsTotal2").val(price*number);
      }
      // 删除详情选项
      function removeTr(mytr){
        $(mytr).parent().parent().remove();
      }
      // 默认区间调整
      function changeInterval(customerId){
        // 获取客户对应的baseId
        $.get("/customer/queryBaseIdByCustomerId",{"customerId":customerId},function(baseId){
          // 设置区间的默认选项
          console.log($("#destAreaId"));
          var opts = $("#destAreaId").get(0).options;
          for(var i = 0 ; i < opts.length;i++){
            var opt = opts[i];
            if(opt.value == baseId){
              $(opt).attr("selected","selected");
            }
          }
        });
      }
      /**
      * 提交表单
      */
      function submitForm(){
        $.ajax({
             type: "POST",
             url: "/order/save",
             contentType: "application/json; charset=utf-8",
             data: JSON.stringify($("#myform").serializeJSON()),
             success: function(msg){
               alert( "---》 " + msg );
             }
          });
      }
    </script> 
  </div>
  <div style="display: none">
    <script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540'
      language='JavaScript' charset='gb2312'></script>
  </div>
</body>
</html>

2.2.2 货运区间默认选择客户的常用货运区间

页面加载完成及操作动态改变客户的时候我们都需要将默认的区间与之对应。

实现方式如下:

// 默认区间调整
function changeInterval(customerId){
  // 获取客户对应的baseId
  $.get("/customer/queryBaseIdByCustomerId",{"customerId":customerId},function(baseId){
    // 设置区间的默认选项
    console.log($("#destAreaId"));
    var opts = $("#destAreaId").get(0).options;
    for(var i = 0 ; i < opts.length;i++){
      var opt = opts[i];
      if(opt.value == baseId){
        $(opt).attr("selected","selected");
      }
    }
  });
}

2.2.3 动态生成详情行

一个订单可能有多个详情选项，所以我们通过动态生成的方式来实现。

动态添加行

动态删除行

2.2.4 动态计算总价

2.2.5 提交json格式的表单数据

因为我们提交的表单数据内部有嵌套的table数据要提交，而且行数也不确定，所以我们需要将表单数据转换为json数据后提交，所以我们此处使用了jquery.serializejson这个插件来帮助我们快速转换。

引入jquery.serializejson js文件

<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.6.2/jquery.serializejson.js"></script>

注意table提交的数据 name命名格式

ajax提交

/**
* 提交表单
*/
function submitForm(){
  $.ajax({
       type: "POST",
       url: "/order/save",
       contentType: "application/json; charset=utf-8",
       data: JSON.stringify($("#myform").serializeJSON()),
       success: function(msg){
         alert( "---》 " + msg );
       }
    });
}

2.3提交数据

2.3.1 OrderDto

public class OrderDto extends Order{
  private List<OrderDetail> orderDetails;
  public List<OrderDetail> getOrderDetails() {
    return orderDetails;
  }
  public void setOrderDetails(List<OrderDetail> orderDetails) {
    this.orderDetails = orderDetails;
  }
}

2.3.2 OrderController

@RequestMapping("/save")
@ResponseBody
public String saveOrder(@RequestBody OrderDto dto){
  orderService.addOrder(dto);
  return "success";
}

2.3.3 业务层处理

@Override
public void addOrder(OrderDto dto) {
  orderMapper.insertSelective(dto);
  // 添加订单主表 获取生成的key
  List<OrderDetail> details = dto.getOrderDetails();
  if(details !=null && details.size() > 0 ){
    for (OrderDetail orderDetail : details) {
      // 详情关联订单编号
      orderDetail.setOrderId(dto.getOrderId());
      // 保存详情数据
      orderDetailMapper.insertSelective(orderDetail);
    }
  }
}

2.3.4 映射文件key

完成~

好好编程-物流项目21【订单管理-新增订单】

订单管理

新增订单

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

好好编程-物流项目21【订单管理-新增订单】

订单管理

新增订单

热门文章

最新文章

相关课程

相关电子书

相关实验场景