420 lines
16 KiB
HTML
420 lines
16 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>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="layui-card">
|
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
|
</div>
|
|
<div class="layui-inline">
|
|
<button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="tableSearchButton">
|
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card-body">
|
|
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/html" id="dataBarTpl">
|
|
<div class="layui-btn-group">
|
|
<a class="layui-btn layui-btn-sm layui-btn-primary" title="编辑节点" lay-event="update"><i class="layui-icon layui-icon-edit"></i> </a>
|
|
<a class="layui-btn layui-btn-sm layui-btn-primary" title="添加子节点" lay-event="create"><i class="layui-icon layui-icon-add-1"></i> </a>
|
|
<a class="layui-btn layui-btn-sm layui-btn-primary" title="删除节点" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> </a>
|
|
</div>
|
|
</script>
|
|
<!-- 添加/编辑菜单表单模板 -->
|
|
<script type="text/html" id="dataFormTpl">
|
|
<form class="layui-form layui-form-pane" lay-filter="wxapp-form" id="wxapp-form">
|
|
<input type="hidden" name="id" value="{{= d.id || '' }}">
|
|
<input type="hidden" name="pid" value="{{= d.pid || 0 }}">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">标题</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" value="{{ d.title || '' }}" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">图标</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="icon" placeholder="请选择图标" value="{{ d.icon ? d.icon.replace('layui-icon ', '') : '' }}" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item ">
|
|
<label class="layui-form-label">摘要</label>
|
|
<div class="layui-input-block">
|
|
<input name="summary" placeholder="请输入摘要" class="layui-input" value="{{ d.summary || '' }}" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-form-text">
|
|
<label class="layui-form-label">关键词</label>
|
|
<div class="layui-input-block">
|
|
<textarea name="keywords" placeholder="请输入关键词" class="layui-textarea">{{d.keywords||''}}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-form-text">
|
|
<label class="layui-form-label">描述</label>
|
|
<div class="layui-input-block">
|
|
<textarea name="description" placeholder="请输入描述信息" class="layui-textarea">{{d.description||''}}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">排序</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="sort" value="{{ d.sort || 0 }}" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">状态</label>
|
|
<div class="layui-input-block">
|
|
<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" {{ d.status != 0 ? 'checked' : (!d.id ? 'checked' : '') }}>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item layui-hide">
|
|
<button class="layui-btn" lay-submit="" lay-filter="wxapp-form-submit" id="wxapp-form-submit">提交</button>
|
|
</div>
|
|
</form>
|
|
</script>
|
|
<!-- 状态开关 -->
|
|
<script type="text/html" id="statusTpl">
|
|
<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusSwitch" {{ d.status == 1 ? 'checked' : '' }}>
|
|
</script>
|
|
<script type="text/html" id="dataRecybinTpl">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"> </div>
|
|
<div class="layui-card-body">
|
|
<table class="layui-hide" id="dataRecybinTable" lay-filter="dataRecybinTable"></table>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
</script>
|
|
<script src="/assets/layui/layui.js"></script>
|
|
<script src="/assets/ywxapp/ywxapp.js" module="backend"></script>
|
|
<script>
|
|
layui.use(['layer', 'http'], function () {
|
|
var $ = layui.$;
|
|
var treeTable = layui.treeTable;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var laytpl = layui.laytpl;
|
|
var http = layui.http;
|
|
console.log('layui.treeTable:', layui.setter.layerArea()); // 调试输出
|
|
treeTable.render({
|
|
defaultToolbar: [{
|
|
title: '创建资源', layEvent: 'dataCreate', icon: 'layui-icon-add-1'
|
|
}, {
|
|
title: '删除资源', layEvent: 'dataDelete', icon: 'layui-icon-delete'
|
|
}, {
|
|
title: '资源回收站', layEvent: 'dataRecybin', icon: 'layui-icon-home'
|
|
}, 'filter', 'exports', 'print'
|
|
],
|
|
elem: '#dataTable',
|
|
url: 'category/index',
|
|
parseData: function (res) { // 预处理返回数据
|
|
console.log('原始数据:', res); // 调试输入
|
|
return {
|
|
code: res.code === 0 ? 0 : 1, // 0 标识成功
|
|
data: res.data || [], // 数据数组
|
|
msg: res.message || '' // 错误信息
|
|
};
|
|
},
|
|
tree: {
|
|
customName: {
|
|
children: "children",
|
|
isParent: "is_parent",
|
|
name: "title",
|
|
id: "id",
|
|
pid: "pid",
|
|
icon: "icon"
|
|
},
|
|
data: { isSimpleData: true, rootPid: 0 },
|
|
view: {},
|
|
async: {},
|
|
callback: {}
|
|
},
|
|
height: 'full-100',
|
|
toolbar: '#tableBarTpl',
|
|
cols: [[
|
|
{ type: 'checkbox', fixed: 'left' },
|
|
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
|
|
{ field: 'title', title: '名称', width: 180, fixed: 'left' },
|
|
{ field: 'icon', title: '图标', width: 80 },
|
|
{ field: 'sort', title: '排序', width: 80, sort: true },
|
|
{ field: 'status', title: '状态', width: 96, align: 'center', templet: '#statusTpl' },
|
|
{ fixed: "right", title: "操作", align: "center", toolbar: "#dataBarTpl", fixed: 'right' }
|
|
]],
|
|
page: true,
|
|
done: function (res, curr, count, origin) { }
|
|
});
|
|
treeTable.on('toolbar(dataTable)', function (obj) {
|
|
var options = obj.config;
|
|
switch (obj.event) {
|
|
case 'dataCreate':
|
|
active.dataCreate({ pid: 0, type: 1 });
|
|
break;
|
|
case 'dataDelete':
|
|
var checkStatus = treeTable.checkStatus('dataTable'), checkData = checkStatus.data;
|
|
let ids = checkData.map((item, index, array) => { return item.id; });
|
|
active.dataDelete(ids);
|
|
break;
|
|
case 'dataRecybin':
|
|
active.dataRecybin();
|
|
break;
|
|
};
|
|
});
|
|
treeTable.on('tool(dataTable)', function (elem) {
|
|
var data = elem.data;
|
|
switch (elem.event) {
|
|
case 'update':
|
|
active.dataEdit(data);
|
|
break;
|
|
case 'create':
|
|
active.dataCreate({ pid: data.id });
|
|
break;
|
|
case 'delete':
|
|
active.dataDelete([data.id]);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
|
|
form.on('submit(tableSearchButton)', function (data) {
|
|
var field = data.field;
|
|
treeTable.reload('dataTable', {
|
|
where: field
|
|
});
|
|
});
|
|
// 状态开关
|
|
form.on('switch(statusSwitch)', function (obj) {
|
|
var id = this.value;
|
|
var status = obj.elem.checked ? 1 : 0;
|
|
layer.confirm('确定要' + (status ? '启用' : '禁用') + '该数据吗？', function (index) {
|
|
layui.http.put('update', { id: id, status: status }).then(function (res) {
|
|
if (res.code == 0) {
|
|
layer.msg(res.msg, { icon: 1 });
|
|
table.reload('dataTable', {}, true);
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2 });
|
|
obj.elem.checked = !obj.elem.checked;
|
|
form.render('checkbox');
|
|
}
|
|
});
|
|
layer.close(index);
|
|
}, function () {
|
|
obj.elem.checked = !obj.elem.checked;
|
|
form.render('checkbox');
|
|
});
|
|
});
|
|
|
|
var dataFromFun = function (data, callback, done) {
|
|
var formHtml = laytpl($('#dataFormTpl').html()).render(data || {});
|
|
layer.open({
|
|
title: data.id ? '编辑数据' : (data.pid ? '添加子数据' : '添加根数据'),
|
|
content: formHtml,
|
|
anim: "slideLeft",
|
|
offset: "r",
|
|
btnAlign: "l",
|
|
area: layui.setter.layerArea(),
|
|
shade: 0.1,
|
|
shadeClose: true,
|
|
btn: ['确定', '取消'],
|
|
success: function (layero, index) {
|
|
callback(layero, index);
|
|
form.render();
|
|
},
|
|
yes: function (index, layero) {
|
|
window.layui.form.on('submit(wxapp-form-submit)', function (elem) {
|
|
done(layero, index, elem);
|
|
layui.off('submit(wxapp-form)', 'from');
|
|
return false;
|
|
});
|
|
layero.contents().find("#wxapp-form-submit").trigger('click');
|
|
}
|
|
});
|
|
};
|
|
//事件
|
|
var active = {
|
|
dataCreate: function (data = {}) {
|
|
dataFromFun(data,
|
|
function (layero, index) { },
|
|
function (layero, index, elem) {
|
|
var field = elem.field;
|
|
field.icon = 'layui-icon ' + field.icon;
|
|
field.status = field.status ? 1 : 0;
|
|
http.post('save', field)
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
layer.close(index);
|
|
treeTable.reload('dataTable', {}, true);
|
|
} else {
|
|
layer.msg(res.msg || '操作失败');
|
|
}
|
|
});
|
|
}
|
|
);
|
|
},
|
|
dataEdit: function (data = {}) {
|
|
dataFromFun(data,
|
|
function (layero, index) { },
|
|
function (layero, index, elem) {
|
|
var field = elem.field;
|
|
field.icon = 'layui-icon ' + field.icon;
|
|
field.status = field.status ? 1 : 0;
|
|
http.put('update', field)
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
layer.close(index);
|
|
treeTable.reload('dataTable', {}, true);
|
|
} else {
|
|
layer.msg(res.msg || '操作失败');
|
|
}
|
|
});
|
|
}
|
|
);
|
|
},
|
|
dataDelete: function (ids, force = 0) {
|
|
if (ids.length === 0) {
|
|
return layer.msg('请选择数据');
|
|
}
|
|
layer.prompt({
|
|
formType: 1
|
|
, title: '敏感操作，请验证口令'
|
|
}, function (value, index) {
|
|
layer.close(index);
|
|
layer.confirm('确定删除吗？', function (index) {
|
|
http.delete('delete', { ids: ids.join(','), force: force })
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
layer.close(index);
|
|
treeTable.reload('dataTable', {}, true);
|
|
} else {
|
|
layer.msg(res.msg || '操作失败');
|
|
}
|
|
});
|
|
layer.msg('已删除');
|
|
treeTable.reload('dataTable', {}, true);
|
|
});
|
|
});
|
|
},
|
|
dataRecybin: function (data = {}) {
|
|
var formHtml = laytpl($('#dataRecybinTpl').html()).render(data || {});
|
|
layer.open({
|
|
title: '资源回收站',
|
|
content: formHtml,
|
|
anim: "slideLeft",
|
|
offset: "r",
|
|
area: ['60%', '99%'],
|
|
shade: 0.1,
|
|
shadeClose: true,
|
|
success: function (layero, index) {
|
|
layui.table.render({
|
|
elem: '#dataRecybinTable',
|
|
url: 'recyclebin',
|
|
height: 'full-100',
|
|
defaultToolbar: [{
|
|
title: '批量删除数据',
|
|
layEvent: 'dataDelete',
|
|
icon: 'layui-icon-delete',
|
|
onClick: function (obj) {
|
|
var checkStatus = treeTable.checkStatus('dataRecybinTable'), checkData = checkStatus.data;
|
|
let ids = checkData.map((item, index, array) => { return item.id; });
|
|
console.log(ids);
|
|
}
|
|
}, 'filter', 'exports', 'print'],
|
|
cols: [[
|
|
{ type: 'checkbox', fixed: 'left' },
|
|
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
|
|
{ field: 'title', title: '标题', width: 180, fixed: 'left' },
|
|
{
|
|
fixed: "right", title: "操作", width: 120, align: "center", templet: function (d) {
|
|
return `<div class="layui-btn-group">
|
|
<a class="layui-btn layui-btn-sm" title="恢复数据" lay-event="restore" > <i class="layui-icon layui-icon-edit"></i> </a >
|
|
<a class="layui-btn layui-btn-sm" title="删除数据" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> </a>
|
|
</div >`;
|
|
}
|
|
}
|
|
]],
|
|
page: true,
|
|
done: function (res, curr, count, origin) {
|
|
layui.table.on('tool(dataRecybinTable)', function (elem) {
|
|
var data = elem.data;
|
|
switch (elem.event) {
|
|
case 'restore':
|
|
active.dataRestore([data.id]);
|
|
break;
|
|
case 'delete':
|
|
active.dataDelete([data.id], 1);
|
|
break;
|
|
}
|
|
});
|
|
layui.table.on('toolbar(dataRecybinTable)', function (elem) {
|
|
switch (elem.event) {
|
|
case 'dataDelete':
|
|
var checkStatus = table.checkStatus('dataRecybinTable'), checkData = checkStatus.data;
|
|
let idss = checkData.map((item, index, array) => { return item.id; });
|
|
active.dataDelete(idss, 1);
|
|
break;
|
|
case 'dataRestore':
|
|
var checkStatus = table.checkStatus('dataRecybinTable'), checkData = checkStatus.data;
|
|
let ids = checkData.map((item, index, array) => { return item.id; });
|
|
active.dataRestore(ids);
|
|
break;
|
|
};
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
dataRestore: function (ids) {
|
|
if (ids.length === 0) {
|
|
return layer.msg('请选择数据');
|
|
}
|
|
http.put('restore', { ids: ids.join(',') })
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
layer.msg('恢复成功');
|
|
table.reload('dataTable', {}, true);
|
|
} else {
|
|
layer.msg(res.msg || '恢复失败');
|
|
}
|
|
});
|
|
}
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |