index.ftl 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文章</title>
  6. <#include "../../include/head-file.ftl">
  7. <#include "../../include/increase-search.ftl">
  8. </head>
  9. <body style="overflow: hidden">
  10. <div id="index" v-cloak>
  11. <!--左侧-->
  12. <el-container class="index-menu">
  13. <div class="left-tree">
  14. <el-scrollbar class="ms-scrollbar" style="height: 100vh;">
  15. <el-tree :indent="5" v-loading="loading" highlight-current :expand-on-click-node="false" default-expand-all :empty-text="emptyText" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" style="padding: 10px;height: 100%;"></el-tree>
  16. </el-scrollbar>
  17. </div>
  18. <iframe :src="action" class="ms-iframe-style">
  19. </iframe>
  20. </el-container>
  21. </div>
  22. </body>
  23. </html>
  24. <script>
  25. var indexVue = new Vue({
  26. el: "#index",
  27. data: {
  28. action:"", //跳转页面
  29. defaultProps: {
  30. children: 'children',
  31. label: 'categoryTitle'
  32. },
  33. treeData:[],
  34. loading:true,
  35. emptyText:'',
  36. },
  37. methods:{
  38. handleNodeClick: function(data){
  39. if(data.categoryType == '1'){
  40. this.action = ms.manager +"/cms/content/main.do?categoryId="+data.id;
  41. } else if(data.categoryType == '2'){
  42. this.action = ms.manager +"/cms/content/form.do?categoryId="+data.id+"&type=2";
  43. } else{
  44. this.action = ms.manager +"/cms/content/main.do";
  45. }
  46. },
  47. treeList: function(){
  48. var that = this;
  49. this.loadState = false;
  50. this.loading = true;
  51. ms.http.get(ms.manager+"/cms/category/list.do",{
  52. pageSize:999,
  53. }).then(
  54. function(res) {
  55. if(that.loadState){
  56. that.loading = false;
  57. }else {
  58. that.loadState = true
  59. }
  60. if (!res.result||res.data.total <= 0) {
  61. that.emptyText = '暂无数据';
  62. that.treeData = [];
  63. } else {
  64. that.emptyText = '';
  65. that.treeData = ms.util.treeData(res.data.rows,'id','categoryId','children');
  66. that.treeData = [{
  67. id:0,
  68. categoryTitle:'全部',
  69. children: that.treeData,
  70. }]
  71. }
  72. }).catch(function(err) {
  73. console.log(err);
  74. });
  75. setTimeout(()=>{
  76. if(that.loadState){
  77. that.loading = false;
  78. }else {
  79. that.loadState = true
  80. }
  81. }, 500);
  82. },
  83. },
  84. mounted(){
  85. this.action = ms.manager +"/cms/content/main.do";
  86. this.treeList();
  87. }
  88. })
  89. </script>
  90. <style>
  91. #index .index-menu {
  92. min-height: 100vh;
  93. min-width: 140px;
  94. }
  95. #index .ms-iframe-style {
  96. width: 100%;
  97. border: 0;
  98. }
  99. #index .index-menu .el-main {
  100. padding: 0;
  101. }
  102. #index .left-tree{
  103. min-height: 100vh;
  104. background: #fff;
  105. width: 180px;
  106. border-right: solid 1px #e6e6e6;
  107. }
  108. #index .index-menu .el-main .index-menu-menu .el-menu-item {
  109. min-width: 140px;
  110. width: 100%;
  111. }
  112. #index .index-menu .el-main .index-material-item {
  113. min-width: 100% !important
  114. }
  115. #index .index-menu-menu-item , .el-submenu__title {
  116. height: 40px !important;
  117. line-height: 46px !important;
  118. }
  119. body{
  120. overflow: hidden;
  121. }
  122. </style>