1. 程式人生 > 其它 >汽車租賃系統

汽車租賃系統

汽車租賃系統

1.使用者模組

1.使用者列表

1.修改 user/list.jsp

<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="姓名" id="realname">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手機號</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="手機號" id="phone">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="地址" id="address">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn" type="button">搜尋</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </blockquote>

    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%--操作--%>
    <script type="text/html" id="headBtns">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
    </script>
    <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-refresh"></i>
            重置密碼
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="setRoles">
            <i class="layui-icon  layui-icon-refresh"></i>
            設定角色
        </button>
    </script>
</form>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"> </script>
<script >
    layui.use(['jquery','form','layer','table'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;

        //渲染資料表格
        //表格引數
        var tabOps ={
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt + "/sysuser/page.do",
            page:true,
            toolbar: "#headBtns",
            cols:[[
                {type:"checkbox"},
                {field:"realname",title:"姓名",align:"center",width: 85},
                {field:"loginName",title:"登入名",align:"center",width: 85},
                {field:"phone",title:"電話",align:"center"},
                {field:"idCard",title:"身份證",align:"center",minWidth:"170"},
                {field:"sex",title:"性別",align:"center",width:65,templet:function (d) {
                    var  sex = d.sex;
                    if (sex == 1){
                        return "<p style='color: #1385e8'>男</p>";
                    }else  if (sex == 2){
                        return "<p style='color: #e8139a'>女</p>";
                    }
                    }},
                {field:"address",title:"地址",align:"center",width: 100},
                {title:"頭像",width: 65,templet:function (d) {
                    var img = d.img;
                    return "<button class='layui-btn layui-btn-xs' onclick=showUserImg(\'"+img+"\') >檢視</button>"
                    }},
                {field:"createTime",title:"建立時間",align:"center"},
                {field: "操作",toolbar:"#rowBtns", minWidth: 230, fixed: "right"}
            ]],
            parseData:function (rs) {
                return{
                    code: rs.code,
                    msg:rs.msg,
                    count:rs.data.total,
                    data:rs.data.list
                }
            },
            response:{
                statusCode:200
            }
        };
        //進行渲染
        var tabIns = table.render(tabOps);
        //按鈕查詢
        $("#searchBtn").click(function () {
            var realname = $("#realname").val();
            var phone = $("#phone").val();
            var address = $("#address").val();
            tabIns.reload({
                where:{
                    realname:realname,
                    phone:phone,
                    address:address
                }
            })
        })         
    });
</script>            

2.修改SysUserController

/**
 * 使用者的分頁查詢
 *
 * @return
 */
@RequestMapping("page.do")
public Object page(SysUserQuery query) {

    return this.sysUserService.queryPage(query);
}

3.修改SysUserService

/**
 * 使用者的分頁查詢
 *
 * @param query
 * @return
 */
Result queryPage(SysUserQuery query);

4.修改SysUserServiceImpl

/**
 * 使用者的分頁查詢
 *
 * @param query
 * @return
 */
@Override
public Result queryPage(SysUserQuery query) {
    // 開啟分頁查詢
    Page<SysUser> sysUserPage = PageHelper.startPage(query.getPage(), query.getLimit());
    // 根據引數查詢使用者列表
    sysUserMapper.selectList(query);
    return new Result(sysUserPage.toPageInfo());
}

5.修改SysUserMapper

/**
 * 根據引數查詢使用者列表
 *
 * @param query
 * @return
 */
List<SysUser> selectList(SysUserQuery query);

6.修改SysUserMapper.xml

<select id="selectList" resultMap="BaseResultMap">
    select
        <include refid="Base_Column_List"/>
    from sys_user
    <where>
        <if test="realname != null and realname != ''">
            and realname like concat('%',#{realname},'%')
        </if>
        <if test="phone != null and phone != ''">
            and phone =#{phone}
        </if>
        <if test="address != null and address != ''">
            and address like concat('%',#{address},'%')
        </if>
    </where>
</select>

2.新增使用者

1.修改 user/list.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用者管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="姓名" id="realname">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手機號</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="手機號" id="phone">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="地址" id="address">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn" type="button">搜尋</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </blockquote>

    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%--操作--%>
    <script type="text/html" id="headBtns">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
    </script>
    <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-refresh"></i>
            重置密碼
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="setRoles">
            <i class="layui-icon  layui-icon-refresh"></i>
            設定角色
        </button>
    </script>

</form>

<%--新增使用者模板--%>
<script type="text/html" id = "addUserTpl">
    <form class="layui-form layui-form-pane" style="margin: 10px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname" lay-verify="required" lay-reqText="請輸入姓名" placeholder="使用者姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登入名</label>
                <div class="layui-input-inline">
                    <input type="text" name="loginName" lay-verify="required" lay-reqText="請輸入登入名" placeholder="登入名" 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" name="phone" lay-verify="required|phone" lay-reqText="請輸入手機號" placeholder="手機號" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份證</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" lay-verify="required|idCard" lay-reqText="請輸入手機號" placeholder="手機號" 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="radio" name="sex"   value="1" title="男" checked>
                    <input  type="radio" name="sex" value="2" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label  class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <textarea  class="layui-textarea" name="address" placeholder="地址" lay-reqText="請輸入地址" lay-verify="required" ></textarea>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>

    </form>

</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"> </script>
<script >
    layui.use(['jquery','form','layer','table'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;

        //渲染資料表格
        //表格引數
        var tabOps ={
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt + "/sysuser/page.do",
            page:true,
            toolbar: "#headBtns",
            cols:[[
                {type:"checkbox"},
                {field:"realname",title:"姓名",align:"center",width: 85},
                {field:"loginName",title:"登入名",align:"center",width: 85},
                {field:"phone",title:"電話",align:"center"},
                {field:"idCard",title:"身份證",align:"center",minWidth:"170"},
                {field:"sex",title:"性別",align:"center",width:65,templet:function (d) {
                    var  sex = d.sex;
                    if (sex == 1){
                        return "<p style='color: #1385e8'>男</p>";
                    }else  if (sex == 2){
                        return "<p style='color: #e8139a'>女</p>";
                    }
                    }},
                {field:"address",title:"地址",align:"center",width: 100},
                {title:"頭像",width: 65,templet:function (d) {
                    var img = d.img;
                    return "<button class='layui-btn layui-btn-xs'>檢視</button>"
                    }},
                {field:"createTime",title:"建立時間",align:"center"},
                {field: "操作",toolbar:"#rowBtns", minWidth: 230, fixed: "right"}
            ]],
            parseData:function (rs) {
                return{
                    code: rs.code,
                    msg:rs.msg,
                    count:rs.data.total,
                    data:rs.data.list
                }
            },
            response:{
                statusCode:200
            }


        };
        //進行渲染
        var tabIns = table.render(tabOps);

        //按鈕查詢
        $("#searchBtn").click(function () {
            var realname = $("#realname").val();
            var phone = $("#phone").val();
            var address = $("#address").val();
            tabIns.reload({
                where:{
                    realname:realname,
                    phone:phone,
                    address:address
                }
            })
        })

        //表格頭工具欄監聽事件
        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == "add"){
                add();
            }

        })
        //新增使用者的方法
        function add() {
            //彈出層的引數
            var layOps = {
                title:"新增使用者",
                type:1,
                skin: "layui-layer-molv",
                content:$("#addUserTpl").html(),
                area:['680px','450px'],
                success:function (layero,index) {
                    form.render("radio");
                    //表單的提交監聽
                    form.on("submit(subBtnFilter)",function (d) {
                        var formData = d.field;
                        //使用ajax提交資料
                        $.post(cxt+"/sysuser/add.do",formData,function (rs) {
                            layer.msg(rs.msg); //展示業務訊息
                            if (rs.code != 200){
                                return false;
                            }
                            layer.close(index);  //關閉彈層
                            //重新整理表格
                            $("#searchBtn").click();

                        })
                        return false;//阻止預設提交行為
                    })
                },
                btn:['確認','取消'],
                btnAlign: "c",
                yes:function (index,layero) {
                    //點選隱藏的提交按鈕  觸發  表單提交監聽
                    $("#subBtn").click();
                }
            };
            layer.open(layOps);
        }

    });

</script>
</body>
</html>

2.修改SysUserController

/**
 * 使用者的分頁查詢
 *
 * @return
 */
@RequestMapping("page.do")
public Object page(SysUserQuery query) {

    return this.sysUserService.queryPage(query);
}

/**
 * 新增使用者
 *
 * @param sysUser
 * @return
 */
@RequestMapping("add.do")
public Object add(SysUser sysUser) {
    // 進行資料格式校驗
    ValidatorUtil.validator(sysUser);
    return sysUserService.add(sysUser);
}

3.修改SysUser

package com.toddding.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.hibernate.validator.constraints.Length;
import org.hibernate.validator.constraints.Range;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import java.util.Date;

