hot

src/views/sms/hot/index.vue

@@ -1,9 +1,14 @@
-<template> 
+<template>
+  <!-- 整个应用的容器 -->
   <div class="app-container">
+    <!-- 筛选搜索的卡片容器，设置了阴影效果为无 -->
     <el-card class="filter-container" shadow="never">
       <div>
+        <!-- 搜索图标 -->
         <i class="el-icon-search"></i>
+        <!-- 显示“筛选搜索”文字 -->
         <span>筛选搜索</span>
+        <!-- 查询搜索按钮，设置了样式为右浮动、类型为主要按钮、点击时触发handleSearchList方法、按钮大小为小 -->
         <el-button
           style="float:right"
           type="primary"
@@ -11,6 +16,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 重置按钮，设置了样式为右浮动、右外边距为15px、点击时触发handleResetSearch方法、按钮大小为小 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -19,12 +25,18 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
+        <!-- 内联表单，绑定了listQuery数据模型，表单大小为小，标签宽度为140px -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <!-- 表单项目，标签为“商品名称：” -->
           <el-form-item label="商品名称：">
+            <!-- 输入框，双向绑定listQuery.productName数据，设置了类名和占位提示文字 -->
             <el-input v-model="listQuery.productName" class="input-width" placeholder="商品名称"></el-input>
           </el-form-item>
+          <!-- 表单项目，标签为“推荐状态：” -->
           <el-form-item label="推荐状态：">
+            <!-- 下拉选择框，双向绑定listQuery.recommendStatus数据，设置了占位提示文字和可清除，添加了类名 -->
             <el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
+              <!-- 循环生成下拉选项，根据recommendOptions数据中的每个item来生成对应的选项 -->
               <el-option v-for="item in recommendOptions"
                          :key="item.value"
                          :label="item.label"
@@ -35,24 +47,34 @@
         </el-form>
       </div>
     </el-card>
+    <!-- 操作相关的卡片容器，设置了阴影效果为无 -->
     <el-card class="operate-container" shadow="never">
+      <!-- 图标 -->
       <i class="el-icon-tickets"></i>
-      <span>数据列表</span>
+      <!-- 显示“数据列表”文字 -->
+      <i>数据列表</i>
+      <!-- 选择商品按钮，设置了按钮大小为迷你、点击时触发handleSelectProduct方法 -->
       <el-button size="mini" class="btn-add" @click="handleSelectProduct()">选择商品</el-button>
     </el-card>
+    <!-- 表格容器 -->
     <div class="table-container">
+      <!-- el-table组件，绑定了list数据作为表格数据源，设置了宽度为100%、选择变化时触发handleSelectionChange方法、加载状态绑定listLoading、显示边框 -->
       <el-table ref="newProductTable"
                 :data="list"
                 style="width: 100%;"
                 @selection-change="handleSelectionChange"
                 v-loading="listLoading" border>
