汽车租赁系统
汽车租赁系统
1.用户模块
1.用户列表
1.修改 user/list.jsp
<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 "男
";
}else if (sex == 2){
return "女
";
}
}},
{field:"address",title:"地址",align:"center",width: 100},
{title:"头像",width: 65,templet:function (d) {
var img = d.img;
return ""
}},
{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 sysUserPage = PageHelper.startPage(query.getPage(), query.getLimit());
// 根据参数查询用户列表
sysUserMapper.selectList(query);
return new Result(sysUserPage.toPageInfo());
}
5.修改SysUserMapper
/**
* 根据参数查询用户列表
*
* @param query
* @return
*/
List selectList(SysUserQuery query);
6.修改SysUserMapper.xml
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" %>
用户管理
<%--新增用户模板--%>
<script type="text/html" id = "addUserTpl">
</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 "男
";
}else if (sex == 2){
return "女
";
}
}},
{field:"address",title:"地址",align:"center",width: 100},
{title:"头像",width: 65,templet:function (d) {
var img = d.img;
return ""
}},
{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>
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 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
insert into
sys_user (login_name, login_password, phone, realname, id_card, sex, address)
value
(#{loginName}, #{loginPassword}, #{phone}, #{realname}, #{idCard}, #{sex}, #{address})
3.重置密码
1.修改user/list.jsp
<script type="text/html" id="rowBtns">
</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 sys_user set login_password = #{password} where id = #{id}
4.显示用户头像
? 查看用户头像，就是将用户头像url地址进行显示
1.修改user/list.jsp
{title:"头像",width: 65,templet:function (d) {
var img = d.img;
return ""
}}
//显示头像的方法
// 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" %>
汽车管理
<%--新增用户模板--%>
<script type="text/html" id = "addUserTpl">
</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 "轿车
";
}else if (type == 2){
return "SUV
";
}else if(type == 3){
return "跑车
";
}
}},
{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 "未出租
";
}else if (isRent == 2){
return "未出租
";
}
}},
{field:"descp",title:"描述",align:"center",width: 110},
{field:"img",title:"车辆图片",align:"center",width: 90,templet:function (d) {
var img = d.img;
return ""
}},
{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>
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 busCarVoPage = PageHelper.startPage(query.getPage(), query.getLimit());
busCarMapper.selectList(query);
return new Result(busCarVoPage.toPageInfo());
}
8.新建BusCarMapper
public interface BusCarMapper {
/**
* 根据条件查询车辆列表
*
* @param query
* @return
*/
List selectList(BusCarQuery query);
}
9.新建BusCarMapper.xml
2.新增车辆
1.修改car/list.jsp
<%-- 新增车辆 --%>
<script type="text/html" id="addTpl">
</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 "轿车
";
}else if (type == 2){
return "SUV
";
}else if(type == 3){
return "跑车
";
}
}},
{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 "未出租
";
}else if (isRent == 2){
return "未出租
";
}
}},
{field:"descp",title:"描述",align:"center",width: 110},
{title:"车辆图片",align:"center",width: 90,templet:function (d) {
var img = d.img;
return ""
}},
{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>