智能供銷系統_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());
        }
    }

 

待擴展/....