2020暑假项目-车辆派遣管理系统开发记录#4

2020暑假项目-车辆派遣管理系统开发记录#4

内容展示

  • 1、今日完成内容，
    - 驾驶员信息列表完成，及信息更新维护；使用layui的表格编辑功能，可直接在表格中修改信息
    - 业务员信息列表完成，及信息更新维护；使用layui的表格编辑功能，可直接在表格中修改信息
  • 2、核心源码
    pilotList.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt"%>
<jsp:include page="../common/menu.jsp" />

<html>
<head>
    <title>车辆信息管理</title>
</head>

<script src="<%=basePath%>js/tools.js"></script>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">驾驶员管理</li>
    </ul>
    <div class="layui-tab-content">
        <table class="layui-hide" id="backUser" lay-filter="backUser"></table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser">新增数据</button>
    </div>
</script>

<script type="text/html" id="bduCreateDate">
    {{ dateFormat(d.createTime) }}
</script>

<script type="text/html" id="bpilotLicenseTime">
    {{ dateFormat(d.pilotLicenseTime) }}
</script>
<script type="text/html" id="bworkLicenseTime">
    {{ dateFormat(d.workLicenseTime) }}
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="启用|停用" lay-filter="bduStatusFilter" {{ d.status == 1 ? 'checked' : '' }}>
</script>
</body>
</html>
<jsp:include page="../common/js.jsp" />
<script type="text/javascript">

    $('document').ready(function() {
        var layer = null;
        var laypage = null;
        var table = null;
        var form = null;
        layui.use([ "laypage", "layer", 'table' ], function() {
            layer = layui.layer;
            laypage = layui.laypage;
            table = layui.table;
            form = layui.form;

            table.render({
                elem : '#backUser',
                url : '<%=basePath%>pilot/pilotList',
                id : 'backUser',
                height:650,
                toolbar : '#toolbar',
                cellMinWidth : 100,
                cols : [ [
                     {
                        field : 'id',
                        title : '编号',
                        width : '5%',
                        unresize : true,
                        sort : true
                    }
                    , {
                        field : 'pilotName',
                        title : '驾驶员姓名',
                        width : '10%',
                        sort : true
                    }
                    , {
                        field : 'pilotCrad',
                        title : '身份证号码',
                        edit: 'text',
                        width : '10%',
                        unresize : true
                    }
                    , {
                        field : 'pilotTel',
                        title : '联系电话',
                        width : '10%',
                        edit: 'text',
                        sort : true
                    }
                    , {
                        field : 'pilotAdr',
                        title : '联系地址',
                        width : '10%',
                        edit: 'text',
                        sort : true
                    }
                    , {
                        field : 'pilotLicenseTime',
                        title : '驾驶证有效期',
                        width : '10%',
                        templet : '#bpilotLicenseTime',
                        sort : true
                    }
                    , {
                        field : 'workLicenseTime',
                        title : '上岗证有效期',
                        width : '10%',
                        templet : '#bworkLicenseTime',
                        sort : true
                    }
                    , {
                        field : 'remark',
                        title : '备注',
                        edit: 'text',
                        width : '12%',
                        unresize : true
                    }
                    , {
                        field : 'createBy',
                        title : '创建人',
                        width : '10%',
                        sort : true
                    }
                    , {
                        field : 'createtime',
                        title : '创建日期',
                        width : '10%',
                        templet : '#bduCreateDate',
                        unresize : true
                    }
                    , {
                        fixed : 'right',
                        width : '10%',
                        align : 'center',
                        toolbar : '#status',
                        title : '状态'
                    }
                ] ],
                page : true
            });

            //监听单元格编辑 TODO
            table.on('edit(backUser)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);

                var postData ={};
                postData["id"] = data.id;
                postData[field] = obj.value;

                $.ajax({
                    url:'<%=basePath %>pilot/updatePilotByPk',
                    data:postData,
                    type:'POST',
                    success:function(data){
                        if(data.responseHead.code == '200'){
                            layer.alert('操作成功!', {icon: 1,title: "结果"});
                        }else{
                            layer.alert(data.responseHead.msg, {icon: 5,title: "结果"});
                        }

                        table.reload('backUser', {
                            url: '<%=basePath%>pilot/pilotList'
                        });
                    }
                });
            });

            //头工具栏事件
            table.on('toolbar(backUser)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch(obj.event){
                    case 'addUser':
                        layer.msg('添加');
                        window.location.href="<%=basePath %>pilot/toAddPilot";
                        break;
                };

            });

            form.on('switch(bduStatusFilter)', function(obj) {

                var ids =[];
                ids[0] = this.id;
                var type = this.value=="1"?0:1;
                $.ajax({
                    url:'<%=basePath %>pilot/updatePilotStatus',
                    data:{
                        "type":type,
                        "list":ids
                    },
                    type:'POST',
                    success:function(data){
                        if(data.responseHead.code == '200'){
                            layer.alert('操作成功!', {icon: 1,title: "结果"});
                        }else{
                            layer.alert(data.responseHead.msg, {icon: 5,title: "结果"});
                        }

                        table.reload('backUser', {
                            url: '<%=basePath%>pilot/pilotList'
                        });
                    }
                });
            });

        });
    });
