From 0fd8d33c0ea533bffe9e728e6c35eee6cfa51c77 Mon Sep 17 00:00:00 2001
From: cwy <2952243518@qq.com>
Date: Sun, 15 Dec 2024 20:49:28 +0800
Subject: [PATCH] 117

---
 src/views/ums/resource/index.vue | 355 +++++++++++++++++++------------
 1 file changed, 223 insertions(+), 132 deletions(-)

diff --git a/src/views/ums/resource/index.vue b/src/views/ums/resource/index.vue
index c361be6..c274d71 100644
--- a/src/views/ums/resource/index.vue
+++ b/src/views/ums/resource/index.vue
@@ -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>