智能供销系统_8产品管理

今日任务:完成产品模块的增删改

建类:

/**
 * 产品类型
 * @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());
        }
    }

 

待扩展/....