114

src/views/ums/menu/index.vue

@@ -1,8 +1,13 @@
 <template>
+  <!-- 整体的应用容器 div -->
   <div class="app-container">
+    <!-- 操作区域的卡片容器，设置了阴影效果为无 -->
     <el-card class="operate-container" shadow="never">
+      <!-- el-icon-tickets 图标，设置了顶部外边距为 5px -->
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
+      <!-- “数据列表”文字提示，设置了顶部外边距为 5px -->
       <span style="margin-top: 5px">数据列表</span>
+      <!-- 添加按钮，设置了类名，点击时调用 handleAddMenu 方法，按钮大小为 mini -->
       <el-button
         class="btn-add"
         @click="handleAddMenu()"
@@ -10,26 +15,34 @@
         添加
       </el-button>
     </el-card>
+    <!-- 表格容器 div -->
     <div class="table-container">
+      <!-- el-table 组件，用于展示数据表格，设置了引用名、宽度、绑定的数据列表、加载状态绑定以及边框等属性 -->
       <el-table ref="menuTable"
                 style="width: 100%"
                 :data="list"
                 v-loading="listLoading" border>
+        <!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
         <el-table-column label="编号" width="100" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“菜单名称”，内容居中对齐，通过插槽作用域展示对应行数据的 title 属性 -->
         <el-table-column label="菜单名称" align="center">
           <template slot-scope="scope">{{scope.row.title}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“菜单级数”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 level 属性，并使用 levelFilter 过滤器对数据进行格式化转换 -->
         <el-table-column label="菜单级数" width="100" align="center">
           <template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“前端名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性 -->
         <el-table-column label="前端名称" align="center">
           <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“前端图标”，设置了宽度和内容居中对齐，通过插槽作用域使用 svg-icon 组件展示对应行数据的 icon 属性对应的图标 -->
         <el-table-column label="前端图标" width="100" align="center">
           <template slot-scope="scope"><svg-icon :icon-class="scope.row.icon"></svg-icon></template>
         </el-table-column>
+        <!-- 表格列，标签为“是否显示”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 hidden 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值 -->
         <el-table-column label="是否显示" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -40,9 +53,11 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- 表格列，标签为“排序”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 sort 属性 -->
         <el-table-column label="排序" width="100" align="center">
           <template slot-scope="scope">{{scope.row.sort }}</template>
         </el-table-column>
+        <!-- 表格列，标签为“设置”，设置了宽度和内容居中对齐，通过插槽作用域展示“查看下级”按钮，按钮根据条件判断是否禁用（通过 disableNextLevel 过滤器），点击时调用 handleShowNextLevel 方法 -->
         <el-table-column label="设置" width="120" align="center">
           <template slot-scope="scope">
             <el-button
@@ -53,6 +68,7 @@
             </el-button>
           </template>
         </el-table-column>
+        <!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示编辑和删除按钮，分别点击时调用 handleUpdate 和 handleDelete 方法 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <el-button
@@ -69,7 +85,9 @@
         </el-table-column>
       </el-table>
     </div>
+    <!-- 分页容器 div -->
     <div class="pagination-container">
+      <!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、每页数量、可选每页数量数组、当前页以及总记录数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -83,114 +101,144 @@
     </div>
   </div>
 </template>
-
 <script>
-  import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu'
+// 从 @/api/menu 模块中导入多个 API 函数，用于获取菜单列表、删除菜单、更新菜单以及更新菜单显示状态等操作
+import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu';
 
-  export default {
+export default {
-    name: "menuList",
+  name: "menuList",
-    data() {
+  data() {
-      return {
+    return {
-        list: null,
+      // 存储菜单列表数据
-        total: null,
+      list: null,
-        listLoading: true,
+      // 总记录数
-        listQuery: {
+      total: null,
-          pageNum: 1,
+      // 列表加载状态，用于控制加载动画显示，初始化为 true 表示开始加载
-          pageSize: 5
+      listLoading: true,
-        },
+      // 列表查询参数对象，包含当前页码和每页数量的初始值
-        parentId: 0
+      listQuery: {
+        pageNum: 1,
+        pageSize: 5
+      },
+      // 当前上级菜单 ID，初始化为 0
+      parentId: 0
+    }
+  },
+  created() {
+    // 在组件创建时，调用重置上级菜单 ID 的方法以及获取菜单列表数据的方法
+    this.resetParentId();
+    this.getList();
+  },
+  watch: {
+    $route(route) {
+      // 监听路由变化，当路由发生改变时，调用重置上级菜单 ID 的方法以及获取菜单列表数据的方法，
+      // 用于在路由参数变化等情况下重新加载对应的数据
+      this.resetParentId();
+      this.getList();
+    }
+  },
+  methods: {
+    resetParentId(){
+      // 将当前页码重置为 1，然后判断路由参数中的 parentId 是否为空
+      this.listQuery.pageNum = 1;
+      if (this.$route.query.parentId!= null) {
+        // 如果不为空，将当前上级菜单 ID 设置为路由参数中的 parentId 值
+        this.parentId = this.$route.query.parentId;
+      } else {
+        // 如果为空，将当前上级菜单 ID 设置为 0
+        this.parentId = 0;
       }
     },
-    created() {
+    handleAddMenu() {
-      this.resetParentId();
+      // 点击添加按钮时，通过路由导航跳转到 /ums/addMenu 路径，通常对应添加菜单的页面
+      this.$router.push('/ums/addMenu');
+    },
+    getList() {
+      // 设置列表加载状态为正在加载，用于显示加载动画等提示
+      this.listLoading = true;
+      // 调用获取菜单列表的 API 函数，传入当前上级菜单 ID 和列表查询参数对象
+      fetchList(this.parentId, this.listQuery).then(response => {
+        // 获取数据成功后，将列表加载状态设置为加载完成
+        this.listLoading = false;
+        // 将获取到的菜单列表数据赋值给 list 属性，用于在界面上展示
+        this.list = response.data.list;
+        // 将获取到的总记录数赋值给 total 属性，用于分页等相关功能
+        this.total = response.data.total;
+      });
+    },
+    handleSizeChange(val) {
+      // 当每页数量改变时，将当前页码重置为 1，更新每页数量为传入的值，然后调用获取菜单列表数据的方法，用于重新加载数据
+      this.listQuery.pageNum = 1;
+      this.listQuery.pageSize = val;
       this.getList();
     },
-    watch: {
+    handleCurrentChange(val) {
-      $route(route) {
+      // 当当前页码改变时，更新当前页码为传入的值，然后调用获取菜单列表数据的方法，用于加载对应页码的数据
-        this.resetParentId();
+      this.listQuery.pageNum = val;
-        this.getList();
+      this.getList();
-      }
     },
-    methods: {
+    handleHiddenChange(index, row) {
-      resetParentId(){
+      // 当菜单的是否显示状态切换时（通过 el-switch 组件触发），调用更新菜单显示状态的 API 函数，传入菜单 ID 和要更新的显示状态数据
-        this.listQuery.pageNum = 1;
+      // 成功后显示修改成功的提示消息，提示消息停留 1000 毫秒
-        if (this.$route.query.parentId != null) {
+      updateHidden(row.id,{hidden:row.hidden}).then(response=>{
-          this.parentId = this.$route.query.parentId;
+        this.$message({
-        } else {
+          message: '修改成功',
-          this.parentId = 0;
+          type: 'success',
-        }
+          duration: 1000
-      },
-      handleAddMenu() {
-        this.$router.push('/ums/addMenu');
-      },
-      getList() {
-        this.listLoading = true;
-        fetchList(this.parentId, this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
         });
-      },
+      });
-      handleSizeChange(val) {
+    },
-        this.listQuery.pageNum = 1;
+    handleShowNextLevel(index, row) {
-        this.listQuery.pageSize = val;
+      // 点击“查看下级”按钮时，通过路由导航跳转到 /ums/menu 路径，并传递当前菜单 ID 作为 parentId 参数，
-        this.getList();
+      // 通常用于查看当前菜单的下级菜单相关页面
-      },
+      this.$router.push({path: '/ums/menu', query: {parentId: row.id}})
-      handleCurrentChange(val) {
+    },
-        this.listQuery.pageNum = val;
+    handleUpdate(index, row) {
-        this.getList();
+      // 点击编辑按钮时，通过路由导航跳转到 /ums/updateMenu 路径，并传递当前菜单 ID 作为 id 参数，
-      },
+      // 通常用于跳转到编辑对应菜单的页面
-      handleHiddenChange(index, row) {
+      this.$router.push({path:'/ums/updateMenu',query:{id:row.id}});
-        updateHidden(row.id,{hidden:row.hidden}).then(response=>{
+    },
+    handleDelete(index, row) {
+      // 点击删除按钮时，弹出确认框，询问是否要删除该菜单
+      this.$confirm('是否要删除该菜单', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 如果确认删除，调用删除菜单的 API 函数，传入菜单 ID
+        // 成功后显示删除成功的提示消息，提示消息停留 1000 毫秒，并重新调用获取菜单列表数据的方法，以更新界面显示
+        deleteMenu(row.id).then(response => {
           this.$message({
-            message: '修改成功',
+            message: '删除成功',
             type: 'success',
             duration: 1000
           });
+          this.getList();
         });
-      },
+      });
-      handleShowNextLevel(index, row) {
+    }
-        this.$router.push({path: '/ums/menu', query: {parentId: row.id}})
+  },
-      },
+  filters: {
-      handleUpdate(index, row) {
+    levelFilter(value) {
-        this.$router.push({path:'/ums/updateMenu',query:{id:row.id}});
+      // 根据传入的菜单级数 value 的值进行格式化转换，如果为 0 返回“一级”，如果为 1 返回“二级”，用于在表格中展示更友好的级数表示
-      },
+      if (value === 0) {
-      handleDelete(index, row) {
+        return '一级';
-        this.$confirm('是否要删除该菜单', '提示', {
+      } else if (value === 1) {
-          confirmButtonText: '确定',
+        return '二级';
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deleteMenu(row.id).then(response => {
-            this.$message({
-              message: '删除成功',
-              type: 'success',
-              duration: 1000
-            });
-            this.getList();
-          });
-        });
       }
     },
-    filters: {
+    disableNextLevel(value) {
-      levelFilter(value) {
+      // 根据传入的菜单级数 value 的值判断“查看下级”按钮是否禁用，如果级数为 0（通常表示顶级菜单等情况）返回 false（不禁用），否则返回 true（禁用）
-        if (value === 0) {
+      if (value === 0) {
-          return '一级';
+        return false;
-        } else if (value === 1) {
+      } else {
-          return '二级';
+        return true;
-        }
-      },
-      disableNextLevel(value) {
-        if (value === 0) {
-          return false;
-        } else {
-          return true;
-        }
       }
     }
   }
+}
 </script>
-
 <style scoped>
-
+/* 这里是样式部分，由于当前为空，可在此处添加针对当前组件的局部样式，
+scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
 </style>