/**
 * @Description: 使用者實體類
 * @author: Todd Ding
 * @date 2020-11-30 14:50
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class SysUser {
    /**
     * 使用者ID
     */
    private Integer id;

    /**
     * 登入名
     */
    @NotEmpty(message = "loginName:登入名不能為空")
    @Length(min = 6,max = 15,message = "loginName:登入名6~15位字元")
    private String loginName;

    /**
     * 登入密碼
     */
    private String loginPassword;

    /**
     * 手機號
     */
    @NotEmpty(message = "phone:手機號不能為空")
    @Length(min = 11,max = 11,message = "phone:手機號11位字元")
    private String phone;

    /**
     * 真實姓名
     */
    @NotEmpty(message = "realname:姓名不能為空")
    @Length(max = 20,message = "realname:姓名最多20位字元")
    private String realname;

    /**
     * 身份證號
     */
    @NotEmpty(message = "idCard:身份證號不能為空")
    @Length(min=18,max = 18,message = "idCard:身份證號18位字元")
    private String idCard;

    /**
     * 性別  1 男  2 女
     */
    @NotNull(message = "sex:性別不能為空")
    @Range(min = 1,max = 2,message = "sex:性別只能是男(1)或者女(2)")
    private Integer sex;

    /**
     * 地址
     */
    @NotEmpty(message = "address:地址不能為空")
    @Length(max = 100,message = "address:地址最多100個字元")
    private String address;

    /**
     * 影象
     */
    private String img;

    /**
     * 建立時間
     */
    @JsonFormat(pattern="yyyy-MM-dd")
    private Date createTime;


}

4.修改SysUserService

/**
 * 使用者的分頁查詢
 *
 * @param query
 * @return
 */
Result queryPage(SysUserQuery query);

/**
 * 新增使用者
 *
 * @param sysUser
 * @return
 */
Result add(SysUser sysUser);

5.修改SysUserServiceImpl

/**
 * 使用者的分頁查詢
 *
 * @param query
 * @return
 */
@Override
public Result queryPage(SysUserQuery query) {
    // 開啟分頁查詢
    Page<SysUser> sysUserPage = PageHelper.startPage(query.getPage(), query.getLimit());
    // 根據引數查詢使用者列表
    sysUserMapper.selectList(query);
    return new Result(sysUserPage.toPageInfo());
}

/**
 * 新增使用者
 *
 * @param sysUser
 * @return
 */
@Override
public Result add(SysUser sysUser) {
    // 進行業務資料校驗
    SysUserQuery query = new SysUserQuery();
    // 校驗使用者名稱是否重複
    query.setLoginName(sysUser.getLoginName());
    // 根據登入名查詢使用者
    SysUser user = sysUserMapper.selectUserByKeywords(query);
    if (user != null) {
        return new Result(CodeMsg.USER_LOGIN_NAME_EXIST_ERROR);
    }

    // 校驗手機號是否重複
    query = new SysUserQuery();
    query.setPhone(sysUser.getPhone());
    // 根據手機號查詢使用者
    user = sysUserMapper.selectUserByKeywords(query);
    if (user != null) {
        return new Result(CodeMsg.USER_PHONE_EXIST_ERROR);
    }

    // 校驗身份證號是否重複
    query = new SysUserQuery();
    query.setIdCard(sysUser.getIdCard());
    // 根據身份證號查詢使用者
    user = sysUserMapper.selectUserByKeywords(query);
    if (user != null) {
        return new Result(CodeMsg.USER_ID_CARD_EXIST_ERROR);
    }

    // 新增使用者
    // 獲取加密後的預設密碼
    Md5Hash md5Hash = new Md5Hash(Constant.DEFAULT_PASSWORD, Constant.MD5_SALT, 2);
    sysUser.setLoginPassword(md5Hash.toString());
    sysUserMapper.insert(sysUser);
    return new Result();
}

6.修改CodeMsg

public enum CodeMsg {
USER_USER_PASSWORD_ERROR(4001001, "使用者名稱或者密碼錯誤!"),
USER_LOGIN_NAME_EXIST_ERROR(4001002, "使用者登入名已被使用!"),
USER_PHONE_EXIST_ERROR(4001003, "使用者手機號已被使用!"),
USER_ID_CARD_EXIST_ERROR(4001004, "使用者身份證號已被使用!"),
USER_NOT_HAVE_PERMISSION_ERROR(4001005, "使用者許可權不足!"),
USER_UPDATE_PASSWORD_ERROR(4001006, "修改失敗,原密碼不正確"),

CUSTOMER_ID_CARD_EXIST_ERROR(4002001, "客戶身份證號已被使用!"),
CUSTOMER_PHONE_EXIST_ERROR(4002002, "客戶手機號已被使用!"),
}

7.修改Constant

public interface Constant {
/**
 * MD5加密的鹽
 */
String MD5_SALT = "day day up";
/**
 * 預設的登入密碼
 */
String DEFAULT_PASSWORD = "123456";
}

8.修改SysUserMapper

public interface SysUserMapper {
/**
 * 校驗使用者關鍵字是否重複
 *
 * @param query 包含 登入名/手機號/身份證號
 * @return
 */
SysUser selectUserByKeywords(SysUserQuery query);

/**
 * 新增使用者
 *
 * @param sysUser
 */
void insert(SysUser sysUser);
}

9.修改SysUserMapper.xml

<select id="selectUserByKeywords" resultMap="BaseResultMap">
    select
        <include refid="Base_Column_List"/>
    from sys_user
    <where>
        <if test="loginName != null and loginName != ''">
            and login_name =#{loginName}
        </if>
        <if test="phone != null and phone != ''">
            and phone =#{phone}
        </if>
        <if test="idCard != null and idCard != ''">
            and id_card =#{idCard}
        </if>
    </where>
</select>
<insert id="insert">
    insert into
        sys_user (login_name, login_password, phone, realname, id_card, sex, address)
    value
        (#{loginName}, #{loginPassword}, #{phone}, #{realname}, #{idCard}, #{sex}, #{address})
</insert>

3.重置密碼

1.修改user/list.jsp

 <table id="dataTable" lay-filter="dataTableFilter"></table>

<script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-refresh"></i>
            重置密碼
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="setRoles">
            <i class="layui-icon  layui-icon-refresh"></i>
            設定角色
        </button>
    </script>
                
//表格行工具欄事件
table.on("tool(dataTableFilter)",function (d) {
    var event = d.event;
    var rowData = d.data;
    if (event == "resetPwd"){
        resetPwd(rowData);
    }
})
//重置密碼方法
function resetPwd(rowData) {
    layer.confirm("確定要重置密碼嗎?",function (index) {
        $.get(cxt+"/sysuser/reset.do",{id:rowData.id},function (rs) {
            //展示業務訊息
            layer.msg(rs.msg);
            layer.close(index);  //關閉彈出層
            $("#searchBtn").click(); //過載表格

        })

    })

}

2.修改SysUserController

/**
 * 重置使用者密碼
 *
 * @param id
 * @return
 */
@RequestMapping("reset.do")
public Object reset(Integer id) {

    return sysUserService.resetPassword(id);
}

3.修改SysUserService

/**
 * 重置使用者密碼
 *
 * @param id
 * @return
 */
Result resetPassword(Integer id);

4.修改SysUserServiceImpl

/**
 * 重置使用者密碼
 *
 * @param id
 * @return
 */
@Override
public Result resetPassword(Integer id) {
    Md5Hash md5Hash = new Md5Hash(Constant.DEFAULT_PASSWORD, Constant.MD5_SALT, 2);
    sysUserMapper.updatePassword(id, md5Hash.toString());
    return new Result();
}

5.修改SysUserMapper

/**
 * 修改使用者密碼
 *
 * @param id
 * @param password
 */
void updatePassword(@Param("id") Integer id, @Param("password") String password);

6.修改SysUserMapper.xml

<update id="updatePassword">
    update sys_user set login_password = #{password} where id = #{id}
</update>

4.顯示使用者頭像

檢視使用者頭像,就是將使用者頭像url地址進行顯示

1.修改user/list.jsp

{title:"頭像",width: 65,templet:function (d) {
                    var img = d.img;
                    return "<button class='layui-btn layui-btn-xs' onclick=showUserImg(\'"+img+"\') >檢視</button>"
                    }}


//顯示頭像的方法
// url : 影象的網路路徑
window.showUserImg = function (url) {
    var  imgData = {
        "title": "使用者頭像", //相簿標題
        "start": 0, //初始顯示的圖片序號,預設0
        "data": [   //相簿包含的圖片,陣列格式
            {
                "alt": "使用者頭像",
                "src": cxt + "/" + url, //原圖地址
                "thumb":  cxt + "/" + url //縮圖地址
            }
        ]
    }
    layer.photos({
        photos: imgData
    });
}

2.車輛模組

1.車輛列表

1.新建car/list.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>汽車管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">車牌號</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="車牌號" id="num">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">顏色</label>
                    <div class="layui-input-inline" style="width: 150px">
                        <input type="text" class="layui-input" placeholder="顏色" id="color">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">車型</label>
                    <div class="layui-input-inline" style="width: 110px">
                        <select id="type">
                            <option value="">型別</option>
                            <option value="1">轎車</option>
                            <option value="2">SUV</option>
                            <option value="3">跑車</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">出租狀態</label>
                    <div class="layui-input-inline" style="width: 110px">
                        <select id="isRent">
                            <option value="">狀態</option>
                            <option value="1">未出租</option>
                            <option value="2">已出租</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">價格</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input  type="text"  class="layui-input" placeholder="¥" id="minPrice" >
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input  type="text"  class="layui-input" placeholder="¥" id="maxPrice" >
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">租金</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input  type="text"  class="layui-input" placeholder="¥" id="minRentPrice" >
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input  type="text"  class="layui-input" placeholder="¥" id="maxRentPrice" >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="描述" id="descp">
                    </div>
                </div>


                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn" type="button">搜尋</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </blockquote>

    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%--操作--%>
    <script type="text/html" id="headBtns">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            匯出
        </button>
    </script>
    <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-release"></i>
            出租
        </button>
       <%-- <button class="layui-btn layui-btn-sm" lay-event="setRoles">
            <i class="layui-icon  layui-icon-refresh"></i>
            刪除
        </button>--%>
    </script>

</form>

<%--新增使用者模板--%>
<script type="text/html" id = "addUserTpl">
    <form class="layui-form layui-form-pane" style="margin: 10px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname" lay-verify="required" lay-reqText="請輸入姓名" placeholder="使用者姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登入名</label>
                <div class="layui-input-inline">
                    <input type="text" name="loginName" lay-verify="required" lay-reqText="請輸入登入名" placeholder="登入名" 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" name="phone" lay-verify="required|phone" lay-reqText="請輸入手機號" placeholder="手機號" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份證</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" lay-verify="required|idCard" lay-reqText="請輸入手機號" placeholder="手機號" 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="radio" name="sex"   value="1" title="男" checked>
                    <input  type="radio" name="sex" value="2" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label  class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <textarea  class="layui-textarea" name="address" placeholder="地址" lay-reqText="請輸入地址" lay-verify="required" ></textarea>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>

    </form>

</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"> </script>
<script >
    layui.use(['jquery','form','layer','table','upload'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;
        var upload = layui.upload;

        //渲染資料表格
        //表格引數
        var tabOps ={
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt + "/car/page.do",
            page:true,
            toolbar: "#headBtns",
            cols:[[
                {type:"checkbox"},
                {field:"num",title:"車牌號",align:"center",width: 115},
                {field:"type",title:"車型",align:"center",width: 95,templet:function (d) {
                    var type = d.type;
                    if (type == 1){
                            return "<p style='color: #1AA094'>轎車</p>";
                    }else if (type == 2){
                        return "<p style='color: #e47214'>SUV</p>";
                    }else  if(type == 3){
                        return "<p style='color: red'>跑車</p>";
                    }

                    }},
                {field:"color",title:"顏色",align:"center"},
                {field:"price",title:"價格",align:"center",width: 100},
                {field:"rentPrice",title:"出租價格",align:"center",width:100},
                {field:"deposit",title:"押金",align:"center",width: 100},
                {field:"isRent",title:"出租狀態",align:"center",width: 100,templet:function (d) {
                    var isRent = d.isRent;
                    if (isRent == 1) {
                        return "<p style='color: #40AFFE'>未出租</p>";
                    }else if (isRent == 2){
                        return "<p style='color: #ff9831'>未出租</p>";
                    }

                    }},
                {field:"descp",title:"描述",align:"center",width: 110},
                {field:"img",title:"車輛圖片",align:"center",width: 90,templet:function (d) {
                    var img = d.img;
                    return "<button class='layui-btn layui-btn-xs' onclick=showUserImg(\'"+img+"\') >檢視</button>"

                    }},
                {field:"version",title:"版本",align:"center",width: 80},
                {field:"createTime",title:"建立時間",align:"center",width: 160},
                {field: "操作",toolbar:"#rowBtns", minWidth: 60, fixed: "right"}
            ]],
            parseData:function (rs) {
                return{
                    code: rs.code,
                    msg:rs.msg,
                    count:rs.data.total,
                    data:rs.data.list
                }
            },
            response:{
                statusCode:200
            }


        };
        //進行渲染
        var tabIns = table.render(tabOps);

        //按鈕查詢
        $("#searchBtn").click(function () {
            var num = $("#num").val();
            var type = $("#type").val();
            var color = $("#color").val();
            var minPrice = $("#minPrice").val();
            var maxPrice = $("#maxPrice").val();
            var minRentPrice = $("#minRentPrice").val();
            var maxRentPrice = $("#maxRentPrice").val();
            var isRent = $("#isRent").val();
            var descp = $("#descp").val();
            tabIns.reload({
                where:{
                    num:num,
                    type:type,
                    color:color,
                    minPrice:minPrice,
                    maxPrice:maxPrice,
                    minRentPrice:minRentPrice,
                    maxRentPrice:maxRentPrice,
                    isRent:isRent,
                    descp:descp,
                }
            })
        })

        //表格頭工具欄監聽事件
        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == "add"){
                add();
            }

        })
        //新增使用者的方法
        function add() {
            //彈出層的引數
            var layOps = {
                title:"新增使用者",
                type:1,
                skin: "layui-layer-molv",
                content:$("#addUserTpl").html(),
                area:['680px','450px'],
                success:function (layero,index) {
                    form.render("radio");
                    //表單的提交監聽
                    form.on("submit(subBtnFilter)",function (d) {
                        var formData = d.field;
                        //使用ajax提交資料
                        $.post(cxt+"/sysuser/add.do",formData,function (rs) {
                            layer.msg(rs.msg); //展示業務訊息
                            if (rs.code != 200){
                                return false;
                            }
                            layer.close(index);  //關閉彈層
                            //重新整理表格
                            $("#searchBtn").click();

                        })
                        return false;//阻止預設提交行為
                    })
                },
                btn:['確認','取消'],
                btnAlign: "c",
                yes:function (index,layero) {
                    //點選隱藏的提交按鈕  觸發  表單提交監聽
                    $("#subBtn").click();
                }
            };
            layer.open(layOps);
        }

        //表格行工具欄事件
        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            var rowData = d.data;
            if (event == "resetPwd"){
                resetPwd(rowData);
            }
        })
        //重置密碼方法
        function resetPwd(rowData) {
            layer.confirm("確定要重置密碼嗎?",function (index) {
                $.get(cxt+"/sysuser/reset.do",{id:rowData.id},function (rs) {
                    //展示業務訊息
                    layer.msg(rs.msg);
                    layer.close(index);  //關閉彈出層
                    $("#searchBtn").click(); //過載表格

                })

            })

        }

        //顯示頭像的方法
        // url : 影象的網路路徑
        window.showUserImg = function (url) {
            var  imgData = {
                "title": "使用者頭像", //相簿標題
                "start": 0, //初始顯示的圖片序號,預設0
                "data": [   //相簿包含的圖片,陣列格式
                    {
                        "alt": "使用者頭像",
                        "src": cxt + "/" + url, //原圖地址
                        "thumb":  cxt + "/" + url //縮圖地址
                    }
                ]
            }
            layer.photos({
                photos: imgData
            });
        }
    });
</script>
</body>
</html>

2.修改PageController

/**
 * 跳轉車輛列表
 *
 * @return
 */
@RequestMapping("car/list.do")
public String carList() {
    return "car/list.jsp";
}

3.新建BusCar

package com.toddding.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.hibernate.validator.constraints.Length;
import org.hibernate.validator.constraints.Range;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import java.util.Date;

/**
 * @Description: 車輛實體類
 * @Author: Todd Ding
 * @Date 2020-12-02 19:21
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class BusCar {
    /**
     * 汽車ID
     */
    private Integer id;


    /**
     * 車牌號
     */
    @NotEmpty(message = "車牌號不能為空")
    @Length(min = 7, max = 8, message = "車牌號7-8位")
    private String num;

    /**
     * 型別  1 轎車  2 SUV  3 跑車
     */
    @NotNull(message = "車型不能為空")
    @Range(min = 1, max = 3, message = "車輛型別只能1-3")
    private Integer type;

    /**
     * 顏色
     */
    @NotEmpty(message = "汽車顏色不能為空")
    @Length(max = 10, message = "汽車顏色最多10位字元")
    private String color;

    /**
     * 價格
     */
    @NotNull(message = "汽車金額不能為空")
    @Range(min = 1, max = 999999999, message = "汽車金額1-999999999")
    private Integer price;

    /**
     * 出租金額
     */
    @NotNull(message = "汽車租金不能為空")
    @Range(min = 1, max = 999999999, message = "汽車租金1-999999999")
    private Integer rentPrice;

    /**
     * 押金
     */
    @NotNull(message = "汽車押金不能為空")
    @Range(min = 1, max = 999999999, message = "汽車押金1-999999999")
    private Integer deposit;

    /**
     * 出租狀態 1 未出租  2 已出租
     */
    private Integer isRent;

    /**
     * 描述
     */
    @Length(max = 100, message = "汽車描述最多100個字元")
    private String descp;

    /**
     * 汽車圖片
     */
    @NotEmpty(message = "汽車圖片不能為空")
    @Length(max = 100, message = "汽車圖片地址最多100位字元")
    private String img;

    /**
     * 版本號
     */
    private Integer version;

    /**
     * 建立時間
     */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8")
    private Date createTime;
}

4.新建BusCarQuery

package com.toddding.query;

import lombok.Data;

/**
 * @Description: 車輛列表的查詢引數封裝類
 * @Author: Todd Ding
 * @Date 2020-12-02 19:54
 */
@Data
public class BusCarQuery extends Query {
    /**
     * 車牌號
     */
    private String num;
    /**
     * 車型
     */
    private Integer type;
    /**
     * 顏色
     */
    private String color;
    /**
     * 最低價格
     */
    private Integer minPrice;
    /**
     * 最高價格
     */
    private Integer maxPrice;
    /**
     * 最低租金
     */
    private Integer minRentPrice;
    /**
     * 最高租金
     */
    private Integer maxRentPrice;
    /**
     * 出租狀態
     */
    private Integer isRent;
    /**
     * 描述
     */
    private String descp;

}

5.新建BusCarController

package com.toddding.controller;

import com.toddding.query.BusCarQuery;
import com.toddding.service.BusCarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("car")
@RestController
public class BusCarController {

    @Autowired
    BusCarService busCarService;

    //分頁查詢資料
    @RequestMapping("page.do")
    public  Object page(BusCarQuery query){
       return busCarService.queryPage(query);
    }
}

6.新建BusCarService

package com.toddding.service;

