|
|
@@ -1,46 +1,95 @@
|
|
|
layui.config({
|
|
|
base: '/assets/lib/jplus/treeTable/'
|
|
|
}).use(['form', 'layer', 'table', 'laytpl', 'treeTable'], function () {
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
var form = layui.form,
|
|
|
layer = parent.layer === undefined ? layui.layer : top.layer,
|
|
|
$ = layui.jquery,
|
|
|
laytpl = layui.laytpl,
|
|
|
table = layui.table,
|
|
|
treeTable = layui.treeTable;
|
|
|
- //用户列表
|
|
|
- var tableIns = table.render({
|
|
|
+
|
|
|
+ // 常量定义
|
|
|
+ var CONSTANTS = {
|
|
|
+ TABLE_ID: 'listTable',
|
|
|
+ SEARCH_INPUT_ID: '#searchInput',
|
|
|
+ PAGE_SIZE: 15,
|
|
|
+ PAGE_SIZES: [10, 15, 20, 25],
|
|
|
+ SUCCESS_CODE: 200
|
|
|
+ };
|
|
|
+
|
|
|
+ // 缓存DOM元素
|
|
|
+ var $searchInput = $(CONSTANTS.SEARCH_INPUT_ID);
|
|
|
+
|
|
|
+ // 工具函数：时间格式化
|
|
|
+ function formatTime(timestamp) {
|
|
|
+ if (!timestamp) return '';
|
|
|
+
|
|
|
+ var date = new Date(timestamp);
|
|
|
+ if (isNaN(date.getTime())) return '';
|
|
|
+
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
+ var day = date.getDate().toString().padStart(2, '0');
|
|
|
+ var hours = date.getHours().toString().padStart(2, '0');
|
|
|
+ var minutes = date.getMinutes().toString().padStart(2, '0');
|
|
|
+ var seconds = date.getSeconds().toString().padStart(2, '0');
|
|
|
+
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 工具函数：防抖搜索
|
|
|
+ var debounceSearch = (function() {
|
|
|
+ var timer;
|
|
|
+ return function(callback, delay) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = setTimeout(callback, delay || 300);
|
|
|
+ };
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 表格配置
|
|
|
+ var tableConfig = {
|
|
|
elem: '#list',
|
|
|
url: '/cms/book/contents/queryPage',
|
|
|
method: 'POST',
|
|
|
dataType: 'json',
|
|
|
contentType: 'application/json;charset=utf-8',
|
|
|
- headers: {token: ''},
|
|
|
- cellMinWidth: 95,
|
|
|
+ headers: { token: '' },
|
|
|
+ cellMinWidth: 90,
|
|
|
page: true,
|
|
|
height: "full-125",
|
|
|
- limits: [10, 15, 20, 25],
|
|
|
- limit: 15,
|
|
|
- id: "listTable",
|
|
|
+ limits: CONSTANTS.PAGE_SIZES,
|
|
|
+ limit: CONSTANTS.PAGE_SIZE,
|
|
|
+ id: CONSTANTS.TABLE_ID,
|
|
|
request: {
|
|
|
- pageName: "pageNo",//重新定义当前页码参数名称
|
|
|
- limitName: "pageRows"//重新定义每页大小参数名称
|
|
|
+ pageName: "pageNo",
|
|
|
+ limitName: "pageRows"
|
|
|
},
|
|
|
response: {
|
|
|
- statusName: 'code', //数据状态的字段名称，默认：code
|
|
|
- statusCode: 200, //成功的状态码，默认：0
|
|
|
- msgName: 'msg', //状态信息的字段名称，默认：msg
|
|
|
- countName: 'totalRows', //数据总数的字段名称，默认：count
|
|
|
- dataName: 'data' //数据列表的字段名称，默认：data
|
|
|
- },
|
|
|
- where: {
|
|
|
- //请求的参数写在where
|
|
|
+ statusName: 'code',
|
|
|
+ statusCode: CONSTANTS.SUCCESS_CODE,
|
|
|
+ msgName: 'msg',
|
|
|
+ countName: 'totalRows',
|
|
|
+ dataName: 'data'
|
|
|
},
|
|
|
parseData: function (res) {
|
|
|
+ // 统一错误处理
|
|
|
+ if (res.code !== CONSTANTS.SUCCESS_CODE) {
|
|
|
+ layer.msg(res.msg || '请求失败');
|
|
|
+ return {
|
|
|
+ code: res.code,
|
|
|
+ msg: res.msg,
|
|
|
+ totalRows: 0,
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
return {
|
|
|
- "code": res.code,
|
|
|
- "msg": res.msg, //解析提示文本
|
|
|
- "totalRows": res.data.totalRows, //解析数据长度
|
|
|
- "data": res.data.dataList, //解析数据列表
|
|
|
+ code: res.code,
|
|
|
+ msg: res.msg,
|
|
|
+ totalRows: res.data.totalRows || 0,
|
|
|
+ data: res.data.dataList || []
|
|
|
};
|
|
|
},
|
|
|
cols: [[
|
|
|
@@ -51,108 +100,209 @@ layui.config({
|
|
|
{field: 'chapterTitle', title: '章节标题', minWidth: 100, align: "center"},
|
|
|
{field: 'contentType', title: '内容类型', minWidth: 100, align: "center"},
|
|
|
{field: 'wordCount', title: '字数统计', align: 'center'},
|
|
|
-
|
|
|
{field: 'isPublic', title: '是否公开', minWidth: 100, align: "center"},
|
|
|
- /*{field: 'userAvatar', title: '用户头像', minWidth:100, align:"center",templet:function(d){
|
|
|
- return "<img src='"+d.userAvatar+"' style='width: 30px;height: 30px'>";
|
|
|
- }},*/
|
|
|
{field: 'version', title: '内容版本', minWidth: 100, align: "center"},
|
|
|
{field: 'parentId', title: '父级章节', minWidth: 100, align: "center"},
|
|
|
{field: 'coverImage', title: '封面图片路径', minWidth: 100, align: "center"},
|
|
|
{
|
|
|
- field: 'createTime', title: '创建时间', minWidth: 100, align: "center", templet: function (d) {
|
|
|
- return showTime(d.createTime);
|
|
|
+ field: 'createTime',
|
|
|
+ title: '创建时间',
|
|
|
+ minWidth: 100,
|
|
|
+ align: "center",
|
|
|
+ templet: function (d) {
|
|
|
+ return formatTime(d.createTime);
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- field: 'updateTime', title: '修改时间', minWidth: 100, align: "center", templet: function (d) {
|
|
|
- return showTime(d.updateTime);
|
|
|
+ field: 'updateTime',
|
|
|
+ title: '修改时间',
|
|
|
+ minWidth: 100,
|
|
|
+ align: "center",
|
|
|
+ templet: function (d) {
|
|
|
+ return formatTime(d.updateTime);
|
|
|
}
|
|
|
},
|
|
|
- {title: '操作', minWidth: 200, templet: '#listBar', fixed: "right", align: "center", toolBar: '#listBar'}
|
|
|
- ]]
|
|
|
- });
|
|
|
- //时间转换函数
|
|
|
- function showTime(tempDate) {
|
|
|
- var d = new Date(tempDate);
|
|
|
- var year = d.getFullYear();
|
|
|
- var month = d.getMonth();
|
|
|
- month++;
|
|
|
- var day = d.getDate();
|
|
|
- var hours = d.getHours();
|
|
|
-
|
|
|
- var minutes = d.getMinutes();
|
|
|
- var seconds = d.getSeconds();
|
|
|
- month = month < 10 ? "0" + month : month;
|
|
|
- day = day < 10 ? "0" + day : day;
|
|
|
- hours = hours < 10 ? "0" + hours : hours;
|
|
|
- minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
|
- seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
-
|
|
|
-
|
|
|
- var time = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
|
|
- return time;
|
|
|
- }
|
|
|
- $(".search_btn").click(function () {
|
|
|
- const searchInput = $("#searchInput").val();
|
|
|
- table.reload("listTable", {
|
|
|
- page: {
|
|
|
- curr: 1 //重新从第 1 页开始
|
|
|
- },
|
|
|
- where: {
|
|
|
- contentsName: searchInput,
|
|
|
- contentType: $("#contentType").val(),
|
|
|
- isPublic: $("#isPublic").val(),
|
|
|
- version: $("#version").val(),
|
|
|
- createBeginTime: $("#createTime").val(),
|
|
|
- bookInfoId: $("#bookInfoId").val(),
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ minWidth: 200,
|
|
|
+ templet: '#listBar',
|
|
|
+ fixed: "right",
|
|
|
+ align: "center",
|
|
|
+ toolBar: '#listBar'
|
|
|
}
|
|
|
- })
|
|
|
- })
|
|
|
- $(".add_btn").click(function () {
|
|
|
- edit();
|
|
|
- })
|
|
|
- // 添加/修改
|
|
|
- function edit(edit) {
|
|
|
- let title = "添加章节";
|
|
|
- if (edit != null) {
|
|
|
- title = "修改章节";
|
|
|
+ ]],
|
|
|
+ done: function(res, curr, count) {
|
|
|
+ // 表格渲染完成后的回调，可以用于后续操作
|
|
|
+ console.log('表格渲染完成', count);
|
|
|
+ },
|
|
|
+ error: function(res, msg) {
|
|
|
+ // 错误处理
|
|
|
+ layer.msg(msg || '数据加载失败');
|
|
|
}
|
|
|
- const index = layui.layer.open({
|
|
|
+ };
|
|
|
+
|
|
|
+ // 初始化表格
|
|
|
+ var tableIns = table.render(tableConfig);
|
|
|
+
|
|
|
+ // 搜索功能
|
|
|
+ function performSearch() {
|
|
|
+ var searchParams = {
|
|
|
+ contentsName: $searchInput.val().trim(),
|
|
|
+ contentType: $("#contentType").val(),
|
|
|
+ isPublic: $("#isPublic").val(),
|
|
|
+ version: $("#version").val(),
|
|
|
+ createBeginTime: $("#createTime").val(),
|
|
|
+ bookInfoId: $("#bookInfoId").val()
|
|
|
+ };
|
|
|
+
|
|
|
+ // 清空空值参数
|
|
|
+ Object.keys(searchParams).forEach(function(key) {
|
|
|
+ if (!searchParams[key]) {
|
|
|
+ delete searchParams[key];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ table.reload(CONSTANTS.TABLE_ID, {
|
|
|
+ page: { curr: 1 },
|
|
|
+ where: searchParams
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 事件绑定
|
|
|
+ function bindEvents() {
|
|
|
+ // 搜索按钮点击
|
|
|
+ $(".search_btn").on('click', performSearch);
|
|
|
+
|
|
|
+ // 输入框回车搜索
|
|
|
+ $searchInput.on('keypress', function(e) {
|
|
|
+ if (e.which === 13) {
|
|
|
+ performSearch();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加按钮点击
|
|
|
+ $(".add_btn").on('click', function() {
|
|
|
+ editContent();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 可选：输入框实时搜索（防抖）
|
|
|
+ $searchInput.on('input', function() {
|
|
|
+ debounceSearch(performSearch, 500);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 编辑/添加内容
|
|
|
+ function editContent(editData) {
|
|
|
+ var title = editData ? "修改章节" : "添加章节";
|
|
|
+ var index = layer.open({
|
|
|
title: title,
|
|
|
type: 2,
|
|
|
content: "/cms/book/contents/edit.html",
|
|
|
scrollbar: false,
|
|
|
- success: function (layero, index) {
|
|
|
- var body = layui.layer.getChildFrame('body', index);
|
|
|
- if (edit) {
|
|
|
- body.find(".uid").val(BigInt(edit.id).toString());
|
|
|
- body.find(".userName").val(edit.userName); //用户名
|
|
|
- body.find(".loginName").val(edit.loginName); //登录名
|
|
|
- body.find(".userMobilePhone").val(edit.userMobilePhone);
|
|
|
- body.find(".userNickName").val(edit.userNickName);
|
|
|
- body.find(".userAddress").val(edit.userAddress);
|
|
|
- body.find(".userEmail").val(edit.userEmail); //邮箱
|
|
|
- body.find(".userSex input[value=" + edit.userSex + "]").prop("checked", "checked"); //性别
|
|
|
- body.find(".allowedNetworkType").val(edit.allowedNetworkType);
|
|
|
- body.find(".userType").val(edit.userType); //会员等级
|
|
|
- body.find(".userStatus").val(edit.userStatus); //用户状态
|
|
|
- body.find(".userDescription").text(edit.userDescription); //用户简介
|
|
|
- body.find(".remark").text(edit.remark);
|
|
|
- form.render();
|
|
|
+ area: ['90%', '90%'],
|
|
|
+ success: function(layero, index) {
|
|
|
+ if (editData) {
|
|
|
+ setEditFormData(index, editData);
|
|
|
}
|
|
|
- setTimeout(function () {
|
|
|
- layui.layer.tips('点击此处返回分类列表', '.layui-layer-setwin .layui-layer-close', {
|
|
|
- tips: 3
|
|
|
- });
|
|
|
- }, 500)
|
|
|
+ },
|
|
|
+ end: function() {
|
|
|
+ // 弹窗关闭后的清理操作
|
|
|
+ window.sessionStorage.removeItem("index");
|
|
|
}
|
|
|
});
|
|
|
- layui.layer.full(index);
|
|
|
+
|
|
|
+ // 存储弹窗索引
|
|
|
window.sessionStorage.setItem("index", index);
|
|
|
- //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
|
|
|
- $(window).on("resize", function () {
|
|
|
- layui.layer.full(window.sessionStorage.getItem("index"));
|
|
|
- })
|
|
|
+
|
|
|
+ // 窗口resize事件处理（使用事件委托）
|
|
|
+ $(window).off('resize.layer-resize').on('resize.layer-resize', function() {
|
|
|
+ var savedIndex = window.sessionStorage.getItem("index");
|
|
|
+ if (savedIndex) {
|
|
|
+ layer.full(parseInt(savedIndex));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置编辑表单数据
|
|
|
+ function setEditFormData(index, data) {
|
|
|
+ try {
|
|
|
+ var body = layer.getChildFrame('body', index);
|
|
|
+ var formFields = {
|
|
|
+ '.uid': data.id ? BigInt(data.id).toString() : '',
|
|
|
+ '.userName': data.userName || '',
|
|
|
+ '.loginName': data.loginName || '',
|
|
|
+ '.userMobilePhone': data.userMobilePhone || '',
|
|
|
+ '.userNickName': data.userNickName || '',
|
|
|
+ '.userAddress': data.userAddress || '',
|
|
|
+ '.userEmail': data.userEmail || '',
|
|
|
+ '.allowedNetworkType': data.allowedNetworkType || '',
|
|
|
+ '.userType': data.userType || '',
|
|
|
+ '.userStatus': data.userStatus || '',
|
|
|
+ '.userDescription': data.userDescription || '',
|
|
|
+ '.remark': data.remark || ''
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置表单字段
|
|
|
+ Object.keys(formFields).forEach(function(selector) {
|
|
|
+ var element = body.find(selector);
|
|
|
+ if (element.length) {
|
|
|
+ element.val(formFields[selector]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置单选按钮
|
|
|
+ if (data.userSex) {
|
|
|
+ body.find('.userSex input[value="' + data.userSex + '"]').prop('checked', true);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染表单
|
|
|
+ form.render();
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('设置表单数据失败:', error);
|
|
|
+ layer.msg('表单数据加载失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化
|
|
|
+ function init() {
|
|
|
+ bindEvents();
|
|
|
+
|
|
|
+ // 初始化表单
|
|
|
+ form.render();
|
|
|
+
|
|
|
+ // 可选：监听表格事件
|
|
|
+ table.on('tool(list)', function(obj) {
|
|
|
+ var event = obj.event;
|
|
|
+ var data = obj.data;
|
|
|
+
|
|
|
+ switch(event) {
|
|
|
+ case 'edit':
|
|
|
+ editContent(data);
|
|
|
+ break;
|
|
|
+ case 'del':
|
|
|
+ deleteContent(data);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除内容（示例）
|
|
|
+ function deleteContent(data) {
|
|
|
+ layer.confirm('确定要删除此章节吗？', {
|
|
|
+ icon: 3,
|
|
|
+ title: '提示'
|
|
|
+ }, function(index) {
|
|
|
+ layer.close(index);
|
|
|
+ // 这里添加删除API调用
|
|
|
+ // ...
|
|
|
+ layer.msg('删除成功');
|
|
|
+ table.reload(CONSTANTS.TABLE_ID);
|
|
|
+ });
|
|
|
}
|
|
|
-})
|
|
|
+
|
|
|
+ // 页面加载完成后初始化
|
|
|
+ $(document).ready(function() {
|
|
|
+ init();
|
|
|
+ });
|
|
|
+});
|
1