表单布局 属性页面
This commit is contained in:
ly19960718
parent
39f7b6f09f
commit
8861bd04ff
@ -46,10 +46,15 @@ public class ConfigTableRouteController extends DefaultBaseController {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
@GetMapping("field")
|
@GetMapping("field-select")
|
||||||
public ModelAndView inputField() {
|
public ModelAndView fieldSelect() {
|
||||||
String path = "configtable/field-select";
|
String path = "configtable/field-select";
|
||||||
return new ModelAndView(path);
|
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/layui/css/layui.css" media="all">
|
||||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.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">
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.showButton{
|
||||||
|
background-color: #5FB878;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body onbeforeunload="goodbye()">
|
||||||
<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">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
<b>附加配置</b>
|
||||||
</div>
|
</div>-->
|
||||||
<div class="layui-form-item" >
|
<fieldset class="layui-elem-field layui-field-title site-title">
|
||||||
<label class="layui-form-label">最大上传数<span style="color: red">*</span></label>
|
<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-input-block">
|
||||||
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
<div class="layui-btn-group buttonDiv" style="margin-top: 5px;">
|
||||||
<ul class="layui-tab-title">
|
<button type="button" class="layui-btn layui-btn-sm showButton" data-value="1">自定义</button>
|
||||||
<li class="layui-this">网站设置</li>
|
<button type="button" class="layui-btn layui-btn-sm" data-value="2">数据字典</button>
|
||||||
<li>用户管理</li>
|
<button type="button" class="layui-btn layui-btn-sm" data-value="3">接口数据</button>
|
||||||
<li>权限分配</li>
|
|
||||||
<li>商品管理</li>
|
|
||||||
<li>订单管理</li>
|
|
||||||
</ul>
|
|
||||||
<div class="layui-tab-content"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</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/wangEditor/wangEditor.min.js"></script>
|
||||||
<script src="assets/js/vendor/ckplayer/ckplayer/ckplayer.js"></script>
|
<script src="assets/js/vendor/ckplayer/ckplayer/ckplayer.js"></script>
|
||||||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||||||
@ -41,46 +121,183 @@
|
|||||||
base: 'assets/layuiadmin/' //静态资源所在路径
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
||||||
}).extend({
|
}).extend({
|
||||||
index: 'lib/index' //主入口模块
|
index: 'lib/index' //主入口模块
|
||||||
}).use(['index', 'form', 'laydate', 'laytpl', 'table'], function(){
|
}).use(['index', 'form', 'laydate', 'laytpl', 'table','element'], function(){
|
||||||
var $ = layui.$;
|
var $ = layui.$;
|
||||||
var form = layui.form;
|
var form = layui.form;
|
||||||
var $win = $(window);
|
|
||||||
var laytpl = layui.laytpl;
|
var laytpl = layui.laytpl;
|
||||||
var table = layui.table;
|
var element = layui.element
|
||||||
var laydate = layui.laydate;
|
|
||||||
var id = top.restAjax.params(window.location.href).id;
|
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 initData() {
|
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();
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function saveConfig(){
|
||||||
|
window.parent.setMapCustomData(id,'optionData',getOptionData());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 校验
|
// 校验
|
||||||
form.verify({
|
form.verify({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
|
window.onbeforeunload=function(e){
|
||||||
|
saveConfig();
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -54,6 +54,10 @@
|
|||||||
.clearIn {
|
.clearIn {
|
||||||
clear: both !important;
|
clear: both !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -325,6 +329,11 @@
|
|||||||
function getMapBaseConfig(id){
|
function getMapBaseConfig(id){
|
||||||
return configMap.get(id).baseConfig;
|
return configMap.get(id).baseConfig;
|
||||||
}
|
}
|
||||||
|
//根据id获取扩展配置
|
||||||
|
function getMapCustomData(id){
|
||||||
|
return configMap.get(id).customConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//根据id获取配置
|
//根据id获取配置
|
||||||
function getMapById(id){
|
function getMapById(id){
|
||||||
@ -569,7 +578,8 @@
|
|||||||
configTableFieldPlaceholder:data[i].configTableFieldPlaceholder,
|
configTableFieldPlaceholder:data[i].configTableFieldPlaceholder,
|
||||||
configTableFieldDefault:data[i].configTableFieldDefault,
|
configTableFieldDefault:data[i].configTableFieldDefault,
|
||||||
configTableFieldId:data[i].configTableFieldId,
|
configTableFieldId:data[i].configTableFieldId,
|
||||||
configTableFieldDisplay:data[i].configTableFieldDisplay
|
configTableFieldDisplay:data[i].configTableFieldDisplay,
|
||||||
|
configTableFieldType:data[i].configTableFieldType
|
||||||
},
|
},
|
||||||
customConfig: {
|
customConfig: {
|
||||||
demo:'demo',
|
demo:'demo',
|
||||||
@ -581,17 +591,16 @@
|
|||||||
// 排序
|
// 排序
|
||||||
var container = document.getElementById("container");
|
var container = document.getElementById("container");
|
||||||
var sort = Sortable.create(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
|
handle: ".module1", // Restricts sort start click/touch to the specified element
|
||||||
draggable: ".module1", // Specifies which items inside the element should be sortable
|
draggable: ".module1", // Specifies which items inside the element should be sortable
|
||||||
onUpdate: function (evt){
|
onUpdate: function (evt){
|
||||||
console.log(evt);
|
//console.log(evt);
|
||||||
console.log(evt.item);
|
//console.log(evt.item);
|
||||||
console.log(evt.nextSibling);
|
//console.log(evt.nextSibling);
|
||||||
},
|
},
|
||||||
onChoose: function (evt) {
|
onChoose: function (evt) {
|
||||||
var path = top.restAjax.path('route/configtable/field?id={id}', [213])
|
setFieldAttributeHtml(evt.item.id)
|
||||||
$('#attribute').attr('src',path)
|
|
||||||
// 初始化基础数据
|
// 初始化基础数据
|
||||||
var dataFormData = getMapBaseConfig(evt.item.id);
|
var dataFormData = getMapBaseConfig(evt.item.id);
|
||||||
dataFormData.configTableFieldMust = dataFormData.configTableFieldMust == 1 ? true : false;
|
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({
|
form.verify({
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user