|
|
|
@ -18,9 +18,13 @@
|
|
|
|
initData = {
|
|
|
|
initData = {
|
|
|
|
id: `grid_${generateUniqueId()}`,
|
|
|
|
id: `grid_${generateUniqueId()}`,
|
|
|
|
children: [],
|
|
|
|
children: [],
|
|
|
|
|
|
|
|
version: '1.0.0',
|
|
|
|
|
|
|
|
width: 1920,
|
|
|
|
|
|
|
|
height: 1080,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
initData = JSON.parse(initDataStorage);
|
|
|
|
initData = JSON.parse(initDataStorage);
|
|
|
|
|
|
|
|
conputedInitData('init');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log(initData, 'initData');
|
|
|
|
console.log(initData, 'initData');
|
|
|
|
|
|
|
|
|
|
|
|
@ -43,18 +47,38 @@
|
|
|
|
});
|
|
|
|
});
|
|
|
|
GridStack.setupDragIn('#components-panel .component-item', undefined, [
|
|
|
|
GridStack.setupDragIn('#components-panel .component-item', undefined, [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
w: 12,
|
|
|
|
w: 2,
|
|
|
|
h: 1,
|
|
|
|
h: 4,
|
|
|
|
type: 'banner',
|
|
|
|
type: 'image',
|
|
|
|
name: '我是轮播图',
|
|
|
|
name: '图片',
|
|
|
|
fontSize: 14,
|
|
|
|
image: '',
|
|
|
|
color: '#333',
|
|
|
|
eventsType: 'click',
|
|
|
|
|
|
|
|
eventsAction: '',
|
|
|
|
|
|
|
|
defaultFocus: false,
|
|
|
|
|
|
|
|
leftId: '',
|
|
|
|
|
|
|
|
rightId: '',
|
|
|
|
|
|
|
|
upId: '',
|
|
|
|
|
|
|
|
downId: '',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
w: 2,
|
|
|
|
|
|
|
|
h: 2,
|
|
|
|
|
|
|
|
type: 'text',
|
|
|
|
|
|
|
|
childrenType: '',
|
|
|
|
|
|
|
|
name: '文本',
|
|
|
|
background: '#fff',
|
|
|
|
background: '#fff',
|
|
|
|
detail: '',
|
|
|
|
fontSize: '14px',
|
|
|
|
icon: 'fa-image',
|
|
|
|
color: '#333',
|
|
|
|
link: '',
|
|
|
|
text: '文本',
|
|
|
|
|
|
|
|
fontWeight: 'normal',
|
|
|
|
|
|
|
|
eventsType: 'click',
|
|
|
|
|
|
|
|
eventsAction: '',
|
|
|
|
|
|
|
|
defaultFocus: false,
|
|
|
|
|
|
|
|
leftId: '',
|
|
|
|
|
|
|
|
rightId: '',
|
|
|
|
|
|
|
|
upId: '',
|
|
|
|
|
|
|
|
downId: '',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{ w: 2, h: 1 },
|
|
|
|
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
console.log(grid, 'grid实例');
|
|
|
|
console.log(grid, 'grid实例');
|
|
|
|
|
|
|
|
|
|
|
|
@ -98,6 +122,41 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 将当前选中组件的属性显示在右侧列表中
|
|
|
|
// 将当前选中组件的属性显示在右侧列表中
|
|
|
|
setCurrentComponentProps(currentComponent);
|
|
|
|
setCurrentComponentProps(currentComponent);
|
|
|
|
|
|
|
|
// 设置上下左右移动组件ID
|
|
|
|
|
|
|
|
setMoveComponentId(currentComponent);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置上下左右移动组件ID
|
|
|
|
|
|
|
|
var setMoveComponentId = function (component) {
|
|
|
|
|
|
|
|
const allComponents = grid.save();
|
|
|
|
|
|
|
|
if (allComponents.length <= 1) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setMoveComponentHtml('leftId', component, allComponents);
|
|
|
|
|
|
|
|
setMoveComponentHtml('rightId', component, allComponents);
|
|
|
|
|
|
|
|
setMoveComponentHtml('upId', component, allComponents);
|
|
|
|
|
|
|
|
setMoveComponentHtml('downId', component, allComponents);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var setMoveComponentHtml = function (idName, component, allComponents) {
|
|
|
|
|
|
|
|
let componentsHtml = [{ value: '', text: '请选择' }];
|
|
|
|
|
|
|
|
allComponents
|
|
|
|
|
|
|
|
.filter((item) => item.id !== component.id)
|
|
|
|
|
|
|
|
.map((item) => {
|
|
|
|
|
|
|
|
componentsHtml.push({ value: item.id, text: `${item.name}(${item.id})`, selected: item.id === component[idName] });
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
let el = $(`#${idName}`);
|
|
|
|
|
|
|
|
el.empty();
|
|
|
|
|
|
|
|
componentsHtml.forEach((item) => {
|
|
|
|
|
|
|
|
el.append(
|
|
|
|
|
|
|
|
$('<option>', {
|
|
|
|
|
|
|
|
value: item.value,
|
|
|
|
|
|
|
|
text: item.text,
|
|
|
|
|
|
|
|
selected: item.selected || false,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
@ -106,7 +165,6 @@
|
|
|
|
currentComponent = null;
|
|
|
|
currentComponent = null;
|
|
|
|
// 右侧显示请选择组件
|
|
|
|
// 右侧显示请选择组件
|
|
|
|
if (!$('#props-panel').find('wait-box').is(':visible')) {
|
|
|
|
if (!$('#props-panel').find('wait-box').is(':visible')) {
|
|
|
|
console.log('111');
|
|
|
|
|
|
|
|
$('#props-panel').find('.wait-box').show();
|
|
|
|
$('#props-panel').find('.wait-box').show();
|
|
|
|
$('#props-panel').find('form').hide();
|
|
|
|
$('#props-panel').find('form').hide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -116,33 +174,74 @@
|
|
|
|
//将当前选中组件的属性显示在右侧列表中
|
|
|
|
//将当前选中组件的属性显示在右侧列表中
|
|
|
|
var setCurrentComponentProps = function (component) {
|
|
|
|
var setCurrentComponentProps = function (component) {
|
|
|
|
const form = $('#props-panel').find('form');
|
|
|
|
const form = $('#props-panel').find('form');
|
|
|
|
|
|
|
|
if (component.hasOwnProperty('childrenType')) {
|
|
|
|
|
|
|
|
form.find('#childrenType').val(component.childrenType);
|
|
|
|
|
|
|
|
form.find('#childrenType').parent().show();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
form.find('#childrenType').parent().hide();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
form.find('#name').val(component.name);
|
|
|
|
form.find('#name').val(component.name);
|
|
|
|
form.find('#background').val(component.background);
|
|
|
|
|
|
|
|
form.find('#fontSize').val(component.fontSize);
|
|
|
|
if (component.hasOwnProperty('image')) {
|
|
|
|
form.find('#color').val(component.color);
|
|
|
|
form.find('#image').val(component.image);
|
|
|
|
form.find('#icon').val(component.icon);
|
|
|
|
form.find('#image').parent().show();
|
|
|
|
form.find('#detail').val(component.detail);
|
|
|
|
} else {
|
|
|
|
form.find('#link').val(component.link);
|
|
|
|
form.find('#image').parent().hide();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (component.hasOwnProperty('background')) {
|
|
|
|
|
|
|
|
form.find('#background').val(component.background);
|
|
|
|
|
|
|
|
form.find('#background').parent().show();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
form.find('#background').parent().hide();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (component.type === 'text') {
|
|
|
|
|
|
|
|
form.find('#text').val(component.text);
|
|
|
|
|
|
|
|
form.find('#fontSize').val(component.fontSize);
|
|
|
|
|
|
|
|
form.find('#color').val(component.color);
|
|
|
|
|
|
|
|
form.find('#fontWeight').val(component.fontWeight);
|
|
|
|
|
|
|
|
form.find('#text').parent().show();
|
|
|
|
|
|
|
|
form.find('#fontSize').parent().show();
|
|
|
|
|
|
|
|
form.find('#color').parent().show();
|
|
|
|
|
|
|
|
form.find('#fontWeight').parent().show();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
form.find('#text').parent().hide();
|
|
|
|
|
|
|
|
form.find('#fontSize').parent().hide();
|
|
|
|
|
|
|
|
form.find('#color').parent().hide();
|
|
|
|
|
|
|
|
form.find('#fontWeight').parent().hide();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form.find('#eventsType').val(component.eventsType);
|
|
|
|
|
|
|
|
form.find('#eventsAction').val(component.eventsAction);
|
|
|
|
|
|
|
|
form.find('#defaultFocus').val(component.defaultFocus);
|
|
|
|
|
|
|
|
form.find('#leftId').val(component.leftId);
|
|
|
|
|
|
|
|
form.find('#rightId').val(component.rightId);
|
|
|
|
|
|
|
|
form.find('#upId').val(component.upId);
|
|
|
|
|
|
|
|
form.find('#downId').val(component.downId);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 定义组件设置配置策略
|
|
|
|
// 定义组件设置配置策略
|
|
|
|
const componentStrategies = {
|
|
|
|
const componentStrategies = {
|
|
|
|
name: function (el, value) {
|
|
|
|
|
|
|
|
el.find('span').text(value);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
background: function (el, value) {
|
|
|
|
background: function (el, value) {
|
|
|
|
el.find('.grid-stack-item-content').css('background', value);
|
|
|
|
el.find('.grid-stack-item-content').css('background', value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
image: function (el, value) {
|
|
|
|
|
|
|
|
el.find('.grid-stack-item-content').css('background', `url(${value}) no-repeat center center`).css('background-size', 'cover');
|
|
|
|
|
|
|
|
},
|
|
|
|
fontSize: function (el, value) {
|
|
|
|
fontSize: function (el, value) {
|
|
|
|
el.find('span').css('font-size', value + 'px');
|
|
|
|
el.find('span').css('font-size', value + 'px');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
color: function (el, value) {
|
|
|
|
color: function (el, value) {
|
|
|
|
el.find('span').css('color', value);
|
|
|
|
el.find('span').css('color', value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
icon: function (el, value) {
|
|
|
|
text: function (el, value) {
|
|
|
|
el.find('i').attr('class', `fas ${value}`);
|
|
|
|
el.find('span').text(value);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
fontWeight: function (el, value) {
|
|
|
|
|
|
|
|
el.find('span').css('font-weight', value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// detail, link不需要反显页面所有不需要修改dom
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 设置当前传递组件的视图展示
|
|
|
|
// 设置当前传递组件的视图展示
|
|
|
|
@ -162,14 +261,20 @@
|
|
|
|
|
|
|
|
|
|
|
|
// 定义映射关系：元素ID -> 事件类型 -> 组件属性
|
|
|
|
// 定义映射关系：元素ID -> 事件类型 -> 组件属性
|
|
|
|
const elementMappings = {
|
|
|
|
const elementMappings = {
|
|
|
|
name: { event: 'blur', property: 'name' },
|
|
|
|
childrenType: { event: 'blur', property: 'childrenType' },
|
|
|
|
background: { event: 'blur', property: 'background' },
|
|
|
|
background: { event: 'blur', property: 'background' },
|
|
|
|
|
|
|
|
image: { event: 'change', property: 'image' },
|
|
|
|
fontSize: { event: 'blur', property: 'fontSize' },
|
|
|
|
fontSize: { event: 'blur', property: 'fontSize' },
|
|
|
|
color: { event: 'blur', property: 'color' },
|
|
|
|
color: { event: 'blur', property: 'color' },
|
|
|
|
icon: { event: 'blur', property: 'icon' },
|
|
|
|
text: { event: 'blur', property: 'text' },
|
|
|
|
detail: { event: 'blur', property: 'detail' },
|
|
|
|
fontWeight: { event: 'blur', property: 'fontWeight' },
|
|
|
|
link: { event: 'blur', property: 'link' },
|
|
|
|
eventsType: { event: 'blur', property: 'eventsType' },
|
|
|
|
// icon: { event: 'change', property: 'icon' }, // select使用change
|
|
|
|
eventsAction: { event: 'blur', property: 'eventsAction' },
|
|
|
|
|
|
|
|
defaultFocus: { event: 'blur', property: 'defaultFocus' },
|
|
|
|
|
|
|
|
leftId: { event: 'change', property: 'leftId' },
|
|
|
|
|
|
|
|
rightId: { event: 'change', property: 'rightId' },
|
|
|
|
|
|
|
|
upId: { event: 'change', property: 'upId' },
|
|
|
|
|
|
|
|
downId: { event: 'change', property: 'downId' },
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 统一绑定函数
|
|
|
|
// 统一绑定函数
|
|
|
|
@ -189,12 +294,44 @@
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 保存的时候计算x,y,w,h
|
|
|
|
|
|
|
|
var conputedInitData = function (type) {
|
|
|
|
|
|
|
|
if (type === 'save') {
|
|
|
|
|
|
|
|
let initDataCopy = JSON.parse(JSON.stringify(initData));
|
|
|
|
|
|
|
|
initDataCopy.children.forEach((item) => {
|
|
|
|
|
|
|
|
item.xCopy = item.x;
|
|
|
|
|
|
|
|
item.x = item.x * (1920 / 12);
|
|
|
|
|
|
|
|
item.yCopy = item.y;
|
|
|
|
|
|
|
|
item.y = item.y * cellHeight;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
item.wCopy = item.w;
|
|
|
|
|
|
|
|
item.w = item.w * (1920 / 12);
|
|
|
|
|
|
|
|
if (!item.hasOwnProperty('h')) {
|
|
|
|
|
|
|
|
item.h = 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
item.hCopy = item.h;
|
|
|
|
|
|
|
|
item.h = item.h * cellHeight;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log(initDataCopy);
|
|
|
|
|
|
|
|
return initDataCopy;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (type === 'init') {
|
|
|
|
|
|
|
|
initData.children.forEach((item) => {
|
|
|
|
|
|
|
|
item.x = item.xCopy;
|
|
|
|
|
|
|
|
item.y = item.yCopy;
|
|
|
|
|
|
|
|
item.w = item.wCopy;
|
|
|
|
|
|
|
|
item.h = item.hCopy;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
$('.save-container').click(function () {
|
|
|
|
$('.save-container').click(function () {
|
|
|
|
// grid.addWidget({ w: 2, content: 'item 1' });
|
|
|
|
// grid.addWidget({ w: 2, content: 'item 1' });
|
|
|
|
console.log(grid.save());
|
|
|
|
// console.log(grid.save());
|
|
|
|
console.log(grid);
|
|
|
|
// console.log(grid);
|
|
|
|
initData.children = grid.save();
|
|
|
|
initData.children = grid.save();
|
|
|
|
localStorage.setItem('initData', JSON.stringify(initData));
|
|
|
|
console.log(initData);
|
|
|
|
|
|
|
|
localStorage.setItem('initData', JSON.stringify(conputedInitData('save')));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/** 执行方法 */
|
|
|
|
/** 执行方法 */
|
|
|
|
|
lichaojun
2 weeks ago
