day54_BOS專案_06

摘要： 今天內容安排： 1、業務受理環節分析 2、建立業務受理環節對應的資料表（業務通知單、工單、工作單） 3、實現業務受理、自動分單 4、資料網格datagrid的編輯功能的使用 5、基於資料網格datagrid...

• 今天內容安排：
  • 1、業務受理環節分析
  • 2、建立業務受理環節對應的資料表（業務通知單、工單、工作單）
  • 3、實現業務受理、自動分單
  • 4、資料網格datagrid的編輯功能的使用
  • 5、基於資料網格datagrid的編輯功能實現工作單快速錄入功能
  • 6、演示許可權控制demo

1、業務受理分析

• 受理環節，是宅急送業務的開始，作為服務前端，客戶通過電話、網路等多種方式進行委託， 業務受理員 通過與 客戶 交流，獲取客戶的服務需求和具體委託資訊，將服務指令輸入我司服務系統。
• 客戶通過打電話的方式進行物流委託，一個客戶的委託資訊對應一個 業務通知單 。
• 系統通過客戶的取件地址，自動匹配到一個取派員，為取派員產生一個任務，這個任務就是一個 工單 。
• 工作單 ：描述貨物和物流資訊的單據。就是我們寄快遞的時候，取派員讓我們填寫的單子。如下圖所示：
  
• 業務受理如下圖所示：
  

第一步：根據提供的 業務受理.pdm 檔案生成建表文件 bos_qp.sql

第二步：由於業務受理.pdm 檔案中有偽表，所以我們需要修改生成的建表文件，修改如下圖所示：

第三步：我們根據 建表文件 bos_qp.sql使用 Navicat for SQL/">MySQL 生成對應的表，生成的表為： qp_noticebill(業務通知單)、qp_workbill(工單)、qp_workordermanage(工作單) ，注意：由於表的數量及表的關係增多，我們要有意識的檢查生成的表中外來鍵名是否有重複，有重複的我們需要進行修改。

第四步：我們使用MyEclipse中Hibernate反轉引擎外掛生成對應的實體類以及對應的xxx.hbm.xml檔案

詳細操作步驟連結： ofollow,noindex">https://www.cnblogs.com/chenmingjun/p/9733326.html

第六步：對實體類的欄位進行註釋

2、實現業務受理、自動分單

2.1、在crm中擴充套件提供根據手機號查詢客戶資訊的方法並實現

CustomerService介面：

package cn.itcast.crm.service;

import java.util.List;

import cn.itcast.crm.domain.Customer;

// 客戶服務介面 
public interface CustomerService {
// 未關聯定區客戶
public List<Customer> findnoassociationCustomers();

// 查詢已經關聯指定定區的客戶
public List<Customer> findhasassociationCustomers(String decidedZoneId);

// 將未關聯定區客戶關聯到定區上
public void assignCustomersToDecidedZone(Integer[] customerIds, String decidedZoneId);

// 根據手機號查詢客戶資訊
public Customer findCustomerByTelephone(String telephone);
}

CustomerServiceImpl實現類：

public Customer findCustomerByTelephone(String telephone) {
Session session = HibernateUtils.openSession();
session.beginTransaction();

String hql = "from Customer where telephone=?";
List<Customer> customers = session.createQuery(hql).setParameter(0, telephone).list();

session.getTransaction().commit();
session.close();

if (customers != null && customers.size() > 0) {
return customers.get(0);
}
return null;
}

2.2、在bos中實現業務受理、自動分單

注意：需要將crm中介面擴充套件的方法複製到bos的介面中

業務受理頁面：WEB-INF/pages/qupai/noticebill_add.jsp

第一步：為手機號輸入框繫結 離焦事件 ，傳送ajax請求，提交輸入的手機號到Action中，在Action中呼叫crm的代理物件，訪問crm服務，根據手機號查詢客戶資訊，返回json資料

