minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 拖拽布局-校验问题

Browse Source
flex-api
LCJ-MinYa 3 weeks ago
parent 1569ccfd1d
commit 4482882d51
5 changed files with 112 additions and 29 deletions
Show Stats Download Patch File Download Diff File

25
demoHtml/flex/index.html
Unescape Escape View File

@ -125,11 +125,9 @@
</button> </button>
<div class="form-item"> <div class="form-item">
<label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label> <label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
<input <select id="childrenType">
type="text" <option value="">{{= i18n.$t('user.please_select') }}</option>
id="childrenType" </select>
placeholder="{{= i18n.$t('user.please_input') }}"
/>
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="name">{{= i18n.$t('user.component_name') }}</label> <label for="name">{{= i18n.$t('user.component_name') }}</label>
@ -143,11 +141,6 @@
<label for="image">{{= i18n.$t('user.background_image') }}</label> <label for="image">{{= i18n.$t('user.background_image') }}</label>
<select id="image"> <select id="image">
<option value="">{{= i18n.$t('user.please_select') }}</option> <option value="">{{= i18n.$t('user.please_select') }}</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/4.jpg">图片四</option>
</select> </select>
</div> </div>
<div class="form-item"> <div class="form-item">
@ -192,18 +185,16 @@
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="eventsAction">{{= i18n.$t('user.events_action') }}</label> <label for="eventsAction">{{= i18n.$t('user.events_action') }}</label>
<input <select id="eventsAction">
type="text" <option value="">{{= i18n.$t('user.please_select') }}</option>
id="eventsAction" </select>
placeholder="{{= i18n.$t('user.please_input') }}"
/>
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="defaultFocus">{{= i18n.$t('user.default_focus') }}</label> <label for="defaultFocus">{{= i18n.$t('user.default_focus') }}</label>
<select id="defaultFocus"> <select id="defaultFocus">
<option value="">{{= i18n.$t('user.please_select') }}</option> <option value="">{{= i18n.$t('user.please_select') }}</option>
<option value="true">{{= i18n.$t('user.yes') }}</option> <option value="1">{{= i18n.$t('user.yes') }}</option>
<option value="false">{{= i18n.$t('user.no') }}</option> <option value="0">{{= i18n.$t('user.no') }}</option>
</select> </select>
</div> </div>
<div class="form-item"> <div class="form-item">

2
demoHtml/flex/js/i18n.js
Unescape Escape View File