</script>

addPilot.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<jsp:include page="../common/menu.jsp" />
<html>
<head>
    <title>车辆添加</title>
</head>
<body class="form-wrap">

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">添加驾驶员</div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="<%=basePath %>pilot/addPilot" name="warehouseAreaForm" method="post" lay-filter="component-form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">驾驶员姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="pilotName" value="" autocomplete="off"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="pilotCrad" id="pilotCrad" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="number" name="pilotTel" id="pilotTel" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系地址</label>
                        <div class="layui-input-inline">
                            <input type="text" value="" name="pilotAdr" id='pilotAdr' autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">驾驶证有效期</label>
                        <div class="layui-input-inline">
                            <input type="text" value="" name="pilotLicenseTime" id='pilotLicenseTime' class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">上岗证有效期</label>
                        <div class="layui-input-inline">
                            <input type="text" value="" name="workLicenseTime" id='workLicenseTime' class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">是否可用</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" value="1" checked="" lay-skin="switch" lay-text="允许|禁止"><div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>允许</em><i></i></div>
                </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="text-align: center;">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button class="layui-btn layui-btn-primary" id="back">返回</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
</div>
</body>

<script type="text/javascript">

    $('document').ready(function(){

        layui.use(['form','laydate'], function(){
            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
               elem : '#pilotLicenseTime',
               trigger : 'click'
            });
            laydate.render({
                elem : '#workLicenseTime',
                trigger : 'click'
            });

            /* 监听提交 */
            form.on('submit(component-form-demo1)', function(data){
                var form = document.forms[0];
                form.submit();
                return false;
            });
        });

        $('#back').click(function(){
            window.location.href="<%=basePath %>pilot/toPilotList";
            return false;
        });

    });
</script>
</html>
<jsp:include page="../common/js.jsp" />

PilotController.java

package com.vdm.action;

import com.vdm.model.PilotInfo;
import com.vdm.model.UserInfo;

import com.vdm.service.PilotService;
import com.vdm.util.Constants;
import com.vdm.util.ErrorConstants;
import com.vdm.util.ReturnMapUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping(value = "/pilot")
public class PilotController {

    @Autowired
    PilotService pilotService;

    @RequestMapping(value = "/toPilotList")
    public String toPilotList(){return "pilot/pilotList";}

    @ResponseBody
    @RequestMapping(value = "/pilotList",method = RequestMethod.GET)
    public Map<String,Object> vehicleList(){
        List<PilotInfo> userList = pilotService.pilotInfoList();
        int count = pilotService.getPilotInfoCount();
        Map<String,Object> retMap = new HashMap<String,Object>();
        retMap.put("code",0);
        retMap.put("msg","");
        retMap.put("count",count);
        retMap.put("data",userList);
        return retMap;
    }

    @ResponseBody
    @RequestMapping(value="/updatePilotStatus",method=RequestMethod.POST)
    public Map<String,Object> updatePilotStatus(@RequestParam(value = "list[]")List<Integer> ids, Integer type){
        if(pilotService.updatePilotInfoStatus(ids, type)>0){
            return ReturnMapUtil.getOKResult();
        }else{
            return ReturnMapUtil.getErrorResult(ErrorConstants.PARAMETER_ERROR);
        }
    }

