// 生成左侧navList菜单
|
function createNavListDom(navListData) {
|
// console.log('待渲染的菜单navListData',navListData);
|
var domStr = '<ul class="group" >';
|
var str = '<li class="group-node active">' +
|
'<div class="group-node-title">' +
|
'<span class="group-node-name">' + navListData.groupName|| '' + '</span><i></i>' +
|
'</div>' +
|
'<ul class="group-data-ul">';
|
navListData.groupData.forEach(function (item) {
|
var isShowClassName = item.visible ? 'isHide' : '';
|
var isShow = item.visible;
|
var isVueGrid = navListData.grid ? 'vue-table ' : 'vue-grid ';
|
if (navListData.grid){
|
isShowClassName = item.showOnGrid ? 'isHide' : '';
|
isShow = item.showOnGrid;
|
}
|
|
str += '<li class="nav-node '+isVueGrid + isShowClassName +'" draggable="true" data-value="'+ item.value +'" data-id="'+ item.layoutId +'_'+ item.id + '" data-layout-ul-id="'+ navListData.layoutId + '" data-layout-li-id="'+ item.layoutId + '" data-grid-index="'+ item.gridIndex+ '" data-layout-index="'+ item.layoutIndex+ '" data-name="'+ item.name +'" data-visible="'+ isShow +'">' +
|
'<div class="nav-node-content text-no-wrap ">' +
|
'<span class="nav-node-name ">' + item.name + '</span>' +
|
'</div>' +
|
'</li>';
|
});
|
domStr += str + '</ul></li>';
|
|
$('.nav-list-container').html(domStr);
|
addNavDragInVueGridEvent();
|
}
|
|
// 为左侧菜单添加拖拽进入vueGrid组件事件
|
function addNavDragInVueGridEvent() {
|
var navItem = document.querySelectorAll('.nav-node.vue-grid');
|
|
for (var i = 0; i < navItem.length; i++) {
|
navItem[i].addEventListener('dragstart', function (e) {
|
e.target.className = 'nav-node vue-grid dragging';
|
});
|
navItem[i].addEventListener('drag', throttle(function (e){
|
dragToVueGridStart(e);
|
// debounce(dragToVueGridStartFn(e),1000)
|
},16));
|
// navItem[i].addEventListener('drag', function (e){
|
// dragToVueGridStart(e);
|
// // debounce(dragToVueGridStartFn(e),1000)
|
// });
|
navItem[i].addEventListener('dragend', function (e) {
|
// console.log(e.target.dataset.name, e.target.dataset.id);
|
dragToVueGridEnd(this,e.target.dataset);
|
});
|
}
|
}
|
|
|
// 防抖函数
|
function debounce(fn, delay = 1500) {
|
let timer = null;
|
return function () {
|
if (timer) {
|
clearTimeout(timer);
|
}
|
|
timer = setTimeout(()=> {
|
// console.log(this); // nodejs global对象、浏览器 window对象
|
//fn();
|
fn.apply(this,arguments);
|
timer = null;
|
}, delay)
|
}
|
}
|
|
// 节流函数
|
function throttle (fn,delay=100){
|
let timer = null
|
return ()=>{
|
if (timer){return}
|
timer = setTimeout(() => {
|
fn.apply(this,arguments)
|
timer = null
|
}, delay);
|
}
|
}
|
|
function initTab(data){
|
layui.use(function(){
|
var element = layui.element;
|
var $ = layui.$;
|
element.render('tab', 'filter-tab');
|
});
|
}
|
|
// function getResultData(layoutsData){
|
// let resultList = [];
|
// layoutsData.map((item,index)=>{
|
// item.map((item2,index2)=>{
|
// item2.map((item3,index3)=>{
|
// item3.data.map((item4,index4)=>{
|
// if (!item4.userCode||!item4.formId) return;
|
// resultList.push({
|
// "userCode": item4.userCode,
|
// "formId": item4.formId,
|
// "formType": item4.formType,
|
// "headFlag": item4.headFlag,
|
// "fieldId": item4.id,
|
// "statisId": (index4+1)*10,
|
// "fieldName": item4.name,
|
// "dataType": item4.dataType,
|
// "dataTypeLength": item4.dataTypeLength,
|
// "showOnGrid": item4.showOnGrid,
|
// "gridCaption": item4.gridCaption,
|
// "visible": item4.visible,
|
// "hideLabel": item4.hideLabel,
|
// "colNo": item4.x<=0?1:item4.x+1,
|
// "rowNo": item4.y<=0?1:item4.y+1,
|
// "lengthNum": item4.w,
|
// "heightNum": item4.h,
|
// "masterFieldShowLocation": item4.masterFieldShowLocation,
|
// })
|
// })
|
// })
|
// })
|
// })
|
// return resultList;
|
// }
|
function getResultData(layoutsData){
|
console.log('layoutsData原始',layoutsData);
|
let resultList = [];
|
layoutsData.map((item,index)=>{
|
item.map((item2,index2)=>{
|
item2.map((item3,index3)=>{
|
if (item3.filedName==='master'||item3.filedName==='master1'){
|
// 对item3.data进行遍历，按item4的x,y顺序，按从小到大排列顺序
|
item3.data.sort((a,b)=>{
|
// 首先比较y值，如果相等则比较x值
|
if(a.y>b.y) return 1;
|
if(a.y<b.y) return -1;
|
if (a.x>b.x) return 1;
|
if (a.x<b.x) return -1;
|
// 相等则返回0
|
return 0;
|
})
|
// console.log('排列后',item3.data);
|
// console.table(JSON.parse(JSON.stringify(item3.data)));
|
}
|
item3.data.map((item4,index4)=>{
|
if (!item4.userCode||!item4.formId) return;
|
resultList.push({
|
"userCode": item4.userCode,
|
"formId": item4.formId,
|
"formType": item4.formType,
|
"headFlag": item4.headFlag,
|
"fieldId": item4.id,
|
"statisId": (index4+1)*10,
|
"fieldName": item4.name,
|
"dataType": item4.dataType,
|
"dataTypeLength": item4.dataTypeLength,
|
"showOnGrid": item4.showOnGrid,
|
"gridCaption": item4.gridCaption,
|
"visible": item4.visible,
|
"hideLabel": item4.hideLabel,
|
"colNo": item4.x<=0?1:item4.x+1,
|
"rowNo": item4.y<=0?1:item4.y+1,
|
"lengthNum": item4.w,
|
"heightNum": item4.h,
|
"masterFieldShowLocation": item4.masterFieldShowLocation,
|
})
|
})
|
})
|
})
|
})
|
return resultList;
|
}
|
|
function getResultFormId(layoutsData){
|
let array=[];
|
let json = {};
|
layoutsData.map((item, index) => {
|
item.map((item2, index2) => {
|
item2.map((item3, index3) => {
|
item3.data.map((item4, index4) => {
|
if (!item4.userCode || !item4.formId) return;
|
// if (formIds.indexOf(item4.formId) === -1) {
|
json.formId=item4.formId;
|
json.formType=item4.formType;
|
array.push(json);
|
// }
|
})
|
})
|
})
|
})
|
return array;
|
}
|
function handleResData(resData,navListData) {
|
// 布局内容数据
|
var layoutData = [];
|
|
var resItemArr = [];
|
|
for (const resItem in resData){
|
if (resData.hasOwnProperty(resItem)){
|
resItemArr.push(resData[resItem]);
|
tabsIndex.push(0);
|
}
|
}
|
// console.log('resItemArr',resItemArr);
|
var gridSum = -1; // 网格布局总数
|
var layoutSum = -1; // 布局总数
|
resItemArr.forEach(function (resItem,resIndex) {
|
// console.log('resItem',resItem);
|
var navItem = {};
|
var layoutItem = {};
|
var navItemData = [];
|
var layoutItemData = [];
|
var layoutRows = [];
|
var navRows = [];
|
var layoutId1 = resIndex; // 定位第一层0,20，30，40，50
|
var layoutId2 = ''; // 定位第二层tab标签
|
var layoutId3 = ''; // 定位第三层master，slave，master1
|
var layoutId4 = ''; // 定位第四层data数据
|
// var gridSum = 0; //
|
|
// 遍历0,20，30，40，50这些数据
|
resItem.forEach(function (formItem,formIndex) {
|
layoutId2 = layoutId1+'_'+formIndex;
|
|
layoutItemData = [];
|
navItemData = [];
|
var formListFiledName = ['master','slave','master1'];
|
// 遍历master，slave，master1这些数据
|
var filedIndex1 = 0;
|
formListFiledName.forEach(function (filedName,filedIndex) {
|
// layoutId2 = layoutId1+'_'+filedIndex;
|
|
navItem = {
|
groupName: formItem.formName,
|
filedName: '',
|
groupData:[]
|
}
|
layoutItem = {
|
name: formItem.formName,
|
filedName: '',
|
data:[]
|
}
|
//
|
var masterList = formItem[filedName].list;
|
var masterData = formItem[filedName].data;
|
// console.log('masterData',masterData);
|
// console.log('masterData',masterData);
|
// navItem.filedName = filedName;
|
// navItem[filedName] = [];
|
if (masterList.length<=0) {
|
return;
|
};
|
layoutId3 = layoutId2+'_'+filedName+','+filedIndex1+','+filedIndex;
|
filedIndex1++;
|
// console.log('------masterList.length',masterList.length);
|
navItem.filedName = filedName;
|
navItem.layoutId = layoutId3;
|
navItem.grid = formItem[filedName].grid;
|
|
layoutItem.filedName = filedName;
|
layoutItem.grid = formItem[filedName].grid;
|
if (!layoutItem.grid){
|
gridSum ++;
|
}
|
layoutSum++;
|
layoutItem.gridIndex=gridSum;
|
navItem.gridIndex=gridSum;
|
layoutItem.layoutIndex=layoutSum;
|
navItem.layoutIndex=layoutSum;
|
// console.log('<<<<>>>>layoutItem.gridIndex',layoutItem.gridIndex);
|
layoutItem.layoutId = layoutId3;
|
|
// 遍历masterList
|
masterList.forEach(function (masterItem,index) {
|
// console.log('<<<<<masterItem.fieldId',masterItem.fieldId);
|
// console.log('>>>>data',masterData[masterItem.fieldId]);
|
var fieldId = '';
|
if (masterItem.fieldId!==''&&masterData&&masterData[masterItem.fieldId]!==''){
|
|
fieldId = masterData[masterItem.fieldId];
|
// console.log('<<<<<fieldId',index,masterItem.fieldId);
|
}
|
layoutId4 = layoutId3 + '_'+index;
|
|
navItem.groupData.push({
|
// fieldId: masterItem.fieldId,
|
id: masterItem.fieldId,
|
name: masterItem.fieldName,
|
// x: masterItem.colNo<=0?0:masterItem.colNo-1,
|
// y: masterItem.rowNo<=0?0:masterItem.rowNo-1,
|
x: masterItem.visible?(masterItem.colNo<=0?0:masterItem.colNo-1):-100,
|
y: masterItem.visible?(masterItem.rowNo<=0?0:masterItem.rowNo-1):-100,
|
w: masterItem.lengthNum,
|
h: masterItem.heightNum,
|
i: layoutId4 + '_'+ masterItem.fieldId,
|
isCheckbox: (masterItem.controlType===30||masterItem.controlType===32),
|
value: fieldId,
|
visible: masterItem.visible,
|
showOnGrid: masterItem.showOnGrid,
|
layoutId: layoutId4,
|
gridIndex:gridSum,
|
layoutIndex:layoutSum
|
})
|
layoutItem.data.push({
|
id: masterItem.fieldId,
|
name: masterItem.fieldName,
|
// x: masterItem.colNo<=0?0:masterItem.colNo-1,
|
// y: masterItem.rowNo<=0?0:masterItem.rowNo-1,
|
x: masterItem.visible?(masterItem.colNo<=0?0:masterItem.colNo-1):-100,
|
y: masterItem.visible?(masterItem.rowNo<=0?0:masterItem.rowNo-1):-100,
|
w: masterItem.lengthNum,
|
h: masterItem.heightNum,
|
i: layoutId4 + '_'+ masterItem.fieldId,
|
isCheckbox: (masterItem.controlType===30||masterItem.controlType===32),
|
value:fieldId,
|
visible: masterItem.visible,
|
showOnGrid: masterItem.showOnGrid,
|
layoutId: layoutId4,
|
gridIndex:gridSum,
|
layoutIndex:layoutSum,
|
userCode: masterItem.userCode,
|
formId: masterItem.formId,
|
formType: masterItem.formType,
|
headFlag: masterItem.headFlag,
|
statisId: masterItem.statisId,
|
dataType: masterItem.dataType,
|
dataTypeLength: masterItem.dataTypeLength,
|
gridCaption: masterItem.gridCaption,
|
hideLabel: masterItem.hideLabel,
|
masterFieldShowLocation: masterItem.masterFieldShowLocation,
|
})
|
|
})
|
// navListData.push(navItem);
|
navItemData.push(navItem);
|
layoutItemData.push(layoutItem);
|
|
})
|
layoutRows.push(layoutItemData);
|
navRows.push(navItemData);
|
|
})
|
|
navListData.push(navRows);
|
layoutData.push(layoutRows);
|
})
|
// console.log('navListData',navListData);
|
// console.log('layoutData',layoutData);
|
return layoutData;
|
}
|
|
function getCurrentNavDataBackup(){
|
// return JSON.parse(JSON.stringify(navListDataBackup[currentIndexGroup.tabLayoutIndex][currentIndexGroup.tabsIndex][currentIndexGroup.groupIndex]));
|
return JSON.parse(JSON.stringify(navListDataBackup[currentIndexGroup.tabLayoutIndex][currentIndexGroup.tabsIndex][currentIndexGroup.groupIndex]));
|
}
|
function getCurrentLayoutDataBackup(){
|
return JSON.parse(JSON.stringify(layoutsDataBackup[currentIndexGroup.tabLayoutIndex][currentIndexGroup.tabsIndex][currentIndexGroup.groupIndex]));
|
// return layoutsDataBackup[currentIndexGroup.tabLayoutIndex][currentIndexGroup.tabsIndex][currentIndexGroup.groupIndex];
|
}
|
