637 lines
22 KiB
HTML
637 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>论坛管理</title>
|
||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||
<style>
|
||
.expand.pear-btn:hover {
|
||
color: currentColor;
|
||
background: none;
|
||
}
|
||
|
||
.expand.pear-btn {
|
||
border: 1px solid rgba(255, 255, 255, 0);
|
||
}
|
||
</style>
|
||
<script src="../../assets/token.js"></script>
|
||
<style>
|
||
.comment-section {
|
||
padding: 20px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.comment-section h3 {
|
||
font-size: 1.5em;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.comment-list {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.comment-item {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.comment-author {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.comment-author .author-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.comment-author .author-name {
|
||
font-weight: bold;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.comment-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.comment-content p {
|
||
margin: 0 0 10px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.comment-time {
|
||
font-size: 0.85em;
|
||
color: #888;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body class="pear-container">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<form id="userForm" class="layui-form" action="">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">搜索框</label>
|
||
<div class="layui-input-inline">
|
||
<input
|
||
type="text"
|
||
name="realName"
|
||
placeholder=""
|
||
class="layui-input"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline" style="margin-left: 50px">
|
||
<button
|
||
class="pear-btn pear-btn-md pear-btn-primary"
|
||
lay-submit
|
||
lay-filter="user-query"
|
||
>
|
||
<i class="layui-icon layui-icon-search"></i>
|
||
查询
|
||
</button>
|
||
<button type="reset" class="pear-btn pear-btn-md">
|
||
<i class="layui-icon layui-icon-refresh"></i>
|
||
重置
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="pear-btn pear-btn-md expand"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<table id="user-table" lay-filter="user-table"></table>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/html" id="user-toolbar">
|
||
<button
|
||
class="pear-btn pear-btn-danger pear-btn-md"
|
||
lay-event="batchRemove"
|
||
>
|
||
<i class="layui-icon layui-icon-delete"></i>
|
||
删除
|
||
</button>
|
||
</script>
|
||
|
||
<script type="text/html" id="user-bar">
|
||
<!-- <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
|
||
<i class="layui-icon layui-icon-edit"></i>
|
||
</button> -->
|
||
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
|
||
<i class="layui-icon layui-icon-delete"></i>
|
||
</button>
|
||
<button class="pear-btn pear-btn-success pear-btn-sm" lay-event="view">
|
||
评论列表
|
||
</button>
|
||
</script>
|
||
|
||
<script type="text/html" id="user-enable">
|
||
<input
|
||
type="checkbox"
|
||
name="enable"
|
||
value="{{d.id}}"
|
||
lay-skin="switch"
|
||
lay-text="启用|禁用"
|
||
lay-filter="user-enable"
|
||
checked="{{ d.enable == 0 ? 'true' : 'false' }}"
|
||
/>
|
||
</script>
|
||
<!-- //照片模板 -->
|
||
<script type="text/html" id="timeTpl">
|
||
<div style="cursor: pointer;" lay-event="timeTpl">
|
||
<span>{{ layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
|
||
</div>
|
||
</script>
|
||
<script type="text/html" id="photoTpl">
|
||
<div style="cursor: pointer;" lay-event="showPhoto">
|
||
{{# if(d.status === 0){ }}
|
||
<span>未公开</span> {{# } else if(d.status == 1){ }}
|
||
<span>已公开</span> {{# } else { }} <span>未知状态</span> {{# } }}
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/html" id="user-sex">
|
||
{{#if (d.sex == 1) { }}
|
||
<span>男</span> {{# }else if(d.sex == 2){ }} <span>女</span> {{# } }}
|
||
</script>
|
||
|
||
<script type="text/html" id="user-login">
|
||
{{#if (d.login == 0) { }}
|
||
<span>在线</span> {{# }else if(d.sex == 1){ }} <span>离线</span> {{# } }}
|
||
</script>
|
||
|
||
<script type="text/html" id="user-createTime">
|
||
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
|
||
</script>
|
||
|
||
<div style="display: none">
|
||
<div class="layer-top">
|
||
<br />
|
||
<h3>上侧弹层内容...</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../component/layui/layui.js"></script>
|
||
<script src="../../component/pear/pear.js"></script>
|
||
<script src="../../assets/jquery-1.9.1.min.js"></script>
|
||
<script src="../../assets/type.js"></script>
|
||
<script src="../../assets/token.js"></script>
|
||
<script type="text/html" id="statusTpl">
|
||
{{# if(d.status === 0){ }}
|
||
<span>未公开</span> {{# } else if(d.status == 1){ }}
|
||
<span>已公开</span> {{# } else { }} <span>未知状态</span> {{# } }}
|
||
</script>
|
||
<script>
|
||
layui.use(
|
||
["table", "form", "jquery", "drawer", "dropdown", "upload", "toast"],
|
||
function () {
|
||
let table = layui.table;
|
||
let form = layui.form;
|
||
let $ = layui.jquery;
|
||
let drawer = layui.drawer;
|
||
let dropdown = layui.dropdown;
|
||
var upload = layui.upload;
|
||
var toast = layui.toast;
|
||
let MODULE_PATH = "/system/user/";
|
||
|
||
formToggle({
|
||
elem: "#userForm",
|
||
});
|
||
|
||
function formToggle(options) {
|
||
var defaultsOpt = {
|
||
isExpand: false,
|
||
prefixIcon: "layui-icon",
|
||
toggleIcon: ["layui-icon-down", "layui-icon-up"],
|
||
toggleText: ["展开", "折叠"],
|
||
};
|
||
var opt = $.extend({}, defaultsOpt, options);
|
||
var elem = opt.elem; // 绑定的表单元素,必填
|
||
var min = opt.min; // 最小显示数,默认显示一行
|
||
var isExpand = opt.isExpand; // 初始展开
|
||
var prefixIcon = opt.prefixIcon + " "; // 图标前缀
|
||
var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
|
||
var toggleText = opt.toggleText; // 折叠和展开时的文本
|
||
|
||
var eleDOM = $(elem + " .layui-inline");
|
||
var firstElTop = eleDOM.first().offset().top;
|
||
var targetEl = eleDOM.filter(function (index) {
|
||
var isGtMin = index + 1 > min;
|
||
var isGtFirstElTop = $(this).offset().top > firstElTop;
|
||
var isNeqLast = index + 1 != eleDOM.length;
|
||
return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast;
|
||
});
|
||
|
||
var unExpandIcon = prefixIcon + toggleIcon[0];
|
||
var expandIcon = prefixIcon + toggleIcon[1];
|
||
var unExpandText = toggleText[0];
|
||
var expandText = toggleText[1];
|
||
var btnSelector = elem + " .expand";
|
||
$(btnSelector).append("<i></i>");
|
||
if (targetEl.length > 0) {
|
||
if (isExpand) {
|
||
$(btnSelector).prepend("<span>" + expandText + "</span>");
|
||
$(btnSelector + ">i").addClass(expandIcon);
|
||
} else {
|
||
$(btnSelector).prepend("<span>" + unExpandText + "</span>");
|
||
$(btnSelector + ">i").addClass(unExpandIcon);
|
||
targetEl.addClass("layui-hide");
|
||
}
|
||
$(btnSelector).click(function () {
|
||
isExpand = !isExpand;
|
||
if (isExpand) {
|
||
$(btnSelector + ">span").html(expandText);
|
||
$(btnSelector + ">i")
|
||
.removeClass(unExpandIcon)
|
||
.addClass(expandIcon);
|
||
targetEl.removeClass("layui-hide");
|
||
} else {
|
||
$(btnSelector + ">span").html(unExpandText);
|
||
$(btnSelector + ">i")
|
||
.removeClass(expandIcon)
|
||
.addClass(unExpandIcon);
|
||
targetEl.addClass("layui-hide");
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
$.ajax({
|
||
url: `${api}/api/forum/posts`,
|
||
type: "GET",
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
// 渲染表格
|
||
table.render({
|
||
elem: "#user-table",
|
||
data: res.data.records,
|
||
page: true,
|
||
cols: [
|
||
[
|
||
{
|
||
type: "checkbox",
|
||
}, {
|
||
field: "id",
|
||
title: "ID",
|
||
align: "center",
|
||
},
|
||
{
|
||
field: "title",
|
||
title: "标题",
|
||
align: "center",
|
||
},
|
||
|
||
{
|
||
field: "content",
|
||
title: "内容",
|
||
align: "center",
|
||
},
|
||
{
|
||
field: "categoryName",
|
||
title: "分类",
|
||
align: "center",
|
||
},
|
||
{
|
||
field: "userName",
|
||
title: "作者",
|
||
align: "center",
|
||
}, {
|
||
field: "createTime",
|
||
title: "创建时间",
|
||
align: "center",
|
||
templet: '#timeTpl'
|
||
},{
|
||
field: "updateTime",
|
||
title: "更新时间",
|
||
align: "center",
|
||
templet: '#timeTpl'
|
||
},
|
||
|
||
{
|
||
field: "status",
|
||
title: "状态",
|
||
align: "center",
|
||
templet: "#statusTpl",
|
||
},
|
||
{
|
||
toolbar: "#user-bar",
|
||
title: "操作",
|
||
align: "left",
|
||
fixed: "right",
|
||
},
|
||
],
|
||
],
|
||
skin: "line",
|
||
toolbar: "#user-toolbar",
|
||
defaultToolbar: [
|
||
{
|
||
layEvent: "refresh",
|
||
icon: "layui-icon-refresh",
|
||
},
|
||
"filter",
|
||
"print",
|
||
"exports",
|
||
],
|
||
});
|
||
},
|
||
});
|
||
|
||
table.on("tool(user-table)", function (obj) {
|
||
if (obj.event === "remove") {
|
||
window.remove(obj);
|
||
} else if (obj.event === "edit") {
|
||
window.edit(obj);
|
||
} else if (obj.event === "showPhoto") {
|
||
window.showPhoto(obj);
|
||
} else if (obj.event === "view") {
|
||
window.view(obj);
|
||
}
|
||
});
|
||
window.showPhoto = function (obj) {
|
||
// 显示放大后的图片
|
||
layer.photos({
|
||
photos: {
|
||
data: [
|
||
{
|
||
src: obj.data.carPhoto, // 图片的链接
|
||
},
|
||
],
|
||
},
|
||
shadeClose: true,
|
||
closeBtn: 1,
|
||
});
|
||
};
|
||
table.on("toolbar(user-table)", function (obj) {
|
||
if (obj.event === "add") {
|
||
window.add();
|
||
} else if (obj.event === "refresh") {
|
||
window.refresh();
|
||
} else if (obj.event === "batchRemove") {
|
||
window.batchRemove(obj);
|
||
}
|
||
});
|
||
|
||
form.on("submit(user-query)", function (data) {
|
||
table.reload("user-table", {
|
||
where: data.field,
|
||
});
|
||
return false;
|
||
});
|
||
// 监听表格中图片的点击事件
|
||
|
||
form.on("switch(user-enable)", function (obj) {
|
||
layer.tips(
|
||
this.value + " " + this.name + "：" + obj.elem.checked,
|
||
obj.othis
|
||
);
|
||
});
|
||
//修改
|
||
window.edit = function (obj) {
|
||
var objs = obj.data;
|
||
console.log(objs);
|
||
drawer.open({
|
||
legacy: false,
|
||
offset: "r",
|
||
area: "30%",
|
||
content: `
|
||
<form class="layui-form" action="" onsubmit="return false" style="margin-top:50px;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">维修id</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="dya5n" required id="repairIded" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${
|
||
obj.data.repairId
|
||
}>
|
||
<input type="text" id="carIded" style="display:none" value=${
|
||
obj.data.carId
|
||
}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">型号</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="dya5n" required id="carModeled" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${
|
||
obj.data.carModel
|
||
}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">车牌号</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="dya5n" required id="carLicenseed" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${
|
||
obj.data.carLicense
|
||
}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">维修原因</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="dya5n" required id="repairReasoned" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${
|
||
obj.data.repairReason
|
||
}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">维修价格</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="dya5n" required id="repairMoneyed" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${
|
||
obj.data.repairMoney
|
||
}>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">车辆状态</label>
|
||
<div class="layui-input-block">
|
||
<select name="city" lay-verify="required" id="repairStatused">
|
||
<option value="">请选择车辆状态</option>
|
||
<option value="0" ${
|
||
obj.data.repairStatus == "0"
|
||
? "selected"
|
||
: ""
|
||
}>维修中</option>
|
||
<option value="1" ${
|
||
obj.data.repairStatus == "1"
|
||
? "selected"
|
||
: ""
|
||
}>维修完成</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="editrepair()">立即提交</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
</div>
|
||
</div>
|
||
</form>`,
|
||
});
|
||
layui.use("form", function () {
|
||
var form = layui.form;
|
||
form.render(); // 渲染表单元素
|
||
});
|
||
};
|
||
//执行实例
|
||
//修改
|
||
window.view = function (obj) {
|
||
var objs = obj.data;
|
||
// 发送请求获取评论数据
|
||
$.ajax({
|
||
url: `${api}/api/forum/posts/${objs.id}/replies`,
|
||
type: "GET",
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
console.log(res);
|
||
// 渲染评论列表
|
||
let commentHtml = "";
|
||
res.data.length>0?res.data.forEach(function (comment) {
|
||
commentHtml += `
|
||
<div class="comment-item">
|
||
<div class="comment-author">
|
||
<img src="${comment.authorAvatar || comment.avatar}" alt="${comment.userName}" class="author-avatar">
|
||
<span class="author-name">${comment.userName}</span>
|
||
</div>
|
||
<div class="comment-content">
|
||
<p>${comment.content}</p>
|
||
<span class="comment-time">${new Date(comment.createTime).toLocaleString()}</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}):commentHtml = `<div class="comment-item">暂无评论</div>`;
|
||
// 把评论内容添加到页面
|
||
$("#commentList").html(commentHtml);
|
||
},
|
||
});
|
||
|
||
// 打开侧边栏
|
||
drawer.open({
|
||
legacy: false,
|
||
offset: "r",
|
||
area: "30%",
|
||
content: `
|
||
<div class="comment-section">
|
||
<h3>评论列表</h3>
|
||
<div id="commentList" class="comment-list"></div>
|
||
</div>
|
||
`,
|
||
});
|
||
|
||
layui.use("form", function () {
|
||
var form = layui.form;
|
||
form.render(); // 渲染表单元素
|
||
});
|
||
};
|
||
|
||
|
||
//执行实例
|
||
var uploadInst = upload.render({
|
||
elem: "#test1", //绑定元素
|
||
url: "/upload/", //上传接口
|
||
done: function (res) {
|
||
//上传完毕回调
|
||
},
|
||
error: function () {
|
||
//请求异常回调
|
||
},
|
||
});
|
||
window.remove = function (obj) {
|
||
console.log(obj);
|
||
layer.confirm(
|
||
"确定要删除该记录",
|
||
{
|
||
icon: 3,
|
||
title: "提示",
|
||
},
|
||
function (index) {
|
||
layer.close(index);
|
||
let loading = layer.load();
|
||
$.ajax({
|
||
url: api + "/api/forum/delePost/" + obj.data.id,
|
||
contentType: "application/json",
|
||
crossDomain: true,
|
||
type: "DELETE",
|
||
success: function (result) {
|
||
layer.close(loading);
|
||
if (result.status == 200) {
|
||
success(result.message);
|
||
time();
|
||
} else {
|
||
error(result.message);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
);
|
||
};
|
||
|
||
window.batchRemove = function (obj) {
|
||
let data = table.checkStatus(obj.config.id).data;
|
||
if (data.length === 0) {
|
||
layer.msg("未选中数据", {
|
||
icon: 3,
|
||
time: 1000,
|
||
});
|
||
return false;
|
||
}
|
||
let ids = "";
|
||
for (let i = 0; i < data.length; i++) {
|
||
ids += data[i].repairId + ",";
|
||
}
|
||
ids = ids.substr(0, ids.length - 1);
|
||
layer.confirm(
|
||
"确定要删除这些用户",
|
||
{
|
||
icon: 3,
|
||
title: "提示",
|
||
},
|
||
function (index) {
|
||
layer.close(index);
|
||
let loading = layer.load();
|
||
$.ajax({
|
||
url: `${api}/api/delete_repair`,
|
||
contentType: "application/json",
|
||
type: "post",
|
||
data: JSON.stringify({
|
||
repairIds: ids,
|
||
}),
|
||
success: function (result) {
|
||
layer.close(loading);
|
||
if ((result.status = 200)) {
|
||
success(result.message);
|
||
time();
|
||
} else {
|
||
error(result.message);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
);
|
||
};
|
||
|
||
window.refresh = function (param) {
|
||
table.reload("user-table");
|
||
};
|
||
}
|
||
);
|
||
</script>
|
||
</body>
|
||
</html>
|