py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '合并' (#8) from branch_cwy into main

Browse Source
main
py4fbma29 11 months ago
parent e5263c4c5e 2737b1315a
commit f0664c6070
10 changed files with 1362 additions and 787 deletions
Show Stats Download Patch File Download Diff File

284
src/views/ums/admin/index.vue
Unescape View File

@ -1,14 +1,14 @@
<template>
<!-- 整体的应用容器 div -->
<!-- 整体的应用容器 div，用于包裹整个页面的各个功能模块 -->
<div class="app-container">
<!-- 筛选搜索区域的卡片容器，设置了阴影效果为无 -->
<!-- 筛选搜索区域的卡片容器，设置了阴影效果为无，使其外观更简洁 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标 -->
<!-- 搜索图标，使用了element-ui提供的搜索图标样式类 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索的文字提示 -->
<!-- 筛选搜索的文字提示，向用户说明此区域功能 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮，设置了样式为右浮动、按钮类型为主要（primary），点击时调用 handleSearchList 方法，按钮大小为 small -->
<!-- 查询搜索按钮，设置了样式为右浮动、按钮类型为主要（primary），点击时调用 handleSearchList 方法来执行搜索操作，按钮大小为 small -->
<el-button
style="float:right"
type="primary"
@ -16,7 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮，设置了样式为右浮动且距离右侧 15px，点击时调用 handleResetSearch 方法，按钮大小为 small -->
<!-- 重置按钮，设置了样式为右浮动且距离右侧 15px，点击时调用 handleResetSearch 方法来重置筛选搜索条件，按钮大小为 small -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -25,11 +25,11 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单，绑定了 listQuery 数据对象，表单大小为 small，标签宽度为 140px -->
<!-- 内联表单，绑定了 listQuery 数据对象，表单大小为 small，标签宽度为 140px，用于收集用户输入的筛选搜索条件 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项目，标签为“输入搜索：” -->
<!-- 表单项目，标签为“输入搜索：”，明确此输入框的用途 -->
<el-form-item label="输入搜索：">
<!-- 输入框，双向绑定 listQuery.keyword，设置了类名、占位符以及可清空功能 -->
<!-- 输入框，双向绑定 listQuery.keyword，设置了类名、占位符（提示用户可输入帐号/姓名）以及可清空功能，方便用户操作 -->
<el-input v-model="listQuery.keyword" class="input-width" placeholder="帐号/姓名" clearable></el-input>
</el-form-item>
</el-form>
@ -37,21 +37,21 @@
</el-card>
<!-- 操作区域的卡片容器，设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标 -->
<!-- 图标，可能用于装饰或提示此区域与数据操作相关 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表的文字提示 -->
<!-- 数据列表的文字提示，告知用户下方展示的数据相关内容 -->
<span>数据列表</span>
<!-- 添加按钮，大小为 mini，设置了类名，点击时调用 handleAdd 方法，设置了左侧外边距为 20px -->
<!-- 添加按钮，大小为 mini，设置了类名，点击时调用 handleAdd 方法用于打开添加用户的对话框，设置了左侧外边距为 20px，使其在页面上布局更合理 -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 表格容器 div -->
<!-- 表格容器 div，用于包裹展示数据的表格 -->
<div class="table-container">
<!-- el-table 组件，绑定了 list 数据用于展示表格内容，设置了加载状态绑定、宽度、边框等属性 -->
<!-- el-table 组件，绑定了 list 数据用于展示表格内容，设置了加载状态绑定（通过 v-loading="listLoading" 控制加载动画显示）、宽度（占满父容器）、边框等属性，使表格展示更规范美观 -->
<el-table ref="adminTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性，将数据准确展示在表格相应单元格中 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
@ -67,7 +67,7 @@
<el-table-column label="邮箱" align="center">
<template slot-scope="scope">{{scope.row.email}}</template>
</el-table-column>
<!-- 表格列，标签为“添加时间”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用了 formatDateTime 过滤器进行格式化 -->
<!-- 表格列，标签为“添加时间”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用了 formatDateTime 过滤器进行格式化，使时间展示格式更友好 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
@ -75,7 +75,7 @@
<el-table-column label="最后登录" width="160" align="center">
<template slot-scope="scope">{{scope.row.loginTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列，标签为“是否启用”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 status 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值 -->
<!-- 表格列，标签为“是否启用”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 status 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值，方便用户在表格中直接操作启用/禁用状态 -->
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<el-switch
@ -86,7 +86,7 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示操作按钮，包括分配角色、编辑、删除按钮，分别绑定了对应的点击事件方法 -->
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示操作按钮，包括分配角色、编辑、删除按钮，分别绑定了对应的点击事件方法，方便对每行数据进行相应操作 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -106,9 +106,9 @@
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div -->
<!-- 分页容器 div，用于放置分页组件 -->
<div class="pagination-container">
<!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、当前页、每页数量、可选每页数量数组以及总记录数等属性 -->
<!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定（如每页数量改变、当前页改变的事件处理）、布局样式、当前页、每页数量、可选每页数量数组以及总记录数等属性，实现数据分页展示功能 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -120,39 +120,39 @@
:total="total">
</el-pagination>
</div>
<!-- 编辑/添加用户的对话框组件，根据 isEdit 变量来动态设置标题，绑定了显示状态，设置了宽度 -->
<!-- 编辑/添加用户的对话框组件，根据 isEdit 变量来动态设置标题，绑定了显示状态，设置了宽度，用于弹出窗口进行用户的添加或编辑操作 -->
<el-dialog
:title="isEdit?'编辑用户':'添加用户'"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单，绑定了 admin 数据对象，设置了表单引用、标签宽度和大小 -->
<!-- 对话框内的表单，绑定了 admin 数据对象，设置了表单引用、标签宽度和大小，用于收集用户输入的添加/编辑用户相关信息 -->
<el-form :model="admin"
ref="adminForm"
label-width="150px" size="small">
<!-- 表单项目，标签为“帐号：”，输入框双向绑定 admin.username -->
<!-- 表单项目，标签为“帐号：”，输入框双向绑定 admin.username，方便获取用户输入的帐号信息 -->
<el-form-item label="帐号：">
<el-input v-model="admin.username" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“姓名：”，输入框双向绑定 admin.nickName -->
<!-- 表单项目，标签为“姓名：”，输入框双向绑定 admin.nickName，用于获取用户输入的姓名信息 -->
<el-form-item label="姓名：">
<el-input v-model="admin.nickName" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“邮箱：”，输入框双向绑定 admin.email -->
<!-- 表单项目，标签为“邮箱：”，输入框双向绑定 admin.email，用于获取用户输入的邮箱信息 -->
<el-form-item label="邮箱：">
<el-input v-model="admin.email" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“密码：”，输入框双向绑定 admin.password，设置了密码类型 -->
<!-- 表单项目，标签为“密码：”，输入框双向绑定 admin.password，设置了密码类型，用于获取用户输入的密码信息且保证安全性 -->
<el-form-item label="密码：">
<el-input v-model="admin.password" type="password" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“备注：”，输入框双向绑定 admin.note，设置了文本域类型和行数 -->
<!-- 表单项目，标签为“备注：”，输入框双向绑定 admin.note，设置了文本域类型和行数，方便用户输入多行的备注信息 -->
<el-form-item label="备注：">
<el-input v-model="admin.note"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“是否启用：”，使用单选按钮组绑定 admin.status -->
<!-- 表单项目，标签为“是否启用：”，使用单选按钮组绑定 admin.status，方便用户选择用户是否启用状态 -->
<el-form-item label="是否启用：">
<el-radio-group v-model="admin.status">
<el-radio :label="1">是</el-radio>
@ -160,18 +160,18 @@
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件，用于用户确认或取消添加/编辑操作 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
<!-- 分配角色的对话框组件，设置了标题、绑定了显示状态和宽度 -->
<!-- 分配角色的对话框组件，设置了标题、绑定了显示状态和宽度，用于弹出窗口进行角色分配操作 -->
<el-dialog
title="分配角色"
:visible.sync="allocDialogVisible"
width="30%">
<!-- 多选的下拉选择框，绑定了 allocRoleIds 数据，设置了占位符、大小和宽度，通过循环渲染选项 -->
<!-- 多选的下拉选择框，绑定了 allocRoleIds 数据，设置了占位符、大小和宽度，通过循环渲染选项，方便用户选择多个要分配的角色 -->
<el-select v-model="allocRoleIds" multiple placeholder="请选择" size="small" style="width: 80%">
<el-option
v-for="item in allRoleList"
@ -180,7 +180,7 @@
:value="item.id">
</el-option>
</el-select>
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件，用于用户确认或取消角色分配操作 -->
<span slot="footer" class="dialog-footer">
<el-button @click="allocDialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleAllocDialogConfirm()" size="small">确 定</el-button>
@ -188,21 +188,21 @@
</el-dialog>
</div>
</template>
<script>
// 从 @/api/login 模块中导入多个 API 函数，用于获取列表、创建管理员、更新管理员、更新状态、删除管理员、获取管理员角色、分配角色等操作
<<script>
// 从 @/api/login 模块中导入多个 API 函数，这些函数用于与后端进行交互，实现获取列表、创建管理员、更新管理员、更新状态、删除管理员、获取管理员角色、分配角色等具体业务操作
import {fetchList,createAdmin,updateAdmin,updateStatus,deleteAdmin,getRoleByAdmin,allocRole} from '@/api/login';
// 从 @/api/role 模块中导入获取所有角色列表的 API 函数
// 从 @/api/role 模块中导入获取所有角色列表的 API 函数，用于获取系统中所有可用的角色信息
import {fetchAllRoleList} from '@/api/role';
// 从 @/utils/date 模块中导入日期格式化函数
// 从 @/utils/date 模块中导入日期格式化函数，用于对时间数据进行格式化后展示
import {formatDate} from '@/utils/date';
// 默认的列表查询参数对象，包含当前页码、每页数量、搜索关键字等初始值
// 默认的列表查询参数对象，包含当前页码、每页数量、搜索关键字等初始值，作为查询列表数据时的默认参数
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
keyword: null
};
// 默认的管理员对象，包含各个管理员相关属性的初始值，如 id、用户名、密码、姓名、邮箱、备注、状态等
// 默认的管理员对象，包含各个管理员相关属性的初始值，如 id、用户名、密码、姓名、邮箱、备注、状态等，用于初始化添加或编辑管理员时的数据
const defaultAdmin = {
id: null,
username: null,
@ -217,82 +217,112 @@ export default {
name: 'adminList',
data() {
return {
// 列表查询参数对象，初始化为 defaultListQuery 的副本，用于存储当前的查询条件
// 列表查询参数对象，初始化为 defaultListQuery 的副本，用于存储当前的查询条件，后续可以根据用户操作动态修改其值来获取不同条件下的列表数据
listQuery: Object.assign({}, defaultListQuery),
// 存储列表数据
// 存储列表数据，从后端获取到的数据会赋值给此变量，然后在表格中展示出来
list: null,
// 总记录数
// 总记录数，用于分页组件计算总页数等相关功能，同样从后端获取数据后赋值
total: null,
// 列表加载状态，用于控制加载动画显示
// 列表加载状态，用于控制加载动画显示，当发起数据请求时设置为 true，数据获取完成后设置为 false，以此在界面上提示用户数据加载情况
listLoading: false,
// 编辑/添加用户对话框的显示状态
// 编辑/添加用户对话框的显示状态，通过控制此变量来显示或隐藏对话框，true 表示显示，false 表示隐藏
dialogVisible: false,
// 当前操作的管理员对象，初始化为 defaultAdmin 的副本，用于存储编辑或添加时的数据
// 当前操作的管理员对象，初始化为 defaultAdmin 的副本，用于存储编辑或添加时的数据，在编辑时会将对应要编辑的管理员数据赋值过来，添加时则使用默认值
admin: Object.assign({}, defaultAdmin),
// 是否为编辑状态的标识
// 是否为编辑状态的标识，用于区分当前打开的对话框是进行编辑操作还是添加操作，true 为编辑，false 为添加
isEdit: false,
// 分配角色对话框的显示状态
// 分配角色对话框的显示状态，控制分配角色对话框的显示与隐藏
allocDialogVisible: false,
// 已分配的角色 ID 数组，用于存储当前管理员已分配的角色 ID
allocRoleIds:[],
// 所有角色列表数据
allRoleList:[],
// 当前要分配角色的管理员 ID
allocAdminId:null
// 已分配的角色 ID 数组，用于存储当前管理员已分配的角色 ID，方便在分配角色操作时进行数据处理和与后端交互
allocRoleIds: [],
// 所有角色列表数据，从后端获取后存储在此，用于在分配角色的下拉选择框中展示所有可选角色
allRoleList: [],
// 当前要分配角色的管理员 ID，记录当前操作的管理员对应的 ID，在分配角色相关操作中使用
allocAdminId: null
}
},
created() {
// 在组件创建时，调用获取列表数据的方法和获取所有角色列表的方法
// 在组件创建时，调用获取列表数据的方法和获取所有角色列表的方法，确保组件初始化后就获取到必要的数据进行展示和后续操作
this.getList();
this.getAllRoleList();
},
filters: {
formatDateTime(time) {
// 如果传入的时间为空或 null，则返回 'N/A'
// 如果传入的时间为空或 null，则返回 'N/A'，用于在时间数据缺失时在界面上友好展示
if (time == null || time === '') {
return 'N/A';
}
// 将传入的时间字符串转换为 Date 对象
// 将传入的时间字符串转换为 Date 对象，以便后续进行格式化操作
let date = new Date(time);
// 使用 formatDate 函数对日期进行格式化并返回
// 使用 formatDate 函数对日期进行格式化并返回，使时间按照指定格式（'yyyy-MM-dd hh:mm:ss'）展示在界面上
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
// handleResetSearch 方法注释
handleResetSearch() {
// 重置列表查询参数为默认值
// 此方法的目的是将列表查询参数恢复到默认状态。
// 通过使用 Object.assign 创建一个新的对象（以 defaultListQuery 为蓝本），
// 并将其赋值给 listQuery，这样 listQuery 中的各个属性（如当前页码、每页数量、搜索关键字等）
// 都会被重置为初始值，方便用户重新开始进行筛选搜索操作，清除之前设置的筛选条件。
this.listQuery = Object.assign({}, defaultListQuery);
},
// handleSearchList 方法注释
handleSearchList() {
// 将当前页码重置为 1，然后调用获取列表数据的方法，用于执行筛选搜索操作
// 该方法用于执行筛选搜索操作。
// 首先，将列表查询参数中的当前页码（pageNum）重置为 1，意味着每次执行搜索操作时，
// 都从第一页数据开始获取展示。
// 然后调用 getList 方法（此方法应该是向后端请求获取符合当前查询条件的列表数据），
// 以根据更新后的查询参数（当前页码已重置为 1）获取相应的数据并更新页面展示内容。
this.listQuery.pageNum = 1;
this.getList();
},
// handleSizeChange 方法注释
handleSizeChange(val) {
// 当每页数量改变时，将当前页码重置为 1，更新每页数量为传入的值，然后调用获取列表数据的方法，用于重新加载数据
// 当每页显示的数据数量发生改变时（参数 val 即为改变后每页要显示的数量），
// 此方法会执行相应的操作来重新加载数据。
// 具体操作包括：先将当前页码（pageNum）重置为 1，因为每页数量改变后，通常希望从第一页开始展示数据；
// 接着把列表查询参数中的每页数量（pageSize）更新为传入的新值（val）；
// 最后调用 getList 方法，向后端发起请求获取新的每页数量下的对应列表数据，
// 从而实现数据根据每页数量变化而重新加载展示的功能。
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
// handleCurrentChange 方法注释
handleCurrentChange(val) {
// 当当前页码改变时，更新当前页码为传入的值，然后调用获取列表数据的方法，用于加载对应页码的数据
// 当用户切换当前页码（例如点击分页组件切换到不同页面时，参数 val 就是要切换到的目标页码），
// 此方法负责更新列表查询参数中的当前页码（pageNum）为传入的目标页码值（val），
// 然后调用 getList 方法，向后端请求获取对应页码的数据，
// 使得页面能够展示出相应页码的列表数据，实现分页数据展示功能。
this.listQuery.pageNum = val;
this.getList();
},
// handleAdd 方法注释
handleAdd() {
// 显示编辑/添加用户对话框，设置为添加状态，将管理员对象重置为默认值
// 该方法用于触发添加用户的操作流程。
// 首先，将编辑/添加用户对话框的显示状态（dialogVisible）设置为 true，使对话框在页面上显示出来，
// 接着将表示是否为编辑状态的标识（isEdit）设置为 false，表明当前操作是添加用户，而非编辑用户；
// 最后，把管理员对象（admin）重置为默认值，通过 Object.assign 创建一个以 defaultAdmin 为蓝本的新对象赋值给 admin，
// 这样对话框中的各个输入框等表单元素就会显示默认的初始值，方便用户进行新用户信息的填写。
this.dialogVisible = true;
this.isEdit = false;
this.admin = Object.assign({},defaultAdmin);
this.admin = Object.assign({}, defaultAdmin);
},
// handleStatusChange 方法注释
handleStatusChange(index, row) {
// 弹出确认框，询问是否要修改状态
// 此方法用于处理用户更改某一行数据（对应参数 row，包含该行的所有数据信息）中“是否启用”状态的操作。
// 首先弹出一个确认框，向用户询问是否真的要修改该状态，提示信息为“是否要修改该状态?”，标题为“提示”，
// 确认按钮文本为“确定”，取消按钮文本为“取消”，并且设置确认框类型为“warning”（通常用于提醒类操作）。
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果确认修改，调用更新状态的 API 函数，传入对应行的 ID 和要更新的状态数据，成功后显示成功提示消息
// 如果用户在确认框中点击了“确定”按钮，表示确认要修改状态。
// 此时调用 updateStatus 这个 API 函数（应该是向后端发送请求更新对应数据行的状态），
// 传入要修改的行数据对应的 ID（row.id）以及包含新状态数据的对象（{status: row.status}）。
// 当后端成功处理更新操作并返回响应后，通过 $message 显示一个成功提示消息，告知用户“修改成功!”。
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
@ -300,7 +330,9 @@ export default {
});
});
}).catch(() => {
// 如果取消修改，显示取消修改的提示消息，并重新获取列表数据
// 如果用户在确认框中点击了“取消”按钮，表示取消修改状态操作。
// 此时通过 $message 显示一个提示消息，告知用户“取消修改”；
// 并且调用 getList 方法，重新获取列表数据，以确保页面上展示的数据是最新的（因为虽然取消了修改，但可能其他地方的数据有变化）。
this.$message({
type: 'info',
message: '取消修改'
@ -308,14 +340,20 @@ export default {
this.getList();
});
},
// handleDelete 方法注释
handleDelete(index, row) {
// 弹出确认框，询问是否要删除用户
// 该方法用于处理用户删除某一行对应用户数据的操作。
// 首先弹出一个确认框，询问用户是否真的要删除该用户，提示信息为“是否要删除该用户?”，标题为“提示”，
// 确认按钮文本为“确定”，取消按钮文本为“取消”，确认框类型为“warning”，提醒用户谨慎操作。
this.$confirm('是否要删除该用户?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果确认删除，调用删除管理员的 API 函数，传入对应行的 ID，成功后显示删除成功提示消息，并重新获取列表数据
// 如果用户在确认框中点击了“确定”按钮，表示确认要删除该用户。
// 则调用 deleteAdmin 这个 API 函数（用于向后端发送请求删除对应行的用户数据），传入要删除的用户数据对应的 ID（row.id）。
// 当后端成功删除数据并返回响应后，通过 $message 显示一个删除成功的提示消息“删除成功!”；
// 接着调用 getList 方法，重新获取列表数据，使得页面展示的数据能及时更新，移除已删除的数据行。
deleteAdmin(row.id).then(response => {
this.$message({
type: 'success',
@ -325,60 +363,79 @@ export default {
});
});
},
// handleUpdate 方法注释
handleUpdate(index, row) {
// 显示编辑/添加用户对话框，设置为编辑状态，将管理员对象赋值为当前要编辑的行数据
// 此方法用于触发编辑用户信息的操作流程。
// 首先，将编辑/添加用户对话框的显示状态（dialogVisible）设置为 true，使对话框在页面上显示出来；
// 接着将表示是否为编辑状态的标识（isEdit）设置为 true，表明当前操作是编辑用户，而非添加用户；
// 最后，把管理员对象（admin）赋值为当前要编辑的行数据（通过 Object.assign 创建一个以 row 为蓝本的新对象赋值给 admin），
// 这样对话框中的各个输入框等表单元素就会显示对应要编辑用户的已有数据，方便用户进行修改操作。
this.dialogVisible = true;
this.isEdit = true;
this.admin = Object.assign({},row);
this.admin = Object.assign({}, row);
},
// handleDialogConfirm 方法注释
handleDialogConfirm() {
// 弹出确认框，询问是否要确认当前操作（编辑或添加）
// 该方法用于处理用户在编辑/添加用户对话框中点击“确定”按钮后的操作确认逻辑。
// 首先弹出一个确认框，询问用户是否要确认当前操作（编辑或添加），提示信息为“是否要确认?”，标题为“提示”，
// 确认按钮文本为“确定”，取消按钮文本为“取消”，确认框类型为“warning”。
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 判断当前是否为编辑状态
// 判断当前是否为编辑状态（通过 isEdit 的值来判断）。
if (this.isEdit) {
// 如果是编辑状态，调用更新管理员信息的 API 函数，传入当前管理员的 ID 和管理员数据对象
// 成功后显示修改成功的提示消息，关闭编辑/添加对话框，并重新获取列表数据，以更新界面显示
updateAdmin(this.admin.id,this.admin).then(response => {
// 如果是编辑状态，意味着要更新已有的管理员信息。
// 此时调用 updateAdmin 这个 API 函数（向后端发送请求更新对应管理员的信息），
// 传入当前管理员的 ID（this.admin.id）以及包含更新后管理员数据的对象（this.admin）。
// 当后端成功处理更新操作并返回响应后，通过 $message 显示一个修改成功的提示消息“修改成功！”；
// 接着将编辑/添加用户对话框的显示状态（dialogVisible）设置为 false，关闭对话框；
// 最后调用 getList 方法，重新获取列表数据，使页面展示的信息能及时更新，反映出编辑后的结果。
updateAdmin(this.admin.id, this.admin).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.dialogVisible = false;
this.getList();
})
} else {
// 如果是添加状态，调用创建管理员的 API 函数，传入管理员数据对象
// 成功后显示添加成功的提示消息，关闭编辑/添加对话框，并重新获取列表数据，以更新界面显示
// 如果不是编辑状态，那就是添加新用户的操作。
// 此时调用 createAdmin 这个 API 函数（向后端发送请求创建新的管理员数据），传入包含新用户信息的管理员对象（this.admin）。
// 当后端成功创建新用户并返回响应后，通过 $message 显示一个添加成功的提示消息“添加成功！”；
// 然后将编辑/添加用户对话框的显示状态（dialogVisible）设置为 false，关闭对话框；
// 最后调用 getList 方法，重新获取列表数据，使得新添加的用户数据能在列表中展示出来（如果符合当前筛选条件的话）。
createAdmin(this.admin).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.dialogVisible = false;
this.getList();
})
}
})
},
handleAllocDialogConfirm(){
// 弹出确认框，询问是否要确认分配角色操作
// handleAllocDialogConfirm 方法注释
handleAllocDialogConfirm() {
// 此方法用于处理用户在分配角色对话框中点击“确定”按钮后的操作确认逻辑，即确认要进行角色分配操作。
// 首先弹出一个确认框，询问用户是否要确认分配角色操作，提示信息为“是否要确认?”，标题为“提示”，
// 确认按钮文本为“确定”，取消按钮文本为“取消”，确认框类型为“warning”。
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 创建 URLSearchParams 对象，用于构建请求参数
// 创建一个 URLSearchParams 对象，它用于构建 URL 查询参数（常用于向后端发送请求时携带参数）。
let params = new URLSearchParams();
// 将当前要分配角色的管理员 ID 添加到请求参数中
// 将当前要分配角色的管理员 ID 添加到请求参数中，通过 append 方法，参数名为“adminId”，值为 this.allocAdminId（记录了当前操作的管理员对应的 ID）。
params.append("adminId", this.allocAdminId);
// 将已选择的角色 ID 数组添加到请求参数中
// 将已选择的角色 ID 数组添加到请求参数中，参数名为“roleIds”，值为 this.allocRoleIds（存储了用户在对话框中选择的要分配的角色 ID 列表）。
params.append("roleIds", this.allocRoleIds);
// 调用分配角色的 API 函数，传入构建好的请求参数
// 成功后显示分配成功的提示消息，并关闭分配角色对话框
// 调用 allocRole 这个 API 函数（用于向后端发送请求进行角色分配操作），传入构建好的请求参数（params）。
// 当后端成功完成角色分配并返回响应后，通过 $message 显示一个分配成功的提示消息“分配成功！”；
// 最后将分配角色对话框的显示状态（allocDialogVisible）设置为 false，关闭对话框。
allocRole(params).then(response => {
this.$message({
message: '分配成功！',
@ -388,45 +445,59 @@ export default {
})
})
},
handleSelectRole(index,row){
// 记录当前要分配角色的管理员 ID
// handleSelectRole 方法注释
handleSelectRole(index, row) {
// 该方法用于处理用户点击“分配角色”按钮的操作，通常是在表格中每行数据对应的操作列点击此按钮时触发。
// 首先，记录当前要分配角色的管理员 ID，将参数 row（包含当前行数据）中的 ID（row.id）赋值给 this.allocAdminId，
// 以便后续在构建请求参数等操作中能准确标识是对哪个管理员进行角色分配操作。
this.allocAdminId = row.id;
// 显示分配角色对话框
// 接着，将分配角色对话框的显示状态（allocDialogVisible）设置为 true，使分配角色对话框在页面上显示出来，
// 方便用户进行角色选择操作。
this.allocDialogVisible = true;
// 调用获取指定管理员已分配角色列表的方法，传入管理员 ID，用于初始化分配角色对话框中的已选角色数据
// 最后，调用 getRoleListByAdmin 方法并传入管理员 ID（row.id），此方法会获取指定管理员已分配角色列表的数据，
// 用于初始化分配角色对话框中的已选角色数据，例如在对话框的下拉选择框等组件中展示已有的角色分配情况，方便用户进行调整。
this.getRoleListByAdmin(row.id);
},
// getList 方法注释
getList() {
// 设置列表加载状态为正在加载，用于显示加载动画等提示
// 此方法的主要作用是从后端获取列表数据并更新页面相关展示内容。
// 首先，将列表加载状态（listLoading）设置为 true，这样页面上可能会显示一个加载动画之类的提示，告知用户正在获取数据；
// 然后调用 fetchList 这个 API 函数（用于向后端发送请求获取符合当前列表查询参数条件的列表数据），传入当前的列表查询参数对象（this.listQuery）。
// 当后端成功返回数据响应后，在 then 回调函数中进行后续操作：
// 先将列表加载状态（listLoading）设置为 false，停止加载动画提示；
// 接着把获取到的列表数据（response.data.list）赋值给 list 属性，这样页面上的表格等组件就能展示相应的数据了；
// 最后将获取到的总记录数（response.data.total）赋值给 total 属性，这个总记录数可用于分页组件等相关功能的计算，比如计算总页数等。
this.listLoading = true;
// 调用获取列表数据的 API 函数，传入当前的列表查询参数对象
fetchList(this.listQuery).then(response => {
// 获取数据成功后，将列表加载状态设置为加载完成
this.listLoading = false;
// 将获取到的列表数据赋值给 list 属性，用于在界面上展示
this.list = response.data.list;
// 将获取到的总记录数赋值给 total 属性，用于分页等相关功能
this.total = response.data.total;
});
},
// getAllRoleList 方法注释
getAllRoleList() {
// 调用获取所有角色列表的 API 函数
// 该方法用于获取系统中所有角色的列表数据。
// 调用 fetchAllRoleList 这个 API 函数（向后端发送请求获取所有角色信息），
// 当后端返回包含所有角色列表数据的响应后，将数据（response.data）赋值给 allRoleList 属性，
// 这样在需要展示所有可选角色的地方（例如分配角色对话框中的下拉选择框）就可以使用该数据进行展示了。
fetchAllRoleList().then(response => {
// 将获取到的所有角色列表数据赋值给 allRoleList 属性，用于在分配角色等相关功能中使用
this.allRoleList = response.data;
});
},
// getRoleListByAdmin 方法注释
getRoleListByAdmin(adminId) {
// 调用获取指定管理员已分配角色列表的 API 函数，传入管理员 ID
// 此方法用于获取指定管理员已分配的角色列表数据。
// 调用 getRoleByAdmin 这个 API 函数（向后端发送请求获取对应管理员已分配的角色信息），传入管理员 ID（adminId）。
// 当后端返回包含已分配角色列表数据的响应（response.data）后，先将获取到的数据赋值给 allocRoleList 变量；
// 接着初始化已分配的角色 ID 数组（this.allocRoleIds）为空数组，准备重新填充数据；
// 如果获取到的已分配角色列表不为空且有数据（即 allocRoleList 不为 null 且长度大于 0），
// 则通过循环遍历已分配角色列表（allocRoleList），将每个角色的 ID（allocRoleList[i].id）添加到已分配的角色 ID 数组（this.allocRoleIds）中，
// 以便后续在分配角色相关操作中使用这些已分配角色的 ID 数据，例如在对话框中展示已选角色等情况。
getRoleByAdmin(adminId).then(response => {
// 获取到已分配角色列表数据
let allocRoleList = response.data;
// 初始化已分配的角色 ID 数组为空
this.allocRoleIds=[];
// 如果已分配角色列表不为空且有数据
if(allocRoleList!=null&&allocRoleList.length>0){
// 遍历已分配角色列表，将每个角色的 ID 添加到已分配的角色 ID 数组中
for(let i=0;i<allocRoleList.length;i++){
this.allocRoleIds = [];
if (allocRoleList != null && allocRoleList.length > 0) {
for (let i = 0; i < allocRoleList.length; i++) {
this.allocRoleIds.push(allocRoleList[i].id);
}
}
@ -435,4 +506,7 @@ export default {
}
}
</script>
<style></style>
<style>
/* 这里是样式部分，由于当前为空，可在此处添加针对当前组件的局部样式，
scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
</style>

26
src/views/ums/menu/add.vue
Unescape View File

@ -1,14 +1,24 @@
<template> 
<template>
<!-- 使用 MenuDetail 组件，通过绑定 :is-edit 属性为 false，传递给 MenuDetail 组件当前处于添加（非编辑）状态的信息，
这里 MenuDetail 组件应该是用于展示菜单详情相关表单等功能的自定义组件 -->
<menu-detail :is-edit='false'></menu-detail>
</template>
<script>
import MenuDetail from './components/MenuDetail'
export default {
name: 'addMenu',
components: { MenuDetail }
}
// 导入 MenuDetail 组件，路径为相对当前文件的./components/MenuDetail，表明 MenuDetail 组件定义在 components 文件夹下
import MenuDetail from './components/MenuDetail';
export default {
name: 'addMenu',
// 在 components 选项中aaa注册 MenuDetail 组件，使得该组件可以在当前模板中使用，
// 这是 Vue.js 中用于局部组件注册的常见方式，将组件名称和对应的组件对象关联起来
components: { MenuDetail }
}
</script>
<style>
/* 当前样式部分为空，可在此处添加针对 addMenu 组件的样式规则，比如设置组件整体的布局、颜色、字体等样式相关属性 */
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

5
src/views/ums/menu/components/MenuDetail.vue
Unescape View File

@ -183,4 +183,9 @@ export default {
</script>
<style scoped>
/* scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

289
src/views/ums/menu/index.vue
Unescape View File

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

26
src/views/ums/menu/update.vue
Unescape View File

@ -1,14 +1,28 @@
<template> 
<template>
<!-- 使用 MenuDetail 组件，并通过绑定 :is-edit 属性为 true，向 MenuDetail 组件传递当前处于编辑状态的信息，
MenuDetail 组件大概率是一个自定义组件，用于展示和处理菜单详情相关的表单等内容，在这里用于编辑菜单的场景 -->
<menu-detail :is-edit='true'></menu-detail>
</template>
<script>
import MenuDetail from './components/MenuDetail'
export default {
name: 'updateMenu',
components: { MenuDetail }
}
// 从相对路径下的./components/ 文件夹中导入 MenuDetail 组件，意味着 MenuDetail 组件的定义代码位于 components 文件夹内，
// 导入后可以在当前组件中使用该自定义组件
import MenuDetail from './components/MenuDetail';
export default {
name: 'updateMenu',
// 在 components 选项中注册 MenuDetail 组件，使得该组件可以在当前组件的模板（template）中被识别和使用，
// 这是 Vue.js 框架中局部组件注册的常见方式，将组件名称（这里是 MenuDetail）与对应的组件对象关联起来
components: { MenuDetail }
}
</script>
<style>
/* 当前 CSS 部分为空，这里可以添加针对当前组件（updateMenu 组件）的样式规则，比如设置整体布局样式、字体样式、颜色等，
来对组件的外观进行定制化显示 */
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

221
src/views/ums/resource/categoryList.vue
Unescape View File

@ -1,27 +1,39 @@
<template> 
<template>
<!-- 整体的应用容器 div -->
<div class="app-container">
<!-- 操作区域的卡片容器，设置了阴影效果为无 -->
<el-card shadow="never" class="operate-container">
<!-- 图标元素，使用了 el-icon-tickets 图标 -->
<i class="el-icon-tickets"></i>
<!-- 文字提示，显示“数据列表”字样 -->
<span>数据列表</span>
<!-- 添加按钮，设置了按钮大小为 mini，添加了自定义类名 btn-add，点击时调用 handleAdd 方法 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
</el-card>
<!-- 表格容器 div，用于放置展示数据的表格 -->
<div class="table-container">
<!-- el-table 组件，用于展示数据列表，设置了引用名、绑定的数据、表格宽度、加载状态绑定以及边框等属性 -->
<el-table ref="resourceCategoryTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签为“名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性 -->
<el-table-column label="名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签为“创建时间”，内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用 formatDateTime 过滤器对时间进行格式化展示 -->
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列，标签为“排序”，内容居中对齐，通过插槽作用域展示对应行数据的 sort 属性 -->
<el-table-column label="排序" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示编辑和删除按钮，分别点击时调用 handleUpdate 和 handleDelete 方法 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -36,20 +48,25 @@
</el-table-column>
</el-table>
</div>
<!-- el-dialog 对话框组件，设置了标题为“添加分类”，绑定了显示状态，设置了宽度 -->
<el-dialog
title="添加分类"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单，绑定了 resourceCategory 数据对象，设置了表单引用、标签宽度和大小 -->
<el-form :model="resourceCategory"
ref="resourceCategoryForm"
label-width="150px" size="small">
<!-- 表单项目，标签为“名称：”，输入框双向绑定 resourceCategory.name，并设置了宽度 -->
<el-form-item label="名称：">
<el-input v-model="resourceCategory.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“排序：”，输入框双向绑定 resourceCategory.sort，并设置了宽度 -->
<el-form-item label="排序：">
<el-input v-model="resourceCategory.sort" style="width: 250px"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
@ -58,99 +75,133 @@
</div>
</template>
<script>
import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
import {formatDate} from '@/utils/date';
const defaultResourceCategory={
name:null,
sort:0
};
export default {
name: 'resourceCategoryList',
data() {
return {
list: null,
listLoading: false,
dialogVisible:false,
isEdit:false,
resourceCategory:Object.assign({},defaultResourceCategory)
// 从 @/api/resourceCategory 模块中导入多个 API 函数，分别用于获取所有分类列表、创建资源分类、更新资源分类以及删除资源分类等操作
import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
// 从 @/utils/date 模块中导入日期格式化函数，用于后续对时间数据的格式化处理
import {formatDate} from '@/utils/date';
// 默认的资源分类对象，包含名称和排序两个属性的初始值，名称初始为 null，排序初始为 0
const defaultResourceCategory={
name:null,
sort:0
};
export default {
name: 'resourceCategoryList',
data() {
return {
// 存储资源分类列表数据，初始值为 null，后续会通过 API 获取并赋值
list: null,
// 列表加载状态，用于控制加载动画显示等，初始值为 false，表示未处于加载状态
listLoading: false,
// 对话框（用于添加/编辑分类）的显示状态，初始值为 false，即默认不显示对话框
dialogVisible:false,
// 是否为编辑状态的标识，初始值为 false，用于区分当前操作是添加还是编辑资源分类
isEdit:false,
// 当前操作的资源分类对象，初始化为 defaultResourceCategory 的副本，用于存储添加或编辑时的数据
resourceCategory:Object.assign({},defaultResourceCategory)
}
},
created() {
// 在组件创建时，调用获取资源分类列表数据的方法，用于初始化页面展示的数据
this.getList();
},
filters: {
formatDateTime(time) {
// 如果传入的时间数据为空或等于空字符串，则返回 'N/A'，作为时间格式化的默认展示值
if (time == null || time === '') {
return 'N/A';
}
// 将传入的时间字符串转换为 Date 对象，以便进行后续的格式化操作
let date = new Date(time);
// 使用 formatDate 函数对日期进行格式化，并返回格式化后的时间字符串
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
handleAdd() {
// 显示添加/编辑分类的对话框，设置为添加状态（isEdit 设为 false），并将 resourceCategory 对象重置为默认值
this.dialogVisible = true;
this.isEdit = false;
this.resourceCategory = Object.assign({},defaultResourceCategory);
},
created() {
this.getList();
handleUpdate(index,row){
// 显示添加/编辑分类的对话框，设置为编辑状态（isEdit 设为 true），将 resourceCategory 对象赋值为当前要编辑的行数据
this.dialogVisible = true;
this.isEdit = true;
this.resourceCategory = Object.assign({},row);
},
filters:{
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
handleDelete(index,row){
// 弹出确认框，询问是否要删除该分类，提供确定和取消按钮供用户选择
this.$confirm('是否要删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户点击确定，调用删除资源分类的 API 函数，传入要删除分类的 id
// 成功后显示删除成功的提示消息，并重新调用获取资源分类列表数据的方法，以更新页面展示的列表
deleteResourceCategory(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
methods: {
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.resourceCategory = Object.assign({},defaultResourceCategory);
},
handleUpdate(index,row){
this.dialogVisible = true;
this.isEdit = true;
this.resourceCategory = Object.assign({},row);
},
handleDelete(index,row){
this.$confirm('是否要删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteResourceCategory(row.id).then(response => {
handleDialogConfirm() {
// 弹出确认框，询问是否要确认当前的添加/编辑操作，提供确定和取消按钮供用户选择
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 判断当前是否为编辑状态（isEdit 为 true 表示编辑）
if (this.isEdit) {
// 如果是编辑状态，调用更新资源分类的 API 函数，传入要更新分类的 id 和当前的 resourceCategory 对象数据
// 成功后显示修改成功的提示消息，关闭对话框，并重新调用获取资源分类列表数据的方法，以更新页面展示的列表
updateResourceCategory(this.resourceCategory.id,this.resourceCategory).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
});
});
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateResourceCategory(this.resourceCategory.id,this.resourceCategory).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createResourceCategory(this.resourceCategory).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
getList() {
this.listLoading = true;
listAllCate({}).then(response => {
this.listLoading = false;
this.list = response.data;
});
}
})
} else {
// 如果是添加状态，调用创建资源分类的 API 函数，传入当前的 resourceCategory 对象数据
// 成功后显示添加成功的提示消息，关闭对话框，并重新调用获取资源分类列表数据的方法，以更新页面展示的列表
createResourceCategory(this.resourceCategory).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
getList() {
// 设置列表加载状态为正在加载，用于显示加载动画等提示信息，表示正在获取资源分类列表数据
this.listLoading = true;
// 调用获取所有资源分类列表的 API 函数，传入空对象作为参数（可能根据实际 API 需求传入查询条件等）
listAllCate({}).then(response => {
// 获取数据成功后，将列表加载状态设置为加载完成，即关闭加载动画等提示信息
this.listLoading = false;
// 将获取到的资源分类列表数据赋值给 list 属性，用于在页面的表格中展示
this.list = response.data;
});
}
}
}
</script>
<style>
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceCategoryList 组件）的样式规则，
例如设置表格样式、对话框样式、按钮样式以及整体布局相关的样式等，来美化组件的外观显示效果 */
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

355
src/views/ums/resource/index.vue
Unescape View File

@ -1,9 +1,14 @@
<template> 
<template>
<!-- 整体的应用容器 div，用于包裹页面内的各个功能模块 -->
<div class="app-container">
<!-- 筛选搜索区域的卡片容器，设置了阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标元素，使用了 el-icon-search 图标 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮，设置了样式为右浮动、按钮类型为主要（primary），点击时调用 handleSearchList 方法，按钮大小为 small -->
<el-button
style="float:right"
type="primary"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮，设置了样式为右浮动且距离右侧 15px，点击时调用 handleResetSearch 方法，按钮大小为 small -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,13 +25,17 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单，绑定了 listQuery 数据对象，表单大小为 small，标签宽度为 140px，用于设置筛选条件 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项目，标签为“资源名称：”，内部的输入框双向绑定 listQuery.nameKeyword，设置了类名、占位符以及可清空功能 -->
<el-form-item label="资源名称：">
<el-input v-model="listQuery.nameKeyword" class="input-width" placeholder="资源名称" clearable></el-input>
</el-form-item>
<!-- 表单项目，标签为“资源路径：”，内部的输入框双向绑定 listQuery.urlKeyword，设置了类名、占位符以及可清空功能 -->
<el-form-item label="资源路径：">
<el-input v-model="listQuery.urlKeyword" class="input-width" placeholder="资源路径" clearable></el-input>
</el-form-item>
<!-- 表单项目，标签为“资源分类：”，内部是一个下拉选择框，双向绑定 listQuery.categoryId，设置了占位符、可清空以及类名，通过循环渲染选项 -->
<el-form-item label="资源分类：">
<el-select v-model="listQuery.categoryId" placeholder="全部" clearable class="input-width">
<el-option v-for="item in categoryOptions"
@ -38,32 +48,45 @@
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器，设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标元素，使用了 el-icon-tickets 图标 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表的文字提示 -->
<span>数据列表</span>
<!-- 添加按钮，大小为 mini，添加了自定义类名 btn-add，点击时调用 handleAdd 方法，设置了左侧外边距为 20px -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
<!-- 资源分类按钮，大小为 mini，添加了自定义类名 btn-add，点击时调用 handleShowCategory 方法，用于跳转到资源分类页面 -->
<el-button size="mini" class="btn-add" @click="handleShowCategory()">资源分类</el-button>
</el-card>
<!-- 表格容器 div，用于放置展示资源数据的表格 -->
<div class="table-container">
<!-- el-table 组件，用于展示资源数据列表，设置了引用名、绑定的数据、表格宽度、加载状态绑定以及边框等属性 -->
<el-table ref="resourceTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签为“资源名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性 -->
<el-table-column label="资源名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签为“资源路径”，内容居中对齐，通过插槽作用域展示对应行数据的 url 属性 -->
<el-table-column label="资源路径" align="center">
<template slot-scope="scope">{{scope.row.url}}</template>
</el-table-column>
<!-- 表格列，标签为“描述”，内容居中对齐，通过插槽作用域展示对应行数据的 description 属性 -->
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<!-- 表格列，标签为“添加时间”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用 formatDateTime 过滤器对时间进行格式化展示 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示编辑和删除按钮，分别点击时调用 handleUpdate 和 handleDelete 方法 -->
<el-table-column label="操作" width="140" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -79,7 +102,9 @@
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div，用于放置分页组件 -->
<div class="pagination-container">
<!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、当前页、每页数量、可选每页数量数组以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -91,19 +116,24 @@
:total="total">
</el-pagination>
</div>
<!-- el-dialog 对话框组件，根据 isEdit 变量动态设置标题为“编辑资源”或“添加资源”，绑定了显示状态，设置了宽度 -->
<el-dialog
:title="isEdit?'编辑资源':'添加资源'"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单，绑定了 resource 数据对象，设置了表单引用、标签宽度和大小 -->
<el-form :model="resource"
ref="resourceForm"
label-width="150px" size="small">
<!-- 表单项目，标签为“资源名称：”，输入框双向绑定 resource.name，并设置了宽度 -->
<el-form-item label="资源名称：">
<el-input v-model="resource.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“资源路径：”，输入框双向绑定 resource.url，并设置了宽度 -->
<el-form-item label="资源路径：">
<el-input v-model="resource.url" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“资源分类：”，内部是一个下拉选择框，双向绑定 resource.categoryId，设置了占位符、可清空以及宽度，通过循环渲染选项 -->
<el-form-item label="资源分类：">
<el-select v-model="resource.categoryId" placeholder="全部" clearable style="width: 250px">
<el-option v-for="item in categoryOptions"
@ -113,6 +143,7 @@
</el-option>
</el-select>
</el-form-item>
<!-- 表单项目，标签为“描述：”，输入框双向绑定 resource.description，设置了文本域类型和行数以及宽度 -->
<el-form-item label="描述：">
<el-input v-model="resource.description"
type="textarea"
@ -120,6 +151,7 @@
style="width: 250px"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
@ -128,146 +160,205 @@
</div>
</template>
<script>
import {fetchList,createResource,updateResource,deleteResource} from '@/api/resource';
import {listAllCate} from '@/api/resourceCategory';
import {formatDate} from '@/utils/date';
// 从 @/api/resource 模块中导入多个 API 函数，分别用于获取资源列表、创建资源、更新资源以及删除资源等操作
import {fetchList,createResource,updateResource,deleteResource} from '@/api/resource';
// 从 @/api/resourceCategory 模块中导入获取所有资源分类列表的 API 函数
import {listAllCate} from '@/api/resourceCategory';
// 从 @/utils/date 模块中导入日期格式化函数，用于对时间数据进行格式化处理
import {formatDate} from '@/utils/date';
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
nameKeyword: null,
urlKeyword: null,
categoryId:null
};
const defaultResource = {
id: null,
name: null,
url: null,
categoryId: null,
description:''
};
export default {
name: 'resourceList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
resource: Object.assign({}, defaultResource),
isEdit: false,
categoryOptions:[],
defaultCategoryId:null
// 默认的列表查询参数对象，包含当前页码、每页数量、资源名称关键字、资源路径关键字以及资源分类 ID 等属性的初始值
const defaultListQuery = {
pageNum: 1,
pageSize: 10,
nameKeyword: null,
urlKeyword: null,
categoryId:null
};
// 默认的资源对象，包含资源的各个属性如 id、名称、路径、分类 ID、描述等的初始值
const defaultResource = {
id: null,
name: null,
url: null,
categoryId: null,
description:''
};
export default {
name: 'resourceList',
data() {
return {
// 列表查询参数对象，初始化为 defaultListQuery 的副本，用于存储当前的筛选、分页等查询条件
listQuery: Object.assign({}, defaultListQuery),
// 存储资源列表数据，初始值为 null，后续通过 API 获取并赋值
list: null,
// 总记录数，初始值为 null，用于分页功能显示总条数等
total: null,
// 列表加载状态，用于控制加载动画显示等，初始值为 false，表示未处于加载状态
listLoading: false,
// 对话框（用于添加/编辑资源）的显示状态，初始值为 false，即默认不显示对话框
dialogVisible: false,
// 当前操作的资源对象，初始化为 defaultResource 的副本，用于存储添加或编辑时的资源数据
resource: Object.assign({}, defaultResource),
// 是否为编辑状态的标识，初始值为 false，用于区分当前操作是添加还是编辑资源
isEdit: false,
// 用于存储资源分类选项数据，是一个数组，每个元素包含 label 和 value 属性，用于下拉选择框展示和绑定值
categoryOptions: [],
// 默认的资源分类 ID，初始值为 null，后续会从获取到的资源分类列表中赋值
defaultCategoryId: null
}
},
created() {
// 在组件创建时，调用获取资源列表数据的方法以及获取资源分类列表数据的方法，用于初始化页面展示的数据
this.getList();
this.getCateList();
},
filters: {
formatDateTime(time) {
// 如果传入的时间数据为空或等于空字符串，则返回 'N/A'，作为时间格式化的默认展示值
if (time == null || time === '') {
return 'N/A';
}
// 将传入的时间字符串转换为 Date 对象，以便进行后续的格式化操作
let date = new Date(time);
// 使用 formatDate 函数对日期进行格式化，并返回格式化后的时间字符串
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
handleResetSearch() {
// 重置列表查询参数为默认值，将各个筛选条件恢复到初始状态
this.listQuery = Object.assign({}, defaultListQuery);
},
created() {
handleSearchList() {
// 将当前页码重置为 1，然后调用获取资源列表数据的方法，用于根据当前筛选条件重新查询资源列表
this.listQuery.pageNum = 1;
this.getList();
this.getCateList();
},
filters: {
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
handleSizeChange(val) {
// 当每页数量改变时，将当前页码重置为 1，更新每页数量为传入的值，然后调用获取资源列表数据的方法，用于重新加载数据
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
// 当当前页码改变时，更新当前页码为传入的值，然后调用获取资源列表数据的方法，用于加载对应页码的数据
this.listQuery.pageNum = val;
this.getList();
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.resource = Object.assign({},defaultResource);
this.resource.categoryId = this.defaultCategoryId;
},
handleDelete(index, row) {
this.$confirm('是否要删除该资源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteResource(row.id).then(response => {
handleAdd() {
// 显示添加/编辑资源的对话框，设置为添加状态（isEdit 设为 false），将 resource 对象重置为默认值，并设置默认的资源分类 ID
this.dialogVisible = true;
this.isEdit = false;
this.resource = Object.assign({}, defaultResource);
this.resource.categoryId = this.defaultCategoryId;
},
handleDelete(index, row) {
// 弹出确认框，询问是否要删除该资源，提供确定和取消按钮供用户选择
this.$confirm('是否要删除该资源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户点击确定，调用删除资源的 API 函数，传入要删除资源的 id
// 成功后显示删除成功的提示消息，并重新调用获取资源列表数据的方法，以更新页面展示的列表
deleteResource(row.id).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
});
});
},
handleUpdate(index, row) {
// 显示添加/编辑资源的对话框，设置为编辑状态（isEdit 设为 true），将 resource 对象赋值为当前要编辑的行数据
this.dialogVisible = true;
this.isEdit = true;
this.resource = Object.assign({}, row);
},
handleDialogConfirm() {
// 弹出确认框，询问是否要确认当前的添加/编辑操作，提供确定和取消按钮供用户选择
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 判断当前是否为编辑状态（isEdit 为 true 表示编辑）
if (this.isEdit) {
// 如果是编辑状态，调用更新资源的 API 函数，传入要更新资源的 id 和当前的 resource 对象数据
// 成功后显示修改成功的提示消息，关闭对话框，并重新调用获取资源列表数据的方法，以更新页面展示的列表
updateResource(this.resource.id, this.resource).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
message: '修改成功！',
type: 'success'
});
this.dialogVisible = false;
this.getList();
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.resource = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateResource(this.resource.id,this.resource).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createResource(this.resource).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleShowCategory(){
this.$router.push({path: '/ums/resourceCategory'})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
getCateList(){
listAllCate().then(response=>{
let cateList = response.data;
for(let i=0;i<cateList.length;i++){
let cate = cateList[i];
this.categoryOptions.push({label:cate.name,value:cate.id});
}
this.defaultCategoryId=cateList[0].id;
})
}
})
} else {
// 如果是添加状态，调用创建资源的 API 函数，传入当前的 resource 对象数据
// 成功后显示添加成功的提示消息，关闭对话框，并重新调用获取资源列表数据的方法，以更新页面展示的列表
createResource(this.resource).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
}
})
},
// 方法用于处理点击“资源分类”按钮的操作
// 其功能是通过路由导航跳转到指定的路径'/ums/resourceCategory'，
// 通常意味着会跳转到展示资源分类相关内容的页面，比如资源分类列表页等
handleShowCategory() {
this.$router.push({path: '/ums/resourceCategory'})
},
// 方法用于获取资源列表数据
// 首先将 listLoading 属性设置为 true，表示数据正在加载中，
// 这可以用于在页面上显示加载动画之类的提示元素，告知用户当前正在获取数据
// 接着调用 fetchList 函数（该函数应该是从外部 API 模块引入，用于向服务器请求资源列表），并传入 listQuery 参数（包含了查询相关的条件等信息）
// 当获取数据的请求成功后（通过 then 回调处理），将 listLoading 属性设置回 false，表明数据加载完成，隐藏加载提示
// 然后从响应数据（response）中提取出 list 属性（应该是包含资源列表的实际数据部分），赋值给组件内的 list 属性，用于后续在页面的表格等地方展示资源列表内容
// 同时提取响应数据中的 total 属性（一般代表符合查询条件的资源总数量），赋值给组件内的 total 属性，该属性常用于分页功能的实现等
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
},
// 方法用于获取资源分类列表数据
// 调用 listAllCate 函数（同样是从外部 API 模块引入，用于获取所有资源分类的相关信息），该函数返回一个 Promise，通过 then 方法来处理获取数据成功后的逻辑
getCateList() {
listAllCate().then(response => {
// 获取到响应数据后，提取其中的资源分类列表数据部分，赋值给 cateList 变量，方便后续遍历操作
let cateList = response.data;
// 循环遍历资源分类列表中的每一项数据
for (let i = 0; i < cateList.length; i++) {
// 取出当前遍历到的资源分类对象，赋值给 cate 变量，便于单独操作每一个分类的属性
let cate = cateList[i];
// 将当前资源分类对象的名称作为 label 属性，ID 作为 value 属性，组装成一个新的对象，并添加到 categoryOptions 数组中
// categoryOptions 数组通常用于在页面上构建下拉选择框等 UI 组件，方便用户选择资源分类
this.categoryOptions.push({label: cate.name, value: cate.id});
}
// 将资源分类列表中的第一个分类的 ID 赋值给 defaultCategoryId 属性，
// 这个属性可能会在某些业务场景下作为默认选中的资源分类 ID 使用，比如在新增资源时，默认给资源赋予第一个分类等，具体使用方式取决于业务逻辑要求
this.defaultCategoryId = cateList[0].id;
})
}
}
}
</script>
<style></style>
<style>
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

181
src/views/ums/role/allocMenu.vue
Unescape View File

@ -1,5 +1,8 @@
<template>
<!-- 使用 el-card 组件创建一个表单容器卡片，设置阴影效果为无 -->
<el-card class="form-container" shadow="never">
<!-- el-tree 组件，用于展示树形结构的数据，绑定了 menuTreeList 数据作为树的数据源 -->
<!-- 显示复选框，默认展开所有节点，设置节点的唯一标识键为 'id'，添加了引用名 'tree'，高亮当前选中节点，并配置了节点属性映射 -->
<el-tree
:data="menuTreeList"
show-checkbox
@ -9,93 +12,131 @@
highlight-current
:props="defaultProps">
</el-tree>
<!-- 包含两个按钮的 div 容器，设置了顶部外边距为 20px，并使其内容居中对齐 -->
<div style="margin-top: 20px" align="center">
<!-- 保存按钮，类型为主要（primary），点击时调用 handleSave 方法 -->
<el-button type="primary" @click="handleSave()">保存</el-button>
<!-- 清空按钮，点击时调用 handleClear 方法 -->
<el-button @click="handleClear()">清空</el-button>
</div>
</el-card>
</template>
<script>
import {fetchTreeList} from '@/api/menu';
import {listMenuByRole,allocMenu} from '@/api/role';
// 从 @/api/menu 模块中导入获取树形菜单列表数据的 API 函数
import {fetchTreeList} from '@/api/menu';
// 从 @/api/role 模块中导入根据角色获取菜单列表以及分配菜单的 API 函数
import {listMenuByRole, allocMenu} from '@/api/role';
export default {
name: "allocMenu",
data() {
return {
menuTreeList: [],
defaultProps: {
children: 'children',
label: 'title'
},
roleId:null
};
},
created() {
this.roleId = this.$route.query.roleId;
this.treeList();
this.getRoleMenu(this.roleId);
},
methods: {
treeList() {
fetchTreeList().then(response => {
this.menuTreeList = response.data;
});
export default {
name: "allocMenu",
data() {
return {
// 用于存储树形菜单列表数据，初始值为空数组，后续通过 API 获取并赋值
menuTreeList: [],
// 配置 el-tree 组件节点属性的映射对象，指定子节点属性名为 'children'，节点显示文本对应的属性名为 'title'
defaultProps: {
children: 'children',
label: 'title'
},
getRoleMenu(roleId){
listMenuByRole(roleId).then(response=>{
let menuList = response.data;
let checkedMenuIds=[];
if(menuList!=null&&menuList.length>0){
for(let i=0;i<menuList.length;i++){
let menu = menuList[i];
if(menu.parentId!==0){
checkedMenuIds.push(menu.id);
}
// 存储当前操作的角色 ID，初始值为 null，后续从路由参数中获取赋值
roleId: null
};
},
created() {
// 从路由参数中获取角色 ID，并赋值给 roleId 属性，用于后续相关操作的参数传递等
this.roleId = this.$route.query.roleId;
// 调用获取树形菜单列表数据的方法，用于初始化页面上的树形菜单展示
this.treeList();
// 调用根据角色获取菜单列表的方法，传入获取到的角色 ID，用于后续设置已选中的菜单节点等操作
this.getRoleMenu(this.roleId);
},
methods: {
treeList() {
// 调用获取树形菜单列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后将响应数据中的菜单列表赋值给 menuTreeList 属性，用于在 el-tree 组件中展示树形菜单结构
fetchTreeList().then(response => {
this.menuTreeList = response.data;
});
},
getRoleMenu(roleId) {
// 调用根据角色获取菜单列表的 API 函数，传入角色 ID，该函数返回一个 Promise，成功获取数据后进行如下处理
listMenuByRole(roleId).then(response => {
// 获取到的菜单列表数据赋值给 menuList 变量，方便后续操作
let menuList = response.data;
// 用于存储已选中的菜单 ID 的数组，初始为空
let checkedMenuIds = [];
// 判断菜单列表不为空且有数据时，进行循环遍历
if (menuList!= null && menuList.length > 0) {
for (let i = 0; i < menuList.length; i++) {
// 取出每一个菜单对象
let menu = menuList[i];
// 如果菜单的上级菜单 ID 不等于 0（意味着不是顶级菜单，可能是需要关注的子菜单等情况），将其 ID 添加到已选中菜单 ID 数组中
if (menu.parentId!== 0) {
checkedMenuIds.push(menu.id);
}
}
this.$refs.tree.setCheckedKeys(checkedMenuIds);
});
},
handleSave() {
let checkedNodes = this.$refs.tree.getCheckedNodes();
let checkedMenuIds=new Set();
if(checkedNodes!=null&&checkedNodes.length>0){
for(let i=0;i<checkedNodes.length;i++){
let checkedNode = checkedNodes[i];
checkedMenuIds.add(checkedNode.id);
if(checkedNode.parentId!==0){
checkedMenuIds.add(checkedNode.parentId);
}
}
// 通过 el-tree 组件的引用（通过 ref='tree' 获取），设置已选中的节点对应的菜单 ID 数组，用于在页面上展示对应角色已分配的菜单节点为选中状态
this.$refs.tree.setCheckedKeys(checkedMenuIds);
});
},
handleSave() {
// 获取 el-tree 组件中当前被选中的所有节点，这些节点包含了菜单相关的详细信息
let checkedNodes = this.$refs.tree.getCheckedNodes();
// 使用 Set 数据结构来存储选中菜单的 ID，用于去重（避免重复添加相同的菜单 ID）
let checkedMenuIds = new Set();
// 判断获取到的选中节点不为空且有数据时，进行循环遍历
if (checkedNodes!= null && checkedNodes.length > 0) {
for (let i = 0; i < checkedNodes.length; i++) {
// 取出每一个选中的节点对象
let checkedNode = checkedNodes[i];
// 将选中节点的 ID 添加到 Set 集合中
checkedMenuIds.add(checkedNode.id);
// 如果选中节点的上级菜单 ID 不等于 0（同样考虑到相关联的上级菜单也需要处理等情况），将上级菜单 ID 也添加到 Set 集合中
if (checkedNode.parentId!== 0) {
checkedMenuIds.add(checkedNode.parentId);
}
}
this.$confirm('是否分配菜单？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
let params = new URLSearchParams();
params.append("roleId",this.roleId);
params.append("menuIds",Array.from(checkedMenuIds));
allocMenu(params).then(response => {
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
this.$router.back();
})
})
},
handleClear() {
this.$refs.tree.setCheckedKeys([]);
}
// 弹出确认框，询问是否分配菜单，提供确定和取消按钮供用户选择
this.$confirm('是否分配菜单？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 创建 URLSearchParams 对象，用于构建请求参数，通常用于向服务器传递数据
let params = new URLSearchParams();
// 将当前角色 ID 添加到请求参数中
params.append("roleId", this.roleId);
// 将处理后的选中菜单 ID 数组（通过 Array.from 转换为普通数组）添加到请求参数中
params.append("menuIds", Array.from(checkedMenuIds));
// 调用分配菜单的 API 函数，传入构建好的请求参数，该函数返回一个 Promise，成功分配菜单后进行如下处理
allocMenu(params).then(response => {
// 显示分配成功的提示消息，消息类型为成功（success），停留 1000 毫秒
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
// 通过路由导航返回上一页，一般用于完成操作后回到之前的页面
this.$router.back();
})
})
},
handleClear() {
// 通过 el-tree 组件的引用，将已选中的节点对应的菜单 ID 数组设置为空数组，即清空所有已选中的菜单节点状态
this.$refs.tree.setCheckedKeys([]);
}
}
}
</script>
<style scoped>
/* 当前 CSS 部分为空，可在此处添加针对当前组件（allocMenu 组件）的样式规则，
例如设置 el-tree 组件的样式，像节点的字体、颜色、间距等，以及按钮的样式，包括按钮的大小、颜色、边框等，
scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

400
src/views/ums/role/allocResource.vue
Unescape View File

@ -1,187 +1,303 @@
<template>
<!-- 使用 el-card 组件创建一个表单容器卡片，设置阴影效果为无 -->
<el-card class="form-container" shadow="never">
<!-- 使用 v-for 指令循环遍历 allResourceCate 数组中的每个元素（cate），同时传递索引（index） -->
<!-- 根据索引判断是否添加 'top-line' 类名（第一个元素添加，用于样式区分，可能是添加顶部边框之类的效果），并设置了唯一的 key 值 -->
<div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
<!-- el-row 组件，添加了 'table-layout' 类名用于样式布局，设置了背景颜色 -->
<el-row class="table-layout" style="background: #F2F6FC;">
<!-- el-checkbox 复选框组件，双向绑定 cate 对象的 checked 属性，通过调用 isIndeterminate 方法设置不确定状态，绑定 change 事件到 handleCheckAllChange 方法 -->
<!-- 复选框显示的文本为 cate 对象的 name 属性值 -->
<el-checkbox v-model="cate.checked"
:indeterminate="isIndeterminate(cate.id)"
@change="handleCheckAllChange(cate)">
{{cate.name}}
</el-checkbox>
</el-row>
<!-- 另一个 el-row 组件，同样添加了 'table-layout' 类名用于样式布局 -->
<el-row class="table-layout">
<!-- 使用 v-for 指令循环遍历当前分类（cate）下的资源列表（通过 getResourceByCate 方法获取），每个资源对应一个 el-checkbox 组件 -->
<!-- 设置了 el-col 组件的占比为 8，给每个复选框添加了上下内边距为 4px 的样式 -->
<el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
<!-- el-checkbox 复选框组件，双向绑定 resource 对象的 checked 属性，绑定 change 事件到 handleCheckChange 方法 -->
<!-- 复选框显示的文本为 resource 对象的 name 属性值 -->
<el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
{{resource.name}}
</el-checkbox>
</el-col>
</el-row>
</div>
<!-- 包含两个按钮的 div 容器，设置了顶部外边距为 20px，并使其内容居中对齐 -->
<div style="margin-top: 20px" align="center">
<!-- 保存按钮，类型为主要（primary），点击时调用 handleSave 方法 -->
<el-button type="primary" @click="handleSave()">保存</el-button>
<!-- 清空按钮，点击时调用 handleClear 方法 -->
<el-button @click="handleClear()">清空</el-button>
</div>
</el-card>
</template>
<script>
import {fetchAllResourceList} from '@/api/resource';
import {listAllCate} from '@/api/resourceCategory';
import {allocResource,listResourceByRole} from '@/api/role';
// 从 @/api/resource 模块中导入获取所有资源列表数据的 API 函数
import {fetchAllResourceList} from '@/api/resource';
// 从 @/api/resourceCategory 模块中导入获取所有资源分类列表数据的 API 函数
import {listAllCate} from '@/api/resourceCategory';
// 从 @/api/role 模块中导入分配资源以及根据角色获取已分配资源列表的 API 函数
import {allocResource, listResourceByRole} from '@/api/role';
export default {
name: "allocResource",
data() {
return {
roleId: null,
allResource: null,
allResourceCate: null
};
},
created() {
this.roleId = this.$route.query.roleId;
this.getAllResourceCateList();
},
methods: {
getAllResourceList() {
fetchAllResourceList().then(response => {
this.allResource = response.data;
for (let i = 0; i < this.allResource.length; i++) {
this.allResource[i].checked = false;
}
this.getResourceByRole(this.roleId);
});
},
getAllResourceCateList() {
listAllCate().then(response => {
this.allResourceCate = response.data;
for (let i = 0; i < this.allResourceCate.length; i++) {
this.allResourceCate[i].checked = false;
}
this.getAllResourceList();
});
},
getResourceByCate(categoryId) {
let cateResource = [];
if (this.allResource == null) return null;
export default {
name: "allocResource",
data() {
return {
// 存储当前操作的角色 ID，初始值为 null，后续从路由参数中获取赋值
roleId: null,
// 用于存储所有资源数据，初始值为 null，后续通过 API 获取并赋值
allResource: null,
// 用于存储所有资源分类数据，初始值为 null，后续通过 API 获取并赋值
allResourceCate: null
};
},
created() {
// 从路由参数中获取角色 ID，并赋值给 roleId 属性，用于后续相关操作的参数传递等
this.roleId = this.$route.query.roleId;
// 调用获取所有资源分类列表数据的方法，用于初始化相关数据
this.getAllResourceCateList();
},
methods: {
// 方法用于获取所有资源列表数据
getAllResourceList() {
// 调用获取所有资源列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
fetchAllResourceList().then(response => {
// 将获取到的资源列表数据赋值给 allResource 属性，用于后续操作和页面展示
this.allResource = response.data;
// 循环遍历所有资源数据，将每个资源对象的 checked 属性初始化为 false，表示初始未选中状态
for (let i = 0; i < this.allResource.length; i++) {
let resource = this.allResource[i];
if (resource.categoryId === categoryId) {
cateResource.push(resource);
}
}
return cateResource;
},
getResourceByRole(roleId){
listResourceByRole(roleId).then(response=>{
let allocResource = response.data;
this.allResource.forEach(item=>{
item.checked = this.getResourceChecked(item.id,allocResource);
});
this.allResourceCate.forEach(item=>{
item.checked = this.isAllChecked(item.id);
});
this.$forceUpdate();
});
},
getResourceChecked(resourceId,allocResource){
if(allocResource==null||allocResource.length===0) return false;
for(let i=0;i<allocResource.length;i++){
if(allocResource[i].id===resourceId){
return true;
}
}
return false;
},
isIndeterminate(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
let checkedCount = 0;
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
this.allResource[i].checked = false;
}
return !(checkedCount === 0 || checkedCount === cateResources.length);
},
isAllChecked(categoryId) {
let cateResources = this.getResourceByCate(categoryId);
if (cateResources == null) return false;
let checkedCount = 0;
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
// 调用根据角色获取已分配资源的方法，传入当前角色 ID，用于设置对应资源的选中状态等操作
this.getResourceByRole(this.roleId);
});
},
// 方法用于获取所有资源分类列表数据，并进一步获取资源列表数据
getAllResourceCateList() {
// 调用获取所有资源分类列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
listAllCate().then(response => {
// 将获取到的资源分类列表数据赋值给 allResourceCate 属性，用于后续操作和页面展示
this.allResourceCate = response.data;
// 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性初始化为 false，表示初始未选中状态
for (let i = 0; i < this.allResourceCate.length; i++) {
this.allResourceCate[i].checked = false;
}
if(checkedCount===0){
return false;
// 调用获取所有资源列表数据的方法，以进一步完善数据初始化流程
this.getAllResourceList();
});
},
// 方法根据给定的资源分类 ID，从所有资源列表中筛选出属于该分类的资源列表并返回
getResourceByCate(categoryId) {
// 用于存储属于指定分类的资源列表，初始为空数组
let cateResource = [];
// 判断所有资源数据是否为空，如果为空则直接返回 null
if (this.allResource == null) return null;
// 循环遍历所有资源数据
for (let i = 0; i < this.allResource.length; i++) {
// 取出每一个资源对象
let resource = this.allResource[i];
// 如果资源的分类 ID 与传入的分类 ID 相等，将该资源对象添加到属于该分类的资源列表中
if (resource.categoryId === categoryId) {
cateResource.push(resource);
}
return checkedCount === cateResources.length;
},
handleSave() {
this.$confirm('是否分配资源？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let checkedResourceIds = new Set();
if (this.allResource != null && this.allResource.length > 0) {
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
}
});
}
let params = new URLSearchParams();
params.append("roleId", this.roleId);
params.append("resourceIds", Array.from(checkedResourceIds));
allocResource(params).then(response => {
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
this.$router.back();
})
})
},
handleClear() {
this.allResourceCate.forEach(item => {
item.checked = false;
});
}
return cateResource;
},
// 方法根据角色 ID 获取该角色已分配的资源，并设置相关资源和资源分类的选中状态
getResourceByRole(roleId) {
// 调用根据角色获取已分配资源列表的 API 函数，传入角色 ID，该函数返回一个 Promise，成功获取数据后进行如下处理
listResourceByRole(roleId).then(response => {
// 获取到的已分配资源列表数据赋值给 allocResource 变量，方便后续操作
let allocResource = response.data;
// 循环遍历所有资源数据，调用 getResourceChecked 方法设置每个资源的选中状态
this.allResource.forEach(item => {
item.checked = false;
item.checked = this.getResourceChecked(item.id, allocResource);
});
// 循环遍历所有资源分类数据，调用 isAllChecked 方法设置每个资源分类的选中状态
this.allResourceCate.forEach(item => {
item.checked = this.isAllChecked(item.id);
});
// 强制更新组件，确保数据变化能及时在页面上反映出来（可能因为数据嵌套较深等情况需要手动触发更新）
this.$forceUpdate();
},
handleCheckAllChange(cate) {
let cateResources = this.getResourceByCate(cate.id);
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
});
},
// 方法判断给定资源 ID 的资源是否在已分配资源列表中，返回对应的布尔值（是否选中状态）
getResourceChecked(resourceId, allocResource) {
// 如果已分配资源列表为空，则直接返回 false，表示未选中
if (allocResource == null || allocResource.length === 0) return false;
// 循环遍历已分配资源列表
for (let i = 0; i < allocResource.length; i++) {
// 如果找到资源 ID 匹配的已分配资源，返回 true，表示该资源已选中
if (allocResource[i].id === resourceId) {
return true;
}
this.$forceUpdate();
},
handleCheckChange(resource) {
this.allResourceCate.forEach(item=>{
if(item.id===resource.categoryId){
item.checked = this.isAllChecked(resource.categoryId);
}
return false;
},
// 方法判断给定资源分类下的资源选中状态是否为不确定（部分选中），返回对应的布尔值
isIndeterminate(categoryId) {
// 获取给定资源分类下的资源列表
let cateResources = this.getResourceByCate(categoryId);
// 如果资源列表为空，返回 false，表示不是不确定状态
if (cateResources == null) return false;
// 用于统计已选中资源的数量，初始为 0
let checkedCount = 0;
// 循环遍历资源列表，统计已选中资源的数量
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
}
// 如果已选中资源数量既不是 0（全未选）也不是资源列表长度（全选），则返回 true，表示处于不确定状态
return!(checkedCount === 0 || checkedCount === cateResources.length);
},
// 方法判断给定资源分类下的资源是否全部选中，返回对应的布尔值
isAllChecked(categoryId) {
// 获取给定资源分类下的资源列表
let cateResources = this.getResourceByCate(categoryId);
// 如果资源列表为空，返回 false，表示未全部选中
if (cateResources == null) return false;
// 用于统计已选中资源的数量，初始为 0
let checkedCount = 0;
// 循环遍历资源列表，统计已选中资源的数量
for (let i = 0; i < cateResources.length; i++) {
if (cateResources[i].checked === true) {
checkedCount++;
}
}
// 如果已选中资源数量为 0，直接返回 false，表示未全部选中
if (checkedCount === 0) {
return false;
}
// 如果已选中资源数量等于资源列表长度，返回 true，表示全部选中
return checkedCount === cateResources.length;
},
// 方法用于处理保存资源分配的操作
handleSave() {
// 创建一个 Set 数据结构，用于存储选中资源的 ID，可自动去重
let checkedResourceIds = new Set();
// 判断所有资源数据不为空且有数据时，进行循环遍历
if (this.allResource!= null && this.allResource.length > 0) {
// 循环遍历所有资源数据，将选中资源（checked 属性为 true）的 ID 添加到 Set 集合中
this.allResource.forEach(item => {
if (item.checked) {
checkedResourceIds.add(item.id);
}
});
this.$forceUpdate();
}
// 创建 URLSearchParams 对象，用于构建请求参数，通常用于向服务器传递数据
let params = new URLSearchParams();
// 将当前角色 ID 添加到请求参数中
params.append("roleId", this.roleId);
// 将处理后的选中资源 ID 集合（通过 Array.from 转换为普通数组）添加到请求参数中
params.append("resourceIds", Array.from(checkedResourceIds));
// 调用分配资源的 API 函数，传入构建好的请求参数，该函数返回一个 Promise，成功分配资源后进行如下处理
allocResource(params).then(response => {
// 显示分配成功的提示消息，消息类型为成功（success），停留 1000 毫秒
this.$message({
message: '分配成功',
type: 'success',
duration: 1000
});
// 通过路由导航返回上一页，一般用于完成操作后回到之前的页面
this.$router.back();
})
},
// 方法用于清空所有资源和资源分类的选中状态
handleClear() {
// 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性设置为 false
this.allResourceCate.forEach(item => {
item.checked = false;
});
// 循环遍历所有资源数据，将每个资源对象的 checked 属性设置为 false
this.allResource.forEach(item => {
item.checked = false;
});
// 强制更新组件，确保页面上的显示状态能及时更新为未选中状态
this.$forceUpdate();
},
// 方法用于处理资源分类复选框全选/全不选状态改变的操作
handleCheckAllChange(cate) {
// 获取当前资源分类下的资源列表
let cateResources = this.getResourceByCate(cate.id);
// 循环遍历资源列表，将每个资源的选中状态设置为与资源分类复选框的选中状态一致
for (let i = 0; i < cateResources.length; i++) {
cateResources[i].checked = cate.checked;
}
// 强制更新组件，确保页面上资源的选中状态能及时更新
this.$forceUpdate();
},
// 方法用于处理单个资源复选框选中状态改变的操作
handleCheckChange(resource) {
// 循环遍历所有资源分类数据，找到与当前资源所属分类相同的资源分类对象
this.allResourceCate.forEach(item => {
if (item.id === resource.categoryId) {
// 根据该资源分类下的所有资源是否全部选中，更新资源分类复选框的选中状态
item.checked = this.isAllChecked(resource.categoryId);
}
});
// 强制更新组件，确保页面上资源分类复选框的选中状态能及时更新
this.$forceUpdate();
}
}
}
</script>
<style scoped>
.table-layout {
padding: 20px;
border-left: 1px solid #DCDFE6;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px，使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式，与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式，与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
.top-line {
border-top: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style><style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px，使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式，与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式，与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style><style scoped>
/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
.table-layout {
/* 设置内边距为 20px，使内部元素有合适的间距 */
padding: 20px;
/* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
border-left: 1px solid #DCDFE6;
/* 设置右边框样式，与左边框相同 */
border-right: 1px solid #DCDFE6;
/* 设置下边框样式，与左右边框相同 */
border-bottom: 1px solid #DCDFE6;
}
/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
.top-line {
border-top: 1px solid #DCDFE6;
}
</style>

362
src/views/ums/role/index.vue
Unescape View File

@ -1,9 +1,14 @@
<template> 
<template>
<!-- 整体的应用容器 div，用于包裹页面内的各个功能模块 -->
<div class="app-container">
<!-- 筛选搜索区域的卡片容器，设置了阴影效果为无 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索图标元素，使用了 el-icon-search 图标 -->
<i class="el-icon-search"></i>
<!-- 筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 查询搜索按钮，设置了样式为右浮动、按钮类型为主要（primary），点击时调用 handleSearchList 方法，按钮大小为 small -->
<el-button
style="float:right"
type="primary"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 重置按钮，设置了样式为右浮动且距离右侧 15px，点击时调用 handleResetSearch 方法，按钮大小为 small -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,38 +25,52 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 内联表单，绑定了 listQuery 数据对象，表单大小为 small，标签宽度为 140px，用于设置筛选条件 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 表单项目，标签为“输入搜索：”，内部的输入框双向绑定 listQuery.keyword，设置了类名、占位符以及可清空功能 -->
<el-form-item label="输入搜索：">
<el-input v-model="listQuery.keyword" class="input-width" placeholder="角色名称" clearable></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器，设置了阴影效果为无 -->
<el-card class="operate-container" shadow="never">
<!-- 图标元素，使用了 el-icon-tickets 图标 -->
<i class="el-icon-tickets"></i>
<!-- 数据列表的文字提示 -->
<span>数据列表</span>
<!-- 添加按钮，大小为 mini，添加了自定义类名 btn-add，点击时调用 handleAdd 方法，设置了左侧外边距为 20px -->
<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
</el-card>
<!-- 表格容器 div，用于放置展示角色数据的表格 -->
<div class="table-container">
<!-- el-table 组件，用于展示角色数据列表，设置了引用名、绑定的数据、表格宽度、加载状态绑定以及边框等属性 -->
<el-table ref="roleTable"
:data="list"
style="width: 100%;"
v-loading="listLoading" border>
<!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 表格列，标签为“角色名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性 -->
<el-table-column label="角色名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 表格列，标签为“描述”，内容居中对齐，通过插槽作用域展示对应行数据的 description 属性 -->
<el-table-column label="描述" align="center">
<template slot-scope="scope">{{scope.row.description}}</template>
</el-table-column>
<!-- 表格列，标签为“用户数”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 adminCount 属性 -->
<el-table-column label="用户数" width="100" align="center">
<template slot-scope="scope">{{scope.row.adminCount}}</template>
</el-table-column>
<!-- 表格列，标签为“添加时间”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用 formatDateTime 过滤器对时间进行格式化展示 -->
<el-table-column label="添加时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
</el-table-column>
<!-- 表格列，标签为“是否启用”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 status 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值 -->
<el-table-column label="是否启用" width="140" align="center">
<template slot-scope="scope">
<el-switch
@ -61,6 +81,7 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示多个操作按钮，包括分配菜单、分配资源、编辑和删除按钮，分别绑定了对应的点击事件 -->
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-row>
@ -74,21 +95,23 @@
</el-button>
</el-row>
<el-row>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
<el-button size="mini"
type="text"
@click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页容器 div，用于放置分页组件 -->
<div class="pagination-container">
<!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、当前页、每页数量、可选每页数量数组以及总记录数等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -100,22 +123,27 @@
:total="total">
</el-pagination>
</div>
<!-- el-dialog 对话框组件，根据 isEdit 变量动态设置标题为“编辑角色”或“添加角色”，绑定了显示状态，设置了宽度 -->
<el-dialog
:title="isEdit?'编辑角色':'添加角色'"
:visible.sync="dialogVisible"
width="40%">
<!-- 对话框内的表单，绑定了 role 数据对象，设置了表单引用、标签宽度和大小 -->
<el-form :model="role"
ref="roleForm"
label-width="150px" size="small">
<!-- 表单项目，标签为“角色名称：”，输入框双向绑定 role.name，并设置了宽度 -->
<el-form-item label="角色名称：">
<el-input v-model="role.name" style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“描述：”，输入框双向绑定 role.description，设置了文本域类型和行数以及宽度 -->
<el-form-item label="描述：">
<el-input v-model="role.description"
type="textarea"
:rows="5"
style="width: 250px"></el-input>
</el-form-item>
<!-- 表单项目，标签为“是否启用：”，内部是一个单选按钮组，双向绑定 role.status，用于选择角色是否启用的状态 -->
<el-form-item label="是否启用：">
<el-radio-group v-model="role.status">
<el-radio :label="1">是</el-radio>
@ -123,6 +151,7 @@
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
@ -131,156 +160,199 @@
</div>
</template>
<script>
import {fetchList,createRole,updateRole,updateStatus,deleteRole} from '@/api/role';
import {formatDate} from '@/utils/date';
// 从'@/api/role'模块中导入多个函数，这些函数应该是用于与后端API交互，执行获取角色列表、创建角色、更新角色、更新角色状态、删除角色等操作
import {fetchList, createRole, updateRole, updateStatus, deleteRole} from '@/api/role';
// 从'@/utils/date'模块中导入formatDate函数，用于格式化日期相关操作
import {formatDate} from '@/utils/date';
// 定义默认的列表查询参数对象，包含页码、每页数量、搜索关键词等信息，初始页码为1，每页显示5条数据，关键词初始为null
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
// 定义默认的角色对象，包含角色的各个属性，如ID、名称、描述、管理员数量、状态等，初始ID和名称等都为null，管理员数量为0，状态默认为1
const defaultRole = {
id: null,
name: null,
description: null,
adminCount: 0,
status: 1
};
const defaultListQuery = {
pageNum: 1,
pageSize: 5,
keyword: null
};
const defaultRole = {
id: null,
name: null,
description: null,
adminCount: 0,
status: 1
};
export default {
name: 'roleList',
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
list: null,
total: null,
listLoading: false,
dialogVisible: false,
role: Object.assign({}, defaultRole),
isEdit: false
export default {
name: 'roleList',
data() {
return {
// 列表查询参数，通过Object.assign创建一个新对象，避免直接修改默认值对象，初始值为defaultListQuery的副本
listQuery: Object.assign({}, defaultListQuery),
// 用于存储获取到的角色列表数据，初始为null，后续通过API获取数据后赋值
list: null,
// 用于存储角色列表的总数量，初始为null，同样通过API获取后赋值
total: null,
// 表示列表数据是否正在加载的布尔值，true表示正在加载，false表示加载完成，初始为false
listLoading: false,
// 控制对话框是否可见的布尔值，true表示对话框显示，false表示隐藏，初始为false
dialogVisible: false,
// 当前操作的角色对象，初始为defaultRole的副本，在添加、编辑等操作时会重新赋值
role: Object.assign({}, defaultRole),
// 表示当前操作是否为编辑操作的布尔值，true为编辑，false为添加，初始为false
isEdit: false
}
},
// 在组件创建时调用，触发获取角色列表数据的操作
created() {
this.getList();
},
filters: {
// 日期时间格式化的过滤器函数，接收一个时间参数time
formatDateTime(time) {
// 如果传入的时间参数为null或者空字符串，则返回'N/A'表示不可用
if (time == null || time === '') {
return 'N/A';
}
// 将传入的时间参数转换为JavaScript的Date对象
let date = new Date(time);
// 调用formatDate函数按照指定格式（'yyyy-MM-dd hh:mm:ss'）对日期进行格式化并返回
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
},
methods: {
// 重置搜索条件的方法，将列表查询参数恢复为默认值，通过创建新对象避免直接修改默认对象
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
created() {
// 处理搜索列表的方法，先将页码重置为1，然后调用获取列表数据的方法来重新获取符合搜索条件的数据
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
filters: {
formatDateTime(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
}
// 处理每页显示数量改变的方法，先将页码重置为1，然后更新列表查询参数中的每页数量为传入的新值val，再调用获取列表数据的方法
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
methods: {
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.role = Object.assign({},defaultRole);
},
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
// 处理当前页码改变的方法，更新列表查询参数中的页码为传入的新值val，然后调用获取列表数据的方法
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
// 处理添加角色操作的方法，将对话框设置为可见，标记当前操作为添加（非编辑），并将当前操作的角色对象重置为默认值副本
handleAdd() {
this.dialogVisible = true;
this.isEdit = false;
this.role = Object.assign({}, defaultRole);
},
// 处理角色状态改变的方法，弹出确认框询问是否要修改状态
handleStatusChange(index, row) {
this.$confirm('是否要修改该状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户确认修改，调用updateStatus函数，传入角色ID和包含新状态的对象，成功后显示成功提示信息
updateStatus(row.id, {status: row.status}).then(response => {
this.$message({
type: 'success',
message: '修改成功!'
});
}).catch(() => {
});
}).catch(() => {
// 如果用户取消修改，显示取消修改的提示信息，并重新获取列表数据以刷新界面显示
this.$message({
type: 'info',
message: '取消修改'
});
this.getList();
});
},
// 处理删除角色的方法，弹出确认框询问是否要删除角色
handleDelete(index, row) {
this.$confirm('是否要删除该角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = [];
// 将待删除角色的ID添加到数组中
ids.push(row.id);
let params = new URLSearchParams();
// 将角色ID数组添加到URLSearchParams对象中，用于传递给删除角色的API
params.append("ids", ids);
// 调用deleteRole函数传递参数，成功删除后显示成功提示信息，并重新获取列表数据更新界面
deleteRole(params).then(response => {
this.$message({
type: 'info',
message: '取消修改'
type: 'success',
message: '删除成功!'
});
this.getList();
});
},
handleDelete(index, row) {
this.$confirm('是否要删除该角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = [];
ids.push(row.id);
let params=new URLSearchParams();
params.append("ids",ids);
deleteRole(params).then(response => {
});
},
// 处理更新角色操作的方法，将对话框设置为可见，标记当前操作为编辑操作，并将当前操作的角色对象设置为传入的要编辑的角色数据副本
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.role = Object.assign({}, row);
},
// 处理对话框确认操作的方法，弹出确认框询问是否确认当前操作（添加或编辑）
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果是编辑操作，调用updateRole函数传入角色ID和角色对象，成功后显示成功提示信息，关闭对话框并重新获取列表数据更新界面
if (this.isEdit) {
updateRole(this.role.id, this.role).then(response => {
this.$message({
type: 'success',
message: '删除成功!'
message: '修改成功！',
type: 'success'
});
this.dialogVisible = false;
this.getList();
});
});
},
handleUpdate(index, row) {
this.dialogVisible = true;
this.isEdit = true;
this.role = Object.assign({},row);
},
handleDialogConfirm() {
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.isEdit) {
updateRole(this.role.id,this.role).then(response => {
this.$message({
message: '修改成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
} else {
createRole(this.role).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible =false;
this.getList();
})
}
})
},
handleSelectMenu(index,row){
this.$router.push({path:'/ums/allocMenu',query:{roleId:row.id}})
},
handleSelectResource(index,row){
this.$router.push({path:'/ums/allocResource',query:{roleId:row.id}})
},
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
})
} else {
// 如果是添加操作，调用createRole函数传入角色对象，成功后显示成功提示信息，关闭对话框并重新获取列表数据更新界面
createRole(this.role).then(response => {
this.$message({
message: '添加成功！',
type: 'success'
});
this.dialogVisible = false;
this.getList();
})
}
})
},
// 处理选择菜单操作的方法，通过路由导航到'/ums/allocMenu'路径，并传递角色ID作为查询参数，应该是用于分配菜单相关功能
handleSelectMenu(index, row) {
this.$router.push({path: '/ums/allocMenu', query: {roleId: row.id}})
},
// 处理选择资源操作的方法，通过路由导航到'/ums/allocResource'路径，并传递角色ID作为查询参数，应该是用于分配资源相关功能
handleSelectResource(index, row) {
this.$router.push({path: '/ums/allocResource', query: {roleId: row.id}})
},
// 获取角色列表数据的方法，先将列表加载状态设置为正在加载，然后调用fetchList函数传入列表查询参数，获取到数据后更新列表数据、总数量，并将加载状态设置为完成
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
});
}
}
}
</script>
<style></style>
<style>
/* 当前 CSS 部分为空，这里可以添加针对当前组件（updateMenu 组件）的样式规则，比如设置整体布局样式、字体样式、颜色等，
来对组件的外观进行定制化显示 */
/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceList 组件）的样式规则，例如：
- 设置表格的样式，如表头、单元格的字体、颜色、边框样式等；
- 对筛选区域、操作按钮、分页组件等元素的布局、外观进行调整，比如按钮的颜色、大小、间距等；
- 定制对话框的样式，像对话框的背景色、边框、按钮在对话框内的排版等。
通过添加这些样式规则，可以让页面的显示更加符合设计要求和美观性。 */
</style>

Write Preview
Loading…
Cancel
Save