采购订单crud功能
一. 可编辑grid插件
1.1 前台页面准备
主要用的是可编辑的grid
1.1.1 添加窗口
点击添加弹出添加对话框
1.1.2 引入相应插件
<script src="/easyui/plugin/cellEdit/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="/easyui/plugin/cellEdit/jeasyui.extensions.datagrid.editors.js"></script>
<script src="/easyui/plugin/cellEdit/jeasyui.extensions.datagrid.edit.cellEdit.js"></script>
1.1.3 功能实现
//供应商采购员格式化显示
function objFormat(v) {
return v?v.name||v.username:"";
}
//状态格式化显示
function statusFormat(v) {
if(v == 0){
return "<span style='color: #c90f16'>待审</span>";
}else if (v == 1){
return "<span style='color: #348017;'>已审</span>";
}else{
return "<s style='color: #a3af8f;'>作废</s>";
}
}
$(function(){
//获取元素
//数据结构
var datagrid = $("#datagrid");
//高级查询
var searchForm = $("#searchForm");
//编辑对话框
var editDialog = $("#editDialog");
//编辑表单
var editForm = $("#editForm");
//获取事件
$("*[data-method]").on("click",function () {
var methodName = $(this).data("method");
//动态调用
crudMethod[methodName]();
})
crudMethod = {
add(){
$("*[shower]").show();
//打开对话框并居中
editDialog.dialog('open').dialog("center");
editForm.form("clear");
//清空datagrid中的数据
dg.datagrid("loadData",[]);
},
save(){
//保存数据
//准备路径
var url = "/purchasebill/save";
//获取隐藏域id
var purchasebillId = $("#purchasebillId").val();
//如果purchasebillId里面有值,就是修改
if(purchasebillId){
url = "/purchasebill/update?_cmd=update";
}
//easyui发送请求的方式
editForm.form('submit', {
url:url,
//param: 给它加什么,就传什么
onSubmit: function(param){
//获取所有行
var rows = dg.datagrid("getRows");
for(var i=0;i<rows.length;i++){
var r = rows[i];
param[`items[${i}].product.id`] = r.product.id;
param[`items[${i}].num`] = r.num
param[`items[${i}].price`] = r.price;
param[`items[${i}].descs`] = r.descs;
}
//验证
return $(this).form('validate');
},
//成功后的回调函数
success:function(data){
//easyui不会做处理,需要自己手动转换成json格式
var result = JSON.parse(data);
if (result.success){
//刷新页面
datagrid.datagrid("reload");
}else {
$.messager.alert('提示',`添加失败,${result.msg}`,"error");
}
crudMethod.close()
}
});
},
update(){
//修改数据
var row = datagrid.datagrid("getSelected");
//判断是否选中
if(!row){
//如果没有选中,提示
$.messager.alert('提示','请选择需要修改数据',"warning");
return;
}
//隐藏密码框
$("*[shower]").hide();
//禁用密码框
$("*[shower] >td>input").textbox("disable");
//打开对话框,居中
editDialog.dialog('open').dialog("center");
//清空表单
editForm.form("clear");
//供应商,采购员回显
if(row.supplier){
row["supplier.id"] = row.supplier.id;
}
if(row.buyer){
row["buyer.id"] = row.buyer.id;
}
//数据回显,读取数据到表单中
editForm.form("load",row);
//回显grid中的数据,复制一份
var items = [...row.items];
dg.datagrid("loadData",items);
},
delete(){
//获取选中的行
var row = datagrid.datagrid("getSelected");
//判断是否选中
if(!row){
//如果没有选中,提示
$.messager.alert('提示','请选择需要删除的行',"warning");
return;
}
//确定是否删除
$.messager.confirm('确认','确定删除吗?',function (r) {
if(r){
//ajax请求
$.get("/purchasebill/delete",{id:row.id},function (result) {
//如果成功,重新加载
if(result.success){
datagrid.datagrid("reload");
}else {
//如果失败,错误提示
$.messager.alert('提示',`删除失败,${result.msg}`,"error");
}
})
}
});
},
close(){
editDialog.dialog("close");
},
search(){
var params = searchForm.serializeObject();
datagrid.datagrid("load",params);
}
};
//编辑grid--------------------------------------------------
/**
* dg:编辑grid控件
* defaultRow:默认行
* insertPosition:插入的位置 top第一行 borrom最后一行
*/
var dg = $("#itemsGrid"),
defaultRow = { product: "", productColor: "", productPic: "", num: 1, price: 0, amount: 0, descs: "" },
insertPosition = "bottom";
/**
* grid行的初始化工作
* 责任分明,分成了几块来写
*/
var dgInit = function () {
//列数据
var getColumns = function () {
var result = [];
/**
* 控件属性
* editor:可编辑
* options:列属性
*/
var normal = [
{
field: 'product', title: '产品', width: 100,
editor: {
type: "combobox",
options: {
required: true,
valueField:'id',textField:'name',panelHeight:'auto',url:'/product/list'
}
},
//formatter是列的属性,不要放错位置
formatter:objFormat
},
{
field: 'productColor', title: '颜色', width: 100,
//v:格子中数据 r:行数据 i:索引
formatter:function (v,r,i){
if(r && r.product){
return `<div style="width: 20px;height: 20px;background-color:${r.product.color}"></div>`;
}
return "";
}
},
{
field: 'productPic', title: '图片', width: 100,
formatter:function (v,r,i) {
if(r && r.product){
return `<image src="${r.product.smallPic}" style="width: 50px;height: 50px;" />`;
}
return "";
}
},
{
field: 'num', title: '数量', width: 100,
editor: {
type: "numberbox",
options: {
//保留两位小数
precision:2,
required: true
}
}
},
{
field: 'price', title: '价格', width: 100,
editor: {
type: "numberbox",
options: {
precision:2,
required: true
}
}
},
{
field: 'amount', title: '小计', width: 100,
formatter:function (v,r,i) {
if(r.num && r.price){
//toFixed:保留两位小数
return (r.num*r.price).toFixed(2);
}
}
},
{
field: 'descs', title: '备注', width: 100,
editor: {
type: "text",
}
}
];
result.push(normal);
return result;
};
var options = {
idField: "ID",
rownumbers: true,
fitColumns: true,
fit: true,
border: true,
singleSelect: true,
columns: getColumns(),
bodyCls:"itemsBody",
toolbar:"#itemsButtons",
//表示开启单元格编辑功能
enableCellEdit: true
};
//创建grid
dg.datagrid(options);
};
//获取插入行位置
var getInsertRowIndex = function () {
return insertPosition == "top" ? 0 : dg.datagrid("getRows").length;
}
//绑定事件
var buttonBindEvent = function () {
//添加
$("#btnInsert").click(function () {
var targetIndex = getInsertRowIndex(), targetRow = $.extend({}, defaultRow, { ID: $.util.guid() });
dg.datagrid("insertRow", { index: targetIndex, row: targetRow });
dg.datagrid("editCell", { index: 0, field: "Code" });
});
//删除
$("#btnRemove").click(function () {
//获取删除行数据
var row = dg.datagrid("getSelected");
//获取要删除行的索引
var index = dg.datagrid("getRowIndex",row);
//根据索引删除它
dg.datagrid("deleteRow",index)
});
};
//执行对应方法事件
dgInit(); buttonBindEvent();
})
1.2 采购订单后台
后台之前就已经准备好了
组合就是强聚合(整体与部分不可分割)
聚合就是双向的多对一,一对多
组合关系一般都会配置级联
组合关系保存要求:双方都可以找到对方
1.2.1 级联配置
Purchasebill 订单
//组合关系 级联用最高级的级联
@OneToMany(cascade = CascadeType.ALL, mappedBy = "bill", fetch = FetchType.LAZY, orphanRemoval = true)
private List<Purchasebillitem> items = new ArrayList<Purchasebillitem>();
Purchasebillitem 明细
@ManyToOne(fetch = FetchType.LAZY,optional = false)
@JoinColumn(name = "bill_id")
@JsonIgnore //忽略
private Purchasebill bill ;
1.2.2 PurchasebillController 控制层
@ModelAttribute("editPurchasebill")
public Purchasebill beforUpdate(Long id,String _cmd){
//修改的时候才到数据库去取,_cmd:前台传了一个修改的指令参数
if(id!=null && "update".equals(_cmd)){
Purchasebill purchasebill = purchasebillService.findOne(id);
//解决n-to-n问题
purchasebill.setSupplier(null);
purchasebill.setBuyer(null);
purchasebill.getItems().clear();
return purchasebill;
}
return null;
}
//添加和修改路径分开
@RequestMapping("/save")
@ResponseBody
public JsonResult save(Purchasebill purchasebill){
//调用saveOrUpdate
return saveOrUpdate(purchasebill);
}
//添加和修改路径分开
@RequestMapping("/update")
@ResponseBody
public JsonResult update(@ModelAttribute("editPurchasebill")Purchasebill purchasebill){
//调用saveOrUpdate
return saveOrUpdate(purchasebill);
}
//添加,修改方法
private JsonResult saveOrUpdate(Purchasebill purchasebill){
try {
//设置当前用户
Employee loginUser = UserContext.getUser();
purchasebill.setInputUser(loginUser);
//级联保存必须双方都能找到对方,查看双方是否都能找到对方
List<Purchasebillitem> items = purchasebill.getItems();
System.out.println("一方拿、找多方:"+items);
//准备总金额,总数量
BigDecimal totalAmount = new BigDecimal(0);
BigDecimal totalNum = new BigDecimal(0);
//多方
for (Purchasebillitem item : items) {
System.out.println("多方找一方" + item.getBill());
item.setBill(purchasebill);
//小计
item.setAmount(item.getNum().multiply(item.getPrice()));
//计算总金额,总数量
totalAmount = totalAmount.add(item.getAmount());
totalNum = totalNum.add(item.getNum());
//总金额总数量放到采购订单中
purchasebill.setTotalAmount(totalAmount);
purchasebill.setTotalNum(totalNum);
}
purchasebillService.save(purchasebill);
return new JsonResult();
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
}
1.3 修改数据回显
数据回显
//供应商,采购员回显
if(row.supplier){
row["supplier.id"] = row.supplier.id;
}
if(row.buyer){
row["buyer.id"] = row.buyer.id;
}
//数据回显,读取数据到表单中
editForm.form("load",row);
//回显grid中的数据,复制一份
var items = [...row.items];
dg.datagrid("loadData",items);
1.4 删除
//删除
$("#btnRemove").click(function () {
//获取删除行数据
var row = dg.datagrid("getSelected");
//获取要删除行的索引
var index = dg.datagrid("getRowIndex",row);
//根据索引删除它
dg.datagrid("deleteRow",index)
});