    @ResponseBody
    @RequestMapping(value="/updatePilotByPk",method=RequestMethod.POST)
    public Map<String,Object> updatePilotByPk(PilotInfo pilotInfo){
        if(pilotService.updateByPk(pilotInfo)>0){
            return ReturnMapUtil.getOKResult();
        }else{
            return ReturnMapUtil.getErrorResult(ErrorConstants.PARAMETER_ERROR);
        }
    }

    @RequestMapping(value = "/toAddPilot")
    public String toAddPilot(){return "pilot/addPilot";}

    @RequestMapping(value = "/addPilot" , method = RequestMethod.POST)
    public String addPilot(PilotInfo pilotInfo, HttpSession session){
        UserInfo user = (UserInfo) session.getAttribute(Constants.CURRENT_USER);
        pilotInfo.setCreateBy(user.getLoginName());
        pilotService.insertSelective(pilotInfo);
        return "redirect:toPilotList";
    }

}

pilotInfoMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.vdm.dao.PilotInfoMapper" >
  <resultMap id="BaseResultMap" type="com.vdm.model.PilotInfo" >
    <id column="id" property="id" jdbcType="INTEGER" />
    <result column="pilot_name" property="pilotName" jdbcType="VARCHAR" />
    <result column="pilot_crad" property="pilotCrad" jdbcType="VARCHAR" />
    <result column="pilot_tel" property="pilotTel" jdbcType="VARCHAR" />
    <result column="pilot_adr" property="pilotAdr" jdbcType="VARCHAR" />
    <result column="pilot_license_time" property="pilotLicenseTime" jdbcType="DATE" />
    <result column="work_license_time" property="workLicenseTime" jdbcType="DATE" />
    <result column="status" property="status" jdbcType="SMALLINT" />
    <result column="remark" property="remark" jdbcType="VARCHAR" />
    <result column="create_time" property="createTime" jdbcType="TIMESTAMP" />
    <result column="create_by" property="createBy" jdbcType="VARCHAR" />
  </resultMap>
  <sql id="Base_Column_List" >
    id, pilot_name, pilot_crad, pilot_tel, pilot_adr, pilot_license_time, work_license_time, status,
    remark, create_time, create_by
  </sql>
  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    select 
    <include refid="Base_Column_List" />
    from pilot_info
    where id = #{id,jdbcType=INTEGER}
  </select>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    delete from pilot_info
    where id = #{id,jdbcType=INTEGER}
  </delete>
  <insert id="insert" parameterType="com.vdm.model.PilotInfo" >
    insert into pilot_info (id, pilot_name, pilot_crad, 
      pilot_tel, pilot_adr, pilot_license_time, status,
      work_license_time, remark, create_time, 
      create_by)
    values (#{id,jdbcType=INTEGER}, #{pilotName,jdbcType=VARCHAR}, #{pilotCrad,jdbcType=VARCHAR}, 
      #{pilotTel,jdbcType=VARCHAR}, #{pilotAdr,jdbcType=VARCHAR}, #{pilotLicenseTime,jdbcType=DATE}, 
      #{workLicenseTime,jdbcType=DATE}, #{remark,jdbcType=VARCHAR}, #{createTime,jdbcType=TIMESTAMP}, 
      #{createBy,jdbcType=VARCHAR})
  </insert>
  <insert id="insertSelective" parameterType="com.vdm.model.PilotInfo" >
    insert into pilot_info
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        id,
      </if>
      <if test="pilotName != null" >
        pilot_name,
      </if>
      <if test="pilotCrad != null" >
        pilot_crad,
      </if>
      <if test="pilotTel != null" >
        pilot_tel,
      </if>
      <if test="pilotAdr != null" >
        pilot_adr,
      </if>
      <if test="pilotLicenseTime != null" >
        pilot_license_time,
      </if>
      <if test="workLicenseTime != null" >
        work_license_time,
      </if>
      <if test="remark != null" >
        remark,
      </if>
      <if test="status != null" >
        status,
      </if>
        create_time,
      <if test="createBy != null" >
        create_by,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        #{id,jdbcType=INTEGER},
      </if>
      <if test="pilotName != null" >
        #{pilotName,jdbcType=VARCHAR},
      </if>
      <if test="pilotCrad != null" >
        #{pilotCrad,jdbcType=VARCHAR},
      </if>
      <if test="pilotTel != null" >
        #{pilotTel,jdbcType=VARCHAR},
      </if>
      <if test="pilotAdr != null" >
        #{pilotAdr,jdbcType=VARCHAR},
      </if>
      <if test="pilotLicenseTime != null" >
        #{pilotLicenseTime,jdbcType=DATE},
      </if>
      <if test="workLicenseTime != null" >
        #{workLicenseTime,jdbcType=DATE},
      </if>
      <if test="remark != null" >
        #{remark,jdbcType=VARCHAR},
      </if>
      <if test="status != null" >
        #{status,jdbcType=SMALLINT},
      </if>
      <if test="createTime != null" >
        #{createTime,jdbcType=TIMESTAMP},
      </if>
      <if test="createTime == null" >
        now(),
      </if>
      <if test="createBy != null" >
        #{createBy,jdbcType=VARCHAR},
      </if>
    </trim>
  </insert>
  <update id="updateByPrimaryKeySelective" parameterType="com.vdm.model.PilotInfo" >
    update pilot_info
    <set >
      <if test="pilotName != null" >
        pilot_name = #{pilotName,jdbcType=VARCHAR},
      </if>
      <if test="pilotCrad != null" >
        pilot_crad = #{pilotCrad,jdbcType=VARCHAR},
      </if>
      <if test="pilotTel != null" >
        pilot_tel = #{pilotTel,jdbcType=VARCHAR},
      </if>
      <if test="pilotAdr != null" >
        pilot_adr = #{pilotAdr,jdbcType=VARCHAR},
      </if>
      <if test="pilotLicenseTime != null" >
        pilot_license_time = #{pilotLicenseTime,jdbcType=DATE},
      </if>
      <if test="workLicenseTime != null" >
        work_license_time = #{workLicenseTime,jdbcType=DATE},
      </if>
      <if test="remark != null" >
        remark = #{remark,jdbcType=VARCHAR},
      </if>
      <if test="createTime != null" >
        create_time = #{createTime,jdbcType=TIMESTAMP},
      </if>
      <if test="createBy != null" >
        create_by = #{createBy,jdbcType=VARCHAR},
      </if>
    </set>
    where id = #{id,jdbcType=INTEGER}
  </update>
  <update id="updateByPrimaryKey" parameterType="com.vdm.model.PilotInfo" >
    update pilot_info
    set pilot_name = #{pilotName,jdbcType=VARCHAR},
      pilot_crad = #{pilotCrad,jdbcType=VARCHAR},
      pilot_tel = #{pilotTel,jdbcType=VARCHAR},
      pilot_adr = #{pilotAdr,jdbcType=VARCHAR},
      pilot_license_time = #{pilotLicenseTime,jdbcType=DATE},
      work_license_time = #{workLicenseTime,jdbcType=DATE},
      remark = #{remark,jdbcType=VARCHAR},
      create_time = #{createTime,jdbcType=TIMESTAMP},
      create_by = #{createBy,jdbcType=VARCHAR}
    where id = #{id,jdbcType=INTEGER}
  </update>

  <select id="pilotInfoInfoList" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List"/>
    from pilot_info
  </select>

  <select id="getPilotInfoCount" resultType="java.lang.Integer">
    select count(*) from pilot_info
  </select>

  <update id="updatePilotInfoStatus">
    update pilot_info
    set
    status = #{type,jdbcType=INTEGER}
    where 1=1
    <if test="ids !=null and ids.size()>0">
      and id IN
      <foreach collection="ids" open="(" close=")" separator=","
               index="index" item="item">
        #{item, jdbcType=INTEGER}
      </foreach>
    </if>
  </update>

</mapper>

  • 3、遇到的问题

    • 3.1 layui中laydate在一个页面上使用多个日期选择框时会出现闪烁，及无法正常显示
    • 3.2 提交表单数据中有日期类型的数据(精确到日)时会报400错误，

  • 4、解决问题

    • 4.1 在渲染laydate中增加 trigger属性 laydate.render({ elem : '#workLicenseTime', trigger : 'click' });
    • 4.2 提交的数据为字符串，无法自动适配到bean的Date日期对象中，需要进行转换设置，在对应的model对象的字段上加转化注解@DateTimeFormate(pattern="yyyy-MM-dd")
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mhwl-wll/p/13346323.html