Skip to content

T
topsun-bpm
Commit 08074efd authored by 覃振观's avatar 覃振观 👶
Browse files
Options

23-12-15: 下班前提交

parent 5dfc4510
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 89 deletions
topsun-xt/src/main/webapp/biz/topsun/common/listeningFromData.js
View file @ 08074efd
...@@ -17,33 +17,41 @@ function mapping(dataMapping, rawData) { ...@@ -17,33 +17,41 @@ function mapping(dataMapping, rawData) {
let entitySet = Object.entries(dataMapping); let entitySet = Object.entries(dataMapping);
let returnData = {}; let returnData = {};
tryForEach(entitySet,(entity) => { tryForEach(entitySet,(entity) => {
let beanName = entity[0]; let beanName = entity[0], propertyNames = entity[1], entityData = rawData[beanName];
if(!isExist(rawData, beanName)) { throw {}; } if(!isExist(rawData, beanName)) { throw {}; }
let entityData = rawData[beanName]; if(propertyNames instanceof Array) {
let propertyNames = entity[1]; // Form 时执行此逻辑
tryForEach(propertyNames,(item) => { tryForEach(propertyNames,(item) => {
if(typeof item === "string") { if(typeof item === "string") {
if(!isExist(entityData, item, beanName)) { throw {}; } if(!isExist(entityData, item, beanName)) { throw {}; }
associate(entityData, item, item, beanName,mapper, returnData); associate(entityData, item, item, beanName,mapper, returnData);
return; return;
} else if(item instanceof Array) { } else if(item instanceof Object) {
// Grid需要单独赋值,这里不设置returnData. 页面Input有足够的映射信息,这里只记录 property: objName let entry = Object.entries(item)[0];
tryForEach(item, (property) => { let property = entry[0], alias = entry[1];
mapper[property] = beanName; if(!isExist(entityData, property, beanName)) { throw {}; }
associate(entityData, property, alias, beanName,mapper, returnData)
} else {
console.error('The configuration of "'+item+'" in "'+beanName+'" is not recognized, and the required,' +
' parameters are ( "propertyName" or "{ propertyName: alias }" ).');
throw {};
}
});
} else if(propertyNames instanceof Object) {
// Grid 时执行此逻辑
let listMap = {}, ids = [];
entityData.forEach(rowData => {
let id = rowData[propertyNames.id];
listMap.id = rowData;
ids.push(id);
tryForEach(propertyNames.columns, (property) => {
mapper[property] = {};
mapper[property][id] = beanName;
}); });
return; })
} else if(item instanceof Object) {
let entry = Object.entries(item)[0]; return;
let property = entry[0]; }
if(!isExist(entityData, property, beanName)) { throw {}; }
let alias = entry[1];
associate(entityData, property, alias, beanName,mapper, returnData)
} else {
console.error('The configuration of "'+item+'" in "'+beanName+'" is not recognized, and the required,' +
' parameters are ( "propertyName" or "{ propertyName: alias }" ).');
throw {};
}
});
}); });
dataMapping.Mapper = mapper; dataMapping.Mapper = mapper;
// ---------------- 暂不处理无法执行到此处的情况 ---------------- // ---------------- 暂不处理无法执行到此处的情况 ----------------
...@@ -79,7 +87,7 @@ function testTryForEach() { ...@@ -79,7 +87,7 @@ function testTryForEach() {
} }
} }
var tryForEach = function(arrayObj, callback) { const tryForEach = function(arrayObj, callback) {
try { try {
arrayObj.forEach(callback); arrayObj.forEach(callback);
} catch { } } catch { }
...@@ -107,47 +115,116 @@ function isExist(obj, property, objName) { ...@@ -107,47 +115,116 @@ function isExist(obj, property, objName) {
return true; return true;
} }
// 监听 input 管理页面显示的 Data，提交数据时，只提交修改过的 Data /**
* 监听 input 管理页面显示的 Data。
*/
function inputEventListener() { function inputEventListener() {
const inputElements = document.querySelectorAll('input'); const inputElements = document.querySelectorAll('input');
inputElements.forEach(item => { inputElements.forEach(item => {
item.addEventListener('input', (event) => { item.addEventListener('input', (event) => {
let mapper = window.dataMapping.Mapper; listenerContent(event);
let property = event.target.getAttribute('name'); });
let beanMapping = mapper[property]; });
if(!beanMapping) { }
console.error("The configuration was not found in the 'dataMapping' : '"+property+"'")
} /**
if(typeof beanMapping === "string") { * 监听器动作： 根据 保存的映射关系，将页面元素值填入到 newData
debugger; * @param event
*/
function listenerContent(event) {
let mapper = window.dataMapping.Mapper;
let property = event.target.getAttribute('name');
let beanMapping = mapper[property];
if(!beanMapping) {
console.error("The configuration was not found in the 'dataMapping' : '"+property+"'")
}
let newData = window.dataSet.newData;
// Grid 时执行此逻辑 此处根据页面 editor 元素 Id 匹配。出现异常请检查该元素 Id 生成规则是否发生变化
if(typeof beanMapping === "string") {
let eleId = event.currentTarget.id;
let labels = eleId.split('_');
if(labels[0].indexOf(beanMapping) < 0) {
console.error('页面配置的gridId "'+labels[0]+'" 与映射配置中的 "'+beanMapping+'" 不匹配！ 注意匹配规则为： elementId.indexOf(' +
' Mapping.ArrayKey )');
} else {
newData[beanMapping][labels[2]][labels[1]] = event.target.value;
console.log('Input value changed:', event.target.value);
}
return;
}
// Form 时执行此逻辑
if(beanMapping instanceof Object) {
let mappings = Object.entries(beanMapping);
tryForEach(mappings, (entry) => {
let beanName = entry[0];
let property = entry[1];
newData[beanName][property] = event.target.value;
console.log('Input value changed:', event.target.value);
})
}
}
/**
* 添加 DOM 监听
* @param eleId 监听的 root 元素 ID
*/
function addObserver(eleId) {
observer.observe(document.querySelector(eleId), mutationConfig);
}
/**
* 监听 DOM ，为编辑框添加 Input 监听
* @type {MutationObserver}
*/
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if(mutation.type === 'childList') {
let addNodes = mutation.addedNodes;
if(addNodes.length === 1 && addNodes[0].nodeName === 'DIV') {
let childNodes = addNodes[0].childNodes;
if(childNodes.length === 1 && childNodes[0].nodeName === 'INPUT') {
let node = childNodes[0];
node.addEventListener('input', gridEditor)
}
} }
if(beanMapping instanceof Object) { let removeNodes = mutation.removedNodes;
mappings = Object.entries(beanMapping); if(removeNodes.length === 1 && removeNodes[0].nodeName === 'INPUT') {
tryForEach(mappings, (entry) => { let node = removeNodes[0];
let beanName = entry[0]; node.removeEventListener('input', gridEditor);
let property = entry[1];
let newData = window.dataSet.newData;
newData[beanName][property] = event.target.value;
console.log('Input value changed:', event.target.value);
})
} }
}
})
})
}); const gridEditor = function(event) {
}); listenerContent(event);
} }
// console.log('属性变化节点 ： ' + mutation.target);
// console.log('变化属性名 ： ' + mutation.attributeName);
// console.log('变化属性值 ： ' + mutation.target.value);
const mutationConfig = { attributes: true, childList: true, subtree: true}
function checkUpdata() { function checkUpdata() {
let rawData = window.dataSet.rawData; let rawData = window.dataSet.rawData;
let newData = window.dataSet.newData; let newData = window.dataSet.newData;
window.dataSet.upData = {}; window.dataSet.upData = {};
let rawEntry = Object.entries(rawData); let rawEntry = Object.entries(rawData);
rawEntry.forEach(raw => { tryForEach(rawEntry, entry => {
let beanName = raw[0]; let beanName = entry[0];
let rawHash = getHashCode(JSON.stringify(rawData[beanName])); debugger;
let newHash = getHashCode(JSON.stringify(newData[beanName])); let raw = rawData[beanName];
if(!(rawHash === newHash)) { let now = newData[beanName];
window.dataSet.upData[beanName] = newData[beanName]; if(raw instanceof Array) {
debugger;
return;
} else if (raw instanceof Object) {
let rawHash = getHashCode(JSON.stringify(raw));
let newHash = getHashCode(JSON.stringify(now));
if(!(rawHash === newHash)) {
window.dataSet.upData[beanName] = newData[beanName];
}
} }
}) })
} }
...@@ -158,8 +235,20 @@ function checkUpdata() { ...@@ -158,8 +235,20 @@ function checkUpdata() {
* @returns {*} * @returns {*}
*/ */
function listeningGrid(elId, options) { function listeningGrid(elId, options) {
let dataMapping = window.dataMapping;
debugger;
const originalOnBeforeEdit = options.onBeforeEdit;
options.onBeforeEdit = function(editParm){
originalOnBeforeEdit.call(this, editParm);
let domIds = editParm.column.__domid.split('|');
let columnindex = editParm.column.columnindex;
let recordId = editParm.record.__id;
let rowId = domIds[0]+'|'+columnindex+'|'+recordId+'|'+domIds[2];
debugger;
}
addObserver(elId); addObserver(elId);
return UICtrl.grid(elId, options); return UICtrl.grid(elId, options);
} }
/** /**
...@@ -189,28 +278,3 @@ function getHashCode (str, caseSensitive) { ...@@ -189,28 +278,3 @@ function getHashCode (str, caseSensitive) {
return (hash ^ hash2 ^ hash3 >> 3 ) & 0x7FFFFFFF; return (hash ^ hash2 ^ hash3 >> 3 ) & 0x7FFFFFFF;
} }
} }
function addObserver(eleId) {
observer.observe(document.querySelector(eleId), mutationConfig);
}
// 补充方案 监听 Value 属性
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if(mutation.type === 'childList') {
let addNodes = mutation.addedNodes;
if(addNodes.length == 1 && addNodes[0].nodeName === 'DIV') {
let childNodes = addNodes[0].childNodes;
if(childNodes.length == 1 && childNodes[0].nodeName === 'INPUT') {
let node = childNodes[0];
debugger;
console.log('属性变化节点 ： ' + mutation.target);
console.log('变化属性名 ： ' + mutation.attributeName);
console.log('变化属性值 ： ' + mutation.target.value);
}
}
}
})
})
const mutationConfig = { attributes: true, childList: true, subtree: true}
\ No newline at end of file
topsun-xt/src/main/webapp/biz/topsun/product/productDetail.js
View file @ 08074efd
...@@ -46,7 +46,9 @@ function faceGrid(elId, data) { ...@@ -46,7 +46,9 @@ function faceGrid(elId, data) {
type: 'text', type: 'text',
required: true required: true
}}, }},
{ display: "油墨覆盖率(%)", name: "coverageRate", width: 120, minWidth: 60, type: "string", align: "left", editor: { type: 'text', required: true } } { display: "油墨覆盖率(%)", name: "coverageRate", width: 120, minWidth: 60, type: "string", align: "left", editor: { type: 'text', required: true } },
{ name: "colorId", hide: true },
{ name: "colorId" }
], ],
toolbar: toolbarOptions, toolbar: toolbarOptions,
dataType: "local", dataType: "local",
...@@ -58,7 +60,9 @@ function faceGrid(elId, data) { ...@@ -58,7 +60,9 @@ function faceGrid(elId, data) {
height: 150, height: 150,
onAfterEdit: function(editParm) { onAfterEdit: function(editParm) {
// 后备方案: 表格遍历完成时 // 后备方案: 表格遍历完成时
debugger; },
onBeforeEdit : function(editParm) {
console.log('original run onBeforeEdit()');
}, },
onDblClickRow : function(data, rowindex, rowobj) { onDblClickRow : function(data, rowindex, rowobj) {
...@@ -107,16 +111,19 @@ function loadDataTest() { ...@@ -107,16 +111,19 @@ function loadDataTest() {
$('#submitForm').formSet(showData); $('#submitForm').formSet(showData);
var fronData = {}; var fronData = {};
fronData.Rows = data.rawData.fronColors; fronData.Rows = data.rawData.fronColors;
faceGrid("#frontFaceGrid", fronData); faceGrid("#fronColorsGrid", fronData);
fronData.Rows = data.backColors; fronData.Rows = data.backColors;
faceGrid("#backFaceGrid", fronData); faceGrid("#backColorsGrid", fronData);
inputEventListener(); inputEventListener();
}); });
} }
// 数据映射配置 // 数据映射配置
// alias 必须唯一.这里不再要求所有对象的属性名唯一 { property : alias } // Form: 映射数据格式为elementName(alias): { objName: property }
// 未设 alias 情况同 { property : property } // alias必须唯一.这里不再要求所有对象的属性名唯一 { property : alias }
// Form 映射数据格式为: elementName(alias): { objName: property } // 未设 alias 情况同 { property : property }
// Grid: 需要监听 Grid Data 时，必须设置 唯一 id 列。
// 匹配规则 elementId.indexOf( dataMapping.ArrayKey )
// 即当前页面 ‘fronColorsGrid’.indexOf('fronColors')
var dataMapping = { var dataMapping = {
Product: [ Product: [
"productId" "productId"
...@@ -136,9 +143,11 @@ var dataMapping = { ...@@ -136,9 +143,11 @@ var dataMapping = {
"rowNum" "rowNum"
, "modulus" , "modulus"
], ],
fronColors: [ fronColors: {
[ "productFaceColorId", "coverageRate" ] id: "productFaceColorId",
] columns: [ "productFaceColorId", "coverageRate" ]
}
} }
......
topsun-xt/src/main/webapp/biz/topsun/product/productDetail.jsp
View file @ 08074efd
...@@ -87,11 +87,11 @@ ...@@ -87,11 +87,11 @@
<div id="layout" style="height: 280px; display: contents;"> <div id="layout" style="height: 280px; display: contents;">
<div position="left" title="正面颜色" > <div position="left" title="正面颜色" >
<div id="frontFaceGrid" style="margin: 2px;"></div> <div id="fronColorsGrid" style="margin: 2px;"></div>
</div> </div>
<div position="right" title="反面颜色"> <div position="right" title="反面颜色">
<div id="backFaceGrid" style="margin: 2px;"></div> <div id="backColorsGrid" style="margin: 2px;"></div>
</div> </div>
</div> </div>
......
topsun/src/main/java/com/huigou/topsun/product/application/impl/ProductApplicationImpl.java
View file @ 08074efd
...@@ -113,6 +113,7 @@ public class ProductApplicationImpl implements ProductApplication { ...@@ -113,6 +113,7 @@ public class ProductApplicationImpl implements ProductApplication {
} else { } else {
ProductFaceColor fc = new ProductFaceColor(); ProductFaceColor fc = new ProductFaceColor();
fc.setProductFaceColorId(111L); fc.setProductFaceColorId(111L);
fc.setColorId(1L);
ArrayList<ProductFaceColor> fronColors = new ArrayList<>(); ArrayList<ProductFaceColor> fronColors = new ArrayList<>();
fronColors.add(fc); fronColors.add(fc);
assemble.put("fronColors", fronColors); assemble.put("fronColors", fronColors);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment