提交内容

ruoyi-admin/src/main/resources/templates/home/dept_trends_view.html

@@ -6,6 +6,7 @@
     <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"/>
     <style>
         /* 页面整体布局 */
         html, body {
@@ -140,7 +141,26 @@
             font-size: 16px;
         }
         .pag {
-            margin-top: 360px;
+            margin-top: 80px;
+            position: absolute;
+            bottom: 4%;
+            right: 27%;
+        }
+        .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;
+        }
+        .el-tree-node__children .el-tree-node__label{
+            font-size: 16px;
         }
     </style>
 </head>
@@ -161,24 +181,22 @@
             <div class="container">
                 <div class="main">
                     <div class="row">
-                        <div class="main-left fl">
+                        <div class="main-left fl" id="app">
                             <h2>
-                                部门动态栏目
+                                专题栏目
                             </h2>
-                            <ul class="sidebar">
-                                <tbody th:each="column,status : ${deptColumns}">
-                                <li th:if="${columnId} eq ${column.columnId}">
-                                    <a class="active" th:title="${column.columnName}" th:href="@{/dept_trends_view.html(columnId=${column.columnId})}">
-                                        [[${#strings.abbreviate(column.columnName,28)}]]
-                                    </a>
-                                </li>
-                                <li th:if="${columnId} ne ${column.columnId}">
-                                    <a th:title="${column.columnName}"  th:href="@{/dept_trends_view.html(columnId=${column.columnId})}">
-                                        [[${#strings.abbreviate(column.columnName,28)}]]
-                                    </a>
-                                </li>
-                                </tbody>
-                            </ul>
+                            <el-tree
+                                    ref="treeRef"
+                                    :data="treeData"
+                                    :props="defaultProps"
+                                    node-key="columnId"
+                                    :default-expanded-keys="defauleExpandedKeys"
+                                    :current-node-key="defaultSelected"
+                                    highlight-current
+                                    :expand-on-click-node="false"
+                                    @node-click="handleNodeClick"
+                            >
+                            </el-tree>
                         </div>
                         <div class="main-right fr common-list">
                             <ul class="list mt10">
@@ -204,9 +222,11 @@
     </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 type="text/javascript">
+<script th:inline="javascript">
     window.addEventListener('DOMContentLoaded', function () {
         var currentUrl = location.href;
         // 获取所有的<a>标签
@@ -219,6 +239,50 @@
             }
         }
     });
+    var app = new Vue({
+        el: '#app',
+        data(){
+            return{
+                treeData: [],
+                defaultProps: {
+                    children: 'children',
+                    label: 'columnName',
+                    id:'columnId'
+                },
+                defaultSelected:[[${columnId}]],
+                defauleExpandedKeys:[],
+            };
+        },
+        mounted(){
+            this.getTreeData();
+        },
+        methods: {
+            getTreeData(){
+                $.ajax({
+                    type: "get",
+                    url: "/columnTree/getTree/",
+                    data:{columnType:'1'},
+                    success: function(res) {
+                        if (res.code == 0) {
+                            this.treeData = res.data;
+                            this.$nextTick(()=>{
+                                this.$refs.treeRef.setCurrentKey(this.defaultSelected)
+                                var expandedKeys = JSON.parse(localStorage.getItem('expandedKeys'));
+                                if (expandedKeys) {
+                                    this.defauleExpandedKeys.push(expandedKeys)
+                                }
+                            })
+                        }
+                    }.bind(this)
+                });
+            },
+            handleNodeClick(data) {
+                localStorage.setItem('expandedKeys', JSON.stringify(data.columnId));
+                redirect("/dept_trends_view.html?columnId="+data.columnId);
+                console.log(data);
+            },
+        }
+    })
     function redirect(url) {
         window.location.href = url;
     }

ruoyi-admin/src/main/resources/templates/home/special_view.html

@@ -140,7 +140,10 @@
         }
 
         .pag {
-            margin-top: 315px;
+            margin-top: 80px;
+            position: absolute;
+            bottom: 4%;
+            right: 27%;
         }
         .el-tree-node {
             border-bottom: 1px solid #E1E1E1;
@@ -154,9 +157,15 @@
         }
         .el-tree-node__label {
             font-size: 18px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
         .el-tree-node__children .el-tree-node__label{
             font-size: 16px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
     </style>
 </head>