<td>來電號碼:</td>
<td>
<input type="text" class="easyui-validatebox" name="telephone" required="true"/>
<script type="text/javascript">
$(function() {
$("input[name=telephone]").blur(function() {
// alert("曉藝微信把我刪了，想o(╥﹏╥)o");
// 獲取輸入框的值（手機號）
var telephone = this.value; 
// 傳送ajax請求，帶上引數：手機號
var url = "${pageContext.request.contextPath}/noticebillAction_findCustomerByTelephone.action";
$.post(url, {"telephone":telephone}, function(data) {
alert(data);
}, 'json');
});
});
</script>
</td>

瀏覽器效果截圖如下：

第二步：建立新的NoticebillAction，提供findCustomerByTelephone()方法， 加註解、加註釋、繼承BaseAction<Noticebill>、配置struts.xml

package com.itheima.bos.web.action;

import java.io.IOException;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.itheima.bos.domain.Noticebill;
import com.itheima.bos.web.action.base.BaseAction;

import cn.itcast.crm.domain.Customer;

/**
 * 業務通知單設定
 * @author Bruce
 *
 */
@Controller
@Scope("prototype")
public class NoticebillAction extends BaseAction<Noticebill> {

/**
* 呼叫代理物件，根據手機號查詢客戶資訊
* @return
* @throws IOException 
*/
public String findCustomerByTelephone() throws IOException {
Customer customer = remoteProxy.findCustomerByTelephone(model.getTelephone());
String[] excludes = new String[] {};
this.writeObject2Json(customer, excludes);
return "none"; 
// 注意：我們發的是ajax請求，返回的是json資料，解析的也是json資料，所以返回的是"none"
// 如果返回的是"list"，就是說我們查詢到的結果變成HTML頁面，我用解析json資料的方式根本解析不出來啊！
}
}

第三步：完善頁面中ajax方法的回撥函式

<td>來電號碼:</td>
<td>
<input type="text" class="easyui-validatebox" name="telephone" required="true"/>
<script type="text/javascript">
$(function() {
$("input[name=telephone]").blur(function() {
// alert("曉藝微信把我刪了，想o(╥﹏╥)o");
// 獲取輸入框的值（手機號）
var telephone = this.value;
// 傳送ajax請求，帶上引數：手機號
var url = "${pageContext.request.contextPath}/noticebillAction_findCustomerByTelephone.action";
$.post(url, {"telephone":telephone}, function(data) {
// alert(data);
if (data != null) {
// 查詢到客戶，可以進行回顯
var customerId = data.id;
var customerName = data.name;
var customerAddress = data.address;
$("input[name=customerId]").val(customerId);
$("input[name=customerName]").val(customerName);
$("input[name=delegater]").val(customerName);
$("input[name=pickaddress]").val(customerAddress);
} else {
// 清除資料
var customerId = data.id;
var customerName = data.name;
var customerAddress = data.address;
$("input[name=customerId]").val("");
$("input[name=customerName]").val("");
$("input[name=delegater]").val("");
$("input[name=pickaddress]").val("");
}
}, 'json');
});
});
</script>
</td>

第四步：為“新單”按鈕繫結儲存事件

<script type="text/javascript">
$(function() {
$("body").css({
visibility : "visible"
});

// 對save按鈕繫結點選事件
$('#save').click(function() {
// 對form表單進行校驗
if ($('#noticebillForm').form('validate')) {
$('#noticebillForm').submit();
}
});
});
</script>

第五步：在NoticebillAction中提供add()方法，儲存一個業務通知單資料，並根據取件地址嘗試自動分單， 注入NoticebillService、加註解、加註釋、等等
NoticebillAction.java

/**
* 儲存業務通知單，並根據取件地址嘗試自動分單
* @return
*/
public String add() {
// 從session中獲取當前登入使用者，即業務員（業務受理員）
User user = BOSContext.getLoginUser();
// 設定使用者
model.setUser(user);
noticebillService.save(model);
return "addUI";
}

第六步：在crm服務中擴充套件方法，根據取件地址查詢定區id

