更换试卷菜单组件

src/views/contest/paperList.vue

@@ -8,26 +8,24 @@
           <el-radio v-model="formModel.group" label="ZZ" style="color: #fff;" @input="queryPaper">中职</el-radio>
         </div>
       </div>
-      <el-menu
-        class="el-menu-vertical"
-        background-color="#ffffff00"
-        text-color="#fff"
-        active-text-color="#ffd04b"
-        :default-openeds="defaultOpenIndex"
-        :default-active="defaultIndex"
-        @open="handleOpen"
+      <el-tree
+        :data="menuTreeData"
+        node-key="id"
+        :default-expanded-keys="expanded_keys"
+        current-node-key
+        :highlight-current="true"
+        :props="defaultProps"
+        style="background-color: transparent;overflow-y: auto;"
+        :expand-on-click-node="false"
+        @node-click="handleClick"
       >
-        <el-submenu v-for="season in seasonMenu" :key="season.seasonId" :index="season.seasonId+''" @click="showPaperDetail(season)">
-          <template slot="title">
-            <span> {{ season.seasonCode + '—'+season.seasonName }}</span>
-          </template>
-          <template v-for="paper in season.papers">
-            <el-menu-item :key="paper.id" :index="paper.id+''" @click="showPaperDetail(paper)">
-              {{ paper.name }}
-            </el-menu-item>
-          </template>
-        </el-submenu>
-      </el-menu>
+        <div slot-scope="{ node, data }" class="custom-tree-node">
+          <div :style="{ color: nowData.type === data.type && nowData.label === data.label && nowData.id === data.id? '#ffd04b': '#fff' }">
+            <span v-if="data.type=='season'">{{ data.seasonCode + '—' + data.seasonName }}</span>
+            <span v-else>{{ node.label }}</span>
+          </div>
+        </div>
+      </el-tree>
     </div>
   </div>
 </template>
@@ -43,10 +41,12 @@ export default {
             formModel: {
                 group:'GZ' // 高职和中职
             },
-            seasonOptions:[],
-            seasonMenu:[],
-            defaultIndex: '',
-            defaultOpenIndex:[]
+            defaultProps: {
+                disabled: true
+            },
+            menuTreeData:[],
+            nowData: {},
+            expanded_keys:[]
         };
     },
     mounted() {
@@ -55,22 +55,51 @@ export default {
     methods: {
         queryPaper() {
             getPaperMenu({ group:this.formModel.group}).then((res) => {
-                this.seasonMenu = res.data.menu;
-                this.$emit('changeModuleData', null, this.seasonMenu[0]);
-                this.defaultOpenIndex = [this.seasonMenu[0].seasonId + ''];
-                this.defaultIndex = '';
+                this.menuTreeData = this.transformTree(res.data.menu);
+                this.$emit('changeModuleData', null, this.menuTreeData[0]);
+                this.expanded_keys = [this.menuTreeData[0].id];
+                this.nowData = this.menuTreeData[0];
                 this.loading = false;
             }).catch(error => {
                 this.$message.error(error.message);
             });
         },
-        handleOpen(key) {
-            this.defaultIndex = '';
-            const seasonData = this.seasonMenu.find(season=>season.seasonId == key);
-            this.$emit('changeModuleData', null, seasonData);
+        handleClick(data) {
+            this.nowData = data;
+            if (data.type == 'season') {
+                this.$emit('changeModuleData', null, data);
+            } else {
+                this.$emit('changeModuleData', data);
+            }
         },
-        showPaperDetail(paper) {
-            this.$emit('changeModuleData', paper);
+        transformTree(data) {
+            const result = [];
+            for (let i = 0; i < data.length; i++) {
+                const season = data[i];
+                const seasonItem = {
+                    id: season.seasonId,
+                    label: season.seasonName,
+                    seasonName:season.seasonName,
+                    seasonCode:season.seasonCode,
+                    detailHtmlContent:season.detailHtmlContent,
+                    type:'season',
+                    children:[]
+                };
+                if (season.papers) {
+                    for (let i = 0; i < season.papers.length; i++) {
+                        const paper = season.papers[i];
+                        const paperItem = {
+                            id: paper.id,
+                            label: paper.name,
+                            name:paper.name,
+                            type:'paper'
+                        };
+                        seasonItem.children.push(paperItem);
+                    }
+                }
+                result.push(seasonItem);
+            }
+            return result;
         }
     }
 };
@@ -109,31 +138,24 @@ export default {
 				background: #01468B;
 				color: #fff;
 			}
+			.custom-tree-node{
+				width: 100%;
+				font-size: 16px;
+			}
         }
     }
-	.el-menu-vertical{
-		background-color: transparent;
-		.el-menu-item{
-			&:hover{
-				background: #00172E !important;
-			}
-			&:focus{
-				background-color: #00172E !important;
-			}
-        }
-	}
 
 	/deep/{
-		.el-menu{
-			border-right-width: 0;
-		}
-		.el-submenu__title{
+		.el-tree-node__content{
+			height: 56px;
+			overflow: hidden;
+			color: #fff;
 			&:hover{
 				background: #00172E !important;
 			}
-			&:focus{
-				background-color: #00172E !important;
-			}
         }
+		.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+			background-color: #00172E !important;
+		}
 	}
 </style>