|
|
|
|
@ -1,13 +1,13 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 整体的应用容器 div -->
|
|
|
|
|
<!-- 整体的应用容器 div，作为整个页面功能模块的外层包裹元素，用于限定页面内容的布局范围 -->
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- 操作区域的卡片容器，设置了阴影效果为无 -->
|
|
|
|
|
<!-- 操作区域的卡片容器，设置了阴影效果为无，使其在页面上呈现出简洁、扁平的视觉效果，常用于放置一些操作按钮或相关提示信息 -->
|
|
|
|
|
<el-card class="operate-container" shadow="never">
|
|
|
|
|
<!-- el-icon-tickets 图标，设置了顶部外边距为 5px -->
|
|
|
|
|
<!-- el-icon-tickets 图标，设置了顶部外边距为 5px，通过添加一定的外边距来调整图标在容器内的垂直位置，使其布局更加合理美观 -->
|
|
|
|
|
<i class="el-icon-tickets" style="margin-top: 5px"></i>
|
|
|
|
|
<!-- “数据列表”文字提示，设置了顶部外边距为 5px -->
|
|
|
|
|
<!-- “数据列表”文字提示，设置了顶部外边距为 5px，同样是为了在垂直方向上与图标及其他元素保持合适的间距，清晰地向用户表明下方表格展示的是相关数据列表内容 -->
|
|
|
|
|
<span style="margin-top: 5px">数据列表</span>
|
|
|
|
|
<!-- 添加按钮，设置了类名，点击时调用 handleAddMenu 方法，按钮大小为 mini -->
|
|
|
|
|
<!-- 添加按钮，设置了类名（可能用于后续的样式定制或通过类名来进行特定的 JavaScript 操作识别），点击时调用 handleAddMenu 方法（该方法应定义在对应的 JavaScript 部分，用于触发添加菜单相关的业务逻辑），按钮大小为 mini，通常这种较小尺寸的按钮在页面布局上更加紧凑，适用于操作较为频繁但空间有限的区域 -->
|
|
|
|
|
<el-button
|
|
|
|
|
class="btn-add"
|
|
|
|
|
@click="handleAddMenu()"
|
|
|
|
|
@ -15,34 +15,39 @@
|
|
|
|
|
添加
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 表格容器 div -->
|
|
|
|
|
<!-- 表格容器 div，专门用于包裹展示数据的表格元素，将表格与其他页面元素在布局上进行区分，方便进行样式控制和整体页面结构的组织 -->
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
<!-- el-table 组件，用于展示数据表格，设置了引用名、宽度、绑定的数据列表、加载状态绑定以及边框等属性 -->
|
|
|
|
|
<!-- el-table 组件，用于展示数据表格，这是一个基于 Element UI 等类似 UI 框架提供的表格组件，用于以表格形式呈现数据。
|
|
|
|
|
设置了引用名（ref="menuTable"，方便在 JavaScript 代码中通过 this.$refs.menuTable 来获取对该表格实例的引用，进行一些额外的操作，比如操作表格的滚动、获取选中行等）、宽度（style="width: 100%"，使其能够自适应父容器的宽度，占满所在的空间）、绑定的数据列表（:data="list"，意味着表格展示的数据来源于组件实例中的 list 属性，当 list 属性值变化时，表格内容会相应更新）、加载状态绑定（v-loading="listLoading"，通过控制 listLoading 的值来决定是否显示加载动画，比如在数据加载过程中显示加载提示，加载完成后隐藏）以及边框（border，用于显示表格的边框线，使表格结构更清晰）等属性 -->
|
|
|
|
|
<el-table ref="menuTable"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
:data="list"
|
|
|
|
|
v-loading="listLoading" border>
|
|
|
|
|
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
|
|
|
|
|
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性。
|
|
|
|
|
这里定义了表格中的一列，标签（label）用于在表头显示该列的名称，宽度（width="100"）指定了该列在表格中的宽度，居中对齐（align="center"）使列内的数据在水平方向上居中展示，插槽作用域（slot-scope="scope"）则是一种机制，允许在表格单元格中访问该行的数据对象（scope.row），此处通过双花括号插值表达式（{{scope.row.id}}）将对应行数据中的 id 属性值展示在该单元格内 -->
|
|
|
|
|
<el-table-column label="编号" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.id}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“菜单名称”，内容居中对齐，通过插槽作用域展示对应行数据的 title 属性 -->
|
|
|
|
|
<!-- 表格列，标签为“菜单名称”，内容居中对齐，通过插槽作用域展示对应行数据的 title 属性，功能与上述“编号”列类似，只是展示的是对应行数据中的 title 属性值，用于在表格中呈现菜单的名称信息 -->
|
|
|
|
|
<el-table-column label="菜单名称" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.title}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“菜单级数”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 level 属性，并使用 levelFilter 过滤器对数据进行格式化转换 -->
|
|
|
|
|
<!-- 表格列，标签为“菜单级数”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 level 属性，并使用 levelFilter 过滤器对数据进行格式化转换。
|
|
|
|
|
除了基本的列定义属性外，此处使用了一个过滤器（levelFilter），它会对要展示的 level 属性值进行处理，按照一定的规则转换格式后再显示在表格单元格中，例如可能将数字形式的级数转换为更友好的文字描述形式，方便用户直观理解菜单的层级关系 -->
|
|
|
|
|
<el-table-column label="菜单级数" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“前端名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性 -->
|
|
|
|
|
<!-- 表格列，标签为“前端名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性，用于展示与菜单相关的前端显示名称等信息 -->
|
|
|
|
|
<el-table-column label="前端名称" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.name}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“前端图标”，设置了宽度和内容居中对齐，通过插槽作用域使用 svg-icon 组件展示对应行数据的 icon 属性对应的图标 -->
|
|
|
|
|
<!-- 表格列，标签为“前端图标”，设置了宽度和内容居中对齐，通过插槽作用域使用 svg-icon 组件展示对应行数据的 icon 属性对应的图标。
|
|
|
|
|
此列用于在表格中展示菜单对应的前端图标，借助 svg-icon 组件（可能是自定义或基于 UI 框架扩展的组件），根据每行数据中的 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 组件进行切换操作，绑定了相关的事件和值 -->
|
|
|
|
|
<!-- 表格列，标签为“是否显示”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 hidden 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值。
|
|
|
|
|
该列用于展示和控制菜单是否显示的状态，通过 el-switch 组件实现了一个开关功能，用户可以直接在表格中切换菜单的显示隐藏状态，同时绑定了相关的事件（@change="handleHiddenChange(scope.$index, scope.row)"），当开关状态改变时会触发对应的 JavaScript 方法（handleHiddenChange）来处理状态更新等业务逻辑，通过设置 active-value 和 inactive-value 来确定开关打开和关闭时对应的数据值 -->
|
|
|
|
|
<el-table-column label="是否显示" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-switch
|
|
|
|
|
@ -53,11 +58,12 @@
|
|
|
|
|
</el-switch>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“排序”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 sort 属性 -->
|
|
|
|
|
<!-- 表格列，标签为“排序”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 sort 属性，用于展示菜单在排序方面的相关属性值，方便用户查看和了解菜单的排列顺序信息 -->
|
|
|
|
|
<el-table-column label="排序" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.sort }}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“设置”，设置了宽度和内容居中对齐，通过插槽作用域展示“查看下级”按钮，按钮根据条件判断是否禁用（通过 disableNextLevel 过滤器），点击时调用 handleShowNextLevel 方法 -->
|
|
|
|
|
<!-- 表格列，标签为“设置”，设置了宽度和内容居中对齐，通过插槽作用域展示“查看下级”按钮，按钮根据条件判断是否禁用（通过 disableNextLevel 过滤器），点击时调用 handleShowNextLevel 方法。
|
|
|
|
|
此列添加了一个操作按钮“查看下级”，按钮的禁用状态由 disableNextLevel 过滤器根据对应行数据的某些条件（此处可能是菜单级数等情况）来动态决定，点击按钮时会触发 handleShowNextLevel 方法，用于跳转到查看当前菜单下级菜单的相关页面或执行相应的业务逻辑 -->
|
|
|
|
|
<el-table-column label="设置" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
@ -68,7 +74,8 @@
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示编辑和删除按钮，分别点击时调用 handleUpdate 和 handleDelete 方法 -->
|
|
|
|
|
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示编辑和删除按钮，分别点击时调用 handleUpdate 和 handleDelete 方法。
|
|
|
|
|
这是一个常见的操作列，用于对每行数据进行编辑和删除操作，通过定义两个按钮，并分别绑定对应的 JavaScript 方法（handleUpdate 和 handleDelete），当用户点击相应按钮时，会触发对应的业务逻辑，比如跳转到编辑页面或者弹出确认框进行删除操作等 -->
|
|
|
|
|
<el-table-column label="操作" width="200" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
@ -85,9 +92,10 @@
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 分页容器 div -->
|
|
|
|
|
<!-- 分页容器 div，用于放置分页组件，将分页功能相关的元素集中在一个区域，便于在页面上进行布局和样式控制，同时与表格等其他展示内容区分开来 -->
|
|
|
|
|
<div class="pagination-container">
|
|
|
|
|
<!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、每页数量、可选每页数量数组、当前页以及总记录数等属性 -->
|
|
|
|
|
<!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、每页数量、可选每页数量数组、当前页以及总记录数等属性。
|
|
|
|
|
这是一个常用的分页组件，通过设置背景色（background）可以使其在页面上有更明显的视觉区分，绑定页面切换事件（如每页数量改变的 @size-change 和当前页改变的 @current-change 事件，分别对应相应的 JavaScript 方法来重新加载数据），指定布局样式（layout）来确定分页组件中各个元素的排列方式，设置每页数量（:page-size）、可选每页数量数组（:page-sizes）、当前页（:current-page.sync）以及总记录数（:total）等属性来实现完整的分页功能，根据总记录数和每页数量计算总页数，并提供用户切换页面、选择每页显示数量等操作功能 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
background
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@ -102,85 +110,118 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
// 从 @/api/menu 模块中导入多个 API 函数，用于获取菜单列表、删除菜单、更新菜单以及更新菜单显示状态等操作
|
|
|
|
|
// 从 @/api/menu 模块中导入多个 API 函数，这些函数用于与后端进行交互，实现获取菜单列表、删除菜单、更新菜单以及更新菜单显示状态等具体的业务操作，意味着后端应该提供了对应的接口来支持这些功能，通过调用这些 API 函数可以向服务器发送请求并获取相应的响应数据。
|
|
|
|
|
import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "menuList",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 存储菜单列表数据
|
|
|
|
|
// 存储菜单列表数据，从后端获取到的菜单相关信息（如菜单的各个属性值组成的对象数组）会赋值给此变量，然后在表格组件中进行展示，通过数据绑定机制，当此变量值改变时，表格内容会相应更新。
|
|
|
|
|
list: null,
|
|
|
|
|
// 总记录数
|
|
|
|
|
// 总记录数，用于分页组件计算总页数等相关功能，同样是从后端获取到的数据，依据总记录数和每页显示数量等信息，可以确定分页的相关参数，比如总共有多少页等情况。
|
|
|
|
|
total: null,
|
|
|
|
|
// 列表加载状态，用于控制加载动画显示，初始化为 true 表示开始加载
|
|
|
|
|
// 列表加载状态，用于控制加载动画显示，初始化为 true 表示开始加载，在发起数据请求前将其设置为 true，页面上可能会显示相应的加载提示（比如旋转的加载图标等），当数据获取完成后设置为 false，以此告知用户数据加载情况，加载动画也随之隐藏。
|
|
|
|
|
listLoading: true,
|
|
|
|
|
// 列表查询参数对象，包含当前页码和每页数量的初始值
|
|
|
|
|
// 列表查询参数对象，包含当前页码和每页数量的初始值，作为向后端请求获取菜单列表数据时的参数，例如当前页码决定了获取哪一页的数据，每页数量指定了每次请求返回的数据量大小，后续可以根据用户操作（如切换页码、改变每页数量等）动态修改这两个属性的值来获取不同条件下的菜单列表数据。
|
|
|
|
|
listQuery: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 5
|
|
|
|
|
},
|
|
|
|
|
// 当前上级菜单 ID，初始化为 0
|
|
|
|
|
// 当前上级菜单 ID，初始化为 0，可能用于表示当前展示的菜单列表所属的上级菜单，在一些具有层级结构的菜单系统中，通过这个 ID 可以筛选出属于特定上级菜单下的子菜单列表，并且可以根据路由参数等情况动态改变其值来切换不同上级菜单下的菜单展示内容。
|
|
|
|
|
parentId: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 在组件创建时，调用重置上级菜单 ID 的方法以及获取菜单列表数据的方法
|
|
|
|
|
// 在组件创建时，调用重置上级菜单 ID 的方法以及获取菜单列表数据的方法，确保组件初始化后就获取到正确的上级菜单 ID 和相应的菜单列表数据进行展示和后续操作，created 生命周期钩子函数会在组件实例被创建后立即执行。
|
|
|
|
|
this.resetParentId();
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
$route(route) {
|
|
|
|
|
// 监听路由变化，当路由发生改变时，调用重置上级菜单 ID 的方法以及获取菜单列表数据的方法，
|
|
|
|
|
// 用于在路由参数变化等情况下重新加载对应的数据
|
|
|
|
|
// 监听路由变化，当路由发生改变时，调用重置上级菜单 ID 的方法以及获取菜单列表数据的方法，用于在路由参数变化（比如用户通过浏览器地址栏输入不同的 URL 或者点击页面上的导航链接切换页面等情况导致路由改变）等情况下重新加载对应的数据，保证页面展示的菜单数据与当前路由所对应的情况相符，watch 选项用于监听数据的变化并执行相应的回调函数。
|
|
|
|
|
this.resetParentId();
|
|
|
|
|
this.getList();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
resetParentId(){
|
|
|
|
|
// 将当前页码重置为 1，然后判断路由参数中的 parentId 是否为空
|
|
|
|
|
resetParentId() {
|
|
|
|
|
// 将当前页码重置为 1，因为当上级菜单 ID 改变或者路由变化等情况发生时，通常希望从第一页数据开始重新展示，保证数据展示的连贯性和完整性；
|
|
|
|
|
// 然后判断路由参数中的 parentId 是否为空，这一步是为了获取当前正确的上级菜单 ID 值，根据路由传递过来的参数来动态更新组件内的上级菜单 ID 状态。
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
if (this.$route.query.parentId!= null) {
|
|
|
|
|
// 如果不为空，将当前上级菜单 ID 设置为路由参数中的 parentId 值
|
|
|
|
|
if (this.$route.query.parentId != null) {
|
|
|
|
|
// 如果不为空，将当前上级菜单 ID 设置为路由参数中的 parentId 值，意味着按照路由传递过来的指定上级菜单 ID 来获取对应的菜单列表数据。
|
|
|
|
|
this.parentId = this.$route.query.parentId;
|
|
|
|
|
} else {
|
|
|
|
|
// 如果为空，将当前上级菜单 ID 设置为 0
|
|
|
|
|
// 如果为空，将当前上级菜单 ID 设置为 0，这可能是一种默认情况，表示展示顶级菜单或者没有特定上级菜单限制时的菜单列表数据。
|
|
|
|
|
this.parentId = 0;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleAddMenu() {
|
|
|
|
|
// 点击添加按钮时，通过路由导航跳转到 /ums/addMenu 路径，通常对应添加菜单的页面
|
|
|
|
|
// 点击添加按钮时，通过路由导航跳转到 /ums/addMenu 路径，通常对应添加菜单的页面，这里使用了 Vue Router（假设是基于 Vue.js 的项目）提供的 $router.push 方法来实现页面跳转，引导用户进入添加菜单的操作界面，方便进行新菜单的创建操作。
|
|
|
|
|
this.$router.push('/ums/addMenu');
|
|
|
|
|
},
|
|
|
|
|
getList() {
|
|
|
|
|
// 设置列表加载状态为正在加载，用于显示加载动画等提示
|
|
|
|
|
// 设置列表加载状态为正在加载，用于显示加载动画等提示，告知用户正在从后端获取菜单列表数据，此时页面上可能会显示相应的加载提示元素（如旋转的加载图标等），提升用户体验，让用户知道系统正在处理数据请求，而不是无响应状态。
|
|
|
|
|
this.listLoading = true;
|
|
|
|
|
// 调用获取菜单列表的 API 函数，传入当前上级菜单 ID 和列表查询参数对象
|
|
|
|
|
// 调用获取菜单列表的 API 函数，传入当前上级菜单 ID 和列表查询参数对象，向后端发送请求获取符合当前条件（上级菜单 ID 和分页参数等情况）的菜单列表数据，通过 Promise 的 then 方法来处理后端返回的响应数据，进行后续操作。
|
|
|
|
|
fetchList(this.parentId, this.listQuery).then(response => {
|
|
|
|
|
// 获取数据成功后，将列表加载状态设置为加载完成
|
|
|
|
|
// 获取数据成功后，将列表加载状态设置为加载完成，隐藏加载动画提示元素，表明数据已经获取完毕，可以进行展示等后续操作了。
|
|
|
|
|
this.listLoading = false;
|
|
|
|
|
// 将获取到的菜单列表数据赋值给 list 属性，用于在界面上展示
|
|
|
|
|
// 将获取到的菜单列表数据赋值给 list 属性，这样表格组件通过数据绑定（:data="list"）就能展示相应的数据内容了，实现数据在页面上的呈现。
|
|
|
|
|
this.list = response.data.list;
|
|
|
|
|
// 将获取到的总记录数赋值给 total 属性，用于分页等相关功能
|
|
|
|
|
// 将获取到的总记录数赋值给 total 属性，用于分页组件等相关功能，比如根据总记录数和每页数量计算总页数等，确保分页功能能够正确展示和切换页面。
|
|
|
|
|
this.total = response.data.total;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// handleSizeChange 方法注释
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
// 当每页数量改变时，将当前页码重置为 1，更新每页数量为传入的值，然后调用获取菜单列表数据的方法，用于重新加载数据
|
|
|
|
|
// 此方法用于处理分页组件中每页显示数量发生改变的情况。
|
|
|
|
|
// 当用户在分页相关的交互元素（例如分页组件里选择每页显示不同数量的选项）改变了每页数量时，
|
|
|
|
|
// 需要重新加载数据以适配新的每页数量设定。
|
|
|
|
|
|
|
|
|
|
// 首先，将列表查询参数（listQuery）中的当前页码（pageNum）重置为 1。
|
|
|
|
|
// 这是因为当每页数量改变后，通常希望从第一页数据开始展示，保证数据展示的连贯性和逻辑顺序，
|
|
|
|
|
// 避免出现因每页数量变化导致当前页码对应的数据显示混乱的情况。
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.listQuery.pageSize = val;
|
|
|
|
|
|
|
|
|
|
// 接着，把列表查询参数（listQuery）中的每页数量（pageSize）更新为传入的新值（val），
|
|
|
|
|
// 这里的 val 参数就是用户在分页操作中选择或者设定的新的每页显示数量。
|
|
|
|
|
|
|
|
|
|
// 最后，调用 getList 方法。这个方法的作用是向服务器端发起请求获取菜单列表数据，
|
|
|
|
|
// 它会依据更新后的列表查询参数（当前页码为 1，每页数量为新设定的值），从后端获取相应的数据，
|
|
|
|
|
// 从而实现根据新的每页数量重新加载并展示菜单列表数据的功能，确保页面展示的数据符合新的分页设定。
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// handleCurrentChange 方法注释
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
// 当当前页码改变时，更新当前页码为传入的值，然后调用获取菜单列表数据的方法，用于加载对应页码的数据
|
|
|
|
|
// 该方法负责处理当前页码改变的情况，例如用户点击分页组件中的页码按钮切换到不同页面时会触发此方法。
|
|
|
|
|
// 参数 val 代表了用户切换到的目标页码值，也就是用户期望查看的页面序号。
|
|
|
|
|
|
|
|
|
|
// 这里直接将列表查询参数（listQuery）中的当前页码（pageNum）更新为传入的目标页码值（val），
|
|
|
|
|
// 以便告知后端和组件，当前需要获取并展示对应页码的数据。
|
|
|
|
|
|
|
|
|
|
// 然后调用 getList 方法，向服务器发送请求获取对应页码的菜单列表数据，
|
|
|
|
|
// 使得页面能够准确地展示出用户所期望查看的那一页的菜单相关信息，实现分页数据展示和切换页面的功能。
|
|
|
|
|
this.listQuery.pageNum = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// handleHiddenChange 方法注释
|
|
|
|
|
handleHiddenChange(index, row) {
|
|
|
|
|
// 当菜单的是否显示状态切换时（通过 el-switch 组件触发），调用更新菜单显示状态的 API 函数，传入菜单 ID 和要更新的显示状态数据
|
|
|
|
|
// 成功后显示修改成功的提示消息，提示消息停留 1000 毫秒
|
|
|
|
|
updateHidden(row.id,{hidden:row.hidden}).then(response=>{
|
|
|
|
|
// 此方法用于响应菜单的“是否显示”状态切换操作。
|
|
|
|
|
// 当用户在页面表格中通过 el-switch 组件（一个可视化的开关组件，用于切换状态）对某一行菜单数据的“是否显示”状态进行切换时，该方法会被触发。
|
|
|
|
|
// 参数 index 表示当前操作的菜单数据所在表格中的行索引（在一些需要精确操作某一行数据的场景中可能会用到这个索引信息），
|
|
|
|
|
// 参数 row 则代表了当前行对应的完整菜单数据对象，包含了该菜单的各项属性信息。
|
|
|
|
|
|
|
|
|
|
// 接下来，调用 updateHidden 这个 API 函数（它应该是与后端进行交互的接口，用于向服务器发送请求更新菜单的显示状态），
|
|
|
|
|
// 传入当前操作的菜单 ID（通过 row.id 获取）以及包含要更新的显示状态数据的对象（{hidden: row.hidden}，也就是将当前行菜单对象中的 hidden 属性值作为要更新的状态值传递给后端）。
|
|
|
|
|
|
|
|
|
|
// 当后端成功处理这个显示状态更新的请求并返回响应后，通过 this.$message 显示一个提示消息给用户，告知用户“修改成功”，
|
|
|
|
|
// 同时设置消息类型为“success”（通常以一种表示成功的视觉样式展示消息，比如绿色的提示框等），
|
|
|
|
|
// 并且指定提示消息停留的时长为 1000 毫秒（即 1 秒钟），使得用户有足够时间看到提示后自动消失，避免长时间遮挡页面内容。
|
|
|
|
|
updateHidden(row.id, {hidden: row.hidden}).then(response => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '修改成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
@ -188,25 +229,50 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// handleShowNextLevel 方法注释
|
|
|
|
|
handleShowNextLevel(index, row) {
|
|
|
|
|
// 点击“查看下级”按钮时，通过路由导航跳转到 /ums/menu 路径，并传递当前菜单 ID 作为 parentId 参数，
|
|
|
|
|
// 通常用于查看当前菜单的下级菜单相关页面
|
|
|
|
|
this.$router.push({path: '/ums/menu', query: {parentId: row.id}})
|
|
|
|
|
// 这个方法主要处理用户点击“查看下级”按钮的操作逻辑。
|
|
|
|
|
// 在页面的表格中，对于每个菜单数据行都有一个“查看下级”按钮，当用户点击该按钮时（期望查看当前菜单对应的下级菜单情况），此方法会被执行。
|
|
|
|
|
|
|
|
|
|
// 通过使用 this.$router.push 方法（这是基于 Vue Router 的页面导航功能，用于跳转到指定的路由路径），
|
|
|
|
|
// 将页面导航到 /ums/menu 路径，并且传递当前菜单 ID 作为 parentId 参数（通过 query 属性设置查询参数）。
|
|
|
|
|
// 通常情况下，在系统的路由配置中，/ums/menu 这个路径对应的页面是用于展示指定上级菜单下的下级菜单相关信息的，
|
|
|
|
|
// 这样就实现了用户点击按钮后跳转到对应下级菜单展示页面的功能，方便用户查看和操作下级菜单内容。
|
|
|
|
|
this.$router.push({path: '/ums/menu', query: {parentId: row.id}});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// handleUpdate 方法注释
|
|
|
|
|
handleUpdate(index, row) {
|
|
|
|
|
// 点击编辑按钮时，通过路由导航跳转到 /ums/updateMenu 路径，并传递当前菜单 ID 作为 id 参数，
|
|
|
|
|
// 通常用于跳转到编辑对应菜单的页面
|
|
|
|
|
this.$router.push({path:'/ums/updateMenu',query:{id:row.id}});
|
|
|
|
|
// 该方法用于响应点击“编辑”按钮的操作。
|
|
|
|
|
// 当用户在页面表格中针对某一行菜单数据点击“编辑”按钮（表示希望对该菜单进行编辑修改操作）时，此方法会被触发。
|
|
|
|
|
|
|
|
|
|
// 通过 this.$router.push 方法进行页面导航，跳转到 /ums/updateMenu 路径，同时传递当前菜单 ID 作为 id 参数（通过 query 属性设置查询参数）。
|
|
|
|
|
// 在系统的路由配置里，/ums/updateMenu 这个路径对应的页面往往是专门用于编辑对应菜单详细信息的页面，
|
|
|
|
|
// 如此便实现了点击编辑按钮后，引导用户进入正确的菜单编辑页面的功能，方便用户对菜单各项属性进行修改编辑操作。
|
|
|
|
|
this.$router.push({path: '/ums/updateMenu', query: {id: row.id}});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// handleDelete 方法注释
|
|
|
|
|
handleDelete(index, row) {
|
|
|
|
|
// 点击删除按钮时，弹出确认框，询问是否要删除该菜单
|
|
|
|
|
// 此方法用于处理用户点击“删除”按钮的操作逻辑。
|
|
|
|
|
// 当用户在页面表格中针对某一行菜单数据点击“删除”按钮（意味着用户想要删除该菜单）时，此方法开始执行。
|
|
|
|
|
|
|
|
|
|
// 首先，弹出一个确认框，用于向用户再次确认是否真的要删除该菜单，避免用户误操作。
|
|
|
|
|
// 确认框的提示信息为“是否要删除该菜单”，标题显示为“提示”，
|
|
|
|
|
// 确认按钮文本设置为“确定”，取消按钮文本设置为“取消”，并且将确认框的类型设置为“warning”（这种类型的确认框通常以一种警示性的样式展示，提醒用户谨慎操作）。
|
|
|
|
|
|
|
|
|
|
// 当用户在确认框中点击“确定”按钮，表示确认要删除该菜单时，执行 then 回调函数中的操作。
|
|
|
|
|
// 在这个回调函数里，首先调用 deleteMenu 这个 API 函数（它负责与后端进行交互，向服务器发送请求删除指定的菜单数据），传入要删除的菜单 ID（通过 row.id 获取）。
|
|
|
|
|
|
|
|
|
|
// 若后端成功处理删除请求并返回响应后，通过 this.$message 显示一个提示消息告知用户“删除成功”，
|
|
|
|
|
// 消息类型设置为“success”（以表示成功的视觉样式展示消息），提示消息停留时长设定为 1000 毫秒（1 秒钟），方便用户知晓操作结果后自动消失。
|
|
|
|
|
// 最后，再次调用 getList 方法，重新向服务器获取菜单列表数据，目的是更新界面显示，使得页面上展示的菜单列表能够及时反映出刚刚删除操作后的最新数据情况，移除已被删除的菜单数据行。
|
|
|
|
|
this.$confirm('是否要删除该菜单', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
// 如果确认删除，调用删除菜单的 API 函数，传入菜单 ID
|
|
|
|
|
// 成功后显示删除成功的提示消息，提示消息停留 1000 毫秒，并重新调用获取菜单列表数据的方法，以更新界面显示
|
|
|
|
|
deleteMenu(row.id).then(response => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '删除成功',
|
|
|
|
|
@ -217,28 +283,15 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
levelFilter(value) {
|
|
|
|
|
// 根据传入的菜单级数 value 的值进行格式化转换，如果为 0 返回“一级”，如果为 1 返回“二级”，用于在表格中展示更友好的级数表示
|
|
|
|
|
if (value === 0) {
|
|
|
|
|
return '一级';
|
|
|
|
|
} else if (value === 1) {
|
|
|
|
|
return '二级';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
disableNextLevel(value) {
|
|
|
|
|
// 根据传入的菜单级数 value 的值判断“查看下级”按钮是否禁用，如果级数为 0（通常表示顶级菜单等情况）返回 false（不禁用），否则返回 true（禁用）
|
|
|
|
|
if (value === 0) {
|
|
|
|
|
return false;
|
|
|
|
|
} else {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 这里是样式部分，由于当前为空，可在此处添加针对当前组件的局部样式，
|
|
|
|
|
scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
|
|
|
|
|
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
|
|
|
|
|
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
|
|
|
|
|
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
|
|
|
|
|
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
|
|
|
|
|
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
|
|
|
|
|
</style>
|
|
|
|
|
|
