提交 2d60c5a4 编写于 作者: Skyeye云's avatar Skyeye云

表单布局修改

上级 ff94384b
......@@ -19,6 +19,8 @@ layui.config({
sysDictDataUtil.showDictDataListByDictTypeCode(sysDictData["dsFormContentType"]["key"], 'select', "dsFormContentType", '', form);
// 组件展示类型
skyeyeClassEnumUtil.showEnumDataListByClassName("dsFormShowType", 'select', "showType", '', form);
// 组件关联属性
skyeyeClassEnumUtil.showEnumDataListByClassName("componentAttr", 'verificationSelect', "attrKeys", '', form);
// 根据类型获取部分功能的使用说明
systemCommonUtil.queryExplainMationByType(2, function(json) {
......@@ -56,6 +58,7 @@ layui.config({
jsFitValue: encodeURIComponent(jsFitValue.getValue()),
typeId: $("#dsFormContentType").val(),
showType: $("#showType").val(),
attrKeys: $('#attrKeys').attr('value'),
linkedData: '2'
};
if ($("#linkedData").val() == 'true') {
......
......@@ -46,6 +46,9 @@ layui.config({
// 组件分类
sysDictDataUtil.showDictDataListByDictTypeCode(sysDictData["dsFormContentType"]["key"], 'select', "dsFormContentType", json.bean.typeId, form);
skyeyeClassEnumUtil.showEnumDataListByClassName("dsFormShowType", 'select', "showType", json.bean.showType, form);
// 组件关联属性
var attrKeys = isNull(json.bean.attrKeys) ? '' : json.bean.attrKeys.toString();
skyeyeClassEnumUtil.showEnumDataListByClassName("componentAttr", 'verificationSelect', "attrKeys", attrKeys, form);
// 根据类型获取部分功能的使用说明
systemCommonUtil.queryExplainMationByType(2, function (json) {
......@@ -83,6 +86,7 @@ layui.config({
typeId: $("#dsFormContentType").val(),
showType: $("#showType").val(),
linkedData: '2',
attrKeys: $('#attrKeys').attr('value'),
id: parent.rowId
};
if ($("#linkedData").val() == 'true') {
......
......@@ -163,20 +163,12 @@ layui.config({
}
function getFormPageControlContent(id) {
var dsFormComponent = {};
$.each(componentList, function(i, item) {
if(item.id == id){
dsFormComponent = item;
}
});
var dsFormComponent = getInPoingArr(componentList, 'id', id);
var params = {
width: 'layui-col-xs12',
title: dsFormComponent.name,
require: '',
placeholder: '',
defaultValue: '',
formContentId: id,
attrKey: '',
dsFormComponent: dsFormComponent,
id: getRandomValueToString()
};
......@@ -191,13 +183,8 @@ layui.config({
$(this).addClass("ui-sortable-placeholder-choose");
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;
}
});
contentData = getInPoingArr(contentList, 'id', contentId);
$("#editPageContent").attr("src", "../../tpl/dsFormPage/editPageContent.html");
});
function sortDataIn() {
......
......@@ -13,97 +13,96 @@ layui.config({
$("#showForm").html('');
return false;
}
var selOption = getFileContent('tpl/template/select-option.tpl');
// 不同的数据来源对应不同的html
var dataTypeObject = {
"1": `<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">默认数据<i class="red">*</i></label>
<div class="layui-input-block">
<textarea id="defaultData" name="defaultData" win-verify="required" class="layui-textarea"></textarea>
<div class="layui-form-mid layui-word-aux">数据样式为:[{"id":"1","name":"男",...},{"id":"2","name":"女",...}]</div>
</div>
</div>`,
"2": `<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">枚举数据<i class="red">*</i></label>
<div class="layui-input-block">
<select id="objectId" name="objectId" lay-search="" win-verify="required" lay-filter="objectId"></select>
</div>
</div>`,
"3": `<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">数据字典<i class="red">*</i></label>
<div class="layui-input-block">
<select id="objectId" name="objectId" lay-search="" win-verify="required" lay-filter="objectId"></select>
</div>
</div>`
};
$("#showForm").html(getDataUseHandlebars($("#controlItemEdit").html(), {bean: data}));
// 加载组件关联的属性
$.each(data.dsFormComponent.attrKeys, function (i, item) {
$("#" + item).removeClass("layui-hide");
});
if (data.dsFormComponent.linkedData == 1) {
// 允许关联数据
$("#isAssociated").removeClass("layui-hide");
$("#linkDataBox").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");
}
loadDataMation($('#dataType').val());
});
if (data.dataType == 1) {
// 自定义
$(".defaultDataBox").removeClass("layui-hide");
initDisplayTemplate();
}
loadDataMation(data.dataType)
}
$("#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);
skyeyeClassEnumUtil.showEnumDataListByClassName("verificationParams", 'verificationSelect', "require", data.require, form, 'formerRequirement');
matchingLanguage();
form.render();
form.on('submit(formAddBean)', function (data) {
if (winui.verifyForm(data.elem)) {
saveNodeData(data, data.id, arr);
saveNodeData(data, data.id);
winui.window.msg("保存成功", {icon: 1, time: 2000});
}
return false;
});
function saveNodeData(data, contentId, arr) {
function saveNodeData(data, contentId) {
var inDataIndex = -1;
$.each(contentList, function(i, item) {
$.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.require = isNull($('#require').attr('value')) ? [] : $('#require').attr('value');
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 (newParams.dsFormComponent.linkedData == 1) {
newParams.dataType = $("#dataType").val();
if (newParams.dataType == 1) {
// 自定义
var defaultDataStr = $("#defaultData").val();
if (isNull(defaultDataStr)) {
winui.window.msg("请填写Json串!", {icon: 2, time: 2000});
return false;
} else {
if (isJSON(defaultDataStr)) {
var defaultKey = getOutKey(defaultDataStr);//取出json串的键
// 获取数据展示模板
var displayTemplate = getInPoingArr(displayTemplateList, 'id', $("#displayTemplateId").val());
var tplContentVal = strMatchAllByTwo(displayTemplate.content, '{{', '}}');//取出数据模板中用{{}}包裹的词
removeByValue(tplContentVal, "#each this");
removeByValue(tplContentVal, "/each");
if (subset(tplContentVal, defaultKey)) {
newParams.aData = defaultDataStr;
newParams.defaultData = defaultDataStr;
} else {
winui.window.msg('json串内容有误,请重新填写!', {icon: 2, time: 2000});
return false;
......@@ -113,24 +112,14 @@ layui.config({
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});
} else {
var objectId = $("#objectId").val();
if (isNull(objectId)) {
winui.window.msg("请选择数据.", {icon: 2, time: 2000});
return false;
}
newParams.aData = interfa;
} else {
winui.window.msg("状态值错误。", {icon: 2, time: 2000});
return false;
newParams.objectId = objectId;
}
} else if (newParams.linkedData == 2) {
newParams.associatedDataTypes = "";
newParams.aData = "";
}
contentList = contentList.map(t => {
return t.id === contentId ? newParams : t;
......@@ -139,74 +128,27 @@ layui.config({
$(".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;
}
function initEnumData() {
var arr = [];
$.each(skyeyeClassEnum, function (key, value) {
arr.push({
id: key,
name: value.name
})
});
$("#objectId").html(getDataUseHandlebars(selOption, {rows: arr}));
form.render('select');
}
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;
// }
// }
function loadDataMation(value) {
$("#dataTypeObjectBox").html(dataTypeObject[value]);
if (value == 1) {
// 自定义
initDisplayTemplate();
} else if (value == 2) {
// 枚举
initEnumData();
}
}
});
\ No newline at end of file
......@@ -41,6 +41,12 @@
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs6">
<label class="layui-form-label">关联属性<i class="red">*</i></label>
<div class="layui-input-block" id="attrKeys">
</div>
</div>
<div class="layui-form-item layui-col-xs6">
<label class="layui-form-label">显示类型<i class="red">*</i></label>
<div class="layui-input-block">
......
......@@ -47,6 +47,12 @@
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs6">
<label class="layui-form-label">关联属性<i class="red">*</i></label>
<div class="layui-input-block" id="attrKeys">
</div>
</div>
<div class="layui-form-item layui-col-xs6">
<label class="layui-form-label">显示类型<i class="red">*</i></label>
<div class="layui-input-block">
......
......@@ -76,7 +76,7 @@
.center-box-form {
width: calc(100% - 620px);
margin-left: 280px;
height: 100%;
height: calc(100% - 50px);
background-color: white;
z-index: 1;
position: absolute;
......
......@@ -17,62 +17,38 @@
<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>
<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>
<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 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}}"/>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-form-item layui-hide layui-col-xs12" id="placeholderBox">
<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">
<div class="layui-form-item layui-hide layui-col-xs12" id="requireBox">
<label class="layui-form-label">限制条件</label>
<div class="layui-input-block">
<select lay-filter="require" multiple lay-search="" id="require" name="require">
<div class="layui-input-block" id="require">
</select>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-form-item layui-hide layui-col-xs12" id="defaultValueBox">
<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">
<div class="layui-form-item layui-hide layui-col-xs12" id="widthBox">
<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">
......@@ -83,10 +59,20 @@
</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 class="layui-hide" id="linkDataBox">
<div class="layui-form-item layui-col-xs12">
<span class="hr-title">数据信息</span><hr>
</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 id="dataType" name="dataType" lay-search="" lay-filter="dataType">
</select>
</div>
</div>
<div id="dataTypeObjectBox">
</div>
</div>
<div class="layui-form-item layui-col-xs12">
......
......@@ -542,9 +542,9 @@ function getPieChatOption(title, subtext, data){
}
// 移除指定value值
function removeByValue(arr, val){
for(var i = 0; i < arr.length; i++){
if(arr[i] == val) {
function removeByValue(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == val) {
arr.splice(i, 1);
break;
}
......@@ -552,11 +552,11 @@ function removeByValue(arr, val){
}
// 取出json串的键
function getOutKey(arr){
function getOutKey(arr) {
var jsonObj = $.parseJSON(arr);
var a = [];
var b = [];
for(var i = 0; i < jsonObj.length; i++){
for (var i = 0; i < jsonObj.length; i++) {
for (var key in jsonObj[i])
a.push(key);
b.push(a);
......
......@@ -980,8 +980,9 @@ var dataShowType = {
* @param form form对象
* @param callback 回调函数
* @param chooseCallback 如果是提供选择的树插件类型,则具备点击节点的回调事件
* @param valueKey value展示的key
*/
showData: function (json, showType, showBoxId, defaultId, form, callback, chooseCallback) {
showData: function (json, showType, showBoxId, defaultId, form, callback, chooseCallback, valueKey) {
if (showType == 'select') {
// 下拉框
$("#" + showBoxId).html(getDataUseHandlebars(getFileContent('tpl/template/select-option.tpl'), json));
......@@ -1026,12 +1027,73 @@ var dataShowType = {
form.render('radio');
} else if (showType == 'verificationSelect') {
// 多选下拉框
var str = `<option value="">全部</option>{{#each rows}}<option value="{{formerRequirement}}">{{name}}</option>{{/each}}`;
$("#" + showBoxId).html(getDataUseHandlebars(str, json));
if (!isNull(defaultId)) {
$("#" + showBoxId).val(defaultId.split(","));
}
form.render('select');
var html = `<div id="${showBoxId}Div" class="xm-select-demo"></div>`;
$("#" + showBoxId).html(html);
var optionValueKey = isNull(valueKey) ? "id" : valueKey;
layui.define(["xmSelect"], function(exports) {
var xmSelect = layui.xmSelect;
var data = [].concat(json.rows);
// 设置选中值
var chooseId = [];
if (!isNull(defaultId)) {
var defaultIds = defaultId.split(",");
$.each(defaultIds, function (m, str) {
$.each(data, function (i, item) {
if (item[optionValueKey] == str) {
item.selected = true;
chooseId.push(str);
}
});
});
}
// 设置默认选中
$.each(data, function (i, item) {
if (item.isDefault && !item.selected) {
item.selected = true;
chooseId.push(item[optionValueKey]);
}
});
$(`#${showBoxId}`).attr('value', JSON.stringify(chooseId));
var _select = xmSelect.render({
el: `#${showBoxId}Div`,
data: json.rows,
autoRow: true,
model: {
label: {
type: 'block',
block: {
// 最大显示数量, 0:不限制
showCount: 3,
// 是否显示删除图标
showIcon: true,
}
}
},
theme: {
color: '#0089ff',
},
prop: {
name: 'name',
value: optionValueKey
},
filterable: true,
toolbar: {
show: true,
list: ['ALL', 'REVERSE', 'CLEAR']
},
on: function(data) {
var arr = data.arr;
var newChooseId = [];
$.each(arr, function (i, item) {
newChooseId.push(item[optionValueKey]);
});
$(`#${showBoxId}`).attr('value', JSON.stringify(newChooseId));
},
done: function(data) {
}
});
});
} else if (showType == 'radioTree') {
// 单选框树
var _html = sysDictDataUtil.getShowTteeHtml(showBoxId, '0');
......
......@@ -150,7 +150,9 @@ var dsFormUtil = {
if(typeof obj == 'string'){
obj = JSON.parse(obj);
}
content.context = getDataUseHandlebars(content.dsFormDisplayTemplate.content, obj);
if (!isNull(content.dsFormDisplayTemplate)) {
content.context = getDataUseHandlebars(content.dsFormDisplayTemplate.content, obj);
}
}
var jsonStr = {bean: content};
......
......@@ -13,10 +13,11 @@ var skyeyeClassEnumUtil = {
* @param defaultId 默认回显值
* @param form form对象
* @param callback 回调函数
* @param valueKey value展示的key
*/
showEnumDataListByClassName: function (code, showType, showBoxId, defaultId, form, callback) {
showEnumDataListByClassName: function (code, showType, showBoxId, defaultId, form, callback, valueKey) {
var json = skyeyeClassEnumUtil.getEnumDataListByClassName(code);
dataShowType.showData(json, showType, showBoxId, defaultId, form, callback);
dataShowType.showData(json, showType, showBoxId, defaultId, form, callback, valueKey);
},
getEnumDataNameByClassName: function (code, key, value, getKey) {
......
......@@ -325,6 +325,7 @@ function getCookie(name) {
ruleCode: 'ruleCode/ruleCode', // 编码规则
sortable: 'skuTable/sortable', // 表格排序
skuTable: 'skuTable/skuTable', // 商品规格
xmSelect: 'xm-select/xm-select', // 多选下拉框插件
};
// 记录基础数据
......
......@@ -35,6 +35,7 @@
"disCussionAuthEnum": {"name": "讨论帖权限", "className": "skyeye-pro#com.skyeye.discussion.classenum.DisCussionAuthEnum"},
"dsFormPageType": {"name": "表单布局类型", "className": "skyeye-pro#com.skyeye.dsform.classenum.DsFormPageType"},
"pageComponentDataType": {"name": "表单布局里面的组件关联的数据类型", "className": "skyeye-pro#com.skyeye.dsform.classenum.PageComponentDataType"}
"pageComponentDataType": {"name": "表单布局里面的组件关联的数据类型", "className": "skyeye-pro#com.skyeye.dsform.classenum.PageComponentDataType"},
"componentAttr": {"name": "组件关联的属性", "className": "skyeye-pro#com.skyeye.dsform.classenum.ComponentAttr"}
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册