|
|
|
|
@ -10,7 +10,7 @@
|
|
|
|
|
let currentComponent = null;
|
|
|
|
|
let currentScreen = 'welcome';
|
|
|
|
|
let cellHeight = 30;
|
|
|
|
|
let locale = 'en';
|
|
|
|
|
let locale = 'en_US';
|
|
|
|
|
|
|
|
|
|
var initGridStack = () => {
|
|
|
|
|
// 让gridstack知道如何渲染，组件children中的content直接渲染html
|
|
|
|
|
@ -28,7 +28,7 @@
|
|
|
|
|
image: '',
|
|
|
|
|
eventsType: 'click',
|
|
|
|
|
eventsAction: '',
|
|
|
|
|
defaultFocus: false,
|
|
|
|
|
defaultFocus: '0',
|
|
|
|
|
leftId: '',
|
|
|
|
|
rightId: '',
|
|
|
|
|
upId: '',
|
|
|
|
|
@ -51,7 +51,7 @@
|
|
|
|
|
fontWeight: 'normal',
|
|
|
|
|
eventsType: 'click',
|
|
|
|
|
eventsAction: '',
|
|
|
|
|
defaultFocus: false,
|
|
|
|
|
defaultFocus: '0',
|
|
|
|
|
leftId: '',
|
|
|
|
|
rightId: '',
|
|
|
|
|
upId: '',
|
|
|
|
|
@ -322,6 +322,13 @@
|
|
|
|
|
$('#page-prop').hide();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 设置复制按钮
|
|
|
|
|
if (isScreen(component.type)) {
|
|
|
|
|
$('#copy-component').hide();
|
|
|
|
|
} else {
|
|
|
|
|
$('#copy-component').show();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const form = $('#props-panel').find('form');
|
|
|
|
|
if (component.hasOwnProperty('childrenType')) {
|
|
|
|
|
form.find('#childrenType').val(component.childrenType);
|
|
|
|
|
@ -446,6 +453,18 @@
|
|
|
|
|
if (!value) return;
|
|
|
|
|
el.find('span').css('font-weight', value);
|
|
|
|
|
},
|
|
|
|
|
defaultFocus: function (el, value, component) {
|
|
|
|
|
if (value != '1') {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 默认聚焦一个画布只能存在一个true
|
|
|
|
|
let childrens = currentScreen === 'welcome' ? welcome.grid.engine.nodes : main.grid.engine.nodes;
|
|
|
|
|
childrens.forEach((item) => {
|
|
|
|
|
if (item.id !== component.id) {
|
|
|
|
|
item.defaultFocus = '0';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
focusedStyle_background: function (el, value, component) {
|
|
|
|
|
initColorPicker('focusedStyle_background', component);
|
|
|
|
|
if (!value) return;
|
|
|
|
|
@ -492,7 +511,7 @@
|
|
|
|
|
// 定义映射关系：元素ID -> 事件类型 -> 组件属性
|
|
|
|
|
const elementMappings = {
|
|
|
|
|
name: { event: 'blur', property: 'name' },
|
|
|
|
|
childrenType: { event: 'blur', property: 'childrenType' },
|
|
|
|
|
childrenType: { event: 'change', property: 'childrenType' },
|
|
|
|
|
background: { event: 'blur', property: 'background' },
|
|
|
|
|
image: { event: 'change', property: 'image' },
|
|
|
|
|
fontSize: { event: 'blur', property: 'fontSize' },
|
|
|
|
|
@ -500,7 +519,7 @@
|
|
|
|
|
text: { event: 'blur', property: 'text' },
|
|
|
|
|
fontWeight: { event: 'blur', property: 'fontWeight' },
|
|
|
|
|
eventsType: { event: 'change', property: 'eventsType' },
|
|
|
|
|
eventsAction: { event: 'blur', property: 'eventsAction' },
|
|
|
|
|
eventsAction: { event: 'change', property: 'eventsAction' },
|
|
|
|
|
defaultFocus: { event: 'change', property: 'defaultFocus' },
|
|
|
|
|
leftId: { event: 'change', property: 'leftId' },
|
|
|
|
|
rightId: { event: 'change', property: 'rightId' },
|
|
|
|
|
@ -563,6 +582,24 @@
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 抽取校验函数
|
|
|
|
|
function validateDefaultFocus(children) {
|
|
|
|
|
const { default_focus_tip } = userLangConfig[locale].user;
|
|
|
|
|
if (children.length) {
|
|
|
|
|
let hasDefaultFocus = false;
|
|
|
|
|
children.forEach((item) => {
|
|
|
|
|
if (item.defaultFocus == '1') {
|
|
|
|
|
hasDefaultFocus = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (!hasDefaultFocus) {
|
|
|
|
|
layer.msg(`${default_focus_tip}`);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 保存时判断是否满足条件可保存
|
|
|
|
|
var canSave = function () {
|
|
|
|
|
const { please_input, template_name } = userLangConfig[locale].user;
|
|
|
|
|
@ -570,6 +607,16 @@
|
|
|
|
|
layer.msg(`${please_input}${template_name}`);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const welcomeChildrens = welcome.grid.save();
|
|
|
|
|
const mainChildrens = main.grid.save();
|
|
|
|
|
if (!validateDefaultFocus(welcomeChildrens)) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (!validateDefaultFocus(mainChildrens)) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -586,19 +633,28 @@
|
|
|
|
|
localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
|
|
|
|
|
localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
|
|
|
|
|
|
|
|
|
|
requestFN(
|
|
|
|
|
{
|
|
|
|
|
type: 'POST',
|
|
|
|
|
url: getQueryParam('id') ? 'update' : 'save',
|
|
|
|
|
data: {
|
|
|
|
|
let id = getQueryParam('id');
|
|
|
|
|
let data = {
|
|
|
|
|
name: $('#templateName').val(),
|
|
|
|
|
content: JSON.stringify({
|
|
|
|
|
mainData: conputedInitData('save', main),
|
|
|
|
|
welcomeData: conputedInitData('save', welcome),
|
|
|
|
|
}),
|
|
|
|
|
};
|
|
|
|
|
if (id) {
|
|
|
|
|
data.id = id;
|
|
|
|
|
}
|
|
|
|
|
let loadIndex = layer.load(2, { shade: 0.5 });
|
|
|
|
|
requestFN(
|
|
|
|
|
{
|
|
|
|
|
type: 'POST',
|
|
|
|
|
url: id ? 'update' : 'save',
|
|
|
|
|
data,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
function () {}
|
|
|
|
|
function () {
|
|
|
|
|
layer.msg(userLangConfig[locale].base.success);
|
|
|
|
|
layer.close(loadIndex);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
@ -618,7 +674,7 @@
|
|
|
|
|
background: currentComponent.background,
|
|
|
|
|
eventsType: currentComponent.eventsType,
|
|
|
|
|
eventsAction: currentComponent.eventsAction,
|
|
|
|
|
defaultFocus: false,
|
|
|
|
|
defaultFocus: '0',
|
|
|
|
|
leftId: currentComponent.leftId,
|
|
|
|
|
rightId: currentComponent.rightId,
|
|
|
|
|
upId: currentComponent.upId,
|
|
|
|
|
@ -694,6 +750,7 @@
|
|
|
|
|
item.hCopy = item.h;
|
|
|
|
|
item.h = item.h * cellHeight * 2;
|
|
|
|
|
item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize;
|
|
|
|
|
item.defaultFocus = item.defaultFocus == '1' ? true : false;
|
|
|
|
|
|
|
|
|
|
// 调用辅助函数处理带下划线的数据
|
|
|
|
|
Object.assign(item, transformUnderscoreData(item)); // 将转换后的属性合并回item
|
|
|
|
|
@ -707,22 +764,23 @@
|
|
|
|
|
item.y = item.yCopy;
|
|
|
|
|
item.w = item.wCopy;
|
|
|
|
|
item.h = item.hCopy;
|
|
|
|
|
item.defaultFocus = item.defaultFocus == true ? '1' : '0';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var i18n = function () {
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
locale = 'zh-CN';
|
|
|
|
|
// locale = 'en';
|
|
|
|
|
requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
|
|
|
|
|
data.language = 'zh_CN';
|
|
|
|
|
locale = data.language;
|
|
|
|
|
// 设置语言
|
|
|
|
|
layui.i18n.set({
|
|
|
|
|
locale: locale,
|
|
|
|
|
messages: {
|
|
|
|
|
// 扩展其他语言包
|
|
|
|
|
en: userLangConfig.en,
|
|
|
|
|
'zh-CN': userLangConfig['zh-CN'],
|
|
|
|
|
en_US: userLangConfig['en_US'],
|
|
|
|
|
zh_CN: userLangConfig['zh_CN'],
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
// 渲染页面模板
|
|
|
|
|
@ -730,20 +788,68 @@
|
|
|
|
|
const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
|
|
|
|
|
$('#root').html(html);
|
|
|
|
|
resolve();
|
|
|
|
|
}, 500);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var getImageData = function () {
|
|
|
|
|
requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function () {});
|
|
|
|
|
requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function (data) {
|
|
|
|
|
let el = $('#image');
|
|
|
|
|
let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
|
|
|
|
|
data.map((item) => {
|
|
|
|
|
componentsHtml.push({ value: api.baseUrl + item.path, text: `${item.name}` });
|
|
|
|
|
});
|
|
|
|
|
el.empty();
|
|
|
|
|
componentsHtml.forEach((item) => {
|
|
|
|
|
el.append(
|
|
|
|
|
$('<option>', {
|
|
|
|
|
value: item.value,
|
|
|
|
|
text: item.text,
|
|
|
|
|
selected: item.selected || false,
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var getMenuData = function () {
|
|
|
|
|
requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function () {});
|
|
|
|
|
requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function (data) {
|
|
|
|
|
let el = $('#eventsAction');
|
|
|
|
|
let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
|
|
|
|
|
data.map((item) => {
|
|
|
|
|
componentsHtml.push({ value: item.name, text: `${item.name}` });
|
|
|
|
|
});
|
|
|
|
|
el.empty();
|
|
|
|
|
componentsHtml.forEach((item) => {
|
|
|
|
|
el.append(
|
|
|
|
|
$('<option>', {
|
|
|
|
|
value: item.value,
|
|
|
|
|
text: item.text,
|
|
|
|
|
selected: item.selected || false,
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var getComponentData = function () {
|
|
|
|
|
requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function () {});
|
|
|
|
|
requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function (data) {
|
|
|
|
|
let el = $('#childrenType');
|
|
|
|
|
let componentsHtml = [{ value: '', text: el.find('option').eq(0).text() }];
|
|
|
|
|
data.map((item) => {
|
|
|
|
|
componentsHtml.push({ value: item.name, text: `${item.name}` });
|
|
|
|
|
});
|
|
|
|
|
el.empty();
|
|
|
|
|
componentsHtml.forEach((item) => {
|
|
|
|
|
el.append(
|
|
|
|
|
$('<option>', {
|
|
|
|
|
value: item.value,
|
|
|
|
|
text: item.text,
|
|
|
|
|
selected: item.selected || false,
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 获取单个参数
|
|
|
|
|
|
LCJ-MinYa