资讯

src/pages/information/contentManage/contentList.vue

@@ -9,7 +9,7 @@
             <el-button v-auth="'内容管理:新增文章'" class="action-btn" type="info" @click="addArticle">新增文章</el-button>
         </div>
         <div class="page-content" style="padding-top: 24px">
-            <el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
+            <el-table ref="table" :data="list" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
                 <el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column>
                 <el-table-column type="index" width="60" label="序号" align="center">
                     <template slot-scope="scope">
@@ -70,11 +70,12 @@ export default {
             tabs: {
                 first: "栏目内容管理"
             },
-            listData: [],
+            list: [],
             multipleSelection: [],
             pageNo: +this.$route.query.page || 1,
             pageSize: 10,
-            totals: 0
+            totals: 0,
+            originSort: []
         };
     },
     props: {
@@ -93,10 +94,11 @@ export default {
             let data = {
                 columnId: this.columnId
             };
-            this.$get(`${this.api.queryArticleByCondition}/${this.pageNo}/${this.pageSize}`, data).then(res => {
+            this.$get(`${this.api.queryArticleByCondition}/${this.pageNo}/${this.pageSize}`, data).then(({ articleList, total }) => {
-                this.listData = res.articleList;
+                this.list = articleList;
-                this.totals = res.total;
+                this.totals = total;
-                if (!this.listData.length && this.totals) {
+                if (JSON.stringify(this.originSort)  !== '{}') this.originSort = JSON.parse(JSON.stringify(articleList))
+                if (!this.list.length && this.totals) {
                     this.pageNo--;
                     this.getData();
                 }
@@ -112,7 +114,7 @@ export default {
             this.getData();
         },
         addArticle() {
-            this.$router.push(`/information/addarticle?columnId=${this.columnId}&sort=${this.listData.length + 1}`);
+            this.$router.push(`/information/addarticle?columnId=${this.columnId}&sort=${this.list.length + 1}`);
         },
         editArticle(scope) {
             this.$router.push(`/information/addarticle?columnId=${this.columnId}&id=${scope.row.id}&sort=${scope.$index + 1}`);
@@ -155,7 +157,7 @@ export default {
                             this.getData();
                         }).catch(res => {
                         });
-                        if(this.multipleSelection.length === this.listData.length && this.pageNo>1) {
+                        if(this.multipleSelection.length === this.list.length && this.pageNo>1) {
                             this.handleCurrentChange(this.pageNo - 1)
                         }
                     })
@@ -174,12 +176,12 @@ export default {
                 });
         },
         sortSubmit() {
-            if (this.listData.length) {
+            if (this.list.length) {
-                if (this.listData.find(n => n.sort < 1)) return util.errorMsg("排序值最小为1");
+                if (this.list.find(n => n.sort < 1)) return util.errorMsg("排序值最小为1");
-                let data = { articleList: this.listData };
+                let data = { articleList: this.list };
                 this.$post(this.api.articleSort, data).then(res => {
                     util.successMsg("保存成功");
-                    this.getContent(this.columnId);
+                    this.getData();
                 })
                     .catch(err => {
                     });

src/pages/information/contentManage/index.vue

@@ -2,21 +2,10 @@
   <!--  内容管理  -->
   <div class="flex">
     <div class="menu-con">
-        <el-menu
+      <el-tree ref="column" :data="menuList" :props="{ label: 'name' }" highlight-current :expand-on-click-node="false" default-expand-all node-key="id" @node-click="handleSelect"></el-tree>
-            ref="columnMenu"
-            unique-opened
-            text-color="#303133"
-            :default-openeds="ids"
-            :default-active="activeName"
-            @open="handleSelect"
-            @close="handleSelect"
-            @select="handleSelect"
-        >
-          <menuTree :menuList="menuList"></menuTree>
-        </el-menu>
     </div>
     <div class="right">
-      <ContentList v-show="menuList.length" :columnId="columnId" />
+      <ContentList ref="content" v-show="menuList.length" :columnId="columnId" />
     </div>
   </div>
 </template>
@@ -35,7 +24,6 @@ export default {
     data() {
         return {
             menuList: [],
-            activeName: this.$store.state.info.columnId,
             columnId: "",
             ids: []
         };
@@ -53,7 +41,8 @@ export default {
                 page: 1,
                 size: 1000
             }).then(res => {
-                this.menuList = res.columnTree;
+                this.menuList = res.columnTree
+                const storeId = this.$store.state.info.columnId
                 if (this.menuList.length) {
                   this.getId(this.menuList)
                     if (this.menuList[0].children && this.menuList[0].children.length) {
@@ -61,14 +50,15 @@ export default {
                     } else {
                         this.columnId = this.menuList[0].id;
                     }
-                    if (!this.$store.state.info.columnId) {
+                    if (!storeId) {
-                        this.setColumnId(this.columnId)
+                        this.$store.commit('setColumnId', this.columnId)
                     } else {
-                        this.columnId = this.$store.state.info.columnId
+                        this.columnId = storeId
                     }
                 }
-                        console.log("🚀 ~ file: index.vue ~ line 58 ~ getMenuData ~ this.columnId", this.columnId)
+                this.$nextTick(() => {
-
+                  this.$refs.column.setCurrentKey(storeId)
+                })
             }).catch(err => {
             });
         },
@@ -79,9 +69,9 @@ export default {
             e.children.length && this.getId(e.children)
           })
         },
-        handleSelect(key, keyPath) {
+        handleSelect(key) {
-            this.columnId = key;
+            this.columnId = key.id
-            this.setColumnId(key)
+            this.setColumnId(key.id)
         }
     }
 };
@@ -93,17 +83,8 @@ export default {
   height: calc(100vh - 250px);
   border-right: solid 1px #e6e6e6;
   background-color: #F2F6FC;
-  .el-menu {
+  /deep/.el-tree-node__content {
-      background-color: transparent;
+    height: 50px;
-
-      .el-submenu {
-          background-color: transparent;
-      }
-
-      .el-menu-item.is-active {
-          color: #ffffff;
-          background-color: #9278FF;
-      }
   }
 }
 .right {

src/pages/information/list/index.vue

@@ -1,16 +1,12 @@
 <template>
     <!--  资讯管理  -->
     <div class="page">
-        <el-tabs v-model="tabsName" tab-position="left" @tab-click="handleClick">
+      <ul class="column-tab">
-            <el-tab-pane name="1" v-auth="'栏目管理'">
+        <li :class="{active: tabsName == 1}" @click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li>
-                <span slot="label"><i class="el-icon-collection-tag"></i> 栏目管理</span>
+        <li :class="{active: tabsName == 2}" @click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li>
-                <columnManage v-if="tabsName === '1'" />
+      </ul>
-            </el-tab-pane>
+      <columnManage class="flex-1" v-if="tabsName === 1" />
-            <el-tab-pane name="2" v-auth="'内容管理'">
+      <ContentManage class="flex-1" ref="contentManage" v-if="tabsName === 2" />
-                <span slot="label"><i class="el-icon-document"></i> 内容管理</span>
-                <ContentManage v-if="tabsName === '2'" />
-            </el-tab-pane>
-        </el-tabs>
     </div>
 </template>
 
@@ -29,12 +25,54 @@ export default {
             tabsName: this.$store.state.info.tabsName
         };
     },
+    // 页面离开的时候如果内容管理的排序没有保存则提示
+    beforeRouteLeave(to, from, next) {
+      const { content } = this.$refs.contentManage.$refs
+      const { list, originSort } = content
+      
+      // 更改了信息才需要提示
+      if (JSON.stringify(list) !== JSON.stringify(originSort)) {
+        this.$confirm(`您已更改了文章排序，是否保存更改？`, '提示', {
+          type: 'warning'
+        }).then(() => {
+          content.sortSubmit()
+          next()
+        }).catch(() => {
+          next()
+        })
+      } else {
+        next()
+      }
+    },
     methods: {
         ...mapActions("info", [
             "setTabsName"
         ]),
-        handleClick(tab, event) {
+        switchTab(id) {
-            this.setTabsName(tab.name);
+          this.tabsName = id
+          this.setTabsName(id)
+        },
+        handleClick(id) {
+          if (this.tabsName == 2) {
+            const { content } = this.$refs.contentManage.$refs
+            const { list, originSort } = content
+            
+            // 更改了信息才需要提示
+            if (JSON.stringify(list) !== JSON.stringify(originSort)) {
+              this.$confirm(`您已更改了文章排序，是否保存更改？`, '提示', {
+                type: 'warning'
+              }).then(() => {
+                content.sortSubmit()
+                this.switchTab(id)
+              }).catch(() => {
+                this.switchTab(id)
+              })
+            } else {
+              this.switchTab(id)
+            }
+          } else {
+            this.switchTab(id)
+          }
         }
     },
     mounted() {
@@ -44,21 +82,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.page .el-tabs--left {
+.page {
-    // height: calc(100vh - 250px);
+  display: flex;
-
+}
-    /deep/ .el-tabs__item {
+.column-tab {
-        height: 60px;
+  width: 120px;
-        line-height: 60px;
+  li {
-    }
+    display: flex;
-
+    align-items: center;
-    /deep/ el-tabs__active-bar {
+    height: 60px;
-        height: 60px;
+    cursor: pointer;
-        transform: translateY(60px);
+    i {
+      margin-right: 5px;
     }
-
+    &:hover, &.active {
-    .el-menu {
+      color: #9278FF;
-        border-right: 0;
     }
+  }
 }
 </style>