import com.toddding.common.Result;
import com.toddding.query.BusCarQuery;

public interface BusCarService {

    Result queryPage(BusCarQuery query);
}

7.新建BusCarServiceImpl

@Service
public class BusCarServiceImpl implements BusCarService {
    @Autowired
    private BusCarMapper busCarMapper;

    @Override
    public Result queryPage(BusCarQuery query) {
        Page<BusCar> busCarVoPage = PageHelper.startPage(query.getPage(), query.getLimit());
        busCarMapper.selectList(query);
        return new Result(busCarVoPage.toPageInfo());
    }

8.新建BusCarMapper

public interface BusCarMapper {
    /**
     * 根據條件查詢車輛列表
     *
     * @param query
     * @return
     */
    List<BusCar> selectList(BusCarQuery query);
}    

9.新建BusCarMapper.xml

<select id="selectList" resultMap="BaseResultMap">
    <!-- @mbg.generated -->
    select
        <include refid="Base_Column_List" />
    from bus_car
    <where>
            <if test="num != null and num != ''">
            and num like concat('%',#{num},'%')
            </if>
            <if test="type != null and type != ''">
                and type = #{type}
            </if>
            <if test="color != null and color != ''">
                and color like concat('%',#{color},'%')
            </if>
            <if test="minPrice != null and minPrice != ''">
                and price >=  #{minPrice}
            </if>
            <if test="maxPrice != null and maxPrice != ''">
                and #{maxPrice}  >=  price
            </if>
            <if test="minRentPrice != null and minRentPrice != ''">
                and rent_price >=  #{minRentPrice}
            </if>
            <if test="maxRentPrice != null and maxRentPrice != ''">
                 and  #{maxRentPrice} >= rent_price
            </if>
            <if test="descp != null and descp != ''">
                 and descp like concat('%',#{descp},'%')
            </if>
            <if test="isRent != null and isRent != ''">
                 and is_rent = #{isRent}
            </if>
    </where>
</select>

2.新增車輛

1.修改car/list.jsp

<form class="layui-form">
    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%--操作--%>
    <script type="text/html" id="headBtns">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>

    </script>
    <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-release"></i>
            出租
        </button>
       <%-- <button class="layui-btn layui-btn-sm" lay-event="setRoles">
            <i class="layui-icon  layui-icon-refresh"></i>
            刪除
        </button>--%>
    </script>
</form>
                
<%-- 新增車輛 --%>
<script type="text/html" id="addTpl">
    <form class="layui-form layui-form-pane" style="padding: 10px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">車牌號</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="num" lay-verify="required" lay-reqText="請輸入車牌號" placeholder="車牌號">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">車型</label>
                    <div class="layui-input-inline">
                        <select name="type" lay-verify="required" lay-reqText="請選擇車型">
                            <option value="">車型</option>
                            <option value="1">轎車</option>
                            <option value="2">SUV</option>
                            <option value="3">跑車</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">顏色</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="color" lay-verify="required" lay-reqText="請輸入顏色" placeholder="顏色">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">圖片</label>
                <div class="layui-input-inline">
                    <img id="uploadImg" src="${pageContext.request.contextPath}/resources/images/upload.jpg" style="height: 160px;width:160px;" title="選擇圖片"/>
                    <%-- 隱藏的input 用於接收上傳的檔案的URL地址 --%>
                    <input id="img" name="img" type="hidden" lay-verify="required" lay-reqText="請上傳車輛圖片"/>
                </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" class="layui-input" name="price" lay-verify="required|number" lay-reqText="請輸入價格" placeholder="價格">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">租金</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="rentPrice" lay-verify="required|number" lay-reqText="請輸入租金" placeholder="租金">
                </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" class="layui-input" name="deposit" lay-verify="required|number" lay-reqText="請輸入押金" placeholder="押金">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="descp" class="layui-textarea"></textarea>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>
    </form>
</script>


<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"> </script>
<script >
    layui.use(['jquery','form','layer','table','upload'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;
        var upload = layui.upload;

        //渲染資料表格
        //表格引數
        var tabOps ={
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt + "/car/page.do",
            page:true,
            toolbar: "#headBtns",
            cols:[[
                {type:"checkbox"},
                {field:"num",title:"車牌號",align:"center",width: 115},
                {field:"type",title:"車型",align:"center",width: 95,templet:function (d) {
                    var type = d.type;
                    if (type == 1){
                            return "<p style='color: #1AA094'>轎車</p>";
                    }else if (type == 2){
                        return "<p style='color: #e47214'>SUV</p>";
                    }else  if(type == 3){
                        return "<p style='color: red'>跑車</p>";
                    }

                    }},
                {field:"color",title:"顏色",align:"center"},
                {field:"price",title:"價格",align:"center",width: 100},
                {field:"rentPrice",title:"出租價格",align:"center",width:100},
                {field:"deposit",title:"押金",align:"center",width: 100},
                {field:"isRent",title:"出租狀態",align:"center",width: 100,templet:function (d) {
                    var isRent = d.isRent;
                    if (isRent == 1) {
                        return "<p style='color: #40AFFE'>未出租</p>";
                    }else if (isRent == 2){
                        return "<p style='color: #ff9831'>未出租</p>";
                    }

                    }},
                {field:"descp",title:"描述",align:"center",width: 110},
                {title:"車輛圖片",align:"center",width: 90,templet:function (d) {
                    var img = d.img;
                    return "<button class='layui-btn layui-btn-xs' onclick=showUserImg(\'"+img+"\') >檢視</button>"

                    }},
                {field:"version",title:"版本",align:"center",width: 80},
                {field:"createTime",title:"建立時間",align:"center",width: 160},
                {field: "操作",toolbar:"#rowBtns", minWidth: 60, fixed: "right"}
            ]],
            parseData:function (rs) {
                return{
                    code: rs.code,
                    msg:rs.msg,
                    count:rs.data.total,
                    data:rs.data.list
                }
            },
            response:{
                statusCode:200
            }


        };
        //進行渲染
        var tabIns = table.render(tabOps);

        //按鈕查詢
        $("#searchBtn").click(function () {
            var num = $("#num").val();
            var type = $("#type").val();
            var color = $("#color").val();
            var minPrice = $("#minPrice").val();
            var maxPrice = $("#maxPrice").val();
            var minRentPrice = $("#minRentPrice").val();
            var maxRentPrice = $("#maxRentPrice").val();
            var isRent = $("#isRent").val();
            var descp = $("#descp").val();
            tabIns.reload({
                where:{
                    num:num,
                    type:type,
                    color:color,
                    minPrice:minPrice,
                    maxPrice:maxPrice,
                    minRentPrice:minRentPrice,
                    maxRentPrice:maxRentPrice,
                    isRent:isRent,
                    descp:descp,
                }
            })
        })

        //表格頭工具欄監聽事件
        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == "add"){
                add();
            }

        })
        //新增使用者的方法
        function add() {
            //彈出層的引數
            var layOps = {
                title:"新增車輛",
                type:1,
                skin: "layui-layer-molv",
                content:$("#addTpl").html(),
                area:['710px','580px'],
                success:function (layero,index) {
                    form.render();

                    /* 初始化上傳元件 */
                    //初始化檔案上傳
                    let uploadOpt = {
                        elem: "#uploadImg",
                        url: cxt + "/file/uploadImage.do",//處理檔案上傳的介面
                        auto: true,//自動上傳
                        field: "image",//指定檔案上傳的資料域名稱
                        choose: function (obj) {
                            //檔案預覽
                            obj.preview(function (index, file, result) {
                                //修改圖片src屬性值 實現預覽
                                $("#uploadImg").attr("src", result);
                            })
                        },
                        done: function (rs, fileIndex, upload) {
                            //將業務訊息展示
                            layer.msg(rs.msg);
                            if (rs.code == 200) {
                                //給隱藏框賦值
                                $("#img").val(rs.data);
                            }
                        }
                    };
                    upload.render(uploadOpt);

                    //表單的提交監聽
                    form.on("submit(subBtnFilter)",function (d) {
                        var formData = d.field;
                        //使用ajax提交資料
                        $.post(cxt+"/car/add.do",formData,function (rs) {
                            layer.msg(rs.msg); //展示業務訊息
                            if (rs.code != 200){
                                return false;
                            }
                            layer.close(index);  //關閉彈層
                            //重新整理表格
                            $("#searchBtn").click();

                        })
                        return false;//阻止預設提交行為
                    })
                },
                btn:['確認','取消'],
                btnAlign: "c",
                yes:function (index,layero) {
                    //點選隱藏的提交按鈕  觸發  表單提交監聽
                    $("#subBtn").click();
                }
            };
            layer.open(layOps);
        }
        
        //顯示頭像的方法
        // url : 影象的網路路徑
        window.showUserImg = function (url) {
            var  imgData = {
                "title": "使用者頭像", //相簿標題
                "start": 0, //初始顯示的圖片序號,預設0
                "data": [   //相簿包含的圖片,陣列格式
                    {
                        "alt": "使用者頭像",
                        "src": cxt + "/" + url, //原圖地址
                        "thumb":  cxt + "/" + url //縮圖地址
                    }
                ]
            }
            layer.photos({
                photos: imgData
            });
        }
    });

</script>
</body>
</html>

2.新建FileUploadController

package com.toddding.controller;

import cn.hutool.core.date.DateUtil;
import cn.hutool.core.io.FileUtil;
import com.toddding.common.CodeMsg;
import com.toddding.common.Constant;
import com.toddding.common.Result;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Date;

@RestController
@RequestMapping("file")
public class FileUploadController {

