|
|
|
|
@ -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>
|
|
|
|
|
|
py4fbma29
cwy