Skip to content

S
Skyeye

Skyeye云 / Skyeye

通知 1438
Star 162
Fork 130
S
Skyeye
提交 2906302c 编写于 作者: Skyeye云's avatar Skyeye云
浏览文件
操作

布局保存功能完成

上级 50be4040
隐藏空白更改
内联 并排
Showing with 216 addition and 121 deletion
common/src/main/resources/template/js/dsFormPage/dsFormPageDesign.js
浏览文件 @ 2906302c
......@@ -4,20 +4,26 @@ var layedit, form;
// 选中的表单布局组件信息
var contentData;
// 表单布局里的组件列表
var contentList = [];
// 子页面调用的函数
var sortDataIn;
// 业务对象的属性信息
var attrList = [];
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui', 'jqueryUI', 'tagEditor'].concat(dsFormUtil.mastHaveImport), function (exports) {
}).define(['window', 'jquery', 'winui', 'dragula', 'tagEditor'].concat(dsFormUtil.mastHaveImport), function (exports) {
winui.renderColor();
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$;
layedit = layui.layedit,
form = layui.form;
// 表单布局里的组件列表
var contentList = [];
var inPageTitle = "已存在布局中，不可选择.";
var noComponentTitle = "未绑定组件，不可选择.";
// 表单控件集合
var componentList = [];
......@@ -30,9 +36,7 @@ layui.config({
// 加载表单控件
loadLeftBoxItem();
// 加载属性
loadClassAttr();
AjaxPostUtil.request({url: reqBasePath + "dsformpage006", params: {id: pageId}, type: 'json', method: 'GET', callback: function (json) {
// 加载页面内容
loadPageMation({rows: json.bean.dsFormPageContents});
......@@ -42,56 +46,45 @@ layui.config({
function loadNewControl(item) {
item = dsFormUtil.loadComponent('showForm', item);
$("#showForm div[contentId='" + item.id + "']").append(`<div class="btn-base">
<button type="button" class="btn copyThis" title="复制组件"><i class="fa fa-copy"></i></button>
<button type="button" class="btn btn-danger removeThis" title="删除"><i class="fa fa-trash"></i></button>
</div>`);
var attrKey = item.attrKey;
if (!isNull(attrKey)) {
$(`#attrBox div[attrKey=${attrKey}]`).attr('title', inPageTitle);
$(`#attrBox div[attrKey=${attrKey}]`).find('i').removeClass("i-label-class");
$(`#attrBox div[attrKey=${attrKey}]`).addClass("no-choose");
$(`#attrBox div[attrKey=${attrKey}]`).find('label').addClass("no-choose");
}
contentList.push(item);
form.render();
}
// 复制组件
$("body").on("click", ".copyThis", function (e) {
var contentId = $(this).parents('.layui-form-item').attr("contentId");
$("#showForm div[contentId='" + contentId + "']").remove();
var dsFormComponent = getInPoingArr(contentList, 'id', contentId, 'dsFormComponent');
getFormPageControlContent(dsFormComponent.id);
});
// 删除
$("body").on("click", ".removeThis", function (e) {
var contentId = $(this).parents('.layui-form-item').attr("contentId");
$("#showForm div[contentId='" + contentId + "']").remove();
var content = getInPoingArr(contentList, 'id', contentId);
if (!isNull(content.attrKey)) {
$(`#attrBox div[attrKey=${content.attrKey}]`).attr('title', '');
$(`#attrBox div[attrKey=${content.attrKey}]`).removeClass("no-choose");
$(`#attrBox div[attrKey=${content.attrKey}]`).find('i').addClass("i-label-class");
$(`#attrBox div[attrKey=${content.attrKey}]`).find('label').removeClass("no-choose");
}
contentList = arrayUtil.removeArrayPointKey(contentList, 'id', contentId);
contentData = null;
$("#editPageContent").attr("src", "../../tpl/dsFormPage/editPageContent.html");
});
function loadPageMation(json) {
$.each(json.rows, function(i, item) {
$("#attrBox").html(getDataUseHandlebars($("#leftAttrBoxItem").html(), {rows: attrList}));
$.each(json.rows, function (i, item) {
loadNewControl(item);
});
loadFormItemDrop();
matchingLanguage();
}
function loadFormItemDrop() {
$.each($("#showForm").find(".layui-form-item"), function(i, item) {
var _this = $(item);
if(!_this.hasClass('form-group')){
_this.addClass('form-group');
}
if(!_this.hasClass('draggable')){
_this.addClass('draggable');
}
if(!_this.hasClass('ui-draggable')){
_this.addClass('ui-draggable');
}
if(!_this.hasClass('dropped')){
_this.addClass('dropped');
}
});
}
// 加载表单控件
function loadLeftBoxItem() {
showGrid({
......@@ -110,30 +103,8 @@ layui.config({
});
},
ajaxSendAfter:function (json) {
form.render();
$(".draggable").draggable({
appendTo: "body",
helper: "clone",
drag: function (event, ui) {},
stop: function () {}
});
$(".droppable").droppable({
accept: ".draggable",
helper: "clone",
hoverClass: "droppable-active",
drop: function(event, ui) {
$(".empty-form").remove();
var _this = $(ui.draggable);
if (!_this.hasClass("dropped")) {
getFormPageControlContent(_this.attr("componentId"));
} else {
if ($(this)[0] != _this.parent()[0]) {
var $el = _this.clone().appendTo(this);
_this.remove()
}
}
}
}).sortable();
// 加载属性
loadClassAttr();
}
});
}
......@@ -151,25 +122,66 @@ layui.config({
$.each(json.rows, function (i, item) {
if (isNull(item.dsFormComponent)) {
item.class = "no-choose";
item.showTitle = noComponentTitle;
} else {
item.iLabelClass = "i-label-class";
var temp = getInPoingArr(contentList, 'attrKey', item.attrKey);
if (!isNull(temp)) {
item.class = "no-choose";
item.showTitle = inPageTitle;
} else {
item.iLabelClass = "i-label-class";
}
}
});
attrList = [].concat(json.rows);
},
ajaxSendAfter:function (json) {
form.render();
dragula([document.getElementById('btnBox'), document.getElementById('attrBox'), document.getElementById('showForm')], {
copy: function (el, source) {//复制
var check = checkMove(el);
if (!check) {
return false;
}
return source === document.getElementById('btnBox') || source === document.getElementById('attrBox');
},
accepts: function (el, target) {//移动
var check = checkMove(el);
if (!check) {
return false;
}
return target != document.getElementById('btnBox') && target != document.getElementById('attrBox');
}
}).on('drop', function (el, container) {//放置
if ($(container).attr("id") == 'showForm') {
var attrKey = $(el).attr("attrKey");
attrKey = isNull(attrKey) ? '' : attrKey;
addPageContent($(el).attr("componentId"), attrKey);
}
});
}
});
}
function checkMove(el) {
if (el.className.indexOf('no-choose') >= 0) {
return false;
}
return true;
}
function getFormPageControlContent(id) {
function addPageContent(id, attrKey) {
var dsFormComponent = getInPoingArr(componentList, 'id', id);
if (isNull(dsFormComponent)) {
return false;
}
var params = {
width: 'layui-col-xs12',
title: dsFormComponent.name,
formContentId: id,
dsFormComponent: dsFormComponent,
attrKey: attrKey,
attrDefinition: !isNull(attrKey) ? getInPoingArr(attrList, 'attrKey', attrKey) : null,
id: getRandomValueToString()
};
loadNewControl(params);
......@@ -177,17 +189,21 @@ layui.config({
}
// 页面控件点击事件
$("body").on("click", ".form-group", function() {
$("#showForm .form-group").removeClass('ui-sortable-placeholder-choose');
$("#showForm .form-group").find('.btn-base').hide();
$(this).addClass("ui-sortable-placeholder-choose");
var contentId = $(this).attr("contentId");
$("body").on("click", "#showForm .layui-form-item", function() {
initFormItemClick($(this));
});
function initFormItemClick(_this) {
$("#showForm .layui-form-item").removeClass('ui-sortable-placeholder-choose');
$("#showForm .layui-form-item").find('.btn-base').hide();
_this.addClass("ui-sortable-placeholder-choose");
var contentId = _this.attr("contentId");
$("#showForm div[contentId='" + contentId + "']").find('.btn-base').show();
contentData = getInPoingArr(contentList, 'id', contentId);
$("#editPageContent").attr("src", "../../tpl/dsFormPage/editPageContent.html");
});
function sortDataIn() {
}
sortDataIn = function () {
// 对控件进行排序
$.each(contentList, function(i, item) {
var inIndex = $("#showForm div[contentId='" + item.id + "']").index();
......@@ -199,15 +215,34 @@ layui.config({
contentList = [];
loadPageMation({rows: newJson});
}
var tip_index;
$("body").on("mouseenter", ".attr-mation", function (e) {
var title = $(this).attr('title');
if (isNull(title)) {
return false;
}
tip_index = layer.tips(title, this, {time: 0, tips: 3});
}).on('mouseleave', ".attr-mation", function() {
layer.close(tip_index);
});
// 保存
$("body").on("click", "#save", function() {
for (var i = 0; i < contentList.length; i++) {
var item = contentList[i];
if (isNull(item.attrKey)) {
winui.window.msg("存在无关联属性组件，请移除.", {icon: 2, time: 2000});
initFormItemClick($("#showForm div[contentId='" + item.id + "']"));
return false;
}
}
sortDataIn();
if (contentList.length == 0) {
winui.window.msg('保存页面不能为空！', {icon: 2, time: 2000});
return;
var params = {
pageId: pageId,
dsFormPageContentList: JSON.stringify(contentList)
}
AjaxPostUtil.request({url: reqBasePath + "todo 待写", params: {formedit: JSON.stringify(contentList)}, type: 'json', callback: function (json) {
AjaxPostUtil.request({url: reqBasePath + "writeDsFormPageContent", params: params, type: 'json', method: 'POST', callback: function (json) {
winui.window.msg("保存成功", {icon: 1, time: 2000});
parent.refreshCode = '0';
}});
......
common/src/main/resources/template/js/dsFormPage/editPageContent.js
浏览文件 @ 2906302c
......@@ -40,6 +40,33 @@ layui.config({
$("#showForm").html(getDataUseHandlebars($("#controlItemEdit").html(), {bean: data}));
// 属性信息
var attrs = [];
$.each(parent.attrList, function (i, item) {
// 获取已经绑定组件的属性并且适用于当前组件的属性
if (!isNull(item.dsFormComponent) && data.dsFormComponent.id == item.dsFormComponent.id) {
attrs.push({
id: item.attrKey,
name: item.name
})
}
});
$("#attrKey").html(getDataUseHandlebars(selOption, {rows: attrs}));
$("#attrKey").val(data.attrKey);
form.on('select(attrKey)', function(data) {
if (!isNull(data.value)) {
// 判断该属性是否已经存在
var temp = getInPoingArr(parent.contentList, 'attrKey', data.value);
if (!isNull(temp)) {
winui.window.msg('该属性已存在于布局，请重新选择.', {icon: 2, time: 2000});
$("#attrKey").val('');
}
}
});
// 宽度
skyeyeClassEnumUtil.showEnumDataListByClassName("widthScale", 'select', "width", data.width, form);
// 加载组件关联的属性
$.each(data.dsFormComponent.attrKeys, function (i, item) {
$("#" + item).removeClass("layui-hide");
......@@ -64,26 +91,25 @@ layui.config({
form.render();
form.on('submit(formAddBean)', function (data) {
if (winui.verifyForm(data.elem)) {
saveNodeData(data, data.id);
winui.window.msg("保存成功", {icon: 1, time: 2000});
saveNodeData();
}
return false;
});
function saveNodeData(data, contentId) {
function saveNodeData() {
var inDataIndex = -1;
$.each(contentList, function (i, item) {
if (item.id === contentId) {
$.each(parent.contentList, function (i, item) {
if (item.id === data.id) {
inDataIndex = i;
}
});
var newParams = contentList[inDataIndex];
newParams.title = $("#title").val();
var newParams = parent.contentList[inDataIndex];
newParams.placeholder = $("#placeholder").val();
newParams.require = isNull($('#require').attr('value')) ? [] : $('#require').attr('value');
newParams.defaultValue = $("#defaultValue").val();
newParams.width = $("#width").val();
newParams.attrKey = $("#attrKey").val();
newParams.attrDefinition = getInPoingArr(parent.attrList, 'attrKey', $("#attrKey").val());
if (newParams.dsFormComponent.linkedData == 1) {
newParams.dataType = $("#dataType").val();
......@@ -112,21 +138,32 @@ layui.config({
}
}
} else {
var objectId = $("#objectId").val();
if (isNull(objectId)) {
winui.window.msg("请选择数据.", {icon: 2, time: 2000});
return false;
}
newParams.objectId = objectId;
newParams.objectId = $("#objectId").val();
}
}
contentList = contentList.map(t => {
return t.id === contentId ? newParams : t;
parent.contentList = parent.contentList.map(t => {
return t.id === data.id ? newParams : t;
});
sortDataIn();
parent.sortDataIn();
$(".mask-req-str").remove();
}
function loadDataMation(value) {
$("#dataTypeObjectBox").html(dataTypeObject[value]);
if (value == 1) {
// 自定义
} else if (value == 2) {
// 枚举
initEnumData();
} else if (value == 3) {
// 数据字典
initDictData();
}
}
/**
* 加载枚举类可选列表
*/
function initEnumData() {
var arr = [];
$.each(skyeyeClassEnum, function (key, value) {
......@@ -139,14 +176,14 @@ layui.config({
form.render('select');
}
function loadDataMation(value) {
$("#dataTypeObjectBox").html(dataTypeObject[value]);
if (value == 1) {
// 自定义
} else if (value == 2) {
// 枚举
initEnumData();
}
/**
* 加载数据字典可选列表
*/
function initDictData() {
AjaxPostUtil.request({url: reqBasePath + "queryDictTypeListByEnabled", params: {enabled: 1}, type: 'json', method: 'GET', callback: function (json) {
$("#objectId").html(getDataUseHandlebars(selOption, json));
form.render('select');
}});
}
});
\ No newline at end of file
common/src/main/resources/template/tpl/dsFormPage/dsFormPageDesign.css
浏览文件 @ 2906302c
......@@ -15,6 +15,8 @@
text-align: center;
cursor: pointer;
z-index: 2;
width: 33%;
float: left;
}
.attr-mation {
......@@ -22,6 +24,7 @@
line-height: 28px;
text-align: left;
padding: 0px 10px;
width: calc(100% - 20px);
}
.no-choose {
......
common/src/main/resources/template/tpl/dsFormPage/dsFormPageDesign.html
浏览文件 @ 2906302c
......@@ -27,7 +27,7 @@
</div>
</div>
<div class="center-box-form">
<form class="layui-form droppable sortable ui-droppable ui-sortable" action="" id="showForm" autocomplete="off">
<form class="layui-form" action="" id="showForm" autocomplete="off">
</form>
</div>
......@@ -41,7 +41,7 @@
<span class="hr-title">{{@key}}</span><hr>
</div>
{{#each @this}}
<div class="form-group draggable ui-draggable btntext layui-col-xs4" componentId="{{id}}">
<div class="btntext" componentId="{{id}}">
<div class="icon">
{{{logo}}}
</div>
......@@ -55,7 +55,7 @@
<script type="text/html" id="leftAttrBoxItem">
{{#each rows}}
<div class="form-group draggable ui-draggable btntext attr-mation layui-col-xs12 {{class}}" rowid="{{attrKey}}">
<div class="btntext attr-mation {{class}}" attrKey="{{attrKey}}" componentId="{{dsFormComponent.id}}" title="{{showTitle}}">
<label class="col-sm-12 {{class}}">
<i class="fa fa-arrows fa-fw {{iLabelClass}}"></i>{{name}}
</label>
......
common/src/main/resources/template/tpl/dsFormPage/editPageContent.html
浏览文件 @ 2906302c
......@@ -20,14 +20,11 @@
<span class="hr-title">基本信息</span><hr>
</div>
<div class="layui-form-item layui-hide layui-col-xs12" id="attrKeyBox">
<label class="layui-form-label">关联属性：</label>
<label class="layui-form-label">关联属性<i class="red">*</i></label>
<div class="layui-input-block">
</div>
</div>
<div class="layui-form-item layui-hide layui-col-xs12" id="titleBox">
<label class="layui-form-label">名称<i class="red">*</i></label>
<div class="layui-input-block">
<input type="text" id="title" name="title" win-verify="required" placeholder="请输入控件名称" class="layui-input" maxlength="18" value="{{title}}"/>
<select lay-filter="attrKey" lay-search="" id="attrKey" name="width" win-verify="required">
</select>
</div>
</div>
<div class="layui-form-item layui-hide layui-col-xs12" id="placeholderBox">
......@@ -52,10 +49,7 @@
<label class="layui-form-label">宽度<i class="red">*</i></label>
<div class="layui-input-block">
<select lay-filter="width" lay-search="" id="width" name="width">
<option value="layui-col-xs9">3/4</option>
<option value="layui-col-xs4">1/3</option>
<option value="layui-col-xs6">1/2</option>
<option value="layui-col-xs12">1</option>
</select>
</div>
</div>
......
web/src/main/resources/template/assets/lib/layui/customer/skyeye/dsFormUtil.js
浏览文件 @ 2906302c
......@@ -143,16 +143,14 @@ var dsFormUtil = {
*/
loadComponent: function (boxId, content) {
var component = content.dsFormComponent;
console.log(component)
if (component.linkedData == 1) {
// 关联数据
var obj = isNull(content.aData) ? [] : content.aData;
if(typeof obj == 'string'){
obj = JSON.parse(obj);
}
if (!isNull(content.dsFormDisplayTemplate)) {
content.context = getDataUseHandlebars(content.dsFormDisplayTemplate.content, obj);
}
content = dsFormUtil.getContentLinkedData(content);
}
if (isNull(content.attrDefinition)) {
content.title = component.name;
} else {
content.title = content.attrDefinition.name;
}
var jsonStr = {bean: content};
......@@ -163,6 +161,34 @@ var dsFormUtil = {
return content;
},
getContentLinkedData: function (content) {
var json = {};
var dataType = content.dataType;
if (isNull(content.objectId) && isNull(content.defaultData)) {
return content;
}
if (dataType == 1) {
// 自定义
var obj = isNull(content.defaultData) ? [] : content.defaultData;
if(typeof obj == 'string'){
obj = JSON.parse(obj);
}
json = obj;
} else if (dataType == 2) {
// 枚举
json = skyeyeClassEnumUtil.getEnumDataListByClassName(content.objectId).rows;
} else if (dataType == 3) {
// 数据字典
sysDictDataUtil.queryDictDataListByDictTypeCode(content.objectId, function (data) {
json = data.rows;
});
}
if (!isNull(content.dsFormComponent.htmlDataFrom)) {
content.context = getDataUseHandlebars(content.dsFormComponent.htmlDataFrom, json);
}
return content;
},
setValue: function (customBoxId, item, i) {
// 加载组件
dsFormUtil.loadComponent(customBoxId, item);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或