171 lines
4.4 KiB
JavaScript
171 lines
4.4 KiB
JavaScript
|
|
// 原始数据
|
|
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.define(['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);
|
|
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', {});
|
|
});
|