From 963dc9e62e41f2f0bd65796cee5dd9366fb6ff58 Mon Sep 17 00:00:00 2001
From: dshclm <3321914460@qq.com>
Date: Tue, 1 Apr 2025 16:24:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/home/special_view.html          | 297 +++++++++++++++---
 1 file changed, 248 insertions(+), 49 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/home/special_view.html b/ruoyi-admin/src/main/resources/templates/home/special_view.html
index c5a560d..60b6b6b 100644
--- a/ruoyi-admin/src/main/resources/templates/home/special_view.html
+++ b/ruoyi-admin/src/main/resources/templates/home/special_view.html
@@ -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>
\ No newline at end of file
