表单布局 属性页面
This commit is contained in:
ly19960718
parent
39f7b6f09f
commit
8861bd04ff
@ -46,10 +46,15 @@ public class ConfigTableRouteController extends DefaultBaseController {
|
||||
|
||||
|
||||
|
||||
@GetMapping("field")
|
||||
public ModelAndView inputField() {
|
||||
@GetMapping("field-select")
|
||||
public ModelAndView fieldSelect() {
|
||||
String path = "configtable/field-select";
|
||||
return new ModelAndView(path);
|
||||
}
|
||||
|
||||
@GetMapping("field-file")
|
||||
public ModelAndView fieldFile() {
|
||||
String path = "configtable/field-file";
|
||||
return new ModelAndView(path);
|
||||
}
|
||||
}
|
||||
@ -10,28 +10,108 @@
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
|
||||
<style>
|
||||
.showButton{
|
||||
background-color: #5FB878;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<form class="layui-form layui-form-pane" lay-filter="inputForm">
|
||||
<div class="layui-form-item" style="text-align: center;width:100% !important;font-size: 17px">
|
||||
<body onbeforeunload="goodbye()">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<!-- <div class="layui-form-item" style="text-align: center;width:100% !important;font-size: 17px">
|
||||
<b>附加配置</b>
|
||||
</div>
|
||||
<div class="layui-form-item" >
|
||||
<label class="layui-form-label">最大上传数<span style="color: red">*</span></label>
|
||||
</div>-->
|
||||
<fieldset class="layui-elem-field layui-field-title site-title">
|
||||
<legend style="margin-left: 209px;padding: 0 23px;" font-size: 18px;><a name="method">选项</a></legend>
|
||||
</fieldset>
|
||||
<div class="layui-form-item" style="margin-left: 20px;margin-top: 5px">
|
||||
<label class="layui-form-label">数据类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">网站设置</li>
|
||||
<li>用户管理</li>
|
||||
<li>权限分配</li>
|
||||
<li>商品管理</li>
|
||||
<li>订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content"></div>
|
||||
<div class="layui-btn-group buttonDiv" style="margin-top: 5px;">
|
||||
<button type="button" class="layui-btn layui-btn-sm showButton" data-value="1">自定义</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm" data-value="2">数据字典</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm" data-value="3">接口数据</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="layui-border-blue">
|
||||
|
||||
<div class="layui-form-item" id="dataValue1">
|
||||
<div class="layui-row" id="optionDataDiv">
|
||||
|
||||
</div>
|
||||
<div class="layui-row" style="margin-left: 20px;margin-top: 15px">
|
||||
<a id="addOption" style="color: #2e6da4;cursor: pointer"> <i class="fa fa-lg fa-plus-circle"></i> 添加选项 </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" id="dataValue2">
|
||||
<div class="layui-row" >
|
||||
<div class="layui-row" style="margin-left: 20px;margin-top: 5px">
|
||||
<div class="layui-col-md6 layui-col-lg6" >
|
||||
<label class="layui-form-label">数据字典</label>
|
||||
<div class="layui-input-block layui-form" id="dataDictIdSelectTemplateBox" lay-filter="dataDictIdSelectTemplateBox"></div>
|
||||
<script id="dataDictIdSelectTemplate" type="text/html">
|
||||
<select id="dataDictId" name="dataDictId">
|
||||
<option value="">请选择数据字典</option>
|
||||
{{# for(var i = 0, item; item = d[i++];) { }}
|
||||
<option value="{{item.dataId}}">{{item.dataName}}</option>
|
||||
{{# } }}
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" id="dataValue3">
|
||||
<div class="layui-row" >
|
||||
<div class="layui-row" style="margin-left: 20px;margin-top: 5px">
|
||||
<div class="layui-col-md6 layui-col-lg6" >
|
||||
<label class="layui-form-label">地址<span style="color: red">*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="optionPath" name="optionPath" class="layui-input" value="" placeholder="请输入列名例如 name、age、sex" maxlength="50">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<script type="text/html" id="optionTemplate">
|
||||
<div class="layui-row" style="margin-left: 20px;margin-top: 5px">
|
||||
<div class="layui-col-xs5">
|
||||
<input type="text" name="optionKey" class="layui-input" value="[optionKeyValue]" placeholder="选项名">
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<input type="text" name="optionValue" class="layui-input" value="[optionValueValue]" placeholder="选项值">
|
||||
</div>
|
||||
<div class="layui-col-xs2">
|
||||
<button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script src="assets/js/vendor/wangEditor/wangEditor.min.js"></script>
|
||||
<script src="assets/js/vendor/ckplayer/ckplayer/ckplayer.js"></script>
|
||||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||||
@ -41,46 +121,183 @@
|
||||
base: 'assets/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'form', 'laydate', 'laytpl', 'table'], function(){
|
||||
}).use(['index', 'form', 'laydate', 'laytpl', 'table','element'], function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var $win = $(window);
|
||||
var laytpl = layui.laytpl;
|
||||
var table = layui.table;
|
||||
var laydate = layui.laydate;
|
||||
var element = layui.element
|
||||
var id = top.restAjax.params(window.location.href).id;
|
||||
|
||||
|
||||
// 初始化数据字典下拉选择
|
||||
function initDataDictIdSelect(selectValue) {
|
||||
top.restAjax.get(top.restAjax.path('api/data/listbyparentid/0', []), {}, null, function(code, data, args) {
|
||||
laytpl(document.getElementById('dataDictIdSelectTemplate').innerHTML).render(data, function(html) {
|
||||
document.getElementById('dataDictIdSelectTemplateBox').innerHTML = html;
|
||||
});
|
||||
form.render('select', 'dataDictIdSelectTemplateBox');
|
||||
|
||||
var selectObj = {};
|
||||
selectObj['dataDictId'] = selectValue;
|
||||
form.val('dataForm', selectObj);
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
});
|
||||
}
|
||||
|
||||
/* $('.attr').change(function () {
|
||||
|
||||
})*/
|
||||
|
||||
|
||||
//alert(window.parent.aa)
|
||||
//数据类型
|
||||
$('.buttonDiv .layui-btn').on('click', function(){
|
||||
$('.buttonDiv .layui-btn').removeClass('showButton')
|
||||
$(this).addClass('showButton')
|
||||
var optionType = $(this).attr("data-value");
|
||||
|
||||
if(optionType === '1'){
|
||||
$("#dataValue1").show();
|
||||
$("#dataValue2").hide()
|
||||
$("#dataValue3").hide()
|
||||
}
|
||||
if(optionType === '2'){
|
||||
$("#dataValue1").hide();
|
||||
$("#dataValue2").show()
|
||||
$("#dataValue3").hide()
|
||||
}
|
||||
if(optionType === '3'){
|
||||
$("#dataValue1").hide()
|
||||
$("#dataValue2").hide()
|
||||
$("#dataValue3").show()
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.attr').change(function () {
|
||||
window.parent.setData("2",$(this).attr('name'),this.value);
|
||||
//填加选项
|
||||
$("#addOption").on('click',function(){
|
||||
optionTemplate();
|
||||
});
|
||||
|
||||
function optionTemplate(optionData){
|
||||
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
|
||||
var template = document.getElementById("optionTemplate").innerHTML;
|
||||
var html = template.replace(reg, function (node, key) {
|
||||
if(typeof(optionData) == "undefined"){
|
||||
return { 'optionKeyValue': '选项一', 'optionValueValue': '1'}[key];
|
||||
}else{
|
||||
return { 'optionKeyValue': optionData.optionKey, 'optionValueValue': optionData.optionValue}[key];
|
||||
}
|
||||
});
|
||||
$("#optionDataDiv").append(html)
|
||||
}
|
||||
|
||||
|
||||
|
||||
//删除选项
|
||||
$(document).on('click','.optionRemove',function () {
|
||||
$(this).parent().parent().remove()
|
||||
})
|
||||
|
||||
|
||||
//获取选项数据
|
||||
function getOptionData(){
|
||||
var option = {};
|
||||
var type = $(".buttonDiv .showButton").attr('data-value');
|
||||
option['type'] = type;
|
||||
option['data'] = '';
|
||||
if(type === '1'){
|
||||
var data = []
|
||||
$($("#optionDataDiv .layui-row")).each(function (i,e) {
|
||||
var optionData = {}
|
||||
$($(e).find("input")).each(function (i,e) {
|
||||
var name = e.name;
|
||||
if(name === 'optionKey'){
|
||||
optionData['optionKey'] = e.value
|
||||
}
|
||||
if(name === 'optionValue'){
|
||||
optionData['optionValue'] = e.value
|
||||
}
|
||||
});
|
||||
data.push(optionData)
|
||||
})
|
||||
option['data'] = data
|
||||
}
|
||||
if(type === '2'){
|
||||
option['data'] = $("#dataDictId").val()
|
||||
}
|
||||
if(type === '3'){
|
||||
option['data'] = $("#optionPath").val()
|
||||
}
|
||||
return option
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 初始化内容
|
||||
initData();
|
||||
function initData() {
|
||||
|
||||
|
||||
|
||||
var custom = window.parent.getMapCustomData(id);
|
||||
console.log(custom)
|
||||
var optionData = custom.optionData;
|
||||
if(optionData == undefined){
|
||||
$("#dataValue2").hide()
|
||||
$("#dataValue3").hide()
|
||||
initDataDictIdSelect("");
|
||||
} else {
|
||||
var optionType = optionData.type;
|
||||
if(optionType === '1'){
|
||||
$("#dataValue1").show();
|
||||
$("#dataValue2").hide()
|
||||
$("#dataValue3").hide()
|
||||
$(optionData.data).each(function (i,e) {
|
||||
optionTemplate(e);
|
||||
})
|
||||
}
|
||||
if(optionType === '2'){
|
||||
$("#dataValue1").hide();
|
||||
$("#dataValue2").show()
|
||||
$("#dataValue3").hide()
|
||||
initDataDictIdSelect(optionData.data)
|
||||
}
|
||||
if(optionType === '3'){
|
||||
$("#dataValue1").hide()
|
||||
$("#dataValue2").hide()
|
||||
$("#dataValue3").show()
|
||||
$("#optionPath").val(optionData.data)
|
||||
}
|
||||
|
||||
}
|
||||
initData();
|
||||
}
|
||||
|
||||
|
||||
function saveConfig(){
|
||||
window.parent.setMapCustomData(id,'optionData',getOptionData());
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 校验
|
||||
form.verify({
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
window.onbeforeunload=function(e){
|
||||
saveConfig();
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -54,6 +54,10 @@
|
||||
.clearIn {
|
||||
clear: both !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -325,6 +329,11 @@
|
||||
function getMapBaseConfig(id){
|
||||
return configMap.get(id).baseConfig;
|
||||
}
|
||||
//根据id获取扩展配置
|
||||
function getMapCustomData(id){
|
||||
return configMap.get(id).customConfig;
|
||||
}
|
||||
|
||||
|
||||
//根据id获取配置
|
||||
function getMapById(id){
|
||||
@ -569,7 +578,8 @@
|
||||
configTableFieldPlaceholder:data[i].configTableFieldPlaceholder,
|
||||
configTableFieldDefault:data[i].configTableFieldDefault,
|
||||
configTableFieldId:data[i].configTableFieldId,
|
||||
configTableFieldDisplay:data[i].configTableFieldDisplay
|
||||
configTableFieldDisplay:data[i].configTableFieldDisplay,
|
||||
configTableFieldType:data[i].configTableFieldType
|
||||
},
|
||||
customConfig: {
|
||||
demo:'demo',
|
||||
@ -581,17 +591,16 @@
|
||||
// 排序
|
||||
var container = document.getElementById("container");
|
||||
var sort = Sortable.create(container, {
|
||||
animation: 30, // ms, animation speed moving items when sorting, `0` — without animation
|
||||
animation: 250, // ms, animation speed moving items when sorting, `0` — without animation
|
||||
handle: ".module1", // Restricts sort start click/touch to the specified element
|
||||
draggable: ".module1", // Specifies which items inside the element should be sortable
|
||||
onUpdate: function (evt){
|
||||
console.log(evt);
|
||||
console.log(evt.item);
|
||||
console.log(evt.nextSibling);
|
||||
//console.log(evt);
|
||||
//console.log(evt.item);
|
||||
//console.log(evt.nextSibling);
|
||||
},
|
||||
onChoose: function (evt) {
|
||||
var path = top.restAjax.path('route/configtable/field?id={id}', [213])
|
||||
$('#attribute').attr('src',path)
|
||||
setFieldAttributeHtml(evt.item.id)
|
||||
// 初始化基础数据
|
||||
var dataFormData = getMapBaseConfig(evt.item.id);
|
||||
dataFormData.configTableFieldMust = dataFormData.configTableFieldMust == 1 ? true : false;
|
||||
@ -663,6 +672,28 @@
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
function setFieldAttributeHtml(id){
|
||||
var baseConfig = getMapBaseConfig(id);
|
||||
if(typeof(baseConfig) != "undefined" || baseConfig != null || baseConfig != ''){
|
||||
var type = baseConfig['configTableFieldType'];
|
||||
if(type === '2' || type === '3' || type === '4'){
|
||||
var path = top.restAjax.path('route/configtable/field-file?id={id}', [id,'file'])
|
||||
$('#attribute').attr('src',path)
|
||||
|
||||
}else if(type === '8' || type === '9'){
|
||||
var path = top.restAjax.path('route/configtable/field-select?id={id}', [id,'select'])
|
||||
$('#attribute').attr('src',path)
|
||||
}else{
|
||||
$('#attribute').attr('src','');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 校验
|
||||
form.verify({
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user