    @RequestMapping("uploadImage.do")
    public Object uploadImage(@RequestParam("image") MultipartFile image, HttpServletRequest request){
        //原圖片名稱
        String originalFilename = image.getOriginalFilename();
        //獲取圖片的字尾
        String extName = FileUtil.extName(originalFilename);
        //產生圖片新的名稱
        String newFileName = DateUtil.format(new Date(), "yyyyMMddHHmmssSSS");
        newFileName = newFileName + "."+extName;
        //獲取upload資料夾的物理路徑
        String realPath = request.getServletContext().getRealPath(Constant.UPLOAD_FOLDER);
        //檔案儲存的物理路徑
        String fileRealPath = realPath + File.separator + newFileName;
        //檔案還需要URL路徑  upload/xxxxx.jpg
        String url = Constant.UPLOAD_FOLDER + "/" + newFileName;

        try {
            image.transferTo(new File(fileRealPath));
            //將圖片的網路路徑返回
            return  new Result(url);
        } catch (IOException e) {
            e.printStackTrace();

        }
        return  new Result(CodeMsg.CAR_UPLOAD_IMG_ERROR);

    }

}

3.修改springmvc.xml

<!-- 檔案上傳解析 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>

4.修改BusCarController

//新增車輛資料
@RequestMapping("add.do")
public Object add(BusCar busCar) {
    //進行資料格式的效驗
    ValidatorUtil.validator(busCar);
    return busCarService.add(busCar);

}

5.新建BusCar

package com.toddding.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.hibernate.validator.constraints.Length;
import org.hibernate.validator.constraints.Range;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import java.util.Date;

/**
 * @Description: 車輛實體類
 * @Author: Todd Ding
 * @Date 2020-12-02 19:21
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class BusCar {
    /**
     * 汽車ID
     */
    private Integer id;


    /**
     * 車牌號
     */
    @NotEmpty(message = "車牌號不能為空")
    @Length(min = 7, max = 8, message = "車牌號7-8位")
    private String num;

    /**
     * 型別  1 轎車  2 SUV  3 跑車
     */
    @NotNull(message = "車型不能為空")
    @Range(min = 1, max = 3, message = "車輛型別只能1-3")
    private Integer type;

    /**
     * 顏色
     */
    @NotEmpty(message = "汽車顏色不能為空")
    @Length(max = 10, message = "汽車顏色最多10位字元")
    private String color;

    /**
     * 價格
     */
    @NotNull(message = "汽車金額不能為空")
    @Range(min = 1, max = 999999999, message = "汽車金額1-999999999")
    private Integer price;

    /**
     * 出租金額
     */
    @NotNull(message = "汽車租金不能為空")
    @Range(min = 1, max = 999999999, message = "汽車租金1-999999999")
    private Integer rentPrice;

    /**
     * 押金
     */
    @NotNull(message = "汽車押金不能為空")
    @Range(min = 1, max = 999999999, message = "汽車押金1-999999999")
    private Integer deposit;

    /**
     * 出租狀態 1 未出租  2 已出租
     */
    private Integer isRent;

    /**
     * 描述
     */
    @Length(max = 100, message = "汽車描述最多100個字元")
    private String descp;

    /**
     * 汽車圖片
     */
    @NotEmpty(message = "汽車圖片不能為空")
    @Length(max = 100, message = "汽車圖片地址最多100位字元")
    private String img;

    /**
     * 版本號
     */
    private Integer version;

    /**
     * 建立時間
     */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8")
    private Date createTime;
}

5.修改BusCarService

Result add(BusCar busCar);

6.修改BusCarServiceImpl

@Override
public Result add(BusCar busCar) {
    //進行業務資料效驗
    //車牌號不能重複
    BusCar busCar1 = busCarMapper.selectOneByNum(busCar.getNum());
    if (busCar1 != null){
        return  new Result(CodeMsg.CAR_NUM_EXIST_ERROR);
    }

    busCarMapper.insert(busCar);

    return new Result();
}

7.修改CodeMsg

CAR_UPLOAD_IMG_ERROR(4003001, "汽車圖片上傳失敗!"),
CAR_NUM_EXIST_ERROR(4003002, "汽車車牌號已被使用!"),

8.修改Constant

/**
 * 儲存上傳檔案的資料夾
 */
String UPLOAD_FOLDER = "upload";

9.修改BusCarMapper

/**
 * 根據車牌號查詢車輛資訊
 *
 * @param num
 * @return
 */
BusCar selectOneByNum(@Param("num") String num);

/**
 * 新增車輛資訊
 *
 * @param busCar
 */
void insert(BusCar busCar);

10.修改BusCarMapper.xml

<select id="selectOneByNum" resultMap="BaseResultMap">
    select
        <include refid="Base_Column_List" />
    from
        bus_car
    where num = #{num}
</select>
<insert id="insert">
    insert  into bus_car
        (num, `type`, color, price, rent_price, deposit, descp, img)
    value
        (#{num}, #{type}, #{color}, #{price}, #{rentPrice}, #{deposit}, #{descp}, #{img})
</insert>

3.車輛出租

1.修改/car/list.jsp

 <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="rent">
            <i class="layui-icon layui-icon-release"></i>
            出租
        </button>
</script>

<%-- 計程車輛 --%>
<script type="text/html" id="rentTpl" >
    <form class="layui-form layui-form-pane" style="padding: 10px" lay-filter="rentFormFilter" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">車牌號</label>
                    <div class="layui-input-inline">
                         <%--設定為 readonly 就不能改裡面的資訊了  --%>
                        <input type="text" readonly class="layui-input" name="num" lay-verify="required" lay-reqText="請輸入車牌號" placeholder="車牌號">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">車型</label>
                    <div class="layui-input-inline">
                        <select name="type" readonly disabled lay-verify="required" lay-reqText="請選擇車型">
                            <option value="">車型</option>
                            <option value="1">轎車</option>
                            <option value="2">SUV</option>
                            <option value="3">跑車</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">顏色</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly class="layui-input" name="color" lay-verify="required" lay-reqText="請輸入顏色" placeholder="顏色">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">圖片</label>
                <div class="layui-input-inline">
                    <img id="carImg" src="${pageContext.request.contextPath}/resources/images/upload.jpg" style="height: 160px;width:160px;" />

                </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" readonly class="layui-input" name="price" lay-verify="required|number" lay-reqText="請輸入價格" placeholder="價格">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">租金</label>
                <div class="layui-input-inline">
                    <input type="text" readonly class="layui-input" name="rentPrice" lay-verify="required|number" lay-reqText="請輸入租金" placeholder="租金">
                </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" class="layui-input" readonly name="deposit" lay-verify="required|number" lay-reqText="請輸入押金" placeholder="押金">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份證</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="idCard" lay-verify="required|idCard" lay-reqText="請輸入客戶身份證" placeholder="客戶身份證">
                </div>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">出租時間</label>
            <div class="layui-input-block" style=" width: 514px">
               <input  type="text" readonly  name="rentTime" id="rentTime" class="layui-input" />
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>
    </form>
</script>
 
 <script >
    layui.use(['jquery','form','layer','table','upload','laydate'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;
        var upload = layui.upload;
        var laydate = layui.laydate;                  
                   
    //表格行工具欄事件
        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            var rowData = d.data;
            if (event == "rent"){
                rent(rowData);  //具體出租方法
            }
        })

        //出租方法
        function rent(rowData){
            //彈出層的引數
            var layOps = {
                title:"計程車輛",
                type:1,
                skin: "layui-layer-molv",
                content:$("#rentTpl").html(),
                area:['710px','580px'],
                success:function (layero,index) {
                    //為表單賦值
                    form.val("rentFormFilter",rowData)

                    //為圖片設定資料
                    $("#carImg").attr("src",cxt + "/"+rowData.img);
                    //渲染時間元件
                    laydate.render({
                        elem:"#rentTime",
                        range:"~"
                    });


                    //表單的提交監聽
                    form.on("submit(subBtnFilter)",function (d) {
                        var formData = d.field;
                        //使用ajax提交資料
                        $.post(cxt+"/rent/add.do",formData,function (rs) {
                            layer.msg(rs.msg); //展示業務訊息
                            if (rs.code != 200){
                                return false;
                            }
                            layer.close(index);  //關閉彈層
                            //重新整理表格
                            $("#searchBtn").click();

                        })
                        return false;//阻止預設提交行為
                    })
                },
                btn:['確認','取消'],
                btnAlign: "c",
                yes:function (index,layero) {
                    //點選隱藏的提交按鈕  觸發  表單提交監聽
                    $("#subBtn").click();
                }
            };
            layer.open(layOps);

        }
 </script>                 

2.新建BusRentController

package com.toddding.controller;

import com.toddding.common.validator.ValidatorUtil;
import com.toddding.domain.BusRent;
import com.toddding.service.BusRentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("rent")
public class BusRentController {

    @Autowired
    private BusRentService busRentService;

    //新增車輛出租記錄
    @RequestMapping("add.do")
    public  Object add(BusRent busRent){
        //資料效驗
        ValidatorUtil.validator(busRent);
        return busRentService.add(busRent);
    }

}

3.新建BusRentService

package com.toddding.service;

import com.toddding.common.Result;
import com.toddding.domain.BusRent;

public interface BusRentService {

    //新增出租記錄
    Result add(BusRent busRent);
}

4.新建BusRentServiceImpl

package com.toddding.service.impl;

@Service
public class BusRentServiceImpl implements BusRentService {
    @Autowired
    private BusRentMapper busRentMapper;

    @Autowired
    private BusCustomerMapper busCustomerMapper;

    @Autowired
    private BusCarMapper busCarMapper;

    @Override
    @Transactional(rollbackFor = Exception.class)
    public Result add(BusRent busRent) {
        //業務資料效驗
        //校驗客戶是否存在
        //根據身份證號,  查詢客戶  效驗客戶是否存在
        BusCustomerQuery query = new BusCustomerQuery();
        query.setIdCard(busRent.getIdCard());
        BusCustomer busCustomer = busCustomerMapper.selectCustomerByKeywords(query);
        if (busCustomer == null){
            return new Result(CodeMsg.RENT_CUSTOMER_ID_CARD_ERROR);
        }

        //效驗車輛資訊
        //根據車牌號查詢車輛資訊
        BusCar busCar = busCarMapper.selectOneByNum(busRent.getNum());
        //獲取出租狀態   判斷出租狀態是否是  未出租
        if (busCar.getIsRent().equals(Constant.CAR_RENT_ED)){
            return  new Result(CodeMsg.RENT_CAR_RENTED_ERROR);
        }

        //樂觀鎖處理併發問題
        //修改車輛狀態
        Integer rows = busCarMapper.updateRentState(busCar.getId(), Constant.CAR_RENT_ED, busCar.getVersion());
        if (rows != 1){
            throw  new BussiException(CodeMsg.RENT_FAILED_ERROR.code,CodeMsg.RENT_FAILED_ERROR.msg);
        }

        String rentTime = busRent.getRentTime();
        String[] split = rentTime.split("~");
        busRent.setBeginTime(split[0].trim());  //去掉空格
        busRent.setEndTime(split[1].trim());
        //客戶名稱
        busRent.setName(busCustomer.getName());
        //設定業務員ID
        Subject subject = SecurityUtils.getSubject();
        ActiveUser activeUser = (ActiveUser) subject.getPrincipal();
        busRent.setUserId(activeUser.getSysUser().getId());

        //新增出租記錄
        busRentMapper.insert(busRent);
        return new Result();
    }
}

5.修改CodeMsg

RENT_CAR_RENTED_ERROR(4004002, "車輛已經出租!"),
RENT_FAILED_ERROR(4004003, "車輛出租失敗,車輛資訊發生了變化!"),

6.修改Constant

/**
 * 未出租
 */
Integer CAR_RENT_NOT = 1;

/**
 * 已經出租
 */
Integer CAR_RENT_ED = 2;

7.新建BusRent

package com.toddding.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.hibernate.validator.constraints.Length;
import org.hibernate.validator.constraints.Range;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import java.util.Date;

/**
 * @Description: 車輛出租記錄實體類
 * @Author: Todd Ding
 * @Date 2020-12-03 10:59
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class BusRent {
    /**
     * 出租記錄ID
     */
    private Integer id;

    /**
     * 車牌號
     */
    @NotEmpty(message = "車牌號不能為空")
    @Length(max = 8,message = "車牌號最多8位")
    private String num;

    /**
     * 車型  1 轎車 2 SUV  3跑車
     */
    @NotNull(message = "車型不能為空")
    @Range(min = 1,max = 3,message = "車型的值1~3")
    private Integer type;

    /**
     * 租金
     */
    @NotNull(message = "租金不能為空")
    @Range(min = 1,max = 999999999,message = "租金範圍:1~999999999")
    private Integer rentPrice;

    /**
     * 押金
     */
    @NotNull(message = "押金不能為空")
    @Range(min = 1,max = 999999999,message = "押金範圍:1~999999999")
    private Integer deposit;

    /**
     * 客戶名稱
     */
    private String name;

    /**
     * 客戶身份證號
     */
    @NotEmpty(message = "身份證號不能為空")
    @Length(min = 18,max = 18,message = "身份證號18位")
    private String idCard;

    @NotEmpty(message = "出租時間不能為空")
    private String rentTime;

    /**
     * 計劃租車開始時間
     */
    private String beginTime;

    /**
     * 計劃租車的結束時間
     */
    private String endTime;

    /**
     * 狀態  1 未還車  2 已還車
     */
    private Integer flag;

    /**
     * 業務員ID
     */
    private Integer userId;

    /**
     * 建立時間
     */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")
    private Date createTime;

    /**
     * 修改時間
     */
    private Date updateTime;
}