+        <!-- 表格列，类型为选择列，宽度为60px，内容居中对齐 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 表格列，标签为“编号”，宽度为120px，内容居中对齐，通过插槽作用域显示对应行的id数据 -->
         <el-table-column label="编号" width="120" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“商品名称”，内容居中对齐，通过插槽作用域显示对应行的productName数据 -->
         <el-table-column label="商品名称" align="center">
           <template slot-scope="scope">{{scope.row.productName}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“是否推荐”，宽度为200px，内容居中对齐，包含一个开关组件，开关状态改变时触发handleRecommendStatusStatusChange方法，设置了开关的激活值、未激活值以及双向绑定对应行的recommendStatus数据 -->
         <el-table-column label="是否推荐" width="200" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -63,12 +85,15 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- 表格列，标签为“排序”，宽度为160px，内容居中对齐，通过插槽作用域显示对应行的sort数据 -->
         <el-table-column label="排序" width="160" align="center">
           <template slot-scope="scope">{{scope.row.sort}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“状态”，宽度为160px，内容居中对齐，通过管道（formatRecommendStatus）对对应行的recommendStatus数据进行格式化后显示 -->
         <el-table-column label="状态" width="160" align="center">
           <template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“操作”，宽度为180px，内容居中对齐，包含两个按钮，分别点击时触发handleEditSort和handleDelete方法 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
             <el-button size="mini"
@@ -83,10 +108,13 @@
         </el-table-column>
       </el-table>
     </div>
+    <!-- 批量操作的容器 -->
     <div class="batch-operate-container">
+      <!-- 下拉选择框，设置了大小为小，双向绑定operateType数据，设置了占位提示文字 -->
       <el-select
         size="small"
         v-model="operateType" placeholder="批量操作">
+        <!-- 循环生成下拉选项，根据operates数据中的每个item来生成对应的选项 -->
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -94,6 +122,7 @@
           :value="item.value">
         </el-option>
       </el-select>
+      <!-- 确定按钮，设置了左外边距为20px、样式类、点击时触发handleBatchOperate方法、类型为主要按钮、大小为小 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -103,7 +132,9 @@
         确定
       </el-button>
     </div>
+    <!-- 分页容器 -->
     <div class="pagination-container">
+      <!-- el-pagination分页组件，设置了背景色、页面尺寸改变时触发handleSizeChange方法、当前页改变时触发handleCurrentChange方法、布局样式、绑定了当前页、每页显示数量、可选的每页显示数量列表以及总记录数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -115,27 +146,35 @@
         :total="total">
       </el-pagination>
     </div>
+    <!-- 选择商品的对话框，绑定了显示状态，设置了标题和宽度 -->
     <el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
+      <!-- 输入框，双向绑定dialogData.listQuery.keyword数据，设置了宽度、下外边距、大小和占位提示文字，包含一个搜索按钮，点击时触发handleSelectSearch方法 -->
       <el-input v-model="dialogData.listQuery.keyword"
                 style="width: 250px;margin-bottom: 20px"
                 size="small"
                 placeholder="商品名称搜索">
         <el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
       </el-input>
+      <!-- 表格，绑定了dialogData.list数据作为数据源，选择变化时触发handleDialogSelectionChange方法，显示边框 -->
       <el-table :data="dialogData.list"
                 @selection-change="handleDialogSelectionChange" border>
+        <!-- 表格列，类型为选择列，宽度为60px，内容居中对齐 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 表格列，标签为“商品名称”，内容居中对齐，通过插槽作用域显示对应行的name数据 -->
         <el-table-column label="商品名称" align="center">
           <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“货号”，宽度为160px，内容居中对齐，通过插槽作用域显示对应行的productSn数据，格式化为“NO. + 货号” -->
         <el-table-column label="货号" width="160" align="center">
           <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“价格”，宽度为120px，内容居中对齐，通过插槽作用域显示对应行的price数据，格式化为“￥ + 价格” -->
         <el-table-column label="价格" width="120" align="center">
           <template slot-scope="scope">￥{{scope.row.price}}</template>
         </el-table-column>
       </el-table>
       <div class="pagination-container">
+        <!-- el-pagination分页组件，设置了背景色、页面尺寸改变时触发handleDialogSizeChange方法、当前页改变时触发handleDialogCurrentChange方法、布局样式、绑定了当前页、每页显示数量、可选的每页显示数量列表以及总记录数等属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -149,36 +188,48 @@
       </div>
       <div style="clear: both;"></div>
       <div slot="footer">
+        <!-- 取消按钮，设置了大小为小，点击时隐藏对话框 -->
         <el-button  size="small" @click="selectDialogVisible = false">取 消</el-button>
+        <!-- 确定按钮，设置了大小为小、类型为主要按钮，点击时触发handleSelectDialogConfirm方法 -->
         <el-button  size="small" type="primary" @click="handleSelectDialogConfirm()">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 设置排序的对话框，绑定了显示状态，设置了标题和宽度 -->
     <el-dialog title="设置排序"
                :visible.sync="sortDialogVisible"
                width="40%">
+      <!-- 表单，绑定了sortDialogData数据模型，设置了标签宽度 -->
       <el-form :model="sortDialogData"
                label-width="150px">
+        <!-- 表单项目，标签为“排序：” -->
         <el-form-item label="排序：">
+          <!-- 输入框，双向绑定sortDialogData.sort数据，设置了宽度 -->
           <el-input v-model="sortDialogData.sort" style="width: 200px"></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer">
+        <!-- 取消按钮，点击时隐藏对话框，设置了大小为小 -->
         <el-button @click="sortDialogVisible = false" size="small">取 消</el-button>
+        <!-- 确定按钮，点击时触发handleUpdateSort方法，设置了大小为小、类型为主要按钮 -->
         <el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
+// 从'@/api/hotProduct'模块中导入多个函数，这些函数可能用于获取热门产品列表、更新推荐状态、删除热门产品、创建热门产品、更新热门产品排序等操作
 import {fetchList, updateRecommendStatus, deleteHotProduct, createHotProduct, updateHotProductSort} from '@/api/hotProduct';
+// 从'@/api/product'模块中导入fetchList函数，并将其重命名为fetchProductList，可能用于获取产品列表相关操作
 import {fetchList as fetchProductList} from '@/api/product';
 
+// 定义默认的列表查询参数对象，包含当前页码、每页数量、商品名称、推荐状态等初始值
 const defaultListQuery = {
   pageNum: 1,
   pageSize: 5,
   productName: null,
   recommendStatus: null
 };
+// 定义默认的推荐状态选项数组，每个选项包含显示的标签和对应的值，用于下拉选择等场景
 const defaultRecommendOptions = [
   {
     label: '未推荐',
@@ -189,16 +240,26 @@
     value: 1
   }
 ];
+
+// 导出一个Vue组件配置对象，定义了组件的相关属性、方法等
 export default {
+  // 组件的名称
   name: 'hotProductList',
   data() {
     return {
+      // 列表查询参数，初始化为defaultListQuery的副本，用于存储当前的查询条件
       listQuery: Object.assign({}, defaultListQuery),
+      // 推荐状态选项，初始化为defaultRecommendOptions的副本，用于下拉选择框展示可选的推荐状态
       recommendOptions: Object.assign({}, defaultRecommendOptions),
+      // 存储列表数据，初始为null，后续会赋值为实际获取到的列表内容
       list: null,
+      // 总记录数，初始为null，用于分页相关功能显示总共有多少条记录
       total: null,
+      // 列表加载状态，用于显示加载动画等提示，true表示正在加载，false表示加载完成
       listLoading: false,
+      // 存储多选的记录，用于批量操作等场景，存放选中的行数据
       multipleSelection: [],
+      // 定义批量操作的选项数组，每个选项包含显示的标签和对应的值，用于下拉选择批量要执行的操作类型
       operates: [
         {
           label: "设为推荐",
@@ -213,8 +274,11 @@
           value: 2
         }
       ],
+      // 存储当前选择的批量操作类型，初始为null，根据用户在下拉框的选择进行赋值
       operateType: null,
+      // 选择商品对话框的显示状态，false表示隐藏，true表示显示，用于控制对话框的显示隐藏
       selectDialogVisible: false,
+      // 选择商品对话框相关的数据对象，包含列表数据、总记录数、多选记录以及列表查询参数等
       dialogData: {
         list: null,
         total: null,
@@ -225,13 +289,17 @@
           pageSize: 5
         }
       },
+      // 设置排序对话框的显示状态，控制其显示隐藏
       sortDialogVisible: false,
+      // 设置排序对话框相关的数据对象，包含排序值和对应的记录id等，用于设置排序操作时的数据传递
       sortDialogData: {sort: 0, id: null}
     }
   },
+  // 在组件创建时调用的生命周期钩子函数，这里调用了获取列表数据的方法
   created() {
     this.getList();
   },
+  // 定义过滤器，用于格式化推荐状态的值，将数字状态转换为对应的文字描述（例如1转换为“推荐中”）
   filters: {
     formatRecommendStatus(status) {
       if (status === 1) {
@@ -242,31 +310,39 @@
     }
   },
   methods: {
+    // 处理重置搜索的方法，将列表查询参数重置为默认值
     handleResetSearch() {
       this.listQuery = Object.assign({}, defaultListQuery);
     },
+    // 处理查询搜索的方法，先将当前页码设置为1，然后调用获取列表数据的方法来重新获取符合条件的数据
     handleSearchList() {
       this.listQuery.pageNum = 1;
       this.getList();
     },
+    // 处理表格行选择变化的方法，将多选的记录更新为当前选择的行数据
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
+    // 处理每页显示数量变化的方法，先将当前页码重置为1，然后更新每页显示数量，并调用获取列表数据的方法重新获取数据
     handleSizeChange(val) {
       this.listQuery.pageNum = 1;
       this.listQuery.pageSize = val;
       this.getList();
     },
+    // 处理当前页码变化的方法，更新当前页码后调用获取列表数据的方法获取对应页码的数据
     handleCurrentChange(val) {
       this.listQuery.pageNum = val;
       this.getList();
     },
+    // 处理推荐状态开关变化的方法，调用更新推荐状态的方法，传入对应记录的id和新的推荐状态值来更新推荐状态
     handleRecommendStatusStatusChange(index, row) {
       this.updateRecommendStatusStatus(row.id, row.recommendStatus);
     },
+    // 处理删除操作的方法，调用删除产品的方法，传入要删除记录的id来执行删除操作
     handleDelete(index, row) {
       this.deleteProduct(row.id);
     },
+    // 处理批量操作的方法
     handleBatchOperate() {
       if (this.multipleSelection < 1) {
         this.$message({
@@ -276,7 +352,7 @@
         });
         return;
       }
-        let ids = [];
+      let ids = []; //执行相应的操作（设为推荐、取消推荐、删除等）
       for (let i = 0; i < this.multipleSelection.length; i++) {
         ids.push(this.multipleSelection[i].id);
       }
@@ -290,32 +366,38 @@
         //删除
         this.deleteProduct(ids);
       } else {
-          this.$message({
+        this.$message({ //首先判断是否有选中的记录，如果没有则提示用户选择记录；然后根据选择的批量操作类型
           message: '请选择批量操作类型',
           type: 'warning',
           duration: 1000
         });
       }
     },
+    // 处理选择商品的方法，将选择商品对话框设置为显示状态，并调用获取对话框列表数据的方法来加载商品数据
     handleSelectProduct() {
       this.selectDialogVisible = true;
       this.getDialogList();
     },
+    // 处理在选择商品对话框中搜索的方法，调用获取对话框列表数据的方法来根据输入的关键词重新加载商品数据
     handleSelectSearch() {
       this.getDialogList();
     },
+    // 处理选择商品对话框中每页显示数量变化的方法，先将对话框列表的当前页码重置为1，更新每页显示数量后调用获取对话框列表数据的方法重新获取数据
     handleDialogSizeChange(val) {
       this.dialogData.listQuery.pageNum = 1;
       this.dialogData.listQuery.pageSize = val;
       this.getDialogList();
     },
+    // 处理选择商品对话框中当前页码变化的方法，更新对话框列表的当前页码后调用获取对话框列表数据的方法获取对应页码的数据
     handleDialogCurrentChange(val) {
       this.dialogData.listQuery.pageNum = val;
       this.getDialogList();
     },
+    // 处理选择商品对话框中行选择变化的方法，将对话框中多选的记录更新为当前选择的行数据
     handleDialogSelectionChange(val) {
       this.dialogData.multipleSelection = val;
     },
+    // 处理选择商品对话框中确定按钮点击的方法，首先判断是否有选中的记录，如果没有则提示用户选择记录；然后将选中的商品数据整理成特定格式，弹出确认框
     handleSelectDialogConfirm() {
       if (this.dialogData.multipleSelection < 1) {
         this.$message({
@@ -336,7 +418,7 @@
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //用户确认后调用创建热门产品的方法来添加选中的商品，添加成功后进行相关的界面更新和提示操作
         createHotProduct(selectProducts).then(response => {
           this.selectDialogVisible = false;
           this.dialogData.multipleSelection = [];
@@ -348,17 +430,19 @@
         });
       });
     },
+    // 处理编辑排序的方法，将设置排序对话框设置为显示状态
     handleEditSort(index, row) {
       this.sortDialogVisible = true;
-        this.sortDialogData.sort=row.sort;
+      this.sortDialogData.sort = row.sort; //并将当前记录的排序值和id赋值给对话框相关的数据对象，用于在对话框中显示和后续更新操作
       this.sortDialogData.id = row.id;
     },
-      handleUpdateSort(){
+    // 处理更新排序的方法
+    handleUpdateSort() { //弹出确认框询问用户是否确认修改排序，用户确认后调用更新热门产品排序的方法，传入相关数据进行排序更新
       this.$confirm('是否要修改排序?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //更新成功后进行对话框隐藏、重新获取列表数据以及提示操作
         updateHotProductSort(this.sortDialogData).then(response => {
           this.sortDialogVisible = false;
           this.getList();
@@ -369,58 +453,62 @@
         });
       })
     },
+    // 获取列表数据的方法，先将列表加载状态设置为正在加载
     getList() {
       this.listLoading = true;
-        fetchList(this.listQuery).then(response => {
+      fetchList(this.listQuery).then(response => { //然后调用fetchList函数传入列表查询参数获取数据
         this.listLoading = false;
-          this.list = response.data.list;
+        this.list = response.data.list; //获取成功后更新列表数据、总记录数，并将列表加载状态设置为加载完成
         this.total = response.data.total;
       })
     },
+    // 更新推荐状态的方法
     updateRecommendStatusStatus(ids, status) {
-        this.$confirm('是否要修改推荐状态?', '提示', {
+      this.$confirm('是否要修改推荐状态?', '提示', { //先弹出确认框询问用户是否确认修改推荐状态
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-          let params=new URLSearchParams();
+        let params = new URLSearchParams(); //用户确认后将传入的记录id和新的推荐状态值整理成URLSearchParams格式
         params.append("ids", ids);
         params.append("recommendStatus", status);
-          updateRecommendStatus(params).then(response=>{
+        updateRecommendStatus(params).then(response => { //调用updateRecommendStatus函数进行推荐状态更新
           this.getList();
           this.$message({
             type: 'success',
-              message: '修改成功!'
+            message: '修改成功!' //更新成功后重新获取列表数据并提示操作成功；
           });
         });
       }).catch(() => {
         this.$message({
           type: 'success',
-            message: '已取消操作!'
+          message: '已取消操作!' //如果用户取消操作，也会重新获取列表数据并提示已取消操作
         });
         this.getList();
       });
     },
+    // 删除产品的方法
     deleteProduct(ids) {
-        this.$confirm('是否要删除该推荐?', '提示', {
+      this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框询问用户是否确认删除
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-          let params=new URLSearchParams();
+        let params = new URLSearchParams(); //用户确认后将传入的记录id整理成URLSearchParams格式
         params.append("ids", ids);
-          deleteHotProduct(params).then(response=>{
+        deleteHotProduct(params).then(response => { //调用deleteHotProduct函数进行产品删除操作
           this.getList();
           this.$message({
             type: 'success',
-              message: '删除成功!'
+            message: '删除成功!' //删除成功后重新获取列表数据并提示删除成功
           });
         });
       })
     },
+    // 获取选择商品对话框列表数据的方法
     getDialogList() {
-        fetchProductList(this.dialogData.listQuery).then(response=>{
+      fetchProductList(this.dialogData.listQuery).then(response => { //调用fetchProductList函数传入对话框的列表查询参数获取商品数据
-          this.dialogData.list=response.data.list;
+        this.dialogData.list = response.data.list; //获取成功后更新对话框列表数据和总记录数
         this.dialogData.total = response.data.total;
       })
     }