门户后台-内容管理新增预览功能

2024-08-14 17:44:03 +08:00 · 2024-08-14 17:44:03 +08:00 · c7f6d3a7a1
commit c7f6d3a7a1
parent 634b05d59e
3 changed files with 149 additions and 0 deletions
--- a/src/main/java/cn/com/tenlion/operator/controller/route/content/ContentRouteController.java
+++ b/src/main/java/cn/com/tenlion/operator/controller/route/content/ContentRouteController.java
@ -35,4 +35,10 @@ public class ContentRouteController extends DefaultBaseController {
        return new ModelAndView("content/list");
    }

+    @GetMapping("view")
+    public ModelAndView view() {
+        return new ModelAndView("content/view-content");
+    }
+
+
 }
--- a/src/main/resources/templates/content/list.html
+++ b/src/main/resources/templates/content/list.html
@ -135,6 +135,15 @@
                                var rowData = '<a class="layui-btn layui-btn-xs" lay-event="addSub">添加子元素</a>';
                                return rowData;
                            }
+                        },
+                        {
+                            field: 'viewContent', fixed: 'right', width: 90, title: '预览', align: 'center',
+                            templet: function (row) {
+                                return '<a href="route/content/view?contentId='+ row.contentId +'' +
+                                    '&title='+ row.title +
+                                    '" target="_blank" title="点击预览" class="layui-btn layui-btn-xs" >' +
+                                    '<i class="fa fa-eye" aria-hidden="true"></i> 预览</a>'
+                            }
                        }
                    ]
                ],
--- a/src/main/resources/templates/content/view-content.html
+++ b/src/main/resources/templates/content/view-content.html
@ -0,0 +1,134 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <!-- <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg"> -->
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <script>
+        function getParameterByName(name) {
+            name = name.replace(/[\[\]]/g, '\\$&');
+            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+                results = regex.exec(window.location.href);
+            if (!results) return null;
+            if (!results[2]) return '';
+            return decodeURIComponent(results[2].replace(/\+/g,''));
+        }
+
+        var title = getParameterByName('title');
+        if (title) {
+            document.title = title;
+        }
+    </script>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        em,
+        i {
+            font-style: normal;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        ul,
+        li,
+        ol {
+            list-style: none;
+        }
+
+        #app {
+            width: 1000px;
+            margin: 0 auto;
+            /* border: 1px solid #333; */
+            padding-top: 50px;
+            padding-bottom: 40px;
+        }
+
+        #title {
+            height: 60px;
+            line-height: 60px;
+            text-align: center;
+            margin-bottom: 15px;
+            /* border: 1px solid red; */
+        }
+
+        #content {
+            line-height: 35px;
+        }
+    </style>
+</head>
+
+<body>
+<div id="app">
+    <h2 id="title"></h2>
+    <div id="content"></div>
+</div>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
+<script src="assets/js/restajax.js"></script>
+<script src="assets/js/vendor/viewer/viewer.min.js"></script>
+<script>
+    layui.config({
+        base: 'assets/layuiadmin/'
+    }).extend({
+        index: 'lib/index'
+    }).use(['index', 'table', 'laydate', 'common', 'form', 'dialog'], function() {
+        var $ = layui.$;
+        var $win = $(window);
+        var table = layui.table;
+        var admin = layui.admin;
+        var laydate = layui.laydate;
+        var common = layui.common;
+        var resizeTimeout = null;
+        var form = layui.form;
+        var dialog = layui.dialog;
+
+        function getQueryParam(name) {
+            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+                results = regex.exec(window.location.href);
+            if (!results) return null;
+            if (!results[2]) return '';
+            return decodeURIComponent(results[2].replace(/\+/g, ' '));
+        }
+
+        function initData() {
+            var contentId = getQueryParam('contentId');
+            var loadLayerIndex;
+            restAjax.get(restAjax.path('api/content/get/{contentId}', [contentId]), {}, null, function(code, data) {
+                console.log(data)
+
+                const content = document.querySelector('#content')
+                const title = document.querySelector('#title')
+
+                title.innerHTML = data.title
+                content.innerHTML = data.content
+            }, function(code, data) {
+                dialog.msg(data.msg);
+            }, function() {
+                loadLayerIndex = dialog.msg('加载中', {icon: 16, time: 0, shade: 0.3});
+            }, function() {
+                dialog.close(loadLayerIndex);
+            });
+        }
+
+        initData();
+
+    });
+
+
+</script>
+</body>
+
+</html>