From 6cacfd11d10965bac6f57d19bebb5e0a99bb2d15 Mon Sep 17 00:00:00 2001
From: Liuyujie <2268872166@qq.com>
Date: Tue, 17 Dec 2024 12:23:25 +0800
Subject: [PATCH] brand

---
 src/views/sms/brand/index.vue | 63 ++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/views/sms/brand/index.vue b/src/views/sms/brand/index.vue
index a06a3b2..0c14a25 100644
--- a/src/views/sms/brand/index.vue
+++ b/src/views/sms/brand/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>
+        <!-- 用于触发查询搜索的按钮，绑定对应点击事件，设置样式等属性 -->
         <el-button
           style="float:right"
           type="primary"
@@ -11,6 +16,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 用于重置筛选条件的按钮，绑定对应点击事件，设置样式等属性 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -19,12 +25,18 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
+        <!-- 行内表单，绑定数据模型，设置尺寸、标签宽度等属性 -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <!-- 品牌名称输入框的表单项 -->
           <el-form-item label="品牌名称：">
+            <!-- 输入框，双向绑定品牌名称数据，设置类名和占位提示 -->
             <el-input v-model="listQuery.brandName" class="input-width" placeholder="品牌名称"></el-input>
           </el-form-item>
+          <!-- 推荐状态选择框的表单项 -->
           <el-form-item label="推荐状态：">
+            <!-- 下拉选择框，双向绑定推荐状态数据，设置占位提示等属性 -->
             <el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
+              <!-- 循环生成下拉选项 -->
               <el-option v-for="item in recommendOptions"
                          :key="item.value"
                          :label="item.label"
@@ -35,40 +47,51 @@
         </el-form>
       </div>
     </el-card>
+    <!-- 操作区域的卡片容器，无阴影效果 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
+      <!-- 用于触发选择品牌操作的按钮，绑定点击事件 -->
       <el-button size="mini" class="btn-add" @click="handleSelectBrand()">选择品牌</el-button>
     </el-card>
+    <!-- 放置数据表格的容器 -->
     <div class="table-container">
+      <!-- 数据表格组件，绑定数据、设置宽度等属性，还有选择改变等相关事件 -->
       <el-table ref="homeBrandTable"
                 :data="list"
                 style="width: 100%;"
                 @selection-change="handleSelectionChange"
                 v-loading="listLoading" border>
+        <!-- 显示选择框的表格列 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 显示编号的表格列 -->
         <el-table-column label="编号" width="120" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 显示品牌名称的表格列 -->
         <el-table-column label="品牌名称" align="center">
           <template slot-scope="scope">{{scope.row.brandName}}</template>
         </el-table-column>
+        <!-- 通过开关显示是否推荐的表格列，绑定状态改变事件 -->
         <el-table-column label="是否推荐" width="200" align="center">
           <template slot-scope="scope">
             <el-switch
-            @change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
-            :active-value="1"
-            :inactive-value="0"
-            v-model="scope.row.recommendStatus">
-          </el-switch>
+              @change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
+              :active-value="1"
+              :inactive-value="0"
+              v-model="scope.row.recommendStatus">
+            </el-switch>
           </template>
         </el-table-column>
+        <!-- 显示排序的表格列 -->
         <el-table-column label="排序" width="160" align="center">
           <template slot-scope="scope">{{scope.row.sort}}</template>
         </el-table-column>
+        <!-- 显示状态的表格列，使用过滤器格式化内容 -->
         <el-table-column label="状态" width="160" align="center">
           <template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
         </el-table-column>
+        <!-- 显示操作按钮的表格列 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
             <el-button size="mini"
@@ -83,10 +106,13 @@
         </el-table-column>
       </el-table>
     </div>
+    <!-- 批量操作相关选择框和按钮的容器 -->
     <div class="batch-operate-container">
+      <!-- 选择批量操作类型的下拉框，双向绑定操作类型数据 -->
       <el-select
         size="small"
         v-model="operateType" placeholder="批量操作">
+        <!-- 循环生成下拉选项 -->
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -94,6 +120,7 @@
           :value="item.value">
         </el-option>
       </el-select>
+      <!-- 触发批量操作的按钮，设置样式、类型等属性，绑定点击事件 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -103,7 +130,9 @@
         确定
       </el-button>
     </div>
+    <!-- 分页组件的容器 -->
     <div class="pagination-container">
+      <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -115,19 +144,26 @@
         :total="total">
       </el-pagination>
     </div>
+    <!-- 选择品牌的对话框组件，设置标题、可见性绑定、宽度等属性 -->
     <el-dialog title="选择品牌" :visible.sync="selectDialogVisible" width="40%">
+      <!-- 对话框内的品牌名称搜索输入框，绑定数据、设置样式等属性 -->
       <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>
+      <!-- 对话框内展示品牌相关数据的表格，设置数据绑定、选择改变事件等属性 -->
       <el-table :data="dialogData.list"
                 @selection-change="handleDialogSelectionChange" border>
+        <!-- 显示选择框的表格列 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 显示品牌名称的表格列 -->
         <el-table-column label="品牌名称"align="center">
           <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
+        <!-- 显示相关商品和评价数量信息的表格列 -->
         <el-table-column label="相关" width="220" align="center">
           <template slot-scope="scope">
             商品：<span class="color-main">{{scope.row.productCount}}</span>
@@ -135,7 +171,9 @@
           </template>
         </el-table-column>
       </el-table>
+      <!-- 对话框内的分页组件容器 -->
       <div class="pagination-container">
+        <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -149,23 +187,30 @@
       </div>
       <div style="clear: both;"></div>
       <div slot="footer">
+        <!-- 对话框取消按钮，点击隐藏对话框 -->
         <el-button  size="small" @click="selectDialogVisible = false">取 消</el-button>
+        <!-- 对话框确认按钮，绑定点击事件 -->
         <el-button  size="small" type="primary" @click="handleSelectDialogConfirm()">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 设置排序的对话框组件，设置标题、可见性绑定、宽度等属性 -->
     <el-dialog title="设置排序"
                :visible.sync="sortDialogVisible"
                width="40%">
+      <!-- 对话框内的表单，绑定数据模型，设置标签宽度等属性 -->
       <el-form :model="sortDialogData"
                label-width="150px">
+        <!-- 排序输入框的表单项 -->
         <el-form-item label="排序：">
           <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>
-        <el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
-      </span>
+                <!-- 对话框取消按钮，点击隐藏对话框 -->
+                <el-button @click="sortDialogVisible = false" size="small">取 消</el-button>
+        <!-- 对话框确认按钮，绑定点击事件 -->
+                <el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
+            </span>
     </el-dialog>
   </div>
 </template>