root
321 lines
14 KiB
HTML
Executable File
321 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>系统配置样例</title>
|
|
</head>
|
|
<body class="laytp-container">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<form class="layui-form" lay-filter="layui-form">
|
|
<div class="table-container">
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="button-container">
|
|
<button type="submit" class="laytp-btn laytp-btn-primary laytp-btn-sm" lay-submit="" lay-filter="add">
|
|
<i class="layui-icon layui-icon-ok"></i>
|
|
保存配置
|
|
</button>
|
|
<button type="reset" class="laytp-btn laytp-btn-sm">
|
|
<i class="layui-icon layui-icon-refresh"></i>
|
|
重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script id="confTableHtml" type="text/html">
|
|
<input type="hidden" name="group" id="group" value="{{=d.group}}"/>
|
|
<table class="layui-table" style="margin: 0;" lay-skin="nob">
|
|
<colgroup>
|
|
<col width="15%">
|
|
<col width="70%">
|
|
<col width="15%">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
单行文本输入框
|
|
</td>
|
|
<td>
|
|
<input autocomplete="off" type="text" name="input" id="input" value="{{=d.input}}" placeholder="请输入单行文本输入框" class="layui-input" lay-verify="required">
|
|
<input type="hidden" name="form_type[input]" value="input" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">这是一个单行输入框</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.input">{{=d.group}}.input</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
文本域
|
|
</td>
|
|
<td>
|
|
<textarea name="textarea" class="layui-textarea">{{=d.textarea}}</textarea>
|
|
<input type="hidden" name="form_type[textarea]" value="textarea" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">这是一个文本域</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.textarea">{{=d.group}}.textarea</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
单选下拉框
|
|
</td>
|
|
<td>
|
|
<div class="xmSelect"
|
|
data-name="singleSelect"
|
|
data-sourceType="data"
|
|
data-radio="true"
|
|
data-source='[{"id":"1","name":"唱歌"},{"id":"2","name":"跳舞"},{"id":"3","name":"朗诵"},{"id":"4","name":"武术"}]'
|
|
data-selected="{{=d.singleSelect}}"
|
|
></div>
|
|
<input type="hidden" name="form_type[singleSelect]" value="xmSelect" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">这个一个单选下拉框</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.singleSelect')">{{=d.group}}.singleSelect</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
多选下拉框
|
|
</td>
|
|
<td>
|
|
<div class="xmSelect"
|
|
data-name="multiSelect"
|
|
data-sourceType="data"
|
|
data-source='[{"id":"1","name":"唱歌"},{"id":"2","name":"跳舞"},{"id":"3","name":"朗诵"},{"id":"4","name":"武术"}]'
|
|
data-selected="{{=d.multiSelect}}"
|
|
></div>
|
|
<input type="hidden" name="form_type[multiSelect]" value="xmSelect" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">这是一个多选下拉框</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.multiSelect">{{=d.group}}.multiSelect</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
开关
|
|
</td>
|
|
<td>
|
|
<!-- 隐藏域设置开关未选中时需要传递的参数值 -->
|
|
<input type="hidden" name="switch" value="2"/>
|
|
<input type="checkbox" name="switch" lay-skin="switch"
|
|
lay-text="打开|关闭"
|
|
value="1" {{# if(d.switch == 1){ }}checked="checked"{{# } }}
|
|
/>
|
|
<input type="hidden" name="form_type[switch]" value="switch" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="这是一个开关">这是一个开关</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.switch">{{=d.group}}.switch</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
数组
|
|
</td>
|
|
<td>
|
|
<input type="hidden" name="form_type[array]" value="array" />
|
|
<table class="layui-table" style="margin: 0;" lay-skin="line">
|
|
<colgroup>
|
|
<col width="25%">
|
|
<col width="70%">
|
|
<col>
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Value</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="tableDnd">
|
|
{{# if(d.array){ }}
|
|
{{# var key; for(key in d.array){ }}
|
|
<tr>
|
|
<td style="padding: 4px 15px;"><input class="layui-input" type="text" name="array[key][]" value="{{=key}}" /></td>
|
|
<td style="padding: 4px 15px;"><input class="layui-input" type="text" name="array[value][]" value="{{=d.array[key]}}" /></td>
|
|
<td style="padding: 4px 15px;">
|
|
<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete delArrayItem" layer-tips="删除" title="删除"></a>
|
|
</td>
|
|
</tr>
|
|
{{# } }}
|
|
{{# }else{ }}
|
|
<tr>
|
|
<td style="padding: 4px 15px;"><input class="layui-input" type="text" name="array[key][]" value="" /></td>
|
|
<td style="padding: 4px 15px;"><input class="layui-input" type="text" name="array[value][]" value="" /></td>
|
|
<td style="padding: 4px 15px;">
|
|
<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete delArrayItem" layer-tips="删除" title="删除"></a>
|
|
</td>
|
|
</tr>
|
|
{{# } }}
|
|
<tr class='nodrop nodrag'>
|
|
<td colspan="3" style="padding: 4px 15px;">
|
|
<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-add-1 addArrayItem" title="追加">追加</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
配置说明
|
|
<br/>
|
|
<code title="{{=d.group}}.array">{{=d.group}}.array</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
多个图片
|
|
</td>
|
|
<td>
|
|
<div class="laytpUpload"
|
|
data-name="imgs"
|
|
data-accept="image"
|
|
data-multi="true"
|
|
data-uploadedId="{{d.imgs}}"
|
|
data-uploaded="{{d.imgs_path}}"
|
|
data-uploadedFilename="{{d.imgs_filename}}"
|
|
></div>
|
|
<input type="hidden" name="form_type[imgs]" value="upload" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">配置说明</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.imgs">{{=d.group}}.imgs</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
单个图片
|
|
</td>
|
|
<td>
|
|
<div class="laytpUpload"
|
|
data-name="img"
|
|
data-accept="image"
|
|
data-uploadedId="{{d.imgs}}"
|
|
data-uploaded="{{d.imgs_path}}"
|
|
data-uploadedFilename="{{d.imgs_filename}}"
|
|
></div>
|
|
<input type="hidden" name="form_type[img]" value="upload" />
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">配置说明</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.img">{{=d.group}}.img</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:right;">
|
|
编辑器
|
|
</td>
|
|
<td>
|
|
<iframe src="/admin/ueditor.html?id=ueditor" class="editor" data-type="ueditor" data-id="ueditor" style="width:100%;height:530px;border: 0"></iframe>
|
|
<textarea class="editorContent" data-id="ueditor" style="display:none;">{{=d.ueditor}}</textarea>
|
|
</td>
|
|
<td>
|
|
<div class="conf-des layui-form-mid layui-word-aux">
|
|
<label title="配置说明">配置说明</label>
|
|
<br/>
|
|
<code title="{{=d.group}}.ueditor">{{=d.group}}.ueditor</code>
|
|
</div>
|
|
</td>
|
|
<input type="hidden" name="form_type[ueditor]" value="ueditor" />
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</script>
|
|
<script type="application/javascript">
|
|
if(localStorage.getItem("staticDomain")){
|
|
document.write("<link rel='stylesheet' href='" + localStorage.getItem("staticDomain") + "/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
|
|
document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/layui/layui.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/laytp/layuiConfig.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/jquery_3.3.1.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/jquery.tablednd.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
}else{
|
|
document.write("<link rel='stylesheet' href='/static/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
|
|
document.write("<script src='/static/component/layui/layui.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
document.write("<script src='/static/component/laytp/layuiConfig.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
document.write("<script src='/static/component/jquery_3.3.1.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
document.write("<script src='/static/component/jquery.tablednd.js?v="+localStorage.getItem("version")+"'><\/script>");
|
|
}
|
|
</script>
|
|
<script>
|
|
layui.use(['laytp'],function(){
|
|
var group = "system.demo";
|
|
// 先获取数据，渲染表单
|
|
// 渲染完表单之后，设置滚动条
|
|
facade.ajax({
|
|
route: "/admin.conf/getGroupConf",
|
|
data: {"group" : group},
|
|
successAlert: false,
|
|
showLoading: true
|
|
}).done(function(res){
|
|
if(res.code === 0){
|
|
res.data.group = group;
|
|
layui.laytpl($("#confTableHtml").html()).render(res.data,function(string){
|
|
$(".table-container").html(string);
|
|
layui.laytpForm.render();
|
|
layui.form.render();
|
|
var windowHeight = $(window).height();
|
|
var maxHeight = parseInt(windowHeight) - 86;
|
|
var minHeight = parseInt(windowHeight) - 86;
|
|
// 设置table-container的最大高度和超过高度后展示滚动条
|
|
$(".table-container").css("margin-bottom", '40px');
|
|
$(".table-container").css("max-height", maxHeight + 'px');
|
|
$(".table-container").css("min-height", minHeight + 'px');
|
|
$(".table-container").css("overflow-y", "auto");
|
|
|
|
$('.bottom').css("background-color", "#f6f6f6");
|
|
});
|
|
}
|
|
});
|
|
|
|
layui.form.on('submit(add)', function(data){
|
|
var btnAnim = layui.button.load({elem:$(this)});
|
|
try{
|
|
data = facade.setEditorField(data);
|
|
}catch (e) {
|
|
facade.error(e);
|
|
return false;
|
|
}
|
|
data.field.group = group;
|
|
facade.ajax({
|
|
route:'/admin.conf/saveGroupConf',
|
|
data : data.field
|
|
}).done(function(res){
|
|
btnAnim.stop();
|
|
}).fail(function(){
|
|
btnAnim.stop();
|
|
});
|
|
return false;
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |