wisdomsell-day3(智能商贸系统第三天)

wisdomsell-day3(智能商贸系统第三天)

1.完成添加功能

1.1index页面

<%--添加和修改弹出框--%>

    

        
        
            <%--设置一个标识,如果是修改，都进行隐藏 --%>
            

            

                
姓 名
                

            

                
密 码
                

            
            

                
邮 件
                

            
            

                
年 龄
                

            
            

                
部 门
                

            
        
    
    

        保存
        关闭
    

1.2employeejsp页面

add(){
            //如果为添加，则显示密码框
            $("*[shower]").show();
            //显示密码
            $("*[shower]>td>input ").textbox("enable");
            //弹出对话框并且居中
            editDialog.dialog("open").dialog("center");
            //每次关闭并且重新点击添加的时候，都会清除上一次的数据
            editForm.form("clear");

        },

1.3弹框关闭的方法

 //窗口关闭方法，点击保存或者关闭就能将弹窗关闭
        close(){
            editDialog.dialog("close");
        }

1.4提交认证

save(){
        //1.准备相应路径
            var url = "/employee/save"
        //2.获取隐藏的id属性
            var employeeId = $("#employeeId").val();

        //3.进行判断,如果有值就跳转到修改
            if(employeeId){
                url="/employee/update?cmd=update"
            }
            editForm.form('submit', {
                //路径
                url:url,
                //提交前执行的代码
                onSubmit: function(){
                    // do some check
                    // return false to prevent submit;
                    return $(this).form('validate');
                },
                //成功后处理
                //后台返回的结果为sussess ：true /false msg：xxx
                //easyui没有方法把该字符串变为json对象，所以只能自己来处理
                success:function(data){
                    // {"success":true,"msg":null}
                    var result = JSON.parse(data);
                    //如果成功,刷新数据
                    if(result.success){
                        //5.刷新页面
                        datagrid.datagrid("reload");
                    }else{
                        //给出错误提示
                        $.messager.alert('提示',`数据操作失败，原因是:${result.msg}`,"error");
                    }
                    itsource.close();
                }
            });
        },

2.完成修改功能

update() {
            //1.获取选中的行
            var row = datagrid.datagrid("getSelected");
            //2.如果这一行不存在(给出提示，后台代码不再执行)
            if (!row) {
                $.messager.alert('提示', '请选中任意一行进行修改', "warning");
                return;
            }
            //2.修改时不应该显示密码，应该隐藏起来
            $("*[shower]").hide();
            //3.密码虽然被隐藏了，但是还是会被传送过去,但是会引出数据消失问题
            $("*[shower]>td>input ").textbox("disable");
            //弹出对话框并且居中
            editDialog.dialog("open").dialog("center");
            //每次关闭并且重新点击添加的时候，都会清除上一次的数据
            editForm.form("clear");
            //完成部门回显
            if(row.department){
                row["department.id"]=row.department.id;
            }
            //修改需要进行数据的回显
            editForm.form("load", row);
        },

2.1完善修改

 //添加和修改相同的部门提取出来，写一个新的方法
    public JsonResult saveOrUpdate(Employee employee){
        try {
            employeeService.save(employee);
            return new JsonResult();
        }catch (Exception e){
            return new JsonResult(false,e.getMessage());
        }
    }

2.2修改的时候不传密码

在上面的employee.js中，就是将密码禁用

3.解决数据丢失

/**
     * 有三种方法可以来处理数据丢失，方法一：用隐藏域的方法
     * 方法二：sql有个注释可以禁止spring去加载字段
     * 方法三:用注释的方法，去解决，该注释会让注释下面的方法优先于修改等方法前面执行，此时通过id拿到数据库里面的对象
     * 然后将该注解放入update方法中，因为名字是一样的，所以employee对象没有变化，至于前台的哪些值，在传送过程中已经被
     * spring封装进入到employee对象中了
     */
    @ModelAttribute("employeeUpdate")
    public Employee beforeUpdate(Long id,String cmd){
        if(id!=null&&"update".equals(cmd)){
            Employee employee = employeeService.findOne(id);
            return employee;
        }
        return null;
    }

4.导入部门模块

复制employee的模块，将其中的大写Employee替换为Department，小写的employee替换为小写的department

5.员工页面部门内容展示

前面忘记把图片引入了，直接在这里和部门一起写了

图片引入的时候需要格式化，方式和部门有点类似

//图片格式化
function imgFormat (v) {
    return `${v}" style="width: 50px;heigh=50px" />`
}
//部门格式化 格式化之间为{object object}
function departmentFormat(v) {
    //有些人没有部门
    return v?v.name:"";
}

5.1在员工页面引入部门查询功能

.eq(departmentId!=null,"department.id",departmentId)

5.2在员工页面添加引入部门添加

 
                部 门
                
            

5.3部门的数据回显

注意代码的顺序

 //完成部门回显
            if(row.department){
                row["department.id"]=row.department.id;
            }
            //修改需要进行数据的回显
            editForm.form("load", row);