提交 e7936a82 编写于 作者: doc_wei's avatar doc_wei

表单布局整改

上级 5a29d346
var jsonStr = [];
var tplContentVal; //数据模板中用{{}}包裹的词
layui.config({
base: basePath,
......@@ -19,6 +17,7 @@ layui.config({
// 组件分类
sysDictDataUtil.showDictDataListByDictTypeCode(sysDictData["dsFormContentType"]["key"], 'select', "dsFormContentType", '', form);
// 组件展示类型
skyeyeClassEnumUtil.showEnumDataListByClassName("dsFormShowType", 'select', "showType", '', form);
// 根据类型获取部分功能的使用说明
......@@ -28,55 +27,9 @@ layui.config({
});
element.init();
//是否关联数据
// 是否关联数据
form.on('switch(linkedData)', function (data) {
// 关联数据值
$(data.elem).val(data.elem.checked);
if ($("#linkedData").val() == 'true') {
$(".dataTpl").removeClass("layui-hide");
if (!initDatatpl) {
initDisplayTemplate();
}
} else {
$(".dataTpl").addClass("layui-hide");
}
});
// 初始化关联的数据类型
var initDatatpl = false;
function initDisplayTemplate() {
initDatatpl = true;
showGrid({
id: "displayTemplateId",
url: reqBasePath + "dsformdisplaytemplate006",
params: {},
pagination: false,
method: 'GET',
template: getFileContent('tpl/template/select-option.tpl'),
ajaxSendLoadBefore: function(hdb) {},
ajaxSendAfter:function (json) {
form.render('select');
jsonStr = json.rows;
}
});
}
//数据展示模板监听事件
form.on('select(displayTemplateId)', function(data) {
var displayTemplateValue = $('#displayTemplateId').val();
if (displayTemplateValue.length == 0){
$("#templateContent").html("");
} else {
$.each(jsonStr, function(i, item) {
if (displayTemplateValue == item.id) {
var str = '<textarea class="layui-textarea" readonly>' + item.content + '</textarea>';
$("#templateContent").html(str);
tplContentVal = strMatchAllByTwo(item.content, '{{','}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
return false;
}
});
}
});
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlContent"), codeUtil.getConfig('xml'));
......@@ -103,35 +56,10 @@ layui.config({
jsFitValue: encodeURIComponent(jsFitValue.getValue()),
typeId: $("#dsFormContentType").val(),
showType: $("#showType").val(),
linkedData: '2',
displayTemplateId: '',
defaultData: '',
linkedData: '2'
};
if ($("#linkedData").val() == 'true') {
params.linkedData = '1';
params.displayTemplateId = $("#displayTemplateId").val();
if (isNull(params.displayTemplateId)) {
winui.window.msg('请选择数据展示模板', {icon: 2, time: 2000});
return false;
}
var defaultDataStr = $("#defaultData").val();//默认数据值
if (defaultDataStr.length != 0) {
if (isJSON(defaultDataStr)) {
var defaultKey = getOutKey(defaultDataStr);//从默认数据中取出json串的键
if (subset(tplContentVal, defaultKey)) {
params.defaultData = defaultDataStr;
} else {
winui.window.msg('默认数据内容有误,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else {
winui.window.msg('默认数据格式不正确,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else {
winui.window.msg('请填写默认数据', {icon: 2, time: 2000});
return false;
}
}
// 获取图标信息
params = systemCommonUtil.getIconChoose(params);
......
var tplContentVal; //数据模板中用{{}}包裹的词
var jsonStr = [];
layui.config({
base: basePath,
......@@ -62,74 +60,16 @@ layui.config({
var jsDisplayValue = CodeMirror.fromTextArea(document.getElementById("jsDisplayValue"), codeUtil.getConfig('text/javascript'));
var jsFitValue = CodeMirror.fromTextArea(document.getElementById("jsFitValue"), codeUtil.getConfig('text/javascript'));
if (json.bean.linkedData == 1) {
$(".dataTpl").removeClass("layui-hide");
initDisplayTemplate(json.bean.displayTemplateId);//初始化关联的数据类型
var str = '<textarea class="layui-textarea" readonly>' + json.bean.dsFormDisplayTemplate.content + '</textarea>';
$("#templateContent").html(str);
tplContentVal = strMatchAllByTwo(json.bean.dsFormDisplayTemplate.content, '{{', '}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
}
//是否关联数据
// 是否关联数据
form.on('switch(linkedData)', function (data) {
//关联数据值
$(data.elem).val(data.elem.checked);
if ($("#linkedData").val() == 'true') {
$(".dataTpl").removeClass("layui-hide");
if (!initDatatpl) {
initDisplayTemplate(json.bean.displayTemplateId);
}
} else {
$(".dataTpl").addClass("layui-hide");
}
});
//初始化关联的数据类型
var initDatatpl = false;
function initDisplayTemplate(id){
initDatatpl = true;
showGrid({
id: "displayTemplateId",
url: reqBasePath + "dsformdisplaytemplate006",
params: {},
pagination: false,
method: 'GET',
template: getFileContent('tpl/template/select-option.tpl'),
ajaxSendLoadBefore: function(hdb) {},
ajaxSendAfter:function (json) {
$("#displayTemplateId").val(id);
form.render('select');
jsonStr = json.rows;
}
});
}
//数据展示模板监听事件
form.on('select(displayTemplateId)', function(data) {
var displayTemplateValue = $('#displayTemplateId').val();
if (displayTemplateValue.length == 0){
$("#templateContent").html("");
} else {
$.each(jsonStr, function(i, item) {
if (displayTemplateValue == item.id) {
var str = '<textarea class="layui-textarea" readonly>' + item.content + '</textarea>';
$("#templateContent").html(str);
tplContentVal = strMatchAllByTwo(item.content, '{{','}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
return false;
}
});
}
});
matchingLanguage();
form.render();
form.on('submit(formEditBean)', function (data) {
if (winui.verifyForm(data.elem)) {
if(isNull(htmlEditor.getValue())){
if (isNull(htmlEditor.getValue())) {
winui.window.msg('请输入模板内容', {icon: 2, time: 2000});
} else {
var params = {
......@@ -143,35 +83,10 @@ layui.config({
typeId: $("#dsFormContentType").val(),
showType: $("#showType").val(),
linkedData: '2',
displayTemplateId: '',
defaultData: '',
id: parent.rowId
};
if ($("#linkedData").val() == 'true') {
params.linkedData = '1';
params.displayTemplateId = $("#displayTemplateId").val();
if (isNull(params.displayTemplateId)) {
winui.window.msg('请选择数据展示模板', {icon: 2, time: 2000});
return false;
}
var defaultDataStr = $("#defaultData").val();//默认数据值
if (defaultDataStr.length != 0) {
if (isJSON(defaultDataStr)) {
var defaultKey = getOutKey(defaultDataStr);//从默认数据中取出json串的键
if (subset(tplContentVal, defaultKey)) {
params.defaultData = defaultDataStr;
} else {
winui.window.msg('默认数据内容有误,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else {
winui.window.msg('默认数据格式不正确,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else {
winui.window.msg('请填写默认数据', {icon: 2, time: 2000});
return false;
}
}
// 获取图标信息
......
var rowId = parent.rowId;//页面Id
var jsonArray = [];//从数据库获取的控件数组
var pageId = GetUrlParam("pageId");
var layedit, form;
// 表单控件集合
var formPageControl = [];
// 选中的表单布局组件信息
var contentData;
layui.config({
base: basePath,
......@@ -16,6 +16,10 @@ layui.config({
var $ = layui.$;
layedit = layui.layedit,
form = layui.form;
// 表单布局里的组件列表
var contentList = [];
// 表单控件集合
var componentList = [];
authBtn('1567732055673');//保存控件
var className = GetUrlParam("className");
......@@ -29,37 +33,40 @@ layui.config({
// 加载属性
loadClassAttr();
AjaxPostUtil.request({url: reqBasePath + "dsformpage004", params: {pageId: parent.rowId}, type: 'json', method: 'GET', callback: function (json) {
AjaxPostUtil.request({url: reqBasePath + "dsformpage006", params: {id: pageId}, type: 'json', method: 'GET', callback: function (json) {
// 加载页面内容
loadPageMation(json);
loadPageMation({rows: json.bean.dsFormPageContents});
}});
// 加载新增加的控件信息
function loadNewControl(item) {
if (item.associatedDataTypes == 1) {//json串
var obj = item.aData;
if(typeof item.aData == 'string'){
obj = JSON.parse(item.aData);
}
item.context = getDataUseHandlebars(item.dsFormComponent.templateContent, obj);
} else if (item.associatedDataTypes == 2) {//接口
AjaxPostUtil.request({url: reqBasePath + "dsformpage011", params: {interfa: item.aData}, type: 'json', callback: function(j){
var obj = JSON.parse(j.bean.aData);
item.context = getDataUseHandlebars(item.dsFormComponent.templateContent, obj);
}, async: false});
}
item.value = item.defaultValue;
var jsonStr = {bean: item};
var html = getDataUseHandlebars('{{#bean}}' + item.dsFormComponent.htmlContent + '{{/bean}}', jsonStr);
var html_js = getDataUseHandlebars('{{#bean}}' + item.dsFormComponent.jsContent + '{{/bean}}', jsonStr);
var jsCon = '<script>layui.define(["jquery"], function(exports) {var jQuery = layui.jquery;(function($) {' + html_js + '})(jQuery);});</script>';
$(html).appendTo($("#showForm").get(0)).attr("rowid", item.id);
$("#showForm").append(jsCon);
jsonArray.push(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>`);
contentList.push(item);
form.render();
}
function loadPageMation(json){
// 复制组件
$("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();
contentList = arrayUtil.removeArrayPointKey(contentList, 'id', contentId);
contentData = null;
$("#editPageContent").attr("src", "../../tpl/dsFormPage/editPageContent.html");
});
function loadPageMation(json) {
$.each(json.rows, function(i, item) {
loadNewControl(item);
});
......@@ -67,7 +74,7 @@ layui.config({
matchingLanguage();
}
function loadFormItemDrop(){
function loadFormItemDrop() {
$.each($("#showForm").find(".layui-form-item"), function(i, item) {
var _this = $(item);
if(!_this.hasClass('form-group')){
......@@ -98,7 +105,7 @@ layui.config({
$.each(json.bean, function (key, value) {
$.each(value, function (j, bean) {
bean.logo = systemCommonUtil.initIconShow(bean);
formPageControl.push(bean);
componentList.push(bean);
});
});
},
......@@ -118,7 +125,7 @@ layui.config({
$(".empty-form").remove();
var _this = $(ui.draggable);
if (!_this.hasClass("dropped")) {
getFormPageControlContent(_this.attr("rowid"));
getFormPageControlContent(_this.attr("componentId"));
} else {
if ($(this)[0] != _this.parent()[0]) {
var $el = _this.clone().appendTo(this);
......@@ -156,260 +163,64 @@ layui.config({
}
function getFormPageControlContent(id) {
var linkedData; //控件关联的数据
var defaultData; //选择事件的默认数据
var tplContentVal; //数据展示模板的内容的值
var templateContent; //数据展示模板的内容
$.each(formPageControl, function(i, item) {
var dsFormComponent = {};
$.each(componentList, function(i, item) {
if(item.id == id){
linkedData = item.linkedData;
templateContent = item.templateContent;
if (!isNull(item.templateContent)) {
tplContentVal = strMatchAllByTwo(item.templateContent, '{{','}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
}
if (!isNull(item.defaultData)){
defaultData = item.defaultData;
}
dsFormComponent = item;
}
});
var params = {
pageId: rowId,
width: 'layui-col-xs12',
title: '标题',
linkedData: linkedData,
title: dsFormComponent.name,
require: '',
placeholder: '',
defaultValue: '',
formContentId: id,
attrKey: ''
attrKey: '',
dsFormComponent: dsFormComponent,
id: getRandomValueToString()
};
if(linkedData == 1){
// 自定义数据类型
params.associatedDataTypes = 1;
var defaultKey = getOutKey(defaultData);//取出json串的键
if(subset(tplContentVal, defaultKey)){
params.aData = defaultData;
} else {
winui.window.msg('json串内容有误,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else if (linkedData == 2){
params.associatedDataTypes = "";
params.aData = "";
}
// 保存控件
reqSaveData(params, templateContent);
loadNewControl(params);
sortDataIn();
}
// 保存“新增控件”
function reqSaveData(params, templateContent){
AjaxPostUtil.request({url: reqBasePath + "dsformpage003", params: params, type: 'json', callback: function (json) {
winui.window.msg(systemLanguage["com.skyeye.successfulOperation"][languageType], {icon: 1, time: 2000});
loadNewControl(json.bean);
loadFormItemDrop();
}, async: false});
}
// 页面控件点击事件
$("body").on("click", ".form-group", function() {
$(".form-group").removeClass('ui-sortable-placeholder-choose');
$("#showForm .form-group").removeClass('ui-sortable-placeholder-choose');
$("#showForm .form-group").find('.btn-base').hide();
$(this).addClass("ui-sortable-placeholder-choose");
var rowid = $(this).attr("rowid");
var arr = [];
$.each(jsonArray, function(i, item) {
if(item.id === rowid){
$("#btnBoxDesignForm").html(getDataUseHandlebars($("#controlItemEdit").html(), {bean: item}));
$("#deleteBtn").attr("rowid", rowid);
if (item.linkedData == 1) {
// 允许关联数据
var associatedDataTypes = item.associatedDataTypes;
$("#isAssociated").removeClass("layui-hide");
associatedDataTypesChange(associatedDataTypes);
if (associatedDataTypes == "1") {
var obj = item.aData;
if (typeof item.aData != 'string') {
obj = JSON.stringify(item.aData);
}
// json串
$("#jsonData").val(obj);
} else if (associatedDataTypes == "2") {
// 接口
$("#interfa").val(item.aData);
}
$("input:radio[name=associatedDataTypes][value=" + associatedDataTypes + "]").attr("checked", true);
}
$("#width").val(item.width);
form.render();
form.on('submit(formAddBean)', function (data) {
if (winui.verifyForm(data.elem)) {
saveNodeData(data, rowid, arr);
winui.window.msg("保存成功", {icon: 1, time: 2000});
}
return false;
});
// 对限制条件的监听
form.on('select(require)',function(data) {
arr = data.value;
});
if (!isNull(item.require)) {
arr = item.require.split(",");
}
initRequire(item);
matchingLanguage();
var contentId = $(this).attr("contentId");
$("#showForm div[contentId='" + contentId + "']").find('.btn-base').show();
$.each(contentList, function(i, item) {
if(item.id === contentId){
contentData = item;
$("#editPageContent").attr("src", "../../tpl/dsFormPage/editPageContent.html");
return;
}
});
});
// 删除操作
$("body").on("click", "#deleteBtn", function (e) {
var rowid = $(this).attr("rowid");
$("#showForm div[rowid='" + rowid + "']").remove();
$.each(jsonArray, function(i, item) {
if(item.id === rowid){
jsonArray[i].deleteFlag = 1;
}
});
$("#btnBoxDesignForm").empty();
});
function saveNodeData(data, rowid, arr){
var inDataIndex = -1;
$.each(jsonArray, function(i, item) {
if(item.id === rowid){
inDataIndex = i;
}
});
if(inDataIndex == -1){
return;
}
var newParams = jsonArray[inDataIndex];
newParams.title = $("#title").val();
newParams.placeholder = $("#placeholder").val();
newParams.require = arr.join(",");
newParams.defaultValue = $("#defaultValue").val();
newParams.width = $("#width").val();
newParams.attrKey = $("#attrKey").val();
var linkedData; //控件关联的数据
var defaultData; //选择事件的默认数据
var tplContentVal; //数据展示模板的内容的值
var templateContent; //数据展示模板的内容
$.each(formPageControl, function (i, item) {
if (item.id == newParams.formContentId) {
linkedData = item.linkedData;
templateContent = item.templateContent;
if (!isNull(item.templateContent)) {
tplContentVal = strMatchAllByTwo(item.templateContent, '{{', '}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
}
if (!isNull(item.defaultData)) {
defaultData = item.defaultData;
}
}
});
if (newParams.linkedData == 1) {
newParams.associatedDataTypes = data.field.associatedDataTypes;
if (newParams.associatedDataTypes == 1) {
var defaultDataStr = $("#jsonData").val();
if (isNull(defaultDataStr)) {
winui.window.msg("请填写Json串!", {icon: 2, time: 2000});
return false;
} else {
if (isJSON(defaultDataStr)) {
var defaultKey = getOutKey(defaultDataStr);//取出json串的键
if (subset(tplContentVal, defaultKey)) {
newParams.aData = defaultDataStr;
} else {
winui.window.msg('json串内容有误,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else {
winui.window.msg('json串格式不正确,请重新填写!', {icon: 2, time: 2000});
return false;
}
}
} else if (newParams.associatedDataTypes == 2) {
var interfa = $("#interfa").val();
if (interfa.length == 0) {
winui.window.msg("请填写接口!", {icon: 2, time: 2000});
return false;
}
if (!checkURL(interfa)) {
winui.window.msg("接口请填写为URL类型!", {icon: 2, time: 2000});
return false;
}
newParams.aData = interfa;
} else {
winui.window.msg("状态值错误。", {icon: 2, time: 2000});
return false;
}
} else if (newParams.linkedData == 2) {
newParams.associatedDataTypes = "";
newParams.aData = "";
}
jsonArray = jsonArray.map(t => {
return t.id === rowid ? newParams : t;
});
sortDataIn();
$(".mask-req-str").remove();
}
function sortDataIn(){
function sortDataIn() {
// 对控件进行排序
sortNodeData();
$.each(contentList, function(i, item) {
var inIndex = $("#showForm div[contentId='" + item.id + "']").index();
contentList[i].orderBy = inIndex;
});
$("#showForm").empty();
jsonArray.sort(getSortFun('asc', 'orderBy'));
var newJson = [].concat(jsonArray);
jsonArray = [];
contentList.sort(getSortFun('asc', 'orderBy'));
var newJson = [].concat(contentList);
contentList = [];
loadPageMation({rows: newJson});
}
function sortNodeData() {
$.each(jsonArray, function(i, item) {
var inIndex = $("#showForm div[rowid='" + item.id + "']").index();
jsonArray[i].orderBy = inIndex;
});
}
// 关联数据类型变化事件
form.on('radio(associatedDataTypes)', function (data) {
associatedDataTypesChange(data.value);
});
// 关联数据类型变化
function associatedDataTypesChange(val){
if(val == '1'){//Json串
$(".TypeIsTwo").addClass("layui-hide");
$(".TypeIsOne").removeClass("layui-hide");
} else if (val == '2'){//接口
$(".TypeIsTwo").removeClass("layui-hide");
$(".TypeIsOne").addClass("layui-hide");
} else {
winui.window.msg('状态值错误', {icon: 2, time: 2000});
}
}
// 初始化限制条件
function initRequire(item) {
skyeyeClassEnumUtil.showEnumDataListByClassName("verificationParams", 'verificationSelect', "require", item.require, form);
form.render();
}
// 保存
$("body").on("click", "#save", function() {
sortDataIn();
if (jsonArray.length == 0) {
if (contentList.length == 0) {
winui.window.msg('保存页面不能为空!', {icon: 2, time: 2000});
return;
}
AjaxPostUtil.request({url: reqBasePath + "dsformpage009", params: {formedit: JSON.stringify(jsonArray)}, type: 'json', callback: function (json) {
AjaxPostUtil.request({url: reqBasePath + "todo 待写", params: {formedit: JSON.stringify(contentList)}, type: 'json', callback: function (json) {
winui.window.msg("保存成功", {icon: 1, time: 2000});
parent.refreshCode = '0';
}});
......
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui'], function (exports) {
winui.renderColor();
var $ = layui.$,
form = layui.form;
var data = parent.contentData;
if (data == null) {
$("#showForm").html('');
return false;
}
$("#showForm").html(getDataUseHandlebars($("#controlItemEdit").html(), {bean: data}));
if (data.dsFormComponent.linkedData == 1) {
// 允许关联数据
$("#isAssociated").removeClass("layui-hide");
// 数据来源类型
skyeyeClassEnumUtil.showEnumDataListByClassName("pageComponentDataType", 'select', "dataType", data.dataType, form);
form.on('select(dataType)', function(data) {
var value = $('#displayTemplateId').val();
if (value == 1){
$("#defaultDataBox").removeClass("layui-hide");
initDisplayTemplate();
} else {
$("#defaultDataBox").addClass("layui-hide");
}
});
if (data.dataType == 1) {
// 自定义
$(".defaultDataBox").removeClass("layui-hide");
initDisplayTemplate();
}
}
$("#width").val(data.width);
var arr = [];
if (!isNull(data.require)) {
arr = data.require.split(",");
}
form.on('select(require)',function(data) {
arr = data.value;
});
// 属性的限制条件
skyeyeClassEnumUtil.showEnumDataListByClassName("verificationParams", 'verificationSelect', "require", data.require, form);
matchingLanguage();
form.render();
form.on('submit(formAddBean)', function (data) {
if (winui.verifyForm(data.elem)) {
saveNodeData(data, data.id, arr);
winui.window.msg("保存成功", {icon: 1, time: 2000});
}
return false;
});
function saveNodeData(data, contentId, arr) {
var inDataIndex = -1;
$.each(contentList, function(i, item) {
if (item.id === contentId) {
inDataIndex = i;
}
});
if(inDataIndex == -1){
return;
}
var newParams = contentList[inDataIndex];
newParams.title = $("#title").val();
newParams.placeholder = $("#placeholder").val();
newParams.require = arr.join(",");
newParams.defaultValue = $("#defaultValue").val();
newParams.width = $("#width").val();
newParams.attrKey = $("#attrKey").val();
var linkedData; //控件关联的数据
var defaultData; //选择事件的默认数据
var tplContentVal; //数据展示模板的内容的值
var templateContent; //数据展示模板的内容
$.each(componentList, function (i, item) {
if (item.id == newParams.formContentId) {
linkedData = item.linkedData;
templateContent = item.templateContent;
if (!isNull(item.templateContent)) {
tplContentVal = strMatchAllByTwo(item.templateContent, '{{', '}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
}
if (!isNull(item.defaultData)) {
defaultData = item.defaultData;
}
}
});
if (newParams.linkedData == 1) {
newParams.associatedDataTypes = data.field.associatedDataTypes;
if (newParams.associatedDataTypes == 1) {
var defaultDataStr = $("#jsonData").val();
if (isNull(defaultDataStr)) {
winui.window.msg("请填写Json串!", {icon: 2, time: 2000});
return false;
} else {
if (isJSON(defaultDataStr)) {
var defaultKey = getOutKey(defaultDataStr);//取出json串的键
if (subset(tplContentVal, defaultKey)) {
newParams.aData = defaultDataStr;
} else {
winui.window.msg('json串内容有误,请重新填写!', {icon: 2, time: 2000});
return false;
}
} else {
winui.window.msg('json串格式不正确,请重新填写!', {icon: 2, time: 2000});
return false;
}
}
} else if (newParams.associatedDataTypes == 2) {
var interfa = $("#interfa").val();
if (interfa.length == 0) {
winui.window.msg("请填写接口!", {icon: 2, time: 2000});
return false;
}
if (!checkURL(interfa)) {
winui.window.msg("接口请填写为URL类型!", {icon: 2, time: 2000});
return false;
}
newParams.aData = interfa;
} else {
winui.window.msg("状态值错误。", {icon: 2, time: 2000});
return false;
}
} else if (newParams.linkedData == 2) {
newParams.associatedDataTypes = "";
newParams.aData = "";
}
contentList = contentList.map(t => {
return t.id === contentId ? newParams : t;
});
sortDataIn();
$(".mask-req-str").remove();
}
// 树据模板类型
var displayTemplateList = [];
function initDisplayTemplate() {
showGrid({
id: "displayTemplateId",
url: reqBasePath + "dsformdisplaytemplate006",
params: {},
pagination: false,
method: 'GET',
template: getFileContent('tpl/template/select-option.tpl'),
ajaxSendLoadBefore: function(hdb) {},
ajaxSendAfter:function (json) {
form.render('select');
displayTemplateList = json.rows;
}
});
}
form.on('select(displayTemplateId)', function(data) {
var displayTemplateValue = $('#displayTemplateId').val();
if (displayTemplateValue.length == 0){
$("#templateContent").html("");
} else {
$.each(displayTemplateList, function(i, item) {
if (displayTemplateValue == item.id) {
var str = '<textarea class="layui-textarea" readonly>' + item.content + '</textarea>';
$("#templateContent").html(str);
// 取出数据模板中用{{}}包裹的词
tplContentVal = strMatchAllByTwo(item.content, '{{','}}');
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
return false;
}
});
}
});
//
// if ($("#linkedData").val() == 'true') {
// params.linkedData = '1';
// params.dataType = $("#dataType").val();
// if (isNull(params.dataType)) {
// winui.window.msg('请选择数据来源', {icon: 2, time: 2000});
// return false;
// }
// params.displayTemplateId = $("#displayTemplateId").val();
//
// if (isNull(params.displayTemplateId)) {
// winui.window.msg('请选择数据展示模板', {icon: 2, time: 2000});
// return false;
// }
// var defaultDataStr = $("#defaultData").val();//默认数据值
// if (defaultDataStr.length != 0) {
// if (isJSON(defaultDataStr)) {
// var defaultKey = getOutKey(defaultDataStr);//从默认数据中取出json串的键
// if (subset(tplContentVal, defaultKey)) {
// params.defaultData = defaultDataStr;
// } else {
// winui.window.msg('默认数据内容有误,请重新填写!', {icon: 2, time: 2000});
// return false;
// }
// } else {
// winui.window.msg('默认数据格式不正确,请重新填写!', {icon: 2, time: 2000});
// return false;
// }
// } else {
// winui.window.msg('请填写默认数据', {icon: 2, time: 2000});
// return false;
// }
// }
});
\ No newline at end of file
......@@ -82,9 +82,8 @@ layui.config({
// 表单设计
function control(data) {
rowId = data.id;
parent.parent._openNewWindows({
url: "../../tpl/dsFormPage/dsFormPageDesign.html?className=" + objectId,
url: "../../tpl/dsFormPage/dsFormPageDesign.html?className=" + objectId + "&pageId=" + data.id,
title: "表单设计",
pageId: "dsFormPageDesign",
area: ['100vw', '100vh'],
......
......@@ -85,26 +85,6 @@
<input id="linkedData" name="linkedData" lay-filter="linkedData" type="checkbox" lay-skin="switch" lay-text="是|否" value="false" />
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<label class="layui-form-label">数据展示模板<i class="red">*</i></label>
<div class="layui-input-block">
<select id="displayTemplateId" name="displayTemplateId" lay-filter="displayTemplateId">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<div class="layui-input-block" id="templateContent">
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<label class="layui-form-label">默认数据<i class="red">*</i></label>
<div class="layui-input-block">
<textarea id="defaultData" name="defaultData" class="layui-textarea"></textarea>
<div class="layui-form-mid layui-word-aux">数据样式为:[{"id":"1","name":"男",...},{"id":"2","name":"女",...}]</div>
</div>
</div>
<div class="layui-form-item layui-col-xs12" id="iconMation">
......
......@@ -91,26 +91,6 @@
<input id="linkedData" name="linkedData" lay-filter="linkedData" type="checkbox" lay-skin="switch" lay-text="是|否" {{#compare2 linkedData}}{{/compare2}} value="{{#compare3 linkedData}}{{/compare3}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<label class="layui-form-label">数据展示模板<i class="red">*</i></label>
<div class="layui-input-block">
<select id="displayTemplateId" name="displayTemplateId" lay-filter="displayTemplateId">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<div class="layui-input-block" id="templateContent">
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<label class="layui-form-label">默认数据<i class="red">*</i></label>
<div class="layui-input-block">
<textarea id="defaultData" name="defaultData" class="layui-textarea">{{defaultData}}</textarea>
<div class="layui-form-mid layui-word-aux">数据样式为[{"id":"1","name":"",...},{"id":"2","name":"",...}]</div>
</div>
</div>
<div class="layui-form-item layui-col-xs12" id="iconMation">
......
.left-box-form {
min-height: calc(100% - 60px);
top: 55px;
height: 100%;
background-color: white;
position: fixed;
width: 266px;
......@@ -74,23 +74,34 @@
}
.center-box-form {
width: calc(100% - 610px);
width: calc(100% - 620px);
margin-left: 280px;
min-height: calc(100% - 60px);
top: 55px;
height: 100%;
background-color: white;
z-index: 1;
position: absolute;
overflow: auto;
}
.center-box-form-toolbar {
width: calc(100% - 613px);
margin-left: 266px;
margin-bottom: 10px;
background-color: white;
text-align: right;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
height: 40px;
padding: 0px 10px;
}
.right-box-form {
min-height: calc(100% - 60px);
top: 55px;
height: 100%;
background-color: white;
position: fixed;
width: 320px;
right: 0px;
top: 0px;
padding-right: 5px;
padding-top: 5px;
}
......@@ -109,17 +120,31 @@
min-height: 600px;
}
.ui-sortable-placeholder {
.center-box-form .ui-sortable-placeholder {
border: 1px dashed #cecece !important;
visibility: visible !important;
background: #e7eaec
background: #e7eaec;
margin: 0 0 23px !important;
}
.ui-sortable-placeholder-choose {
.center-box-form .ui-sortable-placeholder-choose {
visibility: visible !important;
border: 1px #d9534f dashed;
}
.ibox.ui-sortable-placeholder {
margin: 0 0 23px !important
}
\ No newline at end of file
.btn-base {
display: none;
text-align: right;
}
.btn-base button {
color: white;
width: 21px;
height: 21px;
border: 0px;
background-color: #2e73ff;
}
.btn-base .btn-danger {
background-color: red;
}
......@@ -8,141 +8,66 @@
<link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
<link href="dsFormPageDesign.css" rel="stylesheet" />
</head>
<body style="background-color: rgb(234, 234, 234)">
<div class="winui-toolbar" style="position: fixed; width: calc(100% - 10px); z-index: 100; text-align: right">
<div class="winui-tool">
<button id="save" class="winui-toolbtn" auth="1567732055673"><i class="fa fa-save" aria-hidden="true"></i><language showName="com.skyeye.save"></language></button>
</div>
</div>
<div class="left-box-form">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">基本组件</li>
<li class="">属性</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="btnBox"></div>
<div class="layui-tab-item" id="attrBox"></div>
</div>
<body style="background-color: rgb(234, 234, 234)">
<div class="left-box-form">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">基本组件</li>
<li class="">属性</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="btnBox"></div>
<div class="layui-tab-item" id="attrBox"></div>
</div>
</div>
<div class="center-box-form">
<form class="layui-form droppable sortable ui-droppable ui-sortable" action="" id="showForm" autocomplete="off">
</form>
</div>
<div class="winui-toolbar center-box-form-toolbar">
<div class="winui-tool">
<button id="save" class="winui-toolbtn" auth="1567732055673"><i class="fa fa-save" aria-hidden="true"></i><language showName="com.skyeye.save"></language></button>
</div>
<div class="right-box-form" id="btnBoxDesign">
<form class="layui-form" action="" id="btnBoxDesignForm" autocomplete="off">
</form>
</div>
</body>
</div>
<div class="center-box-form">
<form class="layui-form droppable sortable ui-droppable ui-sortable" action="" id="showForm" autocomplete="off">
</form>
</div>
<div class="right-box-form" id="btnBoxDesign">
<iframe style="width: 100%; border: 0px; height: 100%" scrolling="no" id="editPageContent"></iframe>
</div>
<script type="text/html" id="leftBoxItem">
{{#each bean}}
<div class="layui-form-item layui-col-xs12">
<span class="hr-title">{{@key}}</span><hr>
<div class="layui-form-item layui-col-xs12">
<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="icon">
{{{logo}}}
</div>
{{#each @this}}
<div class="form-group draggable ui-draggable btntext layui-col-xs4" rowid="{{id}}">
<div class="icon">
{{{logo}}}
</div>
<label class="col-sm-12">
{{name}}
</label>
</div>
{{/each}}
<label class="col-sm-12">
{{name}}
</label>
</div>
{{/each}}
{{/each}}
</script>
<script type="text/html" id="leftAttrBoxItem">
{{#each rows}}
<div class="form-group draggable ui-draggable btntext attr-mation layui-col-xs12 {{class}}" rowid="{{attrKey}}">
<label class="col-sm-12 {{class}}">
<i class="fa fa-arrows fa-fw {{iLabelClass}}"></i>{{name}}
</label>
</div>
<div class="form-group draggable ui-draggable btntext attr-mation layui-col-xs12 {{class}}" rowid="{{attrKey}}">
<label class="col-sm-12 {{class}}">
<i class="fa fa-arrows fa-fw {{iLabelClass}}"></i>{{name}}
</label>
</div>
{{/each}}
</script>
<script type="text/html" id="controlItemEdit">
{{#bean}}
<div class="layui-form-item layui-col-xs12">
<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}}"/>
</div>
</div>
<div id="isAssociated" class="layui-hide">
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">关联数据类型<i class="red">*</i></label>
<div class="layui-input-block winui-radio">
<input type="radio" name="associatedDataTypes" value="1" title="Json串" lay-filter="associatedDataTypes" />
<input type="radio" name="associatedDataTypes" value="2" title="接口" lay-filter="associatedDataTypes" />
</div>
</div>
<div class="layui-form-item layui-col-xs12 TypeIsOne">
<label class="layui-form-label">Json串<i class="red">*</i></label>
<div class="layui-input-block">
<textarea id="jsonData" name="jsonData" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-col-xs12 TypeIsTwo layui-hide">
<label class="layui-form-label">接口<i class="red">*</i></label>
<div class="layui-input-block">
<input type="text" id="interfa" name="interfa" class="layui-input" placeholder="例如:http://localhost:8081/queryAllDsFormComponentList"/>
</div>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">提示语</label>
<div class="layui-input-block winui-radio">
<input type="text" id="placeholder" name="placeholder" win-verify="" placeholder="请输入控件提示语" class="layui-input" maxlength="30" value="{{placeholder}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">限制条件</label>
<div class="layui-input-block">
<select lay-filter="require" multiple lay-search="" id="require" name="require">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">默认值</label>
<div class="layui-input-block">
<input type="text" id="defaultValue" name="defaultValue" win-verify="" placeholder="请输入默认值" class="layui-input" maxlength="50" value="{{value}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<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>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">属性</label>
<div class="layui-input-block">
<input type="text" id="attrKey" name="attrKey" placeholder="只接受英文、数字" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" class="layui-input" maxlength="30" value="{{attrKey}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-input-block">
<button class="winui-btn" type="button" id="deleteBtn"><language showName="com.skyeye.deleteBtn"></language></button>
<button class="winui-btn" lay-submit lay-filter="formAddBean"><language showName="com.skyeye.save"></language></button>
</div>
</div>
{{/bean}}
</script>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/dsFormPage/'}).use('dsFormPageDesign');
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
</head>
<body>
<div style="margin:0 auto;padding:20px;">
<form class="layui-form" action="" id="showForm" autocomplete="off">
</form>
</div>
<script type="text/html" id="controlItemEdit">
{{#bean}}
<div class="layui-form-item layui-col-xs12">
<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}}"/>
</div>
</div>
<div id="isAssociated" class="layui-hide">
<div class="layui-form-item layui-col-xs12 layui-hide dataTpl">
<label class="layui-form-label">数据来源<i class="red">*</i></label>
<div class="layui-input-block">
<select id="dataType" name="dataType" lay-search="" lay-filter="dataType">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide defaultDataBox">
<label class="layui-form-label">数据展示模板<i class="red">*</i></label>
<div class="layui-input-block">
<select id="displayTemplateId" name="displayTemplateId" lay-search="" lay-filter="displayTemplateId">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide defaultDataBox">
<div class="layui-input-block" id="templateContent">
</div>
</div>
<div class="layui-form-item layui-col-xs12 layui-hide defaultDataBox">
<label class="layui-form-label">默认数据<i class="red">*</i></label>
<div class="layui-input-block">
<textarea id="defaultData" name="defaultData" class="layui-textarea"></textarea>
<div class="layui-form-mid layui-word-aux">数据样式为[{"id":"1","name":"",...},{"id":"2","name":"",...}]</div>
</div>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">提示语</label>
<div class="layui-input-block winui-radio">
<input type="text" id="placeholder" name="placeholder" win-verify="" placeholder="请输入控件提示语" class="layui-input" maxlength="30" value="{{placeholder}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">限制条件</label>
<div class="layui-input-block">
<select lay-filter="require" multiple lay-search="" id="require" name="require">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">默认值</label>
<div class="layui-input-block">
<input type="text" id="defaultValue" name="defaultValue" win-verify="" placeholder="请输入默认值" class="layui-input" maxlength="50" value="{{value}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<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>
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">属性</label>
<div class="layui-input-block">
<input type="text" id="attrKey" name="attrKey" placeholder="只接受英文、数字" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" class="layui-input" maxlength="30" value="{{attrKey}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-input-block">
<button class="winui-btn" lay-submit lay-filter="formAddBean"><language showName="com.skyeye.save"></language></button>
</div>
</div>
{{/bean}}
</script>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/dsFormPage/'}).use('editPageContent');
</script>
</body>
</html>
\ No newline at end of file
......@@ -712,7 +712,7 @@ function uploadImg(file, Editor) {
* @param d 员工参数
* @returns {string}
*/
function getStaffStateName(d){
function getStaffStateName(d) {
if(d.state == '1'){
return "<span class='state-up'>在职</span>";
} else if (d.state == '2'){
......@@ -734,7 +734,7 @@ function getStaffStateName(d){
* @param value 要比较的值
* @returns {boolean}
*/
function judgeInPoingArr(array, key, value){
function judgeInPoingArr(array, key, value) {
for(var i = 0; i < array.length; i++){
if(array[i][key] == value){
return true;
......@@ -752,7 +752,7 @@ function judgeInPoingArr(array, key, value){
* @param getKey 要获取的值
* @returns {null|*}
*/
function getInPoingArr(array, key, value, getKey){
function getInPoingArr(array, key, value, getKey) {
for(var i = 0; i < array.length; i++){
if(array[i][key] == value){
if(isNull(getKey)){
......@@ -771,7 +771,7 @@ function getInPoingArr(array, key, value, getKey){
* @param value 要比较的值
* @returns {null|*}
*/
function getArrIndexOfPointStr(array, value){
function getArrIndexOfPointStr(array, value) {
for(var i = 0; i < array.length; i++){
if(value.indexOf(array[i]) > -1){
return array[i];
......@@ -997,7 +997,7 @@ function showPicDisk(imgs){
* 获取随机值
* @return {}
*/
function getRandomValueToString(){
function getRandomValueToString() {
return Date.parse(new Date()) + "" + getRandom(999);
}
......@@ -1006,7 +1006,7 @@ function getRandomValueToString(){
* @param {} n
* @return {}
*/
function getRandom(n){
function getRandom(n) {
return Math.floor(Math.random() * n + 1);
}
......
......@@ -31,7 +31,7 @@ var arrayUtil = {
if(inArray != -1) {
list.splice(inArray, 1);
}
return list;
return [].concat(list);
}
}
\ No newline at end of file
......@@ -135,25 +135,35 @@ var dsFormUtil = {
});
},
setValue: function (customBoxId, item, i) {
if (item.associatedDataTypes == 1) {//json串
var obj = item.aData;
if(typeof item.aData == 'string'){
obj = JSON.parse(item.aData);
/**
* 加载组件信息
*
* @param boxId
* @param content
*/
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);
}
item.context = getDataUseHandlebars(item.dsFormComponent.templateContent, obj);
} else if (item.associatedDataTypes == 2) {//接口
AjaxPostUtil.request({url: flowableBasePath + "dsformpage011", params: {interfa: item.aData}, type: 'json', callback: function(j) {
var obj = JSON.parse(j.bean.aData);
item.context = getDataUseHandlebars(item.dsFormComponent.templateContent, obj);
}, async: false});
content.context = getDataUseHandlebars(content.dsFormDisplayTemplate.content, obj);
}
var jsonStr = {bean: item};
var html = getDataUseHandlebars('{{#bean}}' + item.dsFormComponent.htmlContent + '{{/bean}}', jsonStr);
var html_js = getDataUseHandlebars('{{#bean}}' + item.dsFormComponent.jsContent + '{{/bean}}', jsonStr);
var jsonStr = {bean: content};
var html = getDataUseHandlebars('{{#bean}}' + component.htmlContent + '{{/bean}}', jsonStr);
var html_js = getDataUseHandlebars('{{#bean}}' + component.jsContent + '{{/bean}}', jsonStr);
var jsCon = '<script>layui.define(["jquery"], function(exports) {var jQuery = layui.jquery;(function($) {' + html_js + '})(jQuery);});</script>';
$("#" + customBoxId).append(html + jsCon);
$("#" + boxId).append(html + jsCon);
return content;
},
setValue: function (customBoxId, item, i) {
// 加载组件
dsFormUtil.loadComponent(customBoxId, item);
// 给能通过id赋值的控件赋值
$("#" + item.id).val(item.value);
......
......@@ -34,5 +34,7 @@
"documentAuthEnum": {"name": "文档权限", "className": "skyeye-pro#com.skyeye.document.classenum.DocumentAuthEnum"},
"disCussionAuthEnum": {"name": "讨论帖权限", "className": "skyeye-pro#com.skyeye.discussion.classenum.DisCussionAuthEnum"},
"dsFormPageType": {"name": "表单布局类型", "className": "skyeye-pro#com.skyeye.dsform.classenum.DsFormPageType"}
"dsFormPageType": {"name": "表单布局类型", "className": "skyeye-pro#com.skyeye.dsform.classenum.DsFormPageType"},
"pageComponentDataType": {"name": "表单布局里面的组件关联的数据类型", "className": "skyeye-pro#com.skyeye.dsform.classenum.PageComponentDataType"}
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册