写成品入库工作记录

整体初步思路

从前端的显示可以看出，index.html会显示侧边栏，侧边栏的点击会 唤起另一个html，然后另一个html里面的ajax会调用后端的方法获取数据，显示到浏览器中。

第一步

copy一个同样的 html，并修改数据库，让点击侧边栏会唤起我们自己的html。


定位到 页面加载时就 执行的 js代码： 开始分析

$(function(){
        //初始化系统基础信息
        getType();
        inOutService.getRoleType();
        inOutService.initSystemData_UB();
        inOutService.initSystemData_depot();
        inOutService.initSystemData_account();
        inOutService.initSupplier(); //供应商
        inOutService.initSalesman(); //销售人员
        inOutService.initOutItemList(); //初始化支出项目
        inOutService.initMProperty(); //初始化商品属性
        initTableData();
        inOutService.ininPager();
        inOutService.initForm();
        inOutService.showDepotHeadDetails(1,initPageSize); //初始化时自动查询
        inOutService.bindEvent();//绑定操作事件
    });

通过initTableDate方法,找到了 内部表格字段的设置 ，已经改成功！

然后在html的前面代码部分，找到了 查询条件字段显示，已经修改成功！
旁边的查询 是走ajax的，ajax再去走后端代码，后续需要些。

页面展示过后，要写：点击增加按钮 之后的 页面

点击增加，呈现如下页面，这是改好之后的：

再写 “…按钮” 点击之后的显示

如何把表格中 用户写入的数据 保存到数据库呢？

大体思路是：
前端打包数据------》ajax方法--------》后端controller去完成保存。

找到打包数据的代码：

通过： $.trim( $("#元素id").val() ) 来获取 表头的值 ， 然后把key写成后端认识的key， 打包到以json的格式的字符串infoStr中，传递到ajax去处理。

表格内部的数据是由ajax中的getRows来获取：

前后端整体数据传递流程汇总：

1，前端打包数据 infoStr，它是一个字符串，格式是json格式；url，是字符串，格式是路径；inType，是一个字符换，代表入库类型，格式是普通的3； 把三个变量传给js中的一个var叫inOutService，它里面包含很多function，所以直接调它内部的addDepotHeadAndDetail方法：

2，这个function里面使用ajax发送请求给后端： 注意：前端传过来的url，在ajax中当作url来用，其他两个要再次打包成 string，但是json格式，顺带把rows也带着，这个是获取表格中的数据。

注意：
1）.打成json格式的这些key 不能随便写 info，rows，type都是后端认识的，其他的不行（后端有一个vo类）
2）.rows只能带着前端表格中的数据，与field关系很大，后端能不能认识还要额外注意！！

addDepotHeadAndDetail: function (url,infoStr,type) {
		var self = this;
		if(pageType=="skip") {
			sessionStorage.removeItem("rowInfo");
		}
		this.endAllEdit();
		var rows = $("#materialData").datagrid('getRows');
		$.ajax({
			type:"post",
			url: url,
			contentType:"application/json",
			dataType: "json",
			async :  false,
			data: JSON.stringify({
				info:infoStr,
				rows: JSON.stringify(rows),
				type: type,
			}),
			success: function (tipInfo){
				if(tipInfo){
					if(tipInfo.code!=200){
						$.messager.alert('提示', tipInfo.msg, 'warning');
						for(var i=0; i<rows.length; i++){
							$('#materialData').datagrid('selectRow', i).datagrid('beginEdit', i);
							self.autoReckon();
						}
						return;
					}
					$.messager.alert('提示','保存成功！','info');
					$('#depotHeadDlg').dialog('close');
					var opts = $("#tableData").datagrid('options');
					self.showDepotHeadDetails(opts.pageNumber,opts.pageSize);
				}else {
					$.messager.show({
						title: '错误提示',
						msg: '保存信息失败，请稍后重试!'
					});
				}
			},
			//此处添加错误处理
			error:function() {
				$.messager.alert('提示','保存信息异常，请稍后再试！','error');
				return;
			}
		});
	}

3， 后端controller接到请求以后，也会接收到传递的参数： 看我们后端收到的第一个参数就是body，这是一个单独的Entity，它内部有好几个属性以及get，set方法用来使用！！，然后配合注解@RequestBody，方便ajax调用。

@PostMapping(value = "addDepotHeadAndDetail")
    public Object addDepotHeadAndDetail(@RequestBody DepotHeadVo4Body body, HttpServletRequest request) throws  Exception{
        JSONObject result = ExceptionConstants.standardSuccess();
        String beanJson = body.getInfo();
        String rows = body.getRows();
        Byte type = body.getType();
        bsIntoBoundService.addDepotHeadAndDetail(beanJson,rows, request,type);
        return result;
    }

看下DepotHeadVo4Body这个类：属性：info，rows，type都有，还有其他的，暂时没用到。

public class DepotHeadVo4Body {

    private Long id;

    private String info;

    private String rows;

    private BigDecimal preTotalPrice;

    private Byte type;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getInfo() {
        return info;
    }

    public void setInfo(String info) {
        this.info = info;
    }

    public String getRows() {
        return rows;
    }

    public void setRows(String rows) {
        this.rows = rows;
    }

    public BigDecimal getPreTotalPrice() {
        return preTotalPrice;
    }

    public void setPreTotalPrice(BigDecimal preTotalPrice) {
        this.preTotalPrice = preTotalPrice;
    }

    public Byte getType() {
        return type;
    }

    public void setType(Byte type) {
        this.type = type;
    }
}

看了这么多其实，没多少，就是这里只是把传过来的参数，接受一下，然后调用service：

4， 看Service中如何处理这些参数：
首先先处理beanJson，通过JSONObject.parseObject方法，解析成我们自己的Entity类：BsIntoBound对象，这也是为什么要前端的时候就要把key，写的让后端可用可识别！！！

 public void addDepotHeadAndDetail(String beanJson, String rows, HttpServletRequest request,Byte type) throws Exception {
        /**处理单据主表数据*/
        System.out.println(beanJson);
        BsIntoBound bsIntoBound = JSONObject.parseObject(beanJson, BsIntoBound.class);
        //判断用户是否已经登录过，登录过不再处理
        User userInfo = userService.getCurrentUser();
        bsIntoBound.setCreateUser(userInfo == null ? null : userInfo.getId().toString());
        bsIntoBound.setCreateTime(LocalDateTime.now());
        int allCount = 0;
        Long allPrice = 0L;
        //获取单据编号
        String inSerial = bsIntoBound.getInSerial();
        List<BaIntoBoundDetail> baIntoBoundDetails = baIntoBoundDetailService.saveBaIntoBoundDetailss(rows, inSerial,type);
        for (BaIntoBoundDetail baIntoBoundDetail : baIntoBoundDetails) {
            allCount += baIntoBoundDetail.getIndeCount();
            allPrice += baIntoBoundDetail.getIndeAllmoney().longValue();
        }
        bsIntoBound.setInAllcount(allCount);
        bsIntoBound.setInAllmonry(allPrice);
        bsIntoBound.setInType(type);
        try{
            bsIntoBoundMapper.insertSelective(bsIntoBound);
        }catch(Exception e){
            JshException.writeFail(logger, e);
        }
        logService.insertLog("单据",
                new StringBuffer(BusinessConstants.LOG_OPERATION_TYPE_ADD).append(bsIntoBound.getInSerial()).toString(),
                ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest());
    }