效果：
image.png
步骤一：customer.html页面
1.
1 .先设计头的样式
image.png
image.png
image.png
产品grid
image.png
image.png
联系人grid:
image.png
image.png
逻辑代码：
image.png
image.png
<#include "../include/header.html">
<script type="text/javascript">
viewModel = kendo.observable({
model: {},
/* 添加产品记录*/
add_product: function () {
$('#productGrid').data('kendoGrid').addRow();
},
/* 添加联系人记录*/
add_contact: function () {
$('#contactGrid').data('kendoGrid').addRow();
},
/*删除填写的产品记录*/
remove_product: function () {
var grid = $("#productGrid").data("kendoGrid"),
selections = grid.selectedDataItems();
for (var i = 0; i < selections.length; i++) {
if (selections[i].paymentLineId != "" && selections[i].paymentLineId != null) {
if (headStatus != 'NEW') {
kendo.ui.showInfoDialog({
message: $l('已创建的数据不能删除！')
});
return;
}
}
}
Hap.deleteGridSelection({
grid: $("#productGrid")
});
},
/* 删除填写的联系人记录*/
remove_contact: function () {
var grid = $("#contactGrid").data("kendoGrid"),
selections = grid.selectedDataItems();
for (var i = 0; i < selections.length; i++) {
if (selections[i].paymentLineId != "" && selections[i].paymentLineId != null) {
if (headStatus != 'NEW') {
kendo.ui.showInfoDialog({
message: $l('已创建的数据不能删除！')
});
return;
}
}
}
Hap.deleteGridSelection({
grid: $("#contactGrid")
});
},
});
</script>
<body>
<div id="page-content">
<!--客户信息表-->
<form class="form-horizontal">
<div class="row">
<!-- 客户编码 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.customercode"/></label>
<div class="col-sm-8">
<input type="text" id="customerCode" style="width: 100%"
data-bind="value:model.customerCode" class="k-textbox">
<script>kendo.bind($('#customerCode'), viewModel);</script>
</div>
</div>
</div>
<!-- 客户名称 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.fullname"/></label>
<div class="col-sm-8">
<input type="text" id="fullName" style="width: 100%"
data-bind="value:model.fullName" class="k-textbox">
<script>kendo.bind($('#fullName'), viewModel);</script>
</div>
</div>
</div>
<!-- 客户英文名称 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.englishname"/></label>
<div class="col-sm-8">
<input type="text" id="englishName" style="width: 100%"
data-bind="value:model.englishName" class="k-textbox">
</div>
</div>
</div>
<!-- 统一社会信用代码 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.creditcode"/></label>
<div class="col-sm-8">
<input type="text" id="creditCode" style="width: 100%"
data-bind="value:model.creditCode" class="k-textbox">
</div>
</div>
</div>
</div>
<div class="row">
<!-- 客户手机 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.phone"/></label>
<div class="col-sm-8">
<input type="text" id="phone" style="width: 100%"
data-bind="value:model.phone" class="k-textbox">
</div>
</div>
</div>
<!-- 产品总金额 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.customeramount"/></label>
<div class="col-sm-8">
<input type="text" id="customerAmount" style="width: 100%"
data-bind="value:model.customerAmount" class="k-textbox">
</div>
</div>
</div>
<!-- 税号 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.dutyparagraph"/></label>
<div class="col-sm-8">
<input type="text" id="dutyParagraph" style="width: 100%"
data-bind="value:model.dutyParagraph" class="k-textbox">
</div>
</div>
</div>
<!-- 网址 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.website"/></label>
<div class="col-sm-8">
<input type="text" id="website" style="width: 100%"
data-bind="value:model.website" class="k-textbox">
</div>
</div>
</div>
</div>
<div class="row">
<!-- 上级客户id -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.parentcustomersid"/></label>
<div class="col-sm-8">
<input type="text" id="parentCustomersId" style="width: 100%"
data-bind="value:model.parentCustomersId" class="k-textbox">
</div>
</div>
</div>
<!-- 是否上市 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.islisted"/></label>
<div class="col-sm-8">
<input type="text" id="isListed" style="width: 100%"
data-bind="value:model.isListed" class="k-textbox">
</div>
</div>
</div>
</div>
<div class="row">
<!-- 国家 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addresscountry"/></label>
<div class="col-sm-8">
<input type="text" id="addressCountry" style="width: 100%"
data-bind="value:model.addressCountry" class="k-textbox">
</div>
</div>
</div>
<!-- 省份 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addressprovince"/></label>
<div class="col-sm-8">
<input type="text" id="addressProvince" style="width: 100%"
data-bind="value:model.addressProvince" class="k-textbox">
</div>
</div>
</div>
<!-- 城市 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addresscity"/></label>
<div class="col-sm-8">
<input type="text" id="addressCity" style="width: 100%"
data-bind="value:model.addressCity" class="k-textbox">
</div>
</div>
</div>
<!-- 县区-->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addresszone"/></label>
<div class="col-sm-8">
<input type="text" id="addressZone" style="width: 100%"
data-bind="value:model.addressZone" class="k-textbox">
</div>
</div>
</div>
</div>
<div class="row">
<!-- 其他描述 -->
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-2 control-label"><@spring.message
"customer.otherdescription"/></label>
<div class="col-sm-10">
<TEXTAREA type="text" id="otherDescription" style="width: 100%"
data-bind="value:model.otherDescription" class="k-textbox"></TEXTAREA>
</div>
</div>
</div>
<!-- 详情地址 -->
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-2 control-label"><@spring.message
"customer.addressdetails"/></label>
<div class="col-sm-10">
<input type="text" id="addressDetails" style="width: 100%"
data-bind="value:model.addressDetails" class="k-textbox">
</div>
</div>
</div>
</div>
<div class="text-right" style="bottom: 20px;/*position: fixed;*/ right: 85px; float: right; background: #fff;">
<span class="btn btn-success" id="saveGrid" type="submit"><@spring.message "hap.save"/></span>
<span class="btn btn-success" id="closeWin" type="button"><@spring.message "hap.cancel"/></span>
</div>
</form>
<!-- 产品信息-->
<span id="toolbar-btn_add_product" class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;"
data-bind="click:add_product"><@spring.message "hap.new"/></span>
<span id="toolbar-btn_remove_product" class="btn btn-success k-grid-changes" data-bind="click:remove_product"
style="float:left;margin-right:5px;"><@spring.message "hap.delete"/></span>
<script>kendo.bind($('#toolbar-btn_add_product'), viewModel);</script>
<script>kendo.bind($('#toolbar-btn_remove_product'), viewModel);</script>
<script>kendo.bind($('#query-form'), viewModel);</script>
<div style="clear:both">
<div id="productGrid"></div>
</div>
<!--联系人-->
<span id="toolbar-btn_add_contact" class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;"
data-bind="click:add_contact"><@spring.message "hap.new"/></span>
<span id="toolbar-btn_remove_contact" class="btn btn-success k-grid-changes" data-bind="click:remove_contact"
style="float:left;margin-right:5px;"><@spring.message "hap.delete"/></span>
<script>kendo.bind($('#toolbar-btn_add_contact'), viewModel);</script>
<script>kendo.bind($('#toolbar-btn_remove_contact'), viewModel);</script>
<script>kendo.bind($('#query-form'), viewModel);</script>
<div style="clear:both">
<div id="contactGrid"></div>
</div>
</div>
<!--产品信息-->
<script type="text/javascript">
Hap.initEnterQuery('#query-form', viewModel.query);
var BaseUrl = _basePath;
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: BaseUrl + "/hcrm/product/query",
type: "POST",
dataType: "json"
},
update: {
url: BaseUrl + "/hcrm/product/submit",
type: "POST",
contentType: "application/json"
},
destroy: {
url: BaseUrl + "/hcrm/product/remove",
type: "POST",
contentType: "application/json"
},
create: {
url: BaseUrl + "/hcrm/product/submit",
type: "POST",
contentType: "application/json"
},
parameterMap: function (options, type) {
if (type !== "read" && options.models) {
var datas = Hap.prepareSubmitParameter(options, type)
return kendo.stringify(datas);
} else if (type === "read") {
return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
}
}
},
batch: true,
serverPaging: true,
pageSize: 10,
schema: {
data: 'rows',
total: 'total',
model: {
id: "productId",
fields: {}
}
}
});
$("#productGrid").kendoGrid({
dataSource: dataSource,
resizable: true,
scrollable: true,
navigatable: false,
selectable: 'multiple, rowbox',
dataBound: function () {
if (parent.autoResizeIframe) {
parent.autoResizeIframe('${RequestParameters.functionCode!}')
}
},
pageable: {
pageSizes: [5, 10, 20, 50],
refresh: true,
buttonCount: 5
},
columns: [
/* {
field: "productId",
title: '<@spring.message "product.productid"/>',
width: 120
},*/
{
field: "customerId",
title: '<@spring.message "product.customerid"/>',
width: 120
},
{
field: "productType",
title: '<@spring.message "product.producttype"/>',
width: 120
},
{
field: "levelFirst",
title: '<@spring.message "product.levelfirst"/>',
width: 120
},
{
field: "levelSecond",
title: '<@spring.message "product.levelsecond"/>',
width: 120
},
{
field: "manDay",
title: '<@spring.message "product.manday"/>',
width: 120
},
{
field: "price",
title: '<@spring.message "product.price"/>',
width: 120
},
{
field: "totalPrice",
title: '<@spring.message "product.totalprice"/>',
width: 120
},
],
autoBind: false,
editable: true
});
</script>
/*联系人*/
<script type="text/javascript">
Hap.initEnterQuery('#query-form', viewModel.query);
var BaseUrl = _basePath;
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: BaseUrl + "/hcrm/customer/contact/query",
type: "POST",
dataType: "json"
},
update: {
url: BaseUrl + "/hcrm/customer/contact/submit",
type: "POST",
contentType: "application/json"
},
destroy: {
url: BaseUrl + "/hcrm/customer/contact/remove",
type: "POST",
contentType: "application/json"
},
create: {
url: BaseUrl + "/hcrm/customer/contact/submit",
type: "POST",
contentType: "application/json"
},
parameterMap: function (options, type) {
if (type !== "read" && options.models) {
var datas = Hap.prepareSubmitParameter(options, type)
return kendo.stringify(datas);
} else if (type === "read") {
return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
}
}
},
batch: true,
serverPaging: true,
pageSize: 10,
schema: {
data: 'rows',
total: 'total',
model: {
id: "contactId",
fields: {}
}
}
});
$("#contactGrid").kendoGrid({
dataSource: dataSource,
resizable: true,
scrollable: true,
navigatable: false,
selectable: 'multiple, rowbox',
dataBound: function () {
if (parent.autoResizeIframe) {
parent.autoResizeIframe('${RequestParameters.functionCode!}')
}
},
pageable: {
pageSizes: [5, 10, 20, 50],
refresh: true,
buttonCount: 5
},
columns: [
/* {
field: "contactId",
title: '<@spring.message "customercontact.contactid"/>',
width: 120
},*/
{
field: "customerId",
title: '<@spring.message "customercontact.customerid"/>',
width: 120
},
{
field: "contactType",
title: '<@spring.message "customercontact.contacttype"/>',
width: 120
},
{
field: "name",
title: '<@spring.message "customercontact.name"/>',
width: 120
},
{
field: "sex",
title: '<@spring.message "customercontact.sex"/>',
width: 120
},
{
field: "department",
title: '<@spring.message "customercontact.department"/>',
width: 120
},
{
field: "position",
title: '<@spring.message "customercontact.position"/>',
width: 120
},
{
field: "phone",
title: '<@spring.message "customercontact.phone"/>',
width: 120
},
{
field: "tel",
title: '<@spring.message "customercontact.tel"/>',
width: 120
},
{
field: "email",
title: '<@spring.message "customercontact.email"/>',
width: 120
},
{
field: "addressCountry",
title: '<@spring.message "customercontact.addresscountry"/>',
width: 120
},
{
field: "addressProvince",
title: '<@spring.message "customercontact.addressprovince"/>',
width: 120
},
{
field: "addressCity",
title: '<@spring.message "customercontact.addresscity"/>',
width: 120
},
{
field: "addressZone",
title: '<@spring.message "customercontact.addresszone"/>',
width: 120
},
{
field: "addressDetails",
title: '<@spring.message "customercontact.addressdetails"/>',
width: 120
},
{
field: "addressZipCode",
title: '<@spring.message "customercontact.addresszipcode"/>',
width: 120
},
],
autoBind: false,
editable: true
});
</script>
<script>
function deleteData() {
Hap.deleteGridSelection({
grid: $('#codeValueGrid')
});
}
$("#closeWin").click(function () {
window.parent.$("#newWin").data("kendoWindow").close();
});
$("#saveGrid").click(function () {
viewModel.model.__status = 'add';
Hap.submitForm({
url: '${base.contextPath}/hcrm/customer/submit',
formModel: viewModel.model,
grid: {"productList": $("#productGrid"), "contactList": $("#contactGrid")},
success: function (data) {
alert("成功");
}
});
});
</script>
</body>
</html>
步骤二：java后台代码
Customer.java
image.png
@Children
@Transient
private List<CustomerContact> contactList;
@Children
@Transient
private List<Product> productList;
CustomerService.java
package wht.customer.service;
import com.hand.hap.core.IRequest;
import com.hand.hap.core.ProxySelf;
import com.hand.hap.system.service.IBaseService;
import wht.customer.dto.Customer;
import java.util.List;
public interface ICustomerService extends IBaseService<Customer>, ProxySelf<ICustomerService> {
/**
* 头行结构
*/
public List<Customer> batchUpdate(IRequest request, List<Customer> customers);
public Customer creatCustom(Customer customer);
public Customer updateCustom(Customer customer);
}
CustomerServiceImpl.java
package wht.customer.service.impl;
import com.github.pagehelper.PageHelper;
import com.hand.hap.core.IRequest;
import com.hand.hap.system.service.impl.BaseServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import wht.customer.dto.Customer;
import wht.customer.dto.CustomerContact;
import wht.customer.dto.Product;
import wht.customer.mapper.CustomerContactMapper;
import wht.customer.mapper.CustomerMapper;
import wht.customer.mapper.ProductMapper;
import wht.customer.service.ICustomerService;
import org.springframework.transaction.annotation.Transactional;
import java.util.Iterator;
import java.util.List;
@Service
@Transactional(rollbackFor = Exception.class)
public class CustomerServiceImpl extends BaseServiceImpl<Customer> implements ICustomerService {
@Autowired
private CustomerMapper customerMapper;
@Autowired
private CustomerContactMapper customerContactMapper;
@Autowired
private ProductMapper productMapper;
/**
* 头行结构改造
*/
@Override
public List<Customer> batchUpdate(IRequest request, List<Customer> customers) {
Iterator var3 = customers.iterator();
while (var3.hasNext()) {
Customer customer = (Customer) var3.next();
if (customer.getCustomerId() == null) {
((ICustomerService) this.self()).creatCustom(customer);
} else if (customer.getCustomerId() != null) {
((ICustomerService) this.self()).updateCustom(customer);
}
}
return customers;
}
/**
* 新建客户信息
*
* @param customer
* @return
*/
@Override
public Customer creatCustom(Customer customer) {
this.customerMapper.insertSelective(customer);
if (customer.getContactList() != null) {
this.processCustomValuesContact(customer);
}
if (customer.getProductList() != null) {
this.processCustomValuesProduct(customer);
}
return customer;
}
/**
* 更新客户信息
*
* @param customer
* @return
*/
@Override
public Customer updateCustom(Customer customer) {
this.customerMapper.updateByPrimaryKeySelective(customer);
if (customer.getContactList() != null) {
this.processCustomValuesContact(customer);
}
if (customer.getProductList() != null) {
this.processCustomValuesProduct(customer);
}
return customer;
}
/**
* 联系人
*
* @param customer processCustomValues1
*/
public void processCustomValuesContact(Customer customer) {
Iterator var2 = customer.getContactList().iterator();
while (var2.hasNext()) {
CustomerContact customerContact = (CustomerContact) var2.next();
if (customerContact.getContactId() == null) {
customerContact.setCustomerId(customer.getCustomerId());
this.customerContactMapper.insertSelective(customerContact);
} else if (customerContact.getContactId() != null) {
this.customerContactMapper.updateByPrimaryKeySelective(customerContact);
}
}
}
/**
* 产品
*
* @param customer processCustomValues2
*/
public void processCustomValuesProduct(Customer customer) {
Iterator var1 = customer.getProductList().iterator();
while (var1.hasNext()) {
Product product = (Product) var1.next();
if (product.getProductId() == null) {
product.setCustomerId(customer.getCustomerId());
this.productMapper.insertSelective(product);
} else if (product.getProductId() != null) {
this.productMapper.updateByPrimaryKeySelective(product);
}
}
}
}
解释待续...
鸣谢：乐乐同学哈！
网友评论