8.新建BusRentMapper

/**
 * @Description: 車輛出租記錄資料操作介面
 * @Author: Todd Ding
 * @Date 2020-12-03 11:06
 */
public interface BusRentMapper {
    /**
     * 新增車輛出租記錄
     *
     * @param busRent
     */
    void insert(BusRent busRent);
}    

9.新建BusRentMapper.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.toddding.mapper.BusRentMapper">
    <resultMap id="BaseResultMap" type="com.toddding.domain.BusRent">
        <id column="id" property="id"/>
        <result column="num" property="num"/>
        <result column="type" property="type"/>
        <result column="rent_price" property="rentPrice"/>
        <result column="deposit" property="deposit"/>
        <result column="name" property="name"/>
        <result column="id_card" property="idCard"/>
        <result column="begin_time" property="beginTime"/>
        <result column="end_time" property="endTime"/>
        <result column="flag" property="flag"/>
        <result column="user_id" property="userId"/>
        <result column="create_time" property="createTime"/>
        <result column="update_time" property="updateTime"/>
    </resultMap>
    <sql id="Base_Column_List">
        <!-- @mbg.generated -->
        id, num, `type`, rent_price, deposit, `name`, id_card, begin_time, end_time, flag, user_id, create_time, update_time
    </sql>
    <insert id="insert">
        insert into bus_rent
            (num, `type`, rent_price, deposit, `name`, id_card, begin_time, end_time, user_id)
        value
           (#{num}, #{type}, #{rentPrice}, #{deposit}, #{name}, #{idCard}, #{beginTime}, #{endTime}, #{userId})
    </insert>
</mapper>    

10.修改BusCarMapper

/**
     * 修改車輛狀態
     *
     * @param id
     * @param rent
     * @param version
     * @return
     */
    Integer updateRentState(@Param("id") Integer id, @Param("rent") Integer rent, @Param("version") Integer version);

11.修改BusCarMapper.xml

<!-- 修改車輛狀態 -->
<update id="updateRentState">
    update bus_car set is_rent = #{rent} ,version = version + 1 where id = #{id} and version = #{version}
</update>

4.車輛出租列表

1.新建 /rent/list.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>出租列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">車牌號</label>
                    <div class="layui-input-inline" style="width: 120px">
                        <input type="text" class="layui-input" placeholder="車牌號" id="num">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客戶名稱</label>
                    <div class="layui-input-inline" style="width: 120px">
                        <input type="text" class="layui-input" placeholder="客戶名稱" id="name">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出租狀態</label>
                    <div class="layui-input-inline" style="width: 120px">
                        <select id="flag">
                            <option value="">狀態</option>
                            <option value="1">未還車</option>
                            <option value="2">已還車</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出租時間</label>
                    <div class="layui-input-inline">
                        <input readonly class="layui-input" id="beginTime" placeholder="出租時間"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn" type="button">搜尋</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </blockquote>

    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%--操作--%>
    <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="returnCar">
            <i class="layui-icon layui-icon-ok"></i>
            還車
        </button>
    </script>

</form>

<%--新增使用者模板--%>
<script type="text/html" id = "addUserTpl">
    <form class="layui-form layui-form-pane" style="margin: 10px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname" lay-verify="required" lay-reqText="請輸入姓名" placeholder="使用者姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登入名</label>
                <div class="layui-input-inline">
                    <input type="text" name="loginName" lay-verify="required" lay-reqText="請輸入登入名" placeholder="登入名" 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" name="phone" lay-verify="required|phone" lay-reqText="請輸入手機號" placeholder="手機號" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份證</label>
                <div class="layui-input-inline">
                    <input type="text" name="idCard" lay-verify="required|idCard" lay-reqText="請輸入手機號" placeholder="手機號" 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="radio" name="sex"   value="1" title="男" checked>
                    <input  type="radio" name="sex" value="2" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label  class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <textarea  class="layui-textarea" name="address" placeholder="地址" lay-reqText="請輸入地址" lay-verify="required" ></textarea>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>

    </form>

</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"> </script>
<script >
    layui.use(['jquery','form','layer','table','laydate'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;
        var laydate = layui.laydate;
        //渲染時間控制元件
        laydate.render({
            elem: "#beginTime",
            range:"~"
        })
        //渲染資料表格
        //表格引數
        var tabOps ={
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt + "/rent/page.do",
            page:true,
            toolbar: "#headBtns",
            cols:[[
                {field: "num", align: "center", title: "車牌號"},
                {
                    field: "type", align: "center", title: "車型", templet: function (d) {
                        let type = d.type;
                        if (type == 1) {
                            return "<p style='color: #00ffb7'>轎車</p>";
                        } else if (type == 2) {
                            return "<p style='color: #00e1ff'>SUV</p>";
                        } else if (type == 3) {
                            return "<p style='color: #ff8400'>超跑</p>";
                        }
                    }
                },
                {field: "rentPrice", align: "center", title: "租金"},
                {field: "deposit", align: "center", title: "押金"},
                {field: "name", align: "center", title: "客戶"},
                {field: "beginTime", align: "center", title: "開始時間"},
                {field: "endTime", align: "center", title: "結束時間"},
                {
                    field: "flag", align: "center", title: "狀態", width: 80, templet: function (d) {
                        let flag = d.flag;
                        if (flag == 1) {
                            return "<p style='color: #ff5900'>未歸還</p>";
                        } else if (flag == 2) {
                            return "<p style='color: #00ffd9'>已歸還</p>";
                        }
                    }
                },
                {field: "createTime", align: "center", title: "建立時間", width: 150},
                {title: "操作", align: "center", toolbar: "#rowBtns", fixed: "right"}
            ]], //列資料
            parseData:function (rs) {
                return{
                    code: rs.code,
                    msg:rs.msg,
                    count:rs.data.total,
                    data:rs.data.list
                }
            },
            response:{
                statusCode:200
            }


        };
        //進行渲染
        var tabIns = table.render(tabOps);

        //按鈕查詢
        $("#searchBtn").click(function () {
            var num = $("#num").val();
            var name = $("#name").val();
            var flag = $("#flag").val();
            var beginTime = $("#beginTime").val();
            tabIns.reload({
                where:{
                    "num":num,
                    "name":name,
                    "flag":flag,
                    "beginTime":beginTime
                }
            })
        })


        //表格行工具欄事件
        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            var rowData = d.data;
            if (event == "returnCar"){
                returnCar(rowData);
            }
        })


        //顯示頭像的方法
        // url : 影象的網路路徑
        window.showUserImg = function (url) {
            var  imgData = {
                "title": "使用者頭像", //相簿標題
                "start": 0, //初始顯示的圖片序號,預設0
                "data": [   //相簿包含的圖片,陣列格式
                    {
                        "alt": "使用者頭像",
                        "src": cxt + "/" + url, //原圖地址
                        "thumb":  cxt + "/" + url //縮圖地址
                    }
                ]
            }
            layer.photos({
                photos: imgData
            });
        }

    });

</script>

</body>
</html>

2..修改navs.json

{
   "title": "出租記錄",
   "icon": "&#xe609;",
   "href": "rent/list.do",
   "spread": false,
   "target": "_self"
},

3.修改PageController

/**
 * 跳轉租車記錄列表
 *
 * @return
 */
@RequestMapping("rent/list.do")
public String rentList() {
    return "rent/list.jsp";
}

4.修改BusRentController

//出租記錄列表的分頁查詢
@RequestMapping("page.do")
public  Object page(BusRentQuery query){

    return busRentService.queryPage(query);
}

5.修改BusRentService

//查詢出租記錄
Result queryPage(BusRentQuery query);

6.修改BusRentServiceImpl

@Override
public Result queryPage(BusRentQuery query) {
    Page<BusRent> busRentVOPage = PageHelper.startPage(query.getPage(), query.getLimit());

    //如果開始時間不為空
    if (StrUtil.isNotEmpty(query.getBeginTime())){
        String[] split = query.getBeginTime().split("~");
        System.out.println("-----------------------------------------"+split);
        query.setMinBeginTime(split[0].trim());
        query.setMaxBeginTime(split[1].trim());
    }
    busRentMapper.selectList(query);

    return new Result(busRentVOPage.toPageInfo());
}

7.新建BusRentQuery

package com.toddding.query;

import lombok.Data;

/**
 * @Description: 出租記錄列表的查詢引數封裝類
 * @Author: Todd Ding
 * @Date 2020-12-03 15:07
 */
@Data
public class BusRentQuery extends Query {
    /**
     * 車牌號
     */
    private String num;

    /**
     * 客戶名稱
     */
    private String name;

    /**
     * 出租狀態
     */
    private Integer flag;

    /**
     * 開始時間
     */
    private String beginTime;

    private String minBeginTime; // 最小開始時間

    private String maxBeginTime; // 最大的開始時間
}

8.修改BusRentMapper

/**
 * 根據引數查詢車輛出租記錄
 *
 * @param query
 * @return
 */
List<BusRent> selectList(BusRentQuery query);

9.修改BusRentMapper.xml