public String findDecidedzoneIdByPickaddress(String address) {
Session session = HibernateUtils.openSession();
session.beginTransaction();

String hql = "select decidedzone_id from Customer where address=?";
List<String> decidedzoneId = session.createQuery(hql).setParameter(0, address).list();

session.getTransaction().commit();
session.close();

if (decidedzoneId != null && decidedzoneId.size() > 0) {
return decidedzoneId.get(0);
}
return null;
}

第七步：在NoticebillService中提供save方法

NoticebillServiceImpl.java

package com.itheima.bos.service.impl;

import java.sql.Timestamp;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.itheima.bos.crm.CustomerService;
import com.itheima.bos.dao.IDecidedzoneDao;
import com.itheima.bos.dao.INoticebillDao;
import com.itheima.bos.dao.IWorkbillDao;
import com.itheima.bos.domain.Decidedzone;
import com.itheima.bos.domain.Noticebill;
import com.itheima.bos.domain.Staff;
import com.itheima.bos.domain.Workbill;
import com.itheima.bos.service.INoticebillService;

@Service
@Transactional
public class NoticebillServiceImpl implements INoticebillService {

// 注入業務通知單dao
@Autowired
private INoticebillDao noticebillDao;

// 注入遠端訪問的代理物件
@Autowired
private CustomerService remoteProxy;

// 注入定區dao
@Autowired
private IDecidedzoneDao decidedzoneDao;

// 注入工單dao
@Autowired
private IWorkbillDao workbillDao;

/**
* 儲存業務通知單，並根據取件地址嘗試自動分單
*/
public void save(Noticebill model) {
// 先儲存業務通知單（多個業務通知單屬於一個取派員）
noticebillDao.save(model);// 持久化物件

// 獲取取件地址
String pickaddress = model.getPickaddress();
// 根據取件地址查詢定區id
String decidedzoneId = remoteProxy.findDecidedzoneIdByPickaddress(pickaddress);
if (decidedzoneId != null) {
// 查詢到定區id，可以進行自動分單
Decidedzone decidedzone = decidedzoneDao.findById(decidedzoneId); // 持久化物件
// 獲取取派員
Staff staff = decidedzone.getStaff();
// 設定業務通知單關聯匹配到的取派員
model.setStaff(staff);
// 設定分單型別為“自動分單”
model.setOrdertype("自動分單");

// 為取派員建立一個工單並設定值
Workbill workbill = new Workbill();
workbill.setNoticebill(model); // 工單關聯業務通知單
workbill.setStaff(staff); // 工單關聯取派員
workbill.setType("新單");
workbill.setPickstate("未取件");
workbill.setBuildtime(new Timestamp(System.currentTimeMillis()));
workbill.setAttachbilltimes(0);
workbill.setRemark(model.getRemark());

// 儲存工單
workbillDao.save(workbill);

// 呼叫簡訊平臺服務，給取派員傳送簡訊
// ......
} else {
// 沒有查詢到定區id，設定分單型別為“人工分單”（進入排程環節）
model.setOrdertype("人工分單");
// 排程
// ......
}
}
}

3、資料網格datagrid 的編輯功能的使用

• 列（Column）屬性：資料網格（DataGrid） 的列（Column）是一個數組物件，它的每個元素也是一個數組。元素陣列的元素是一個配置物件，它定義了每個列的欄位。

  • 資料網格的編輯功能是以 列 為單位的。
  • 即：通過資料網格的 列屬性editor 開啟指定列的編輯功能。如下圖所示：
    

• 資料網格的方法：

  • 插入一行：insertRow
  • 刪除一行：deleteRow
  • 開啟編輯狀態：beginEdit
  • 結束編輯狀態：endEdit
  • 獲得選中行的索引：getRowIndex
  • 獲得選中的第一行：getSelected
  • 獲得選中的所有行：getSelections

• 資料網格的事件：

  • 結束編輯狀態時觸發：onAfterEdit

