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

117

Browse Source
pull/8/head
cwy 7 months ago
parent bf8b710171
commit 0fd8d33c0e
1 changed files with 223 additions and 132 deletions
Show Stats Download Patch File Download Diff File

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>

Write Preview
Loading…
Cancel
Save