let GridLayout = VueGridLayout.GridLayout;
let GridItem = VueGridLayout.GridItem;
let draggable = vuedraggable;
let mouseXY = {"x": null, "y": null};
let DragPos = {"x": null, "y": null, "w": 1, "h": 1, "i": null};
let layoutsData = []; // 总布局数据
let layoutsDataBackup = []; // 总布局数据备份
let currentLayoutData = {data:[]}; // 当前编辑的布局
// let currentLayoutDataBackup = {data:[]}; // 当前编辑的布局数据备份
let currentNavListData = []; // 当前编辑的导航列表数据
// let currentNavListDataBackup = []; // 当前编辑的导航列表数据备份
let currentLayoutVue = {}; // 当前编辑的 grid布局 vue实例
let currentTableVue = {}; // 当前编辑的表格布局 vue实例
let currentIsTable = false; // 当前编辑的布局是否是表格
let navListData = []; // 导航列表数据
let navListDataBackup = []; // 导航列表数据备份
let tabLayoutIndex = 0; // 当前tab的layoutIndex
let tabsIndex = []; // 当前tab的tabsIndex
let currentIndexGroup = {}; // 当前tab的index组
// let isOpenLayer = false; // 是否打开了编辑层
let getDataCallback = function () {};
let getDataCallback2 = function () {};
let getCurrentIsTableCallback = function () {};
let getCurrentLayoutDataCallback = function () {};
let getCurrentTableDataCallback = function () {};
let openLayerCallback = function () {};
let closeLayerCallback = function () {};
// 不能拖拽的grid，只能查看
let gridList = Vue.component("grid-disable", {
template: `
`,
components: {
GridLayout,
GridItem
},
props:['gridData','layoutId'],
data() {
return {
myLayout: this.gridData,
};
},
mounted() {
},
beforeDestroy() {
},
methods: {
}
});
// 可拖拽的grid，可以编辑
let grid = Vue.component("grid", {
template: `
`,
components: {
GridLayout,
GridItem
},
data() {
return {
myLayout: [],
layoutId: '',
};
},
mounted() {
document.addEventListener("dragover", function (e) {
mouseXY.x = e.clientX;
mouseXY.y = e.clientY;
}, false);
currentLayoutVue = this;
getCurrentLayoutDataCallback = (BackupData,indexGroup)=>{
// console.log('当前备份布局数据',BackupData,indexGroup);
this.myLayout = BackupData.data;
this.layoutId = BackupData.layoutId;
if (indexGroup){
let currentLayoutData = layoutsData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex];
// console.log('---layoutsData[tabLayoutIndex][tabsIndex][groupIndex]: ',currentLayoutData);
currentLayoutData.data.map((item,index)=>{
if (BackupData.data[index] && item.i === BackupData.data[index].i){
let backup = BackupData.data[index] //JSON.parse(JSON.stringify(BackupData.data[index]))
item.visible = backup.visible;
item.showOnGrid = backup.showOnGrid;
item.h = backup.h;
item.w = backup.w;
item.x = backup.x;
item.y = backup.y;
// let backup = JSON.parse(JSON.stringify(BackupData.data[index]));
// console.log('<<{
// console.log('&&&',item,index);
if (currentNavListDataBackup.groupData[index] && item.i === currentNavListDataBackup.groupData[index].i){
// console.log('<<
`,
components: {
grid
},
data() {
return {
layout: [],
isOpenLayer: false,
};
},
mounted() {
// console.log('tab-cards mounted ==== this',this);
// console.log('tab-cards mounted',this.layout);
getDataCallback = (data) => {
// this.layout = data;
this.$set(this, 'layout', data)
// console.log('tab-cards mounted ==== getDataCallback',data);
// console.table(JSON.parse(JSON.stringify(data[0][0][1].data)));
// setTimeout(()=>{this.$forceUpdate();},10)
this.isOpenLayer = true;
setTimeout(()=> {
this.isOpenLayer = false;
},0)
console.log('tab-cards mounted ==== getDataCallback',data);
initDriver();
};
},
beforeDestroy() {
},
methods: {
layoutEditClickEvent: function (e) {
let layoutId = e.currentTarget.dataset.layoutId;
// console.log('layoutEditClickEvent click',layoutId);
// console.log('layoutEditClickEvent click',e.currentTarget.dataset);
let indexArr = layoutId.split('_');
let tabLayoutIndex = indexArr[0];
let tabsIndex = indexArr[1];
let groupIndex = indexArr[2].split(',')[1];
currentIndexGroup = {
tabLayoutIndex: tabLayoutIndex,
tabsIndex: tabsIndex,
groupIndex: groupIndex
};
currentNavListData = navListData[tabLayoutIndex][tabsIndex][groupIndex];
currentLayoutData = layoutsData[tabLayoutIndex][tabsIndex][groupIndex];
layer.open({
type: 1,
title: ['编辑', 'font-size: 18px;text-align:center;'],
move: false,
content: $('.layer-edit-content'),
success: function(layero, index){
layer.full(index); // 最大化
// openLayerCallback();
currentIsTable = currentLayoutData.grid || false;
getCurrentIsTableCallback(currentIsTable);
if (currentIsTable){
// console.log('是表格布局',currentIsTable);
getCurrentTableDataCallback(currentLayoutData,currentNavListData);
} else {
createNavListDom(currentNavListData);
// console.log('是网格布局',currentIsTable);
// console.log('currentLayoutVue.myLayout open layer',currentLayoutVue.myLayout);
getCurrentLayoutDataCallback(currentLayoutData);
}
},
cancel: (index, layero) =>{
// closeLayerCallback();
layer.close(index);
// console.log('layer close');
// dragToVueGridStart();
}
});
}
}
});
// 表格相关
let vueDraggableTable = Vue.component("vue-draggable-table", {
template: `
-
{{navData.groupName}}
-
{{item.name}}
`,
components: {
draggable
},
data() {
return {
headers: [],
tablesData: [],
originTablesData: [], // 原始表格数据
navData: [],
// dragging: true
// ghostClass: "sortable-ghost", // drop placeholder的css类名
// chosenClass: "sortable-chosen", // 被选中项的css 类名
dragClass: "sortable-drag", // 正在被拖拽中的css类名
groupL:{
name: 'table',
put: true
},
groupR:{
name: 'table',
put: true
},
};
},
mounted() {
currentTableVue = this;
// console.log("%c加载table表格布局", "color: blue");
getCurrentTableDataCallback = (data,navData,indexGroup)=>{
this.originTablesData = data.data;
this.tablesData = data.data.filter(item => item.showOnGrid);
// this.tablesData = data.data;
this.navData = navData;
// console.log('getCurrentTableDataCallback this.originTablesData');
// console.table(JSON.parse(JSON.stringify(this.originTablesData)));
//
// console.log('getCurrentTableDataCallback this.tablesData');
// console.table(JSON.parse(JSON.stringify(this.tablesData)));
if (indexGroup){
// console.log('getCurrentLayoutDataCallback',indexGroup,data);
let currentLayoutData = layoutsData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex];
// console.log('---layoutsData[tabLayoutIndex][tabsIndex][groupIndex]: ',currentLayoutData);
currentLayoutData.data.map((item,index)=>{
data.data.map((item2,index2)=>{
if (item2.i === item.i){
item.showOnGrid = item2.showOnGrid;
item.visible = item2.visible;
item.h = item2.h;
item.w = item2.w;
item.x = item2.x;
item.y = item2.y;
}
if (item.layoutId === item2.layoutId){
item.sort = index2;
} else {
if (item.sort === undefined){
item.sort = 9999;
}
}
})
});
console.log();
currentLayoutData.data.sort((a,b)=>{
return a.sort - b.sort;
});
let currentNavListData = navListData[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex];
let currentNavListDataBackup = JSON.parse(JSON.stringify(navListDataBackup[indexGroup.tabLayoutIndex][indexGroup.tabsIndex][indexGroup.groupIndex]))
currentNavListData.groupData.map((item,index)=>{
if (currentNavListDataBackup.groupData[index] && item.i === currentNavListDataBackup.groupData[index].i){
item.showOnGrid = currentNavListDataBackup.groupData[index].showOnGrid;
item.visible = currentNavListDataBackup.groupData[index].visible;
}
});
}
}
},
methods: {
handleChange() {
console.log('changed');
},
inputChanged(value) {
this.activeNames = value;
console.log('inputChanged');
},
getComponentData() {
return {
on: {
change: this.handleChange,
input: this.inputChanged
},
attrs:{
wrap: true
},
props: {
value: this.activeNames
}
};
},
onStartNav(evt){},
onEndNav(evt){
let itemEl = evt.item; // dragged HTMLElement
evt.to; // target list
evt.from; // previous list
let oldIndex = evt.oldIndex; // element's old index within old parent
let newIndex = evt.newIndex; // element's new index within new parent
evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
evt.clone // the clone element
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
let idArr = ['table-left-draggable','table-tr-draggable','table-right-draggable'];
if (idArr.indexOf(evt.to.id) > -1){
// 从navList拖到表格,当前拖拽item的showOnGrid设为1，添加到tablesData
let currentNavItem = this.navData.groupData[oldIndex];
this.$set(currentNavItem, 'showOnGrid', 1);
this.$set(currentNavItem, 'visible', 0);
if (evt.to.id === 'table-left-draggable'){
this.tablesData.unshift(currentNavItem);
} else if (evt.to.id === 'table-tr-draggable'){
this.tablesData.splice(newIndex,0,currentNavItem);
} else if (evt.to.id === 'table-right-draggable'){
this.tablesData.push(currentNavItem);
}
// 原始表格数据中对应的showOnGrid设为1
this.originTablesData.map((item,index)=> {
if (item.layoutId === currentNavItem.layoutId){
item.showOnGrid = 1;
item.visible = 0;
}
});
this.sortOriginTableData();
}
// console.log(this.tablesData);
},
onPutTableLeft(){
console.log('onPutTableLeft');
},
onPutTableRight(){
console.log('onPutTableRight');
},
// // 开始拖拽的时候
onStartTable: function (/**Event*/evt) {
// console.log(evt); // element index within parent
this.$set(this.groupL, 'put', false);
this.$set(this.groupR, 'put', false);
},
onEndTable(evt){
// console.log('evt',evt);
// console.log('onEndTable',this.tablesData);
this.$set(this.groupL, 'put', true);
this.$set(this.groupR, 'put', true);
this.sortOriginTableData();
},
deleteTCol(header,index){
// navData不能使用index
this.tablesData[index].showOnGrid = 0;
this.tablesData[index].visible = 1;
this.tablesData.splice(index,1);
var idArr = header.i.split('_');
this.$set(this.navData.groupData[idArr[3]], 'showOnGrid', 0);
this.$set(this.navData.groupData[idArr[3]], 'visible', 1);
this.sortOriginTableData();
},
sortOriginTableData() {
// 根据tablesData的顺序，在originTablesData基础上重新排序
// console.log('sortOriginTableData','this.tablesData');
// console.table(JSON.parse(JSON.stringify(this.tablesData)));
// console.log('sortOriginTableData 开始','this.originTablesData...');
// console.table(JSON.parse(JSON.stringify(this.originTablesData)));
this.tablesData.map((item,index)=>{
this.originTablesData.map((item2,index2)=>{
if (item.i === item2.i){
item2.sort = index;
} else{
if (item2.sort === undefined){
item2.sort = 9999;
}
}
})
});
this.originTablesData.sort((a,b)=>{
// console.log('sortOriginTableData 开始 a.sort ,b.sort',a.sort ,b.sort);
return a.sort - b.sort;
});
// console.log('sortTableData 完成');
// console.table(JSON.parse(JSON.stringify(this.originTablesData)));
}
}
})
// 不能拖动的表格
let vueDisableTable = Vue.component("vue-disable-table", {
template: ``,
props:['tableData','layoutId'],
data() {
return {
headers: [],
tablesData: this.tableData,
// dragging: true
};
},
mounted() {},
methods: {
}
})
let vueComp = new Vue({
el: '#app',
data: { list: [],currentIsTable,}, //isOpenLayer:false
mounted() {
getCurrentIsTableCallback = (data)=>{
this.currentIsTable = data;
// console.log('getCurrentIsTableCallback',data);
}
},
watch: {
isOpenLayer: function (ol,ne) {
console.log('watch isOpenLayer',ol,ne);
}
},
methods:{
}
});
function dragToVueGridStart(e) {
let targetParentEl = document.getElementById('grid-edit-content');
let parentRect = targetParentEl.getBoundingClientRect();
let mouseInGrid = false;
if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
mouseInGrid = true;
}
if (mouseInGrid === true && (currentLayoutVue.myLayout.findIndex(item => item.i === 'drop')) === -1) {
// targetParentEl.style = "cursor: move";
currentLayoutVue.myLayout.push({
x: (currentLayoutVue.myLayout.length * 2) % (currentLayoutVue.colNum || 12),
y: currentLayoutVue.myLayout.length + (currentLayoutVue.colNum || 12), // puts it at the bottom
w: 1,
h: 1,
i: 'drop',
});
}
let index = currentLayoutVue.myLayout.findIndex(item => item.i === 'drop');
if (index !== -1) {
try {
// console.log('currentLayoutVue.$refs.gridLayout.$children',currentLayoutVue.$refs.gridLayout.$children[currentLayoutVue.myLayout.length].$refs.item);
currentLayoutVue.$refs.gridLayout.$children[currentLayoutVue.myLayout.length].$refs.item.style.display = "none";
} catch {
}
let el = currentLayoutVue.$refs.gridLayout.$children[index];
el.dragging = {"top": mouseXY.y - parentRect.top, "left": mouseXY.x - parentRect.left};
let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
if (mouseInGrid === true) {
// console.log('dragToVueGridStart mouseInGrid === true');
currentLayoutVue.$refs.gridLayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1);
DragPos.i = String(index);
DragPos.x = currentLayoutVue.myLayout[index].x;
DragPos.y = currentLayoutVue.myLayout[index].y;
// console.log('dragToVueGridStart mouseInGrid === true',currentLayoutVue.myLayout);
}
if (mouseInGrid === false) {
// console.log('dragToVueGridStart mouseInGrid === false');
currentLayoutVue.$refs.gridLayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1);
// currentLayoutVue.myLayout = currentLayoutVue.myLayout.filter(obj => obj.i !== 'drop');
currentLayoutVue.myLayout.splice(index,1)
}
}
}
function dragToVueGridEnd(el,dataset){
// console.log('dragToVueGridEnd el',dataset);
// console.log(el);
el.className = 'nav-node vue-grid';
let parentRect = document.getElementById('grid-edit-content').getBoundingClientRect();
let mouseInGrid = false;
if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
mouseInGrid = true;
}
if (mouseInGrid === true) {
el.className = "nav-node vue-grid isHide";
let idArr = dataset.id.split('_')
let groupIndex = idArr[2].split(',')[1];
navListData[idArr[0]][idArr[1]][groupIndex].groupData[idArr[3]].visible = 1;
navListData[idArr[0]][idArr[1]][groupIndex].groupData[idArr[3]].showOnGrid = 0;
currentLayoutVue.myLayout[idArr[3]].visible = 1;
currentLayoutVue.myLayout[idArr[3]].showOnGrid = 0;
currentLayoutVue.myLayout[idArr[3]].x = DragPos.x;
currentLayoutVue.myLayout[idArr[3]].y = DragPos.y;
currentLayoutVue.myLayout[idArr[3]].w = 1;
currentLayoutVue.myLayout[idArr[3]].h = 1;
// console.log('currentLayoutVue.myLayout',currentLayoutVue.myLayout);
currentLayoutVue.$refs.gridLayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1);
// currentLayoutVue.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
try {
// currentLayoutVue.$refs.gridLayout.$children[currentLayoutVue.myLayout.length].$refs.item.style.display = "block";
} catch {
}
}
// console.log($('.layui-layer .vue-grid-item.vue-grid-placeholder'));
setTimeout(()=>{
$('.layui-layer .vue-grid-item.vue-grid-placeholder').hide();
let index = currentLayoutVue.myLayout.findIndex(item => item.i === 'drop');
if (index !== -1) {
console.log(index)
currentLayoutVue.myLayout.splice(index,1)
}
// console.log('dragToVueGridEnd -s',currentLayoutVue.myLayout);
},60)
// console.log('dragToVueGridEnd',currentLayoutVue.myLayout);
}
// tab 切换事件
function tabsChangeEvent(){
var element = layui.element;
element.on('tab(filter-tab)', function(data){
console.log(data.index); // 得到当前 tab 项的所在下标
tabLayoutIndex = $(this).attr('data-tab-layout-index');
tabsIndex[tabLayoutIndex] = data.index;
// console.log('tabLayoutIndex',tabLayoutIndex);
// console.log('tabsIndex',tabsIndex);
// console.log('layoutsData',layoutsData[tabLayoutIndex]);
});
}