<select id="selectList" resultMap="BaseResultMap">
    select
        <include refid="Base_Column_List" />
    from bus_rent
        <where>
            <if test="num != null and num != ''">
                and num like concat('%',#{num},'%')
            </if>
            <if test="name != null and name != ''">
                and name like concat('%',#{name},'%')
            </if>
            <if test="flag != null and flag != ''">
                and flag = #{flag}
            </if>
            <if test="minBeginTime != null and minBeginTime != ''">
                and begin_time >= #{minBeginTime}
            </if>
            <if test="maxBeginTime != null and maxBeginTime != ''">
                and #{maxBeginTime} >= begin_time
            </if>
        </where>
</select>

5.還車

1.修改rent/list.jsp

 <%--操作--%>
    <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="returnCar">
            <i class="layui-icon layui-icon-ok"></i>
            還車
        </button>
    </script>
                
<%--新增還車記錄模板--%>
<script type="text/html" id = "returnTpl">
    <form class="layui-form layui-form-pane" style="margin: 10px"  lay-filter="returnFormFilter">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">車牌號</label>
                <div class="layui-input-inline">
                    <input type="text" name="num"  readonly  class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">還車時間</label>
                <div class="layui-input-inline">
                    <input type="text" name="returnTime" id="returnTime" lay-verify="required" lay-reqText="請輸入還車時間" placeholder="還車時間" 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" name="payMoney" lay-verify="required" value="0" lay-reqText="請輸入賠付金額" placeholder="賠付金額" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>

        <div class="layui-form-item layui-form-text">
            <label  class="layui-form-label">問題</label>
            <div class="layui-input-block">
                <textarea  class="layui-textarea" name="problem" placeholder="問題"  ></textarea>
            </div>
        </div>
        <button type="button" style="display: none" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>

    </form>	
</script>
                    
                    
//表格行工具欄事件
table.on("tool(dataTableFilter)",function (d) {
    var event = d.event;
    var rowData = d.data;
    if (event == "returnCar"){
        returnCar(rowData);
    }
})

//還車方法
function returnCar(rowData){

    //彈出層的引數
    var layOps = {
        title:"還車",
        type:1,
        skin: "layui-layer-molv",
        content:$("#returnTpl").html(),
        area:['680px','450px'],
        success:function (layero,index) {
            form.val("returnFormFilter",rowData)
            //渲染還車時間
            laydate.render({
                elem:"#returnTime"
            });
            //表單的提交監聽
            form.on("submit(subBtnFilter)",function (d) {
                var formData = d.field;
                formData.rentId=rowData.id;  //出租記錄id
                //使用ajax提交資料
                $.post(cxt+"/return/add.do",formData,function (rs) {
                    layer.msg(rs.msg); //展示業務訊息
                    if (rs.code != 200){
                        return false;
                    }
                    layer.close(index);  //關閉彈層
                    //重新整理表格
                    $("#searchBtn").click();

                })
                return false;//阻止預設提交行為
            })
        },
        btn:['確認','取消'],
        btnAlign: "c",
        yes:function (index,layero) {
            //點選隱藏的提交按鈕  觸發  表單提交監聽
            $("#subBtn").click();
        }
    };
    layer.open(layOps);

}

2.新建BusReturnController

package com.toddding.controller;

import com.toddding.common.validator.ValidatorUtil;
import com.toddding.domain.BusReturn;
import com.toddding.service.BusReturnService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("return")
public class BusReturnController {

    @Autowired
    private BusReturnService busReturnService;

    //新增還車記錄請求
    @RequestMapping("add.do")
    public Object add(BusReturn busReturn){
        ValidatorUtil.validator(busReturn);
        return busReturnService.add(busReturn);
    }

}

3.新建BusReturnService

package com.toddding.service;

import com.toddding.common.Result;
import com.toddding.domain.BusReturn;

public interface BusReturnService {

    //新增還車記錄
    Result add(BusReturn busReturn);
}

4.新建BusReturnServiceImpl

package com.toddding.service.impl;

import cn.hutool.core.date.DateTime;
import cn.hutool.core.date.DateUtil;
import com.toddding.common.CodeMsg;
import com.toddding.common.Constant;
import com.toddding.common.Result;
import com.toddding.common.exception.BussiException;
import com.toddding.domain.BusCar;
import com.toddding.domain.BusRent;
import com.toddding.domain.BusReturn;
import com.toddding.mapper.BusCarMapper;
import com.toddding.mapper.BusRentMapper;
import com.toddding.mapper.BusReturnMapper;
import com.toddding.service.BusReturnService;
import com.toddding.shiro.ActiveUser;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.persistence.RollbackException;

@Service
public class BusReturnServiceImpl implements BusReturnService {

    @Autowired
    private BusReturnMapper busReturnMapper;

    @Autowired
    private BusRentMapper busRentMapper;

    @Autowired
    private BusCarMapper busCarMapper;

    @Override
    @Transactional(rollbackFor = Exception.class)
    public Result add(BusReturn busReturn) {
        //業務資料效驗
        //查詢出租記錄
        //判斷出租記錄狀態
        /*
           1.查詢出租記錄
           2.檢查出租記錄是否還車
           3.只有沒有還車時,才能還車
           4.修改出租記錄狀態  改為已還車
           5.插入還車記錄
           6.修改車輛狀態  從已出租改為未出租
              計算   出租的總金額
         */
        //1.查詢出租記錄
        BusRent busRent = busRentMapper.selectByRentId(busReturn.getRentId());
        //如果出租狀態已經還車是已還車,則
        if (busRent.getFlag().equals(Constant.CAR_RETURN_ED)){
            return  new Result(CodeMsg.RETURN_CAR_ERROR);
        }
        //如果沒有還  則修改還車記錄狀態
       int rows =  busRentMapper.updateRentFlag(busReturn.getRentId(),busRent.getFlag(),Constant.CAR_RENT_ED);
        if (rows != 1){
            return  new Result(CodeMsg.RETURN_FAILED_RENT_CHANGED_ERROR);
        }
        //修改車輛狀態
        BusCar busCar = busCarMapper.selectOneByNum(busReturn.getNum());
        rows = busCarMapper.updateRentState(busCar.getId(), Constant.CAR_RENT_NOT, busCar.getVersion());
        if (rows != 1){
            throw new BussiException(CodeMsg.RETURN_FAILED_CAR_CHANG_ERROR.code,CodeMsg.RETURN_FAILED_CAR_CHANG_ERROR.msg);
        }
        //計算出租總金額
        String beginTime = busRent.getBeginTime()+" 00:00:00";  //格式轉換
        String returnTime = busReturn.getReturnTime()+" 23:59:59";
        int rentPrice = busRent.getRentPrice();  // 單日租金
        Date begin = DateUtil.parse(beginTime, "yyyy-MM-dd HH:mm:ss");
        Date end = DateUtil.parse(returnTime, "yyyy-MM-dd HH:mm:ss");
        int days = (int) DateUtil.betweenDay(begin, end, true)+1;  //不是同一天 對比後加1
        if (DateUtil.isSameDay(begin,end)){
            days = 1;   //如果是同一天的話 設定為1
        }
        rentPrice= rentPrice * days; //計算總租金
        //總金額
        int totalMoney = rentPrice + busReturn.getPayMoney();
        //總租金
        busReturn.setRentPrice(rentPrice);
        busReturn.setTotalMoney(totalMoney);
        //獲取操作員id
        Subject subject = SecurityUtils.getSubject();
        ActiveUser activeUser = (ActiveUser) subject.getPrincipal();
        busReturn.setUserId(activeUser.getSysUser().getId());
        //新增還車記錄
        busReturnMapper.insert(busReturn);

        return new Result()  ;
    }
}

5.修改CodeMsg

RETURN_CAR_ERROR(4005001, "車輛已經歸還,請不要重複還車!"),
RETURN_FAILED_RENT_CHANGED_ERROR(4005002, "還車失敗,出租記錄發生變化!"),
RETURN_FAILED_CAR_CHANG_ERROR(4005003, "還車失敗,車輛狀態修改失敗!"),

6.修改Constant

/**
 * 未還車
 */
Integer CAR_RETURN_NOT = 1;

/**
 * 已還車
 */
Integer CAR_RETURN_ED = 2;

7.新建BusReturn

package com.toddding.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.hibernate.validator.constraints.Length;

import javax.validation.constraints.Min;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import java.util.Date;

/**
 * @Description: 車輛歸還記錄實體類
 * @Author: Todd Ding
 * @Date 2020-12-03 11:01
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class BusReturn {
    /**
     * 還車記錄ID
     */
    private Integer id;

    /**
     * 車牌號
     */
    @NotEmpty(message = "車牌號不能為空")
    @Length(min = 7,max = 8,message = "車牌號7~8位")
    private String num;

    /**
     * 出租記錄ID
     */
    @NotNull(message = "出租記錄ID不能為空")
    private Integer rentId;

    /**
     * 還車時間
     */
    @NotEmpty(message = "還車時間不能為空")
    private String returnTime;

    /**
     * 租金
     */
    private Integer rentPrice;

    /**
     * 賠付金額
     */
    @NotNull(message = "賠付金額不能為空")
    @Min(value = 0,message = "賠付金額最少0")
    private Integer payMoney;

    /**
     * 問題
     */
    private String problem;

    /**
     * 總金額
     */
    private Integer totalMoney;

    /**
     * 業務員ID
     */
    private Integer userId;

    /**
     * 建立時間
     */
    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private Date createTime;
}

8.新建BusReturnMapper

public interface BusReturnMapper {
    /**
     * 新增還車記錄
     *
     * @param busReturn
     */
    void insert(BusReturn busReturn);
 }   

9.新建BusReturnMapper.xml

<mapper namespace="com.toddding.mapper.BusReturnMapper">
    <resultMap id="BaseResultMap" type="com.toddding.domain.BusReturn">
        <id column="id" property="id"/>
        <result column="num" property="num"/>
        <result column="rent_id" property="rentId"/>
        <result column="return_time" property="returnTime"/>
        <result column="rent_price" property="rentPrice"/>
        <result column="pay_money" property="payMoney"/>
        <result column="problem" property="problem"/>
        <result column="total_money" property="totalMoney"/>
        <result column="user_id" property="userId"/>
        <result column="create_time" property="createTime"/>
    </resultMap>
    <sql id="Base_Column_List">
        id, num, rent_id, return_time, rent_price, pay_money, problem, total_money, user_id, create_time
    </sql>
    <insert id="insert">
        insert into bus_return
            (num, rent_id, return_time, rent_price, pay_money, problem, total_money, user_id)
        value
            (#{num}, #{rentId}, #{returnTime}, #{rentPrice}, #{payMoney}, #{problem}, #{totalMoney}, #{userId})
    </insert>
</mapper>    

10.修改BusRentMapper

/**
 * 根據 ID 查詢出租記錄
 *
 * @param rentId
 * @return
 */
BusRent selectByRentId(@Param("id") Integer rentId);

/**
 * 修改還車記錄狀態
 *
 * @param rentId  出租記錄ID
 * @param oldFlag 原出租狀態
 * @param flag    新出租狀態
 * @return
 */
int updateRentFlag(@Param("id") Integer rentId, @Param("oldFlag") Integer oldFlag, @Param("flag") Integer flag);

11修改BusRentMapper.xml

<select id="selectByRentId" resultMap="BaseResultMap">
    select
        <include refid="Base_Column_List" />
    from bus_rent where id = #{id}
</select>
<update id="updateRentFlag">
    update bus_rent set flag = #{flag} where id = #{id} and flag = #{oldFlag}
</update>

6.還車記錄列表

1.新建/return/list.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>還車管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">車牌號</label>
                    <div class="layui-input-inline" style="width: 120px">
                        <input type="text" class="layui-input" placeholder="車牌號" id="num">
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn" type="button">搜尋</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </blockquote>

    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%--操作--%>
 <%--   <script  type="text/html" id="rowBtns">
        <button class="layui-btn layui-btn-sm" lay-event="returnCar">
            <i class="layui-icon layui-icon-ok"></i>
            還車
        </button>
    </script>--%>

</form>


<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"> </script>
<script >
    layui.use(['jquery','form','layer','table'],function () {
        var cxt = '${pageContext.request.contextPath}';
        var $ =layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var  table = layui.table;
        //渲染資料表格
        //表格引數
        var tabOps ={
            id:"dataTableId",
            elem:"#dataTable",
            url:cxt + "/return/page.do",
            page:true,
            toolbar: "#headBtns",
            cols:[[
                {field: "num", align: "center", title: "車牌號"},
                {field: "rentId", align: "center", title: "出租ID"},
                {field: "returnTime", align: "center", title: "還車時間"},
                {field: "rentPrice", align: "center", title: "總租金"},
                {field: "payMoney", align: "center", title: "賠付金額"},
                {field: "totalMoney", align: "center", title: "總金額"},
                {field: "problem", align: "center", title: "問題"},
                {field: "createTime", align: "center", title: "建立時間", width: 150},
            ]], //列資料
            parseData:function (rs) {
                return{
                    code: rs.code,
                    msg:rs.msg,
                    count:rs.data.total,
                    data:rs.data.list
                }
            },
            response:{
                statusCode:200
            }
        };

        //進行渲染
        var tabIns = table.render(tabOps);

        //按鈕查詢
        $("#searchBtn").click(function () {
            var num = $("#num").val();
            tabIns.reload({
                where:{
                    "num":num
                }
            })
        })

    });

</script>
</body>
</html>

2.修改PageController

/**
 * 跳轉還車記錄列表
 *
 * @return
 */
@RequestMapping("return/list.do")
public String returnList() {
    return "return/list.jsp";
}

3.修改navs.json

{
   "title": "還車記錄",
   "icon": "&#xe609;",
   "href": "return/list.do",
   "spread": false,
   "target": "_self"
}

4.修改BusReturnController

@RequestMapping("page.do")
public Object page(BusReturnQuery query){
    return busReturnService.queryPage(query);
}

5.新建BusReturnQuery

package com.toddding.query;

import lombok.Data;

/**
 * @Description: 還車記錄列表的查詢引數封裝類
 * @Author: Todd Ding
 * @Date 2020-12-03 17:11
 */
@Data
public class BusReturnQuery extends Query {
    /**
     * 車牌號
     */
    private String num;
}

6.修改BusReturnService

//分頁查詢還車記錄
Result queryPage(BusReturnQuery query);

7.修改BusReturnServiceImpl

 /**
     * 還車記錄的分頁查詢
     *
     * @param query
     * @return
     */
@Override
public Result queryPage(BusReturnQuery query) {
    Page<BusReturn> busReturnVO = PageHelper.startPage(query.getPage(), query.getLimit());
    busReturnMapper.selectList(query);
    return new Result(busReturnVO.toPageInfo());

}

8.修改BusReturnMapper

/**
 * 還車記錄的分頁查詢
 *
 * @param query
 * @return
 */
List<BusReturn> selectList(BusReturnQuery query);

9.修改BusReturnMapper.xml

<select id="selectList" resultMap="BaseResultMap">
    select <include refid="Base_Column_List" /> from bus_return
    <where>
        <if test="num != null and num != ''">
            num like concat('%',#{num},'%')
        </if>
    </where>
</select>