示例程式碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid_edit---資料網格的編輯功能</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h3>方式三：通過js程式碼，使用外掛提供的API動態建立datagrid，大量使用</h3>
<table id="grid"></table>
<script type="text/javascript">
$(function() {
// 全域性的行索引
var index;
$("#grid").datagrid({
columns:[[ // 定義標題行所有的列，是一個二維陣列
{field:'id',title:'編號',checkbox:true}, // 是否複選框
{field:'name',title:'姓名',editor:{ // 指定當前列具有編輯功能
type:'validatebox',
options:{
}
}},
{field:'age',title:'年齡',editor:{ // 指定當前列具有編輯功能
type:'validatebox',
options:{
}
}}
]],
url:'/bos19/json/data.json', // 指定URL地址，datagrid控制元件會自動傳送ajax請求獲取資料
onAfterEdit:function(rowIndex,rowData,changes) { // 資料網格的事件：當前行結束編輯狀態時觸發
alert("更新後的姓名為：" + rowData.name);
},
toolbar:[ // 工具欄按鈕
{text:'儲存',iconCls:'icon-save',handler:function() {
// 結束當前行的編輯狀態
$("#grid").datagrid("endEdit",index);
}},
{text:'新增',iconCls:'icon-add',handler:function() {
// 動態新增一行
$("#grid").datagrid("insertRow",{
index:0, // 在索引為0的位置插入，即在第一行插入
row:{}// 空的json表示空行
});
// 讓第一行開啟編輯狀態
index = 0;
$("#grid").datagrid("beginEdit",index);
}},
{text:'刪除',iconCls:'icon-remove',handler:function() {
// 獲得當前選中的行
var row = $("#grid").datagrid("getSelected");
// 獲取當前選中的行的索引
index = $("#grid").datagrid("getRowIndex",row);
// 刪除當前行
$("#grid").datagrid("deleteRow",index);
}},
{text:'修改',iconCls:'icon-edit',handler:function() {
// 獲得當前選中的所有行
// $("#grid").datagrid("getSelections");
// 獲得當前選中的行
var row = $("#grid").datagrid("getSelected");
// 獲取當前選中的行的索引
index = $("#grid").datagrid("getRowIndex",row);
// 開啟當前選中行的編輯狀態
$("#grid").datagrid("beginEdit",index);
}}
],
singleSelect:true,// 是否可以單選
pagination:true,// 分頁條
pageList:[3,5,7]// 自定義分頁條中的下拉框選項
});
});
</script>
</body>
</html>

示例動圖如下：

4、基於資料網格datagrid 的編輯功能實現工作單快速錄入功能

第一步：在quickworkorder.jsp頁面中增加發送ajax請求，提交當前結束編輯行的資料到伺服器，完成儲存操作的程式碼，如下：

位置：/bos19/WebContent/WEB-INF/pages/qupai/quickworkorder.jsp

// 傳送ajax請求，提交當前結束編輯行的資料到伺服器，完成儲存操作
var url = "${pageContext.request.contextPath}/workordermanageAction_add.action";
$.post(url,rowData,function(data) {
if (data == 1) {
// 工作單資訊錄入成功
$.messager.alert("提示資訊","工作單資訊錄入成功！","warning");
} else {
// 工作單資訊錄入失敗
$.messager.alert("提示資訊","工作單資訊錄入失敗！","warning");
}
});

第二步：建立新的WorkordermanageAction，提供add()方法， 加註解、加註釋、繼承BaseAction<Workordermanage>、配置struts.xml、等等

package com.itheima.bos.web.action;

import java.io.IOException;

import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.itheima.bos.domain.Workordermanage;
import com.itheima.bos.web.action.base.BaseAction;

/**
 * 工作單設定
 * @author Bruce
 *
 */
@Controller
@Scope("prototype")
public class WorkordermanageAction extends BaseAction<Workordermanage> {

public String add() throws IOException {
String flag = "1";
try {
// 工作單資訊錄入成功
workordermanageService.save(model);
} catch (Exception e) {
// 工作單資訊錄入失敗
flag = "0";
}
// 響應給瀏覽器一個狀態碼，這種手法常用
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print(flag);
return "none";
}
}