@ -44,6 +44,7 @@ var userLangConfig = {
focused_border_color: '获得焦点时边框颜色', focused_border_color: '获得焦点时边框颜色',
focused_scale: '获得焦点时边框缩放大小', focused_scale: '获得焦点时边框缩放大小',
copy_component: '复制组件', copy_component: '复制组件',
default_focus_tip: '默认聚焦只能存在一个',
}, },
list: { list: {
update_time: '更新时间', update_time: '更新时间',
@ -103,6 +104,7 @@ var userLangConfig = {
focused_border_color: 'focused border color', focused_border_color: 'focused border color',
focused_scale: 'focused border scale', focused_scale: 'focused border scale',
copy_component: 'copy component', copy_component: 'copy component',
default_focus_tip: 'default focus only one',
}, },
list: { list: {
update_time: 'update time', update_time: 'update time',

108
demoHtml/flex/js/index.js
Unescape Escape View File

@ -28,7 +28,7 @@
image: '', image: '',
eventsType: 'click', eventsType: 'click',
eventsAction: '', eventsAction: '',
defaultFocus: false, defaultFocus: '0',
leftId: '', leftId: '',
rightId: '', rightId: '',
upId: '', upId: '',
@ -51,7 +51,7 @@
fontWeight: 'normal', fontWeight: 'normal',
eventsType: 'click', eventsType: 'click',
eventsAction: '', eventsAction: '',
defaultFocus: false, defaultFocus: '0',
leftId: '', leftId: '',
rightId: '', rightId: '',
upId: '', upId: '',
@ -453,6 +453,18 @@
if (!value) return; if (!value) return;
el.find('span').css('font-weight', value); 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) { focusedStyle_background: function (el, value, component) {
initColorPicker('focusedStyle_background', component); initColorPicker('focusedStyle_background', component);
if (!value) return; if (!value) return;
@ -499,7 +511,7 @@
// 定义映射关系：元素ID -> 事件类型 -> 组件属性 // 定义映射关系：元素ID -> 事件类型 -> 组件属性
const elementMappings = { const elementMappings = {
name: { event: 'blur', property: 'name' }, name: { event: 'blur', property: 'name' },
childrenType: { event: 'blur', property: 'childrenType' }, childrenType: { event: 'change', property: 'childrenType' },
background: { event: 'blur', property: 'background' }, background: { event: 'blur', property: 'background' },
image: { event: 'change', property: 'image' }, image: { event: 'change', property: 'image' },
fontSize: { event: 'blur', property: 'fontSize' }, fontSize: { event: 'blur', property: 'fontSize' },
@ -507,7 +519,7 @@
text: { event: 'blur', property: 'text' }, text: { event: 'blur', property: 'text' },
fontWeight: { event: 'blur', property: 'fontWeight' }, fontWeight: { event: 'blur', property: 'fontWeight' },
eventsType: { event: 'change', property: 'eventsType' }, eventsType: { event: 'change', property: 'eventsType' },
eventsAction: { event: 'blur', property: 'eventsAction' }, eventsAction: { event: 'change', property: 'eventsAction' },
defaultFocus: { event: 'change', property: 'defaultFocus' }, defaultFocus: { event: 'change', property: 'defaultFocus' },
leftId: { event: 'change', property: 'leftId' }, leftId: { event: 'change', property: 'leftId' },
rightId: { event: 'change', property: 'rightId' }, rightId: { event: 'change', property: 'rightId' },
@ -570,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 () { var canSave = function () {
const { please_input, template_name } = userLangConfig[locale].user; const { please_input, template_name } = userLangConfig[locale].user;
@ -577,6 +607,16 @@
layer.msg(`${please_input}${template_name}`); layer.msg(`${please_input}${template_name}`);
return false; return false;
} }
const welcomeChildrens = welcome.grid.save();
const mainChildrens = main.grid.save();
if (!validateDefaultFocus(welcomeChildrens)) {
return false;
}
if (!validateDefaultFocus(mainChildrens)) {
return false;
}
return true; return true;
}; };
@ -630,7 +670,7 @@
background: currentComponent.background, background: currentComponent.background,
eventsType: currentComponent.eventsType, eventsType: currentComponent.eventsType,
eventsAction: currentComponent.eventsAction, eventsAction: currentComponent.eventsAction,
defaultFocus: false, defaultFocus: '0',
leftId: currentComponent.leftId, leftId: currentComponent.leftId,
rightId: currentComponent.rightId, rightId: currentComponent.rightId,
upId: currentComponent.upId, upId: currentComponent.upId,
@ -706,6 +746,7 @@
item.hCopy = item.h; item.hCopy = item.h;
item.h = item.h * cellHeight * 2; item.h = item.h * cellHeight * 2;
item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize; item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize;
item.defaultFocus = item.defaultFocus == '1' ? true : false;
// 调用辅助函数处理带下划线的数据 // 调用辅助函数处理带下划线的数据
Object.assign(item, transformUnderscoreData(item)); // 将转换后的属性合并回item Object.assign(item, transformUnderscoreData(item)); // 将转换后的属性合并回item
@ -719,13 +760,14 @@
item.y = item.yCopy; item.y = item.yCopy;
item.w = item.wCopy; item.w = item.wCopy;
item.h = item.hCopy; item.h = item.hCopy;
item.defaultFocus = item.defaultFocus == true ? '1' : '0';
}); });
} }
}; };
var i18n = function () { var i18n = function () {
return new Promise((resolve) => { return new Promise((resolve) => {
requestFN({ url: 'getLanguage', hasPreFix: false }, function (data) { requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
data.language = 'zh_CN'; data.language = 'zh_CN';
locale = data.language; locale = data.language;
// 设置语言 // 设置语言
@ -747,15 +789,63 @@
}; };
var getImageData = function () { 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 () { 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 () { 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,
})
);
});
});
}; };
// 获取单个参数 // 获取单个参数

2
demoHtml/flex/js/list.js
Unescape Escape View File

@ -89,7 +89,7 @@
var i18n = function () { var i18n = function () {
return new Promise((resolve) => { return new Promise((resolve) => {
requestFN({ url: 'getLanguage', hasPreFix: false }, function (data) { requestFN({ url: '/getLanguage', hasPreFix: false }, function (data) {
locale = data.language; locale = data.language;
// 设置语言 // 设置语言
layui.i18n.set({ layui.i18n.set({

4
demoHtml/flex/js/utils.js
Unescape Escape View File

@ -134,8 +134,8 @@ function rgbaToHexWithValidation(rgbaStr) {
} }
var api = { var api = {
baseUrl: 'http://www.dtviptvott.com:20018/', baseUrl: 'http://www.dtviptvott.com:20018',
preFix: 'template/', preFix: '/template/',
}; };
var requestFN = function ({ type = 'GET', url, data = {}, hasPreFix = true }, successCallback, errorCallback) { var requestFN = function ({ type = 'GET', url, data = {}, hasPreFix = true }, successCallback, errorCallback) {

Write Preview
Loading…
Cancel
Save