今日任务:完成产品模块的增删改
建类:
/**
* 产品类型
* @author Administrator
*
*/
@Entity
@Table(name="producttype")
public class Producttype extends BaseDomain {
private String name;//名称
private String descs;//描述
//类型分两级,有一个自关联
@ManyToOne(fetch=FetchType.LAZY)
@JoinColumn(name="parent_id")
private Producttype parent;
//getter,setter…
}
/**
*/
@Entity
@Table(name = "product")
public class Product extends BaseDomain {
private String name; //产品名称
private String color; //产品颜色
private String pic; //大图片
private String smallPic;//小图片
private BigDecimal costPrice;//成本价
private BigDecimal salePrice;//销售价
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "types_id")
private Producttype types;// 对应的二级产品类型
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "unit_id")
private Systemdictionarydetail unit;// 数据字典明细:单位
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "brand_id")
private Systemdictionarydetail brand;// 数据字典明细:品牌
//getter,setter…
}
关系参考数据库
完成前台页面
<table id="productGrid" class="easyui-datagrid"
data-options="url:'/product/page',fitColumns:true,singleSelect:true,fit:true,pagination:true,toolbar:'#gridTools',onLoadSuccess:loadSuccess">
<thead>
<tr>
<th data-options="field:'name',width:100">name</th>
<th data-options="field:'color',width:100,formatter:formatColor">color</th>
<%--<th data-options="field:'pic',width:100">pic</th>--%>
<th data-options="field:'smallpic',width:100,formatter:formatImage">smallpic</th>
<th data-options="field:'costprice',width:100">costprice</th>
<th data-options="field:'saleprice',width:100">saleprice</th>
<th data-options="field:'types',width:100,formatter:formatType">typesId</th>
<th data-options="field:'unit',width:100,formatter:formatUnit">unitId</th>
<th data-options="field:'brand',width:100,formatter:formatBrand">brandId</th>
</tr>
</thead>
</table>
<%--grid顶部工具栏--%>
<div id="gridTools" style="padding:5px;height:auto">
<%--功能条--%>
<div style="margin-bottom:5px">
<a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="#" data-method="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="#" data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<%--查询条--%>
<form id="searchForm">
名称: <input name="name" class="easyui-textbox" style="width:80px">
<a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</form>
</div>
<%--添加与修改的表单对话框--%>
<div id="editDialog" class="easyui-dialog" title="功能编辑" style="width:400px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
<form id="editForm" action="/product/upload" class="easyui-form" method="post" enctype="multipart/form-data">
<input id="productId" type="hidden" name="id" />
<table cellpadding="5">
<tr>
<td>name:</td>
<td><input class="easyui-validatebox" type="text" name="name"
data-options="required:true"/></td>
</tr>
<tr>
<td>color:</td>
<td><input class="easyui-validatebox" type="color" name="color"
data-options="required:true"/></td>
</tr>
<tr>
<td>costprice:</td>
<td><input class="easyui-validatebox" type="text" name="costprice"
data-options="required:true"/></td>
</tr>
<tr>
<td>saleprice:</td>
<td><input class="easyui-validatebox" type="text" name="saleprice"
data-options="required:true"/></td>
</tr>
<tr>
<td>类型:</td>
<td>
<input name="types.id" class="easyui-combobox" panelHeight="auto"
data-options="groupField:'group',valueField:'id',textField:'name',url:'/util/proType',required:true" />
</td>
</tr>
<tr>
<td>单位:</td>
<td>
<input name="unit.id" class="easyui-combobox" panelHeight="auto"
data-options="valueField:'id',textField:'name',url:'/util/proUnit',required:true" />
</td>
</tr>
<tr>
<td>品牌:</td>
<td>
<input name="brand.id" class="easyui-combobox" panelHeight="auto"
data-options="valueField:'id',textField:'name',url:'/util/proBrand',required:true" />
</td>
</tr>
<tr>
<td>产品图片:</td>
<td>
<input name="fileImage" class="easyui-filebox" style="width:100%">
</td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-method="save">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-method="closeDialog">关闭</a>
</div>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="/images/head/3.jpg" />
</div>
</div>
<!-- 图片预览功能 -->
<div style="display: none">
<div id="dlg" class="datagrid-toolbar" style="padding:5px;">
<img id="simg" src="" alt="">
</div>
</div>
</div>
功能JS:
function formatType(value) {
//window.console.debug(value);
return value?value.name:"";
}
function formatUnit(value) {
//window.console.debug(value);
return value?value.name:"";
}
function formatBrand(value) {
//window.console.debug(value);
return value?value.name:"";
}
function formatColor(value) {
//window.console.debug(value);
return "<div style='width: 20px;height: 20px;background-color: "+value+"'></div>";
}
function formatImage(value,row,index) {
return `<img src="${value}" width="50" height="50">`;
}
//成功后进行加载
//图片灯箱效果支持
function loadSuccess(data) {
var rows = data.rows;
for(var i=0;i<rows.length;i++){
var result = rows[i];
//第每一个图片都进行初始化
$.easyui.tooltip.init($("img[src='"+result.smallpic+"']"), {
position: "right",
content: "<div style=\"width:600px;height:480px;\"><img src='"+result.pic+"' /></div>"
});
}
}
$(function () {
...
itsource={
//添加
add(){
...
},
//修改
update(){
...
//对可选项展示格式化
if(row.types){
row["types.id"] = row.types.id;
}
if(row.unit){
row["unit.id"] = row.unit.id;
}
if(row.brand){
row["brand.id"] = row.brand.id;
}
editForm.form("load",row);
//打开弹出框(居中)
editDialog.dialog("center").dialog("open");
},
//保存功能
save(){
...
});
},
//删除
del(){
...
},
...
}
})
文件上传:注意点---如果直接在servlet中用MutipartFile接收,那么在不上传文件的时候会报错
//添加
@RequestMapping("/save")
@ResponseBody
public JsonResult save(Product product,HttpServletRequest req){
return saveOrUpdate(product,req);
}
@RequestMapping("/upload")
@ResponseBody
public JsonResult upload(MultipartFile fileImage, HttpServletResponse response){
System.out.println(fileImage.getName());
long size = fileImage.getSize();
System.out.println(size);
return new JsonResult();
}
//图片上传功能---随机名称生成
private static final SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd-HHmmssS");
//图片上传功能
public void uploadImage(Product product, MultipartFile fileImage, HttpServletRequest req){
if(fileImage!=null) {//上传文件存在
String webapp = req.getServletContext().getRealPath("/");
//图片存在就把它给删除掉
if (product.getId() != null && StringUtils.isNotBlank(product.getPic())) {
File deleteFile = new File(webapp, product.getPic());
if (deleteFile.exists()) {
deleteFile.delete();
}
File deleteFile2 = new File(webapp, product.getSmallpic());
if (deleteFile2.exists()) {
deleteFile2.delete();
}
}
try {
// 上传文件命名,拷贝到webapp的位置,设置pic到product
Date date = new Date();
// 大小图的路径+文件名称
String fileName = "/upload/" + sdf.format(date) + ".png";
String smallFileName = "/upload/" + sdf.format(date) + "_small.png";
// 大小图的在服务器上面的物理路径
File destFile = new File(webapp, fileName);
File smallDestFile = new File(webapp, smallFileName);
// 生成upload目录
File parentFile = destFile.getParentFile();
String path = parentFile.getPath();
System.out.println("path:"+path);
if (!parentFile.exists()) {
parentFile.mkdirs();// 自动生成upload目录
}
// 把上传的临时图片,复制到当前项目的webapp路径
//FileUtils.copyFile(upload, destFile);
FileCopyUtils.copy(fileImage.getInputStream(), new FileOutputStream(destFile));
// 处理缩略图
//Thumbnails.of(upload).scale(0.1F).toFile(smallDestFile);
Thumbnails.of(fileImage.getInputStream()).scale(0.1F).toFile(smallDestFile);
// 把大小图的相对webapp的路径设置到数据库产品表里面
product.setPic(fileName);
product.setSmallpic(smallFileName);
} catch (Exception e) {
e.printStackTrace();
}
}
}
//添加或者修改
//如果上传文件为空,不改变原来的路径;
private JsonResult saveOrUpdate(Product product, HttpServletRequest req){
//下面是解决上传文件为空报错的问题
MultipartFile fileImage = null;
boolean isMultipart = ServletFileUpload.isMultipartContent(req);
if (isMultipart){
MultipartHttpServletRequest multipartRequest = WebUtils.getNativeRequest(req, MultipartHttpServletRequest.class);
fileImage = multipartRequest.getFile("fileImage");
}/*else{
//没有上传文件,保持路径不变
Product one = productService.findOne(product.getId());
String smallpic = one.getSmallpic();
String pic = one.getPic();
product.setPic(pic);
product.setSmallpic(smallpic);
}*/
uploadImage(product, fileImage, req);
try {
productService.save(product);
return new JsonResult();
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
}
待扩展/....