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,99 +75,128 @@
   </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 组件）的样式规则，
+例如设置表格样式、对话框样式、按钮样式以及整体布局相关的样式等，来美化组件的外观显示效果 */
 </style>
-
-