116

src/views/ums/resource/categoryList.vue

@@ -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,52 +75,71 @@
   </div>
 </template>
 <script>
-  import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
+// 从 @/api/resourceCategory 模块中导入多个 API 函数，分别用于获取所有分类列表、创建资源分类、更新资源分类以及删除资源分类等操作
-  import {formatDate} from '@/utils/date';
+import {listAllCate,createResourceCategory,updateResourceCategory,deleteResourceCategory} from '@/api/resourceCategory';
-  const defaultResourceCategory={
+// 从 @/utils/date 模块中导入日期格式化函数，用于后续对时间数据的格式化处理
+import {formatDate} from '@/utils/date';
+
+// 默认的资源分类对象，包含名称和排序两个属性的初始值，名称初始为 null，排序初始为 0
+const defaultResourceCategory={
   name:null,
   sort:0
-  };
+};
-  export default {
+
+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:{
+  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);
     },
     handleUpdate(index,row){
+      // 显示添加/编辑分类的对话框，设置为编辑状态（isEdit 设为 true），将 resourceCategory 对象赋值为当前要编辑的行数据
       this.dialogVisible = true;
       this.isEdit = true;
       this.resourceCategory = Object.assign({},row);
     },
     handleDelete(index,row){
+      // 弹出确认框，询问是否要删除该分类，提供确定和取消按钮供用户选择
       this.$confirm('是否要删除该分类?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        // 如果用户点击确定，调用删除资源分类的 API 函数，传入要删除分类的 id
+        // 成功后显示删除成功的提示消息，并重新调用获取资源分类列表数据的方法，以更新页面展示的列表
         deleteResourceCategory(row.id).then(response => {
           this.$message({
             type: 'success',
@@ -114,12 +150,16 @@
       });
     },
     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({
               message: '修改成功！',
@@ -129,6 +169,8 @@
             this.getList();
           })
         } else {
+          // 如果是添加状态，调用创建资源分类的 API 函数，传入当前的 resourceCategory 对象数据
+          // 成功后显示添加成功的提示消息，关闭对话框，并重新调用获取资源分类列表数据的方法，以更新页面展示的列表
           createResourceCategory(this.resourceCategory).then(response => {
             this.$message({
               message: '添加成功！',
@@ -141,16 +183,20 @@
       })
     },
     getList() {
+      // 设置列表加载状态为正在加载，用于显示加载动画等提示信息，表示正在获取资源分类列表数据
       this.listLoading = true;
+      // 调用获取所有资源分类列表的 API 函数，传入空对象作为参数（可能根据实际 API 需求传入查询条件等）
       listAllCate({}).then(response => {
+        // 获取数据成功后，将列表加载状态设置为加载完成，即关闭加载动画等提示信息
         this.listLoading = false;
+        // 将获取到的资源分类列表数据赋值给 list 属性，用于在页面的表格中展示
         this.list = response.data;
       });
     }
   }
-  }
+}
 </script>
 <style>
+/* 当前 CSS 部分为空，可在此处添加针对当前组件（resourceCategoryList 组件）的样式规则，
+例如设置表格样式、对话框样式、按钮样式以及整体布局相关的样式等，来美化组件的外观显示效果 */
 </style>
-
-