351 lines
13 KiB
HTML
351 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{$title | default='YwxApp'}</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link href="/assets/layui/css/layui.css" rel="stylesheet">
|
|
<link href="/assets/ywxapp/css/ywxapp.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
|
|
<!--[if lt IE 9]>
|
|
<script src="__CDN__/assets/js/html5shiv.js"></script>
|
|
<script src="__CDN__/assets/js/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script type="text/javascript">
|
|
var config = {
|
|
root: "/",
|
|
};
|
|
var require = {
|
|
|
|
};
|
|
</script>
|
|
<style>
|
|
body {
|
|
padding: 20px;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.form-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.layui-tab-content {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.form-item-tip {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.form-group-title {
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="form-container">
|
|
<div id="formView"></div>
|
|
</div>
|
|
|
|
<!-- 表单模板 -->
|
|
<script type="text/html" id="formTpl">
|
|
<div class="layui-tab layui-tab-brief" lay-filter="formTab">
|
|
<ul class="layui-tab-title">
|
|
{{# layui.each(d.groups, function(index, group){ }}
|
|
<li class="{{# if(index === 0){ }}layui-this{{# } }}">{{ group }}</li>
|
|
{{# }); }}
|
|
</ul>
|
|
|
|
<div class="layui-tab-content">
|
|
{{# layui.each(d.groups, function(groupIndex, group){ }}
|
|
<div class="layui-tab-item {{# if(groupIndex === 0){ }}layui-show{{# } }}">
|
|
<form class="layui-form" lay-filter="form-{{ group }}">
|
|
<div class="form-group-title">{{ group }} 设置</div>
|
|
|
|
{{# layui.each(d.data[group], function(fieldIndex, field){ }}
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">{{ field.title }}</label>
|
|
<div class="layui-input-block">
|
|
{{# if(field.type === 'string' || field.type === 'text'){ }}
|
|
<!-- 文本输入框 -->
|
|
<input type="text"
|
|
name="{{ field.name }}"
|
|
value="{{ field.value || '' }}"
|
|
placeholder="{{ field.tip || '请输入' + field.title }}"
|
|
class="layui-input"
|
|
{{# if(field.rule === 'required'){ }}lay-verify="required"{{# } }}>
|
|
|
|
{{# } else if(field.type === 'textarea'){ }}
|
|
<!-- 文本域 -->
|
|
<textarea name="{{ field.name }}"
|
|
placeholder="{{ field.tip || '请输入' + field.title }}"
|
|
class="layui-textarea"
|
|
{{# if(field.rule === 'required'){ }}lay-verify="required"{{# } }}>{{ field.value || '' }}</textarea>
|
|
|
|
{{# } else if(field.type === 'select'){ }}
|
|
<!-- 下拉选择框 -->
|
|
<select name="{{ field.name }}"
|
|
{{# if(field.rule === 'required'){ }}lay-verify="required"{{# } }}>
|
|
<option value="">请选择{{ field.title }}</option>
|
|
{{#
|
|
var options = field.content ? field.content.split(',') : [];
|
|
layui.each(options, function(optIndex, option){
|
|
}}
|
|
<option value="{{ option }}" {{# if(field.value == option){ }}selected{{# } }}>{{ option }}</option>
|
|
{{# }); }}
|
|
</select>
|
|
|
|
{{# } else if(field.type === 'checkbox'){ }}
|
|
<!-- 复选框 -->
|
|
{{#
|
|
var checkboxes = field.content ? field.content.split(',') : [];
|
|
layui.each(checkboxes, function(cbIndex, cbValue){
|
|
}}
|
|
<input type="checkbox"
|
|
name="{{ field.name }}"
|
|
title="{{ cbValue }}"
|
|
value="{{ cbValue }}"
|
|
{{# if(field.value && field.value.indexOf(cbValue) !== -1){ }}checked{{# } }}
|
|
lay-skin="primary">
|
|
{{# }); }}
|
|
|
|
{{# } else if(field.type === 'radio'){ }}
|
|
<!-- 单选框 -->
|
|
{{#
|
|
var radios = field.content ? field.content.split(',') : [];
|
|
layui.each(radios, function(rdIndex, rdValue){
|
|
}}
|
|
<input type="radio"
|
|
name="{{ field.name }}"
|
|
title="{{ rdValue }}"
|
|
value="{{ rdValue }}"
|
|
{{# if(field.value == rdValue){ }}checked{{# } }}>
|
|
{{# }); }}
|
|
|
|
{{# } else if(field.type === 'number'){ }}
|
|
<!-- 数字输入框 -->
|
|
<input type="number"
|
|
name="{{ field.name }}"
|
|
value="{{ field.value || '' }}"
|
|
placeholder="{{ field.tip || '请输入' + field.title }}"
|
|
class="layui-input"
|
|
{{# if(field.rule === 'required'){ }}lay-verify="required|number"{{# } }}>
|
|
|
|
{{# } else if(field.type === 'date'){ }}
|
|
<!-- 日期选择器 -->
|
|
<input type="text"
|
|
name="{{ field.name }}"
|
|
value="{{ field.value || '' }}"
|
|
placeholder="{{ field.tip || '请选择日期' }}"
|
|
class="layui-input"
|
|
id="date-{{ field.id }}">
|
|
{{# } }}
|
|
|
|
{{# if(field.tip){ }}
|
|
<div class="form-item-tip">{{ field.tip }}</div>
|
|
{{# } }}
|
|
</div>
|
|
</div>
|
|
{{# }); }}
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" lay-submit lay-filter="submit-{{ group }}">保存设置</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{{# }); }}
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script src="/assets/layui/layui.js"></script>
|
|
<script src="/assets/ywxapp/ywxapp.js" module="backend"></script>
|
|
<script>// 原始数据
|
|
var formData = [
|
|
{
|
|
"id": 1,
|
|
"name": "site_name",
|
|
"group": "basic",
|
|
"title": "站点名称",
|
|
"tip": "请填写站点名称",
|
|
"type": "string",
|
|
"value": "YFCMF-TP6",
|
|
"content": "",
|
|
"rule": "required",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 2,
|
|
"name": "beian",
|
|
"group": "basic",
|
|
"title": "备案号",
|
|
"tip": "",
|
|
"type": "string",
|
|
"value": "",
|
|
"content": "",
|
|
"rule": "",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 3,
|
|
"name": "site_description",
|
|
"group": "basic",
|
|
"title": "站点描述",
|
|
"tip": "请填写站点描述",
|
|
"type": "textarea",
|
|
"value": "这是一个基于TP6的CMS系统",
|
|
"content": "",
|
|
"rule": "",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 4,
|
|
"name": "site_status",
|
|
"group": "advanced",
|
|
"title": "站点状态",
|
|
"tip": "选择站点是否开启",
|
|
"type": "select",
|
|
"value": "1",
|
|
"content": "开启,关闭,维护中",
|
|
"rule": "required",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 5,
|
|
"name": "allow_comment",
|
|
"group": "advanced",
|
|
"title": "允许评论",
|
|
"tip": "是否允许访客评论",
|
|
"type": "radio",
|
|
"value": "1",
|
|
"content": "是,否",
|
|
"rule": "",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 6,
|
|
"name": "features",
|
|
"group": "advanced",
|
|
"title": "功能模块",
|
|
"tip": "选择启用的功能模块",
|
|
"type": "checkbox",
|
|
"value": "文章,评论",
|
|
"content": "文章,评论,用户,统计",
|
|
"rule": "",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 7,
|
|
"name": "max_upload_size",
|
|
"group": "upload",
|
|
"title": "最大上传大小",
|
|
"tip": "单位：MB",
|
|
"type": "number",
|
|
"value": "10",
|
|
"content": "",
|
|
"rule": "required",
|
|
"extend": "",
|
|
"setting": ""
|
|
},
|
|
{
|
|
"id": 8,
|
|
"name": "upload_date",
|
|
"group": "upload",
|
|
"title": "上传日期限制",
|
|
"tip": "选择可上传文件的日期范围",
|
|
"type": "date",
|
|
"value": "2024-01-01",
|
|
"content": "",
|
|
"rule": "",
|
|
"extend": "",
|
|
"setting": ""
|
|
}
|
|
];
|
|
|
|
// 处理数据：按group分组
|
|
function processData(data) {
|
|
var groups = {};
|
|
var groupNames = [];
|
|
// 收集所有分组
|
|
data.forEach(function (item) {
|
|
if (!groups[item.group]) {
|
|
groups[item.group] = [];
|
|
groupNames.push(item.group);
|
|
}
|
|
groups[item.group].push(item);
|
|
});
|
|
return {
|
|
groups: groupNames,
|
|
data: groups
|
|
};
|
|
}
|
|
|
|
// 初始化Layui
|
|
layui.use(['laytpl', 'form', 'element', 'laydate', 'http'], function (exports) {
|
|
var laytpl = layui.laytpl;
|
|
var form = layui.form;
|
|
var element = layui.element;
|
|
var laydate = layui.laydate;
|
|
var http = layui.http;
|
|
http.get('index').then(respon => {
|
|
let respona = processData(respon.data && respon.data.length ? respon.data : formData);
|
|
var getTpl = document.getElementById('formTpl').innerHTML;
|
|
var view = document.getElementById('formView');
|
|
laytpl(getTpl).render(respona, function (html) {
|
|
view.innerHTML = html;
|
|
// 重新渲染表单元素
|
|
form.render();
|
|
element.render('tab');
|
|
// 初始化日期选择器
|
|
formData.forEach(function (item) {
|
|
if (item.type === 'date') {
|
|
laydate.render({
|
|
elem: '#date-' + item.id,
|
|
format: 'yyyy-MM-dd'
|
|
});
|
|
}
|
|
});
|
|
// 监听表单提交
|
|
form.on('submit', function (data) {
|
|
console.log('表单提交数据:', data.field);
|
|
http.post('update', data.field).then(respon => {
|
|
console.log(respon)
|
|
});
|
|
layer.msg('表单提交成功！已输出到控制台');
|
|
return false;
|
|
});
|
|
});
|
|
})
|
|
// 处理数据
|
|
//var processedData = processData(formData);
|
|
// 渲染模板
|
|
// exports('configure', {});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |