wangxy
/
work-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交内容

Browse Source
special-20250331
dshclm 4 days ago
parent 75785c8e7b
commit 963dc9e62e
1 changed files with 248 additions and 49 deletions
Show Stats Download Patch File Download Diff File

297
ruoyi-admin/src/main/resources/templates/home/special_view.html
Unescape View File

@ -1,15 +1,17 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>甘肃省人民检察院兰铁分院</title>
<link th:href="@{/home/base/favicon.ico}" rel="shortcut icon"/>
<link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
<link href="/home/lib/css/elementui.css" th:href="@{/home/lib/css/elementui.css}" rel="stylesheet"/>
<link th:href="@{/home/base/favicon.ico}" rel="shortcut icon" />
<link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet" />
<link href="/home/lib/css/elementui.css" th:href="@{/home/lib/css/elementui.css}" rel="stylesheet" />
<style>
/* 页面整体布局 */
html, body {
html,
body {
height: 100%;
margin: 0;
padding: 0;
@ -38,6 +40,7 @@
.container {
margin: auto;
}
.main {
margin: 0 auto;
border: none !important;
@ -47,6 +50,7 @@
background: #fff;
margin-bottom: 20px !important;
}
.row {
display: inline-block;
width: 100%;
@ -55,12 +59,15 @@
justify-content: space-between;
flex-wrap: nowrap;
}
.main-left {
width: 22.3%;
}
.fl {
float: left;
}
sidebar {
border: 1px solid #E1E1E1;
border-bottom: none;
@ -70,6 +77,7 @@
width: 74.92%;
min-height: 516px;
}
.fr {
float: right;
}
@ -79,9 +87,11 @@
margin-top: 10px;
min-height: 565px;
}
.mt10 li{
border-bottom:1px solid #ccc;
.mt10 li {
border-bottom: 1px solid #ccc;
}
ul.list li .date {
color: #999;
font-size: 14px;
@ -94,6 +104,7 @@
line-height: 36px;
padding: 0;
}
ul.list li a {
width: 75%;
display: inline-block;
@ -104,6 +115,7 @@
overflow: hidden;
word-break: break-all;
}
a {
text-decoration: none;
color: #333;
@ -127,6 +139,7 @@
.sidebar li a.active {
color: #0055A5;
}
.sidebar li a.active {
background: url(/home/base/p110.png) no-repeat 12%;
background-size: 5%;
@ -143,25 +156,31 @@
.pag {
margin-top: 80px;
}
.el-tree-node {
border-bottom: 1px solid #E1E1E1;
}
.el-tree-node__content {
height: 42px;
}
.el-tree-node__expand-icon {
color: #4774ce;
font-size: 22px;
}
.el-tree-node__label {
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.el-tree-node__children .el-tree-node__label{
.el-tree-node__children .el-tree-node__label {
font-size: 16px;
}
.custom-tree-node {
width: 100%;
overflow: hidden;
@ -170,16 +189,61 @@
display: block;
font-size: 16px;
}
.speciList li {
line-height: 36px;
padding: 0;
border-bottom: 1px solid #CCC;
}
.speciList li a {
width: 75%;
display: inline-block;
font-size: 14px;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.speciList li a:hover {
cursor: pointer;
}
.speciList li .date {
color: #999;
font-size: 14px;
float: right;
width: 13%;
text-align: right;
}
.isShow {
transition: all 0.3s ease-in-out;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pagination button {
margin: 0 5px;
}
.pagination-container { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; } .page-size-select { width: 120px; margin-left: 10px; } .pagination-buttons { display: flex; align-items: center; } .pagination-button { margin: 0 3px; padding: 6px 12px; border: 1px solid #dcdfe6; border-radius: 4px; cursor: pointer; background-color: #fff; } .pagination-button:hover { background-color: #e8f2ff; } .pagination-button:disabled { color: #c0c4cc; cursor: not-allowed; background-color: #f5f7fa; border-color: #e4e7ed; } .page-info { margin-right: 10px; color: #606266; }
</style>
</head>
<body class="layui-bg-gray" style="">
<div id="content">
<!--头部-->
<th:block th:include="home_head.html :: home_head"/>
<th:block th:include="home_head.html :: home_head" />
<div class="layui-container" style="padding-top: 20px">
<div>
<blockquote class="layui-elem-quote">
<h2 style="color: #074488;">专题活动</h2>
<h2 style="color: #074488;">专题活动</h2>
</blockquote>
<br>
<p><i class="layui-icon layui-icon-location"></i>当前位置：<a target="_parent" href="base.html">首页</a>&nbsp;/&nbsp;<a
@ -188,40 +252,73 @@
<br>
<div class="container">
<div class="main">
<div class="row">
<div class="main-left fl" id="app">
<div class="row" id="app">
<div class="main-left fl">
<h2>
专题栏目
专题栏目
</h2>
<el-tree
ref="treeRef"
:data="treeData"
:props="defaultProps"
node-key="columnId"
:default-expanded-keys="defauleExpandedKeys"
:default-expand-all="true"
:current-node-key="defaultSelected"
highlight-current
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node" v-text="data.columnName" :title="data.columnName">
</span>
<span slot-scope="{ node, data }" class="custom-tree-node" v-text="data.columnName" :title="data.columnName">
</span>
</el-tree>
</div>
<div class="main-right fr common-list">
<ul class="list mt10" th:if="${page.list.size() > 0}">
<tbody th:each="special,status : ${page.list}">
<li>
<span style="color:#ccc;">-</span>
<a th:href="@{/public_view.html(type=5,id=${special.specialId})}" th:title="${special.specialTitle}" target="_blank">
[[${#strings.abbreviate(special.specialTitle,45)}]]
</a>
<span class="date">[[${#dates.format(special.createTime, 'yyyy年MM月dd日')}]]</span>
<ul>
<li v-for="(item, index) in rightList" :key="index" class="isShow" ref="listRef">
<h2 style="
width: 100%;
height: 50px;
background-color: #ebebeb;
line-height: 50px;
font-size: 18px;
color: #0b61d3;
padding-left: 10px"
>
{{item.columnName}}
<span v-if="item.sysSpecials.list.length != 0" style="color: #0b61d3;font-size: 14px;float: right;margin-right: 17px;cursor: pointer;" @click="more(index)">
{{ item.isExpanded ? '收起-' : '更多+' }}
</span>
</h2>
<ul style="" class="speciList">
<li v-for="(item2, index2) in getPaginatedData(item, index)" :key="index2">
<span style="color: #ccc">-</span>
<a target="_blank" @click="pubHref(item2.specialId, 5)">
{{item2.specialTitle}}
</a>
<span class="date">{{item2.createTime | formatDate}}</span>
</li>
<li v-if="item.sysSpecials.list.length == 0">
<el-empty :image-size="200"></el-empty>
</li>
</ul>
<div class="pagination-container" v-if="rightList[index].isExpanded">
<div class="page-info">共 {{ item.sysSpecials.list.length }} 条
<el-select v-model="rightList[index].itemsPerPage" @change="handlePageSizeChange(index,rightList[index].itemsPerPage)" class="page-size-select">
<el-option label="5条/页" value="5"></el-option>
<el-option label="10条/页" value="10">
</el-option>
<el-option label="15条/页" value="15">
</el-option>
</el-select>
</div>
<div class="pagination-buttons">
<button class="pagination-button" :disabled="rightList[index].currentPage === 1" @click="prevPage(index)">上一页</button>
<span class="pagination-info">{{ rightList[index].currentPage }} / {{ totalPages(index) }}</span>
<button class="pagination-button" :disabled="rightList[index].currentPage === totalPages(index)" @click="nextPage(index)">下一页</button>
</div>
</div>
</li>
</tbody>
</ul>
<!--分页-->
<th:block th:include="home_page :: home_page"/>
</div>
</div>
</div>
@ -230,10 +327,10 @@
</div>
</div>
<!--底部-->
<script th:src="@{/home/lib/vue.js}"></script>
<script th:src="@{/home/lib/elementui.js}"></script>
<th:block th:include="home_footer :: home_footer"/>
<script th:src="@{/home/lib/layui.js}"></script>
<script th:src="@{/home/lib/vue.js}"></script>
<script th:src="@{/home/lib/elementui.js}"></script>
<th:block th:include="home_footer :: home_footer" />
<script th:src="@{/home/lib/layui.js}"></script>
<script th:inline="javascript">
window.addEventListener('DOMContentLoaded', function () {
var currentUrl = location.href;
@ -249,47 +346,148 @@
});
var app = new Vue({
el: '#app',
data(){
return{
data() {
return {
treeData: [],
defaultProps: {
children: 'children',
label: 'columnName',
id:'columnId'
id: 'columnId'
},
defaultSelected:[[${columnId}]],
defauleExpandedKeys:[],
defaultSelected: [[${columnId}]],
rightList: [],
isMoreTitle: true,
itemsPerPage: 5, // 每页显示的项目数
};
},
mounted(){
filters: {
formatDate(value) {
if (!value) return '';
const date = new Date(value);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}年${month}月${day}日`;
}
},
mounted() {
this.getTreeData();
this.getSpecial('')
},
methods: {
getTreeData(){
getTreeData() {
$.ajax({
type: "get",
url: "/columnTree/getTree",
success: function(res) {
url: "/columnTree/getSpecialTree",
data: {
columnId: this.defaultSelected,
},
success: function (res) {
if (res.code == 0) {
this.treeData = res.data;
this.$nextTick(()=>{
// this.defaultSelected = localStorage.getItem('defaultSelected');
this.$nextTick(() => {
this.$refs.treeRef.setCurrentKey(this.defaultSelected)
var expandedKeys = JSON.parse(localStorage.getItem('expandedKeys'));
if (expandedKeys) {
this.defauleExpandedKeys.push(expandedKeys)
}
})
}
}.bind(this)
});
},
getSpecial(params) {
if (params){
$.ajax({
type: "get",
url: "/columnTree/getSpecial",
data: {
columnId: params.columnId,
type: '2',
pageNum: this.currentPage,
},
success: function (res) {
if (res.code == 0) {
this.rightList = res.data.map(item => ({
...item,
isExpanded: false, // 初始化折叠状态
currentPage: 1 // 初始化当前页码
}));
}
}.bind(this)
});
}else{
$.ajax({
type: "get",
url: "/columnTree/getSpecial",
data: {
columnId: this.defaultSelected,
type: '',
pageNum: this.currentPage,
},
success: function (res) {
if (res.code == 0) {
this.rightList = res.data.map(item => ({
...item,
isExpanded: false, // 初始化折叠状态
currentPage: 1 // 初始化当前页码
}));
}
}.bind(this)
});
}
},
handleNodeClick(data) {
localStorage.setItem('expandedKeys', JSON.stringify(data.columnId));
redirect("/special_view.html?columnId="+data.columnId);
console.log(data);
// localStorage.setItem('defaultSelected',data.columnId)
if (data.columnGrade == '2') {
this.getSpecial('')
}else{
this.getSpecial(data)
}
},
pubHref(id, type) {
openPopup("/public_view.html?type=" + type + "&id=" + id);
},
more(index) {
if (!this.rightList[index].isExpanded) {
// 切换当前列表的展开状态
this.rightList[index].isExpanded = !this.rightList[index].isExpanded;
} else {
this.rightList[index].isExpanded = !this.rightList[index].isExpanded;
}
},
getPaginatedData(item, index) {
const startIndex = (this.rightList[index].currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return item.sysSpecials.list.slice(startIndex, endIndex);
},
getTotalPages(item) {
return Math.ceil(item.sysSpecials.list.length / this.itemsPerPage);
},
prevPage(index) {
if (this.rightList[index].currentPage > 1) {
this.rightList[index].currentPage--;
}
},
nextPage(index) {
if (this.rightList[index].currentPage < this.getTotalPages(this.rightList[index])) {
this.rightList[index].currentPage++;
}
},
handlePageSizeChange(index,itemsPerPage) {
this.rightList[index].currentPage = 1; // 切换页大小后重置页码
this.itemsPerPage = itemsPerPage;
},
paginatedData(index) {
const item = this.rightList[index];
const start = (item.currentPage - 1) * item.itemsPerPage;
const end = start + item.itemsPerPage;
return item.sysSpecials.list.slice(start, end);
},
totalPages(index) {
const item = this.rightList[index];
return Math.ceil(item.sysSpecials.list.length / this.itemsPerPage);
}
}
})
function redirect(url) {
window.location.href = url;
}
@ -299,4 +497,5 @@
}
</script>
</body>
</html>
</html>
Write Preview
Loading…
Cancel
Save