README.md

@@ -1,7 +1,7 @@
 # mall-admin-web
 <p>
-
+  <a href="#公众号"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E5%85%AC%E4%BC%97%E5%8F%B7-macrozheng-blue.svg" alt="公众号"></a>
-  
+  <a href="#公众号"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E4%BA%A4%E6%B5%81-%E5%BE%AE%E4%BF%A1%E7%BE%A4-2BA245.svg" alt="交流"></a>
   <a href="https://github.com/macrozheng/mall"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E5%90%8E%E5%8F%B0%E9%A1%B9%E7%9B%AE-mall-blue.svg" alt="后台项目"></a>
   <a href="https://github.com/macrozheng/mall-swarm"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/Cloud%E7%89%88%E6%9C%AC-mall--swarm-brightgreen.svg" alt="SpringCloud版本"></a>
   <a href="https://gitee.com/macrozheng/mall-admin-web"><img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/badge/%E7%A0%81%E4%BA%91-%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80-orange.svg" alt="码云"></a>
@@ -9,14 +9,15 @@
 
 ## 前言
 
-该项目为前后端分离项目的前端部分
+该项目为前后端分离项目的前端部分，后端项目`mall`地址：[传送门](https://github.com/macrozheng/mall) 。
+
 ## 项目介绍
 
 `mall-admin-web`是一个电商后台管理系统的前端项目，基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。
 
 ### 项目演示
 
-项目演示地址：[https://www.macrozheng.com/admin/](https://www.macrozheng.com/admin/)
+项目在线演示地址：[https://www.macrozheng.com/admin/](https://www.macrozheng.com/admin/)
 
 ![后台管理系统功能演示](http://img.macrozheng.com/mall/project/mall_admin_show.png)
 
@@ -67,6 +68,14 @@ src -- 源码目录
 - 具体部署过程请参考：[mall前端项目的安装与部署](https://www.macrozheng.com/mall/deploy/mall_deploy_web.html)
 - 前端自动化部署请参考：[使用Jenkins一键打包部署前端应用，就是这么6！](https://www.macrozheng.com/mall/reference/jenkins_vue.html)
 
+## 公众号
+
+学习不走弯路，关注公众号「**macrozheng**」，回复「**学习路线**」，获取mall项目专属学习路线！
+
+加微信群交流，公众号后台回复「**加群**」即可。
+
+![公众号图片](http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg)
+
 ## 许可证
 
 [Apache License 2.0](https://github.com/macrozheng/mall-admin-web/blob/master/LICENSE)

build/build.js

@@ -2,6 +2,7 @@
 require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
+
 const ora = require('ora')
 const rm = require('rimraf')
 const path = require('path')
@@ -9,8 +10,10 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
+
 const spinner = ora('building for production...')
 spinner.start()
+
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   if (err) throw err
   webpack(webpackConfig, (err, stats) => {

build/utils.js

@@ -8,6 +8,7 @@ exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
     ? config.build.assetsSubDirectory
     : config.dev.assetsSubDirectory
+
   return path.posix.join(assetsSubDirectory, _path)
 }
 

mall_hou/mall-admin/src/main/java/com/macro/mall/bo/AdminUserDetails.java

@@ -16,8 +16,6 @@ import java.util.stream.Collectors;
  * i11111
  * dsdhsjhfjs
  * fdjkf
- * 1111111
- * hjhfsj
  */
 public class AdminUserDetails implements UserDetails {
     //后台用户

mall_hou/mall-security/pom.xml

@@ -9,7 +9,7 @@
 
     <name>mall-security</name>
     <description>mall-security project for mall</description>
-//zzzzzzz
+
     <parent>
         <groupId>com.macro.mall</groupId>
         <artifactId>mall</artifactId>

mall_hou/mall-security/src/main/java/com/macro/mall/security/aspect/RedisCacheAspect.java

@@ -14,7 +14,7 @@ import org.springframework.stereotype.Component;
 
 import java.lang.reflect.Method;
 
-/**123456
+/**
  * Redis缓存切面，防止Redis宕机影响正常业务逻辑
  * Created by macro on 2020/3/17.
  */

src/api/brand.js

@@ -1,70 +1,54 @@
-// 引入自定义的请求工具模块
 import request from '@/utils/request'
-
-// 获取品牌列表
 export function fetchList(params) {
-  // 调用请求方法，发送GET请求到 '/brand/list'，并将参数作为请求的查询参数
   return request({
-    url: '/brand/list',  // 请求的API接口地址
+    url:'/brand/list',
-    method: 'get',       // 请求方法：GET
+    method:'get',
-    params: params      // 请求参数，将被附加到URL的查询字符串中
+    params:params
   })
 }
-
+//dwj1111111
-// 创建新品牌
 export function createBrand(data) {
-  // 调用请求方法，发送POST请求到 '/brand/create'，请求体包含品牌数据
   return request({
-    url: '/brand/create',  // 请求的API接口地址
+    url:'/brand/create',
-    method: 'post',        // 请求方法：POST
+    method:'post',
-    data: data             // 请求体数据，包含品牌的详细信息
+    data:data
   })
 }
-
-// 更新品牌的展示状态
 export function updateShowStatus(data) {
-  // 调用请求方法，发送POST请求到 '/brand/update/showStatus'，请求体包含展示状态的更新数据
   return request({
-    url: '/brand/update/showStatus',  // 请求的API接口地址
+    url:'/brand/update/showStatus',
-    method: 'post',                   // 请求方法：POST
+    method:'post',
-    data: data                        // 请求体数据，包含要更新的展示状态信息
+    data:data
   })
 }
 
-// 更新品牌的工厂状态
 export function updateFactoryStatus(data) {
-  // 调用请求方法，发送POST请求到 '/brand/update/factoryStatus'，请求体包含工厂状态的更新数据
   return request({
-    url: '/brand/update/factoryStatus',  // 请求的API接口地址
+    url:'/brand/update/factoryStatus',
-    method: 'post',                      // 请求方法：POST
+    method:'post',
-    data: data                           // 请求体数据，包含要更新的工厂状态信息
+    data:data
   })
 }
 
-// 删除品牌
 export function deleteBrand(id) {
-  // 调用请求方法，发送GET请求到 '/brand/delete/{id}'，{id}为品牌的唯一标识
   return request({
-    url: '/brand/delete/' + id,  // 请求的API接口地址，{id}动态插入
+    url:'/brand/delete/'+id,
-    method: 'get',               // 请求方法：GET
+    method:'get',
   })
 }
 
-// 获取单个品牌的详细信息
 export function getBrand(id) {
-  // 调用请求方法，发送GET请求到 '/brand/{id}'，{id}为品牌唯一标识
   return request({
-    url: '/brand/' + id,  // 请求的API接口地址，{id}动态插入
+    url:'/brand/'+id,
-    method: 'get',        // 请求方法：GET
+    method:'get',
   })
 }
 
-// 更新品牌的详细信息
+export function updateBrand(id,data) {
-export function updateBrand(id, data) {
-  // 调用请求方法，发送POST请求到 '/brand/update/{id}'，请求体包含品牌的更新数据
   return request({
-    url: '/brand/update/' + id,  // 请求的API接口地址，{id}动态插入
+    url:'/brand/update/'+id,
-    method: 'post',              // 请求方法：POST
+    method:'post',
-    data: data                   // 请求体数据，包含要更新的品牌详细信息
+    data:data
   })
 }
+

src/api/companyAddress.js

@@ -1,27 +1,7 @@
-// 导入封装好的请求工具，用于发起HTTP请求
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取公司地址列表数据的函数
- *
- * 该函数通过发送一个 GET 请求到指定的后端接口，
- * 以获取公司地址列表数据。数据返回后，可以用于前端页面渲染。
- *
- * @returns {Promise} - 返回一个Promise对象，包含接口返回的数据
- *
- * 用法示例：
- * fetchList().then(response => {
- *   console.log(response); // 处理接口返回的数据
- * }).catch(error => {
- *   console.error(error); // 处理错误
- * });
- */
 export function fetchList() {
   return request({
-    // 接口的URL路径，指向公司地址列表的后端接口
+    url:'/companyAddress/list',
-    url: '/companyAddress/list',
+    method:'get'
-
-    // 请求方法：使用 HTTP GET 方法获取数据
-    method: 'get'
   })
 }

src/api/coupon.js

@@ -1,106 +1,38 @@
-// 导入封装的 HTTP 请求工具，用于与后端接口通信
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取优惠券列表
- *
- * 该函数通过 GET 请求获取优惠券列表，并支持通过参数进行查询筛选。
- *
- * @param {Object} params - 查询参数，例如分页、筛选条件等。
- * @returns {Promise} - 返回一个Promise对象，包含接口返回的数据
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/coupon/list', // 接口URL路径：获取优惠券列表
+    url:'/coupon/list',
-    method: 'get',       // 请求方法：GET
+    method:'get',
-    params: params       // 查询参数，通过URL参数传递
+    params:params
   })
 }
 
-/**
- * createCoupon - 创建新的优惠券
- *
- * 该函数通过 POST 请求向后端提交新优惠券的数据。
- *
- * @param {Object} data - 优惠券的详细数据，包含名称、折扣等字段。
- * @returns {Promise} - 返回一个Promise对象，包含接口返回的数据
- *
- * 用法示例：
- * createCoupon({ name: 'Spring Sale', discount: 20 }).then(response => {
- *   console.log(response);
- * });
- */
 export function createCoupon(data) {
   return request({
-    url: '/coupon/create', // 接口URL路径：创建优惠券
+    url:'/coupon/create',
-    method: 'post',        // 请求方法：POST
+    method:'post',
-    data: data             // 请求体，包含优惠券数据
+    data:data
   })
 }
 
-/**
- * getCoupon - 获取单个优惠券的详情
- *
- * 该函数通过 GET 请求获取指定ID的优惠券详细信息。
- *
- * @param {number|string} id - 优惠券的唯一标识ID。
- * @returns {Promise} - 返回一个Promise对象，包含优惠券的详细数据
- *
- * 用法示例：
- * getCoupon(1).then(response => {
- *   console.log(response);
- * });
- */
 export function getCoupon(id) {
   return request({
-    url: '/coupon/' + id, // 接口URL路径：根据ID获取优惠券详情
+    url:'/coupon/'+id,
-    method: 'get'         // 请求方法：GET
+    method:'get',
   })
 }
 
-/**
+export function updateCoupon(id,data) {
- * updateCoupon - 更新指定优惠券的信息
- *
- * 该函数通过 POST 请求提交修改后的优惠券数据，更新指定ID的优惠券。
- *
- * @param {number|string} id - 优惠券的唯一标识ID。
- * @param {Object} data - 修改后的优惠券数据。
- * @returns {Promise} - 返回一个Promise对象，包含操作结果
- *
- * 用法示例：
- * updateCoupon(1, { name: 'Updated Sale', discount: 25 }).then(response => {
- *   console.log(response);
- * });
- */
-export function updateCoupon(id, data) {
   return request({
-    url: '/coupon/update/' + id, // 接口URL路径：更新指定ID的优惠券
+    url:'/coupon/update/'+id,
-    method: 'post',              // 请求方法：POST
+    method:'post',
-    data: data                   // 请求体，包含修改后的数据
+    data:data
   })
 }
 
-/**
- * deleteCoupon - 删除指定优惠券
- *
- * 该函数通过 POST 请求删除指定ID的优惠券。
- *
- * @param {number|string} id - 优惠券的唯一标识ID。
- * @returns {Promise} - 返回一个Promise对象，包含操作结果
- *
- * 用法示例：
- * deleteCoupon(1).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteCoupon(id) {
   return request({
-    url: '/coupon/delete/' + id, // 接口URL路径：删除指定ID的优惠券
+    url:'/coupon/delete/'+id,
-    method: 'post'               // 请求方法：POST
+    method:'post',
   })
 }

src/api/couponHistory.js

@@ -1,27 +1,8 @@
-// 导入封装的 HTTP 请求工具，用于发送 HTTP 请求
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取优惠券历史记录列表
- *
- * 该函数通过 GET 请求获取优惠券使用历史的记录列表。
- * 可以通过传入查询参数（如分页、筛选条件等）来筛选数据。
- *
- * @param {Object} params - 查询参数，包括分页信息、筛选条件等。
- *                          示例参数：{ pageNum: 1, pageSize: 10, couponId: 1001 }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response); // 处理接口返回的数据
- * }).catch(error => {
- *   console.error('获取数据失败:', error); // 处理请求错误
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/couponHistory/list', // 接口URL路径：获取优惠券历史记录列表
+    url:'/couponHistory/list',
-    method: 'get',              // 请求方法：GET
+    method:'get',
-    params: params              // 查询参数，通过 URL 参数传递
+    params:params
   })
 }

src/api/flash.js

@@ -1,109 +1,35 @@
-// 导入封装的 HTTP 请求工具，用于发送 HTTP 请求
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取限时购活动列表
- *
- * 该函数通过 GET 请求获取限时购活动的列表数据，并支持通过参数进行查询筛选。
- *
- * @param {Object} params - 查询参数，例如分页、筛选条件等。
- *                          示例：{ pageNum: 1, pageSize: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/flash/list', // 接口URL：获取限时购活动列表
+    url:'/flash/list',
-    method: 'get',      // 请求方法：GET
+    method:'get',
-    params: params      // 查询参数，通过 URL 查询字符串传递
+    params:params
   })
 }
-
+export function updateStatus(id,params) {
-/**
- * updateStatus - 更新限时购活动状态
- *
- * 该函数通过 POST 请求更新指定限时购活动的状态。
- *
- * @param {number|string} id - 限时购活动的唯一标识ID
- * @param {Object} params - 状态更新参数，例如 { status: 1 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果
- *
- * 用法示例：
- * updateStatus(1, { status: 1 }).then(response => {
- *   console.log(response);
- * });
- */
-export function updateStatus(id, params) {
   return request({
-    url: '/flash/update/status/' + id, // 接口URL：更新指定活动状态
+    url:'/flash/update/status/'+id,
-    method: 'post',                    // 请求方法：POST
+    method:'post',
-    params: params                     // 状态参数，通过 URL 查询字符串传递
+    params:params
   })
 }
-
-/**
- * deleteFlash - 删除指定的限时购活动
- *
- * 该函数通过 POST 请求删除指定ID的限时购活动。
- *
- * @param {number|string} id - 限时购活动的唯一标识ID
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果
- *
- * 用法示例：
- * deleteFlash(1).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteFlash(id) {
   return request({
-    url: '/flash/delete/' + id, // 接口URL：删除指定活动
+    url:'/flash/delete/'+id,
-    method: 'post'              // 请求方法：POST
+    method:'post'
   })
 }
-
-/**
- * createFlash - 创建新的限时购活动
- *
- * 该函数通过 POST 请求向后端提交新的限时购活动数据。
- *
- * @param {Object} data - 活动的详细数据，例如 { name: 'Flash Sale', startTime: '2024-06-01' }
- * @returns {Promise} - 返回一个 Promise 对象，包含创建结果
- *
- * 用法示例：
- * createFlash({ name: 'Summer Flash Sale', startTime: '2024-06-01' }).then(response => {
- *   console.log(response);
- * });
- */
 export function createFlash(data) {
   return request({
-    url: '/flash/create', // 接口URL：创建限时购活动
+    url:'/flash/create',
-    method: 'post',       // 请求方法：POST
+    method:'post',
-    data: data            // 请求体，包含活动的详细数据
+    data:data
   })
 }
-
+export function updateFlash(id,data) {
-/**
- * updateFlash - 更新指定的限时购活动
- *
- * 该函数通过 POST 请求提交更新后的活动数据，更新指定ID的限时购活动。
- *
- * @param {number|string} id - 限时购活动的唯一标识ID
- * @param {Object} data - 更新后的活动数据
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果
- *
- * 用法示例：
- * updateFlash(1, { name: 'Updated Flash Sale', startTime: '2024-06-15' }).then(response => {
- *   console.log(response);
- * });
- */
-export function updateFlash(id, data) {
   return request({
-    url: '/flash/update/' + id, // 接口URL：更新指定ID的活动
+    url:'/flash/update/'+id,
-    method: 'post',             // 请求方法：POST
+    method:'post',
-    data: data                  // 请求体，包含更新后的活动数据
+    data:data
   })
 }

src/api/flashProductRelation.js

@@ -1,88 +1,28 @@
-// 导入封装的 HTTP 请求工具，用于与后端 API 进行通信
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取限时购商品关联列表
- *
- * 该函数通过 GET 请求获取限时购活动与商品的关联列表，
- * 支持通过查询参数进行筛选和分页。
- *
- * @param {Object} params - 查询参数，例如分页和过滤条件。
- *                          示例：{ flashId: 1, pageNum: 1, pageSize: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ flashId: 1, pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/flashProductRelation/list', // 接口URL：获取关联列表
+    url:'/flashProductRelation/list',
-    method: 'get',                     // 请求方法：GET
+    method:'get',
-    params: params                     // 查询参数，通过 URL 传递
+    params:params
   })
 }
-
-/**
- * createFlashProductRelation - 创建新的限时购商品关联
- *
- * 该函数通过 POST 请求提交限时购活动与商品的关联数据。
- *
- * @param {Object} data - 关联数据，例如 { flashId: 1, productId: 100, sort: 1 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * createFlashProductRelation({ flashId: 1, productId: 100, sort: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function createFlashProductRelation(data) {
   return request({
-    url: '/flashProductRelation/create', // 接口URL：创建关联
+    url:'/flashProductRelation/create',
-    method: 'post',                      // 请求方法：POST
+    method:'post',
-    data: data                           // 请求体，包含关联数据
+    data:data
   })
 }
-
-/**
- * deleteFlashProductRelation - 删除指定的限时购商品关联
- *
- * 该函数通过 POST 请求删除指定 ID 的限时购商品关联数据。
- *
- * @param {number|string} id - 限时购商品关联的唯一标识 ID。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * deleteFlashProductRelation(1).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteFlashProductRelation(id) {
   return request({
-    url: '/flashProductRelation/delete/' + id, // 接口URL：删除关联
+    url:'/flashProductRelation/delete/'+id,
-    method: 'post'                             // 请求方法：POST
+    method:'post'
   })
 }
-
+export function updateFlashProductRelation(id,data) {
-/**
- * updateFlashProductRelation - 更新指定的限时购商品关联数据
- *
- * 该函数通过 POST 请求提交更新后的限时购商品关联数据。
- *
- * @param {number|string} id - 限时购商品关联的唯一标识 ID。
- * @param {Object} data - 更新后的关联数据，例如 { sort: 2 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateFlashProductRelation(1, { sort: 2 }).then(response => {
- *   console.log(response);
- * });
- */
-export function updateFlashProductRelation(id, data) {
   return request({
-    url: '/flashProductRelation/update/' + id, // 接口URL：更新关联
+    url:'/flashProductRelation/update/'+id,
-    method: 'post',                            // 请求方法：POST
+    method:'post',
-    data: data                                 // 请求体，包含更新数据
+    data:data
   })
 }

src/api/flashSession.js

@@ -1,131 +1,48 @@
-// 导入封装的 HTTP 请求工具，用于与后端 API 进行通信
 import request from '@/utils/request'
 
-/**
- * fetchList - 获取限时购场次列表
- *
- * 通过 GET 请求获取限时购场次的列表数据，支持查询参数筛选结果。
- *
- * @param {Object} params - 查询参数，例如分页信息等。
- *                          示例：{ pageNum: 1, pageSize: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/flashSession/list', // 接口URL：获取限时购场次列表
+    url: '/flashSession/list',
-    method: 'get',             // 请求方法：GET
+    method: 'get',
-    params: params             // 查询参数，通过 URL 传递
+    params: params
   })
 }
 
-/**
- * fetchSelectList - 获取可选择的限时购场次列表
- *
- * 通过 GET 请求获取简化版的限时购场次数据，用于下拉选择框等场景。
- *
- * @param {Object} params - 查询参数，例如过滤条件等。
- *                          示例：{ flashId: 1 }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchSelectList({ flashId: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchSelectList(params) {
   return request({
-    url: '/flashSession/selectList', // 接口URL：获取可选的场次列表
+    url: '/flashSession/selectList',
-    method: 'get',                   // 请求方法：GET
+    method: 'get',
-    params: params                   // 查询参数
+    params: params
   })
 }
 
-/**
- * updateStatus - 更新指定场次的状态
- *
- * 通过 POST 请求更新场次的状态，例如启用或禁用状态。
- *
- * @param {number|string} id - 限时购场次的唯一标识ID。
- * @param {Object} params - 状态参数，例如 { status: 1 }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateStatus(1, { status: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateStatus(id, params) {
   return request({
-    url: '/flashSession/update/status/' + id, // 接口URL：更新场次状态
+    url: '/flashSession/update/status/' + id,
-    method: 'post',                           // 请求方法：POST
+    method: 'post',
-    params: params                            // 状态参数，通过 URL 查询字符串传递
+    params: params
   })
 }
 
-/**
- * deleteSession - 删除指定的限时购场次
- *
- * 通过 POST 请求删除指定 ID 的限时购场次。
- *
- * @param {number|string} id - 限时购场次的唯一标识ID。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * deleteSession(1).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteSession(id) {
   return request({
-    url: '/flashSession/delete/' + id, // 接口URL：删除场次
+    url: '/flashSession/delete/' + id,
-    method: 'post'                     // 请求方法：POST
+    method: 'post'
   })
 }
 
-/**
- * createSession - 创建新的限时购场次
- *
- * 通过 POST 请求提交新的场次数据，创建限时购场次。
- *
- * @param {Object} data - 场次的详细数据，例如 { name: '上午场', startTime: '08:00', endTime: '12:00' }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * createSession({ name: '上午场', startTime: '08:00', endTime: '12:00' }).then(response => {
- *   console.log(response);
- * });
- */
 export function createSession(data) {
   return request({
-    url: '/flashSession/create', // 接口URL：创建场次
+    url: '/flashSession/create',
-    method: 'post',              // 请求方法：POST
+    method: 'post',
-    data: data                   // 请求体，包含场次数据
+    data: data
   })
 }
 
-/**
- * updateSession - 更新指定的限时购场次数据
- *
- * 通过 POST 请求提交更新后的场次数据，更新指定 ID 的场次信息。
- *
- * @param {number|string} id - 限时购场次的唯一标识ID。
- * @param {Object} data - 更新后的场次数据，例如 { name: '下午场', startTime: '13:00', endTime: '18:00' }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateSession(1, { name: '下午场', startTime: '13:00', endTime: '18:00' }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateSession(id, data) {
   return request({
-    url: '/flashSession/update/' + id, // 接口URL：更新场次信息
+    url: '/flashSession/update/' + id,
-    method: 'post',                    // 请求方法：POST
+    method: 'post',
-    data: data                         // 请求体，包含更新数据
+    data: data
   })
 }

src/api/homeAdvertise.js

@@ -1,130 +1,43 @@
-// 导入封装的 HTTP 请求工具，用于与后端 API 进行通信
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取首页广告列表
- *
- * 通过 GET 请求获取首页广告列表，支持查询参数进行筛选或分页。
- *
- * @param {Object} params - 查询参数，例如分页和过滤条件。
- *                          示例：{ pageNum: 1, pageSize: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/home/advertise/list', // 接口URL：获取首页广告列表
+    url:'/home/advertise/list',
-    method: 'get',               // 请求方法：GET
+    method:'get',
-    params: params               // 查询参数，通过 URL 传递
+    params:params
   })
 }
-
+export function updateStatus(id,params) {
-/**
- * updateStatus - 更新指定广告的状态
- *
- * 通过 POST 请求更新首页广告的状态（启用/禁用）。
- *
- * @param {number|string} id - 广告的唯一标识ID。
- * @param {Object} params - 状态参数，例如 { status: 1 }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateStatus(1, { status: 1 }).then(response => {
- *   console.log(response);
- * });
- */
-export function updateStatus(id, params) {
   return request({
-    url: '/home/advertise/update/status/' + id, // 接口URL：更新广告状态
+    url:'/home/advertise/update/status/'+id,
-    method: 'post',                             // 请求方法：POST
+    method:'post',
-    params: params                              // 状态参数，通过 URL 查询字符串传递
+    params:params
   })
 }
-
-/**
- * deleteHomeAdvertise - 批量删除首页广告
- *
- * 通过 POST 请求删除多个广告记录。
- *
- * @param {Array<number|string>} data - 广告ID数组，例如 [1, 2, 3]。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * deleteHomeAdvertise([1, 2, 3]).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteHomeAdvertise(data) {
   return request({
-    url: '/home/advertise/delete', // 接口URL：批量删除广告
+    url:'/home/advertise/delete',
-    method: 'post',                // 请求方法：POST
+    method:'post',
-    data: data                     // 请求体，包含广告ID数组
+    data:data
   })
 }
-
-/**
- * createHomeAdvertise - 创建新的首页广告
- *
- * 通过 POST 请求提交新的广告数据，创建首页广告。
- *
- * @param {Object} data - 广告的详细数据，例如 { name: '新广告', type: 1, pic: 'url' }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * createHomeAdvertise({ name: '新广告', type: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function createHomeAdvertise(data) {
   return request({
-    url: '/home/advertise/create', // 接口URL：创建广告
+    url:'/home/advertise/create',
-    method: 'post',                // 请求方法：POST
+    method:'post',
-    data: data                     // 请求体，包含广告数据
+    data:data
   })
 }
-
-/**
- * getHomeAdvertise - 获取指定广告详情
- *
- * 通过 GET 请求获取单个广告的详细信息。
- *
- * @param {number|string} id - 广告的唯一标识ID。
- * @returns {Promise} - 返回一个 Promise 对象，包含广告详情数据。
- *
- * 用法示例：
- * getHomeAdvertise(1).then(response => {
- *   console.log(response);
- * });
- */
 export function getHomeAdvertise(id) {
   return request({
-    url: '/home/advertise/' + id, // 接口URL：获取广告详情
+    url:'/home/advertise/'+id,
-    method: 'get'                 // 请求方法：GET
+    method:'get',
   })
 }
 
-/**
+export function updateHomeAdvertise(id,data) {
- * updateHomeAdvertise - 更新指定广告的信息
- *
- * 通过 POST 请求提交更新后的广告数据，更新指定广告的信息。
- *
- * @param {number|string} id - 广告的唯一标识ID。
- * @param {Object} data - 更新后的广告数据，例如 { name: '更新广告', type: 2 }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateHomeAdvertise(1, { name: '更新广告', type: 2 }).then(response => {
- *   console.log(response);
- * });
- */
-export function updateHomeAdvertise(id, data) {
   return request({
-    url: '/home/advertise/update/' + id, // 接口URL：更新广告信息
+    url:'/home/advertise/update/'+id,
-    method: 'post',                      // 请求方法：POST
+    method:'post',
-    data: data                           // 请求体，包含更新后的广告数据
+    data:data
   })
 }

src/api/homeBrand.js

@@ -1,110 +1,40 @@
-// 导入封装的 HTTP 请求工具，用于与后端 API 进行通信
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取首页品牌列表
- *
- * 通过 GET 请求获取首页品牌列表，支持分页和条件筛选。
- *
- * @param {Object} params - 查询参数，例如分页和筛选条件。
- *                          示例：{ pageNum: 1, pageSize: 10, keyword: '品牌名' }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/home/brand/list', // 接口URL：获取品牌列表
+    url:'/home/brand/list',
-    method: 'get',           // 请求方法：GET
+    method:'get',
-    params: params           // 查询参数，通过 URL 传递
+    params:params
   })
 }
 
-/**
- * updateRecommendStatus - 批量更新品牌推荐状态
- *
- * 通过 POST 请求批量更新品牌的推荐状态（如是否推荐）。
- *
- * @param {Array<Object>} data - 推荐状态数据，包含品牌ID数组和推荐状态。
- *                               示例：{ ids: [1, 2, 3], recommendStatus: 1 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateRecommendStatus({ ids: [1, 2], recommendStatus: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateRecommendStatus(data) {
   return request({
-    url: '/home/brand/update/recommendStatus', // 接口URL：更新推荐状态
+    url:'/home/brand/update/recommendStatus',
-    method: 'post',                            // 请求方法：POST
+    method:'post',
-    data: data                                 // 请求体，包含品牌ID和状态
+    data:data
   })
 }
 
-/**
- * deleteHomeBrand - 批量删除首页品牌
- *
- * 通过 POST 请求删除多个品牌记录。
- *
- * @param {Array<number|string>} data - 品牌ID数组，例如 [1, 2, 3]。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * deleteHomeBrand([1, 2, 3]).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteHomeBrand(data) {
   return request({
-    url: '/home/brand/delete', // 接口URL：批量删除品牌
+    url:'/home/brand/delete',
-    method: 'post',            // 请求方法：POST
+    method:'post',
-    data: data                 // 请求体，包含品牌ID数组
+    data:data
   })
 }
 
-/**
- * createHomeBrand - 创建新的首页品牌
- *
- * 通过 POST 请求提交新的品牌数据，创建首页品牌。
- *
- * @param {Object} data - 品牌的详细数据，例如 { brandId: 1, brandName: '品牌名', sort: 0 }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * createHomeBrand({ brandId: 1, brandName: '新品牌', sort: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function createHomeBrand(data) {
   return request({
-    url: '/home/brand/create', // 接口URL：创建品牌
+    url:'/home/brand/create',
-    method: 'post',            // 请求方法：POST
+    method:'post',
-    data: data                 // 请求体，包含品牌数据
+    data:data
   })
 }
 
-/**
- * updateHomeBrandSort - 更新品牌的排序值
- *
- * 通过 POST 请求更新指定品牌的排序值。
- *
- * @param {Object} params - 排序参数，包含品牌ID和新的排序值。
- *                          示例：{ id: 1, sort: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateHomeBrandSort({ id: 1, sort: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateHomeBrandSort(params) {
   return request({
-    url: '/home/brand/update/sort/' + params.id, // 接口URL：更新品牌排序
+    url:'/home/brand/update/sort/'+params.id,
-    method: 'post',                             // 请求方法：POST
+    method:'post',
-    params: params                              // 排序参数，通过 URL 查询字符串传递
+    params:params
   })
 }

src/api/homeSubject.js

@@ -1,110 +1,40 @@
-// 导入封装的 HTTP 请求工具，用于与后端 API 进行通信
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取首页推荐专题列表
- *
- * 通过 GET 请求获取首页推荐专题列表，支持分页和条件筛选。
- *
- * @param {Object} params - 查询参数，例如分页和筛选条件。
- *                          示例：{ pageNum: 1, pageSize: 10, keyword: '专题名' }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/home/recommendSubject/list', // 接口URL：获取推荐专题列表
+    url:'/home/recommendSubject/list',
-    method: 'get',                     // 请求方法：GET
+    method:'get',
-    params: params                     // 查询参数，通过 URL 传递
+    params:params
   })
 }
 
-/**
- * updateRecommendStatus - 批量更新推荐专题的推荐状态
- *
- * 通过 POST 请求批量更新首页推荐专题的推荐状态。
- *
- * @param {Object} data - 推荐状态数据，包含专题ID数组和推荐状态。
- *                        示例：{ ids: [1, 2, 3], recommendStatus: 1 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateRecommendStatus({ ids: [1, 2, 3], recommendStatus: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateRecommendStatus(data) {
   return request({
-    url: '/home/recommendSubject/update/recommendStatus', // 接口URL：更新推荐状态
+    url:'/home/recommendSubject/update/recommendStatus',
-    method: 'post',                                       // 请求方法：POST
+    method:'post',
-    data: data                                            // 请求体，包含专题ID和推荐状态
+    data:data
   })
 }
 
-/**
- * deleteHomeSubject - 批量删除推荐专题
- *
- * 通过 POST 请求删除多个推荐专题。
- *
- * @param {Array<number|string>} data - 专题ID数组，例如 [1, 2, 3]。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * deleteHomeSubject([1, 2, 3]).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteHomeSubject(data) {
   return request({
-    url: '/home/recommendSubject/delete', // 接口URL：批量删除专题
+    url:'/home/recommendSubject/delete',
-    method: 'post',                       // 请求方法：POST
+    method:'post',
-    data: data                            // 请求体，包含专题ID数组
+    data:data
   })
 }
 
-/**
- * createHomeSubject - 创建新的首页推荐专题
- *
- * 通过 POST 请求提交新的专题数据，创建首页推荐专题。
- *
- * @param {Object} data - 推荐专题的详细数据，例如 { subjectId: 1, subjectName: '专题名', sort: 0 }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * createHomeSubject({ subjectId: 1, subjectName: '新专题', sort: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function createHomeSubject(data) {
   return request({
-    url: '/home/recommendSubject/create', // 接口URL：创建推荐专题
+    url:'/home/recommendSubject/create',
-    method: 'post',                       // 请求方法：POST
+    method:'post',
-    data: data                            // 请求体，包含推荐专题数据
+    data:data
   })
 }
 
-/**
- * updateHomeSubjectSort - 更新推荐专题的排序值
- *
- * 通过 POST 请求更新指定推荐专题的排序值。
- *
- * @param {Object} params - 排序参数，包含专题ID和新的排序值。
- *                          示例：{ id: 1, sort: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateHomeSubjectSort({ id: 1, sort: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateHomeSubjectSort(params) {
   return request({
-    url: '/home/recommendSubject/update/sort/' + params.id, // 接口URL：更新专题排序
+    url:'/home/recommendSubject/update/sort/'+params.id,
-    method: 'post',                                        // 请求方法：POST
+    method:'post',
-    params: params                                         // 排序参数，通过 URL 查询字符串传递
+    params:params
   })
 }

src/api/hotProduct.js

@@ -1,110 +1,40 @@
-// 导入封装的 HTTP 请求工具，用于与后端 API 进行通信
 import request from '@/utils/request'
-
-/**
- * fetchList - 获取首页推荐商品列表
- *
- * 通过 GET 请求获取首页推荐商品列表，支持分页和条件筛选。
- *
- * @param {Object} params - 查询参数，例如分页和筛选条件。
- *                          示例：{ pageNum: 1, pageSize: 10, keyword: '商品名' }
- * @returns {Promise} - 返回一个 Promise 对象，包含接口返回的数据。
- *
- * 用法示例：
- * fetchList({ pageNum: 1, pageSize: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function fetchList(params) {
   return request({
-    url: '/home/recommendProduct/list', // 接口URL：获取推荐商品列表
+    url:'/home/recommendProduct/list',
-    method: 'get',                     // 请求方法：GET
+    method:'get',
-    params: params                     // 查询参数，通过 URL 传递
+    params:params
   })
 }
 
-/**
- * updateRecommendStatus - 批量更新推荐商品的推荐状态
- *
- * 通过 POST 请求批量更新首页推荐商品的推荐状态。
- *
- * @param {Object} data - 推荐状态数据，包含商品ID数组和推荐状态。
- *                        示例：{ ids: [1, 2, 3], recommendStatus: 1 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateRecommendStatus({ ids: [1, 2, 3], recommendStatus: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateRecommendStatus(data) {
   return request({
-    url: '/home/recommendProduct/update/recommendStatus', // 接口URL：更新推荐状态
+    url:'/home/recommendProduct/update/recommendStatus',
-    method: 'post',                                       // 请求方法：POST
+    method:'post',
-    data: data                                            // 请求体，包含商品ID和推荐状态
+    data:data
   })
 }
 
-/**
- * deleteHotProduct - 批量删除推荐商品
- *
- * 通过 POST 请求删除多个推荐商品。
- *
- * @param {Array<number|string>} data - 商品ID数组，例如 [1, 2, 3]。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * deleteHotProduct([1, 2, 3]).then(response => {
- *   console.log(response);
- * });
- */
 export function deleteHotProduct(data) {
   return request({
-    url: '/home/recommendProduct/delete', // 接口URL：批量删除推荐商品
+    url:'/home/recommendProduct/delete',
-    method: 'post',                       // 请求方法：POST
+    method:'post',
-    data: data                            // 请求体，包含商品ID数组
+    data:data
   })
 }
 
-/**
- * createHotProduct - 创建新的首页推荐商品
- *
- * 通过 POST 请求提交新的商品数据，创建首页推荐商品。
- *
- * @param {Object} data - 商品的详细数据，例如 { productId: 1, productName: '商品名', sort: 0 }。
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * createHotProduct({ productId: 1, productName: '新商品', sort: 1 }).then(response => {
- *   console.log(response);
- * });
- */
 export function createHotProduct(data) {
   return request({
-    url: '/home/recommendProduct/create', // 接口URL：创建推荐商品
+    url:'/home/recommendProduct/create',
-    method: 'post',                       // 请求方法：POST
+    method:'post',
-    data: data                            // 请求体，包含商品数据
+    data:data
   })
 }
 
-/**
- * updateHotProductSort - 更新推荐商品的排序值
- *
- * 通过 POST 请求更新指定推荐商品的排序值。
- *
- * @param {Object} params - 排序参数，包含商品ID和新的排序值。
- *                          示例：{ id: 1, sort: 10 }
- * @returns {Promise} - 返回一个 Promise 对象，包含操作结果。
- *
- * 用法示例：
- * updateHotProductSort({ id: 1, sort: 10 }).then(response => {
- *   console.log(response);
- * });
- */
 export function updateHotProductSort(params) {
   return request({
-    url: '/home/recommendProduct/update/sort/' + params.id, // 接口URL：更新商品排序
+    url:'/home/recommendProduct/update/sort/'+params.id,
-    method: 'post',                                        // 请求方法：POST
+    method:'post',
-    params: params                                         // 排序参数，通过 URL 查询字符串传递
+    params:params
   })
 }

src/components/Upload/multiUpload.vue

@@ -1,194 +1,121 @@
-<template>
+<template> 
-    <!-- 创建一个 div 元素作为整个组件内容的包裹容器，这是 HTML 中常用的用于组织和划分页面结构的方式 -->
+  <div>
-    <div>
+    <el-upload
-        <!-- el-upload 组件，用于实现文件上传功能，它是基于 Element UI 库提供的组件，方便在 Vue 项目中快速集成文件上传交互功能 -->
+      :action="useOss?ossUploadUrl:minioUploadUrl"
-        <el-upload
+      :data="useOss?dataObj:null"
-                <!-- 通过三元表达式根据 useOss 的值来动态决定上传文件的 action 属性值，即上传文件的请求地址 -->
+      list-type="picture-card"
-                <!-- 如果 useOss 为 true，就使用 ossUploadUrl 作为上传地址，这通常意味着要将文件上传到阿里云 OSS（Object Storage Service，对象存储服务）服务器上 -->
+      :file-list="fileList"
-                <!-- 如果 useOss 为 false，则使用 minioUploadUrl 作为上传地址，MinIO 也是一种常用的对象存储服务，这里可以根据实际需求切换使用不同的存储服务来上传文件 -->
+      :before-upload="beforeUpload"
-                :action="useOss?ossUploadUrl:minioUploadUrl"
+      :on-remove="handleRemove"
-                <!-- 同样基于 useOss 的值来决定是否向上传请求中传递额外的数据（以对象形式） -->
+      :on-success="handleUploadSuccess"
-                <!-- 当 useOss 为 true 时，将 dataObj 作为额外的数据传递给上传请求，这些数据一般包含了与文件上传到 OSS 相关的配置信息，例如上传策略、签名等，用于服务器验证上传的合法性 -->
+      :on-preview="handlePreview"
-                <!-- 当 useOss 为 false 时，不传递额外的数据，即设置为 null -->
+      :limit="maxCount"
-                :data="useOss?dataObj:null"
+      :on-exceed="handleExceed"
-                <!-- 设置文件列表在页面上的展示类型为 "picture-card"，这种类型的展示效果通常是以卡片形式呈现已上传的文件（在这里主要是图片文件） -->
+    >
-                <!-- 每个文件会以一个独立的卡片样式展示，方便用户直观地查看已上传的文件，并且可以进行相应的操作（如删除、预览等） -->
+      <i class="el-icon-plus"></i>
-                list-type="picture-card"
+    </el-upload>
-                <!-- 通过绑定计算属性 fileList，将已上传文件的相关信息以特定格式传递给 el-upload 组件，以便组件能够正确展示已上传的文件列表 -->
+    <el-dialog :visible.sync="dialogVisible">
-                <!-- 计算属性 fileList 会根据组件接收到的相关数据进行处理，转化为 el-upload 组件可识别的格式（后面会在计算属性部分详细说明） -->
+      <img width="100%" :src="dialogImageUrl" alt="">
-                :file-list="fileList"
+    </el-dialog>
-                <!-- 绑定一个名为 before-upload 的回调函数，该函数会在每个文件上传之前被触发 -->
+  </div>
-                <!-- 可以在这个函数中进行一些前置的验证、准备工作，例如当使用阿里云 OSS 上传时，需要在这里获取并设置相关的上传策略等配置信息，决定文件是否可以进行上传 -->
-                :before-upload="beforeUpload"
-                <!-- 绑定一个名为 on-remove 的回调函数，当用户在已展示的文件列表中删除某个文件时，这个函数会被触发 -->
-                <!-- 用于处理文件删除后的相关逻辑，比如通知父组件文件列表发生了变化，让父组件可以相应地更新页面上显示的文件信息等 -->
-                :on-remove="handleRemove"
-                <!-- 绑定一个名为 on-success 的回调函数，在文件上传成功后，该函数会被触发 -->
-                <!-- 可以在这个函数里进行后续的操作，例如更新文件列表数据、通知父组件上传成功的消息以及根据上传结果进行一些页面展示相关的调整等 -->
-                :on-success="handleUploadSuccess"
-                <!-- 绑定一个名为 on-preview 的回调函数，当用户点击已上传的文件进行预览操作时，这个函数会被触发 -->
-                <!-- 主要用于实现文件的预览功能，比如打开一个对话框展示图片的大图等操作 -->
-                :on-preview="handlePreview"
-                <!-- 通过绑定 maxCount 属性来设置允许上传的文件最大数量，这个属性的值来源于组件通过 props 接收的父组件传递过来的 maxCount 值 -->
-                <!-- 限制用户最多只能上传指定数量的文件，若用户尝试上传超过此数量的文件，会触发相应的超出限制处理逻辑 -->
-                :limit="maxCount"
-                <!-- 绑定一个名为 on-exceed 的回调函数，当用户上传的文件数量超过了通过 :limit 设置的最大数量时，该函数会被触发 -->
-                <!-- 用于给出相应的提示信息，告知用户上传文件数量超出了限制，让用户知晓当前的操作不符合规定 -->
-                :on-exceed="handleExceed"
-        >
-            <!-- 在 el-upload 组件内部添加一个图标元素，使用 el-icon-plus 这个类来展示一个加号图标 -->
-            <!-- 通常这个加号图标在界面上用于提示用户可以点击此处进行文件上传操作，是一种常见的交互设计方式 -->
-            <i class="el-icon-plus"></i>
-        </el-upload>
-        <!-- el-dialog 组件用于创建一个对话框，用于展示图片的预览功能，它也是 Element UI 库中的组件，方便实现弹出式的展示界面 -->
-        <el-dialog :visible.sync="dialogVisible">
-            <!-- 在对话框内部放置一个 img 元素，用于展示要预览的图片 -->
-            <!-- 通过绑定 src 属性为 dialogImageUrl，根据这个属性的值来确定要展示的图片的路径，从而正确显示相应的图片内容 -->
-            <!-- 设置图片的宽度为 100%，让图片能够自适应对话框的宽度，完整地展示出来 -->
-            <img width="100%" :src="dialogImageUrl" alt="">
-        </el-dialog>
-    </div>
 </template>
 <script>
-    // 从 '@/api/oss' 文件中导入 policy 函数，推测这个函数用于向服务器端请求获取与阿里云 OSS 文件上传相关的策略（Policy）信息 -->
+  import {policy} from '@/api/oss'
-    // 例如，可能返回包含上传策略、签名、访问密钥等配置信息的对象，这些信息对于将文件安全、合法地上传到阿里云 OSS 服务是必要的，服务器会依据这些信息验证上传请求是否合规
-    import {policy} from '@/api/oss';
 
-    // 导出一个 Vue 组件的配置对象，用于定义组件的各种属性、数据、方法等内容，这是 Vue 组件开发中常用的方式，使得组件可以在其他地方被导入和使用
+  export default {
-    export default {
+    name: 'multiUpload',
-        // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件，这里将组件命名为 'multiUpload'，方便在项目中对不同组件进行区分和引用
+    props: {
-        name: 'multiUpload',
+      //图片属性数组
-        // props 用于定义组件接收来自父组件传递的数据属性，它是实现父子组件通信的重要方式之一 -->
+      value: Array,
-        props: {
+      //最大上传图片数量
-            // 定义一个名为 value 的属性，其类型为数组，用于接收父组件传递过来的图片相关信息，通常是图片的路径数组 -->
+      maxCount:{
-            // 父组件可以将已有的图片路径列表传递给这个组件，以便在组件内部进行展示、管理以及后续的上传、删除等操作相关处理 -->
+        type:Number,
-            value: Array,
+        default:5
-            // 定义一个名为 maxCount 的属性，用于设置允许上传的最大图片数量 -->
+      }
-            // 其类型为数字（Number），并且设置了默认值为 5，表示如果用户尝试上传的图片数量超过 5 张，组件将会触发相应的超出限制处理逻辑 -->
+    },
-            maxCount: {
+    data() {
-                type: Number,
+      return {
-                default: 5
+        dataObj: {
-            }
+          policy: '',
+          signature: '',
+          key: '',
+          ossaccessKeyId: '',
+          dir: '',
+          host: ''
         },
-        data() {
+        dialogVisible: false,
-            return {
+        dialogImageUrl:null,
-                // 创建一个名为 dataObj 的对象，用于存储与文件上传相关的配置信息，特别是在使用阿里云 OSS 上传时，这个对象的各个属性会被赋予相应的值 -->
+        useOss:false, //使用oss->true;使用MinIO->false
-                // 例如，policy 属性用于存储上传策略，signature 属性存储签名信息，ossaccessKeyId 属性存储访问密钥 ID，这些信息共同保障文件能够正确上传到 OSS 服务 -->
+        ossUploadUrl:'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
-                dataObj: {
+        minioUploadUrl:'http://localhost:8080/minio/upload',
-                    policy: '',
+      };
-                    signature: '',
+    },
-                    key: '',
+    computed: {
-                    ossaccessKeyId: '',
+      fileList() {
-                    dir: '',
+        let fileList=[];
-                    host: ''
+        for(let i=0;i<this.value.length;i++){
-                },
+          fileList.push({url:this.value[i]});
-                // 定义一个名为 dialogVisible 的属性，用于控制图片预览对话框的可见性，初始值设为 false -->
+        }
-                // 意味着在组件初始化时，图片预览对话框是隐藏的，只有当用户触发图片预览操作时，才会将这个值设为 true，使对话框显示出来展示相应的图片 -->
+        return fileList;
-                dialogVisible: false,
+      }
-                // 定义一个名为 dialogImageUrl 的属性，用于存储当前正在预览的图片的路径，初始值设为 null -->
+    },
-                // 当用户点击某张已上传的图片进行预览时，会将对应的图片路径赋值给这个属性，以便对话框中的 img 元素能够根据这个路径正确展示图片内容 -->
+    methods: {
-                dialogImageUrl: null,
+      emitInput(fileList) {
-                // 定义一个名为 useOss 的布尔值属性，用于判断当前组件使用的文件存储服务是阿里云 OSS（值为 true 时）还是 MinIO（值为 false 时） -->
+        let value=[];
-                // 根据这个属性的值，组件内部的多个逻辑（如文件上传地址选择、是否需要获取特定配置等）会做出相应的区分和处理 -->
+        for(let i=0;i<fileList.length;i++){
-                useOss: false,
+          value.push(fileList[i].url);
-                // 定义一个名为 ossUploadUrl 的属性，用于存储阿里云 OSS 文件上传的请求地址 -->
+        }
-                // 这里是一个示例地址，在实际应用中需要根据具体的阿里云 OSS 配置进行调整，当 useOss 为 true 时，文件上传操作会使用这个地址向阿里云 OSS 服务发送上传请求 -->
+        this.$emit('input', value)
-                ossUploadUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
+      },
-                // 定义一个名为 minioUploadUrl 的属性，用于存储 MinIO 文件上传的请求地址 -->
+      handleRemove(file, fileList) {
-                // 同样是一个示例地址，当 useOss 为 false 时，文件上传操作会使用这个地址向 MinIO 服务发送上传请求，MinIO 是一种开源的对象存储服务，可自行搭建并部署在本地或私有环境中 -->
+        this.emitInput(fileList);
-                minioUploadUrl: 'http://localhost:8080/minio/upload',
+      },
-            };
+      handlePreview(file) {
-        },
+        this.dialogVisible = true;
-        computed: {
+        this.dialogImageUrl=file.url;
-            // 定义一个计算属性 fileList，它会根据组件接收到的父组件传递过来的 value（图片路径数组）进行相应的处理 -->
+      },
-            // 通过循环遍历 value 数组中的每个元素，为每个图片路径创建一个包含 url 属性的对象，并将这些对象依次添加到新创建的 fileList 数组中，最后返回这个 fileList 数组 -->
+      beforeUpload(file) {
-            // 这样处理后的 fileList 数组就是 el-upload 组件能够识别的文件列表格式，用于在组件中正确展示已上传的图片文件列表 -->
+        let _self = this;
-            fileList() {
+        if(!this.useOss){
-                let fileList = [];
+          //不使用oss不需要获取策略
-                for (let i = 0; i < this.value.length; i++) {
+          return true;
-                    fileList.push({url: this.value[i]});
-                }
-                return fileList;
-            }
-        },
-        methods: {
-            // 定义一个名为 emitInput 的方法，用于向父组件触发一个名为 'input' 的自定义事件，并传递经过处理后的文件列表数据（以只包含图片路径的数组形式） -->
-            // 在组件内部的多个地方（如文件上传成功、文件删除等操作后）会调用这个方法，通过触发这个事件告知父组件文件列表数据发生了变化，使得父组件可以根据接收到的新数据进行相应的更新操作，实现子组件与父组件之间的数据交互和同步 -->
-            emitInput(fileList) {
-                let value = [];
-                for (let i = 0; i < fileList.length; i++) {
-                    value.push(fileList[i].url);
-                }
-                this.$emit('input', value)
-            },
-            // 定义 handleRemove 方法，用于处理文件删除操作 -->
-            // 当用户在 el-upload 组件展示的已上传文件列表中删除某个文件时，该方法会被触发，在方法内部调用 emitInput 方法并传入更新后的文件列表（fileList 参数） -->
-            // 这样就可以通知父组件文件列表发生了改变，父组件接收到通知后可以相应地更新页面上显示的文件列表等相关内容 -->
-            handleRemove(file, fileList) {
-                this.emitInput(fileList);
-            },
-            // 定义 handlePreview 方法，用于处理文件预览操作 -->
-            // 当用户点击已上传的图片触发预览功能时，这个方法会被调用，首先将 dialogVisible 属性设置为 true，使得图片预览对话框显示出来 -->
-            // 然后将当前点击的图片的路径（file.url）赋值给 dialogImageUrl 属性，以便对话框中的 img 元素能够根据这个路径正确展示对应的图片内容，实现图片预览功能 -->
-            handlePreview(file) {
-                this.dialogVisible = true;
-                this.dialogImageUrl = file.url;
-            },
-            // 定义 beforeUpload 方法，用于在文件上传前进行相关的预处理操作 -->
-            // 如果当前组件配置为不使用阿里云 OSS（即 useOss 为 false），则直接返回 true，表示不需要进行额外的配置获取等操作，可以直接进行文件上传 -->
-            // 如果使用阿里云 OSS（useOss 为 true），则需要通过调用 policy 函数向服务器请求获取文件上传所需的策略等配置信息 -->
-            // 在获取到信息后，将相应的值填充到 dataObj 对象的各个属性中，然后通过 resolve(true) 表示预处理成功，允许文件继续进行上传操作 -->
-            // 如果在获取配置信息过程中出现错误（通过 catch 捕获异常），则通过 reject(false) 表示上传预处理失败，阻止文件进行上传 -->
-            beforeUpload(file) {
-                let _self = this;
-                if (!this.useOss) {
-                    // 不使用 oss 不需要获取策略
-                    return true;
-                }
-                return new Promise((resolve, reject) => {
-                    policy().then(response => {
-                        _self.dataObj.policy = response.data.policy;
-                        _self.dataObj.signature = response.data.signature;
-                        _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
-                        _self.dataObj.key = response.data.dir + '/${filename}';
-                        _self.dataObj.dir = response.data.dir;
-                        _self.dataObj.host = response.data.host;
-                        resolve(true)
-                    }).catch(err => {
-                        console.log(err)
-                        reject(false)
-                    })
-                })
-            },
-            // 定义 handleUploadSuccess 方法，用于处理文件上传成功后的操作 -->
-            // 首先根据组件是否使用 OSS（通过 useOss 属性判断）来确定获取上传后文件路径的方式 -->
-            // 如果使用 OSS，就通过拼接 dataObj.host（主机地址）、dataObj.dir（文件存储目录）和文件名称（file.name）来生成完整的文件访问路径 -->
-            // 如果不使用 OSS，则直接使用服务器返回的文件路径（res.data.url） -->
-            // 然后将包含新上传文件信息（文件名14342和路径）的对象添加到 fileList 中，更新文件列表数据 -->
-            // 最后调用 emitInput 方法通知父组件文件列表已更新，以便父组件可以根据新的数据展示新上传的图片以及进行其他相关的页面更新操作 -->
-            handleUploadSuccess(res, file) {
-                let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
-                if (!this.useOss) {
-                    // 不使用 oss 直接获取图片路径
-                    url = res.data.url;
-                }
-                this.fileList.push({name: file.name, url: url});
-                this.emitInput(this.fileList);
-            },
-            // 定义 handleExceed 方法，用于处理上传文件数量超出限制的情况 -->
-            // 当用户尝试上传的文件数量超过了通过 maxCount 属性设定的最大数量时，这个方法会被触发 -->
-            // 通过 $message 方法弹出一个警告类型的提示框，告知用户最多只能上传的图片数量（使用 this.maxCount 获取设定的最大数量） -->
-            // 并且设置提示框的显示时长为 1000 毫秒（即 1 秒），让用户清楚知晓当前的操作不符合上传数量限制要求 -->
-            handleExceed(files, fileList) {
-                this.$message({
-                    message: '最多只能上传' + this.maxCount + '张图片',
-                    type: 'warning',
-                    duration: 1000
-                });
-            },
         }
+        return new Promise((resolve, reject) => {
+          policy().then(response => {
+            _self.dataObj.policy = response.data.policy;
+            _self.dataObj.signature = response.data.signature;
+            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
+            _self.dataObj.key = response.data.dir + '/${filename}';
+            _self.dataObj.dir = response.data.dir;
+            _self.dataObj.host = response.data.host;
+            resolve(true)
+          }).catch(err => {
+            console.log(err)
+            reject(false)
+          })
+        })
+      },
+      handleUploadSuccess(res, file) {
+        let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
+        if(!this.useOss){
+          //不使用oss直接获取图片路径
+          url = res.data.url;
+        }
+        this.fileList.push({name: file.name,url:url});
+        this.emitInput(this.fileList);
+      },
+      handleExceed(files, fileList) {
+        this.$message({
+          message: '最多只能上传'+this.maxCount+'张图片',
+          type: 'warning',
+          duration:1000
+        });
+      },
     }
+  }
 </script>
 <style>
 
 </style>
+
+

src/views/404.vue

@@ -1,33 +1,15 @@
 <template>
   <div>
-    <!-- 页面主体容器 -->
     <div class="app-container">
-      <!-- 左侧图片展示 -->
       <el-col :span="12">
-        <!-- 显示 404 错误图片 -->
         <img :src="img_404" alt="404" class="img-style">
       </el-col>
-
-      <!-- 右侧提示信息与按钮 -->
       <el-col :span="12">
-        <div style="margin-left: 100px; margin-top: 60px">
+        <div style="margin-left: 100px;margin-top: 60px">
-          <!-- 错误标题 -->
           <h1 class="color-main">OOPS!</h1>
-          <!-- 错误描述 -->
           <h2 style="color: #606266">很抱歉，页面它不小心迷路了！</h2>
-          <!-- 进一步的操作提示 -->
+          <div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
-          <div style="color:#909399; font-size: 14px">
+          <el-button style="margin-top: 20px" type="primary" round @click="handleGoMain">返回首页</el-button>
-            请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
-          </div>
-          <!-- 返回首页按钮 -->
-          <el-button
-            style="margin-top: 20px"
-            type="primary"
-            round
-            @click="handleGoMain"
-          >
-            返回首页
-          </el-button>
         </div>
       </el-col>
     </div>
@@ -35,50 +17,33 @@
 </template>
 
 <script>
-  // 导入 404 图片资源
   import img_404 from '@/assets/images/gif_404.gif';
 
   export default {
-    name: 'wrongPage', // 组件名称
+    name: 'wrongPage',
     data() {
       return {
-        // 404 错误图片路径
         img_404
-      };
+      }
     },
     methods: {
-      /**
-       * 返回首页的处理函数
-       * 将用户重定向到主页
-       */
       handleGoMain() {
-        this.$router.push({ path: '/' });
+        this.$router.push({path: '/'})
       }
     },
-  };
+  }
 </script>
 
 <style scoped>
-  /* 页面主容器样式 */
   .app-container {
     width: 80%;
-    margin: 120px auto; /* 页面居中，距离顶部 120px */
+    margin: 120px auto;
-    display: flex; /* 使用 flex 布局 */
-    align-items: center; /* 垂直居中 */
   }
 
-  /* 404 图片样式 */
   .img-style {
-    width: auto; /* 宽度自适应 */
+    width: auto;
-    height: auto; /* 高度自适应 */
+    height: auto;
-    max-width: 100%; /* 图片最大宽度不超过容器 */
+    max-width: 100%;
-    max-height: 100%; /* 图片最大高度不超过容器 */
+    max-height: 100%;
-  }
-
-  /* 标题主颜色样式 */
-  .color-main {
-    color: #409EFF; /* 标题颜色 */
-    font-size: 48px; /* 字体大小 */
-    font-weight: bold; /* 加粗字体 */
   }
 </style>

src/views/layout/components/AppMain.vue

@@ -11,8 +11,8 @@
 export default {
   name: 'AppMain',
   computed: {
-    // key() {
+    // .......key() {
-    // 111 11 return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
     // }
   }
 }

src/views/oms/apply/index.vue

@@ -1,13 +1,9 @@
-<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"
@@ -15,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 重置按钮 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -23,14 +18,11 @@
           重置
         </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.id" class="input-width" placeholder="服务单号"></el-input>
           </el-form-item>
-          <!-- 处理状态下拉选择 -->
           <el-form-item label="处理状态：">
             <el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
               <el-option v-for="item in statusOptions"
@@ -40,7 +32,6 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <!-- 申请时间选择 -->
           <el-form-item label="申请时间：">
             <el-date-picker
               class="input-width"
@@ -50,11 +41,9 @@
               placeholder="请选择时间">
             </el-date-picker>
           </el-form-item>
-          <!-- 操作人员输入 -->
           <el-form-item label="操作人员：">
             <el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
           </el-form-item>
-          <!-- 处理时间选择 -->
           <el-form-item label="处理时间：">
             <el-date-picker
               class="input-width"
@@ -67,58 +56,45 @@
         </el-form>
       </div>
     </el-card>
-    <!-- 数据列表操作区域 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
     </el-card>
-    <!-- 表格容器 -->
     <div class="table-container">
-      <!-- 表格，展示数据列表 -->
       <el-table ref="returnApplyTable"
                 :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="180" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-        <!-- 申请时间列 -->
         <el-table-column label="申请时间" width="180" align="center">
           <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
         </el-table-column>
-        <!-- 用户账号列 -->
         <el-table-column label="用户账号" align="center">
           <template slot-scope="scope">{{scope.row.memberUsername}}</template>
         </el-table-column>
-        <!-- 退款金额列 -->
         <el-table-column label="退款金额" width="180" align="center">
           <template slot-scope="scope">￥{{scope.row | formatReturnAmount}}</template>
         </el-table-column>
-        <!-- 申请状态列 -->
         <el-table-column label="申请状态" width="180" align="center">
           <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
         </el-table-column>
-        <!-- 处理时间列 -->
         <el-table-column label="处理时间" width="180" align="center">
           <template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
         </el-table-column>
-        <!-- 操作列 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
             <el-button
-              size="mini"
+            size="mini"
-              @click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
+            @click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <!-- 批量操作容器 -->
     <div class="batch-operate-container">
-      <!-- 批量操作下拉选择 -->
       <el-select
         size="small"
         v-model="operateType" placeholder="批量操作">
@@ -129,7 +105,6 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <!-- 批量操作按钮 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -139,7 +114,6 @@
         确定
       </el-button>
     </div>
-    <!-- 分页容器 -->
     <div class="pagination-container">
       <el-pagination
         background
@@ -154,14 +128,9 @@
     </div>
   </div>
 </template>
-
 <script>
-  // 导入日期格式化工具
   import {formatDate} from '@/utils/date';
-  // 导入API接口
   import {fetchList,deleteApply} from '@/api/returnApply';
-
-  // 默认的列表查询条件
   const defaultListQuery = {
     pageNum: 1,
     pageSize: 10,
@@ -172,7 +141,6 @@
     handleMan: null,
     handleTime: null
   };
-  // 处理状态选项
   const defaultStatusOptions=[
     {
       label: '待处理',
@@ -191,7 +159,6 @@
       value: 3
     }
   ];
-
   export default {
     name:'returnApplyList',
     data() {
@@ -212,11 +179,9 @@
       }
     },
     created(){
-      // 组件创建时获取列表
       this.getList();
     },
     filters:{
-      // 时间格式化过滤器
       formatTime(time) {
         if(time==null||time===''){
           return 'N/A';
@@ -224,7 +189,6 @@
         let date = new Date(time);
         return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
       },
-      // 状态格式化过滤器
       formatStatus(status){
         for(let i=0;i<defaultStatusOptions.length;i++){
           if(status===defaultStatusOptions[i].value){
@@ -232,30 +196,24 @@
           }
         }
       },
-      // 退款金额格式化过滤器
       formatReturnAmount(row){
         return row.productRealPrice*row.productCount;
       }
     },
     methods:{
-      // 处理表格选择变化
       handleSelectionChange(val){
         this.multipleSelection = val;
       },
-      // 重置搜索
       handleResetSearch() {
         this.listQuery = Object.assign({}, defaultListQuery);
       },
-      // 搜索列表
       handleSearchList() {
         this.listQuery.pageNum = 1;
         this.getList();
       },
-      // 查看详情
       handleViewDetail(index,row){
         this.$router.push({path:'/oms/returnApplyDetail',query:{id:row.id}})
       },
-      // 批量操作
       handleBatchOperate(){
         if(this.multipleSelection==null||this.multipleSelection.length<1){
           this.$message({
@@ -266,7 +224,7 @@
           return;
         }
         if(this.operateType===1){
-          // 批量删除
+          //批量删除
           this.$confirm('是否要进行删除操作?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',

src/views/oms/order/components/logisticsDialog.vue

@@ -1,69 +1,59 @@
-<template>
+<template> 
-    <!-- 使用 el-dialog 组件创建一个对话框，用于展示订单跟踪相关信息。设置对话框的标题为 "订单跟踪"，通过 :visible.sync 双向绑定对话框的可见性（与组件的 visible 属性关联，后面会详细介绍），绑定 :before-close 事件处理函数用于在对话框关闭前执行一些操作，设置对话框宽度为 40% -->
+  <el-dialog title="订单跟踪"
-    <el-dialog title="订单跟踪"
+             :visible.sync="visible"
-               :visible.sync="visible"
+             :before-close="handleClose"
-               :before-close="handleClose"
+             width="40%">
-               width="40%">
+    <el-steps direction="vertical"
-        <!-- el-steps 组件用于创建一个步骤条，设置方向为垂直（direction="vertical"），指定当前激活的步骤索引为 6（:active="6"，这里可能需要根据实际业务逻辑，根据订单物流状态动态设置该值），设置已完成步骤的状态样式为 "success"（通常表示成功完成的视觉效果，比如显示为绿色等），设置每个步骤之间的间隔为 50px（space="50px"） -->
+              :active="6"
-        <el-steps direction="vertical"
+              finish-status="success"
-                  :active="6"
+              space="50px">
-                  finish-status="success"
+      <el-step  v-for="item in logisticsList"
-                  space="50px">
+                :key="item.name"
-            <!-- 通过 v-for 指令循环遍历 logisticsList 数据（数组）来动态生成每个步骤（el-step），每个步骤绑定一个唯一的 key（使用 :key="item.name"，在 Vue 中循环渲染列表时，key 是必要的，有助于 Vue 更高效地更新虚拟 DOM），设置步骤的标题为 item.name（从数据中获取每个步骤对应的名称），设置步骤的描述信息为 item.time（从数据中获取对应时间信息） -->
+                :title="item.name"
-            <el-step v-for="item in logisticsList"
+                :description="item.time"></el-step>
-                     :key="item.name"
+    </el-steps>
-                     :title="item.name"
+  </el-dialog>
-                     :description="item.time"></el-step>
-        </el-steps>
-    </el-dialog>
 </template>
-  <script>
+<script>
-      // 定义一个常量数组 defaultLogisticsList，用于模拟订单物流的各个步骤信息，每个元素是一个对象，包含两个属性：name（步骤名称，描述订单所处的物流状态）和 time（对应步骤发生的时间）
+  const defaultLogisticsList=[
-      const defaultLogisticsList = [
+    {name: '订单已提交，等待付款',time:'2017-04-01 12:00:00 '},
-          {name: '订单已提交，等待付款', time: '2017-04-01 12:00:00 '},
+    {name: '订单付款成功',time:'2017-04-01 12:00:00 '},
-          {name: '订单付款成功', time: '2017-04-01 12:00:00 '},
+    {name: '在北京市进行下级地点扫描，等待付款',time:'2017-04-01 12:00:00 '},
-          {name: '在北京市进行下级地点扫描，等待付款', time: '2017-04-01 12:00:00 '},
+    {name: '在分拨中心广东深圳公司进行卸车扫描，等待付款',time:'2017-04-01 12:00:00 '},
-          {name: '在分拨中心广东深圳公司进行卸车扫描，等待付款', time: '2017-04-01 12:00:00 '},
+    {name: '在广东深圳公司进行发出扫描',time:'2017-04-01 12:00:00 '},
-          {name: '在广东深圳公司进行发出扫描', time: '2017-04-01 12:00:00 '},
+    {name: '到达目的地网点广东深圳公司，快件将很快进行派送',time:'2017-04-01 12:00:00 '},
-          {name: '到达目的地网点广东深圳公司，快件将很快进行派送', time: '2017-04-01 12:00:00 '},
+    {name: '订单已签收，期待再次为您服务',time:'2017-04-01 12:00:00 '}
-          {name: '订单已签收，期待再次为您服务', time: '2017-04-01 12:00:00 '}
+  ];
-      ];
+  export default {
-
+    name:'logisticsDialog',
-      // 导出一个 Vue 组件的配置对象，用于定义组件的各种属性、数据、方法等内容
+    props: {
-      export default {
+      value: Boolean
-          // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件，这里组件名为 'logisticsDialog'
+    },
-          name: 'logisticsDialog',
+    computed:{
-          // 定义组件的 props 属性，用于接收父组件传递过来的数据。这里接收一个名为 value 的属性，类型为布尔值，通常用于接收父组件传递的控制对话框显示隐藏的状态值（遵循 Vue 中自定义组件的父子组件通信规范）
+      visible: {
-          props: {
+        get() {
-              value: Boolean
+          return this.value;
-          },
+        },
-          computed: {
+        set(visible){
-              // 定义一个计算属性 visible，它有 get 和 set 方法，用于实现对 props 中 value 属性的双向绑定效果。通过计算属性的方式，可以在遵循单向数据流原则（Vue 中 props 是单向传递数据的）的基础上，方便地在组件内部对父组件传递的状态进行操作和响应。
+          this.value=visible;
-              visible: {
+        }
-                  get() {
+      }
-                      return this.value;
+    },
-                  },
+    data() {
-                  set(visible) {
+      return {
-                      this.value = visible;
+        logisticsList:Object.assign({},defaultLogisticsList)
-                  }
+      }
-              }
+    },
-          },
+    methods:{
-          data() {
+      emitInput(val) {
-              return {
+        this.$emit('input', val)
-                  // 将 defaultLogisticsList 的数据复制一份（通过 Object.assign 方法）赋值给 logisticsList，用于在组件内部存储和操作订单物流步骤信息数据，后续可以根据实际从后端获取的数据进行更新替换等操作
+      },
-                  logisticsList: Object.assign({}, defaultLogisticsList)
+      handleClose(){
-              }
+        this.emitInput(false);
-          },
-          methods: {
-              // 定义一个名为 emitInput 的方法，用于向父组件触发一个名为 'input' 的自定义事件，并传递一个参数 val。在 Vue 中，通过 $emit 方法可以实现子组件向父组件通信，父组件可以监听这个自定义事件并获取传递的数据，从而进行相应的操作（比如根据子组件传递的状态值更新自身的数据等）
-              emitInput(val) {
-                  this.$emit('input', val)
-              },
-              // 定义 handleClose 方法，用于处理对话框关闭的操作。在对话框关闭前（通过 el-dialog 的 :before-close 事件绑定）会调用这个方法，在方法内部调用 emitInput 方法并传入 false，意味着向父组件发送对话框应隐藏（关闭）的信号，通知父组件更新对话框的可见性状态
-              handleClose() {
-                  this.emitInput(false);
-              }
-          }
       }
-  </script>
+    }
+  }
+</script>
 <style></style>
+
+

src/views/oms/order/deliverOrderList.vue

@@ -1,130 +1,99 @@
-<template>
+<template> 
-    <!-- 创建一个类名为 "app-container" 的 div 作为整体页面的容器 -->
+  <div class="app-container">
-    <div class="app-container">
+    <el-card class="operate-container" shadow="never">
-        <!-- 使用 el-card 组件创建一个卡片式容器，设置类名为 "operate-container" 并取消阴影效果，用于展示页面相关标题 -->
+      <i class="el-icon-tickets"></i>
-        <el-card class="operate-container" shadow="never">
+      <span>发货列表</span>
-            <!-- 使用一个图标元素（el-icon-tickets）展示一个图标 -->
+    </el-card>
-            <i class="el-icon-tickets"></i>
+    <div class="table-container">
-            <!-- 展示一段文本，内容为 "发货列表"，用于表明该页面主要展示的内容 -->
+      <el-table ref="deliverOrderTable"
-            <span>发货列表</span>
+                style="width: 100%;"
-        </el-card>
+                :data="list" border>
-        <!-- 创建一个类名为 "table-container" 的 div，用于放置展示发货相关信息的表格以及操作按钮等内容 -->
+        <el-table-column label="订单编号" width="180" align="center">
-        <div class="table-container">
+          <template slot-scope="scope">{{scope.row.orderSn}}</template>
-            <!-- el-table 组件创建一个表格，设置引用名称、宽度以及绑定数据等属性，同时设置表格显示边框 -->
+        </el-table-column>
-            <el-table ref="deliverOrderTable"
+        <el-table-column label="收货人" width="180" align="center">
-                      style="width: 100%;"
+          <template slot-scope="scope">{{scope.row.receiverName}}</template>
-                      :data="list" border>
+        </el-table-column>
-                <!-- 定义表格列，用于展示订单编号信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的订单编号并展示 -->
+        <el-table-column label="手机号码" width="160" align="center">
-                <el-table-column label="订单编号" width="180" align="center">
+          <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
-                    <template slot-scope="scope">{{scope.row.orderSn}}</template>
+        </el-table-column>
-                </el-table-column>
+        <el-table-column label="邮政编码" width="160" align="center">
-                <!-- 定义表格列，用于展示收货人信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的收货人姓名并展示 -->
+          <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
-                <el-table-column label="收货人" width="180" align="center">
+        </el-table-column>
-                    <template slot-scope="scope">{{scope.row.receiverName}}</template>
+        <el-table-column label="收货地址" align="center">
-                </el-table-column>
+          <template slot-scope="scope">{{scope.row.address}}</template>
-                <!-- 定义表格列，用于展示手机号码信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的手机号码并展示 -->
+        </el-table-column>
-                <el-table-column label="手机号码" width="160" align="center">
+        <el-table-column label="配送方式" width="160" align="center">
-                    <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
+          <template slot-scope="scope">
-                </el-table-column>
+            <el-select placeholder="请选择物流公司"
-                <!-- 定义表格列，用于展示邮政编码信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的邮政编码并展示 -->
+                       v-model="scope.row.deliveryCompany"
-                <el-table-column label="邮政编码" width="160" align="center">
+                       size="small">
-                    <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
+              <el-option v-for="item in companyOptions"
-                </el-table-column>
+                         :key="item"
-                <!-- 定义表格列，用于展示收货地址信息，设置文本对齐方式，通过插槽作用域获取对应行数据中的收货地址并展示 -->
+                         :label="item"
-                <el-table-column label="收货地址" align="center">
+                         :value="item">
-                    <template slot-scope="scope">{{scope.row.address}}</template>
+              </el-option>
-                </el-table-column>
+            </el-select>
-                <!-- 定义表格列，用于展示配送方式信息，通过插槽作用域在每个单元格内创建一个下拉选择框，用于选择物流公司，绑定对应行数据中的 deliveryCompany 属性，设置占位提示文本和小尺寸样式，通过循环 companyOptions 数据动态生成下拉选项 -->
+          </template>
-                <el-table-column label="配送方式" width="160" align="center">
+        </el-table-column>
-                    <template slot-scope="scope">
+        <el-table-column label="物流单号" width="180" align="center">
-                        <el-select placeholder="请选择物流公司"
+          <template slot-scope="scope">
-                                   v-model="scope.row.deliveryCompany"
+            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
-                                   size="small">
+          </template>
-                            <el-option v-for="item in companyOptions"
+        </el-table-column>
-                                       :key="item"
+      </el-table>
-                                       :label="item"
+      <div style="margin-top: 15px;text-align: center">
-                                       :value="item">
+        <el-button @click="cancel">取消</el-button>
-                            </el-option>
+        <el-button @click="confirm" type="primary">确定</el-button>
-                        </el-select>
+      </div>
-                    </template>
-                </el-table-column>
-                <!-- 定义表格列，用于展示物流单号信息，通过插槽作用域在每个单元格内创建一个小尺寸的输入框，双向绑定对应行数据中的 deliverySn 属性，用于输入物流单号 -->
-                <el-table-column label="物流单号" width="180" align="center">
-                    <template slot-scope="scope">
-                        <el-input size="small" v-model="scope.row.deliverySn"></el-input>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <!-- 创建一个 div，设置上边距、文本居中对齐，用于放置操作按钮 -->
-            <div style="margin-top: 15px;text-align: center">
-                <!-- el-button 组件创建一个按钮，点击时调用 "cancel" 方法，按钮文本为 "取消" -->
-                <el-button @click="cancel">取消</el-button>
-                <!-- el-button 组件创建一个按钮，点击时调用 "confirm" 方法，按钮类型设置为 "primary"（通常表示主要操作按钮，样式上可能会突出显示），按钮文本为 "确定" -->
-                <el-button @click="confirm" type="primary">确定</el-button>
-            </div>
-        </div>
     </div>
+  </div>
 </template>
+<script>
+  import {deliveryOrder} from '@/api/order'
+  const defaultLogisticsCompanies=["顺丰快递","圆通快递","中通快递","韵达快递"];
+  export default {
+    name: 'deliverOrderList',
+    data() {
+      return {
+        list:[],
+        companyOptions:defaultLogisticsCompanies
+      }
+    },
+    created(){
+      this.list= this.$route.query.list;
+      //当list不为数组时转换为数组
+      if(this.list instanceof Array===false){
+        this.list=[];
+      }
+    },
+    methods:{
+      cancel(){
+        this.$router.back();
+      },
+      confirm(){
+        this.$confirm('是否要进行发货操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deliveryOrder(this.list).then(response=>{
+            this.$router.back();
+            this.$message({
+              type: 'success',
+              message: '发货成功!'
+            });
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消发货'
+          });
+        });
+      }
+    }
+  }
+</script>
+<style></style>
 
 
-    <script>
-        // 从 '@/api/order' 文件中导入 deliveryOrder 函数，推测该函数用于向服务器发送发货相关的请求，实现发货操作
-        import {deliveryOrder} from '@/api/order';
-
-        // 定义一个常量数组，包含一些常见的物流公司名称，作为默认的物流公司选项
-        const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递"];
-
-        // 导出一个 Vue 组件配置对象，用于定义组件的各种属性、数据、方法等内容
-        export default {
-            // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件，这里组件名为 "deliverOrderList"
-            name: 'deliverOrderList',
-            data() {
-                return {
-                    // 用于存储发货列表相关的数据，初始为空数组，后续会通过路由传参等方式获取并填充实际数据
-                    list: [],
-                    // 用于存储物流公司选项数据，初始赋值为 defaultLogisticsCompanies 常量数组，用于下拉选择框展示物流公司选项
-                    companyOptions: defaultLogisticsCompanies
-                }
-            },
-            created() {
-                // 在组件被创建时（生命周期钩子函数），从路由查询参数（this.$route.query）中获取名为 "list" 的数据，并赋值给 list 属性，用于初始化表格展示的数据
-                this.list = this.$route.query.list;
-                // 判断获取到的 list 是否不是数组类型，如果不是，则将 list 重新赋值为空数组，进行数据格式的校验和初始化处理
-                if (this.list instanceof Array === false) {
-                    this.list = [];
-                }
-            },
-            methods: {
-                // 定义名为 "cancel" 的方法，用于处理取消操作，通过 Vue 路由（this.$router）的 back 方法实现返回上一页的功能
-                cancel() {
-                    this.$router.back();
-                }
-                // 定义名为 "confirm" 的方法，用于处理确定发货的操作
-                confirm() {
-                    // 使用 $confirm 方法弹出一个确认框，询问用户是否要进行发货操作，配置了确认按钮文本、取消按钮文本以及提示框的类型为 "warning"（警告类型，通常显示为黄色背景等样式）
-                    this.$confirm('是否要进行发货操作?', '提示', {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning'
-                    }).then(() => {
-                        // 如果用户在确认框中点击了 "确定" 按钮，则调用 "deliveryOrder" 函数（向服务器发送发货请求），传入 list 数据（包含要发货的订单相关信息）
-                        // 在请求成功后（通过 then 方法的回调），通过 Vue 路由（this.$router）的 back 方法返回上一页，并使用 $message 方法弹出一个提示框，显示 "发货成功!" 的消息，表示发货操作已成功完成
-                        deliveryOrder(this.list).then(response => {
-                            this.$router.back();
-                            this.$message({
-                                type: 'success',
-                                message: '发货成功!'
-                            });
-                        });
-                    }).catch(() => {
-                        // 如果用户在确认框中点击了 "取消" 按钮或者请求出现异常等情况（通过 catch 方法捕获），则使用 $message 方法弹出一个提示框，显示 "已取消发货" 的消息，告知用户发货操作已取消
-                        this.$message({
-                            type: 'info',
-                            message: '已取消发货'
-                        });
-                    });
-                }
-            }
-        }
-    </script>
-<style></style>

src/views/oms/order/index.vue

@@ -1,550 +1,402 @@
-<template>
+<template> 
-    <!-- 创建一个类名为 "app-container" 的 div 作为整体页面容器 -->
+  <div class="app-container">
-    <div class="app-container">
+    <el-card class="filter-container" shadow="never">
-        <!-- 使用 el-card 组件创建一个卡片式容器，用于放置筛选搜索相关内容，设置类名为 "filter-container" 并取消阴影效果 -->
+      <div>
-        <el-card class="filter-container" shadow="never">
+        <i class="el-icon-search"></i>
-            <div>
+        <span>筛选搜索</span>
-                <!-- 使用一个图标元素（el-icon-search）展示搜索图标 -->
+        <el-button
-                <i class="el-icon-search"></i>
+          style="float:right"
-                <!-- 展示一段文本，内容为 "筛选搜索" -->
+          type="primary"
-                <span>筛选搜索</span>
+          @click="handleSearchList()"
-                <!-- el-button 组件创建一个按钮，设置样式使其右浮动，按钮类型为 "primary"，点击时调用 "handleSearchList" 方法，按钮大小为 "small"，文本为 "查询搜索" -->
+          size="small">
-                <el-button
+          查询搜索
-                        style="float:right"
+        </el-button>
-                        type="primary"
+        <el-button
-                        @click="handleSearchList()"
+          style="float:right;margin-right: 15px"
-                        size="small">
+          @click="handleResetSearch()"
-                    查询搜索
+          size="small">
-                </el-button>
+          重置
-                <!-- 类似上述按钮，设置右浮动及右外边距，点击调用 "handleResetSearch" 方法，用于重置筛选条件，按钮大小为 "small"，文本为 "重置" -->
+        </el-button>
-                <el-button
+      </div>
-                        style="float:right;margin-right: 15px"
+      <div style="margin-top: 15px">
-                        @click="handleResetSearch()"
+        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-                        size="small">
+          <el-form-item label="输入搜索：">
-                    重置
+            <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
-                </el-button>
+          </el-form-item>
-            </div>
+          <el-form-item label="收货人：">
-            <div style="margin-top: 15px">
+            <el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
-                <!-- el-form 组件创建一个内联表单，绑定数据模型为 "listQuery"，设置表单大小为 "small"，标签宽度为 "140px" -->
+          </el-form-item>
-                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <el-form-item label="提交时间：">
-                    <!-- el-form-item 组件定义表单中的一项，用于输入订单编号的搜索框，双向绑定 "listQuery.orderSn"，设置类名控制宽度，添加占位提示文本 -->
+            <el-date-picker
-                    <el-form-item label="输入搜索：">
+              class="input-width"
-                        <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
+              v-model="listQuery.createTime"
-                    </el-form-item>
+              value-format="yyyy-MM-dd"
-                    <!-- 类似上述，用于输入收货人相关关键字的搜索框，绑定 "listQuery.receiverKeyword" -->
+              type="date"
-                    <el-form-item label="收货人：">
+              placeholder="请选择时间">
-                        <el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
+            </el-date-picker>
-                    </el-form-item>
+          </el-form-item>
-                    <!-- 用于选择提交时间的日期选择器，绑定 "listQuery.createTime"，设置日期格式、类型为 "date"（仅选择日期）及占位提示文本，通过类名控制宽度 -->
+          <el-form-item label="订单状态：">
-                    <el-form-item label="提交时间：">
+            <el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
-                        <el-date-picker
+              <el-option v-for="item in statusOptions"
-                                class="input-width"
+                         :key="item.value"
-                                v-model="listQuery.createTime"
+                         :label="item.label"
-                                value-format="yyyy-MM-dd"
+                         :value="item.value">
-                                type="date"
+              </el-option>
-                                placeholder="请选择时间">
-                        </el-date-picker>
-                    </el-form-item>
-                    <!-- 用于选择订单状态的下拉选择框，绑定 "listQuery.status"，设置类名控制宽度、占位提示文本并允许清空选项，通过循环选项数据动态生成下拉选项 -->
-                    <el-form-item label="订单状态：">
-                        <el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
-                            <el-option v-for="item in statusOptions"
-                                       :key="item.value"
-                                       :label="item.label"
-                                       :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <!-- 用于选择订单分类的下拉选择框，绑定 "listQuery.orderType"，类似上述设置 -->
-                    <el-form-item label="订单分类：">
-                        <el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
-                            <el-option v-for="item in orderTypeOptions"
-                                       :key="item.value"
-                                       :label="item.label"
-                                       :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <!-- 用于选择订单来源的下拉选择框，绑定 "listQuery.sourceType"，同样的设置方式 -->
-                    <el-form-item label="订单来源：">
-                        <el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
-                            <el-option v-for="item in sourceTypeOptions"
-                                       :key="item.value"
-                                       :label="item.label"
-                                       :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-form>
-            </div>
-        </el-card>
-        <!-- 使用 el-card 组件创建另一个卡片式容器，用于展示数据列表相关的标题，设置类名为 "operate-container" 并取消阴影效果 -->
-        <el-card class="operate-container" shadow="never">
-            <i class="el-icon-tickets"></i>
-            <span>数据列表</span>
-        </el-card>
-        <!-- 创建一个类名为 "table-container" 的 div，用于放置展示数据的表格 -->
-        <div class="table-container">
-            <!-- el-table 组件创建表格，设置引用、绑定数据、宽度、监听行选择变化事件以及控制加载状态等属性 -->
-            <el-table ref="orderTable"
-                      :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="80" align="center">
-                    <template slot-scope="scope">{{scope.row.id}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示订单编号信息，设置宽度和文本对齐方式 -->
-                <el-table-column label="订单编号" width="180" align="center">
-                    <template slot-scope="scope">{{scope.row.orderSn}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示提交时间信息，设置宽度和文本对齐方式，通过管道符调用 formatCreateTime 过滤器对时间进行格式化后展示 -->
-                <el-table-column label="提交时间" width="180" align="center">
-                    <template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示用户账号信息，设置文本对齐方式，通过插槽作用域获取对应行数据展示 -->
-                <el-table-column label="用户账号" align="center">
-                    <template slot-scope="scope">{{scope.row.memberUsername}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示订单金额信息，设置宽度和文本对齐方式 -->
-                <el-table-column label="订单金额" width="120" align="center">
-                    <template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示支付方式信息，设置宽度和文本对齐方式，通过管道符调用 formatPayType 过滤器对支付方式进行格式化后展示 -->
-                <el-table-column label="支付方式" width="120" align="center">
-                    <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示订单来源信息，设置宽度和文本对齐方式，通过管道符调用 formatSourceType 过滤器对订单来源进行格式化后展示 -->
-                <el-table-column label="订单来源" width="120" align="center">
-                    <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示订单状态信息，设置宽度和文本对齐方式，通过管道符调用 formatStatus 过滤器对订单状态进行格式化后展示 -->
-                <el-table-column label="订单状态" width="120" align="center">
-                    <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
-                </el-table-column>
-                <!-- 定义表格列，展示操作按钮，设置宽度和文本对齐方式，通过插槽作用域根据不同订单状态动态显示相应操作按钮 -->
-                <el-table-column label="操作" width="200" align="center">
-                    <template slot-scope="scope">
-                        <el-button
-                                size="mini"
-                                @click="handleViewOrder(scope.$index, scope.row)"
-                        >查看订单</el-button>
-                        <el-button
-                                size="mini"
-                                @click="handleCloseOrder(scope.$index, scope.row)"
-                                v-show="scope.row.status===0">关闭订单</el-button>
-                        <el-button
-                                size="mini"
-                                @click="handleDeliveryOrder(scope.$index, scope.row)"
-                                v-show="scope.row.status===1">订单发货</el-button>
-                        <el-button
-                                size="mini"
-                                @click="handleViewLogistics(scope.$index, scope.row)"
-                                v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
-                        <el-button
-                                size="mini"
-                                type="danger"
-                                @click="handleDeleteOrder(scope.$index, scope.row)"
-                                v-show="scope.row.status===4">删除订单</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <!-- 创建一个类名为 "batch-operate-container" 的 div，用于放置批量操作相关的选择框和按钮 -->
-        <div class="batch-operate-container">
-            <!-- el-select 组件创建下拉选择框，设置大小、绑定数据模型，通过循环选项数据动态生成下拉选项 -->
-            <el-select
-                    size="small"
-                    v-model="operateType" placeholder="批量操作">
-                <el-option
-                        v-for="item in operateOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                </el-option>
             </el-select>
-            <!-- el-button 组件创建按钮，设置左外边距、类名、点击调用 "handleBatchOperate" 方法、按钮类型为 "primary" 以及按钮大小为 "small"，文本为 "确定" -->
+          </el-form-item>
+          <el-form-item label="订单分类：">
+            <el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
+              <el-option v-for="item in orderTypeOptions"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="订单来源：">
+            <el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
+              <el-option v-for="item in sourceTypeOptions"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
+    </el-card>
+    <div class="table-container">
+      <el-table ref="orderTable"
+                :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="80" align="center">
+          <template slot-scope="scope">{{scope.row.id}}</template>
+        </el-table-column>
+        <el-table-column label="订单编号" width="180" align="center">
+          <template slot-scope="scope">{{scope.row.orderSn}}</template>
+        </el-table-column>
+        <el-table-column label="提交时间" width="180" align="center">
+          <template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
+        </el-table-column>
+        <el-table-column label="用户账号" align="center">
+          <template slot-scope="scope">{{scope.row.memberUsername}}</template>
+        </el-table-column>
+        <el-table-column label="订单金额" width="120" align="center">
+          <template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
+        </el-table-column>
+        <el-table-column label="支付方式" width="120" align="center">
+          <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
+        </el-table-column>
+        <el-table-column label="订单来源" width="120" align="center">
+          <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
+        </el-table-column>
+        <el-table-column label="订单状态" width="120" align="center">
+          <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleViewOrder(scope.$index, scope.row)"
+            >查看订单</el-button>
+            <el-button
+              size="mini"
+              @click="handleCloseOrder(scope.$index, scope.row)"
+              v-show="scope.row.status===0">关闭订单</el-button>
+            <el-button
+              size="mini"
+              @click="handleDeliveryOrder(scope.$index, scope.row)"
+              v-show="scope.row.status===1">订单发货</el-button>
+            <el-button
+              size="mini"
+              @click="handleViewLogistics(scope.$index, scope.row)"
+              v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
             <el-button
-                    style="margin-left: 20px"
+              size="mini"
-                    class="search-button"
+              type="danger"
-                    @click="handleBatchOperate()"
+              @click="handleDeleteOrder(scope.$index, scope.row)"
-                    type="primary"
+              v-show="scope.row.status===4">删除订单</el-button>
-                    size="small">
+          </template>
-                确定
+        </el-table-column>
-            </el-button>
+      </el-table>
-        </div>
-        <!-- 创建一个类名为 "pagination-container" 的 div，用于放置分页组件 -->
-        <div class="pagination-container">
-            <!-- el-pagination 组件创建分页器，设置背景色、监听页面大小和当前页变化事件、配置分页布局、绑定当前页、每页显示数量以及可选的每页显示数量选项和总数据条数等属性 -->
-            <el-pagination
-                    background
-                    @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange"
-                    layout="total, sizes,prev, pager, next,jumper"
-                    :current-page.sync="listQuery.pageNum"
-                    :page-size="listQuery.pageSize"
-                    :page-sizes="[5,10,15]"
-                    :total="total">
-            </el-pagination>
-        </div>
-        <!-- el-dialog 组件创建一个对话框，用于关闭订单时输入备注信息，设置标题、绑定可见性以及宽度等属性 -->
-        <el-dialog
-                title="关闭订单"
-                :visible.sync="closeOrder.dialogVisible" width="30%">
-            <span style="vertical-align: top">操作备注：</span>
-            <el-input
-                    style="width: 80%"
-                    type="textarea"
-                    :rows="5"
-                    placeholder="请输入内容"
-                    v-model="closeOrder.content">
-            </el-input>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
-            </span>
-        </el-dialog>
-        <!-- 使用 logistics-dialog 组件（自定义组件），双向绑定 visible 属性（推测用于控制显示隐藏） -->
-        <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
     </div>
+    <div class="batch-operate-container">
+      <el-select
+        size="small"
+        v-model="operateType" placeholder="批量操作">
+        <el-option
+          v-for="item in operateOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button
+        style="margin-left: 20px"
+        class="search-button"
+        @click="handleBatchOperate()"
+        type="primary"
+        size="small">
+        确定
+      </el-button>
+    </div>
+    <div class="pagination-container">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        layout="total, sizes,prev, pager, next,jumper"
+        :current-page.sync="listQuery.pageNum"
+        :page-size="listQuery.pageSize"
+        :page-sizes="[5,10,15]"
+        :total="total">
+      </el-pagination>
+    </div>
+    <el-dialog
+      title="关闭订单"
+      :visible.sync="closeOrder.dialogVisible" width="30%">
+      <span style="vertical-align: top">操作备注：</span>
+      <el-input
+        style="width: 80%"
+        type="textarea"
+        :rows="5"
+        placeholder="请输入内容"
+        v-model="closeOrder.content">
+      </el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
+  </div>
 </template>
-
 <script>
-    // 从 '@/api/order' 文件中导入多个函数，分别用于获取订单列表、关闭订单以及删除订单等与后端 API 交互的操作
+  import {fetchList,closeOrder,deleteOrder} from '@/api/order'
-    import {fetchList, closeOrder, deleteOrder} from '@/api/order';
+  import {formatDate} from '@/utils/date';
-    // 从 '@/utils/date' 文件中导入 formatDate 函数，可能用于格式化日期相关操作（虽然在模板中未看到调用，但可能在后续完善代码中会用到）
+  import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
-    import {formatDate} from '@/utils/date';
+  const defaultListQuery = {
-    // 导入 LogisticsDialog 组件，可能是用于展示物流相关信息的自定义组件
+    pageNum: 1,
-    import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
+    pageSize: 10,
-
+    orderSn: null,
-    // 定义一个默认的 listQuery 对象，用于初始化查询订单列表的相关参数，设置各属性初始值，如页码、每页数量以及各筛选条件初始为 null
+    receiverKeyword: null,
-    const defaultListQuery = {
+    status: null,
-        pageNum: 1,
+    orderType: null,
-        pageSize: 10,
+    sourceType: null,
-        orderSn: null,
+    createTime: null,
-        receiverKeyword: null,
+  };
-        status: null,
+  export default {
-        orderType: null,
+    name: "orderList",
-        sourceType: null,
+    components:{LogisticsDialog},
-        createTime: null,
+    data() {
-    };
+      return {
-
+        listQuery: Object.assign({}, defaultListQuery),
-    // 此处后续应该是继续定义 Vue 组件的配置对象，包括 data、created、methods 等选项，用于实现组件的具体逻辑，但代码未完整展示，以下是一个大概的结构示例（基于已有代码推测补充）：
+        listLoading: true,
-
+        list: null,
-    export default {
+        total: null,
-        name: '组件名称（这里未定义，可自行补充合适名称）',
+        operateType: null,
-        data() {
+        multipleSelection: [],
-            return {
+        closeOrder:{
-                // 用于存储查询参数，初始通过 Object.assign 复制 defaultListQuery 的默认值
+          dialogVisible:false,
-                listQuery: Object.assign({}, defaultListQuery),
+          content:null,
-                // 用于存储订单列表数据，初始为空数组（此处假设，实际可根据需求初始化）
+          orderIds:[]
-                list: [],
-                // 控制表格加载状态的布尔值，初始为 false（未加载）
-                listLoading: false,
-                // 存储批量操作类型相关的数据，绑定下拉选择框，初始值可设为 null 等（根据具体业务确定）
-                operateType: null,
-                // 存储操作选项数据（如批量操作的具体选项等），是一个数组，每个元素包含 label 和 value 等属性，用于下拉选择框动态生成选项
-                operateOptions: [],
-                // 存储订单状态相关的选项数据，同样是数组结构，用于下拉选择框展示订单状态选项
-                statusOptions: [],
-                // 存储订单分类相关的选项数据，用于下拉选择框展示订单分类选项
-                orderTypeOptions: [],
-                // 存储订单来源相关的选项数据，用于下拉选择框展示订单来源选项
-                sourceTypeOptions: [],
-                // 用于控制关闭订单对话框的显示隐藏以及存储关闭订单时的备注内容等信息的对象
-                closeOrder: {
-                    dialogVisible: false,
-                    content: null
-                },
-                // 控制物流对话框是否可见，初始为 false（推测，根据实际业务逻辑确定）
-                logisticsDialogVisible: false
-            }
-        },
-        created() {
-            // 组件创建时可进行一些初始化操作，比如调用获取订单列表的方法等（此处可调用类似 fetchList 函数并处理返回数据来初始化 list 属性）
-            // 例如：fetchList(this.listQuery).then(response => { this.list = response.data; });
         },
-        methods: {
+        statusOptions: [
-            // 处理查询搜索按钮点击事件的方法，用于向服务器发送查询请求获取符合筛选条件的订单列表，通常会调用 fetchList 函数并处理返回数据更新页面展示
+          {
-            handleSearchList() {
+            label: '待付款',
-                // 示例代码（实际可能需要更多错误处理等逻辑）：
+            value: 0
-                this.listLoading = true;
+          },
-                fetchList(this.listQuery).then(response => {
+          {
-                    this.list = response.data;
+            label: '待发货',
-                    this.listLoading = false;
+            value: 1
-                });
+          },
-            },
+          {
-            // 处理重置按钮点击事件的方法，用于将查询参数恢复到初始状态，重新获取订单列表（可重新调用 handleSearchList 方法或者直接重置 listQuery 属性并获取列表）
+            label: '已发货',
-            handleResetSearch() {
+            value: 2
-                // 示例代码（重置 listQuery 属性）：
+          },
-                this.listQuery = Object.assign({}, defaultListQuery);
+          {
-                this.handleSearchList();
+            label: '已完成',
-            },
+            value: 3
-            // 处理表格行选择变化事件的方法，可根据选择的行数据进行相应业务逻辑处理（比如批量操作时获取选中行的数据等，具体业务而定）
+          },
-            handleSelectionChange(selections) {
+          {
-                // 这里可根据 selections 参数（选中行的数据集合）进行相应逻辑处理
+            label: '已关闭',
-            },
+            value: 4
-            // 处理查看订单按钮点击事件的方法，根据传入的行索引和行数据跳转到订单详情页面或者展示订单详情信息等（具体实现根据业务需求）
+          }
-            handleViewOrder(index, row) {
+        ],
-                // 示例逻辑（比如路由跳转等）：
+        orderTypeOptions: [
-                this.$router.push({path: '/orderDetail', query: {id: row.id}});
+          {
-            },
+            label: '正常订单',
-            // 处理关闭订单按钮点击事件的方法，对于符合条件（
+            value: 0
-     <script>
+          },
-         // 导出一个 Vue 组件配置对象，将其作为默认导出，意味着在其他地方可以通过默认导入的方式使用这个组件
+          {
-         export default {
+            label: '秒杀订单',
-             // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件
+            value: 1
-             name: "orderList",
+          }
-             // 注册组件中使用的子组件，这里注册了 LogisticsDialog 组件（可能是用于展示物流相关信息的自定义组件）
+        ],
-             components: {LogisticsDialog},
+        sourceTypeOptions: [
-             data() {
+          {
-                 return {
+            label: 'PC订单',
-                     // 用于存储查询订单列表的参数，初始通过 Object.assign 复制 defaultListQuery（推测是在外部定义好的默认查询参数对象）的默认值
+            value: 0
-                     listQuery: Object.assign({}, defaultListQuery),
+          },
-                     // 控制表格加载状态的布尔值，初始设为 true，表示正在加载（可能在页面初始化时就开始获取数据）
+          {
-                     listLoading: true,
+            label: 'APP订单',
-                     // 用于存储获取到的订单列表数据，初始设为 null，后续会通过请求获取并赋值实际数据
+            value: 1
-                     list: null,
+          }
-                     // 用于存储符合查询条件的订单总数，初始设为 null，同样会在获取数据时更新
+        ],
-                     total: null,
+        operateOptions: [
-                     // 用于存储批量操作时选择的操作类型（与界面上的批量操作下拉框绑定），初始设为 null
+          {
-                     operateType: null,
+            label: "批量发货",
-                     // 用于存储表格中多选操作时选中的行数据，初始为空数组，会随着用户在表格中的选择操作而更新
+            value: 1
-                     multipleSelection: [],
+          },
-                     // 用于控制关闭订单对话框的显示隐藏、存储关闭订单时的备注内容以及相关订单 id 数组等信息的对象
+          {
-                     closeOrder: {
+            label: "关闭订单",
-                         dialogVisible: false,
+            value: 2
-                         content: null,
+          },
-                         orderIds: []
+          {
-                     },
+            label: "删除订单",
-                     // 定义订单状态相关的选项数组，每个元素包含 label（展示给用户的文本）和 value（对应的值，可能用于与后端交互等），用于下拉选择框展示订单状态选项
+            value: 3
-                     statusOptions: [
+          }
-                         {
+        ],
-                             label: '待付款',
+        logisticsDialogVisible:false
-                             value: 0
+      }
-                         },
+    },
-                         {
+    created() {
-                             label: '待发货',
+      this.getList();
-                             value: 1
+    },
-                         },
+    filters: {
-                         {
+      formatCreateTime(time) {
-                             label: '已发货',
+        let date = new Date(time);
-                             value: 2
+        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-                         },
+      },
-                         {
+      formatPayType(value) {
-                             label: '已完成',
+        if (value === 1) {
-                             value: 3
+          return '支付宝';
-                         },
+        } else if (value === 2) {
-                         {
+          return '微信';
-                             label: '已关闭',
+        } else {
-                             value: 4
+          return '未支付';
-                         }
+        }
-                     ],
+      },
-                     // 定义订单类型相关的选项数组，类似上述，用于下拉选择框展示订单类型选项
+      formatSourceType(value) {
-                     orderTypeOptions: [
+        if (value === 1) {
-                         {
+          return 'APP订单';
-                             label: '正常订单',
+        } else {
-                             value: 0
+          return 'PC订单';
-                         },
+        }
-                         {
+      },
-                             label: '秒杀订单',
+      formatStatus(value) {
-                             value: 1
+        if (value === 1) {
-                         }
+          return '待发货';
-                     ],
+        } else if (value === 2) {
-                     // 定义订单来源相关的选项数组，用于下拉选择框展示订单来源选项
+          return '已发货';
-                     sourceTypeOptions: [
+        } else if (value === 3) {
-                         {
+          return '已完成';
-                             label: 'PC订单',
+        } else if (value === 4) {
-                             value: 0
+          return '已关闭';
-                         },
+        } else if (value === 5) {
-                         {
+          return '无效订单';
-                             label: 'APP订单',
+        } else {
-                             value: 1
+          return '待付款';
-                         }
+        }
-                     ],
+      },
-                     // 定义批量操作相关的选项数组，用于下拉选择框展示可进行的批量操作选项
+    },
-                     operateOptions: [
+    methods: {
-                         {
+      handleResetSearch() {
-                             label: "批量发货",
+        this.listQuery = Object.assign({}, defaultListQuery);
-                             value: 1
+      },
-                         },
+      handleSearchList() {
-                         {
+        this.listQuery.pageNum = 1;
-                             label: "关闭订单",
+        this.getList();
-                             value: 2
+      },
-                         },
+      handleSelectionChange(val){
-                         {
+        this.multipleSelection = val;
-                             label: "删除订单",
+      },
-                             value: 3
+      handleViewOrder(index, row){
-                         }
+        this.$router.push({path:'/oms/orderDetail',query:{id:row.id}})
-                     ],
+      },
-                     // 控制物流对话框是否可见的布尔值，初始设为 false，表示默认不显示，会根据相关操作进行改变
+      handleCloseOrder(index, row){
-                     logisticsDialogVisible: false
+        this.closeOrder.dialogVisible=true;
-                 }
+        this.closeOrder.orderIds=[row.id];
-             },
+      },
-             created() {
+      handleDeliveryOrder(index, row){
-                 // 在组件创建时调用 getList 方法（此处未展示具体实现，但推测是用于向服务器请求获取订单列表数据的函数），用于初始化获取订单列表数据
+        let listItem = this.covertOrder(row);
-                 this.getList();
+        this.$router.push({path:'/oms/deliverOrderList',query:{list:[listItem]}})
-             },
+      },
-             filters: {
+      handleViewLogistics(index, row){
-                 // 名为 formatCreateTime 的过滤器，用于将传入的时间数据（可能是时间戳等格式）格式化为指定的字符串格式（'yyyy-MM-dd hh:mm:ss'）
+        this.logisticsDialogVisible=true;
-                 formatCreateTime(time) {
+      },
-                     let date = new Date(time);
+      handleDeleteOrder(index, row){
-                     return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+        let ids=[];
-                 },
+        ids.push(row.id);
-                 // 根据传入的支付类型值判断并返回对应支付方式的文本表示的过滤器，如 1 代表 '支付宝'，2 代表 '微信'，其他返回 '未支付'
+        this.deleteOrder(ids);
-                 formatPayType(value) {
+      },
-                     if (value === 1) {
+      handleBatchOperate(){
-                         return '支付宝';
+        if(this.multipleSelection==null||this.multipleSelection.length<1){
-                     } else if (value === 2) {
+          this.$message({
-                         return '微信';
+            message: '请选择要操作的订单',
-                     } else {
+            type: 'warning',
-                         return '未支付';
+            duration: 1000
-                     }
+          });
-                 },
+          return;
-                 // 根据传入的订单来源类型值判断并返回对应订单来源文本表示的过滤器，1 代表 'APP订单'，其他返回 'PC订单'
+        }
-                 formatSourceType(value) {
+        if(this.operateType===1){
-                     if (value === 1) {
+          //批量发货
-                         return 'APP订单';
+          let list=[];
-                     } else {
+          for(let i=0;i<this.multipleSelection.length;i++){
-                         return 'PC订单';
+            if(this.multipleSelection[i].status===1){
-                     }
+              list.push(this.covertOrder(this.multipleSelection[i]));
-                 },
+            }
-                 // 根据传入的订单状态值判断并返回对应订单状态文本表示的过滤器，不同值对应不同的订单状态描述文本
+          }
-                 formatStatus(value) {
+          if(list.length===0){
-                     if (value === 1) {
+            this.$message({
-                         return '待发货';
+              message: '选中订单中没有可以发货的订单',
-                     } else if (value === 2) {
+              type: 'warning',
-                         return '已发货';
+              duration: 1000
-                     } else if (value === 3) {
+            });
-                         return '已完成';
+            return;
-                     } else if (value === 4) {
+          }
-                         return '已关闭';
+          this.$router.push({path:'/oms/deliverOrderList',query:{list:list}})
-                     } else if (value === 5) {
+        }else if(this.operateType===2){
-                         return '无效订单';
+          //关闭订单
-                     } else {
+          this.closeOrder.orderIds=[];
-                         return '待付款';
+          for(let i=0;i<this.multipleSelection.length;i++){
-                     }
+            this.closeOrder.orderIds.push(this.multipleSelection[i].id);
-                 },
+          }
-             },
+          this.closeOrder.dialogVisible=true;
-             methods: {
+        }else if(this.operateType===3){
-                 // 处理重置搜索按钮点击事件的方法，将 listQuery 参数重置为默认值（通过复制 defaultListQuery 的值），以便重新进行查询操作
+          //删除订单
-                 handleResetSearch() {
+          let ids=[];
-                     this.listQuery = Object.assign({}, defaultListQuery);
+          for(let i=0;i<this.multipleSelection.length;i++){
-                 },
+            ids.push(this.multipleSelection[i].id);
-                 // 处理查询搜索按钮点击事件的方法，先将查询参数中的页码设置为 1，然后调用 getList 方法（推测用于获取符合条件的订单列表数据）重新获取数据
+          }
-                 handleSearchList() {
+          this.deleteOrder(ids);
-                     this.listQuery.pageNum = 1;
+        }
-                     this.getList();
+      },
-                 },
+      handleSizeChange(val){
-                 // 处理表格行选择变化事件的方法，将传入的选中行数据（val 参数）赋值给 multipleSelection 属性，用于后续对选中行数据的处理
+        this.listQuery.pageNum = 1;
-                 handleSelectionChange(val) {
+        this.listQuery.pageSize = val;
-                     this.multipleSelection = val;
+        this.getList();
-                 },
+      },
-                 // 处理查看订单按钮点击事件的方法，通过 Vue 路由（this.$router）进行页面跳转，跳转到指定的订单详情页面（'/oms/orderDetail'），并传递订单 id 作为查询参数
+      handleCurrentChange(val){
-                 handleViewOrder(index, row) {
+        this.listQuery.pageNum = val;
-                     this.$router.push({path: '/oms/orderDetail', query: {id: row.id}})
+        this.getList();
-                 },
+      },
-                 // 处理关闭订单按钮点击事件的方法，将关闭订单对话框的 visible 属性设置为 true（显示对话框），并将当前点击行对应的订单 id 放入 closeOrder.orderIds 数组中，以便后续操作使用
+      handleCloseOrderConfirm() {
-                 handleCloseOrder(index, row) {
+        if (this.closeOrder.content == null || this.closeOrder.content === '') {
-                     this.closeOrder.dialogVisible = true;
+          this.$message({
-                     this.closeOrder.orderIds = [row.id];
+            message: '操作备注不能为空',
-                 },
+            type: 'warning',
-                 // 处理订单发货按钮点击事件的方法，先调用 covertOrder 方法（此处未展示具体实现，推测是对订单数据进行某种转换处理的函数）处理当前行订单数据，然后通过路由跳转进入发货订单列表页面（'/oms/deliverOrderList'），并传递处理后的订单数据作为查询参数
+            duration: 1000
-                 handleDeliveryOrder(index, row) {
+          });
-                     let listItem = this.covertOrder(row);
+          return;
-                     this.$router.push({path: '/oms/deliverOrderList', query: {list: [listItem]}})
+        }
-                 },
-                 // 处理订单跟踪按钮点击事件的方法，将 logisticsDialogVisible 属性设置为 true，用于显示物流对话框（可能展示订单物流相关信息）
-                 handleViewLogistics(index, row) {
-                     this.logisticsDialogVisible = true;
-                 },
-                 // 处理删除订单按钮点击事件的方法，创建一个数组 ids，将当前点击行对应的订单 id 放入其中，然后调用 deleteOrder 方法（推测用于向服务器发送删除订单请求的函数），传入 ids 数组进行删除操作
-                 handleDeleteOrder(index, row) {
-                     let ids = [];
-                     ids.push(row.id);
-                     this.deleteOrder(ids);
-                 },
-                 // 处理批量操作按钮点击事件的方法，首先判断是否有选中的订单，如果没有则弹出警告提示框告知用户选择要操作的订单并返回，不进行后续操作
-                 handleBatchOperate() {
-                     if (this.multipleSelection == null || this.multipleSelection.length < 1) {
-                         this.$message({
-                             message: '请选择要操作的订单',
-                             type: 'warning',
-                             duration: 1000
-                         });
-                         return;
-                     }
-                     // 如果选择的批量操作类型为 1（批量发货）
-                     if (this.operateType === 1) {
-                         let list = [];
-                         // 遍历选中的行数据，对于状态为 1（待发货，推测根据业务逻辑定义的状态值）的订单，调用 covertOrder 方法处理后放入 list 数组中
-                         for (let i = 0; i < this.multipleSelection.length; i++) {
-                             if (this.multipleSelection[i].status === 1) {
-                                 list.push(this.covertOrder(this.multipleSelection[i]));
-                             }
-                         }
-                         // 如果处理后的可发货订单列表长度为 0，则弹出警告提示框告知用户选中订单中没有可以发货的订单，并返回，不进行路由跳转等后续操作
-                         if (list.length === 0) {
-                             this.$message({
-                                 message: '选中订单中没有可以发货的订单',
-                                 type: 'warning',
-                                 duration: 1000
-                             });
-                             return;
-                         }
-                         // 如果有可发货的订单，通过路由跳转到发货订单列表页面（'/oms/deliverOrderList'），并传递处理后的订单列表作为查询参数
-                         this.$router.push({path: '/oms/deliverOrderList', query: {list: list}})
-                     } else if (this.operateType === 2) {
-                         // 如果选择的批量操作类型为 2（关闭订单）
-                         // 先清空 closeOrder.orderIds 数组，然后遍历选中的行数据，将每行对应的订单 id 放入 closeOrder.orderIds 数组中，最后将关闭订单对话框的 visible 属性设置为 true，显示对话框用于输入关闭订单备注等操作
-                         this.closeOrder.orderIds = [];
-                         for (let i = 0; i < this.multipleSelection.length; i++) {
-                             this.closeOrder.orderIds.push(this.multipleSelection[i].id);
-                         }
-                         this.closeOrder.dialogVisible = true;
-                     } else if (this.operateType === 3) {
-                         // 如果选择的批量操作类型为 3（删除订单）
-                         let ids = [];
-                         // 遍历选中的行数据，将每行对应的订单 id 放入 ids 数组中，然后调用 deleteOrder 方法（推测用于向服务器发送删除订单请求的函数），传入 ids 数组进行删除操作
-                         for (let i = 0; i < this.multipleSelection.length; i++) {
-                             ids.push(this.multipleSelection[i].id);
-                         }
-                         this.deleteOrder(ids);
-                     }
-                 },
-                 // 处理分页组件中页面大小改变事件的方法，当用户选择不同的每页显示数量时，先将查询参数中的页码设置为 1，然后更新查询参数中的每页数量为新选择的值，最后调用 getList 方法重新获取符合新条件的订单列表数据
-                 handleSizeChange(val) {
-                     this.listQuery.pageNum = 1;
-                     this.listQuery.pageSize = val;
-                     this.getList();
-                 },
-                 // 处理分页组件中当前页码改变事件的方法，当用户切换到不同页码时，更新查询参数中的页码为新的页码值，然后调用 getList 方法获取对应页码的订单列表数据
-                 handleCurrentChange(val) {
-                     this.listQuery.pageNum = val;
-                     this.getList();
-                 },
-                 // 处理关闭订单对话框中确定按钮点击事件的方法，首先判断关闭订单时输入的备注内容是否为空，如果为空则弹出警告提示框告知用户操作备注不能为空，并返回，不进行后续关闭订单的实际操作
-                 handleCloseOrderConfirm() {
-                     if (this.closeOrder.content == null || this.closeOrder.content === '') {
-                         this.$message({
-                             message: '操作备注不能为空',
-                             type: 'warning',
-                             duration: 1000
-                         });
-                         return;
-                     }
-                     // 此处后续应该还有实际执行关闭订单的相关逻辑代码，比如向服务器发送关闭订单请求等，但代码未完整展示
-
-                 }
-             }
-         }
-     </script>
-
-
-
         let params = new URLSearchParams();
         params.append('ids', this.closeOrder.orderIds);
         params.append('note', this.closeOrder.content);

src/views/oms/order/setting.vue

@@ -1,163 +1,127 @@
-<template>
+<template> 
-    <!-- 使用 el-card 组件创建一个卡片式的容器，设置类名为 "form-container"，并通过 shadow="never" 属性取消卡片的阴影效果 -->
+  <el-card class="form-container" shadow="never">
-    <el-card class="form-container" shadow="never">
+    <el-form :model="orderSetting"
-        <!-- el-form 组件用于创建表单，它绑定了名为 "orderSetting" 的数据模型，设置了表单的引用名称为 "orderSettingForm"，同时指定了表单验证规则 "rules"，以及标签的宽度为 150px -->
+             ref="orderSettingForm"
-        <el-form :model="orderSetting"
+             :rules="rules"
-                 ref="orderSettingForm"
+             label-width="150px">
-                 :rules="rules"
+      <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
-                 label-width="150px">
+        <el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
-            <!-- el-form-item 组件用于定义表单中的每一个表单项，此处是针对 "秒杀订单超过" 这一设置项的表单项，通过 prop 属性指定了验证对应的字段名 -->
+          <template slot="append">分</template>
-            <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
+        </el-input>
-                <!-- el-input 组件创建一个输入框，通过 v-model 指令双向绑定了 "orderSetting.flashOrderOvertime" 数据，意味着用户在输入框中输入的值会实时更新到对应的数据属性中，同时设置了类名 "input-width" 用于控制输入框宽度 -->
+        <span class="note-margin">未付款，订单自动关闭</span>
-                <el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
+      </el-form-item>
-                    <!-- 使用 slot="append" 插槽在输入框后面添加一个单位文本 "分"，用于提示用户输入的时间单位 -->
+      <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
-                    <template slot="append">分</template>
+        <el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
-                </el-input>
+          <template slot="append">分</template>
-                <!-- 一个普通的 <span> 标签，用于显示一段提示文本，设置了类名 "note-margin" 来控制其左边距，提示内容为未付款时订单自动关闭的相关说明 -->
+        </el-input>
-                <span class="note-margin">未付款，订单自动关闭</span>
+        <span class="note-margin">未付款，订单自动关闭</span>
-            </el-form-item>
+      </el-form-item>
-            <!-- 与上面类似的表单项，针对 "正常订单超过" 的设置，同样有输入框及对应的提示信息 -->
+      <el-form-item label="发货超过：" prop="confirmOvertime">
-            <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
+        <el-input v-model="orderSetting.confirmOvertime" class="input-width">
-                <el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
+          <template slot="append">天</template>
-                    <template slot="append">分</template>
+        </el-input>
-                </el-input>
+        <span class="note-margin">未收货，订单自动完成</span>
-                <span class="note-margin">未付款，订单自动关闭</span>
+      </el-form-item>
-            </el-form-item>
+      <el-form-item label="订单完成超过：" prop="finishOvertime">
-            <!-- 针对 "发货超过" 的表单项，输入框用于输入天数，后面跟着相应的提示文本 -->
+        <el-input v-model="orderSetting.finishOvertime" class="input-width">
-            <el-form-item label="发货超过：" prop="confirmOvertime">
+          <template slot="append">天</template>
-                <el-input v-model="orderSetting.confirmOvertime" class="input-width">
+        </el-input>
-                    <template slot="append">天</template>
+        <span class="note-margin">自动结束交易，不能申请售后</span>
-                </el-input>
+      </el-form-item>
-                <span class="note-margin">未收货，订单自动完成</span>
+      <el-form-item label="订单完成超过：" prop="commentOvertime">
-            </el-form-item>
+        <el-input v-model="orderSetting.commentOvertime" class="input-width">
-            <!-- 针对 "订单完成超过" 的表单项，此处有重复的标签名，但应是不同业务场景下的时间设置，同样有输入框和对应的提示内容 -->
+          <template slot="append">天</template>
-            <el-form-item label="订单完成超过：" prop="finishOvertime">
+        </el-input>
-                <el-input v-model="orderSetting.finishOvertime" class="input-width">
+        <span class="note-margin">自动五星好评</span>
-                    <template slot="append">天</template>
+      </el-form-item>
-                </el-input>
+      <el-form-item>
-                <span class="note-margin">自动结束交易，不能申请售后</span>
+        <el-button
-            </el-form-item>
+          @click="confirm('orderSettingForm')"
-            <!-- 另一个针对 "订单完成超过" 的表单项，可能对应不同的业务逻辑，如自动五星好评相关的时间设置，同样具备输入框和提示文本 -->
+          type="primary">提交</el-button>
-            <el-form-item label="订单完成超过：" prop="commentOvertime">
+      </el-form-item>
-                <el-input v-model="orderSetting.commentOvertime" class="input-width">
+    </el-form>
-                    <template slot="append">天</template>
+  </el-card>
-                </el-input>
-                <span class="note-margin">自动五星好评</span>
-            </el-form-item>
-            <!-- 定义一个表单项，内部放置一个 el-button 按钮，通过 @click 指令绑定了 "confirm('orderSettingForm')" 方法，即点击按钮时会调用名为 "confirm" 的方法并传入 "orderSettingForm" 参数，按钮类型设置为 "primary"，文本显示为 "提交" -->
-            <el-form-item>
-                <el-button
-                        @click="confirm('orderSettingForm')"
-                        type="primary">提交</el-button>
-            </el-form-item>
-        </el-form>
-    </el-card>
 </template>
-
 <script>
-    // 从 '@/api/orderSetting' 模块中导入两个函数，分别是 "getOrderSetting" 和 "updateOrderSetting"，推测这两个函数用于从后端获取订单设置信息以及向后端提交订单设置的更新请求
+  import {getOrderSetting,updateOrderSetting} from '@/api/orderSetting';
-    import {getOrderSetting, updateOrderSetting} from '@/api/orderSetting';
+  const defaultOrderSetting = {
-
+    id: null,
-    // 定义一个名为 "defaultOrderSetting" 的常量对象，用于初始化订单设置相关的数据，各个属性分别对应不同业务场景下的时间设置，初始值都设为 0 或 null
+    flashOrderOvertime: 0,
-    const defaultOrderSetting = {
+    normalOrderOvertime: 0,
-        id: null,
+    confirmOvertime: 0,
-        flashOrderOvertime: 0,
+    finishOvertime: 0,
-        normalOrderOvertime: 0,
+    commentOvertime: 0
-        confirmOvertime: 0,
+  };
-        finishOvertime: 0,
+  const checkTime = (rule, value, callback) => {
-        commentOvertime: 0
+    if (!value) {
-    };
+      return callback(new Error('时间不能为空'));
-
+    }
-    // 定义一个名为 "checkTime" 的函数，它作为表单验证的回调函数使用，用于验证输入的时间值是否合法
+    console.log("checkTime",value);
-    const checkTime = (rule, value, callback) => {
+    let intValue = parseInt(value);
-        // 如果输入的值为空（即用户未输入任何内容），则通过 callback 函数返回一个 Error 对象，表示时间不能为空，触发表单验证的错误提示
+    if (!Number.isInteger(intValue)) {
-        if (!value) {
+      return callback(new Error('请输入数字值'));
-            return callback(new Error('时间不能为空'));
+    }
-        }
+    callback();
-        console.log("checkTime", value);
+  };
-        // 将输入的值通过 parseInt 函数尝试转换为整数，这里是为了确保用户输入的是有效的数字
+  export default {
-        let intValue = parseInt(value);
+    name: 'orderSetting',
-        // 如果转换后的结果不是整数（说明用户输入的不是合法的数字格式），则通过 callback 函数返回一个 Error 对象，提示用户请输入数字值，同样触发表单验证的错误提示
+    data() {
-        if (!Number.isInteger(intValue)) {
+      return {
-            return callback(new Error('请输入数字值'));
+        orderSetting: Object.assign({}, defaultOrderSetting),
+        rules: {
+          flashOrderOvertime:{validator: checkTime, trigger: 'blur' },
+          normalOrderOvertime:{validator: checkTime, trigger: 'blur' },
+          confirmOvertime: {validator: checkTime, trigger: 'blur' },
+          finishOvertime: {validator: checkTime, trigger: 'blur' },
+          commentOvertime:{validator: checkTime, trigger: 'blur' }
         }
-        // 如果输入的值通过了上述的验证条件（非空且为整数），则调用 callback 函数，不传入参数，表示验证通过
+      }
-        callback();
+    },
-    };
+    created(){
-
+      this.getDetail();
-    // 导出一个 Vue 组件的配置对象，用于定义组件的各种属性、数据、方法等内容
+    },
-    export default {
+    methods:{
-        // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件，这里组件名为 "orderSetting"
+      confirm(formName){
-        name: 'orderSetting',
+        this.$refs[formName].validate((valid) => {
-        data() {
+          if (valid) {
-            return {
+            this.$confirm('是否要提交修改?', '提示', {
-                // "orderSetting" 数据对象，通过 Object.assign 方法将 "defaultOrderSetting" 的属性值复制过来作为初始值，后续用户在表单中修改的值会更新到这个对象中
+              confirmButtonText: '确定',
-                orderSetting: Object.assign({}, defaultOrderSetting),
+              cancelButtonText: '取消',
-                // 定义表单验证规则的对象，每个属性对应表单中的一个输入项的验证规则，这里每个输入项都使用了 "checkTime" 函数作为验证器，并且触发验证的时机是在输入框失去焦点（'blur'）时
+              type: 'warning'
-                rules: {
+            }).then(() => {
-                    flashOrderOvertime: {validator: checkTime, trigger: 'blur'},
+              updateOrderSetting(1,this.orderSetting).then(response=>{
-                    normalOrderOvertime: {validator: checkTime, trigger: 'blur'},
+                this.$message({
-                    confirmOvertime: {validator: checkTime, trigger: 'blur'},
+                  type: 'success',
-                    finishOvertime: {validator: checkTime, trigger: 'blur'},
+                  message: '提交成功!',
-                    commentOvertime: {validator: checkTime, trigger: 'blur'}
+                  duration:1000
-                }
-            }
-        },
-        created() {
-            // 在组件被创建时（生命周期钩子函数），调用 "getDetail" 方法，推测这个方法用于获取订单设置的初始详细信息并填充到表单中
-            this.getDetail();
-        },
-        methods: {
-            // 定义名为 "confirm" 的方法，用于处理提交表单的操作，它接收一个参数 "formName"，用于指定要验证的表单名称
-            confirm(formName) {
-                // 通过表单的引用（this.$refs[formName]）调用 validate 方法来对表单进行验证，验证结果会通过回调函数的参数 "valid" 返回
-                this.$refs[formName].validate((valid) => {
-                    // 如果验证通过（即 "valid" 的值为 true）
-                    if (valid) {
-                        // 使用 $confirm 方法弹出一个确认框，询问用户是否要提交修改，配置了确认按钮文本、取消按钮文本以及提示框的类型为 "warning"（警告类型，通常显示为黄色背景等样式）
-                        this.$confirm('是否要提交修改?', '提示', {
-                            confirmButtonText: '确定',
-                            cancelButtonText: '取消',
-                            type: 'warning'
-                        }).then(() => {
-                            // 如果用户在确认框中点击了 "确定" 按钮，则调用 "updateOrderSetting" 函数，向后端提交订单设置的更新请求，传入参数 1（具体含义可能根据后端接口定义，可能是固定的某个标识等）和当前的 "orderSetting" 对象（包含了用户在表单中修改后的设置值）
-                            // 在请求成功后（通过 then 方法的回调），使用 $message 方法弹出一个提示框，显示 "提交成功!" 的消息，并且设置提示框的显示时长为 1000 毫秒（即 1 秒）
-                            updateOrderSetting(1, this.orderSetting).then(response => {
-                                this.$message({
-                                    type: 'success',
-                                    message: '提交成功!',
-                                    duration: 1000
-                                });
-                            })
-                        });
-                    } else {
-                        // 如果表单验证不通过（即 "valid" 的值为 false），则使用 $message 方法弹出一个警告类型的提示框，显示 "提交参数不合法" 的消息，告知用户输入的参数不符合要求
-                        this.$message({
-                            message: '提交参数不合法',
-                            type: 'warning'
-                        });
-                        return false;
-                    }
                 });
-            },
+              })
-            // 定义名为 "getDetail" 的方法，用于获取订单设置的详细信息
+            });
-            getDetail() {
+          } else {
-                // 调用 "getOrderSetting" 函数（从后端获取订单设置信息），传入参数 1（同样，具体含义根据后端接口而定），在获取到信息后（通过 then 方法的回调），将返回的数据赋值给 "orderSetting" 对象，这样表单就能展示出已有的订单设置数据，方便用户进行修改等操作
+            this.$message({
-                getOrderSetting(1).then(response => {
+              message: '提交参数不合法',
-                    this.orderSetting = response.data;
+              type: 'warning'
-                })
+            });
-            }
+            return false;
-        }
+          }
+        });
+      },
+      getDetail(){
+        getOrderSetting(1).then(response=>{
+          this.orderSetting=response.data;
+        })
+      }
     }
+  }
 </script>
-
 <style scoped>
-    /* 定义类名为 "input-width" 的样式规则，设置元素的宽度为父元素宽度的 50%，这个类名应用到了输入框上，用于控制输入框在表单中的宽度占比，使其看起来更美观、布局更合理 */
+  .input-width {
- .input-width {
+    width: 50%;
-        width: 50%;
+  }
-    }
+
-    /* 定义类名为 "note-margin" 的样式规则，设置元素的左边距为 15 像素，这个类名应用到了提示文本的 <span> 标签上，用于控制提示文本与输入框之间的距离，使其有合适的间隔，视觉效果更好 */
+  .note-margin {
- .note-margin {
+    margin-left: 15px;
-        margin-left: 15px;
+  }
-    }
 </style>
+
+

src/views/pms/brand/add.vue

@@ -1,19 +1,14 @@
-<template>
+<template> 
-  <!-- 使用 BrandDetail 组件并传递 is-edit 属性为 false，表示新增品牌模式 -->
+  <brand-detail :is-edit='false'></brand-detail>
-  <brand-detail :is-edit="false"></brand-detail>
 </template>
-
 <script>
-import BrandDetail from "./components/BrandDetail"; // 导入 BrandDetail 组件
+  import BrandDetail from './components/BrandDetail'
-
+  export default {
-export default {
+    name: 'addBrand',
-  name: "addBrand", // 组件名称，用于在调试或开发工具中标识组件
+    components: { BrandDetail }
-  components: {
+  }
-    BrandDetail, // 注册子组件 BrandDetail
-  },
-};
 </script>
-
 <style>
-/* 样式部分：目前为空，可根据需求添加页面样式 */
 </style>
+
+

src/views/pms/brand/components/BrandDetail.vue

@@ -1,168 +1,145 @@
-<template>
+<template> 
-  <!-- 页面卡片容器 -->
   <el-card class="form-container" shadow="never">
-    <!-- 表单定义 -->
+    <el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
-    <el-form :model="brand" :rules="rules" ref="brandForm" label-width="150px">
-      <!-- 品牌名称输入框 -->
       <el-form-item label="品牌名称：" prop="name">
         <el-input v-model="brand.name"></el-input>
       </el-form-item>
-
-      <!-- 品牌首字母输入框 -->
       <el-form-item label="品牌首字母：">
         <el-input v-model="brand.firstLetter"></el-input>
       </el-form-item>
-
-      <!-- 品牌LOGO上传组件 -->
       <el-form-item label="品牌LOGO：" prop="logo">
         <single-upload v-model="brand.logo"></single-upload>
       </el-form-item>
-
-      <!-- 品牌专区大图上传组件 -->
       <el-form-item label="品牌专区大图：">
         <single-upload v-model="brand.bigPic"></single-upload>
       </el-form-item>
-
-      <!-- 品牌故事文本域 -->
       <el-form-item label="品牌故事：">
         <el-input
           placeholder="请输入内容"
           type="textarea"
           v-model="brand.brandStory"
-          :autosize="true"
+          :autosize="true"></el-input>
-        ></el-input>
       </el-form-item>
-
-      <!-- 排序输入框（数字类型） -->
       <el-form-item label="排序：" prop="sort">
         <el-input v-model.number="brand.sort"></el-input>
       </el-form-item>
-
-      <!-- 是否显示单选按钮组 -->
       <el-form-item label="是否显示：">
         <el-radio-group v-model="brand.showStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 品牌制造商单选按钮组 -->
       <el-form-item label="品牌制造商：">
         <el-radio-group v-model="brand.factoryStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 提交和重置按钮 -->
       <el-form-item>
-        <el-button type="primary" @click="onSubmit('brandForm')">提交</el-button>
+        <el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
-        <el-button v-if="!isEdit" @click="resetForm('brandForm')">重置</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
-
 <script>
-import { createBrand, getBrand, updateBrand } from "@/api/brand";
+  import {createBrand, getBrand, updateBrand} from '@/api/brand'
-import SingleUpload from "@/components/Upload/singleUpload";
+  import SingleUpload from '@/components/Upload/singleUpload'
-
+  const defaultBrand={
-export default {
+    bigPic: '',
-  name: "BrandDetail", // 组件名称
+    brandStory: '',
-  components: {
+    factoryStatus: 0,
-    SingleUpload, // 注册上传组件
+    firstLetter: '',
-  },
+    logo: '',
-  props: {
+    name: '',
-    // 是否编辑模式的标志
+    showStatus: 0,
-    isEdit: {
+    sort: 0
-      type: Boolean,
+  };
-      default: false,
+  export default {
+    name: 'BrandDetail',
+    components:{SingleUpload},
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
+    data() {
-  data() {
+      return {
-    // 定义表单默认数据和校验规则
+        brand:Object.assign({}, defaultBrand),
-    const defaultBrand = {
+        rules: {
-      bigPic: "", // 品牌大图
+          name: [
-      brandStory: "", // 品牌故事
+            {required: true, message: '请输入品牌名称', trigger: 'blur'},
-      factoryStatus: 0, // 是否品牌制造商
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-      firstLetter: "", // 品牌首字母
+          ],
-      logo: "", // 品牌LOGO
+          logo: [
-      name: "", // 品牌名称
+            {required: true, message: '请输入品牌logo', trigger: 'blur'}
-      showStatus: 0, // 是否显示
+          ],
-      sort: 0, // 排序
+          sort: [
-    };
+            {type: 'number', message: '排序必须为数字'}
-
+          ],
-    return {
-      brand: Object.assign({}, defaultBrand), // 表单数据初始化
-      rules: {
-        name: [
-          { required: true, message: "请输入品牌名称", trigger: "blur" },
-          { min: 2, max: 140, message: "长度在 2 到 140 个字符", trigger: "blur" },
-        ],
-        logo: [{ required: true, message: "请输入品牌logo", trigger: "blur" }],
-        sort: [{ type: "number", message: "排序必须为数字" }],
-      },
-    };
-  },
-  created() {
-    // 根据编辑模式加载数据
-    if (this.isEdit) {
-      getBrand(this.$route.query.id).then((response) => {
-        this.brand = response.data; // 加载品牌数据
-      });
-    } else {
-      this.brand = Object.assign({}, this.defaultBrand); // 重置表单
-    }
-  },
-  methods: {
-    // 提交表单
-    onSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.$confirm("是否提交数据", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-          }).then(() => {
-            if (this.isEdit) {
-              // 编辑模式下更新品牌数据
-              updateBrand(this.$route.query.id, this.brand).then(() => {
-                this.$refs[formName].resetFields();
-                this.$message({
-                  message: "修改成功",
-                  type: "success",
-                  duration: 1000,
-                });
-                this.$router.back();
-              });
-            } else {
-              // 新增品牌数据
-              createBrand(this.brand).then(() => {
-                this.$refs[formName].resetFields();
-                this.brand = Object.assign({}, this.defaultBrand);
-                this.$message({
-                  message: "提交成功",
-                  type: "success",
-                  duration: 1000,
-                });
-              });
-            }
-          });
-        } else {
-          this.$message({
-            message: "验证失败",
-            type: "error",
-            duration: 1000,
-          });
-          return false;
         }
-      });
+      }
     },
-    // 重置一下表单
+    created() {
-    resetForm(formName) {
+      if (this.isEdit) {
-      this.$refs[formName].resetFields();
+        getBrand(this.$route.query.id).then(response => {
-      this.brand = Object.assign({}, this.defaultBrand);
+          this.brand = response.data;
+        });
+      }else{
+        this.brand = Object.assign({},defaultBrand);
+      }
     },
-  },
+    methods: {
-};
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$confirm('是否提交数据', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              if (this.isEdit) {
+                updateBrand(this.$route.query.id, this.brand).then(response => {
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration:1000
+                  });
+                  this.$router.back();
+                });
+              } else {
+                createBrand(this.brand).then(response => {
+                  this.$refs[formName].resetFields();
+                  this.brand = Object.assign({},defaultBrand);
+                  this.$message({
+                    message: '提交成功',
+                    type: 'success',
+                    duration:1000
+                  });
+                });
+              }
+            });
+
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration:1000
+            });
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+        this.brand = Object.assign({},defaultBrand);
+      }
+    }
+  }
 </script>
+<style>
+</style>
+
+

src/views/pms/brand/index.vue

@@ -1,39 +1,28 @@
-<template>
+<template> 
-  <!-- 页面容器 -->
   <div class="app-container">
-    <!-- 筛选搜索区域 -->
     <el-card class="filter-container" shadow="never">
-      <div>
+        <div>
-        <!-- 搜索标题和按钮 -->
+          <i class="el-icon-search"></i>
-        <i class="el-icon-search"></i>
+          <span>筛选搜索</span>
-        <span>筛选搜索</span>
+          <el-button
-        <el-button
+            style="float: right"
-          style="float: right"
+            @click="searchBrandList()"
-          @click="searchBrandList()"
+            type="primary"
-          type="primary"
+            size="small">
-          size="small">
+            查询结果
-          查询结果
+          </el-button>
-        </el-button>
+        </div>
-      </div>
+        <div style="margin-top: 15px">
-      <!-- 筛选条件 -->
+          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-      <div style="margin-top: 15px">
+            <el-form-item label="输入搜索：">
-        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+              <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
-          <el-form-item label="输入搜索：">
+            </el-form-item>
-            <el-input
+          </el-form>
-              style="width: 203px"
+        </div>
-              v-model="listQuery.keyword"
-              placeholder="品牌名称/关键字">
-            </el-input>
-          </el-form-item>
-        </el-form>
-      </div>
     </el-card>
-
-    <!-- 操作区域 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
-      <!-- 添加品牌按钮 -->
       <el-button
         class="btn-add"
         @click="addBrand()"
@@ -41,35 +30,26 @@
         添加
       </el-button>
     </el-card>
-
-    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table
+      <el-table ref="brandTable"
-        ref="brandTable"
+                :data="list"
-        :data="list"
+                style="width: 100%"
-        style="width: 100%"
+                @selection-change="handleSelectionChange"
-        @selection-change="handleSelectionChange"
+                v-loading="listLoading"
-        v-loading="listLoading"
+                border>
-        border>
-        <!-- 表格列：多选 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
-        <!-- 表格列：编号 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.id }}</template>
+          <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-        <!-- 表格列：品牌名称 -->
         <el-table-column label="品牌名称" align="center">
-          <template slot-scope="scope">{{ scope.row.name }}</template>
+          <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
-        <!-- 表格列：品牌首字母 -->
         <el-table-column label="品牌首字母" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.firstLetter }}</template>
+          <template slot-scope="scope">{{scope.row.firstLetter}}</template>
         </el-table-column>
-        <!-- 表格列：排序 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.sort }}</template>
+          <template slot-scope="scope">{{scope.row.sort}}</template>
         </el-table-column>
-        <!-- 表格列：品牌制造商（开关操作） -->
         <el-table-column label="品牌制造商" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -80,7 +60,6 @@
             </el-switch>
           </template>
         </el-table-column>
-        <!-- 表格列：是否显示（开关操作） -->
         <el-table-column label="是否显示" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -91,42 +70,41 @@
             </el-switch>
           </template>
         </el-table-column>
-        <!-- 表格列：商品和评价相关信息 -->
         <el-table-column label="相关" width="220" align="center">
           <template slot-scope="scope">
             <span>商品：</span>
             <el-button
               size="mini"
               type="text"
-              @click="getProductList(scope.$index, scope.row)">
+              @click="getProductList(scope.$index, scope.row)">100
-              100
             </el-button>
             <span>评价：</span>
             <el-button
               size="mini"
               type="text"
-              @click="getProductCommentList(scope.$index, scope.row)">
+              @click="getProductCommentList(scope.$index, scope.row)">1000
-              1000
             </el-button>
           </template>
         </el-table-column>
-        <!-- 表格列：操作按钮（编辑和删除） -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
-            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">
+            <el-button
-              编辑
+              size="mini"
+              @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
-            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
+            <el-button
-              删除
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 批量操作区域 -->
     <div class="batch-operate-container">
-      <el-select size="small" v-model="operateType" placeholder="批量操作">
+      <el-select
+        size="small"
+        v-model="operateType" placeholder="批量操作">
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -136,102 +114,196 @@
       </el-select>
       <el-button
         style="margin-left: 20px"
+        class="search-button"
         @click="handleBatchOperate()"
         type="primary"
         size="small">
         确定
       </el-button>
     </div>
-
-    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, sizes,prev, pager, next,jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5, 10, 15]"
+        :page-sizes="[5,10,15]"
         :current-page.sync="listQuery.pageNum"
         :total="total">
       </el-pagination>
     </div>
   </div>
 </template>
-
 <script>
-import { fetchList, updateShowStatus, updateFactoryStatus, deleteBrand } from "@/api/brand";
+  import {fetchList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand'
 
-export default {
+  export default {
-  name: "brandList", // 组件名称
+    name: 'brandList',
-  data() {
+    data() {
-    return {
+      return {
-      operates: [
+        operates: [
-        { label: "显示品牌", value: "showBrand" },
+          {
-        { label: "隐藏品牌", value: "hideBrand" },
+            label: "显示品牌",
-      ],
+            value: "showBrand"
-      operateType: null, // 批量操作类型
+          },
-      listQuery: {
+          {
-        keyword: null,
+            label: "隐藏品牌",
-        pageNum: 1,
+            value: "hideBrand"
-        pageSize: 10,
+          }
-      },
+        ],
-      list: null, // 品牌数据列表
+        operateType: null,
-      total: null, // 数据总数
+        listQuery: {
-      listLoading: true, // 加载状态
+          keyword: null,
-      multipleSelection: [], // 多选数据
+          pageNum: 1,
-    };
+          pageSize: 10
-  },
+        },
-  created() {
+        list: null,
-    this.getList(); // 初始化加载列表数据
+        total: null,
-  },
+        listLoading: true,
-  methods: {
+        multipleSelection: []
-    // 获取品牌列表
+      }
-    getList() {
-      this.listLoading = true;
-      fetchList(this.listQuery).then((response) => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.listLoading = false;
-      });
     },
-    // 查询品牌
+    created() {
-    searchBrandList() {
-      this.listQuery.pageNum = 1;
       this.getList();
     },
-    // 批量操作
+    methods: {
-    handleBatchOperate() {
+      getList() {
-      console.log(this.multipleSelection);
+        this.listLoading = true;
-    },
+        fetchList(this.listQuery).then(response => {
-    // 添加品牌
+          this.listLoading = false;
-    addBrand() {
+          this.list = response.data.list;
-      this.$router.push({ path: "/pms/addBrand" });
+          this.total = response.data.total;
-    },
+          this.totalPage = response.data.totalPage;
-    // 更新品牌状态
+          this.pageSize = response.data.pageSize;
-    handleUpdate(index, row) {
+        });
-      this.$router.push({ path: "/pms/updateBrand", query: { id: row.id } });
+      },
-    },
+      handleSelectionChange(val) {
-    // 删除品牌
+        this.multipleSelection = val;
-    handleDelete(index, row) {
+      },
-      deleteBrand(row.id).then(() => {
+      handleUpdate(index, row) {
-        this.$message({ message: "删除成功", type: "success" });
+        this.$router.push({path: '/pms/updateBrand', query: {id: row.id}})
+      },
+      handleDelete(index, row) {
+        this.$confirm('是否要删除该品牌', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteBrand(row.id).then(response => {
+            this.$message({
+              message: '删除成功',
+              type: 'success',
+              duration: 1000
+            });
+            this.getList();
+          });
+        });
+      },
+      getProductList(index, row) {
+        console.log(index, row);
+      },
+      getProductCommentList(index, row) {
+        console.log(index, row);
+      },
+      handleFactoryStatusChange(index, row) {
+        var data = new URLSearchParams();
+        data.append("ids", row.id);
+        data.append("factoryStatus", row.factoryStatus);
+        updateFactoryStatus(data).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
+        }).catch(error => {
+          if (row.factoryStatus === 0) {
+            row.factoryStatus = 1;
+          } else {
+            row.factoryStatus = 0;
+          }
+        });
+      },
+      handleShowStatusChange(index, row) {
+        let data = new URLSearchParams();
+        ;
+        data.append("ids", row.id);
+        data.append("showStatus", row.showStatus);
+        updateShowStatus(data).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
+        }).catch(error => {
+          if (row.showStatus === 0) {
+            row.showStatus = 1;
+          } else {
+            row.showStatus = 0;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
         this.getList();
-      });
+      },
-    },
+      handleCurrentChange(val) {
-    // 分页事件
+        this.listQuery.pageNum = val;
-    handleSizeChange(val) {
+        this.getList();
-      this.listQuery.pageSize = val;
+      },
-      this.getList();
+      searchBrandList() {
-    },
+        this.listQuery.pageNum = 1;
-    handleCurrentChange(val) {
+        this.getList();
-      this.listQuery.pageNum = val;
+      },
-      this.getList();
+      handleBatchOperate() {
-    },
+        console.log(this.multipleSelection);
-  },
+        if (this.multipleSelection < 1) {
-};
+          this.$message({
+            message: '请选择一条记录',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        let showStatus = 0;
+        if (this.operateType === 'showBrand') {
+          showStatus = 1;
+        } else if (this.operateType === 'hideBrand') {
+          showStatus = 0;
+        } else {
+          this.$message({
+            message: '请选择批量操作类型',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        let ids = [];
+        for (let i = 0; i < this.multipleSelection.length; i++) {
+          ids.push(this.multipleSelection[i].id);
+        }
+        let data = new URLSearchParams();
+        data.append("ids", ids);
+        data.append("showStatus", showStatus);
+        updateShowStatus(data).then(response => {
+          this.getList();
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
+        });
+      },
+      addBrand() {
+        this.$router.push({path: '/pms/addBrand'})
+      }
+    }
+  }
 </script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
 
-<style lang="scss" scoped>
-/* 自定义样式 */
 </style>
+
+

src/views/pms/brand/update.vue

@@ -1,19 +1,14 @@
-<template>
+<template> 
-  <!-- 使用 BrandDetail 组件，并传递 is-edit 属性为 true，表示编辑品牌模式 -->
+  <brand-detail :is-edit='true'></brand-detail>
-  <brand-detail :is-edit="true"></brand-detail>
 </template>
-
 <script>
-import BrandDetail from './components/BrandDetail'; // 导入 BrandDetail 组件
+  import BrandDetail from './components/BrandDetail'
-
+  export default {
-export default {
+    name: 'updateBrand',
-  name: 'updateBrand', // 组件名称，用于标识当前页面或调试时使用
+    components: { BrandDetail }
-  components: {
+  }
-    BrandDetail, // 注册 BrandDetail 组件，使其可以在模板中使用
-  },
-};
 </script>
-
 <style>
-/* 样式部分：暂无样式定义，保留扩展空间 */
 </style>
+
+

src/views/pms/product/add.vue

@@ -1,19 +1,12 @@
-<template>
+<template> 
-  <!-- 添加商品页面的根组件 -->
+  <product-detail :is-edit='false'></product-detail>
-  <product-detail :is-edit="false"></product-detail>
 </template>
-
 <script>
-import ProductDetail from './components/ProductDetail'; // 导入 ProductDetail 组件
+  import ProductDetail from './components/ProductDetail'
-
+  export default {
-export default {
+    name: 'addProduct',
-  name: 'addProduct', // 组件名称，用于标识当前页面
+    components: { ProductDetail }
-  components: {
+  }
-    ProductDetail, // 注册 ProductDetail 组件
-  },
-};
 </script>
-
 <style>
-/* 样式部分：暂无样式定义，根据需求可添加 */
 </style>

src/views/pms/product/components/ProductAttrDetail.vue

@@ -1,15 +1,10 @@
 <template>
-  <!-- 整个表单容器 -->
   <div style="margin-top: 50px">
-    <!-- 表单内容区域 -->
     <el-form :model="value" ref="productAttrForm" label-width="120px" class="form-inner-container" size="small">
-
-      <!-- 属性类型选择 -->
       <el-form-item label="属性类型：">
-        <el-select
+        <el-select v-model="value.productAttributeCategoryId"
-          v-model="value.productAttributeCategoryId"
+                   placeholder="请选择属性类型"
-          placeholder="请选择属性类型"
+                   @change="handleProductAttrChange">
-          @change="handleProductAttrChange">
           <el-option
             v-for="item in productAttributeCategoryOptions"
             :key="item.value"
@@ -18,98 +13,136 @@
           </el-option>
         </el-select>
       </el-form-item>
-
-      <!-- 商品规格 -->
       <el-form-item label="商品规格：">
         <el-card shadow="never" class="cardBg">
-          <div v-for="(productAttr, idx) in selectProductAttr" :key="idx">
+          <div v-for="(productAttr,idx) in selectProductAttr">
-            <!-- 显示属性名称 -->
+            {{productAttr.name}}：
-            {{ productAttr.name }}：
+            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
-
+              <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
-            <!-- 当 handAddStatus=0 时，显示多选框 -->
+                           class="littleMarginLeft"></el-checkbox>
-            <el-checkbox-group v-if="productAttr.handAddStatus === 0" v-model="selectProductAttr[idx].values">
-              <el-checkbox
-                v-for="item in getInputListArr(productAttr.inputList)"
-                :label="item"
-                :key="item"
-                class="littleMarginLeft"></el-checkbox>
             </el-checkbox-group>
-
-            <!-- 手动添加的属性值 -->
             <div v-else>
               <el-checkbox-group v-model="selectProductAttr[idx].values">
-                <div
+                <div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
-                  v-for="(item, index) in selectProductAttr[idx].options"
+                     class="littleMarginLeft">
-                  :key="index"
+                  <el-checkbox :label="item" :key="item"></el-checkbox>
-                  style="display: inline-block" class="littleMarginLeft">
+                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
-                  <el-checkbox :label="item"></el-checkbox>
+                  </el-button>
-                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx, index)">删除</el-button>
                 </div>
               </el-checkbox-group>
-              <!-- 添加新属性值 -->
+              <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
-              <el-input v-model="addProductAttrValue" style="width: 160px; margin-left: 10px" clearable></el-input>
               <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
             </div>
           </div>
         </el-card>
-
+        <el-table style="width: 100%;margin-top: 20px"
-        <!-- SKU 列表表格 -->
+                  :data="value.skuStockList"
-        <el-table style="width: 100%; margin-top: 20px" :data="value.skuStockList" border>
+                  border>
           <el-table-column
-            v-for="(item, index) in selectProductAttr"
+            v-for="(item,index) in selectProductAttr"
             :label="item.name"
             :key="item.id"
             align="center">
             <template slot-scope="scope">
-              {{ getProductSkuSp(scope.row, index) }}
+              {{getProductSkuSp(scope.row,index)}}
             </template>
           </el-table-column>
-
+          <el-table-column
-          <!-- 其他表格列：销售价格、促销价格、库存等 -->
+            label="销售价格"
-          <el-table-column label="销售价格" width="100" align="center">
+            width="100"
+            align="center">
             <template slot-scope="scope">
               <el-input v-model="scope.row.price"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="促销价格" width="100" align="center">
+          <el-table-column
+            label="促销价格"
+            width="100"
+            align="center">
             <template slot-scope="scope">
               <el-input v-model="scope.row.promotionPrice"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="商品库存" width="80" align="center">
+          <el-table-column
+            label="商品库存"
+            width="80"
+            align="center">
             <template slot-scope="scope">
               <el-input v-model="scope.row.stock"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="库存预警值" width="80" align="center">
+          <el-table-column
+            label="库存预警值"
+            width="80"
+            align="center">
             <template slot-scope="scope">
               <el-input v-model="scope.row.lowStock"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="SKU编号" width="160" align="center">
+          <el-table-column
+            label="SKU编号"
+            width="160"
+            align="center">
             <template slot-scope="scope">
               <el-input v-model="scope.row.skuCode"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="80" align="center">
+          <el-table-column
+            label="操作"
+            width="80"
+            align="center">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveProductSku(scope.$index)">删除</el-button>
+              <el-button
+                type="text"
+                @click="handleRemoveProductSku(scope.$index, scope.row)">删除
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
-
+        <el-button
-        <!-- 操作按钮：刷新、同步价格、同步库存 -->
+          type="primary"
-        <el-button type="primary" style="margin-top: 20px" @click="handleRefreshProductSkuList">刷新列表</el-button>
+          style="margin-top: 20px"
-        <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuPrice">同步价格</el-button>
+          @click="handleRefreshProductSkuList">刷新列表
-        <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuStock">同步库存</el-button>
+        </el-button>
+        <el-button
+          type="primary"
+          style="margin-top: 20px"
+          @click="handleSyncProductSkuPrice">同步价格
+        </el-button>
+        <el-button
+          type="primary"
+          style="margin-top: 20px"
+          @click="handleSyncProductSkuStock">同步库存
+        </el-button>
+      </el-form-item>
+      <el-form-item label="属性图片：" v-if="hasAttrPic">
+        <el-card shadow="never" class="cardBg">
+          <div v-for="(item,index) in selectProductAttrPics">
+            <span>{{item.name}}:</span>
+            <single-upload v-model="item.pic"
+                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
+          </div>
+        </el-card>
+      </el-form-item>
+      <el-form-item label="商品参数：">
+        <el-card shadow="never" class="cardBg">
+          <div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
+            <div class="paramInputLabel">{{item.name}}:</div>
+            <el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
+              <el-option
+                v-for="item in getParamInputList(item.inputList)"
+                :key="item"
+                :label="item"
+                :value="item">
+              </el-option>
+            </el-select>
+            <el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
+          </div>
+        </el-card>
       </el-form-item>
-
-      <!-- 商品相册 -->
       <el-form-item label="商品相册：">
         <multi-upload v-model="selectProductPics"></multi-upload>
       </el-form-item>
-
-      <!-- 商品详情编辑器 -->
       <el-form-item label="商品详情：">
         <el-tabs v-model="activeHtmlName" type="card">
           <el-tab-pane label="电脑端详情" name="pc">
@@ -120,8 +153,6 @@
           </el-tab-pane>
         </el-tabs>
       </el-form-item>
-
-      <!-- 表单操作按钮 -->
       <el-form-item style="text-align: center">
         <el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
         <el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
@@ -131,74 +162,479 @@
 </template>
 
 <script>
-import { fetchList as fetchProductAttrCateList } from '@/api/productAttrCate';
+  import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
-import { fetchList as fetchProductAttrList } from '@/api/productAttr';
+  import {fetchList as fetchProductAttrList} from '@/api/productAttr'
-import SingleUpload from '@/components/Upload/singleUpload';
+  import SingleUpload from '@/components/Upload/singleUpload'
-import MultiUpload from '@/components/Upload/multiUpload';
+  import MultiUpload from '@/components/Upload/multiUpload'
-import Tinymce from '@/components/Tinymce';
+  import Tinymce from '@/components/Tinymce'
 
-export default {
+  export default {
-  name: 'ProductAttrDetail', // 组件名称
+    name: "ProductAttrDetail",
-  components: { SingleUpload, MultiUpload, Tinymce }, // 注册组件
+    components: {SingleUpload, MultiUpload, Tinymce},
-  props: {
+    props: {
-    value: Object, // 父组件传入的表单数据对象
+      value: Object,
-    isEdit: { type: Boolean, default: false } // 编辑模式标志
+      isEdit: {
-  },
+        type: Boolean,
-  data() {
+        default: false
-    return {
+      }
-      productAttributeCategoryOptions: [], // 商品属性分类选项
-      selectProductAttr: [], // 选中的商品属性
-      addProductAttrValue: '', // 手动添加的属性值
-      activeHtmlName: 'pc' // 激活的商品详情编辑器
-    };
-  },
-  created() {
-    this.getProductAttrCateList(); // 获取商品属性分类数据
-  },
-  methods: {
-    // 获取商品属性分类列表
-    getProductAttrCateList() {
-      fetchProductAttrCateList({ pageNum: 1, pageSize: 100 }).then(response => {
-        this.productAttributeCategoryOptions = response.data.list.map(item => ({
-          label: item.name,
-          value: item.id
-        }));
-      });
     },
-    // 处理属性类型变化，加载对应的属性和参数
+    data() {
-    handleProductAttrChange(value) {
+      return {
-      this.getProductAttrList(0, value); // 商品规格
+        //编辑模式时是否初始化成功
-      this.getProductAttrList(1, value); // 商品参数
+        hasEditCreated:false,
+        //商品属性分类下拉选项
+        productAttributeCategoryOptions: [],
+        //选中的商品属性
+        selectProductAttr: [],
+        //选中的商品参数
+        selectProductParam: [],
+        //选中的商品属性图片
+        selectProductAttrPics: [],
+        //可手动添加的商品属性
+        addProductAttrValue: '',
+        //商品富文本详情激活类型
+        activeHtmlName: 'pc'
+      }
     },
-    // 处理添加手动属性值
+    computed: {
-    handleAddProductAttrValue(idx) {
+      //是否有商品属性图片
-      if (this.addProductAttrValue) {
+      hasAttrPic() {
-        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
+        if (this.selectProductAttrPics.length < 1) {
-        this.addProductAttrValue = '';
+          return false;
+        }
+        return true;
+      },
+      //商品的编号
+      productId(){
+        return this.value.id;
+      },
+      //商品的主图和画册图片
+      selectProductPics:{
+        get:function () {
+          let pics=[];
+          if(this.value.pic===undefined||this.value.pic==null||this.value.pic===''){
+            return pics;
+          }
+          pics.push(this.value.pic);
+          if(this.value.albumPics===undefined||this.value.albumPics==null||this.value.albumPics===''){
+            return pics;
+          }
+          let albumPics = this.value.albumPics.split(',');
+          for(let i=0;i<albumPics.length;i++){
+            pics.push(albumPics[i]);
+          }
+          return pics;
+        },
+        set:function (newValue) {
+          if (newValue == null || newValue.length === 0) {
+            this.value.pic = null;
+            this.value.albumPics = null;
+          } else {
+            this.value.pic = newValue[0];
+            this.value.albumPics = '';
+            if (newValue.length > 1) {
+              for (let i = 1; i < newValue.length; i++) {
+                this.value.albumPics += newValue[i];
+                if (i !== newValue.length - 1) {
+                  this.value.albumPics += ',';
+                }
+              }
+            }
+          }
+        }
       }
     },
-    // 删除 SKU 列表中的某一项
+    created() {
-    handleRemoveProductSku(index) {
+      this.getProductAttrCateList();
-      this.value.skuStockList.splice(index, 1);
     },
-    // 上一步
+    watch: {
-    handlePrev() {
+      productId:function (newValue) {
-      this.$emit('prevStep');
+        if(!this.isEdit)return;
+        if(this.hasEditCreated)return;
+        if(newValue===undefined||newValue==null||newValue===0)return;
+        this.handleEditCreated();
+      }
     },
-    // 下一步
+    methods: {
-    handleNext() {
+      handleEditCreated() {
-      this.$emit('nextStep');
+        //根据商品属性分类id获取属性和参数
+        if(this.value.productAttributeCategoryId!=null){
+          this.handleProductAttrChange(this.value.productAttributeCategoryId);
+        }
+        this.hasEditCreated=true;
+      },
+      getProductAttrCateList() {
+        let param = {pageNum: 1, pageSize: 100};
+        fetchProductAttrCateList(param).then(response => {
+          this.productAttributeCategoryOptions = [];
+          let list = response.data.list;
+          for (let i = 0; i < list.length; i++) {
+            this.productAttributeCategoryOptions.push({label: list[i].name, value: list[i].id});
+          }
+        });
+      },
+      getProductAttrList(type, cid) {
+        let param = {pageNum: 1, pageSize: 100, type: type};
+        fetchProductAttrList(cid, param).then(response => {
+          let list = response.data.list;
+          if (type === 0) {
+            this.selectProductAttr = [];
+            for (let i = 0; i < list.length; i++) {
+              let options = [];
+              let values = [];
+              if (this.isEdit) {
+                if (list[i].handAddStatus === 1) {
+                  //编辑状态下获取手动添加编辑属性
+                  options = this.getEditAttrOptions(list[i].id);
+                }
+                //编辑状态下获取选中属性
+                values = this.getEditAttrValues(i);
+              }
+              this.selectProductAttr.push({
+                id: list[i].id,
+                name: list[i].name,
+                handAddStatus: list[i].handAddStatus,
+                inputList: list[i].inputList,
+                values: values,
+                options: options
+              });
+            }
+            if(this.isEdit){
+              //编辑模式下刷新商品属性图片
+              this.refreshProductAttrPics();
+            }
+          } else {
+            this.selectProductParam = [];
+            for (let i = 0; i < list.length; i++) {
+              let value=null;
+              if(this.isEdit){
+                //编辑模式下获取参数属性
+                value= this.getEditParamValue(list[i].id);
+              }
+              this.selectProductParam.push({
+                id: list[i].id,
+                name: list[i].name,
+                value: value,
+                inputType: list[i].inputType,
+                inputList: list[i].inputList
+              });
+            }
+          }
+        });
+      },
+      //获取设置的可手动添加属性值
+      getEditAttrOptions(id) {
+        let options = [];
+        for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
+          let attrValue = this.value.productAttributeValueList[i];
+          if (attrValue.productAttributeId === id) {
+            let strArr = attrValue.value.split(',');
+            for (let j = 0; j < strArr.length; j++) {
+              options.push(strArr[j]);
+            }
+            break;
+          }
+        }
+        return options;
+      },
+      //获取选中的属性值
+      getEditAttrValues(index) {
+        let values = new Set();
+        if (index === 0) {
+          for (let i = 0; i < this.value.skuStockList.length; i++) {
+            let sku = this.value.skuStockList[i];
+            let spData = JSON.parse(sku.spData);
+            if (spData!= null && spData.length>=1) {
+              values.add(spData[0].value);
+            }
+          }
+        } else if (index === 1) {
+          for (let i = 0; i < this.value.skuStockList.length; i++) {
+            let sku = this.value.skuStockList[i];
+            let spData = JSON.parse(sku.spData);
+            if (spData!= null && spData.length>=2) {
+              values.add(spData[1].value);
+            }
+          }
+        } else {
+          for (let i = 0; i < this.value.skuStockList.length; i++) {
+            let sku = this.value.skuStockList[i];
+            let spData = JSON.parse(sku.spData);
+            if (spData!= null && spData.length>=3) {
+              values.add(spData[2].value);
+            }
+          }
+        }
+        return Array.from(values);
+      },
+      //获取属性的值
+      getEditParamValue(id){
+        for(let i=0;i<this.value.productAttributeValueList.length;i++){
+          if(id===this.value.productAttributeValueList[i].productAttributeId){
+            return this.value.productAttributeValueList[i].value;
+          }
+        }
+      },
+      handleProductAttrChange(value) {
+        this.getProductAttrList(0, value);
+        this.getProductAttrList(1, value);
+      },
+      getInputListArr(inputList) {
+        return inputList.split(',');
+      },
+      handleAddProductAttrValue(idx) {
+        let options = this.selectProductAttr[idx].options;
+        if (this.addProductAttrValue == null || this.addProductAttrValue == '') {
+          this.$message({
+            message: '属性值不能为空',
+            type: 'warning',
+            duration: 1000
+          });
+          return
+        }
+        if (options.indexOf(this.addProductAttrValue) !== -1) {
+          this.$message({
+            message: '属性值不能重复',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
+        this.addProductAttrValue = null;
+      },
+      handleRemoveProductAttrValue(idx, index) {
+        this.selectProductAttr[idx].options.splice(index, 1);
+      },
+      getProductSkuSp(row, index) {
+        let spData = JSON.parse(row.spData);
+        if(spData!=null&&index<spData.length){
+          return spData[index].value;
+        }else{
+          return null;
+        }
+      },
+      handleRefreshProductSkuList() {
+        this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.refreshProductAttrPics();
+          this.refreshProductSkuList();
+        });
+      },
+      handleSyncProductSkuPrice(){
+        this.$confirm('将同步第一个sku的价格到所有sku,是否继续', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
+            let tempSkuList = [];
+            tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
+            let price=this.value.skuStockList[0].price;
+            for(let i=0;i<tempSkuList.length;i++){
+              tempSkuList[i].price=price;
+            }
+            this.value.skuStockList=[];
+            this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
+          }
+        });
+      },
+      handleSyncProductSkuStock(){
+        this.$confirm('将同步第一个sku的库存到所有sku,是否继续', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
+            let tempSkuList = [];
+            tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
+            let stock=this.value.skuStockList[0].stock;
+            let lowStock=this.value.skuStockList[0].lowStock;
+            for(let i=0;i<tempSkuList.length;i++){
+              tempSkuList[i].stock=stock;
+              tempSkuList[i].lowStock=lowStock;
+            }
+            this.value.skuStockList=[];
+            this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
+          }
+        });
+      },
+      refreshProductSkuList() {
+        this.value.skuStockList = [];
+        let skuList = this.value.skuStockList;
+        //只有一个属性时
+        if (this.selectProductAttr.length === 1) {
+          let attr = this.selectProductAttr[0];
+          for (let i = 0; i < attr.values.length; i++) {
+            skuList.push({
+              spData: JSON.stringify([{key:attr.name,value:attr.values[i]}])
+            });
+          }
+        } else if (this.selectProductAttr.length === 2) {
+          let attr0 = this.selectProductAttr[0];
+          let attr1 = this.selectProductAttr[1];
+          for (let i = 0; i < attr0.values.length; i++) {
+            if (attr1.values.length === 0) {
+              skuList.push({
+                spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
+              });
+              continue;
+            }
+            for (let j = 0; j < attr1.values.length; j++) {
+              let spData = [];
+              spData.push({key:attr0.name,value:attr0.values[i]});
+              spData.push({key:attr1.name,value:attr1.values[j]});
+              skuList.push({
+                spData: JSON.stringify(spData)
+              });
+            }
+          }
+        } else {
+          let attr0 = this.selectProductAttr[0];
+          let attr1 = this.selectProductAttr[1];
+          let attr2 = this.selectProductAttr[2];
+          for (let i = 0; i < attr0.values.length; i++) {
+            if (attr1.values.length === 0) {
+              skuList.push({
+                spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
+              });
+              continue;
+            }
+            for (let j = 0; j < attr1.values.length; j++) {
+              if (attr2.values.length === 0) {
+                let spData = [];
+                spData.push({key:attr0.name,value:attr0.values[i]});
+                spData.push({key:attr1.name,value:attr1.values[j]});
+                skuList.push({
+                  spData: JSON.stringify(spData)
+                });
+                continue;
+              }
+              for (let k = 0; k < attr2.values.length; k++) {
+                let spData = [];
+                spData.push({key:attr0.name,value:attr0.values[i]});
+                spData.push({key:attr1.name,value:attr1.values[j]});
+                spData.push({key:attr2.name,value:attr2.values[k]});
+                skuList.push({
+                  spData: JSON.stringify(spData)
+                });
+              }
+            }
+          }
+        }
+      },
+      refreshProductAttrPics() {
+        this.selectProductAttrPics = [];
+        if (this.selectProductAttr.length >= 1) {
+          let values = this.selectProductAttr[0].values;
+          for (let i = 0; i < values.length; i++) {
+            let pic=null;
+            if(this.isEdit){
+              //编辑状态下获取图片
+              pic=this.getProductSkuPic(values[i]);
+            }
+            this.selectProductAttrPics.push({name: values[i], pic: pic})
+          }
+        }
+      },
+      //获取商品相关属性的图片
+      getProductSkuPic(name){
+        for(let i=0;i<this.value.skuStockList.length;i++){
+          let spData = JSON.parse(this.value.skuStockList[i].spData);
+          if(name===spData[0].value){
+            return this.value.skuStockList[i].pic;
+          }
+        }
+        return null;
+      },
+      //合并商品属性
+      mergeProductAttrValue() {
+        this.value.productAttributeValueList = [];
+        for (let i = 0; i < this.selectProductAttr.length; i++) {
+          let attr = this.selectProductAttr[i];
+          if (attr.handAddStatus === 1 && attr.options != null && attr.options.length > 0) {
+            this.value.productAttributeValueList.push({
+              productAttributeId: attr.id,
+              value: this.getOptionStr(attr.options)
+            });
+          }
+        }
+        for (let i = 0; i < this.selectProductParam.length; i++) {
+          let param = this.selectProductParam[i];
+          this.value.productAttributeValueList.push({
+            productAttributeId: param.id,
+            value: param.value
+          });
+        }
+      },
+      //合并商品属性图片
+      mergeProductAttrPics() {
+        for (let i = 0; i < this.selectProductAttrPics.length; i++) {
+          for (let j = 0; j < this.value.skuStockList.length; j++) {
+            let spData = JSON.parse(this.value.skuStockList[j].spData);
+            if (spData[0].value === this.selectProductAttrPics[i].name) {
+              this.value.skuStockList[j].pic = this.selectProductAttrPics[i].pic;
+            }
+          }
+        }
+      },
+      getOptionStr(arr) {
+        let str = '';
+        for (let i = 0; i < arr.length; i++) {
+          str += arr[i];
+          if (i != arr.length - 1) {
+            str += ',';
+          }
+        }
+        return str;
+      },
+      handleRemoveProductSku(index, row) {
+        let list = this.value.skuStockList;
+        if (list.length === 1) {
+          list.pop();
+        } else {
+          list.splice(index, 1);
+        }
+      },
+      getParamInputList(inputList) {
+        return inputList.split(',');
+      },
+      handlePrev() {
+        this.$emit('prevStep')
+      },
+      handleNext() {
+        this.mergeProductAttrValue();
+        this.mergeProductAttrPics();
+        this.$emit('nextStep')
+      }
     }
   }
-};
 </script>
 
 <style scoped>
-.littleMarginLeft {
+  .littleMarginLeft {
-  margin-left: 10px;
+    margin-left: 10px;
-}
+  }
+
+  .littleMarginTop {
+    margin-top: 10px;
+  }
+
+  .paramInput {
+    width: 250px;
+  }
 
-.cardBg {
+  .paramInputLabel {
-  background: #f8f9fc;
+    display: inline-block;
-}
+    width: 100px;
+    text-align: right;
+    padding-right: 10px
+  }
+
+  .cardBg {
+    background: #F8F9FC;
+  }
 </style>

src/views/pms/product/components/ProductDetail.vue

@@ -1,23 +1,17 @@
-<template>
+<template> 
-  <!-- 商品详情表单容器 -->
   <el-card class="form-container" shadow="never">
-    <!-- 步骤条：显示当前所处的步骤 -->
     <el-steps :active="active" finish-status="success" align-center>
       <el-step title="填写商品信息"></el-step>
       <el-step title="填写商品促销"></el-step>
       <el-step title="填写商品属性"></el-step>
       <el-step title="选择商品关联"></el-step>
     </el-steps>
-
-    <!-- 商品基本信息组件 -->
     <product-info-detail
       v-show="showStatus[0]"
       v-model="productParam"
       :is-edit="isEdit"
       @nextStep="nextStep">
     </product-info-detail>
-
-    <!-- 商品促销信息组件 -->
     <product-sale-detail
       v-show="showStatus[1]"
       v-model="productParam"
@@ -25,8 +19,6 @@
       @nextStep="nextStep"
       @prevStep="prevStep">
     </product-sale-detail>
-
-    <!-- 商品属性组件 -->
     <product-attr-detail
       v-show="showStatus[2]"
       v-model="productParam"
@@ -34,8 +26,6 @@
       @nextStep="nextStep"
       @prevStep="prevStep">
     </product-attr-detail>
-
-    <!-- 商品关联信息组件 -->
     <product-relation-detail
       v-show="showStatus[3]"
       v-model="productParam"
@@ -45,140 +35,154 @@
     </product-relation-detail>
   </el-card>
 </template>
-
 <script>
-import ProductInfoDetail from './ProductInfoDetail'; // 商品信息组件
+  import ProductInfoDetail from './ProductInfoDetail';
-import ProductSaleDetail from './ProductSaleDetail'; // 商品促销组件
+  import ProductSaleDetail from './ProductSaleDetail';
-import ProductAttrDetail from './ProductAttrDetail'; // 商品属性组件
+  import ProductAttrDetail from './ProductAttrDetail';
-import ProductRelationDetail from './ProductRelationDetail'; // 商品关联组件
+  import ProductRelationDetail from './ProductRelationDetail';
-import { createProduct, getProduct, updateProduct } from '@/api/product'; // API 导入
+  import {createProduct,getProduct,updateProduct} from '@/api/product';
 
-// 定义默认的商品参数数据结构
+  const defaultProductParam = {
-const defaultProductParam = {
+    albumPics: '',
-  albumPics: '', // 商品相册图片
+    brandId: null,
-  brandId: null, // 品牌ID
+    brandName: '',
-  brandName: '', // 品牌名称
+    deleteStatus: 0,
-  deleteStatus: 0, // 删除状态
+    description: '',
-  description: '', // 商品描述
+    detailDesc: '',
-  detailDesc: '', // 详情描述
+    detailHtml: '',
-  detailHtml: '', // 电脑端详情
+    detailMobileHtml: '',
-  detailMobileHtml: '', // 移动端详情
+    detailTitle: '',
-  detailTitle: '', // 详情标题
+    feightTemplateId: 0,
-  feightTemplateId: 0, // 运费模板ID
+    flashPromotionCount: 0,
-  flashPromotionCount: 0, // 秒杀数量
+    flashPromotionId: 0,
-  flashPromotionPrice: 0, // 秒杀价格
+    flashPromotionPrice: 0,
-  giftPoint: 0, // 赠送积分
+    flashPromotionSort: 0,
-  giftGrowth: 0, // 成长值
+    giftPoint: 0,
-  keywords: '', // 关键词
+    giftGrowth: 0,
-  lowStock: 0, // 库存预警值
+    keywords: '',
-  name: '', // 商品名称
+    lowStock: 0,
-  newStatus: 0, // 新品状态
+    name: '',
-  originalPrice: 0, // 原价
+    newStatus: 0,
-  price: 0, // 价格
+    note: '',
-  skuStockList: [], // SKU库存列表
+    originalPrice: 0,
-  productAttributeValueList: [], // 商品属性值列表
+    pic: '',
-  promotionStartTime: '', // 促销开始时间
+    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
-  promotionEndTime: '', // 促销结束时间
+    memberPriceList: [],
-  publishStatus: 0, // 发布状态
+    //商品满减
-  sale: 0, // 销售量
+    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
-  stock: 0, // 库存
+    //商品阶梯价格
-};
+    productLadderList: [{count: 0,discount: 0,price: 0}],
-
+    previewStatus: 0,
-export default {
+    price: 0,
-  name: 'ProductDetail', // 组件名称
+    productAttributeCategoryId: null,
-  components: {
+    //商品属性相关{productAttributeId: 0, value: ''}
-    ProductInfoDetail,
+    productAttributeValueList: [],
-    ProductSaleDetail,
+    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
-    ProductAttrDetail,
+    skuStockList: [],
-    ProductRelationDetail,
+    //商品相关专题{subjectId: 0}
-  },
+    subjectProductRelationList: [],
-  props: {
+    //商品相关优选{prefrenceAreaId: 0}
-    isEdit: {
+    prefrenceAreaProductRelationList: [],
-      type: Boolean,
+    productCategoryId: null,
-      default: false, // 是否为编辑模式，默认是新增
+    productCategoryName: '',
-    },
+    productSn: '',
-  },
+    promotionEndTime: '',
-  data() {
+    promotionPerLimit: 0,
-    return {
+    promotionPrice: null,
-      active: 0, // 当前步骤索引
+    promotionStartTime: '',
-      productParam: Object.assign({}, defaultProductParam), // 商品参数对象
+    promotionType: 0,
-      showStatus: [true, false, false, false], // 控制步骤组件显示状态
+    publishStatus: 0,
-    };
+    recommandStatus: 0,
-  },
+    sale: 0,
-  created() {
+    serviceIds: '',
-    // 如果是编辑模式，获取商品数据
+    sort: 0,
-    if (this.isEdit) {
+    stock: 0,
-      getProduct(this.$route.query.id).then((response) => {
+    subTitle: '',
-        this.productParam = response.data; // 加载编辑的商品数据
+    unit: '',
-      });
+    usePointLimit: 0,
-    }
+    verifyStatus: 0,
-  },
+    weight: 0
-  methods: {
+  };
-    // 隐藏所有步骤的内容
+  export default {
-    hideAll() {
+    name: 'ProductDetail',
-      for (let i = 0; i < this.showStatus.length; i++) {
+    components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
-        this.showStatus[i] = false;
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
       }
     },
-    // 上一步操作
+    data() {
-    prevStep() {
+      return {
-      if (this.active > 0) {
+        active: 0,
-        this.active--; // 回退到上一步
+        productParam: Object.assign({}, defaultProductParam),
-        this.hideAll(); // 隐藏所有步骤
+        showStatus: [true, false, false, false]
-        this.showStatus[this.active] = true; // 显示当前步骤
       }
     },
-    // 下一步操作
+    created(){
-    nextStep() {
+      if(this.isEdit){
-      if (this.active < this.showStatus.length - 1) {
+        getProduct(this.$route.query.id).then(response=>{
-        this.active++; // 跳到下一步
+          this.productParam=response.data;
-        this.hideAll(); // 隐藏所有步骤
+        });
-        this.showStatus[this.active] = true; // 显示当前步骤
       }
     },
-    // 提交表单数据
+    methods: {
-    finishCommit(isEdit) {
+      hideAll() {
-      this.$confirm('是否要提交该产品？', '提示', {
+        for (let i = 0; i < this.showStatus.length; i++) {
-        confirmButtonText: '确定',
+          this.showStatus[i] = false;
-        cancelButtonText: '取消',
+        }
-        type: 'warning',
+      },
-      }).then(() => {
+      prevStep() {
-        if (isEdit) {
+        if (this.active > 0 && this.active < this.showStatus.length) {
-          // 编辑模式下更新商品数据
+          this.active--;
-          updateProduct(this.$route.query.id, this.productParam).then(() => {
+          this.hideAll();
-            this.$message({
+          this.showStatus[this.active] = true;
-              type: 'success',
+        }
-              message: '修改成功',
+      },
-              duration: 1000,
+      nextStep() {
+        if (this.active < this.showStatus.length - 1) {
+          this.active++;
+          this.hideAll();
+          this.showStatus[this.active] = true;
+        }
+      },
+      finishCommit(isEdit) {
+        this.$confirm('是否要提交该产品', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          if(isEdit){
+            updateProduct(this.$route.query.id,this.productParam).then(response=>{
+              this.$message({
+                type: 'success',
+                message: '提交成功',
+                duration:1000
+              });
+              this.$router.back();
             });
-            this.$router.back(); // 返回上一页
+          }else{
-          });
+            createProduct(this.productParam).then(response=>{
-        } else {
+              this.$message({
-          // 新增模式下创建商品数据
+                type: 'success',
-          createProduct(this.productParam).then(() => {
+                message: '提交成功',
-            this.$message({
+                duration:1000
-              type: 'success',
+              });
-              message: '提交成功',
+              location.reload();
-              duration: 1000,
             });
-            location.reload(); // 刷新页面
+          }
-          });
+        })
-        }
+      }
-      });
+    }
-    },
+  }
-  },
-};
 </script>
-
 <style>
-/* 容器样式 */
+  .form-container {
-.form-container {
+    width: 960px;
-  width: 960px;
+  }
-  margin: 0 auto;
+  .form-inner-container {
-}
+    width: 800px;
-
+  }
-.form-inner-container {
-  width: 800px;
-  margin: 0 auto;
-}
 </style>
+
+

src/views/pms/product/components/ProductInfoDetail.vue

@@ -1,247 +1,200 @@
 <template>
-  <!-- 商品基本信息表单 -->
   <div style="margin-top: 50px">
-    <el-form
+    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" class="form-inner-container" size="small">
-      :model="value"
-      :rules="rules"
-      ref="productInfoForm"
-      label-width="120px"
-      class="form-inner-container"
-      size="small"
-    >
-      <!-- 商品分类选择 -->
       <el-form-item label="商品分类：" prop="productCategoryId">
         <el-cascader
           v-model="selectProductCateValue"
-          :options="productCateOptions"
+          :options="productCateOptions">
-        ></el-cascader>
+        </el-cascader>
       </el-form-item>
-
-      <!-- 商品名称输入框 -->
       <el-form-item label="商品名称：" prop="name">
         <el-input v-model="value.name"></el-input>
       </el-form-item>
-
-      <!-- 商品副标题输入框 -->
       <el-form-item label="副标题：" prop="subTitle">
         <el-input v-model="value.subTitle"></el-input>
       </el-form-item>
-
-      <!-- 商品品牌选择框 -->
       <el-form-item label="商品品牌：" prop="brandId">
         <el-select
           v-model="value.brandId"
           @change="handleBrandChange"
-          placeholder="请选择品牌"
+          placeholder="请选择品牌">
-        >
           <el-option
             v-for="item in brandOptions"
             :key="item.value"
             :label="item.label"
-            :value="item.value"
+            :value="item.value">
-          ></el-option>
+          </el-option>
         </el-select>
       </el-form-item>
-
-      <!-- 商品介绍文本域 -->
       <el-form-item label="商品介绍：">
         <el-input
           :autoSize="true"
           v-model="value.description"
           type="textarea"
-          placeholder="请输入内容"
+          placeholder="请输入内容"></el-input>
-        ></el-input>
       </el-form-item>
-
-      <!-- 商品货号 -->
       <el-form-item label="商品货号：">
         <el-input v-model="value.productSn"></el-input>
       </el-form-item>
-
-      <!-- 商品售价 -->
       <el-form-item label="商品售价：">
         <el-input v-model="value.price"></el-input>
       </el-form-item>
-
-      <!-- 市场价 -->
       <el-form-item label="市场价：">
         <el-input v-model="value.originalPrice"></el-input>
       </el-form-item>
-
-      <!-- 商品库存 -->
       <el-form-item label="商品库存：">
         <el-input v-model="value.stock"></el-input>
       </el-form-item>
-
-      <!-- 计量单位 -->
       <el-form-item label="计量单位：">
         <el-input v-model="value.unit"></el-input>
       </el-form-item>
-
-      <!-- 商品重量 -->
       <el-form-item label="商品重量：">
         <el-input v-model="value.weight" style="width: 300px"></el-input>
         <span style="margin-left: 20px">克</span>
       </el-form-item>
-
-      <!-- 排序 -->
       <el-form-item label="排序">
         <el-input v-model="value.sort"></el-input>
       </el-form-item>
-
-      <!-- 下一步按钮 -->
       <el-form-item style="text-align: center">
-        <el-button
+        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
-          type="primary"
-          size="medium"
-          @click="handleNext('productInfoForm')"
-        >
-          下一步，填写商品促销
-        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-import { fetchListWithChildren } from '@/api/productCate'; // 获取商品分类
+  import {fetchListWithChildren} from '@/api/productCate'
-import { fetchList as fetchBrandList } from '@/api/brand'; // 获取品牌列表
+  import {fetchList as fetchBrandList} from '@/api/brand'
-
+  import {getProduct} from '@/api/product';
-export default {
+
-  name: 'ProductInfoDetail', // 组件名称
+  export default {
-  props: {
+    name: "ProductInfoDetail",
-    value: Object, // 父组件传入的数据对象
+    props: {
-    isEdit: {
+      value: Object,
-      type: Boolean, // 是否为编辑模式
+      isEdit: {
-      default: false,
+        type: Boolean,
+        default: false
+      }
     },
-  },
+    data() {
-  data() {
+      return {
-    return {
+        hasEditCreated:false,
-      hasEditCreated: false, // 控制编辑状态是否初始化完成
+        //选中商品分类的值
-      selectProductCateValue: [], // 选中的商品分类
+        selectProductCateValue: [],
-      productCateOptions: [], // 商品分类级联数据
+        productCateOptions: [],
-      brandOptions: [], // 品牌列表选项
+        brandOptions: [],
-      rules: {
+        rules: {
-        name: [
+          name: [
-          { required: true, message: '请输入商品名称', trigger: 'blur' },
+            {required: true, message: '请输入商品名称', trigger: 'blur'},
-          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-        ],
+          ],
-        subTitle: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
+          subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
-        productCategoryId: [
+          productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
-          { required: true, message: '请选择商品分类', trigger: 'blur' },
+          brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
-        ],
+          description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
-        brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
+          requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
-        description: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
+        }
-      },
+      };
-    };
-  },
-  created() {
-    // 初始化分类列表和品牌列表
-    this.getProductCateList();
-    this.getBrandList();
-  },
-  computed: {
-    // 监听商品ID
-    productId() {
-      return this.value.id;
     },
-  },
+    created() {
-  watch: {
+      this.getProductCateList();
-    productId(newValue) {
+      this.getBrandList();
-      if (!this.isEdit || this.hasEditCreated || !newValue) return;
-      this.handleEditCreated();
     },
-    selectProductCateValue(newValue) {
+    computed:{
-      // 选中分类时，设置对应的分类ID和分类名称
+      //商品的编号
-      if (newValue && newValue.length === 2) {
+      productId(){
-        this.value.productCategoryId = newValue[1];
+        return this.value.id;
-        this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId);
-      } else {
-        this.value.productCategoryId = null;
-        this.value.productCategoryName = null;
       }
     },
-  },
+    watch: {
-  methods: {
+      productId:function(newValue){
-    // 编辑模式下初始化商品分类
+        if(!this.isEdit)return;
-    handleEditCreated() {
+        if(this.hasEditCreated)return;
-      if (this.value.productCategoryId != null) {
+        if(newValue===undefined||newValue==null||newValue===0)return;
-        this.selectProductCateValue = [
+        this.handleEditCreated();
-          this.value.cateParentId,
+      },
-          this.value.productCategoryId,
+      selectProductCateValue: function (newValue) {
-        ];
+        if (newValue != null && newValue.length === 2) {
+          this.value.productCategoryId = newValue[1];
+          this.value.productCategoryName= this.getCateNameById(this.value.productCategoryId);
+        } else {
+          this.value.productCategoryId = null;
+          this.value.productCategoryName=null;
+        }
       }
-      this.hasEditCreated = true;
-    },
-
-    // 获取商品分类列表
-    getProductCateList() {
-      fetchListWithChildren().then((response) => {
-        let list = response.data;
-        this.productCateOptions = list.map((item) => ({
-          label: item.name,
-          value: item.id,
-          children: item.children?.map((child) => ({
-            label: child.name,
-            value: child.id,
-          })),
-        }));
-      });
     },
-
+    methods: {
-    // 获取品牌列表
+      //处理编辑逻辑
-    getBrandList() {
+      handleEditCreated(){
-      fetchBrandList({ pageNum: 1, pageSize: 100 }).then((response) => {
+        if(this.value.productCategoryId!=null){
-        this.brandOptions = response.data.list.map((item) => ({
+          this.selectProductCateValue.push(this.value.cateParentId);
-          label: item.name,
+          this.selectProductCateValue.push(this.value.productCategoryId);
-          value: item.id,
+        }
-        }));
+        this.hasEditCreated=true;
-      });
+      },
-    },
+      getProductCateList() {
-
+        fetchListWithChildren().then(response => {
-    // 根据分类ID获取分类名称
+          let list = response.data;
-    getCateNameById(id) {
+          this.productCateOptions = [];
-      for (const parent of this.productCateOptions) {
+          for (let i = 0; i < list.length; i++) {
-        for (const child of parent.children || []) {
+            let children = [];
-          if (child.value === id) {
+            if (list[i].children != null && list[i].children.length > 0) {
-            return child.label;
+              for (let j = 0; j < list[i].children.length; j++) {
+                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
+              }
+            }
+            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+          }
+        });
+      },
+      getBrandList() {
+        fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
+          this.brandOptions = [];
+          let brandList = response.data.list;
+          for (let i = 0; i < brandList.length; i++) {
+            this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
+          }
+        });
+      },
+      getCateNameById(id){
+        let name=null;
+        for(let i=0;i<this.productCateOptions.length;i++){
+          for(let j=0;j<this.productCateOptions[i].children.length;j++){
+            if(this.productCateOptions[i].children[j].value===id){
+              name=this.productCateOptions[i].children[j].label;
+              return name;
+            }
           }
         }
-      }
+        return name;
-      return null;
+      },
-    },
+      handleNext(formName){
-
+        this.$refs[formName].validate((valid) => {
-    // 下一步验证表单数据
+          if (valid) {
-    handleNext(formName) {
+            this.$emit('nextStep');
-      this.$refs[formName].validate((valid) => {
+          } else {
-        if (valid) {
+            this.$message({
-          this.$emit('nextStep'); // 触发下一步事件
+              message: '验证失败',
-        } else {
+              type: 'error',
-          this.$message({
+              duration:1000
-            message: '验证失败',
+            });
-            type: 'error',
+            return false;
-            duration: 1000,
+          }
-          });
+        });
+      },
+      handleBrandChange(val) {
+        let brandName = '';
+        for (let i = 0; i < this.brandOptions.length; i++) {
+          if (this.brandOptions[i].value === val) {
+            brandName = this.brandOptions[i].label;
+            break;
+          }
         }
-      });
+        this.value.brandName = brandName;
-    },
+      }
-
+    }
-    // 处理品牌选择变化
+  }
-    handleBrandChange(val) {
-      const selectedBrand = this.brandOptions.find(
-        (item) => item.value === val
-      );
-      this.value.brandName = selectedBrand ? selectedBrand.label : '';
-    },
-  },
-};
 </script>
 
 <style scoped>
-/* 表单样式居中 */
-.form-inner-container {
-  max-width: 600px;
-  margin: 0 auto;
-}
 </style>

src/views/pms/product/components/ProductRelationDetail.vue

@@ -1,14 +1,10 @@
 <template>
-  <!-- 商品关联表单 -->
   <div style="margin-top: 50px">
-    <el-form
+    <el-form :model="value"
-      :model="value"
+             ref="productRelationForm"
-      ref="productRelationForm"
+             label-width="120px"
-      label-width="120px"
+             class="form-inner-container"
-      class="form-inner-container"
+             size="small">
-      size="small"
-    >
-      <!-- 关联专题 Transfer 组件 -->
       <el-form-item label="关联专题：">
         <el-transfer
           style="display: inline-block"
@@ -17,11 +13,9 @@
           filter-placeholder="请输入专题名称"
           v-model="selectSubject"
           :titles="subjectTitles"
-          :data="subjectList"
+          :data="subjectList">
-        ></el-transfer>
+        </el-transfer>
       </el-form-item>
-
-      <!-- 关联优选 Transfer 组件 -->
       <el-form-item label="关联优选：">
         <el-transfer
           style="display: inline-block"
@@ -30,166 +24,122 @@
           filter-placeholder="请输入优选名称"
           v-model="selectPrefrenceArea"
           :titles="prefrenceAreaTitles"
-          :data="prefrenceAreaList"
+          :data="prefrenceAreaList">
-        ></el-transfer>
+        </el-transfer>
       </el-form-item>
-
-      <!-- 操作按钮 -->
       <el-form-item style="text-align: center">
         <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
-        <el-button type="primary" size="medium" @click="handleFinishCommit">
+        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
-          完成，提交商品
-        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-import { fetchListAll as fetchSubjectList } from '@/api/subject'; // 获取专题列表API
+  import {fetchListAll as fetchSubjectList} from '@/api/subject'
-import { fetchList as fetchPrefrenceAreaList } from '@/api/prefrenceArea'; // 获取优选列表API
+  import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
 
-export default {
+  export default {
-  name: 'ProductRelationDetail', // 组件名称
+    name: "ProductRelationDetail",
-  props: {
+    props: {
-    value: Object, // 父组件传入的数据对象（用于存储表单数据）
+      value: Object,
-    isEdit: {
+      isEdit: {
-      type: Boolean, // 是否为编辑模式
+        type: Boolean,
-      default: false,
+        default: false
+      }
+    },
+    data() {
+      return {
+        //所有专题列表
+        subjectList: [],
+        //专题左右标题
+        subjectTitles: ['待选择', '已选择'],
+        //所有专题列表
+        prefrenceAreaList: [],
+        //专题左右标题
+        prefrenceAreaTitles: ['待选择', '已选择']
+      };
+    },
+    created() {
+      this.getSubjectList();
+      this.getPrefrenceAreaList();
     },
-  },
+    computed:{
-  data() {
+      //选中的专题
-    return {
+      selectSubject:{
-      subjectList: [], // 专题数据列表
+        get:function () {
-      subjectTitles: ['待选择', '已选择'], // Transfer组件标题：关联专题
+          let subjects =[];
-      prefrenceAreaList: [], // 优选数据列表
+          if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
-      prefrenceAreaTitles: ['待选择', '已选择'], // Transfer组件标题：关联优选
+            return subjects;
-    };
+          }
-  },
+          for(let i=0;i<this.value.subjectProductRelationList.length;i++){
-  created() {
+            subjects.push(this.value.subjectProductRelationList[i].subjectId);
-    this.getSubjectList(); // 初始化获取专题列表
+          }
-    this.getPrefrenceAreaList(); // 初始化获取优选列表
-  },
-  computed: {
-    /**
-     * 选中的专题：通过 v-model 和 computed 绑定选中的专题数据
-     */
-    selectSubject: {
-      get() {
-        let subjects = [];
-        if (
-          this.value.subjectProductRelationList == null ||
-          this.value.subjectProductRelationList.length <= 0
-        ) {
           return subjects;
-        }
+        },
-        // 提取选中的专题ID
+        set:function (newValue) {
-        for (let i = 0; i < this.value.subjectProductRelationList.length; i++) {
+          this.value.subjectProductRelationList=[];
-          subjects.push(this.value.subjectProductRelationList[i].subjectId);
+          for(let i=0;i<newValue.length;i++){
-        }
+            this.value.subjectProductRelationList.push({subjectId:newValue[i]});
-        return subjects;
+          }
-      },
-      set(newValue) {
-        // 更新关联的专题列表
-        this.value.subjectProductRelationList = [];
-        for (let i = 0; i < newValue.length; i++) {
-          this.value.subjectProductRelationList.push({ subjectId: newValue[i] });
         }
       },
-    },
+      //选中的优选
-
+      selectPrefrenceArea:{
-    /**
+        get:function () {
-     * 选中的优选：通过 v-model 和 computed 绑定选中的优选数据
+          let prefrenceAreas =[];
-     */
+          if(this.value.prefrenceAreaProductRelationList==null||this.value.prefrenceAreaProductRelationList.length<=0){
-    selectPrefrenceArea: {
+            return prefrenceAreas;
-      get() {
+          }
-        let prefrenceAreas = [];
+          for(let i=0;i<this.value.prefrenceAreaProductRelationList.length;i++){
-        if (
+            prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
-          this.value.prefrenceAreaProductRelationList == null ||
+          }
-          this.value.prefrenceAreaProductRelationList.length <= 0
-        ) {
           return prefrenceAreas;
+        },
+        set:function (newValue) {
+          this.value.prefrenceAreaProductRelationList=[];
+          for(let i=0;i<newValue.length;i++){
+            this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
+          }
         }
-        // 提取选中的优选ID
+      }
-        for (
+    },
-          let i = 0;
+    methods: {
-          i < this.value.prefrenceAreaProductRelationList.length;
+      filterMethod(query, item) {
-          i++
+        return item.label.indexOf(query) > -1;
-        ) {
-          prefrenceAreas.push(
-            this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId
-          );
-        }
-        return prefrenceAreas;
       },
-      set(newValue) {
+      getSubjectList() {
-        // 更新关联的优选列表
+        fetchSubjectList().then(response => {
-        this.value.prefrenceAreaProductRelationList = [];
+          let list = response.data;
-        for (let i = 0; i < newValue.length; i++) {
+          for (let i = 0; i < list.length; i++) {
-          this.value.prefrenceAreaProductRelationList.push({
+            this.subjectList.push({
-            prefrenceAreaId: newValue[i],
+              label: list[i].title,
-          });
+              key: list[i].id
-        }
+            });
+          }
+        });
       },
-    },
+      getPrefrenceAreaList() {
-  },
+        fetchPrefrenceAreaList().then(response=>{
-  methods: {
+          let list = response.data;
-    /**
+          for (let i = 0; i < list.length; i++) {
-     * 筛选方法：根据关键词过滤 Transfer 组件数据
+            this.prefrenceAreaList.push({
-     * @param {String} query - 查询关键词
+              label: list[i].name,
-     * @param {Object} item - 当前项
+              key: list[i].id
-     */
+            });
-    filterMethod(query, item) {
+          }
-      return item.label.indexOf(query) > -1;
+        });
-    },
+      },
-
+      handlePrev(){
-    /**
+        this.$emit('prevStep')
-     * 获取专题列表数据
+      },
-     */
+      handleFinishCommit(){
-    getSubjectList() {
+        this.$emit('finishCommit',this.isEdit);
-      fetchSubjectList().then((response) => {
+      }
-        let list = response.data;
+    }
-        this.subjectList = list.map((item) => ({
+  }
-          label: item.title,
-          key: item.id,
-        }));
-      });
-    },
-
-    /**
-     * 获取优选列表数据
-     */
-    getPrefrenceAreaList() {
-      fetchPrefrenceAreaList().then((response) => {
-        let list = response.data;
-        this.prefrenceAreaList = list.map((item) => ({
-          label: item.name,
-          key: item.id,
-        }));
-      });
-    },
-
-    /**
-     * 上一步操作：通知父组件返回上一步
-     */
-    handlePrev() {
-      this.$emit('prevStep');
-    },
-
-    /**
-     * 完成提交：通知父组件提交表单数据
-     */
-    handleFinishCommit() {
-      this.$emit('finishCommit', this.isEdit);
-    },
-  },
-};
 </script>
 
 <style scoped>
-/* 局部样式：可根据需要自定义样式 */
+
-.form-inner-container {
-  max-width: 600px;
-  margin: 0 auto;
-}
 </style>

src/views/pms/product/components/ProductSaleDetail.vue

@@ -1,63 +1,43 @@
 <template>
-  <!-- 商品促销信息表单 -->
   <div style="margin-top: 50px">
-    <el-form
+    <el-form :model="value" ref="productSaleForm" label-width="120px" class="form-inner-container" size="small">
-      :model="value"
-      ref="productSaleForm"
-      label-width="120px"
-      class="form-inner-container"
-      size="small"
-    >
-      <!-- 赠送积分 -->
       <el-form-item label="赠送积分：">
         <el-input v-model="value.giftPoint"></el-input>
       </el-form-item>
-
-      <!-- 赠送成长值 -->
       <el-form-item label="赠送成长值：">
         <el-input v-model="value.giftGrowth"></el-input>
       </el-form-item>
-
-      <!-- 积分购买限制 -->
       <el-form-item label="积分购买限制：">
         <el-input v-model="value.usePointLimit"></el-input>
       </el-form-item>
-
-      <!-- 预告商品开关 -->
       <el-form-item label="预告商品：">
         <el-switch
           v-model="value.previewStatus"
           :active-value="1"
-          :inactive-value="0"
+          :inactive-value="0">
-        ></el-switch>
+        </el-switch>
       </el-form-item>
-
-      <!-- 商品上架开关 -->
       <el-form-item label="商品上架：">
         <el-switch
           v-model="value.publishStatus"
           :active-value="1"
-          :inactive-value="0"
+          :inactive-value="0">
-        ></el-switch>
+        </el-switch>
       </el-form-item>
-
-      <!-- 商品推荐：新品与推荐开关 -->
       <el-form-item label="商品推荐：">
         <span style="margin-right: 10px">新品</span>
         <el-switch
           v-model="value.newStatus"
           :active-value="1"
-          :inactive-value="0"
+          :inactive-value="0">
-        ></el-switch>
+        </el-switch>
-        <span style="margin-left: 10px; margin-right: 10px">推荐</span>
+        <span style="margin-left: 10px;margin-right: 10px">推荐</span>
         <el-switch
           v-model="value.recommandStatus"
           :active-value="1"
-          :inactive-value="0"
+          :inactive-value="0">
-        ></el-switch>
+        </el-switch>
       </el-form-item>
-
-      <!-- 服务保证复选框组 -->
       <el-form-item label="服务保证：">
         <el-checkbox-group v-model="selectServiceList">
           <el-checkbox :label="1">无忧退货</el-checkbox>
@@ -65,32 +45,18 @@
           <el-checkbox :label="3">免费包邮</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
-
-      <!-- 详细页标题 -->
       <el-form-item label="详细页标题：">
         <el-input v-model="value.detailTitle"></el-input>
       </el-form-item>
-
-      <!-- 详细页描述 -->
       <el-form-item label="详细页描述：">
         <el-input v-model="value.detailDesc"></el-input>
       </el-form-item>
-
-      <!-- 商品关键字 -->
       <el-form-item label="商品关键字：">
         <el-input v-model="value.keywords"></el-input>
       </el-form-item>
-
-      <!-- 商品备注 -->
       <el-form-item label="商品备注：">
-        <el-input
+        <el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
-          v-model="value.note"
-          type="textarea"
-          :autoSize="true"
-        ></el-input>
       </el-form-item>
-
-      <!-- 选择优惠方式 -->
       <el-form-item label="选择优惠方式：">
         <el-radio-group v-model="value.promotionType" size="small">
           <el-radio-button :label="0">无优惠</el-radio-button>
@@ -100,17 +66,15 @@
           <el-radio-button :label="4">满减价格</el-radio-button>
         </el-radio-group>
       </el-form-item>
-
+      <el-form-item v-show="value.promotionType===1">
-      <!-- 特惠促销设置 -->
-      <el-form-item v-show="value.promotionType === 1">
         <div>
           开始时间：
           <el-date-picker
             v-model="value.promotionStartTime"
             type="datetime"
             :picker-options="pickerOptions1"
-            placeholder="选择开始时间"
+            placeholder="选择开始时间">
-          ></el-date-picker>
+          </el-date-picker>
         </div>
         <div class="littleMargin">
           结束时间：
@@ -118,156 +82,225 @@
             v-model="value.promotionEndTime"
             type="datetime"
             :picker-options="pickerOptions1"
-            placeholder="选择结束时间"
+            placeholder="选择结束时间">
-          ></el-date-picker>
+          </el-date-picker>
         </div>
         <div class="littleMargin">
           促销价格：
-          <el-input
+          <el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
-            style="width: 220px"
-            v-model="value.promotionPrice"
-            placeholder="输入促销价格"
-          ></el-input>
         </div>
-      </el-form-item>
 
-      <!-- 会员价格设置 -->
+      </el-form-item>
-      <el-form-item v-show="value.promotionType === 2">
+      <el-form-item v-show="value.promotionType===2">
-        <div v-for="(item, index) in value.memberPriceList" :key="index" class="littleMargin">
+        <div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
-          {{ item.memberLevelName }}：
+          {{item.memberLevelName}}：
           <el-input v-model="item.memberPrice" style="width: 200px"></el-input>
         </div>
       </el-form-item>
-
+      <el-form-item v-show="value.promotionType===3">
-      <!-- 阶梯价格设置 -->
+        <el-table :data="value.productLadderList"
-      <el-form-item v-show="value.promotionType === 3">
+                  style="width: 80%" border>
-        <el-table :data="value.productLadderList" style="width: 80%" border>
+          <el-table-column
-          <el-table-column label="数量" align="center" width="120">
+            label="数量"
+            align="center"
+            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.count"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="折扣" align="center" width="120">
+          <el-table-column
+            label="折扣"
+            align="center"
+            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.discount"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center">
+          <el-table-column
+            align="center"
+            label="操作">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveProductLadder(scope.$index)">
+              <el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
-                删除
+              <el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
-              </el-button>
-              <el-button type="text" @click="handleAddProductLadder(scope.$index)">
-                添加
-              </el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
-
+      <el-form-item v-show="value.promotionType===4">
-      <!-- 满减价格设置 -->
+        <el-table :data="value.productFullReductionList"
-      <el-form-item v-show="value.promotionType === 4">
+                  style="width: 80%" border>
-        <el-table :data="value.productFullReductionList" style="width: 80%" border>
+          <el-table-column
-          <el-table-column label="满" align="center" width="120">
+            label="满"
+            align="center"
+            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.fullPrice"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="立减" align="center" width="120">
+          <el-table-column
+            label="立减"
+            align="center"
+            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.reducePrice"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center">
+          <el-table-column
+            align="center"
+            label="操作">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveFullReduction(scope.$index)">
+              <el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
-                删除
+              <el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
-              </el-button>
-              <el-button type="text" @click="handleAddFullReduction(scope.$index)">
-                添加
-              </el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
-
-      <!-- 操作按钮 -->
       <el-form-item style="text-align: center">
         <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
-        <el-button type="primary" size="medium" @click="handleNext">
+        <el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
-          下一步，填写商品属性
-        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-import { fetchList as fetchMemberLevelList } from '@/api/memberLevel'; // 获取会员等级API
+  import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
 
-export default {
+  export default {
-  name: 'ProductSaleDetail',
+    name: "ProductSaleDetail",
-  props: {
+    props: {
-    value: Object, // 父组件传入的数据对象
+      value: Object,
-    isEdit: {
+      isEdit: {
-      type: Boolean, // 是否编辑模式
+        type: Boolean,
-      default: false,
+        default: false
+      }
+    },
+    data() {
+      return {
+        //日期选择器配置
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() < Date.now();
+          }
+        }
+      }
+    },
+    created() {
+      if (this.isEdit) {
+        // this.handleEditCreated();
+      } else {
+        fetchMemberLevelList({defaultStatus: 0}).then(response => {
+          let memberPriceList = [];
+          for (let i = 0; i < response.data.length; i++) {
+            let item = response.data[i];
+            memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
+          }
+          this.value.memberPriceList = memberPriceList;
+        });
+      }
     },
-  },
+    computed: {
-  data() {
+      //选中的服务保证
-    return {
+      selectServiceList: {
-      pickerOptions1: {
+        get() {
-        disabledDate(time) {
+          let list = [];
-          return time.getTime() < Date.now(); // 禁用过去时间
+          if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list;
+          let ids = this.value.serviceIds.split(',');
+          for (let i = 0; i < ids.length; i++) {
+            list.push(Number(ids[i]));
+          }
+          return list;
         },
+        set(newValue) {
+          let serviceIds = '';
+          if (newValue != null && newValue.length > 0) {
+            for (let i = 0; i < newValue.length; i++) {
+              serviceIds += newValue[i] + ',';
+            }
+            if (serviceIds.endsWith(',')) {
+              serviceIds = serviceIds.substr(0, serviceIds.length - 1)
+            }
+            this.value.serviceIds = serviceIds;
+          } else {
+            this.value.serviceIds = null;
+          }
+        }
+      }
+    },
+    methods: {
+      handleEditCreated() {
+        let ids = this.value.serviceIds.split(',');
+        console.log('handleEditCreated', ids);
+        for (let i = 0; i < ids.length; i++) {
+          this.selectServiceList.push(Number(ids[i]));
+        }
       },
-    };
+      handleRemoveProductLadder(index, row) {
-  },
+        let productLadderList = this.value.productLadderList;
-  created() {
+        if (productLadderList.length === 1) {
-    fetchMemberLevelList({ defaultStatus: 0 }).then((response) => {
+          productLadderList.pop();
-      this.value.memberPriceList = response.data.map((item) => ({
+          productLadderList.push({
-        memberLevelId: item.id,
+            count: 0,
-        memberLevelName: item.name,
+            discount: 0,
-        memberPrice: 0,
+            price: 0
-      }));
+          })
-    });
+        } else {
-  },
+          productLadderList.splice(index, 1);
-  computed: {
+        }
-    // 选中的服务保证
-    selectServiceList: {
-      get() {
-        return this.value.serviceIds ? this.value.serviceIds.split(',').map(Number) : [];
       },
-      set(newValue) {
+      handleAddProductLadder(index, row) {
-        this.value.serviceIds = newValue.join(',');
+        let productLadderList = this.value.productLadderList;
+        if (productLadderList.length < 3) {
+          productLadderList.push({
+            count: 0,
+            discount: 0,
+            price: 0
+          })
+        } else {
+          this.$message({
+            message: '最多只能添加三条',
+            type: 'warning'
+          });
+        }
       },
-    },
+      handleRemoveFullReduction(index, row) {
-  },
+        let fullReductionList = this.value.productFullReductionList;
-  methods: {
+        if (fullReductionList.length === 1) {
-    handleRemoveProductLadder(index) {
+          fullReductionList.pop();
-      this.value.productLadderList.splice(index, 1);
+          fullReductionList.push({
-    },
+            fullPrice: 0,
-    handleAddProductLadder() {
+            reducePrice: 0
-      this.value.productLadderList.push({ count: 0, discount: 0 });
+          });
-    },
+        } else {
-    handleRemoveFullReduction(index) {
+          fullReductionList.splice(index, 1);
-      this.value.productFullReductionList.splice(index, 1);
+        }
-    },
+      },
-    handleAddFullReduction() {
+      handleAddFullReduction(index, row) {
-      this.value.productFullReductionList.push({ fullPrice: 0, reducePrice: 0 });
+        let fullReductionList = this.value.productFullReductionList;
-    },
+        if (fullReductionList.length < 3) {
-    handlePrev() {
+          fullReductionList.push({
-      this.$emit('prevStep');
+            fullPrice: 0,
-    },
+            reducePrice: 0
-    handleNext() {
+          });
-      this.$emit('nextStep');
+        } else {
-    },
+          this.$message({
-  },
+            message: '最多只能添加三条',
-};
+            type: 'warning'
+          });
+        }
+      },
+      handlePrev() {
+        this.$emit('prevStep')
+      },
+      handleNext() {
+        this.$emit('nextStep')
+      }
+    }
+  }
 </script>
 
 <style scoped>
-.littleMargin {
+  .littleMargin {
-  margin-top: 10px;
+    margin-top: 10px;
-}
+  }
 </style>

src/views/pms/product/index.vue

@@ -1,22 +1,24 @@
-<template>
+<template> 
-  <!-- 商品管理页面 -->
   <div class="app-container">
-    <!-- 筛选搜索卡片 -->
     <el-card class="filter-container" shadow="never">
       <div>
         <i class="el-icon-search"></i>
         <span>筛选搜索</span>
-        <!-- 查询按钮 -->
+        <el-button
-        <el-button style="float: right" @click="handleSearchList()" type="primary" size="small">
+          style="float: right"
+          @click="handleSearchList()"
+          type="primary"
+          size="small">
           查询结果
         </el-button>
-        <!-- 重置按钮 -->
+        <el-button
-        <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
+          style="float: right;margin-right: 15px"
+          @click="handleResetSearch()"
+          size="small">
           重置
         </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 style="width: 203px" v-model="listQuery.keyword" placeholder="商品名称"></el-input>
@@ -28,8 +30,8 @@
             <el-cascader
               clearable
               v-model="selectProductCateValue"
-              :options="productCateOptions"
+              :options="productCateOptions">
-            ></el-cascader>
+            </el-cascader>
           </el-form-item>
           <el-form-item label="商品品牌：">
             <el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable>
@@ -37,8 +39,8 @@
                 v-for="item in brandOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"
+                :value="item.value">
-              ></el-option>
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="上架状态：">
@@ -47,8 +49,8 @@
                 v-for="item in publishStatusOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"
+                :value="item.value">
-              ></el-option>
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="审核状态：">
@@ -57,206 +59,591 @@
                 v-for="item in verifyStatusOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"
+                :value="item.value">
-              ></el-option>
+              </el-option>
             </el-select>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
-
-    <!-- 操作卡片 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
-      <!-- 添加商品按钮 -->
+      <el-button
-      <el-button class="btn-add" @click="handleAddProduct()" size="mini">添加</el-button>
+        class="btn-add"
+        @click="handleAddProduct()"
+        size="mini">
+        添加
+      </el-button>
     </el-card>
-
-    <!-- 商品数据表格 -->
     <div class="table-container">
-      <el-table
+      <el-table ref="productTable"
-        ref="productTable"
+                :data="list"
-        :data="list"
+                style="width: 100%"
-        style="width: 100%"
+                @selection-change="handleSelectionChange"
-        @selection-change="handleSelectionChange"
+                v-loading="listLoading"
-        v-loading="listLoading"
+                border>
-        border
-      >
-        <!-- 表格列：选择框 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
-
-        <!-- 表格列：商品编号 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.id }}</template>
+          <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-
-        <!-- 表格列：商品图片 -->
         <el-table-column label="商品图片" width="120" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
-            <img style="height: 80px" :src="scope.row.pic" alt="商品图片" />
-          </template>
         </el-table-column>
-
-        <!-- 表格列：商品名称与品牌 -->
         <el-table-column label="商品名称" align="center">
           <template slot-scope="scope">
-            <p>{{ scope.row.name }}</p>
+            <p>{{scope.row.name}}</p>
-            <p>品牌：{{ scope.row.brandName }}</p>
+            <p>品牌：{{scope.row.brandName}}</p>
           </template>
         </el-table-column>
-
-        <!-- 表格列：价格与货号 -->
         <el-table-column label="价格/货号" width="120" align="center">
           <template slot-scope="scope">
-            <p>价格：￥{{ scope.row.price }}</p>
+            <p>价格：￥{{scope.row.price}}</p>
-            <p>货号：{{ scope.row.productSn }}</p>
+            <p>货号：{{scope.row.productSn}}</p>
           </template>
         </el-table-column>
-
-        <!-- 表格列：标签（上架/新品/推荐） -->
         <el-table-column label="标签" width="140" align="center">
           <template slot-scope="scope">
-            <!-- 上架状态 -->
+            <p>上架：
-            <p>
-              上架：
               <el-switch
                 @change="handlePublishStatusChange(scope.$index, scope.row)"
                 :active-value="1"
                 :inactive-value="0"
-                v-model="scope.row.publishStatus"
+                v-model="scope.row.publishStatus">
-              ></el-switch>
+              </el-switch>
             </p>
-            <!-- 新品状态 -->
+            <p>新品：
-            <p>
-              新品：
               <el-switch
                 @change="handleNewStatusChange(scope.$index, scope.row)"
                 :active-value="1"
                 :inactive-value="0"
-                v-model="scope.row.newStatus"
+                v-model="scope.row.newStatus">
-              ></el-switch>
+              </el-switch>
             </p>
-            <!-- 推荐状态 -->
+            <p>推荐：
-            <p>
-              推荐：
               <el-switch
                 @change="handleRecommendStatusChange(scope.$index, scope.row)"
                 :active-value="1"
                 :inactive-value="0"
-                v-model="scope.row.recommandStatus"
+                v-model="scope.row.recommandStatus">
-              ></el-switch>
+              </el-switch>
+            </p>
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.sort}}</template>
+        </el-table-column>
+        <el-table-column label="SKU库存" width="100" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" icon="el-icon-edit" @click="handleShowSkuEditDialog(scope.$index, scope.row)" circle></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="销量" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.sale}}</template>
+        </el-table-column>
+        <el-table-column label="审核状态" width="100" align="center">
+          <template slot-scope="scope">
+            <p>{{scope.row.verifyStatus | verifyStatusFilter}}</p>
+            <p>
+              <el-button
+                type="text"
+                @click="handleShowVerifyDetail(scope.$index, scope.row)">审核详情
+              </el-button>
             </p>
           </template>
         </el-table-column>
-
-        <!-- 表格列：操作 -->
         <el-table-column label="操作" width="160" align="center">
           <template slot-scope="scope">
             <p>
-              <el-button size="mini" @click="handleShowProduct(scope.$index, scope.row)">查看</el-button>
+              <el-button
-              <el-button size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">编辑</el-button>
+                size="mini"
+                @click="handleShowProduct(scope.$index, scope.row)">查看
+              </el-button>
+              <el-button
+                size="mini"
+                @click="handleUpdateProduct(scope.$index, scope.row)">编辑
+              </el-button>
             </p>
             <p>
-              <el-button size="mini" @click="handleShowLog(scope.$index, scope.row)">日志</el-button>
+              <el-button
-              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                size="mini"
+                @click="handleShowLog(scope.$index, scope.row)">日志
+              </el-button>
+              <el-button
+                size="mini"
+                type="danger"
+                @click="handleDelete(scope.$index, scope.row)">删除
+              </el-button>
             </p>
           </template>
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 批量操作区域 -->
     <div class="batch-operate-container">
-      <el-select size="small" v-model="operateType" placeholder="批量操作">
+      <el-select
+        size="small"
+        v-model="operateType" placeholder="批量操作">
         <el-option
           v-for="item in operates"
           :key="item.value"
           :label="item.label"
-          :value="item.value"
+          :value="item.value">
-        ></el-option>
+        </el-option>
       </el-select>
       <el-button
         style="margin-left: 20px"
         class="search-button"
         @click="handleBatchOperate()"
         type="primary"
-        size="small"
+        size="small">
-      >
         确定
       </el-button>
     </div>
-
-    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, sizes,prev, pager, next,jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5, 10, 15]"
+        :page-sizes="[5,10,15]"
         :current-page.sync="listQuery.pageNum"
-        :total="total"
+        :total="total">
-      ></el-pagination>
+      </el-pagination>
     </div>
+    <el-dialog
+      title="编辑货品信息"
+      :visible.sync="editSkuInfo.dialogVisible"
+      width="40%">
+      <span>商品货号：</span>
+      <span>{{editSkuInfo.productSn}}</span>
+      <el-input placeholder="按sku编号搜索" v-model="editSkuInfo.keyword" size="small" style="width: 50%;margin-left: 20px">
+        <el-button slot="append" icon="el-icon-search" @click="handleSearchEditSku"></el-button>
+      </el-input>
+      <el-table style="width: 100%;margin-top: 20px"
+                :data="editSkuInfo.stockList"
+                border>
+        <el-table-column
+          label="SKU编号"
+          align="center">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.skuCode"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="(item,index) in editSkuInfo.productAttr"
+          :label="item.name"
+          :key="item.id"
+          align="center">
+          <template slot-scope="scope">
+            {{getProductSkuSp(scope.row,index)}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="销售价格"
+          width="80"
+          align="center">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.price"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="商品库存"
+          width="80"
+          align="center">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.stock"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="库存预警值"
+          width="100"
+          align="center">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.lowStock"></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="editSkuInfo.dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleEditSkuConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
-
 <script>
-import {
+  import {
-  fetchList,
+    fetchList,
-  updateDeleteStatus,
+    updateDeleteStatus,
-  updateNewStatus,
+    updateNewStatus,
-  updateRecommendStatus,
+    updateRecommendStatus,
-  updatePublishStatus,
+    updatePublishStatus
-} from '@/api/product';
+  } from '@/api/product'
+  import {fetchList as fetchSkuStockList,update as updateSkuStockList} from '@/api/skuStock'
+  import {fetchList as fetchProductAttrList} from '@/api/productAttr'
+  import {fetchList as fetchBrandList} from '@/api/brand'
+  import {fetchListWithChildren} from '@/api/productCate'
 
-export default {
+  const defaultListQuery = {
-  name: 'productList',
+    keyword: null,
-  data() {
+    pageNum: 1,
-    return {
+    pageSize: 5,
-      listQuery: { pageNum: 1, pageSize: 5 },
+    publishStatus: null,
-      list: [],
+    verifyStatus: null,
-      total: 0,
+    productSn: null,
-      listLoading: false,
+    productCategoryId: null,
-      operates: [{ label: '商品上架', value: 'publishOn' }],
+    brandId: null
-      operateType: null,
+  };
-    };
+  export default {
-  },
+    name: "productList",
-  created() {
+    data() {
-    this.getList();
+      return {
-  },
+        editSkuInfo:{
-  methods: {
+          dialogVisible:false,
-    // 获取商品列表
+          productId:null,
-    getList() {
+          productSn:'',
-      this.listLoading = true;
+          productAttributeCategoryId:null,
-      fetchList(this.listQuery).then((response) => {
+          stockList:[],
-        this.listLoading = false;
+          productAttr:[],
-        this.list = response.data.list;
+          keyword:null
-        this.total = response.data.total;
+        },
-      });
+        operates: [
+          {
+            label: "商品上架",
+            value: "publishOn"
+          },
+          {
+            label: "商品下架",
+            value: "publishOff"
+          },
+          {
+            label: "设为推荐",
+            value: "recommendOn"
+          },
+          {
+            label: "取消推荐",
+            value: "recommendOff"
+          },
+          {
+            label: "设为新品",
+            value: "newOn"
+          },
+          {
+            label: "取消新品",
+            value: "newOff"
+          },
+          {
+            label: "转移到分类",
+            value: "transferCategory"
+          },
+          {
+            label: "移入回收站",
+            value: "recycle"
+          }
+        ],
+        operateType: null,
+        listQuery: Object.assign({}, defaultListQuery),
+        list: null,
+        total: null,
+        listLoading: true,
+        selectProductCateValue: null,
+        multipleSelection: [],
+        productCateOptions: [],
+        brandOptions: [],
+        publishStatusOptions: [{
+          value: 1,
+          label: '上架'
+        }, {
+          value: 0,
+          label: '下架'
+        }],
+        verifyStatusOptions: [{
+          value: 1,
+          label: '审核通过'
+        }, {
+          value: 0,
+          label: '未审核'
+        }]
+      }
     },
-    // 重置搜索
+    created() {
-    handleResetSearch() {
-      this.listQuery = { pageNum: 1, pageSize: 5 };
       this.getList();
+      this.getBrandList();
+      this.getProductCateList();
     },
-    // 查询列表
+    watch: {
-    handleSearchList() {
+      selectProductCateValue: function (newValue) {
-      this.listQuery.pageNum = 1;
+        if (newValue != null && newValue.length == 2) {
-      this.getList();
+          this.listQuery.productCategoryId = newValue[1];
+        } else {
+          this.listQuery.productCategoryId = null;
+        }
+
+      }
     },
-    // 添加商品
+    filters: {
-    handleAddProduct() {
+      verifyStatusFilter(value) {
-      this.$router.push('/pms/addProduct');
+        if (value === 1) {
+          return '审核通过';
+        } else {
+          return '未审核';
+        }
+      }
     },
-  },
+    methods: {
-};
+      getProductSkuSp(row, index) {
+        let spData = JSON.parse(row.spData);
+        if(spData!=null&&index<spData.length){
+          return spData[index].value;
+        }else{
+          return null;
+        }
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList(this.listQuery).then(response => {
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      },
+      getBrandList() {
+        fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
+          this.brandOptions = [];
+          let brandList = response.data.list;
+          for (let i = 0; i < brandList.length; i++) {
+            this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
+          }
+        });
+      },
+      getProductCateList() {
+        fetchListWithChildren().then(response => {
+          let list = response.data;
+          this.productCateOptions = [];
+          for (let i = 0; i < list.length; i++) {
+            let children = [];
+            if (list[i].children != null && list[i].children.length > 0) {
+              for (let j = 0; j < list[i].children.length; j++) {
+                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
+              }
+            }
+            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+          }
+        });
+      },
+      handleShowSkuEditDialog(index,row){
+        this.editSkuInfo.dialogVisible=true;
+        this.editSkuInfo.productId=row.id;
+        this.editSkuInfo.productSn=row.productSn;
+        this.editSkuInfo.productAttributeCategoryId = row.productAttributeCategoryId;
+        this.editSkuInfo.keyword=null;
+        fetchSkuStockList(row.id,{keyword:this.editSkuInfo.keyword}).then(response=>{
+          this.editSkuInfo.stockList=response.data;
+        });
+        if(row.productAttributeCategoryId!=null){
+          fetchProductAttrList(row.productAttributeCategoryId,{type:0}).then(response=>{
+            this.editSkuInfo.productAttr=response.data.list;
+          });
+        }
+      },
+      handleSearchEditSku(){
+        fetchSkuStockList(this.editSkuInfo.productId,{keyword:this.editSkuInfo.keyword}).then(response=>{
+          this.editSkuInfo.stockList=response.data;
+        });
+      },
+      handleEditSkuConfirm(){
+        if(this.editSkuInfo.stockList==null||this.editSkuInfo.stockList.length<=0){
+          this.$message({
+            message: '暂无sku信息',
+            type: 'warning',
+            duration: 1000
+          });
+          return
+        }
+        this.$confirm('是否要进行修改', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(()=>{
+          updateSkuStockList(this.editSkuInfo.productId,this.editSkuInfo.stockList).then(response=>{
+            this.$message({
+              message: '修改成功',
+              type: 'success',
+              duration: 1000
+            });
+            this.editSkuInfo.dialogVisible=false;
+          });
+        });
+      },
+      handleSearchList() {
+        this.listQuery.pageNum = 1;
+        this.getList();
+      },
+      handleAddProduct() {
+        this.$router.push({path:'/pms/addProduct'});
+      },
+      handleBatchOperate() {
+        if(this.operateType==null){
+          this.$message({
+            message: '请选择操作类型',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        if(this.multipleSelection==null||this.multipleSelection.length<1){
+          this.$message({
+            message: '请选择要操作的商品',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        this.$confirm('是否要进行该批量操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let ids=[];
+          for(let i=0;i<this.multipleSelection.length;i++){
+            ids.push(this.multipleSelection[i].id);
+          }
+          switch (this.operateType) {
+            case this.operates[0].value:
+              this.updatePublishStatus(1,ids);
+              break;
+            case this.operates[1].value:
+              this.updatePublishStatus(0,ids);
+              break;
+            case this.operates[2].value:
+              this.updateRecommendStatus(1,ids);
+              break;
+            case this.operates[3].value:
+              this.updateRecommendStatus(0,ids);
+              break;
+            case this.operates[4].value:
+              this.updateNewStatus(1,ids);
+              break;
+            case this.operates[5].value:
+              this.updateNewStatus(0,ids);
+              break;
+            case this.operates[6].value:
+              break;
+            case this.operates[7].value:
+              this.updateDeleteStatus(1,ids);
+              break;
+            default:
+              break;
+          }
+          this.getList();
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handlePublishStatusChange(index, row) {
+        let ids = [];
+        ids.push(row.id);
+        this.updatePublishStatus(row.publishStatus, ids);
+      },
+      handleNewStatusChange(index, row) {
+        let ids = [];
+        ids.push(row.id);
+        this.updateNewStatus(row.newStatus, ids);
+      },
+      handleRecommendStatusChange(index, row) {
+        let ids = [];
+        ids.push(row.id);
+        this.updateRecommendStatus(row.recommandStatus, ids);
+      },
+      handleResetSearch() {
+        this.selectProductCateValue = [];
+        this.listQuery = Object.assign({}, defaultListQuery);
+      },
+      handleDelete(index, row){
+        this.$confirm('是否要进行删除操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let ids = [];
+          ids.push(row.id);
+          this.updateDeleteStatus(1,ids);
+        });
+      },
+      handleUpdateProduct(index,row){
+        this.$router.push({path:'/pms/updateProduct',query:{id:row.id}});
+      },
+      handleShowProduct(index,row){
+        console.log("handleShowProduct",row);
+      },
+      handleShowVerifyDetail(index,row){
+        console.log("handleShowVerifyDetail",row);
+      },
+      handleShowLog(index,row){
+        console.log("handleShowLog",row);
+      },
+      updatePublishStatus(publishStatus, ids) {
+        let params = new URLSearchParams();
+        params.append('ids', ids);
+        params.append('publishStatus', publishStatus);
+        updatePublishStatus(params).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
+        });
+      },
+      updateNewStatus(newStatus, ids) {
+        let params = new URLSearchParams();
+        params.append('ids', ids);
+        params.append('newStatus', newStatus);
+        updateNewStatus(params).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
+        });
+      },
+      updateRecommendStatus(recommendStatus, ids) {
+        let params = new URLSearchParams();
+        params.append('ids', ids);
+        params.append('recommendStatus', recommendStatus);
+        updateRecommendStatus(params).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
+        });
+      },
+      updateDeleteStatus(deleteStatus, ids) {
+        let params = new URLSearchParams();
+        params.append('ids', ids);
+        params.append('deleteStatus', deleteStatus);
+        updateDeleteStatus(params).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          });
+        });
+        this.getList();
+      }
+    }
+  }
 </script>
+<style></style>
+
 
-<style scoped>
-.app-container {
-  padding: 20px;
-}
-</style>

src/views/pms/product/update.vue

@@ -1,24 +1,12 @@
-<template>
+<template> 
-  <!-- 商品详情组件，用于编辑商品 -->
+  <product-detail :is-edit='true'></product-detail>
-  <!-- 通过 `:is-edit="true"` 传递一个布尔值，标识当前操作是编辑模式 -->
-  <product-detail :is-edit="true"></product-detail>
 </template>
-
 <script>
-/**
+  import ProductDetail from './components/ProductDetail'
- * 导入 ProductDetail 组件，作为编辑商品的核心组件
+  export default {
- * 该组件内部根据传入的 `is-edit` 参数区分新增或编辑模式
+    name: 'updateProduct',
- */
+    components: { ProductDetail }
-import ProductDetail from './components/ProductDetail';
+  }
-
-export default {
-  name: 'updateProduct', // 组件名称：用于标识当前页面
-  components: {
-    ProductDetail, // 注册 ProductDetail 组件，使其可以在模板中使用
-  },
-};
 </script>
-
 <style>
-/* 样式部分：暂无自定义样式，根据需求可以添加 */
 </style>

src/views/pms/productAttr/addProductAttr.vue

@@ -1,26 +1,15 @@
 <template>
-  <!-- 商品属性详情组件 -->
+  <product-attr-detail :is-edit='false'></product-attr-detail>
-  <!-- 使用 ProductAttrDetail 组件，传递 is-edit="false" 表示新增模式 -->
-  <product-attr-detail :is-edit="false"></product-attr-detail>
 </template>
 
 <script>
-/**
+  import ProductAttrDetail from './components/ProductAttrDetail'
- * 导入 ProductAttrDetail 组件
+  export default {
- * 该组件用于处理商品属性的新增和编辑功能
+    name: 'addProductAttr',
- * 通过传递 `is-edit` 参数来控制组件的操作模式
+    components: { ProductAttrDetail }
- */
+  }
-import ProductAttrDetail from './components/ProductAttrDetail';
-
-export default {
-  // 组件名称：用于标识当前页面
-  name: 'addProductAttr',
-  components: {
-    ProductAttrDetail, // 注册 ProductAttrDetail 组件
-  },
-};
 </script>
 
 <style scoped>
-/* 样式部分：暂无自定义样式，可根据需求添加 */
+
 </style>

src/views/pms/productAttr/components/ProductAttrDetail.vue

@@ -1,38 +1,25 @@
 <template>
-  <!-- 属性详情表单卡片 -->
   <el-card class="form-container" shadow="never">
-    <el-form
+    <el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px">
-      :model="productAttr"
-      :rules="rules"
-      ref="productAttrFrom"
-      label-width="150px"
-    >
-      <!-- 属性名称 -->
       <el-form-item label="属性名称：" prop="name">
         <el-input v-model="productAttr.name"></el-input>
       </el-form-item>
-
-      <!-- 商品类型选择 -->
       <el-form-item label="商品类型：">
         <el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择">
           <el-option
             v-for="item in productAttrCateList"
             :key="item.id"
             :label="item.name"
-            :value="item.id"
+            :value="item.id">
-          ></el-option>
+          </el-option>
         </el-select>
       </el-form-item>
-
-      <!-- 分类筛选样式 -->
       <el-form-item label="分类筛选样式:">
         <el-radio-group v-model="productAttr.filterType">
           <el-radio :label="0">普通</el-radio>
           <el-radio :label="1">颜色</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 能否进行检索 -->
       <el-form-item label="能否进行检索:">
         <el-radio-group v-model="productAttr.searchType">
           <el-radio :label="0">不需要检索</el-radio>
@@ -40,16 +27,12 @@
           <el-radio :label="2">范围检索</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 商品属性关联 -->
       <el-form-item label="商品属性关联:">
         <el-radio-group v-model="productAttr.relatedStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 属性是否可选 -->
       <el-form-item label="属性是否可选:">
         <el-radio-group v-model="productAttr.selectType">
           <el-radio :label="0">唯一</el-radio>
@@ -57,178 +40,146 @@
           <el-radio :label="2">复选</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 属性值的录入方式 -->
       <el-form-item label="属性值的录入方式:">
         <el-radio-group v-model="productAttr.inputType">
           <el-radio :label="0">手工录入</el-radio>
           <el-radio :label="1">从下面列表中选择</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 属性值可选值列表 -->
       <el-form-item label="属性值可选值列表:">
-        <el-input
+        <el-input :autosize="true" type="textarea" v-model="inputListFormat"></el-input>
-          :autosize="true"
-          type="textarea"
-          v-model="inputListFormat"
-        ></el-input>
       </el-form-item>
-
-      <!-- 是否支持手动新增 -->
       <el-form-item label="是否支持手动新增:">
         <el-radio-group v-model="productAttr.handAddStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 排序属性 -->
       <el-form-item label="排序属性：">
         <el-input v-model="productAttr.sort"></el-input>
       </el-form-item>
-
-      <!-- 提交与重置按钮 -->
       <el-form-item>
         <el-button type="primary" @click="onSubmit('productAttrFrom')">提交</el-button>
-        <el-button v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
+        <el-button  v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
 
 <script>
-import { fetchList } from '@/api/productAttrCate'; // 获取商品类型分类API
+  import {fetchList} from '@/api/productAttrCate'
-import {
+  import {createProductAttr,getProductAttr,updateProductAttr} from '@/api/productAttr'
-  createProductAttr,
-  getProductAttr,
-  updateProductAttr,
-} from '@/api/productAttr'; // 创建、获取、更新属性API
-
-// 默认商品属性对象
-const defaultProductAttr = {
-  filterType: 0,
-  handAddStatus: 0,
-  inputList: '',
-  inputType: 0,
-  name: '',
-  productAttributeCategoryId: 0,
-  relatedStatus: 0,
-  searchType: 0,
-  selectType: 0,
-  sort: 0,
-  type: 0,
-};
 
-export default {
+  const defaultProductAttr = {
-  name: 'ProductAttrDetail', // 组件名称
+    filterType: 0,
-  props: {
+    handAddStatus: 0,
-    isEdit: {
+    inputList: '',
-      type: Boolean, // 是否编辑模式
+    inputType: 0,
-      default: false,
+    name: '',
+    productAttributeCategoryId: 0,
+    relatedStatus: 0,
+    searchType: 0,
+    selectType: 0,
+    sort: 0,
+    type: 0
+  };
+  export default {
+    name: "ProductAttrDetail",
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
     },
-  },
+    data() {
-  data() {
+      return {
-    return {
+        productAttr: Object.assign({}, defaultProductAttr),
-      productAttr: Object.assign({}, defaultProductAttr), // 商品属性对象
+        rules: {
-      rules: {
+          name: [
-        // 表单验证规则
+            {required: true, message: '请输入属性名称', trigger: 'blur'},
-        name: [
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-          { required: true, message: '请输入属性名称', trigger: 'blur' },
+          ]
-          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
+        },
-        ],
+        productAttrCateList: null,
-      },
+        inputListFormat:null
-      productAttrCateList: null, // 商品分类列表
+      }
-      inputListFormat: null, // 格式化的输入列表
-    };
-  },
-  created() {
-    if (this.isEdit) {
-      // 编辑模式：获取商品属性数据
-      getProductAttr(this.$route.query.id).then((response) => {
-        this.productAttr = response.data;
-        // 将逗号分隔的属性值转换为换行符格式
-        this.inputListFormat = this.productAttr.inputList.replace(/,/g, '\n');
-      });
-    } else {
-      // 新增模式：初始化商品属性
-      this.resetProductAttr();
-    }
-    this.getCateList(); // 获取商品分类列表
-  },
-  watch: {
-    // 监听输入列表变化，将换行符替换为逗号分隔
-    inputListFormat(newValue) {
-      newValue = newValue.replace(/\n/g, ',');
-      this.productAttr.inputList = newValue;
     },
-  },
+    created() {
-  methods: {
+      if(this.isEdit){
-    // 获取商品分类列表
+        getProductAttr(this.$route.query.id).then(response => {
-    getCateList() {
+          this.productAttr = response.data;
-      let listQuery = { pageNum: 1, pageSize: 100 };
+          this.inputListFormat = this.productAttr.inputList.replace(/,/g,'\n');
-      fetchList(listQuery).then((response) => {
+        });
-        this.productAttrCateList = response.data.list;
+      }else{
-      });
+        this.resetProductAttr();
+      }
+      this.getCateList();
     },
-    // 重置商品属性对象
+    watch:{
-    resetProductAttr() {
+      inputListFormat: function (newValue, oldValue) {
-      this.productAttr = Object.assign({}, defaultProductAttr);
+        newValue = newValue.replace(/\n/g,',');
-      this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
+        this.productAttr.inputList = newValue;
-      this.productAttr.type = Number(this.$route.query.type);
+      }
     },
-    // 提交表单
+    methods: {
-    onSubmit(formName) {
+      getCateList() {
-      this.$refs[formName].validate((valid) => {
+        let listQuery = {pageNum: 1, pageSize: 100};
-        if (valid) {
+        fetchList(listQuery).then(response => {
-          // 弹窗确认
+          this.productAttrCateList = response.data.list;
-          this.$confirm('是否提交数据', '提示', {
+        });
-            confirmButtonText: '确定',
+      },
-            cancelButtonText: '取消',
+      resetProductAttr() {
-            type: 'warning',
+        this.productAttr = Object.assign({}, defaultProductAttr);
-          }).then(() => {
+        this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
-            if (this.isEdit) {
+        this.productAttr.type = Number(this.$route.query.type);
-              // 编辑模式：更新数据
+      },
-              updateProductAttr(this.$route.query.id, this.productAttr).then(() => {
+      onSubmit(formName) {
-                this.$message({
+        this.$refs[formName].validate((valid) => {
-                  message: '修改成功',
+          if (valid) {
-                  type: 'success',
+            this.$confirm('是否提交数据', '提示', {
-                  duration: 1000,
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              if(this.isEdit){
+                updateProductAttr(this.$route.query.id,this.productAttr).then(response=>{
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration: 1000
+                  });
+                  this.$router.back();
                 });
-                this.$router.back();
+              }else{
-              });
+                createProductAttr(this.productAttr).then(response=>{
-            } else {
+                  this.$message({
-              // 新增模式：创建数据
+                    message: '提交成功',
-              createProductAttr(this.productAttr).then(() => {
+                    type: 'success',
-                this.$message({
+                    duration: 1000
-                  message: '提交成功',
+                  });
-                  type: 'success',
+                  this.resetForm('productAttrFrom');
-                  duration: 1000,
                 });
-                this.resetForm(formName);
+              }
-              });
+            });
-            }
+
-          });
+          } else {
-        } else {
+            this.$message({
-          // 表单验证失败
+              message: '验证失败',
-          this.$message({
+              type: 'error',
-            message: '验证失败',
+              duration: 1000
-            type: 'error',
+            });
-            duration: 1000,
+            return false;
-          });
+          }
-          return false;
+        });
-        }
+      },
-      });
+      resetForm(formName) {
-    },
+        this.$refs[formName].resetFields();
-    // 重置表单
+        this.resetProductAttr();
-    resetForm(formName) {
+      }
-      this.$refs[formName].resetFields();
-      this.resetProductAttr();
     },
-  },
+  }
-};
 </script>
 
 <style scoped>
-/* 样式部分：可以根据需求添加自定义样式 */
+
 </style>

src/views/pms/productAttr/index.vue

@@ -1,103 +1,82 @@
-<template>
+<template> 
-  <!-- 商品属性分类管理页面 -->
   <div class="app-container">
-    <!-- 操作栏：包含添加按钮 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
-      <!-- 添加商品属性分类按钮 -->
+      <el-button
-      <el-button class="btn-add" @click="addProductAttrCate()" size="mini">添加</el-button>
+        class="btn-add"
+        @click="addProductAttrCate()"
+        size="mini">
+        添加
+      </el-button>
     </el-card>
-
-    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table
+      <el-table ref="productAttrCateTable"
-        ref="productAttrCateTable"
+                style="width: 100%"
-        style="width: 100%"
+                :data="list"
-        :data="list"
+                v-loading="listLoading"
-        v-loading="listLoading"
+                border>
-        border
-      >
-        <!-- 列：编号 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.id }}</template>
+          <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-
-        <!-- 列：类型名称 -->
         <el-table-column label="类型名称" align="center">
-          <template slot-scope="scope">{{ scope.row.name }}</template>
+          <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
-
-        <!-- 列：属性数量 -->
         <el-table-column label="属性数量" width="200" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template>
-            {{ scope.row.attributeCount == null ? 0 : scope.row.attributeCount }}
-          </template>
         </el-table-column>
-
-        <!-- 列：参数数量 -->
         <el-table-column label="参数数量" width="200" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template>
-            {{ scope.row.paramCount == null ? 0 : scope.row.paramCount }}
-          </template>
         </el-table-column>
-
-        <!-- 列：设置 -->
         <el-table-column label="设置" width="200" align="center">
           <template slot-scope="scope">
-            <!-- 属性列表按钮 -->
+            <el-button
-            <el-button size="mini" @click="getAttrList(scope.$index, scope.row)">
+              size="mini"
-              属性列表
+              @click="getAttrList(scope.$index, scope.row)">属性列表
             </el-button>
-            <!-- 参数列表按钮 -->
+            <el-button
-            <el-button size="mini" @click="getParamList(scope.$index, scope.row)">
+              size="mini"
-              参数列表
+              @click="getParamList(scope.$index, scope.row)">参数列表
             </el-button>
           </template>
         </el-table-column>
-
-        <!-- 列：操作 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
-            <!-- 编辑按钮 -->
+            <el-button
-            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
+              size="mini"
-            <!-- 删除按钮 -->
+              @click="handleUpdate(scope.$index, scope.row)">编辑
-            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
+            </el-button>
-              删除
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, sizes,prev, pager, next,jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5, 10, 15]"
+        :page-sizes="[5,10,15]"
         :current-page.sync="listQuery.pageNum"
-        :total="total"
+        :total="total">
-      ></el-pagination>
+      </el-pagination>
     </div>
-
-    <!-- 弹出框：添加/编辑商品属性分类 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
-      :before-close="handleClose"
+      :before-close="handleClose()"
-      width="30%"
+      width="30%">
-    >
+      <el-form ref="productAttrCatForm":model="productAttrCate" :rules="rules" label-width="120px">
-      <!-- 表单：输入类型名称 -->
-      <el-form ref="productAttrCatForm" :model="productAttrCate" :rules="rules" label-width="120px">
         <el-form-item label="类型名称" prop="name">
           <el-input v-model="productAttrCate.name" auto-complete="off"></el-input>
         </el-form-item>
       </el-form>
-      <!-- 弹窗底部操作按钮 -->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button>
@@ -105,155 +84,127 @@
     </el-dialog>
   </div>
 </template>
-
 <script>
-/**
+  import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttrCate'
- * 导入商品属性分类相关的 API
+
- */
+  export default {
-import {
+    name: 'productAttrCateList',
-  fetchList,
+    data() {
-  createProductAttrCate,
+      return {
-  deleteProductAttrCate,
+        list: null,
-  updateProductAttrCate,
+        total: null,
-} from '@/api/productAttrCate';
+        listLoading: true,
-
+        listQuery: {
-export default {
+          pageNum: 1,
-  name: 'productAttrCateList', // 组件名称
+          pageSize: 5
-  data() {
+        },
-    return {
+        dialogVisible: false,
-      list: null, // 数据列表
+        dialogTitle:'',
-      total: null, // 数据总条数
+        productAttrCate:{
-      listLoading: true, // 加载状态
+          name:'',
-      listQuery: {
+          id:null
-        pageNum: 1,
+        },
-        pageSize: 5,
+        rules: {
-      },
+          name: [
-      dialogVisible: false, // 控制弹窗的显示
+            { required: true, message: '请输入类型名称', trigger: 'blur' }
-      dialogTitle: '', // 弹窗标题
+          ]
-      productAttrCate: {
+        }
-        name: '',
+      }
-        id: null,
-      },
-      rules: {
-        name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
-      },
-    };
-  },
-  created() {
-    // 页面加载时获取数据列表
-    this.getList();
-  },
-  methods: {
-    // 获取数据列表
-    getList() {
-      this.listLoading = true;
-      fetchList(this.listQuery).then((response) => {
-        this.listLoading = false;
-        this.list = response.data.list;
-        this.total = response.data.total;
-      });
-    },
-
-    // 添加商品属性分类
-    addProductAttrCate() {
-      this.dialogVisible = true;
-      this.dialogTitle = '添加类型';
-      this.productAttrCate = { name: '', id: null };
-    },
-
-    // 处理分页大小变化
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = val;
-      this.getList();
     },
-
+    created() {
-    // 处理页码变化
-    handleCurrentChange(val) {
-      this.listQuery.pageNum = val;
       this.getList();
     },
-
+    methods: {
-    // 删除商品属性分类
+      getList() {
-    handleDelete(index, row) {
+        this.listLoading = true;
-      this.$confirm('是否要删除该分类？', '提示', {
+        fetchList(this.listQuery).then(response => {
-        confirmButtonText: '确定',
+          this.listLoading = false;
-        cancelButtonText: '取消',
+          this.list = response.data.list;
-        type: 'warning',
+          this.total = response.data.total;
-      }).then(() => {
-        deleteProductAttrCate(row.id).then(() => {
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-            duration: 1000,
-          });
-          this.getList();
         });
-      });
+      },
-    },
+      addProductAttrCate() {
-
+        this.dialogVisible = true;
-    // 编辑商品属性分类
+        this.dialogTitle = "添加类型";
-    handleUpdate(index, row) {
+      },
-      this.dialogVisible = true;
+      handleSizeChange(val) {
-      this.dialogTitle = '编辑类型';
+        this.listQuery.pageNum = 1;
-      this.productAttrCate.name = row.name;
+        this.listQuery.pageSize = val;
-      this.productAttrCate.id = row.id;
+        this.getList();
-    },
+      },
-
+      handleCurrentChange(val) {
-    // 跳转到属性列表
+        this.listQuery.pageNum = val;
-    getAttrList(index, row) {
+        this.getList();
-      this.$router.push({
+      },
-        path: '/pms/productAttrList',
+      handleDelete(index, row) {
-        query: { cid: row.id, cname: row.name, type: 0 },
+        this.$confirm('是否要删除该品牌', '提示', {
-      });
+          confirmButtonText: '确定',
-    },
+          cancelButtonText: '取消',
-
+          type: 'warning'
-    // 跳转到参数列表
+        }).then(() => {
-    getParamList(index, row) {
+          deleteProductAttrCate(row.id).then(response=>{
-      this.$router.push({
+            this.$message({
-        path: '/pms/productAttrList',
+              message: '删除成功',
-        query: { cid: row.id, cname: row.name, type: 1 },
+              type: 'success',
-      });
+              duration:1000
-    },
-
-    // 确认弹窗提交
-    handleConfirm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          const data = new URLSearchParams();
-          data.append('name', this.productAttrCate.name);
-
-          if (this.dialogTitle === '添加类型') {
-            // 添加类型
-            createProductAttrCate(data).then(() => {
-              this.$message({ message: '添加成功', type: 'success', duration: 1000 });
-              this.dialogVisible = false;
-              this.getList();
             });
+            this.getList();
+          });
+        });
+      },
+      handleUpdate(index, row) {
+        this.dialogVisible = true;
+        this.dialogTitle = "编辑类型";
+        this.productAttrCate.name = row.name;
+        this.productAttrCate.id = row.id;
+      },
+      getAttrList(index, row) {
+        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}})
+      },
+      getParamList(index, row) {
+        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:1}})
+      },
+      handleConfirm(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let data = new URLSearchParams();
+            data.append("name",this.productAttrCate.name);
+            if(this.dialogTitle==="添加类型"){
+              createProductAttrCate(data).then(response=>{
+                this.$message({
+                  message: '添加成功',
+                  type: 'success',
+                  duration:1000
+                });
+                this.dialogVisible = false;
+                this.getList();
+              });
+            }else{
+              updateProductAttrCate(this.productAttrCate.id,data).then(response=>{
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration:1000
+                });
+                this.dialogVisible = false;
+                this.getList();
+              });
+            }
           } else {
-            // 修改类型
+            console.log('error submit!!');
-            updateProductAttrCate(this.productAttrCate.id, data).then(() => {
+            return false;
-              this.$message({ message: '修改成功', type: 'success', duration: 1000 });
-              this.dialogVisible = false;
-              this.getList();
-            });
           }
+        });
+      },
+      handleClose(){
+        if (!this.dialogVisible && this.$refs.productAttrCatForm) {
+          this.$refs.productAttrCatForm.clearValidate()
         }
-      });
-    },
-
-    // 关闭弹窗时清除表单校验
-    handleClose() {
-      if (this.$refs.productAttrCatForm) {
-        this.$refs.productAttrCatForm.clearValidate();
       }
-    },
+    }
-  },
+  }
-};
 </script>
-
+<style rel="stylesheet/scss" lang="scss" scoped>
-<style scoped>
-.app-container {
-  padding: 20px;
-}
 </style>
+
+

src/views/pms/productAttr/productAttrList.vue

@@ -1,248 +1,219 @@
-<template>
+<template> 
-  <!-- 商品属性列表页面 -->
   <div class="app-container">
-    <!-- 操作栏：包含添加按钮 -->
     <el-card class="operate-container" shadow="never">
+
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
-      <!-- 添加按钮：跳转到添加商品属性页面 -->
+      <el-button
-      <el-button class="btn-add" @click="addProductAttr()" size="mini">添加</el-button>
+        class="btn-add"
+        @click="addProductAttr()"
+        size="mini">
+        添加
+      </el-button>
     </el-card>
-
-    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table
+      <el-table ref="productAttrTable"
-        ref="productAttrTable"
+                :data="list"
-        :data="list"
+                style="width: 100%"
-        style="width: 100%"
+                @selection-change="handleSelectionChange"
-        @selection-change="handleSelectionChange"
+                v-loading="listLoading"
-        v-loading="listLoading"
+                border>
-        border
-      >
-        <!-- 多选框 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
-
-        <!-- 编号列 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.id }}</template>
+          <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-
-        <!-- 属性名称列 -->
         <el-table-column label="属性名称" width="140" align="center">
-          <template slot-scope="scope">{{ scope.row.name }}</template>
+          <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
-
-        <!-- 商品类型列 -->
         <el-table-column label="商品类型" width="140" align="center">
-          <template slot-scope="scope">{{ $route.query.cname }}</template>
+          <template slot-scope="scope">{{$route.query.cname}}</template>
         </el-table-column>
-
-        <!-- 属性是否可选列 -->
         <el-table-column label="属性是否可选" width="120" align="center">
-          <template slot-scope="scope">{{ scope.row.selectType | selectTypeFilter }}</template>
+          <template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template>
         </el-table-column>
-
-        <!-- 属性值录入方式列 -->
         <el-table-column label="属性值的录入方式" width="150" align="center">
-          <template slot-scope="scope">{{ scope.row.inputType | inputTypeFilter }}</template>
+          <template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template>
         </el-table-column>
-
-        <!-- 可选值列表列 -->
         <el-table-column label="可选值列表" align="center">
-          <template slot-scope="scope">{{ scope.row.inputList }}</template>
+          <template slot-scope="scope">{{scope.row.inputList}}</template>
         </el-table-column>
-
-        <!-- 排序列 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.sort }}</template>
+          <template slot-scope="scope">{{scope.row.sort}}</template>
         </el-table-column>
-
-        <!-- 操作列 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
-            <!-- 编辑按钮 -->
+            <el-button
-            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
+              size="mini"
-            <!-- 删除按钮 -->
+              @click="handleUpdate(scope.$index, scope.row)">编辑
-            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            </el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 批量操作栏 -->
     <div class="batch-operate-container">
-      <el-select size="small" v-model="operateType" placeholder="批量操作">
+      <el-select
+        size="small"
+        v-model="operateType" placeholder="批量操作">
         <el-option
           v-for="item in operates"
           :key="item.value"
           :label="item.label"
-          :value="item.value"
+          :value="item.value">
-        ></el-option>
+        </el-option>
       </el-select>
       <el-button
         style="margin-left: 20px"
         class="search-button"
         @click="handleBatchOperate()"
         type="primary"
-        size="small"
+        size="small">
-      >
         确定
       </el-button>
     </div>
-
-    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, sizes,prev, pager, next,jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5, 10, 15]"
+        :page-sizes="[5,10,15]"
         :current-page.sync="listQuery.pageNum"
-        :total="total"
+        :total="total">
-      ></el-pagination>
+      </el-pagination>
     </div>
   </div>
 </template>
-
 <script>
-/**
+  import {fetchList, deleteProductAttr} from '@/api/productAttr'
- * 导入商品属性相关 API
+
- */
+  export default {
-import { fetchList, deleteProductAttr } from '@/api/productAttr';
+    name: 'productAttrList',
-
+    data() {
-export default {
+      return {
-  name: 'productAttrList', // 组件名称
+        list: null,
-  data() {
+        total: null,
-    return {
+        listLoading: true,
-      list: null, // 商品属性数据列表
+        listQuery: {
-      total: null, // 数据总条数
+          pageNum: 1,
-      listLoading: true, // 加载状态
+          pageSize: 5,
-      listQuery: {
+          type: this.$route.query.type
-        pageNum: 1,
+        },
-        pageSize: 5,
+        operateType: null,
-        type: this.$route.query.type, // 查询参数，来源于路由
+        multipleSelection: [],
-      },
+        operates: [
-      operateType: null, // 批量操作类型
+          {
-      multipleSelection: [], // 多选的属性集合
+            label: "删除",
-      operates: [
+            value: "deleteProductAttr"
-        { label: '删除', value: 'deleteProductAttr' }, // 批量操作选项
+          }
-      ],
+        ]
-    };
-  },
-  created() {
-    this.getList(); // 页面加载时获取数据列表
-  },
-  methods: {
-    // 获取商品属性列表
-    getList() {
-      this.listLoading = true;
-      fetchList(this.$route.query.cid, this.listQuery).then((response) => {
-        this.listLoading = false;
-        this.list = response.data.list;
-        this.total = response.data.total;
-      });
-    },
-
-    // 添加商品属性
-    addProductAttr() {
-      this.$router.push({
-        path: '/pms/addProductAttr',
-        query: { cid: this.$route.query.cid, type: this.$route.query.type },
-      });
-    },
-
-    // 处理多选操作
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-
-    // 批量操作处理
-    handleBatchOperate() {
-      if (this.multipleSelection.length < 1) {
-        this.$message({
-          message: '请选择至少一条记录',
-          type: 'warning',
-          duration: 1000,
-        });
-        return;
       }
-      if (this.operateType !== 'deleteProductAttr') {
-        this.$message({
-          message: '请选择批量操作类型',
-          type: 'warning',
-          duration: 1000,
-        });
-        return;
-      }
-
-      const ids = this.multipleSelection.map((item) => item.id);
-      this.handleDeleteProductAttr(ids);
     },
-
+    created() {
-    // 页码大小变化
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = val;
-      this.getList();
-    },
-
-    // 页码切换
-    handleCurrentChange(val) {
-      this.listQuery.pageNum = val;
       this.getList();
     },
-
+    methods: {
-    // 跳转到编辑页面
+      getList() {
-    handleUpdate(index, row) {
+        this.listLoading = true;
-      this.$router.push({ path: '/pms/updateProductAttr', query: { id: row.id } });
+        fetchList(this.$route.query.cid, this.listQuery).then(response => {
-    },
+          this.listLoading = false;
-
+          this.list = response.data.list;
-    // 删除商品属性
+          this.total = response.data.total;
-    handleDeleteProductAttr(ids) {
+        });
-      this.$confirm('是否要删除选中的属性？', '提示', {
+      },
-        confirmButtonText: '确定',
+      addProductAttr() {
-        cancelButtonText: '取消',
+        this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}});
-        type: 'warning',
+      },
-      }).then(() => {
+      handleSelectionChange(val) {
-        const data = new URLSearchParams();
+        this.multipleSelection = val;
-        data.append('ids', ids);
+      },
-        deleteProductAttr(data).then(() => {
+      handleBatchOperate() {
+        if (this.multipleSelection < 1) {
           this.$message({
-            message: '删除成功',
+            message: '请选择一条记录',
-            type: 'success',
+            type: 'warning',
-            duration: 1000,
+            duration: 1000
+          });
+          return;
+        }
+        if (this.operateType !== 'deleteProductAttr') {
+          this.$message({
+            message: '请选择批量操作类型',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        let ids = [];
+        for (let i = 0; i < this.multipleSelection.length; i++) {
+          ids.push(this.multipleSelection[i].id);
+        }
+        this.handleDeleteProductAttr(ids);
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
+      handleUpdate(index, row) {
+        this.$router.push({path:'/pms/updateProductAttr',query:{id:row.id}});
+      },
+      handleDeleteProductAttr(ids) {
+        this.$confirm('是否要删除该属性', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let data = new URLSearchParams();
+          data.append("ids", ids);
+          deleteProductAttr(data).then(response => {
+            this.$message({
+              message: '删除成功',
+              type: 'success',
+              duration: 1000
+            });
+            this.getList();
           });
-          this.getList();
         });
-      });
+      },
-    },
+      handleDelete(index, row) {
-
+        let ids = [];
-    // 删除单个商品属性
+        ids.push(row.id);
-    handleDelete(index, row) {
+        this.handleDeleteProductAttr(ids);
-      const ids = [row.id];
+      },
-      this.handleDeleteProductAttr(ids);
-    },
-  },
-  filters: {
-    // 过滤器：属性值的录入方式
-    inputTypeFilter(value) {
-      return value === 1 ? '从列表中选取' : '手工录入';
-    },
-    // 过滤器：属性是否可选
-    selectTypeFilter(value) {
-      if (value === 1) return '单选';
-      if (value === 2) return '多选';
-      return '唯一';
     },
-  },
+    filters: {
-};
+      inputTypeFilter(value) {
+        if (value === 1) {
+          return '从列表中选取';
+        } else {
+          return '手工录入'
+        }
+      },
+      selectTypeFilter(value) {
+        if (value === 1) {
+          return '单选';
+        } else if (value === 2) {
+          return '多选';
+        } else {
+          return '唯一'
+        }
+      },
+    }
+  }
 </script>
 
-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
-/* 自定义样式区域 */
+
-.app-container {
-  padding: 20px;
-}
 </style>
+
+

src/views/pms/productAttr/updateProductAttr.vue

@@ -1,20 +1,15 @@
 <template>
-  <!-- 引入商品属性详情组件，编辑模式下展示 -->
+  <product-attr-detail :is-edit='true'></product-attr-detail>
-  <product-attr-detail :is-edit="true"></product-attr-detail>
 </template>
 
 <script>
-  // 引入商品属性详情组件
+  import ProductAttrDetail from './components/ProductAttrDetail'
-  import ProductAttrDetail from './components/ProductAttrDetail';
-
   export default {
-    name: 'updateProductAttr', // 组件名称
+    name: 'updateProductAttr',
-    components: {
+    components: { ProductAttrDetail }
-      ProductAttrDetail, // 注册 ProductAttrDetail 组件
+  }
-    },
-  };
 </script>
 
 <style scoped>
-/* scoped 表示样式只会应用于当前组件 */
+
 </style>

src/views/pms/productCate/add.vue

@@ -1,20 +1,14 @@
-<template>
+<template> 
-  <!-- 渲染分类详情组件，is-edit 为 false 表示“添加模式” -->
+  <product-cate-detail :is-edit='false'></product-cate-detail>
-  <product-cate-detail :is-edit="false"></product-cate-detail>
 </template>
-
 <script>
-  // 导入分类详情组件
+  import ProductCateDetail from './components/ProductCateDetail'
-  import ProductCateDetail from './components/ProductCateDetail';
-
   export default {
-    name: 'addProductCate', // 组件名称
+    name: 'addProductCate',
-    components: {
+    components: { ProductCateDetail }
-      ProductCateDetail, // 注册子组件 ProductCateDetail
+  }
-    },
-  };
 </script>
-
 <style>
-/* 样式作用域：默认留空，可以根据需要添加样式 */
 </style>
+
+

src/views/pms/productCate/components/ProductCateDetail.vue

@@ -1,19 +1,15 @@
 <template>
-  <!-- 分类详情表单，使用 Element UI -->
   <el-card class="form-container" shadow="never">
     <el-form :model="productCate"
              :rules="rules"
              ref="productCateFrom"
              label-width="150px">
-
-      <!-- 分类名称输入框 -->
       <el-form-item label="分类名称：" prop="name">
         <el-input v-model="productCate.name"></el-input>
       </el-form-item>
-
-      <!-- 上级分类选择框 -->
       <el-form-item label="上级分类：">
-        <el-select v-model="productCate.parentId" placeholder="请选择分类">
+        <el-select v-model="productCate.parentId"
+                   placeholder="请选择分类">
           <el-option
             v-for="item in selectProductCateList"
             :key="item.id"
@@ -22,67 +18,47 @@
           </el-option>
         </el-select>
       </el-form-item>
-
-      <!-- 数量单位输入框 -->
       <el-form-item label="数量单位：">
         <el-input v-model="productCate.productUnit"></el-input>
       </el-form-item>
-
-      <!-- 排序输入框 -->
       <el-form-item label="排序：">
         <el-input v-model="productCate.sort"></el-input>
       </el-form-item>
-
-      <!-- 是否显示单选按钮 -->
       <el-form-item label="是否显示：">
         <el-radio-group v-model="productCate.showStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 是否显示在导航栏 -->
       <el-form-item label="是否显示在导航栏：">
         <el-radio-group v-model="productCate.navStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <!-- 分类图标上传组件 -->
       <el-form-item label="分类图标：">
         <single-upload v-model="productCate.icon"></single-upload>
       </el-form-item>
-
-      <!-- 筛选属性列表 -->
       <el-form-item v-for="(filterProductAttr, index) in filterProductAttrList"
                     :label="index | filterLabelFilter"
-                    :key="filterProductAttr.key">
+                    :key="filterProductAttr.key"
+      >
         <el-cascader
           clearable
           v-model="filterProductAttr.value"
           :options="filterAttrs">
         </el-cascader>
-        <!-- 删除按钮 -->
         <el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button>
       </el-form-item>
-
-      <!-- 新增筛选属性按钮 -->
       <el-form-item>
         <el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
       </el-form-item>
-
-      <!-- 关键词输入框 -->
       <el-form-item label="关键词：">
         <el-input v-model="productCate.keywords"></el-input>
       </el-form-item>
-
-      <!-- 分类描述输入框 -->
       <el-form-item label="分类描述：">
         <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
       </el-form-item>
-
-      <!-- 提交和重置按钮 -->
       <el-form-item>
         <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
         <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
@@ -92,7 +68,6 @@
 </template>
 
 <script>
-  // API 引入
   import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
   import {fetchListWithAttr} from '@/api/productAttrCate';
   import {getProductAttrInfo} from '@/api/productAttr';
@@ -110,10 +85,9 @@
     sort: 0,
     productAttributeIdList: []
   };
-
   export default {
     name: "ProductCateDetail",
-    components: { SingleUpload },
+    components: {SingleUpload},
     props: {
       isEdit: {
         type: Boolean,
@@ -123,114 +97,168 @@
     data() {
       return {
         productCate: Object.assign({}, defaultProductCate),
-        selectProductCateList: [], // 上级分类列表
+        selectProductCateList: [],
         rules: {
           name: [
-            { required: true, message: '请输入品牌名称', trigger: 'blur' },
+            {required: true, message: '请输入品牌名称', trigger: 'blur'},
-            { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
           ]
         },
-        filterAttrs: [], // 筛选属性列表
+        filterAttrs: [],
-        filterProductAttrList: [{ value: [] }] // 已选筛选属性
+        filterProductAttrList: [{
-      };
+          value: []
+        }]
+      }
     },
     created() {
       if (this.isEdit) {
-        // 编辑模式下，获取分类详情数据
         getProductCate(this.$route.query.id).then(response => {
           this.productCate = response.data;
         });
-        // 获取筛选属性数据
         getProductAttrInfo(this.$route.query.id).then(response => {
           if (response.data != null && response.data.length > 0) {
-            this.filterProductAttrList = response.data.map((item, index) => ({
+            this.filterProductAttrList = [];
-              key: Date.now() + index,
+            for (let i = 0; i < response.data.length; i++) {
-              value: [item.attributeCategoryId, item.attributeId]
+              this.filterProductAttrList.push({
-            }));
+                key: Date.now() + i,
+                value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
+              })
+            }
           }
         });
+      } else {
+        this.productCate = Object.assign({}, defaultProductCate);
       }
       this.getSelectProductCateList();
       this.getProductAttrCateList();
     },
     methods: {
-      // 获取上级分类列表
       getSelectProductCateList() {
-        fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
+        fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
           this.selectProductCateList = response.data.list;
-          this.selectProductCateList.unshift({ id: 0, name: '无上级分类' });
+          this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
         });
       },
-      // 获取筛选属性分类及其属性
       getProductAttrCateList() {
         fetchListWithAttr().then(response => {
-          this.filterAttrs = response.data.map(category => ({
+          let list = response.data;
-            label: category.name,
+          for (let i = 0; i < list.length; i++) {
-            value: category.id,
+            let productAttrCate = list[i];
-            children: category.productAttributeList.map(attr => ({
+            let children = [];
-              label: attr.name,
+            if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
-              value: attr.id
+              for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
-            }))
+                children.push({
-          }));
+                  label: productAttrCate.productAttributeList[j].name,
+                  value: productAttrCate.productAttributeList[j].id
+                })
+              }
+            }
+            this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
+          }
         });
       },
-      // 提交表单数据
+      getProductAttributeIdList() {
+        //获取选中的筛选商品属性
+        let productAttributeIdList = [];
+        for (let i = 0; i < this.filterProductAttrList.length; i++) {
+          let item = this.filterProductAttrList[i];
+          if (item.value !== null && item.value.length === 2) {
+            productAttributeIdList.push(item.value[1]);
+          }
+        }
+        return productAttributeIdList;
+      },
       onSubmit(formName) {
-        this.$refs[formName].validate(valid => {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
-            this.$confirm('是否提交数据', '提示', { type: 'warning' }).then(() => {
+            this.$confirm('是否提交数据', '提示', {
-              this.productCate.productAttributeIdList = this.getProductAttributeIdList();
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
               if (this.isEdit) {
-                updateProductCate(this.$route.query.id, this.productCate).then(() => {
+                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
-                  this.$message.success('修改成功');
+                updateProductCate(this.$route.query.id, this.productCate).then(response => {
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration: 1000
+                  });
                   this.$router.back();
                 });
               } else {
-                createProductCate(this.productCate).then(() => {
+                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
+                createProductCate(this.productCate).then(response => {
+                  this.$refs[formName].resetFields();
                   this.resetForm(formName);
-                  this.$message.success('提交成功');
+                  this.$message({
+                    message: '提交成功',
+                    type: 'success',
+                    duration: 1000
+                  });
                 });
               }
             });
+
           } else {
-            this.$message.error('验证失败');
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration: 1000
+            });
+            return false;
           }
         });
       },
-      // 重置表单
       resetForm(formName) {
         this.$refs[formName].resetFields();
         this.productCate = Object.assign({}, defaultProductCate);
+        this.getSelectProductCateList();
+        this.filterProductAttrList = [{
+          value: []
+        }];
       },
-      // 获取选中的筛选属性ID列表
+      removeFilterAttr(productAttributeId) {
-      getProductAttributeIdList() {
+        if (this.filterProductAttrList.length === 1) {
-        return this.filterProductAttrList
+          this.$message({
-          .filter(item => item.value.length === 2)
+            message: '至少要留一个',
-          .map(item => item.value[1]);
+            type: 'warning',
-      },
+            duration: 1000
-      // 删除筛选属性
+          });
-      removeFilterAttr(filterAttr) {
+          return;
-        const index = this.filterProductAttrList.indexOf(filterAttr);
+        }
-        if (index > -1) this.filterProductAttrList.splice(index, 1);
+        var index = this.filterProductAttrList.indexOf(productAttributeId);
+        if (index !== -1) {
+          this.filterProductAttrList.splice(index, 1)
+        }
       },
-      // 添加筛选属性
       handleAddFilterAttr() {
-        if (this.filterProductAttrList.length < 3) {
+        if (this.filterProductAttrList.length === 3) {
-          this.filterProductAttrList.push({ value: [], key: Date.now() });
+          this.$message({
-        } else {
+            message: '最多添加三个',
-          this.$message.warning('最多添加三个');
+            type: 'warning',
+            duration: 1000
+          });
+          return;
         }
+        this.filterProductAttrList.push({
+          value: null,
+          key: Date.now()
+        });
       }
     },
     filters: {
-      // 自定义过滤器，为第一个筛选属性设置标签
       filterLabelFilter(index) {
-        return index === 0 ? '筛选属性：' : '';
+        if (index === 0) {
+          return '筛选属性：';
+        } else {
+          return '';
+        }
       }
     }
-  };
+  }
 </script>
 
 <style scoped>
-/* 本地样式，样式只对当前组件生效 */
+
 </style>

src/views/pms/productCate/index.vue

@@ -1,53 +1,35 @@
 <template>
-  <!-- 页面主容器 -->
   <div class="app-container">
-    <!-- 操作栏，包含“添加”按钮 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
         class="btn-add"
-        @click="handleAddProductCate"
+        @click="handleAddProductCate()"
         size="mini">
         添加
       </el-button>
     </el-card>
-
-    <!-- 表格数据容器 -->
     <div class="table-container">
-      <el-table
+      <el-table ref="productCateTable"
-        ref="productCateTable"
+                style="width: 100%"
-        style="width: 100%"
+                :data="list"
-        :data="list"
+                v-loading="listLoading" border>
-        v-loading="listLoading"
-        border>
-
-        <!-- 列：编号 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.id }}</template>
+          <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-
-        <!-- 列：分类名称 -->
         <el-table-column label="分类名称" align="center">
-          <template slot-scope="scope">{{ scope.row.name }}</template>
+          <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
-
-        <!-- 列：级别 -->
         <el-table-column label="级别" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.level | levelFilter }}</template>
+          <template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
         </el-table-column>
-
-        <!-- 列：商品数量 -->
         <el-table-column label="商品数量" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.productCount }}</template>
+          <template slot-scope="scope">{{scope.row.productCount }}</template>
         </el-table-column>
-
-        <!-- 列：数量单位 -->
         <el-table-column label="数量单位" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.productUnit }}</template>
+          <template slot-scope="scope">{{scope.row.productUnit }}</template>
         </el-table-column>
-
-        <!-- 列：导航栏显示状态 -->
         <el-table-column label="导航栏" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -58,8 +40,6 @@
             </el-switch>
           </template>
         </el-table-column>
-
-        <!-- 列：是否显示 -->
         <el-table-column label="是否显示" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -70,13 +50,9 @@
             </el-switch>
           </template>
         </el-table-column>
-
-        <!-- 列：排序 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">{{ scope.row.sort }}</template>
+          <template slot-scope="scope">{{scope.row.sort }}</template>
         </el-table-column>
-
-        <!-- 列：设置操作 -->
         <el-table-column label="设置" width="200" align="center">
           <template slot-scope="scope">
             <el-button
@@ -90,8 +66,6 @@
             </el-button>
           </template>
         </el-table-column>
-
-        <!-- 列：操作 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <el-button
@@ -107,16 +81,14 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes, prev, pager, next, jumper"
+        layout="total, sizes,prev, pager, next,jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5, 10, 15]"
+        :page-sizes="[5,10,15]"
         :current-page.sync="listQuery.pageNum"
         :total="total">
       </el-pagination>
@@ -125,46 +97,44 @@
 </template>
 
 <script>
-  // API 引入
+  import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate'
-  import {
-    fetchList,
-    deleteProductCate,
-    updateShowStatus,
-    updateNavStatus
-  } from '@/api/productCate';
 
   export default {
     name: "productCateList",
     data() {
       return {
-        list: null, // 数据列表
+        list: null,
-        total: null, // 数据总数
+        total: null,
-        listLoading: true, // 加载状态
+        listLoading: true,
-        listQuery: { // 查询条件
+        listQuery: {
           pageNum: 1,
           pageSize: 5
         },
-        parentId: 0 // 当前父级分类ID
+        parentId: 0
-      };
+      }
     },
     created() {
       this.resetParentId();
       this.getList();
     },
     watch: {
-      // 监听路由变化，重新获取列表
+      $route(route) {
-      $route() {
         this.resetParentId();
         this.getList();
       }
     },
     methods: {
-      // 重置父级分类ID
+      resetParentId(){
-      resetParentId() {
         this.listQuery.pageNum = 1;
-        this.parentId = this.$route.query.parentId || 0;
+        if (this.$route.query.parentId != null) {
+          this.parentId = this.$route.query.parentId;
+        } else {
+          this.parentId = 0;
+        }
+      },
+      handleAddProductCate() {
+        this.$router.push('/pms/addProductCate');
       },
-      // 获取数据列表
       getList() {
         this.listLoading = true;
         fetchList(this.parentId, this.listQuery).then(response => {
@@ -173,77 +143,88 @@
           this.total = response.data.total;
         });
       },
-      // 添加分类
+      handleSizeChange(val) {
-      handleAddProductCate() {
+        this.listQuery.pageNum = 1;
-        this.$router.push('/pms/addProductCate');
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
       },
-      // 修改导航栏状态
       handleNavStatusChange(index, row) {
         let data = new URLSearchParams();
-        data.append('ids', row.id);
+        let ids=[];
-        data.append('navStatus', row.navStatus);
+        ids.push(row.id)
-        updateNavStatus(data).then(() => {
+        data.append('ids',ids);
-          this.$message.success('修改成功');
+        data.append('navStatus',row.navStatus);
+        updateNavStatus(data).then(response=>{
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
         });
       },
-      // 修改显示状态
       handleShowStatusChange(index, row) {
         let data = new URLSearchParams();
-        data.append('ids', row.id);
+        let ids=[];
-        data.append('showStatus', row.showStatus);
+        ids.push(row.id)
-        updateShowStatus(data).then(() => {
+        data.append('ids',ids);
-          this.$message.success('修改成功');
+        data.append('showStatus',row.showStatus);
+        updateShowStatus(data).then(response=>{
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 1000
+          });
         });
       },
-      // 查看下级分类
       handleShowNextLevel(index, row) {
-        this.$router.push({ path: '/pms/productCate', query: { parentId: row.id } });
+        this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
+      },
+      handleTransferProduct(index, row) {
+        console.log('handleAddProductCate');
       },
-      // 编辑分类
       handleUpdate(index, row) {
-        this.$router.push({ path: '/pms/updateProductCate', query: { id: row.id } });
+        this.$router.push({path:'/pms/updateProductCate',query:{id:row.id}});
       },
-      // 删除分类
       handleDelete(index, row) {
-        this.$confirm('是否要删除该分类？', '提示', {
+        this.$confirm('是否要删除该品牌', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          deleteProductCate(row.id).then(() => {
+          deleteProductCate(row.id).then(response => {
-            this.$message.success('删除成功');
+            this.$message({
+              message: '删除成功',
+              type: 'success',
+              duration: 1000
+            });
             this.getList();
           });
         });
-      },
-      // 分页大小变更
-      handleSizeChange(val) {
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      // 当前页码变更
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
-      },
-      // 商品转移操作
-      handleTransferProduct() {
-        this.$message.info('功能待实现');
       }
     },
     filters: {
-      // 级别过滤器
       levelFilter(value) {
-        return value === 0 ? '一级' : '二级';
+        if (value === 0) {
+          return '一级';
+        } else if (value === 1) {
+          return '二级';
+        }
       },
-      // 禁用下级按钮过滤器
       disableNextLevel(value) {
-        return value !== 0;
+        if (value === 0) {
+          return false;
+        } else {
+          return true;
+        }
       }
     }
-  };
+  }
 </script>
 
 <style scoped>
-/* 样式留空，按需添加 */
+
 </style>

src/views/pms/productCate/update.vue

@@ -1,20 +1,14 @@
-<template>
+<template> 
-  <!-- 渲染分类详情组件，is-edit 为 true 表示“编辑模式” -->
+  <product-cate-detail :is-edit='true'></product-cate-detail>
-  <product-cate-detail :is-edit="true"></product-cate-detail>
 </template>
-
 <script>
-  // 导入分类详情组件
+  import ProductCateDetail from './components/ProductCateDetail'
-  import ProductCateDetail from './components/ProductCateDetail';
-
   export default {
-    name: 'updateProductCate', // 组件名称，用于编辑商品分类页面
+    name: 'updateProductCate',
-    components: {
+    components: { ProductCateDetail }
-      ProductCateDetail, // 注册子组件 ProductCateDetail
+  }
-    },
-  };
 </script>
-
 <style>
-/* 样式部分留空，便于后续根据页面需求自定义样式 */
 </style>
+
+

src/views/sms/advertise/add.vue

@@ -1,18 +1,13 @@
-<template>
+<template> 
-  <!-- 使用HomeAdvertiseDetail组件，并传递一个名为isEdit的prop，值为false -->
   <home-advertise-detail :isEdit="false"></home-advertise-detail>
 </template>
 <script>
-// 导入HomeAdvertiseDetail组件
+  import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
-import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
+  export default {
-
+    name: 'addHomeAdvertise',
-// 定义当前组件的默认导出对象
+    components: { HomeAdvertiseDetail }
-export default {
+  }
-  // 设置当前组件的名称为addHomeAdvertise
-  name: 'addHomeAdvertise',
-  // 注册局部组件，使其在模板中可用
-  components: { HomeAdvertiseDetail }
-}
 </script>
-
 <style></style>
+
+

src/views/sms/advertise/components/HomeAdvertiseDetail.vue

@@ -1,19 +1,15 @@
 <template> 
   <el-card class="form-container" shadow="never">
-    <!-- 表单容器，使用Element UI的卡片组件 -->
     <el-form :model="homeAdvertise"
              :rules="rules"
              ref="homeAdvertiseFrom"
              label-width="150px"
              size="small">
-      <!-- 表单绑定数据模型和验证规则，引用名称为'homeAdvertiseFrom' -->
       <el-form-item label="广告名称：" prop="name">
         <el-input v-model="homeAdvertise.name" class="input-width"></el-input>
-        <!-- 输入框绑定到homeAdvertise.name，用于输入广告名称 -->
       </el-form-item>
       <el-form-item label="广告位置：">
         <el-select v-model="homeAdvertise.type">
-          <!-- 下拉选择框绑定到homeAdvertise.type，用于选择广告位置 -->
           <el-option
             v-for="type in typeOptions"
             :key="type.value"
@@ -27,33 +23,27 @@
           type="datetime"
           placeholder="选择日期"
           v-model="homeAdvertise.startTime"></el-date-picker>
-        <!-- 日期选择器绑定到homeAdvertise.startTime，用于选择开始时间 -->
       </el-form-item>
       <el-form-item label="到期时间：" prop="endTime">
         <el-date-picker
           type="datetime"
           placeholder="选择日期"
           v-model="homeAdvertise.endTime"></el-date-picker>
-        <!-- 日期选择器绑定到homeAdvertise.endTime，用于选择到期时间 -->
       </el-form-item>
       <el-form-item label="上线/下线：">
         <el-radio-group v-model="homeAdvertise.status">
-          <!-- 单选按钮组绑定到homeAdvertise.status，用于选择广告状态（上线或下线） -->
           <el-radio :label="0">下线</el-radio>
           <el-radio :label="1">上线</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="广告图片：">
         <single-upload v-model="homeAdvertise.pic"></single-upload>
-        <!-- 自定义上传组件绑定到homeAdvertise.pic，用于上传广告图片 -->
       </el-form-item>
       <el-form-item label="排序：">
         <el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
-        <!-- 输入框绑定到homeAdvertise.sort，用于输入广告排序 -->
       </el-form-item>
       <el-form-item label="广告链接：" prop="url">
         <el-input v-model="homeAdvertise.url" class="input-width"></el-input>
-        <!-- 输入框绑定到homeAdvertise.url，用于输入广告链接 -->
       </el-form-item>
       <el-form-item label="广告备注：">
         <el-input
@@ -63,21 +53,18 @@
           placeholder="请输入内容"
           v-model="homeAdvertise.note">
         </el-input>
-        <!-- 文本域绑定到homeAdvertise.note，用于输入广告备注 -->
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
-        <!-- 提交按钮，点击时调用submitForm方法 -->
         <el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button>
-        <!-- 重置按钮，点击时调用resetForm方法 -->
       </el-form-item>
     </el-form>
   </el-card>
 </template>
 <script>
-  import SingleUpload from '@/components/Upload/singleUpload' // 导入单文件上传组件
+  import SingleUpload from '@/components/Upload/singleUpload'
-  import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise' // 导入API接口函数
+  import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise'
-  const defaultTypeOptions = [ // 默认广告位置选项
+  const defaultTypeOptions = [
     {
       label: 'PC首页轮播',
       value: 0
@@ -87,7 +74,7 @@
       value: 1
     }
   ];
-  const defaultHomeAdvertise = { // 默认广告数据模型
+  const defaultHomeAdvertise = {
     name: null,
     type: 1,
     pic: null,
@@ -99,18 +86,18 @@
     sort: 0
   };
   export default {
-    name: 'HomeAdvertiseDetail', // 组件名称
+    name: 'HomeAdvertiseDetail',
-    components:{SingleUpload}, // 注册子组件
+    components:{SingleUpload},
-    props: { // 接收父组件传递的isEdit属性，判断是否为编辑模式
+    props: {
       isEdit: {
         type: Boolean,
         default: false
       }
     },
-    data() { // 定义组件的数据模型和方法
+    data() {
       return {
-        homeAdvertise: null, // 广告数据模型
+        homeAdvertise: null,
-        rules: { // 表单验证规则
+        rules: {
           name: [
             {required: true, message: '请输入广告名称', trigger: 'blur'},
             {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
@@ -128,42 +115,42 @@
             {required: true, message: '请选择广告图片', trigger: 'blur'}
           ]
         },
-        typeOptions: Object.assign({}, defaultTypeOptions)  // 广告位置选项，初始化为默认值
+        typeOptions: Object.assign({}, defaultTypeOptions)
       }
     },
-    created(){ // 生命周期钩子，组件创建时执行
+    created(){
-      if (this.isEdit) { // 如果是编辑模式，获取广告详情数据并赋值给homeAdvertise
+      if (this.isEdit) {
         getHomeAdvertise(this.$route.query.id).then(response => {
           this.homeAdvertise = response.data;
         });
-      }else{ // 如果不是编辑模式，初始化homeAdvertise为默认值
+      }else{
         this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
       }
     },
-    methods: { // 定义组件的方法
+    methods: {
-      onSubmit(formName) { // 提交表单的方法
+      onSubmit(formName) {
-        this.$refs[formName].validate((valid) => { // 验证表单数据
+        this.$refs[formName].validate((valid) => {
-          if (valid) { // 如果验证通过，显示确认对话框并根据是否为编辑模式调用相应的API接口
+          if (valid) {
             this.$confirm('是否提交数据', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
             }).then(() => {
-              if (this.isEdit) { // 编辑模式，调用更新广告信息的API接口
+              if (this.isEdit) {
                 updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => {
-                  this.$refs[formName].resetFields(); // 重置表单字段
+                  this.$refs[formName].resetFields();
-                  this.$message({ // 显示成功消息提示
+                  this.$message({
                     message: '修改成功',
                     type: 'success',
                     duration:1000
                   });
-                  this.$router.back(); // 返回上一页
+                  this.$router.back();
                 });
-              } else { // 新建模式，调用创建广告信息的API接口。
+              } else {
                 createHomeAdvertise(this.homeAdvertise).then(response => {
-                  this.$refs[formName].resetFields(); // 重置表单字段
+                  this.$refs[formName].resetFields();
-                  this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // 重新初始化homeAdvertise为默认值
+                  this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
-                  this.$message({ // 显示成功消息提示
+                  this.$message({
                     message: '提交成功',
                     type: 'success',
                     duration:1000
@@ -172,26 +159,26 @@
               }
             });
 
-          } else { // 如果验证不通过，显示错误消息提示
+          } else {
             this.$message({
               message: '验证失败',
               type: 'error',
               duration:1000
             });
-            return false; // 阻止表单提交
+            return false;
           }
         });
       },
-      resetForm(formName) { // 重置表单的方法
+      resetForm(formName) {
-        this.$refs[formName].resetFields(); // 重置表单字段
+        this.$refs[formName].resetFields();
-        this.homeAdvertise = Object.assign({},defaultHomeAdvertise); // 重新初始化homeAdvertise为默认值
+        this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
       }
     }
   }
 </script>
-<style scoped> // 定义组件的样式，scoped表示样式只作用于当前组件
+<style scoped>
-  .input-width { // 定义输入框宽度样式类
+  .input-width {
-    width: 70%; // 设置输入框宽度为70%
+    width: 70%;
   }
 </style>
 

src/views/sms/advertise/index.vue

@@ -1,13 +1,9 @@
 <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"
@@ -15,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 重置按钮 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -23,14 +18,11 @@
           重置
         </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.name" class="input-width" placeholder="广告名称"></el-input>
           </el-form-item>
-          <!-- 广告位置筛选项 -->
           <el-form-item label="广告位置：">
             <el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
               <el-option v-for="item in typeOptions"
@@ -40,7 +32,6 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <!-- 到期时间筛选项 -->
           <el-form-item label="到期时间：">
             <el-date-picker
               class="input-width"
@@ -53,48 +44,36 @@
         </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="handleAdd()">添加广告</el-button>
     </el-card>
-    <!-- 表格展示区域 -->
     <div class="table-container">
       <el-table ref="homeAdvertiseTable"
                 :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.name}}</template>
         </el-table-column>
-        <!-- 广告位置列 -->
         <el-table-column label="广告位置" width="120" align="center">
           <template slot-scope="scope">{{scope.row.type | formatType}}</template>
         </el-table-column>
-        <!-- 广告图片列 -->
         <el-table-column label="广告图片" width="120" align="center">
           <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
         </el-table-column>
-        <!-- 时间列 -->
         <el-table-column label="时间" width="220" align="center">
           <template slot-scope="scope">
             <p>开始时间：{{scope.row.startTime | formatTime}}</p>
             <p>到期时间：{{scope.row.endTime | formatTime}}</p>
           </template>
         </el-table-column>
-        <!-- 上线/下线状态列 -->
         <el-table-column label="上线/下线" width="120" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -105,23 +84,18 @@
             </el-switch>
           </template>
         </el-table-column>
-        <!-- 点击次数列 -->
         <el-table-column label="点击次数" width="120" align="center">
           <template slot-scope="scope">{{scope.row.clickCount}}</template>
         </el-table-column>
-        <!-- 生成订单列 -->
         <el-table-column label="生成订单" width="120" align="center">
           <template slot-scope="scope">{{scope.row.orderCount}}</template>
         </el-table-column>
-        <!-- 操作列 -->
         <el-table-column label="操作" width="120" align="center">
           <template slot-scope="scope">
-            <!-- 编辑按钮 -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
-            <!-- 删除按钮 -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -130,13 +104,10 @@
         </el-table-column>
       </el-table>
     </div>
-    <!-- 这是一个包含批量操作和分页功能的容器 div -->
     <div class="batch-operate-container">
-      <!-- el-select 组件，用于选择批量操作的类型，设置了 small 尺寸，并使用 v-model 双向绑定数据到 operateType 变量，placeholder 用于显示默认提示文本 -->
       <el-select
         size="small"
         v-model="operateType" placeholder="批量操作">
-        <!-- 使用 v-for 循环遍历 operates 数组来生成 el-option 选项，每个选项的 key 根据 item.value 来设置，label 显示文本取自 item.label，value 值取自 item.value -->
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -144,7 +115,6 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <!-- el-button 组件，是一个按钮，设置了左边距为 20 像素，添加了 search-button 类名，绑定了点击事件 handleBatchOperate()，按钮类型为 primary（通常是主要操作按钮的样式），尺寸为 small -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -154,7 +124,6 @@
         确定
       </el-button>
     </div>
-    <!-- 这是一个用于分页功能展示的容器 div -->
     <div class="pagination-container">
       <el-pagination
         background
@@ -170,200 +139,169 @@
   </div>
 </template>
 <script>
-// 从'@/api/homeAdvertise'模块导入获取列表、更新状态、删除广告相关的函数
+  import {fetchList,updateStatus,deleteHomeAdvertise} from '@/api/homeAdvertise';
-import {fetchList, updateStatus, deleteHomeAdvertise} from '@/api/homeAdvertise';
+  import {formatDate} from '@/utils/date';
-// 从'@/utils/date'模块导入日期格式化函数
+  const defaultListQuery = {
-import {formatDate} from '@/utils/date';
+    pageNum: 1,
-
+    pageSize: 5,
-// 默认的列表查询参数对象，包含页码、每页数量、名称、类型、结束时间等属性初始值
+    name: null,
-const defaultListQuery = {
+    type: null,
-  pageNum: 1,
+    endTime:null
-  pageSize: 5,
+  };
-  name: null,
+  const defaultTypeOptions = [
-  type: null,
+    {
-  endTime: null
+      label: 'PC首页轮播',
-};
+      value: 0
-// 默认的广告类型选项数组，包含PC首页轮播、APP首页轮播等类型及对应值
-const defaultTypeOptions = [
-  {
-    label: 'PC首页轮播',
-    value: 0
-  },
-  {
-    label: 'APP首页轮播',
-    value: 1
-  }
-];
-
-export default {
-  name: 'homeAdvertiseList',
-  data() {
-    return {
-      // 当前列表查询参数，初始为默认值副本
-      listQuery: Object.assign({}, defaultListQuery),
-      // 广告类型选项，初始为默认值副本
-      typeOptions: Object.assign({}, defaultTypeOptions),
-      // 广告列表数据，初始为null
-      list: null,
-      // 广告数据总条数，初始为null
-      total: null,
-      // 列表数据加载状态，初始为false
-      listLoading: false,
-      // 多选选中的广告记录，初始为空数组
-      multipleSelection: [],
-      // 批量操作选项，目前只有“删除”
-      operates: [
-        {
-          label: "删除",
-          value: 0
-        }
-      ],
-      // 当前选择的批量操作类型，初始为null
-      operateType: null
-    }
-  },
-  created() {
-    // 组件创建时调用，获取广告列表数据。
-    this.getList();
-  },
-  filters: {
-    // 格式化广告类型显示文本的过滤器
-    formatType(type) {
-      if (type === 1) {
-        return 'APP首页轮播';
-      } else {
-        return 'PC首页轮播';
-      }
     },
-    // 格式化时间显示文本的过滤器
+    {
-    formatTime(time) {
+      label: 'APP首页轮播',
-      if (time == null || time === '') {
+      value: 1
-        return 'N/A';
+    }
+  ];
+  export default {
+    name: 'homeAdvertiseList',
+    data() {
+      return {
+        listQuery: Object.assign({}, defaultListQuery),
+        typeOptions: Object.assign({}, defaultTypeOptions),
+        list: null,
+        total: null,
+        listLoading: false,
+        multipleSelection: [],
+        operates: [
+          {
+            label: "删除",
+            value: 0
+          }
+        ],
+        operateType: null
       }
-      let date = new Date(time);
-      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-    },
-  },
-  methods: {
-    // 重置搜索条件的方法
-    handleResetSearch() {
-      this.listQuery = Object.assign({}, defaultListQuery);
-    },
-    // 处理搜索列表的方法，重置页码后获取列表数据
-    handleSearchList() {
-      this.listQuery.pageNum = 1;
-      this.getList();
-    },
-    // 处理多选选择改变的方法，更新多选选中的记录
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
     },
-    // 处理每页显示数量改变的方法，重置页码，更新每页数量后获取列表数据
+    created() {
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = val;
       this.getList();
     },
-    // 处理当前页码改变的方法，更新页码后获取列表数据
+    filters:{
-    handleCurrentChange(val) {
+      formatType(type){
-      this.listQuery.pageNum = val;
+        if(type===1){
-      this.getList();
+          return 'APP首页轮播';
+        }else{
+          return 'PC首页轮播';
+        }
+      },
+      formatTime(time){
+        if(time==null||time===''){
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+      },
     },
-    // 处理更新广告状态的方法，确认后调用接口更新状态，成功则重新获取列表数据并提示
+    methods: {
-    handleUpdateStatus(index, row) {
+      handleResetSearch() {
-      this.$confirm('是否要修改上线/下线状态?', '提示', {
+        this.listQuery = Object.assign({}, defaultListQuery);
-        confirmButtonText: '确定',
+      },
-        cancelButtonText: '取消',
+      handleSearchList() {
-        type: 'warning'
+        this.listQuery.pageNum = 1;
-      }).then(() => {
+        this.getList();
-        updateStatus(row.id, {status: row.status}).then(response => {
+      },
-          this.getList();
+      handleSelectionChange(val){
+        this.multipleSelection = val;
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
+      handleUpdateStatus(index,row){
+        this.$confirm('是否要修改上线/下线状态?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          updateStatus(row.id,{status:row.status}).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '修改成功!'
+            });
+          });
+        }).catch(() => {
           this.$message({
             type: 'success',
-            message: '修改成功!'
+            message: '已取消操作!'
           });
-        });
-      }).catch(() => {
-        this.$message({
-          type: 'success',
-          message: '已取消操作!'
-        });
-        this.getList();
-      });
-    },
-    // 处理删除单个广告的方法，调用删除广告的接口
-    handleDelete(index, row) {
-      this.deleteHomeAdvertise(row.id);
-    },
-    // 处理批量操作的方法，先判断是否有选中记录，有则根据操作类型执行相应操作
-    handleBatchOperate() {
-      if (this.multipleSelection < 1) {
-        this.$message({
-          message: '请选择一条记录',
-          type: 'warning',
-          duration: 1000
-        });
-        return;
-      }
-      let ids = [];
-      for (let i = 0; i < this.multipleSelection.length; i++) {
-        ids.push(this.multipleSelection[i].id);
-      }
-      if (this.operateType === 0) {
-        // 删除
-        this.deleteHomeAdvertise(ids);
-      } else {
-        this.$message({
-          message: '请选择批量操作类型',
-          type: 'warning',
-          duration: 1000
-        });
-      }
-    },
-    // 处理添加广告的方法，跳转到添加广告的路由页面
-    handleAdd() {
-      this.$router.push({path: '/sms/addAdvertise'})
-    },
-    // 处理更新广告的方法，跳转到更新广告的路由页面并传递广告id
-    handleUpdate(index, row) {
-      this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
-    },
-    // 获取广告列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
-    getList() {
-      this.listLoading = true;
-      fetchList(this.listQuery).then(response => {
-        this.listLoading = false;
-        this.list = response.data.list;
-        this.total = response.data.total;
-      })
-    },
-    // 删除广告的方法，确认后调用接口删除，成功则重新获取列表数据并提示
-    deleteHomeAdvertise(ids) {
-      this.$confirm('是否要删除该广告?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        let params = new URLSearchParams();
-        params.append("ids", ids);
-        deleteHomeAdvertise(params).then(response => {
           this.getList();
+        });
+      },
+      handleDelete(index,row){
+        this.deleteHomeAdvertise(row.id);
+      },
+      handleBatchOperate(){
+        if (this.multipleSelection < 1) {
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '删除成功!'
+            type: 'warning',
+            duration: 1000
           });
-        });
+          return;
-      })
+        }
+        let ids = [];
+        for (let i = 0; i < this.multipleSelection.length; i++) {
+          ids.push(this.multipleSelection[i].id);
+        }
+        if(this.operateType===0){
+          //删除
+          this.deleteHomeAdvertise(ids);
+        }else {
+          this.$message({
+            message: '请选择批量操作类型',
+            type: 'warning',
+            duration: 1000
+          });
+        }
+      },
+      handleAdd(){
+        this.$router.push({path: '/sms/addAdvertise'})
+      },
+      handleUpdate(index,row){
+        this.$router.push({path: '/sms/updateAdvertise', query: {id: row.id}})
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList(this.listQuery).then(response => {
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        })
+      },
+      deleteHomeAdvertise(ids){
+        this.$confirm('是否要删除该广告?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          deleteHomeAdvertise(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          });
+        })
+      }
     }
   }
-}
 </script>
 <style scoped>
-<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件 -->
+  .input-width {
-.input-width {
+    width: 203px;
-<!-- 定义类选择器样式，设置宽度为203px -->
+  }
-  width: 203px;
-}
 </style>
 
 

src/views/sms/advertise/update.vue

@@ -1,17 +1,13 @@
-<template>
+<template> 
-  <!-- 在模板中使用了名为home-advertise-detail的自定义组件，并传递了一个名为isEdit且值为true的属性，可能用于控制该组件处于编辑状态相关的展示或功能 -->
   <home-advertise-detail :isEdit="true"></home-advertise-detail>
 </template>
 <script>
-// 导入名为HomeAdvertiseDetail的组件，该组件应该定义在'./components/HomeAdvertiseDetail'文件路径下
+  import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
-import HomeAdvertiseDetail from './components/HomeAdvertiseDetail'
+  export default {
-export default {
+    name: 'updateHomeAdvertise',
-  name: 'updateHomeAdvertise',
+    components: { HomeAdvertiseDetail }
-  // 在组件的配置中注册了HomeAdvertiseDetail组件，使其能在模板中正常使用
+  }
-  components: { HomeAdvertiseDetail }
-}
 </script>
-
 <style></style>
 
 

src/views/sms/brand/index.vue

@@ -1,14 +1,9 @@
-<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"
@@ -16,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 用于重置筛选条件的按钮，绑定对应点击事件，设置样式等属性 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -25,18 +19,12 @@
         </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"
@@ -47,51 +35,40 @@
         </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)"
+            @change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
-              :active-value="1"
+            :active-value="1"
-              :inactive-value="0"
+            :inactive-value="0"
-              v-model="scope.row.recommendStatus">
+            v-model="scope.row.recommendStatus">
-            </el-switch>
+          </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"
@@ -106,13 +83,10 @@
         </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"
@@ -120,7 +94,6 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <!-- 触发批量操作的按钮，设置样式、类型等属性，绑定点击事件 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -130,9 +103,7 @@
         确定
       </el-button>
     </div>
-    <!-- 分页组件的容器 -->
     <div class="pagination-container">
-      <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -144,26 +115,19 @@
         :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>
@@ -171,9 +135,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <!-- 对话框内的分页组件容器 -->
       <div class="pagination-container">
-        <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -187,30 +149,23 @@
       </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 @click="sortDialogVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
-        <!-- 对话框确认按钮，绑定点击事件 -->
+      </span>
-                <el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
-            </span>
     </el-dialog>
   </div>
 </template>

src/views/sms/coupon/add.vue

@@ -1,21 +1,14 @@
-<template>
+<template> 
-  <!-- 在模板中使用了coupon-detail组件，并传递isEdit属性值为false，可能用于区分添加或编辑操作 -->
   <coupon-detail :isEdit="false"></coupon-detail>
 </template>
-
 <script>
-// 导入名为CouponDetail的组件，其定义在'./components/CouponDetail'文件中
+  import CouponDetail from './components/CouponDetail'
-import CouponDetail from './components/CouponDetail';
+  export default {
-export default {
+    name: 'addCoupon',
-  // 定义组件名称为addCoupon
+    components: { CouponDetail }
-  name: 'addCoupon',
+  }
-  // 注册CouponDetail组件，使其能在模板中使用
-  components: { CouponDetail }
-}
 </script>
-
 <style scoped>
-<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件，目前为空 -->
 </style>
 
 

src/views/sms/coupon/components/CouponDetail.vue

@@ -1,16 +1,12 @@
-<template>
+<template> 
-  <!-- el-card组件作为表单的容器，设置了类名和无阴影效果 -->
   <el-card class="form-container" shadow="never">
-    <!-- el-form表单组件，绑定了数据模型coupon，设置了验证规则、表单引用、标签宽度和尺寸等属性 -->
     <el-form :model="coupon"
              :rules="rules"
              ref="couponFrom"
              label-width="150px"
              size="small">
-      <!-- 优惠券类型的表单项，使用el-select下拉选择框来选择类型 -->
       <el-form-item label="优惠券类型：">
         <el-select v-model="coupon.type">
-          <!-- 通过v-for循环生成下拉选项 -->
           <el-option
             v-for="type in typeOptions"
             :key="type.value"
@@ -19,14 +15,11 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <!-- 优惠券名称的表单项，使用el-input输入框输入名称，设置了数据绑定和类名 -->
       <el-form-item label="优惠券名称：" prop="name">
         <el-input v-model="coupon.name" class="input-width"></el-input>
       </el-form-item>
-      <!-- 适用平台的表单项，用el-select下拉选择框选择平台 -->
       <el-form-item label="适用平台：">
         <el-select v-model="coupon.platform">
-          <!-- 通过v-for循环生成下拉选项 -->
           <el-option
             v-for="item in platformOptions"
             :key="item.value"
@@ -35,40 +28,33 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <!-- 总发行量的表单项，用el-input输入框输入发行量，设置了数据绑定和占位提示等属性 -->
       <el-form-item label="总发行量：" prop="publishCount">
         <el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
       </el-form-item>
-      <!-- 面额的表单项，用el-input输入框输入面额，设置了数据绑定、占位提示和后缀文本等属性 -->
       <el-form-item label="面额：" prop="amount">
         <el-input v-model.number="coupon.amount" placeholder="面值只能是数值，限2位小数" class="input-width">
           <template slot="append">元</template>
         </el-input>
       </el-form-item>
-      <!-- 每人限领的表单项，用el-input输入框输入限领数量，设置了数据绑定和后缀文本等属性 -->
       <el-form-item label="每人限领：">
         <el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
           <template slot="append">张</template>
         </el-input>
       </el-form-item>
-      <!-- 使用门槛的表单项，用el-input输入框输入门槛金额，设置了数据绑定、前后缀文本等属性 -->
       <el-form-item label="使用门槛：" prop="minPoint">
         <el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
           <template slot="prepend">满</template>
           <template slot="append">元可用</template>
         </el-input>
       </el-form-item>
-      <!-- 领取日期的表单项，用el-date-picker日期选择器选择日期，设置了数据绑定和类名等属性 -->
       <el-form-item label="领取日期：" prop="enableTime">
         <el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker>
       </el-form-item>
-      <!-- 有效期的表单项，通过两个el-date-picker日期选择器分别选择开始和结束日期 -->
       <el-form-item label="有效期：">
         <el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
         <span style="margin-left: 20px;margin-right: 20px">至</span>
         <el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
       </el-form-item>
-      <!-- 可使用商品的表单项，用el-radio-group单选按钮组选择使用类型 -->
       <el-form-item label="可使用商品：">
         <el-radio-group v-model="coupon.useType">
           <el-radio-button :label="0">全场通用</el-radio-button>
@@ -76,27 +62,21 @@
           <el-radio-button :label="2">指定商品</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <!-- 当可使用商品类型为指定分类时显示的内容，包含分类选择器、添加按钮和展示关联分类关系的表格 -->
       <el-form-item v-show="coupon.useType===1">
-        <!-- el-cascader分类选择器，用于选择分类，设置了可清除、占位提示等属性 -->
         <el-cascader
           clearable
           placeholder="请选择分类名称"
           v-model="selectProductCate"
           :options="productCateOptions">
         </el-cascader>
-        <!-- 添加分类关联的按钮，绑定点击事件 -->
         <el-button @click="handleAddProductCategoryRelation()">添加</el-button>
-        <!-- 展示已添加的分类关联关系的表格，设置了数据绑定等属性 -->
         <el-table ref="productCateRelationTable"
                   :data="coupon.productCategoryRelationList"
                   style="width: 100%;margin-top: 20px"
                   border>
-          <!-- 显示分类名称的表格列 -->
           <el-table-column label="分类名称" align="center">
             <template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
           </el-table-column>
-          <!-- 显示操作按钮（删除）的表格列 -->
           <el-table-column label="操作" align="center" width="100">
             <template slot-scope="scope">
               <el-button size="mini"
@@ -107,9 +87,7 @@
           </el-table-column>
         </el-table>
       </el-form-item>
-      <!-- 当可使用商品类型为指定商品时显示的内容，包含商品选择框、添加按钮和展示关联商品关系的表格 -->
       <el-form-item v-show="coupon.useType===2">
-        <!-- el-select商品选择框，设置了可过滤、远程搜索等属性 -->
         <el-select
           v-model="selectProduct"
           filterable
@@ -118,7 +96,6 @@
           placeholder="商品名称/商品货号"
           :remote-method="searchProductMethod"
           :loading="selectProductLoading">
-          <!-- 通过v-for循环生成商品选项 -->
           <el-option
             v-for="item in selectProductOptions"
             :key="item.productId"
@@ -128,22 +105,17 @@
             <span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
           </el-option>
         </el-select>
-        <!-- 添加商品关联的按钮，绑定点击事件 -->
         <el-button @click="handleAddProductRelation()">添加</el-button>
-        <!-- 展示已添加的商品关联关系的表格，设置了数据绑定等属性 -->
         <el-table ref="productRelationTable"
                   :data="coupon.productRelationList"
                   style="width: 100%;margin-top: 20px"
                   border>
-          <!-- 显示商品名称的表格列 -->
           <el-table-column label="商品名称" align="center">
             <template slot-scope="scope">{{scope.row.productName}}</template>
           </el-table-column>
-          <!-- 显示商品货号的表格列 -->
           <el-table-column label="货号" align="center"  width="120" >
             <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
           </el-table-column>
-          <!-- 显示操作按钮（删除）的表格列 -->
           <el-table-column label="操作" align="center" width="100">
             <template slot-scope="scope">
               <el-button size="mini"
@@ -154,7 +126,6 @@
           </el-table-column>
         </el-table>
       </el-form-item>
-      <!-- 备注的表单项，用el-input输入框输入备注内容，设置了类名、类型为文本域等属性 -->
       <el-form-item label="备注：">
         <el-input
           class="input-width"
@@ -164,276 +135,241 @@
           v-model="coupon.note">
         </el-input>
       </el-form-item>
-      <!-- 提交和重置按钮所在的表单项 -->
       <el-form-item>
-        <!-- 提交按钮，设置类型为primary，绑定点击事件 -->
         <el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
-        <!-- 重置按钮，根据条件判断是否显示，绑定点击事件 -->
         <el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
 <script>
-// 从'@/api/coupon'模块导入创建、获取、更新优惠券相关的函数
+  import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon';
-import {createCoupon, getCoupon, updateCoupon} from '@/api/coupon';
+  import {fetchSimpleList as fetchProductList} from '@/api/product';
-// 从'@/api/product'模块导入获取产品简单列表的函数，并起别名为fetchProductList
+  import {fetchListWithChildren} from '@/api/productCate'
-import {fetchSimpleList as fetchProductList} from '@/api/product';
+  const defaultCoupon = {
-// 从'@/api/productCate'模块导入获取带子项列表的函数
+    type: 0,
-import {fetchListWithChildren} from '@/api/productCate';
+    name: null,
-
+    platform: 0,
-// 默认的优惠券对象，包含类型、名称、平台等各属性的初始值
+    amount: null,
-const defaultCoupon = {
+    perLimit: 1,
-  type: 0,
+    minPoint: null,
-  name: null,
+    startTime: null,
-  platform: 0,
+    endTime: null,
-  amount: null,
+    useType: 0,
-  perLimit: 1,
+    note: null,
-  minPoint: null,
+    publishCount: null,
-  startTime: null,
+    productRelationList: [],
-  endTime: null,
+    productCategoryRelationList: []
-  useType: 0,
+  };
-  note: null,
+  const defaultTypeOptions = [
-  publishCount: null,
+    {
-  productRelationList: [],
+      label: '全场赠券',
-  productCategoryRelationList: []
+      value: 0
-};
+    },
-// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
+    {
-const defaultTypeOptions = [
+      label: '会员赠券',
-  {
+      value: 1
-    label: '全场赠券',
+    },
-    value: 0
+    {
-  },
+      label: '购物赠券',
-  {
+      value: 2
-    label: '会员赠券',
+    },
-    value: 1
+    {
-  },
+      label: '注册赠券',
-  {
+      value: 3
-    label: '购物赠券',
-    value: 2
-  },
-  {
-    label: '注册赠券',
-    value: 3
-  }
-];
-// 默认的适用平台选项数组，包含全平台、移动平台、PC平台等及对应值
-const defaultPlatformOptions = [
-  {
-    label: '全平台',
-    value: 0
-  },
-  {
-    label: '移动平台',
-    value: 1
-  },
-  {
-    label: 'PC平台',
-    value: 2
-  }
-];
-
-export default {
-  name: 'CouponDetail',
-  // 定义组件接收的属性，这里有isEdit属性，类型为布尔值，默认是false
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      // 当前优惠券数据，初始为默认优惠券对象的副本
-      coupon: Object.assign({}, defaultCoupon),
-      // 优惠券类型选项，初始为默认类型选项副本
-      typeOptions: Object.assign({}, defaultTypeOptions),
-      // 适用平台选项，初始为默认平台选项副本
-      platformOptions: Object.assign({}, defaultPlatformOptions),
-      // 表单验证规则，针对优惠券名称、发行量等属性设置相应规则
-      rules: {
-        name: [
-          {required: true, message: '请输入优惠券名称', trigger: 'blur'},
-          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-        ],
-        publishCount: [
-          {type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
-        ],
-        amount: [
-          {type: 'number', required: true, message: '面值只能是数值，0.01-10000，限2位小数', trigger: 'blur'}
-        ],
-        minPoint: [
-          {type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
-        ]
-      },
-      // 选中的商品，初始为null
-      selectProduct: null,
-      // 商品选择框加载状态，初始为false
-      selectProductLoading: false,
-      // 商品选项列表，初始为空数组
-      selectProductOptions: [],
-      // 选中的商品分类，初始为null
-      selectProductCate: null,
-      // 商品分类选项列表，初始为空数组
-      productCateOptions: []
     }
-  },
+  ];
-  created() {
+  const defaultPlatformOptions = [
-    // 如果是编辑状态，调用获取优惠券函数获取数据并赋值给coupon
+    {
-    if (this.isEdit) {
+      label: '全平台',
-      getCoupon(this.$route.query.id).then(response => {
+      value: 0
-        this.coupon = response.data;
+    },
-      });
+    {
+      label: '移动平台',
+      value: 1
+    },
+    {
+      label: 'PC平台',
+      value: 2
     }
-    // 调用获取商品分类列表的函数
+  ];
-    this.getProductCateList();
+  export default {
-  },
+    name: 'CouponDetail',
-  methods: {
+    props: {
-    // 提交表单的方法，先进行表单验证，验证通过后弹出确认框，根据是否编辑状态调用相应的创建或更新函数，成功后有相应提示和路由操作
+      isEdit: {
-    onSubmit(formName) {
+        type: Boolean,
-      this.$refs[formName].validate((valid) => {
+        default: false
-        if (valid) {
+      }
-          this.$confirm('是否提交数据', '提示', {
+    },
-            confirmButtonText: '确定',
+    data() {
-            cancelButtonText: '取消',
+      return {
-            type: 'warning'
+        coupon: Object.assign({}, defaultCoupon),
-          }).then(() => {
+        typeOptions: Object.assign({}, defaultTypeOptions),
-            if (this.isEdit) {
+        platformOptions: Object.assign({}, defaultPlatformOptions),
-              updateCoupon(this.$route.query.id, this.coupon).then(response => {
+        rules: {
-                this.$refs[formName].resetFields();
+          name: [
-                this.$message({
+            {required: true, message: '请输入优惠券名称', trigger: 'blur'},
-                  message: '修改成功',
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-                  type: 'success',
+          ],
-                  duration: 1000
+          publishCount: [
+            {type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
+          ],
+          amount: [
+            {type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
+          ],
+          minPoint: [
+            {type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
+          ]
+        },
+        selectProduct:null,
+        selectProductLoading: false,
+        selectProductOptions:[],
+        selectProductCate: null,
+        productCateOptions: []
+      }
+    },
+    created(){
+      if(this.isEdit){
+        getCoupon(this.$route.query.id).then(response=>{
+          this.coupon=response.data;
+        });
+      }
+      this.getProductCateList();
+    },
+    methods:{
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$confirm('是否提交数据', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              if(this.isEdit){
+                updateCoupon(this.$route.query.id,this.coupon).then(response=>{
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration:1000
+                  });
+                  this.$router.back();
                 });
-                this.$router.back();
+              }else{
-              });
+                createCoupon(this.coupon).then(response=>{
-            } else {
+                  this.$refs[formName].resetFields();
-              createCoupon(this.coupon).then(response => {
+                  this.$message({
-                this.$refs[formName].resetFields();
+                    message: '提交成功',
-                this.$message({
+                    type: 'success',
-                  message: '提交成功',
+                    duration:1000
-                  type: 'success',
+                  });
-                  duration: 1000
+                  this.$router.back();
                 });
-                this.$router.back();
+              }
-              });
+            });
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration:1000
+            });
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+        this.coupon = Object.assign({},defaultCoupon);
+      },
+      searchProductMethod(query){
+        if (query !== '') {
+          this.loading = true;
+          fetchProductList({keyword:query}).then(response=>{
+            this.loading=false;
+            let productList = response.data;
+            this.selectProductOptions = [];
+            for(let i=0;i<productList.length;i++){
+              let item = productList[i];
+              this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn});
             }
           });
         } else {
+          this.selectProductOptions = [];
+        }
+      },
+      handleAddProductRelation(){
+        if(this.selectProduct===null){
           this.$message({
-            message: '验证失败',
+            message: '请先选择商品',
-            type: 'error',
+            type: 'warning'
-            duration: 1000
           });
-          return false;
+          return
         }
-      });
+        this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
-    },
+        this.selectProduct=null;
-    // 重置表单的方法，重置表单字段并恢复coupon为默认值
+      },
-    resetForm(formName) {
+      handleDeleteProductRelation(index,row){
-      this.$refs[formName].resetFields();
+        this.coupon.productRelationList.splice(index,1);
-      this.coupon = Object.assign({}, defaultCoupon);
+      },
-    },
+      handleAddProductCategoryRelation(){
-    // 商品搜索方法，根据输入的查询条件去获取商品列表数据并更新商品选项列表
+        if(this.selectProductCate===null||this.selectProductCate.length===0){
-    searchProductMethod(query) {
+          this.$message({
-      if (query!== '') {
+            message: '请先选择商品分类',
-        this.loading = true;
+            type: 'warning'
-        fetchProductList({keyword: query}).then(response => {
+          });
-          this.loading = false;
+          return
-          let productList = response.data;
+        }
-          this.selectProductOptions = [];
+        this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
-          for (let i = 0; i < productList.length; i++) {
+        this.selectProductCate=[];
-            let item = productList[i];
+      },
-            this.selectProductOptions.push({productId: item.id, productName: item.name, productSn: item.productSn});
+      handleDeleteProductCateRelation(index,row){
+        this.coupon.productCategoryRelationList.splice(index,1);
+      },
+      getProductById(id){
+        for(let i=0;i<this.selectProductOptions.length;i++){
+          if(id===this.selectProductOptions[i].productId){
+            return this.selectProductOptions[i];
           }
-        });
-      } else {
-        this.selectProductOptions = [];
-      }
-    },
-    // 添加商品关联的方法，判断是否选择了商品，选择了则添加到商品关联列表，并清空选中商品
-    handleAddProductRelation() {
-      if (this.selectProduct === null) {
-        this.$message({
-          message: '请先选择商品',
-          type: 'warning'
-        });
-        return
-      }
-      this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
-      this.selectProduct = null;
-    },
-    // 删除商品关联的方法，根据索引从商品关联列表中删除对应项
-    handleDeleteProductRelation(index, row) {
-      this.coupon.productRelationList.splice(index, 1);
-    },
-    // 添加商品分类关联的方法，判断是否选择了商品分类，选择了则添加到分类关联列表，并清空选中分类
-    handleAddProductCategoryRelation() {
-      if (this.selectProductCate === null || this.selectProductCate.length === 0) {
-        this.$message({
-          message: '请先选择商品分类',
-          type: 'warning'
-        });
-        return
-      }
-      this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
-      this.selectProductCate = [];
-    },
-    // 删除商品分类关联的方法，根据索引从分类关联列表中删除对应项
-    handleDeleteProductCateRelation(index, row) {
-      this.coupon.productCategoryRelationList.splice(index, 1);
-    },
-    // 根据商品id获取商品对象的方法，遍历商品选项列表查找对应id的商品并返回
-    getProductById(id) {
-      for (let i = 0; i < this.selectProductOptions.length; i++) {
-        if (id === this.selectProductOptions[i].productId) {
-          return this.selectProductOptions[i];
         }
-      }
+        return null;
-      return null;
+      },
-    },
+      getProductCateList() {
-    // 获取商品分类列表的方法，调用接口获取数据，处理后更新商品分类选项列表
+        fetchListWithChildren().then(response => {
-    getProductCateList() {
+          let list = response.data;
-      fetchListWithChildren().then(response => {
+          this.productCateOptions = [];
-        let list = response.data;
+          for (let i = 0; i < list.length; i++) {
-        this.productCateOptions = [];
+            let children = [];
-        for (let i = 0; i < list.length; i++) {
+            if (list[i].children != null && list[i].children.length > 0) {
-          let children = [];
+              for (let j = 0; j < list[i].children.length; j++) {
-          if (list[i].children!= null && list[i].children.length > 0) {
+                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
-            for (let j = 0; j < list[i].children.length; j++) {
+              }
-              children.push({label: list[i].children[j].name, value: list[i].children[j].id});
             }
+            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
           }
-          this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+        });
-        }
+      },
-      });
+      getProductCateByIds(ids){
-    },
+        let name;
-    // 根据商品分类id获取分类对象的方法，通过遍历分类选项列表查找对应id的分类信息并返回
+        let parentName;
-    getProductCateByIds(ids) {
+        for (let i = 0; i < this.productCateOptions.length; i++) {
-      let name;
+          if (this.productCateOptions[i].value === ids[0]) {
-      let parentName;
+            parentName = this.productCateOptions[i].label;
-      for (let i = 0; i < this.productCateOptions.length; i++) {
+            for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
-        if (this.productCateOptions[i].value === ids[0]) {
+              if (this.productCateOptions[i].children[j].value === ids[1]) {
-          parentName = this.productCateOptions[i].label;
+                name = this.productCateOptions[i].children[j].label;
-          for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
+              }
-            if (this.productCateOptions[i].children[j].value === ids[1]) {
-              name = this.productCateOptions[i].children[j].label;
             }
           }
         }
+        return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
       }
-      return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
     }
   }
-}
 </script>
 <style scoped>
-<!-- 带有scoped属性的style标签，意味着里面定义的样式仅作用于当前组件内的元素 -->
+  .input-width {
-.input-width {
+    width: 60%;
-<!-- 定义了一个类选择器样式，作用是将应用该类的元素宽度设置为其父元素宽度的60% -->
+  }
-  width: 60%;
-}
 </style>
 
 

src/views/sms/coupon/history.vue

@@ -1,79 +1,45 @@
-<template>
+<template> 
-  <!-- 整体的外层容器，用于布局包裹内部各部分内容 -->
   <div class="app-container">
-    <!-- 用于表格布局的容器 -->
     <div class="table-layout">
-      <!-- el-row行组件，里面放置多个列用于显示表格标题 -->
       <el-row>
-        <!-- el-col列组件，设置占4格宽度，显示名称标题 -->
         <el-col :span="4" class="table-cell-title">名称</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示优惠券类型标题 -->
         <el-col :span="4" class="table-cell-title">优惠券类型</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示可使用商品标题 -->
         <el-col :span="4" class="table-cell-title">可使用商品</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示使用门槛标题 -->
         <el-col :span="4" class="table-cell-title">使用门槛</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示面值标题 -->
         <el-col :span="4" class="table-cell-title">面值</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示状态标题 -->
         <el-col :span="4" class="table-cell-title">状态</el-col>
       </el-row>
-      <!-- el-row行组件，里面放置多个列用于显示对应优惠券的具体信息，使用了过滤器来格式化显示内容 -->
       <el-row>
-        <!-- el-col列组件，设置占4格宽度，显示优惠券名称 -->
         <el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示格式化后的优惠券类型 -->
         <el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示格式化后的可使用商品类型 -->
         <el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，按格式显示使用门槛 -->
         <el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示优惠券面值 -->
         <el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示格式化后的状态 -->
         <el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
       </el-row>
-      <!-- el-row行组件，里面放置多个列用于显示表格另一部分标题 -->
       <el-row>
-        <!-- el-col列组件，设置占4格宽度，显示有效期标题 -->
         <el-col :span="4" class="table-cell-title">有效期</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示总发行量标题 -->
         <el-col :span="4" class="table-cell-title">总发行量</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示已领取标题 -->
         <el-col :span="4" class="table-cell-title">已领取</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示待领取标题 -->
         <el-col :span="4" class="table-cell-title">待领取</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示已使用标题 -->
         <el-col :span="4" class="table-cell-title">已使用</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示未使用标题 -->
         <el-col :span="4" class="table-cell-title">未使用</el-col>
       </el-row>
-      <!-- el-row行组件，里面放置多个列用于显示对应优惠券相关数量等具体信息，使用了日期格式化等过滤器 -->
       <el-row>
-        <!-- el-col列组件，设置占4格宽度，按格式显示有效期，使用了日期格式化过滤器 -->
         <el-col :span="4" class="table-cell" style="font-size: 13px">
           {{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
         </el-col>
-        <!-- el-col列组件，设置占4格宽度，显示总发行量 -->
         <el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示已领取数量 -->
         <el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，通过计算显示待领取数量 -->
+        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col>
-        <el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.receiveCount}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，显示已使用数量 -->
         <el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
-        <!-- el-col列组件，设置占4格宽度，通过计算显示未使用数量 -->
+        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
-        <el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.useCount}}</el-col>
       </el-row>
     </div>
-    <!-- 筛选搜索区域的卡片容器，设置无阴影效果 -->
     <el-card class="filter-container" shadow="never">
       <div>
-        <!-- 显示搜索图标 -->
         <i class="el-icon-search"></i>
-        <!-- 显示筛选搜索文字提示 -->
         <span>筛选搜索</span>
-        <!-- 用于触发查询搜索的按钮，绑定点击事件，设置样式等属性 -->
         <el-button
           style="float:right"
           type="primary"
@@ -81,7 +47,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -90,11 +55,8 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
-        <!-- 行内表单，绑定数据模型，设置尺寸、标签宽度等属性 -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-          <!-- 对应使用状态选择框的表单项 -->
           <el-form-item label="使用状态：">
-            <!-- 下拉选择框，双向绑定使用状态数据，设置占位提示等属性，通过循环生成下拉选项 -->
             <el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
               <el-option v-for="item in useTypeOptions"
                          :key="item.value"
@@ -103,54 +65,41 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <!-- 对应订单编号输入框的表单项 -->
           <el-form-item label="订单编号：">
-            <!-- 输入框，双向绑定订单编号数据，设置类名和占位提示 -->
             <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
-    <!-- 放置数据表格的容器 -->
     <div class="table-container">
-      <!-- 数据表格组件，绑定数据、设置宽度等属性以及加载状态 -->
       <el-table ref="couponHistoryTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
-        <!-- 显示优惠码的表格列 -->
         <el-table-column label="优惠码" width="160" align="center">
           <template slot-scope="scope">{{scope.row.couponCode}}</template>
         </el-table-column>
-        <!-- 显示领取会员的表格列 -->
         <el-table-column label="领取会员" width="140" align="center">
           <template slot-scope="scope">{{scope.row.memberNickname}}</template>
         </el-table-column>
-        <!-- 显示领取方式的表格列，使用过滤器格式化内容 -->
         <el-table-column label="领取方式" width="100" align="center">
           <template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
         </el-table-column>
-        <!-- 显示领取时间的表格列，使用日期格式化过滤器 -->
         <el-table-column label="领取时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
         </el-table-column>
-        <!-- 显示当前状态的表格列，使用过滤器格式化内容 -->
         <el-table-column label="当前状态" width="140" align="center">
           <template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
         </el-table-column>
-        <!-- 显示使用时间的表格列，使用日期格式化过滤器 -->
         <el-table-column label="使用时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
         </el-table-column>
-        <!-- 显示订单编号的表格列，做了空值处理 -->
         <el-table-column label="订单编号" align="center">
           <template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</template>
         </el-table-column>
       </el-table>
     </div>
-    <!-- 分页组件的容器 -->
     <div class="pagination-container">
-      <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -165,231 +114,200 @@
   </div>
 </template>
 <script>
-// 从'@/utils/date'模块导入日期格式化相关的函数formatDate
+  import {formatDate} from '@/utils/date';
-import {formatDate} from '@/utils/date';
+  import {getCoupon} from '@/api/coupon';
-// 从'@/api/coupon'模块导入获取优惠券的函数getCoupon
+  import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
-import {getCoupon} from '@/api/coupon';
-// 从'@/api/couponHistory'模块导入获取优惠券历史记录列表的函数，并起别名为fetchCouponHistoryList
-import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
 
-// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
+  const defaultTypeOptions = [
-const defaultTypeOptions = [
+    {
-  {
+      label: '全场赠券',
-    label: '全场赠券',
+      value: 0
-    value: 0
-  },
-  {
-    label: '会员赠券',
-    value: 1
-  },
-  {
-    label: '购物赠券',
-    value: 2
-  },
-  {
-    label: '注册赠券',
-    value: 3
-  }
-];
-// 默认的列表查询参数对象，包含页码、每页数量、使用状态等初始值
-const defaultListQuery = {
-  pageNum: 1,
-  pageSize: 10,
-  useStatus: null,
-  orderSn: null,
-  couponId: null
-};
-// 默认的使用类型选项数组，包含未使用、已使用、已过期等状态及对应值
-const defaultUseTypeOptions = [
-  {
-    label: "未使用",
-    value: 0
-  },
-  {
-    label: "已使用",
-    value: 1
-  },
-  {
-    label: "已过期",
-    value: 2
-  }
-];
-
-export default {
-  name: 'couponHistoryList',
-  data() {
-    return {
-      // 优惠券相关数据，初始为空对象
-      coupon: {},
-      // 当前列表查询参数，初始为默认值副本
-      listQuery: Object.assign({}, defaultListQuery),
-      // 使用类型选项，初始为默认值副本
-      useTypeOptions: Object.assign({}, defaultUseTypeOptions),
-      // 优惠券历史记录列表数据，初始为null
-      list: null,
-      // 数据总条数，初始为null
-      total: null,
-      // 列表数据加载状态，初始为false
-      listLoading: false
-    }
-  },
-  created() {
-    // 获取优惠券数据，成功后赋值给coupon属性
-    getCoupon(this.$route.query.id).then(response => {
-      this.coupon = response.data;
-    });
-    // 设置列表查询参数中的优惠券id
-    this.listQuery.couponId = this.$route.query.id;
-    // 调用获取列表数据的方法
-    this.getList();
-  },
-  filters: {
-    // 根据值格式化优惠券类型显示文本的过滤器
-    formatType(type) {
-      for (let i = 0; i < defaultTypeOptions.length; i++) {
-        if (type === defaultTypeOptions[i].value) {
-          return defaultTypeOptions[i].label;
-        }
-      }
-      return '';
-    },
-    // 根据值格式化可使用商品类型显示文本的过滤器
-    formatUseType(useType) {
-      if (useType === 0) {
-        return '全场通用';
-      } else if (useType === 1) {
-        return '指定分类';
-      } else {
-        return '指定商品';
-      }
-    },
-    // 根据值格式化平台类型显示文本的过滤器
-    formatPlatform(platform) {
-      if (platform === 1) {
-        return '移动平台';
-      } else if (platform === 2) {
-        return 'PC平台';
-      } else {
-        return '全平台';
-      }
     },
-    // 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
+    {
-    formatDate(time) {
+      label: '会员赠券',
-      if (time == null || time === '') {
+      value: 1
-        return 'N/A';
-      }
-      let date = new Date(time);
-      return formatDate(date, 'yyyy-MM-dd')
     },
-    // 根据结束时间判断并格式化状态显示文本的过滤器，对比当前时间判断是否过期
+    {
-    formatStatus(endTime) {
+      label: '购物赠券',
-      let now = new Date().getTime();
+      value: 2
-      if (endTime > now) {
-        return '未过期'
-      } else {
-        return '已过期';
-      }
     },
-    // 根据值格式化领取方式显示文本的过滤器
+    {
-    formatGetType(type) {
+      label: '注册赠券',
-      if (type === 1) {
+      value: 3
-        return '主动获取';
+    }
-      } else {
+  ];
-        return '后台赠送';
+  const defaultListQuery = {
-      }
+    pageNum: 1,
+    pageSize: 10,
+    useStatus: null,
+    orderSn: null,
+    couponId: null
+  };
+  const defaultUseTypeOptions= [
+    {
+      label: "未使用",
+      value: 0
     },
-    // 根据值格式化优惠券历史记录使用类型显示文本的过滤器
+    {
-    formatCouponHistoryUseType(useType) {
+      label: "已使用",
-      if (useType === 0) {
+      value: 1
-        return '未使用';
-      } else if (useType === 1) {
-        return '已使用';
-      } else {
-        return '已过期';
-      }
     },
-    // 格式化时间的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的时间
+    {
-    formatTime(time) {
+      label: "已过期",
-      if (time == null || time === '') {
+      value: 2
-        return 'N/A';
+    }
+  ];
+  export default {
+    name: 'couponHistoryList',
+    data() {
+      return {
+        coupon: {},
+        listQuery: Object.assign({}, defaultListQuery),
+        useTypeOptions:Object.assign({},defaultUseTypeOptions),
+        list:null,
+        total:null,
+        listLoading:false
       }
-      let date = new Date(time);
-      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
     },
-  },
+    created() {
-  methods: {
+      getCoupon(this.$route.query.id).then(response => {
-    // 获取优惠券历史记录列表的方法，设置加载状态为true，获取成功后更新数据及加载状态
+        this.coupon = response.data;
-    getList() {
-      this.listLoading = true;
-      fetchCouponHistoryList(this.listQuery).then(response => {
-        this.listLoading = false;
-        this.list = response.data.list;
-        this.total = response.data.total;
       });
-    },
+      this.listQuery.couponId=this.$route.query.id;
-    // 重置搜索条件的方法，恢复为默认查询参数并设置优惠券id
-    handleResetSearch() {
-      this.listQuery = Object.assign({}, defaultListQuery);
-      this.listQuery.couponId = this.$route.query.id;
-    },
-    // 处理搜索列表的方法，重置页码后调用获取列表的方法
-    handleSearchList() {
-      this.listQuery.pageNum = 1;
       this.getList();
     },
-    // 处理每页显示数量改变的方法，重置页码，更新每页数量后调用获取列表的方法
+    filters: {
-    handleSizeChange(val) {
+      formatType(type) {
-      this.listQuery.pageNum = 1;
+        for (let i = 0; i < defaultTypeOptions.length; i++) {
-      this.listQuery.pageSize = val;
+          if (type === defaultTypeOptions[i].value) {
-      this.getList();
+            return defaultTypeOptions[i].label;
+          }
+        }
+        return '';
+      },
+      formatUseType(useType) {
+        if (useType === 0) {
+          return '全场通用';
+        } else if (useType === 1) {
+          return '指定分类';
+        } else {
+          return '指定商品';
+        }
+      },
+      formatPlatform(platform) {
+        if (platform === 1) {
+          return '移动平台';
+        } else if (platform === 2) {
+          return 'PC平台';
+        } else {
+          return '全平台';
+        }
+      },
+      formatDate(time) {
+        if (time == null || time === '') {
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd')
+      },
+      formatStatus(endTime) {
+        let now = new Date().getTime();
+        if (endTime > now) {
+          return '未过期'
+        } else {
+          return '已过期';
+        }
+      },
+      formatGetType(type) {
+        if(type===1){
+          return '主动获取';
+        }else{
+          return '后台赠送';
+        }
+      },
+      formatCouponHistoryUseType(useType) {
+        if (useType === 0) {
+          return '未使用';
+        } else if (useType === 1) {
+          return '已使用';
+        } else {
+          return '已过期';
+        }
+      },
+      formatTime(time) {
+        if (time == null || time === '') {
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+      },
     },
-    // 处理当前页码改变的方法，更新页码后调用获取列表的方法
+    methods: {
-    handleCurrentChange(val) {
+      getList(){
-      this.listQuery.pageNum = val;
+        this.listLoading=true;
-      this.getList();
+        fetchCouponHistoryList(this.listQuery).then(response=>{
+          this.listLoading=false;
+          this.list=response.data.list;
+          this.total=response.data.total;
+        });
+      },
+      handleResetSearch() {
+        this.listQuery = Object.assign({}, defaultListQuery);
+        this.listQuery.couponId=this.$route.query.id;
+      },
+      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();
+      }
     }
   }
-}
 </script>
-
 <style scoped>
-<!-- 定义类名为app-container的样式，设置宽度、外边距使其水平居中 -->
+  .app-container {
-.app-container {
+    width: 80%;
-  width: 80%;
+    margin: 20px auto;
-  margin: 20px auto;
+  }
-}
+
-<!-- 定义类名为filter-container的样式，设置上边距 -->
+  .filter-container {
-.filter-container {
+    margin-top: 20px;
-  margin-top: 20px;
+  }
-}
+
-<!-- 定义类名为table-layout的样式，设置上边距、左边框、上边框 -->
+  .table-layout {
-.table-layout {
+    margin-top: 20px;
-  margin-top: 20px;
+    border-left: 1px solid #DCDFE6;
-  border-left: 1px solid #DCDFE6;
+    border-top: 1px solid #DCDFE6;
-  border-top: 1px solid #DCDFE6;
+  }
-}
+
-<!-- 定义类名为table-cell的样式，设置高度、行高、边框、内边距、字体大小、颜色、文本对齐、溢出处理等属性 -->
+  .table-cell {
-.table-cell {
+    height: 60px;
-  height: 60px;
+    line-height: 40px;
-  line-height: 40px;
+    border-right: 1px solid #DCDFE6;
-  border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
-  border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
-  padding: 10px;
+    font-size: 14px;
-  font-size: 14px;
+    color: #606266;
-  color: #606266;
+    text-align: center;
-  text-align: center;
+    overflow: hidden;
-  overflow: hidden;
+  }
-}
+
-<!-- 定义类名为table-cell-title的样式，设置边框、内边距、背景色、文本对齐、字体大小、颜色等属性 -->
+  .table-cell-title {
-.table-cell-title {
+    border-right: 1px solid #DCDFE6;
-  border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
-  border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
-  padding: 10px;
+    background: #F2F6FC;
-  background: #F2F6FC;
+    text-align: center;
-  text-align: center;
+    font-size: 14px;
-  font-size: 14px;
+    color: #303133;
-  color: #303133;
+  }
-}
 </style>
 
 

src/views/sms/coupon/index.vue

@@ -1,14 +1,9 @@
-<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"
@@ -16,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -25,18 +19,12 @@
         </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.name" class="input-width" placeholder="优惠券名称"></el-input>
           </el-form-item>
-          <!-- 优惠券类型选择框的表单项 -->
           <el-form-item label="优惠券类型：">
-            <!-- 下拉选择框，双向绑定优惠券类型数据，设置占位提示等属性 -->
             <el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
-              <!-- 通过循环生成下拉选项 -->
               <el-option v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
@@ -47,72 +35,54 @@
         </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="handleAdd()">添加</el-button>
     </el-card>
-    <!-- 放置数据表格的容器 -->
     <div class="table-container">
-      <!-- 数据表格组件，绑定数据、设置宽度等属性，还有选择改变等相关事件 -->
       <el-table ref="couponTable"
                 :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="100" 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.name}}</template>
         </el-table-column>
-        <!-- 显示优惠券类型的表格列，使用过滤器格式化内容 -->
         <el-table-column label="优惠券类型" width="100" align="center">
           <template slot-scope="scope">{{scope.row.type | formatType}}</template>
         </el-table-column>
-        <!-- 显示可使用商品类型的表格列，使用过滤器格式化内容 -->
         <el-table-column label="可使用商品" width="100" align="center">
           <template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
         </el-table-column>
-        <!-- 显示使用门槛的表格列 -->
         <el-table-column label="使用门槛" width="140" align="center">
           <template slot-scope="scope">满{{scope.row.minPoint}}元可用</template>
         </el-table-column>
-        <!-- 显示面值的表格列 -->
         <el-table-column label="面值" width="100" align="center">
           <template slot-scope="scope">{{scope.row.amount}}元</template>
         </el-table-column>
-        <!-- 显示适用平台的表格列，使用过滤器格式化内容 -->
         <el-table-column label="适用平台" width="100" align="center">
           <template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
         </el-table-column>
-        <!-- 显示有效期的表格列，使用日期格式化等过滤器 -->
         <el-table-column label="有效期" width="180" align="center">
           <template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template>
         </el-table-column>
-        <!-- 显示状态的表格列，使用过滤器根据结束时间判断并格式化状态 -->
         <el-table-column label="状态" width="100" align="center">
           <template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
         </el-table-column>
-        <!-- 显示操作按钮的表格列 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <!-- 查看按钮，绑定点击事件 -->
             <el-button size="mini"
                        type="text"
                        @click="handleView(scope.$index, scope.row)">查看</el-button>
-            <!-- 编辑按钮，绑定点击事件 -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">
               编辑</el-button>
-            <!-- 删除按钮，绑定点击事件 -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
@@ -120,9 +90,7 @@
         </el-table-column>
       </el-table>
     </div>
-    <!-- 分页组件的容器 -->
     <div class="pagination-container">
-      <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -137,176 +105,147 @@
   </div>
 </template>
 <script>
-// 从'@/api/coupon'模块导入获取列表、删除优惠券相关的函数
+  import {fetchList,deleteCoupon} from '@/api/coupon';
-import {fetchList, deleteCoupon} from '@/api/coupon';
+  import {formatDate} from '@/utils/date';
-// 从'@/utils/date'模块导入日期格式化相关的函数formatDate
+  const defaultListQuery = {
-import {formatDate} from '@/utils/date';
+    pageNum: 1,
-
+    pageSize: 10,
-// 默认的列表查询参数对象，包含页码、每页数量、优惠券名称、类型等初始值
+    name: null,
-const defaultListQuery = {
+    type: null
-  pageNum: 1,
+  };
-  pageSize: 10,
+  const defaultTypeOptions=[
-  name: null,
+    {
-  type: null
+      label: '全场赠券',
-};
+      value: 0
-// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
-const defaultTypeOptions = [
-  {
-    label: '全场赠券',
-    value: 0
-  },
-  {
-    label: '会员赠券',
-    value: 1
-  },
-  {
-    label: '购物赠券',
-    value: 2
-  },
-  {
-    label: '注册赠券',
-    value: 3
-  }
-];
-
-export default {
-  name: 'couponList',
-  data() {
-    return {
-      // 当前列表查询参数，初始为默认值副本
-      listQuery: Object.assign({}, defaultListQuery),
-      // 优惠券类型选项，初始为默认值副本
-      typeOptions: Object.assign({}, defaultTypeOptions),
-      // 优惠券列表数据，初始为null
-      list: null,
-      // 数据总条数，初始为null
-      total: null,
-      // 列表数据加载状态，初始为false
-      listLoading: false,
-      // 多选选中的记录，初始为空数组
-      multipleSelection: []
-    }
-  },
-  created() {
-    // 组件创建时调用，用于获取优惠券列表数据
-    this.getList();
-  },
-  filters: {
-    // 根据值格式化优惠券类型显示文本的过滤器
-    formatType(type) {
-      for (let i = 0; i < defaultTypeOptions.length; i++) {
-        if (type === defaultTypeOptions[i].value) {
-          return defaultTypeOptions[i].label;
-        }
-      }
-      return '';
-    },
-    // 根据值格式化可使用商品类型显示文本的过滤器
-    formatUseType(useType) {
-      if (useType === 0) {
-        return '全场通用';
-      } else if (useType === 1) {
-        return '指定分类';
-      } else {
-        return '指定商品';
-      }
     },
-    // 根据值格式化适用平台显示文本的过滤器
+    {
-    formatPlatform(platform) {
+      label: '会员赠券',
-      if (platform === 1) {
+      value: 1
-        return '移动平台';
-      } else if (platform === 2) {
-        return 'PC平台';
-      } else {
-        return '全平台';
-      }
     },
-    // 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
+    {
-    formatDate(time) {
+      label: '购物赠券',
-      if (time == null || time === '') {
+      value: 2
-        return 'N/A';
-      }
-      let date = new Date(time);
-      return formatDate(date, 'yyyy-MM-dd')
     },
-    // 根据结束时间判断并格式化优惠券状态显示文本的过滤器，对比当前时间判断是否过期
+    {
-    formatStatus(endTime) {
+      label: '注册赠券',
-      let now = new Date().getTime();
+      value: 3
-      let endDate = new Date(endTime);
-      if (endDate > now) {
-        return '未过期'
-      } else {
-        return '已过期';
-      }
     }
-  },
+  ];
-  methods: {
+  export default {
-    // 重置搜索条件的方法，恢复为默认查询参数
+    name:'couponList',
-    handleResetSearch() {
+    data() {
-      this.listQuery = Object.assign({}, defaultListQuery);
+      return {
-    },
+        listQuery:Object.assign({},defaultListQuery),
-    // 处理搜索列表的方法，重置页码后调用获取列表的方法
+        typeOptions:Object.assign({},defaultTypeOptions),
-    handleSearchList() {
+        list:null,
-      this.listQuery.pageNum = 1;
+        total:null,
-      this.getList();
+        listLoading:false,
-    },
+        multipleSelection:[]
-    // 处理多选选择改变的方法，更新多选选中的记录
+      }
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    // 处理每页显示数量改变的方法，重置页码，更新每页数量后调用获取列表的方法
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = val;
-      this.getList();
     },
-    // 处理当前页码改变的方法，更新页码后调用获取列表的方法
+    created(){
-    handleCurrentChange(val) {
-      this.listQuery.pageNum = val;
       this.getList();
     },
-    // 处理添加操作的方法，通过路由跳转至添加优惠券的页面
+    filters:{
-    handleAdd() {
+      formatType(type){
-      this.$router.push({path: '/sms/addCoupon'})
+        for(let i=0;i<defaultTypeOptions.length;i++){
-    },
+          if(type===defaultTypeOptions[i].value){
-    // 处理查看操作的方法，通过路由跳转至优惠券历史记录页面，并传递对应优惠券的id
+            return defaultTypeOptions[i].label;
-    handleView(index, row) {
+          }
-      this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
+        }
-    },
+        return '';
-    // 处理编辑操作的方法，通过路由跳转至编辑优惠券的页面，并传递对应优惠券的id
+      },
-    handleUpdate(index, row) {
+      formatUseType(useType){
-      this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
+        if(useType===0){
+          return '全场通用';
+        }else if(useType===1){
+          return '指定分类';
+        }else{
+          return '指定商品';
+        }
+      },
+      formatPlatform(platform){
+        if(platform===1){
+          return '移动平台';
+        }else if(platform===2){
+          return 'PC平台';
+        }else{
+          return '全平台';
+        }
+      },
+      formatDate(time){
+        if(time==null||time===''){
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd')
+      },
+      formatStatus(endTime){
+        let now = new Date().getTime();
+        let endDate = new Date(endTime);
+        if(endDate>now){
+          return '未过期'
+        }else{
+          return '已过期';
+        }
+      }
     },
-    // 处理删除操作的方法，弹出确认框，确认后调用删除函数，成功后提示并重新获取列表数据
+    methods:{
-    handleDelete(index, row) {
+      handleResetSearch() {
-      this.$confirm('是否进行删除操作?', '提示', {
+        this.listQuery = Object.assign({}, defaultListQuery);
-        confirmButtonText: '确定',
+      },
-        cancelButtonText: '取消',
+      handleSearchList() {
-        type: 'warning'
+        this.listQuery.pageNum = 1;
-      }).then(() => {
+        this.getList();
-        deleteCoupon(row.id).then(response => {
+      },
-          this.$message({
+      handleSelectionChange(val){
-            type: 'success',
+        this.multipleSelection = val;
-            message: '删除成功!'
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
+      handleAdd(){
+        this.$router.push({path: '/sms/addCoupon'})
+      },
+      handleView(index, row) {
+        this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
+      },
+      handleUpdate(index, row) {
+        this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
+      },
+      handleDelete(index, row) {
+        this.$confirm('是否进行删除操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteCoupon(row.id).then(response=>{
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.getList();
           });
-          this.getList();
+        })
+      },
+      getList(){
+        this.listLoading=true;
+        fetchList(this.listQuery).then(response=>{
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
         });
-      })
+      }
-    },
-    // 获取优惠券列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
-    getList() {
-      this.listLoading = true;
-      fetchList(this.listQuery).then(response => {
-        this.listLoading = false;
-        this.list = response.data.list;
-        this.total = response.data.total;
-      });
     }
   }
-}
 </script>
 <style scoped>
-<!-- scoped属性使样式仅作用于当前组件。.input-width类设置元素宽度为203px。 -->
   .input-width {
     width: 203px;
   }

src/views/sms/coupon/update.vue

@@ -1,21 +1,14 @@
-<template>
+<template> 
-  <!-- 在模板中使用了coupon-detail组件，并传递isEdit属性值为true，可能用于告知该组件当前处于编辑模式 -->
   <coupon-detail :isEdit="true"></coupon-detail>
 </template>
-
 <script>
-// 从'./components/CouponDetail'文件路径导入名为CouponDetail的组件
+  import CouponDetail from './components/CouponDetail'
-import CouponDetail from './components/CouponDetail';
+  export default {
-export default {
+    name: 'updateCoupon',
-  // 定义当前组件名称为updateCoupon
+    components: { CouponDetail }
-  name: 'updateCoupon',
+  }
-  // 注册CouponDetail组件，使其能在模板中使用
-  components: { CouponDetail }
-}
 </script>
-
 <style scoped>
-<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件，目前为空 -->
 </style>
 
 

src/views/sms/flash/index.vue

@@ -1,14 +1,9 @@
-<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"
@@ -16,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 用于触发重置筛选条件操作的按钮，设置了按钮样式、与右侧有一定间距，绑定了点击事件“handleResetSearch” -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -25,75 +19,42 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
-        <!-- 行内表单，用于设置筛选条件，绑定了数据模型“listQuery”，设置了表单尺寸和标签宽度 -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-          <!-- 对应“活动名称”输入框的表单项 -->
           <el-form-item label="活动名称：">
-            <!-- 输入框，双向绑定“listQuery.keyword”数据，设置了类名、占位提示以及可清除内容的属性 -->
             <el-input v-model="listQuery.keyword" class="input-width" placeholder="活动名称" clearable></el-input>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
-
-    <!-- 操作区域的卡片容器，同样设置了无阴影效果 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
-      <!-- 用于触发添加活动操作的按钮，设置了按钮尺寸、类名，绑定了点击事件“handleAdd” -->
       <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加活动</el-button>
-      <!-- 用于触发查看秒杀时间段列表操作的按钮，设置了按钮尺寸、类名，绑定了点击事件“handleShowSessionList” -->
       <el-button size="mini" class="btn-add" @click="handleShowSessionList()">秒杀时间段列表</el-button>
     </el-card>
-
-    <!-- 放置数据表格的容器 -->
     <div class="table-container">
-      <!-- 数据表格组件，绑定了数据“list”，设置了宽度、加载状态以及边框等属性 -->
       <el-table ref="flashTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
-        <!-- 显示选择框的表格列，用于多选操作，设置了宽度和对齐方式 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
-        <!-- 显示编号的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.id}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“id”字段内容 -->
-            {{scope.row.id}}
-          </template>
         </el-table-column>
-        <!-- 显示活动标题的表格列，内容居中对齐 -->
         <el-table-column label="活动标题" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.title}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“title”字段内容 -->
-            {{scope.row.title}}
-          </template>
         </el-table-column>
-        <!-- 显示活动状态的表格列，设置了宽度和对齐方式，使用了过滤器“formatActiveStatus”来格式化显示内容 -->
         <el-table-column label="活动状态" width="140" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row |formatActiveStatus}}</template>
-            <!-- 在表格单元格的作用域内，使用过滤器对对应行数据进行格式化后显示 -->
-            {{scope.row | formatActiveStatus}}
-          </template>
         </el-table-column>
-        <!-- 显示开始时间的表格列，设置了宽度和对齐方式，使用了日期格式化过滤器“formatDate” -->
         <el-table-column label="开始时间" width="140" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.startDate | formatDate}}</template>
-            <!-- 在表格单元格的作用域内，使用日期格式化过滤器对对应行数据中的时间进行格式化后显示 -->
-            {{scope.row.startDate | formatDate}}
-          </template>
         </el-table-column>
-        <!-- 显示结束时间的表格列，设置了宽度和对齐方式，同样使用了日期格式化过滤器“formatDate” -->
         <el-table-column label="结束时间" width="140" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.endDate | formatDate}}</template>
-            <!-- 在表格单元格的作用域内，使用日期格式化过滤器对对应行数据中的时间进行格式化后显示 -->
-            {{scope.row.endDate | formatDate}}
-          </template>
         </el-table-column>
-        <!-- 显示上线/下线操作的表格列，设置了宽度和对齐方式，里面包含一个开关组件 -->
         <el-table-column label="上线/下线" width="200" align="center">
           <template slot-scope="scope">
-            <!-- 开关组件，用于切换上线/下线状态，绑定了状态改变的事件“handleStatusChange”，设置了激活值和未激活值，双向绑定对应行数据中的“status”字段 -->
             <el-switch
               @change="handleStatusChange(scope.$index, scope.row)"
               :active-value="1"
@@ -102,21 +63,17 @@
             </el-switch>
           </template>
         </el-table-column>
-        <!-- 显示操作按钮的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <!-- 用于触发设置商品操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleSelectSession” -->
             <el-button size="mini"
                        type="text"
                        @click="handleSelectSession(scope.$index, scope.row)">设置商品
             </el-button>
-            <!-- 用于触发编辑操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleUpdate” -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">
               编辑
             </el-button>
-            <!-- 用于触发删除操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleDelete” -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -125,10 +82,7 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 分页组件的容器 -->
     <div class="pagination-container">
-      <!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -140,22 +94,16 @@
         :total="total">
       </el-pagination>
     </div>
-
-    <!-- 弹出对话框组件，用于添加活动的相关操作，设置了标题、对话框显示状态的双向绑定以及宽度属性 -->
     <el-dialog
       title="添加活动"
       :visible.sync="dialogVisible"
       width="40%">
-      <!-- 表单组件，用于在对话框内收集添加活动的相关信息，绑定了数据模型“flashPromotion”，设置了表单引用、标签宽度和尺寸等属性 -->
       <el-form :model="flashPromotion"
                ref="flashPromotionForm"
                label-width="150px" size="small">
-        <!-- 对应“活动标题”输入框的表单项 -->
         <el-form-item label="活动标题：">
-          <!-- 输入框，双向绑定“flashPromotion.title”数据，设置了宽度 -->
           <el-input v-model="flashPromotion.title" style="width: 250px"></el-input>
         </el-form-item>
-        <!-- 对应“开始时间”选择框的表单项，使用了日期选择器组件 -->
         <el-form-item label="开始时间：">
           <el-date-picker
             v-model="flashPromotion.startDate"
@@ -163,7 +111,6 @@
             placeholder="请选择时间">
           </el-date-picker>
         </el-form-item>
-        <!-- 对应“结束时间”选择框的表单项，同样使用了日期选择器组件 -->
         <el-form-item label="结束时间：">
           <el-date-picker
             v-model="flashPromotion.endDate"
@@ -171,221 +118,178 @@
             placeholder="请选择时间">
           </el-date-picker>
         </el-form-item>
-        <!-- 对应“上线/下线”选择的表单项，使用了单选按钮组组件 -->
         <el-form-item label="上线/下线">
           <el-radio-group v-model="flashPromotion.status">
-            <!-- 上线单选按钮选项 -->
             <el-radio :label="1">上线</el-radio>
-            <!-- 下线单选按钮选项 -->
             <el-radio :label="0">下线</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
-      <!-- 对话框底部的操作按钮区域，使用了插槽“footer” -->
       <span slot="footer" class="dialog-footer">
-                <!-- 取消按钮，点击可关闭对话框，设置了按钮尺寸 -->
+        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
-                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
-        <!-- 确定按钮，点击可触发确认添加活动的相关逻辑，设置了按钮类型为主要按钮、尺寸为小尺寸 -->
+      </span>
-                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
-            </span>
     </el-dialog>
   </div>
 </template>
 <script>
-// 从'@/api/flash'模块中导入用于获取列表、更新状态、删除、创建以及更新闪购活动相关的函数
+  import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
-import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
+  import {formatDate} from '@/utils/date';
-// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate
-import {formatDate} from '@/utils/date';
 
-// 默认的列表查询参数对象，包含页码、每页数量以及用于搜索的关键词等初始值，用于初始化列表查询相关设置
+  const defaultListQuery = {
-const defaultListQuery = {
+    pageNum: 1,
-  pageNum: 1,
+    pageSize: 5,
-  pageSize: 5,
+    keyword: null
-  keyword: null
+  };
-};
+  const defaultFlashPromotion = {
-// 默认的闪购活动对象，包含活动的编号、标题、开始时间、结束时间以及状态等初始值，用于初始化闪购活动相关数据
+    id: null,
-const defaultFlashPromotion = {
+    title: null,
-  id: null,
+    startDate: null,
-  title: null,
+    endDate: null,
-  startDate: null,
+    status: 0
-  endDate: null,
+  };
-  status: 0
+  export default {
-};
+    name: 'flashPromotionList',
-
+    data() {
-export default {
+      return {
-  name: 'flashPromotionList',
+        listQuery: Object.assign({}, defaultListQuery),
-  data() {
+        list: null,
-    return {
+        total: null,
-      // 当前的列表查询参数，初始化为defaultListQuery的副本，用于在组件中存储和操作实际的查询条件
+        listLoading: false,
-      listQuery: Object.assign({}, defaultListQuery),
+        dialogVisible: false,
-      // 存储获取到的闪购活动列表数据，初始为null，后续会通过接口获取并赋值
+        flashPromotion: Object.assign({}, defaultFlashPromotion),
-      list: null,
+        isEdit: false
-      // 数据总条数，初始为null，同样会在获取数据后更新具体的值
-      total: null,
-      // 列表数据加载状态，初始为false，在获取数据过程中会设置为true表示正在加载
-      listLoading: false,
-      // 控制添加/编辑活动对话框的显示与隐藏，初始为false即默认隐藏对话框
-      dialogVisible: false,
-      // 当前闪购活动的数据对象，初始化为defaultFlashPromotion的副本，在添加或编辑操作时会更新其值
-      flashPromotion: Object.assign({}, defaultFlashPromotion),
-      // 标记当前操作是编辑（true）还是添加（false）状态，初始为false
-      isEdit: false
-    }
-  },
-  created() {
-    // 在组件创建完成后，立即调用获取闪购活动列表数据的方法，用于初始化页面数据展示
-    this.getList();
-  },
-  filters: {
-    // 过滤器函数，用于根据活动的开始时间、结束时间和当前时间来格式化并返回活动状态的显示文本
-    formatActiveStatus(row) {
-      // 获取当前日期的时间对象
-      let nowDate = new Date();
-      // 将传入行数据中的开始时间转换为时间对象
-      let startDate = new Date(row.startDate);
-      // 将传入行数据中的结束时间转换为时间对象
-      let endDate = new Date(row.endDate);
-      // 判断当前时间是否在活动开始时间和结束时间之间，如果是则表示活动正在进行中
-      if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
-        return '活动进行中';
-      }
-      // 判断当前时间是否大于活动结束时间，如果是则表示活动已结束
-      else if (nowDate.getTime() > endDate.getTime()) {
-        return '活动已结束';
-      }
-      // 如果上述条件都不满足，则表示活动还未开始
-      else {
-        return '活动未开始';
       }
     },
-    // 过滤器函数，用于对传入的时间数据进行格式化处理，如果时间为空则返回 'N/A'，否则按照指定格式返回格式化后的日期字符串
+    created() {
-    formatDate(time) {
-      if (time == null || time === '') {
-        return 'N/A';
-      }
-      // 将传入的时间转换为日期对象
-      let date = new Date(time);
-      // 调用导入的formatDate函数（外部定义的日期格式化工具函数）对日期对象进行格式化，格式为 'yyyy-MM-dd'
-      return formatDate(date, 'yyyy-MM-dd')
-    }
-  },
-  methods: {
-    // 处理重置搜索条件的方法，将列表查询参数恢复为默认值，以便重新进行查询操作
-    handleResetSearch() {
-      this.listQuery = Object.assign({}, defaultListQuery);
-    },
-    // 处理查询搜索的方法，先将页码重置为1，然后调用获取列表数据的方法，触发根据当前查询条件重新获取数据
-    handleSearchList() {
-      this.listQuery.pageNum = 1;
       this.getList();
     },
-    // 处理每页显示数量改变的方法，先将页码重置为1，然后更新列表查询参数中的每页显示数量，再调用获取列表数据的方法，以按照新的每页数量获取数据
+    filters: {
-    handleSizeChange(val) {
+      formatActiveStatus(row) {
-      this.listQuery.pageNum = 1;
+        let nowDate = new Date();
-      this.listQuery.pageSize = val;
+        let startDate = new Date(row.startDate);
-      this.getList();
+        let endDate = new Date(row.endDate);
-    },
+        if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
-    // 处理当前页码改变的方法，更新列表查询参数中的当前页码，然后调用获取列表数据的方法，以获取对应页码的数据进行展示
+          return '活动进行中';
-    handleCurrentChange(val) {
+        } else if (nowDate.getTime() > endDate.getTime()) {
-      this.listQuery.pageNum = val;
+          return '活动已结束';
-      this.getList();
+        } else {
-    },
+          return '活动未开始';
-    // 处理添加活动的方法，将对话框显示状态设置为true，标记当前操作为添加（非编辑）状态，同时将闪购活动数据对象重置为默认值，准备进行新活动的添加操作
+        }
-    handleAdd() {
+      },
-      this.dialogVisible = true;
+      formatDate(time) {
-      this.isEdit = false;
+        if (time == null || time === '') {
-      this.flashPromotion = Object.assign({}, defaultFlashPromotion);
+          return 'N/A';
-    },
+        }
-    // 处理查看秒杀时间段列表的方法，通过路由跳转到指定的 '/sms/flashSession' 路径对应的页面，通常用于展示相关时间段信息
+        let date = new Date(time);
-    handleShowSessionList() {
+        return formatDate(date, 'yyyy-MM-dd')
-      this.$router.push({path: '/sms/flashSession'})
+      }
     },
-    // 处理活动状态改变的方法，弹出确认框询问是否要修改状态，确认后调用更新状态的接口函数，根据返回结果显示相应提示信息，取消则显示取消修改提示并重新获取列表数据
+    methods: {
-    handleStatusChange(index, row) {
+      handleResetSearch() {
-      this.$confirm('是否要修改该状态?', '提示', {
+        this.listQuery = Object.assign({}, defaultListQuery);
-        confirmButtonText: '确定',
+      },
-        cancelButtonText: '取消',
+      handleSearchList() {
-        type: 'warning'
+        this.listQuery.pageNum = 1;
-      }).then(() => {
-        updateStatus(row.id, {status: row.status}).then(response => {
-          this.$message({
-            type: 'success',
-            message: '修改成功!'
-          });
-        });
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '取消修改'
-        });
         this.getList();
-      });
+      },
-    },
+      handleSizeChange(val) {
-    // 处理删除活动的方法，弹出确认框询问是否要删除活动，确认后调用删除活动的接口函数，成功删除后显示提示信息，并重新获取列表数据以更新页面展示
+        this.listQuery.pageNum = 1;
-    handleDelete(index, row) {
+        this.listQuery.pageSize = val;
-      this.$confirm('是否要删除该活动?', '提示', {
+        this.getList();
-        confirmButtonText: '确定',
+      },
-        cancelButtonText: '取消',
+      handleCurrentChange(val) {
-        type: 'warning'
+        this.listQuery.pageNum = val;
-      }).then(() => {
+        this.getList();
-        deleteFlash(row.id).then(response => {
+      },
+      handleAdd() {
+        this.dialogVisible = true;
+        this.isEdit = false;
+        this.flashPromotion = Object.assign({},defaultFlashPromotion);
+      },
+      handleShowSessionList() {
+        this.$router.push({path: '/sms/flashSession'})
+      },
+      handleStatusChange(index, row) {
+        this.$confirm('是否要修改该状态?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          updateStatus(row.id, {status: row.status}).then(response => {
+            this.$message({
+              type: 'success',
+              message: '修改成功!'
+            });
+          });
+        }).catch(() => {
           this.$message({
-            type: 'success',
+            type: 'info',
-            message: '删除成功!'
+            message: '取消修改'
           });
           this.getList();
         });
-      });
+      },
-    },
+      handleDelete(index, row) {
-    // 处理编辑活动的方法，将对话框显示状态设置为true，标记当前操作为编辑状态，然后将闪购活动数据对象赋值为传入的要编辑的活动行数据，方便在对话框中展示并修改数据
+        this.$confirm('是否要删除该活动?', '提示', {
-    handleUpdate(index, row) {
+          confirmButtonText: '确定',
-      this.dialogVisible = true;
+          cancelButtonText: '取消',
-      this.isEdit = true;
+          type: 'warning'
-      this.flashPromotion = Object.assign({}, row);
+        }).then(() => {
-    },
+          deleteFlash(row.id).then(response => {
-    // 处理对话框确认操作的方法，弹出确认框询问是否要确认当前操作（添加或编辑），确认后根据当前是编辑还是添加状态，分别调用对应的接口函数（更新或创建），操作成功后显示相应提示信息，关闭对话框并重新获取列表数据以更新页面展示
-    handleDialogConfirm() {
-      this.$confirm('是否要确认?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        if (this.isEdit) {
-          updateFlash(this.flashPromotion.id, this.flashPromotion).then(response => {
             this.$message({
-              message: '修改成功！',
+              type: 'success',
-              type: 'success'
+              message: '删除成功!'
             });
-            this.dialogVisible = false;
             this.getList();
-          })
+          });
-        } else {
+        });
-          createFlash(this.flashPromotion).then(response => {
+      },
-            this.$message({
+      handleUpdate(index, row) {
-              message: '添加成功！',
+        this.dialogVisible = true;
-              type: 'success'
+        this.isEdit = true;
-            });
+        this.flashPromotion = Object.assign({},row);
-            this.dialogVisible = false;
+      },
-            this.getList();
+      handleDialogConfirm() {
-          })
+        this.$confirm('是否要确认?', '提示', {
-        }
+          confirmButtonText: '确定',
-      })
+          cancelButtonText: '取消',
-    },
+          type: 'warning'
-    // 处理设置商品的方法，通过路由跳转到指定的 '/sms/selectSession' 路径对应的页面，并传递当前闪购活动的id作为查询参数，通常用于后续设置该活动相关商品等操作
+        }).then(() => {
-    handleSelectSession(index, row) {
+          if (this.isEdit) {
-      this.$router.push({path: '/sms/selectSession', query: {flashPromotionId: row.id}})
+            updateFlash(this.flashPromotion.id,this.flashPromotion).then(response => {
-    },
+              this.$message({
-    // 获取闪购活动列表数据的方法，先将列表数据加载状态设置为true，表示正在获取数据，然后调用导入的获取列表数据的接口函数，获取成功后更新列表数据和总条数，并将加载状态设置为false
+                message: '修改成功！',
-    getList() {
+                type: 'success'
-      this.listLoading = true;
+              });
-      fetchList(this.listQuery).then(response => {
+              this.dialogVisible =false;
-        this.listLoading = false;
+              this.getList();
-        this.list = response.data.list;
+            })
-        this.total = response.data.total;
+          } else {
-      });
+            createFlash(this.flashPromotion).then(response => {
+              this.$message({
+                message: '添加成功！',
+                type: 'success'
+              });
+              this.dialogVisible =false;
+              this.getList();
+            })
+          }
+        })
+      },
+      handleSelectSession(index,row){
+        this.$router.push({path:'/sms/selectSession',query:{flashPromotionId:row.id}})
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList(this.listQuery).then(response => {
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        });
+      }
     }
   }
-}
 </script>
 <style></style>
 

src/views/sms/flash/productRelationList.vue

@@ -1,95 +1,52 @@
-<template>
+<template> 
-  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
-    <!-- 操作区域的卡片容器，设置了无阴影效果 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
-      <!-- 用于触发添加操作的按钮，设置了按钮尺寸、类名，绑定了点击事件“handleSelectProduct”，并且与左侧有一定间距 -->
       <el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="margin-left: 20px">添加</el-button>
     </el-card>
-
-    <!-- 放置数据表格的容器，用于展示商品相关数据列表 -->
     <div class="table-container">
-      <!-- 数据表格组件，绑定了数据“list”，设置了表格引用、宽度、加载状态以及边框等属性 -->
       <el-table ref="productRelationTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
-        <!-- 显示编号的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.id}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“id”字段内容 -->
-            {{scope.row.id}}
-          </template>
         </el-table-column>
-        <!-- 显示商品名称的表格列，内容居中对齐，显示的是每行数据中关联商品对象里的“name”字段 -->
         <el-table-column label="商品名称" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.product.name}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中关联商品对象里的“name”字段内容 -->
-            {{scope.row.product.name}}
-          </template>
         </el-table-column>
-        <!-- 显示货号的表格列，设置了宽度和对齐方式，展示格式为“NO.”加上商品的货号 -->
         <el-table-column label="货号" width="140" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">NO.{{scope.row.product.productSn}}</template>
-            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中关联商品对象里的“productSn”字段内容 -->
-            NO.{{scope.row.product.productSn}}
-          </template>
         </el-table-column>
-        <!-- 显示商品价格的表格列，设置了宽度和对齐方式，展示格式为“￥”加上商品价格 -->
         <el-table-column label="商品价格" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">￥{{scope.row.product.price}}</template>
-            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中关联商品对象里的“price”字段内容 -->
-            ￥{{scope.row.product.price}}
-          </template>
         </el-table-column>
-        <!-- 显示剩余数量的表格列，设置了宽度和对齐方式，直接显示商品的剩余数量 -->
         <el-table-column label="剩余数量" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.product.stock}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中关联商品对象里的“stock”字段内容 -->
-            {{scope.row.product.stock}}
-          </template>
         </el-table-column>
-        <!-- 显示秒杀价格的表格列，设置了宽度和对齐方式，根据秒杀价格是否为空进行不同展示，若不为空则显示“￥”加上秒杀价格 -->
         <el-table-column label="秒杀价格" width="100" align="center">
           <template slot-scope="scope">
-            <!-- 使用v-if指令判断秒杀价格是否不为空，如果是则按照特定格式显示 -->
             <p v-if="scope.row.flashPromotionPrice!==null">
               ￥{{scope.row.flashPromotionPrice}}
             </p>
           </template>
         </el-table-column>
-        <!-- 显示秒杀数量的表格列，设置了宽度和对齐方式，直接显示商品的秒杀数量 -->
         <el-table-column label="秒杀数量" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.flashPromotionCount}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“flashPromotionCount”字段内容 -->
-            {{scope.row.flashPromotionCount}}
-          </template>
         </el-table-column>
-        <!-- 显示限购数量的表格列，设置了宽度和对齐方式，直接显示商品的限购数量 -->
         <el-table-column label="限购数量" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.flashPromotionLimit}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“flashPromotionLimit”字段内容 -->
-            {{scope.row.flashPromotionLimit}}
-          </template>
         </el-table-column>
-        <!-- 显示排序的表格列，设置了宽度和对齐方式，直接显示商品的排序值 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.sort}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“sort”字段内容 -->
-            {{scope.row.sort}}
-          </template>
         </el-table-column>
-        <!-- 显示操作按钮的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="操作" width="100" align="center">
           <template slot-scope="scope">
-            <!-- 用于触发编辑操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleUpdate” -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
-            <!-- 用于触发删除操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleDelete” -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -98,10 +55,7 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 分页组件的容器，用于对商品数据列表进行分页操作 -->
     <div class="pagination-container">
-      <!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -113,47 +67,27 @@
         :total="total">
       </el-pagination>
     </div>
-
-    <!-- 弹出对话框组件，用于选择商品操作，设置了标题、对话框显示状态的双向绑定以及宽度属性 -->
     <el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
-      <!-- 输入框组件，用于在对话框内输入关键词进行商品搜索，双向绑定了“dialogData.listQuery.keyword”数据，设置了宽度、外边距、尺寸以及占位提示等属性，并且包含一个搜索图标按钮 -->
       <el-input v-model="dialogData.listQuery.keyword"
                 style="width: 250px;margin-bottom: 20px"
                 size="small"
                 placeholder="商品名称搜索">
-        <!-- 搜索图标按钮，放置在输入框的尾部，点击可触发“handleSelectSearch”事件 -->
         <el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
       </el-input>
-      <!-- 数据表格组件，用于在对话框内展示搜索到的商品列表，绑定了数据“dialogData.list”，并设置了选择改变的事件绑定以及边框属性 -->
       <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">
+          <template slot-scope="scope">{{scope.row.name}}</template>
-            <!-- 在表格单元格的作用域内，显示对应行数据中的“name”字段内容 -->
-            {{scope.row.name}}
-          </template>
         </el-table-column>
-        <!-- 显示货号的表格列，设置了宽度和对齐方式，展示格式为“NO.”加上商品的货号 -->
         <el-table-column label="货号" width="160" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
-            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中的“productSn”字段内容 -->
-            NO.{{scope.row.productSn}}
-          </template>
         </el-table-column>
-        <!-- 显示价格的表格列，设置了宽度和对齐方式，展示格式为“￥”加上商品价格 -->
         <el-table-column label="价格" width="120" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">￥{{scope.row.price}}</template>
-            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中的“price”字段内容 -->
-            ￥{{scope.row.price}}
-          </template>
         </el-table-column>
       </el-table>
-      <!-- 分页组件的容器，用于对对话框内的商品列表进行分页操作 -->
       <div class="pagination-container">
-        <!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -165,266 +99,213 @@
           :total="dialogData.total">
         </el-pagination>
       </div>
-      <!-- 用于清除浮动，确保后续元素布局正常 -->
       <div style="clear: both;"></div>
-      <!-- 对话框底部的操作按钮区域，使用了插槽“footer” -->
       <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="editDialogVisible"
+      :visible.sync="editDialogVisible"
-               width="40%">
+      width="40%">
-      <!-- 表单组件，用于在对话框内展示和编辑秒杀商品的相关信息，绑定了数据模型“flashProductRelation”，设置了表单引用、标签宽度和尺寸等属性 -->
       <el-form :model="flashProductRelation"
                ref="flashProductRelationForm"
                label-width="150px" size="small">
-        <!-- 对应“商品名称”展示的表单项，此处直接展示商品名称，不可编辑 -->
         <el-form-item label="商品名称：">
           <span>{{flashProductRelation.product.name}}</span>
         </el-form-item>
-        <!-- 对应“货号”展示的表单项，此处直接展示货号，不可编辑 -->
         <el-form-item label="货号：">
           <span>NO.{{flashProductRelation.product.productSn}}</span>
         </el-form-item>
-        <!-- 对应“商品价格”展示的表单项，此处直接展示商品价格，不可编辑 -->
         <el-form-item label="商品价格：">
           <span>￥{{flashProductRelation.product.price}}</span>
         </el-form-item>
-        <!-- 对应“秒杀价格”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.flashPromotionPrice”数据，设置了类名，并在输入框头部添加“￥”符号 -->
         <el-form-item label="秒杀价格：">
           <el-input v-model="flashProductRelation.flashPromotionPrice" class="input-width">
             <template slot="prepend">￥</template>
           </el-input>
         </el-form-item>
-        <!-- 对应“剩余数量”展示的表单项，此处直接展示剩余数量，不可编辑 -->
         <el-form-item label="剩余数量：">
           <span>{{flashProductRelation.product.stock}}</span>
         </el-form-item>
-        <!-- 对应“秒杀数量”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.flashPromotionCount”数据，设置了类名 -->
         <el-form-item label="秒杀数量：">
           <el-input v-model="flashProductRelation.flashPromotionCount" class="input-width"></el-input>
         </el-form-item>
-        <!-- 对应“限购数量”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.flashPromotionLimit”数据，设置了类名 -->
         <el-form-item label="限购数量：">
           <el-input v-model="flashProductRelation.flashPromotionLimit" class="input-width"></el-input>
         </el-form-item>
-        <!-- 对应“排序”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.sort”数据，设置了类名 -->
         <el-form-item label="排序：">
           <el-input v-model="flashProductRelation.sort" class="input-width"></el-input>
         </el-form-item>
       </el-form>
-      <!-- 对话框底部的操作按钮区域，使用了插槽“footer” -->
       <span slot="footer" class="dialog-footer">
-                <!-- 取消按钮，点击可关闭对话框，设置了按钮尺寸 -->
+        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
-                <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
-        <!-- 确定按钮，点击可触发确认编辑秒杀商品信息的相关逻辑，设置了按钮类型为主要按钮、尺寸为小尺寸 -->
+      </span>
-                <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
-            </span>
     </el-dialog>
   </div>
 </template>
 <script>
-// 从'@/api/flashProductRelation'模块中导入用于获取列表、创建、删除以及更新秒杀商品关联关系相关的函数
+  import {fetchList,createFlashProductRelation,deleteFlashProductRelation,updateFlashProductRelation} from '@/api/flashProductRelation';
-import {fetchList, createFlashProductRelation, deleteFlashProductRelation, updateFlashProductRelation} from '@/api/flashProductRelation';
+  import {fetchList as fetchProductList} from '@/api/product';
-// 从'@/api/product'模块中导入用于获取商品列表的函数，并将其别名为'fetchProductList'
+  const defaultListQuery = {
-import {fetchList as fetchProductList} from '@/api/product';
+    pageNum: 1,
-
+    pageSize: 5,
-// 默认的列表查询参数对象，包含页码、每页数量、闪购活动ID以及闪购活动场次ID等初始值，用于初始化列表查询相关设置
+    flashPromotionId: null,
-const defaultListQuery = {
+    flashPromotionSessionId: null
-  pageNum: 1,
+  };
-  pageSize: 5,
+  export default {
-  flashPromotionId: null,
+    name:'flashPromotionProductRelationList',
-  flashPromotionSessionId: null
+    data() {
-};
+      return {
-
+        listQuery: Object.assign({}, defaultListQuery),
-export default {
-  name: 'flashPromotionProductRelationList',
-  data() {
-    return {
-      // 当前的列表查询参数，初始化为defaultListQuery的副本，用于在组件中存储和操作实际的查询条件
-      listQuery: Object.assign({}, defaultListQuery),
-      // 存储获取到的秒杀商品关联关系列表数据，初始为null，后续会通过接口获取并赋值
-      list: null,
-      // 数据总条数，初始为null，同样会在获取数据后更新具体的值
-      total: null,
-      // 列表数据加载状态，初始为false，在获取数据过程中会设置为true表示正在加载
-      listLoading: false,
-      // 控制添加/编辑等相关主对话框的显示与隐藏，初始为false即默认隐藏对话框
-      dialogVisible: false,
-      // 控制选择商品对话框的显示与隐藏，初始为false即默认隐藏该对话框
-      selectDialogVisible: false,
-      // 用于存储选择商品对话框相关的数据，包括商品列表、数据总条数、多选选中的数据以及查询参数等
-      dialogData: {
         list: null,
         total: null,
-        multipleSelection: [],
+        listLoading: false,
-        listQuery: {
+        dialogVisible: false,
-          keyword: null,
+        selectDialogVisible:false,
-          pageNum: 1,
+        dialogData:{
-          pageSize: 5
+          list: null,
+          total: null,
+          multipleSelection:[],
+          listQuery:{
+            keyword: null,
+            pageNum: 1,
+            pageSize: 5
+          }
+        },
+        editDialogVisible:false,
+        flashProductRelation:{
+          product:{}
         }
-      },
-      // 控制编辑秒杀商品信息对话框的显示与隐藏，初始为false即默认隐藏该对话框
-      editDialogVisible: false,
-      // 用于存储当前正在编辑的秒杀商品关联关系数据，初始包含一个空的商品对象，后续会赋值为实际要编辑的数据
-      flashProductRelation: {
-        product: {}
       }
-    }
-  },
-  created() {
-    // 从路由查询参数中获取闪购活动ID，并赋值给列表查询参数中的对应字段，用于后续查询与该闪购活动相关的商品关联关系数据
-    this.listQuery.flashPromotionId = this.$route.query.flashPromotionId;
-    // 从路由查询参数中获取闪购活动场次ID，并赋值给列表查询参数中的对应字段，同样用于精准查询相关数据
-    this.listQuery.flashPromotionSessionId = this.$route.query.flashPromotionSessionId;
-    // 在组件创建完成后，立即调用获取秒杀商品关联关系列表数据的方法，用于初始化页面数据展示
-    this.getList();
-  },
-  methods: {
-    // 处理每页显示数量改变的方法
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1; //先将页码重置为1，然后更新列表查询参数中的每页显示数量
-      this.listQuery.pageSize = val;
-      this.getList(); //再调用获取列表数据的方法，以按照新的每页数量获取数据
     },
-    // 处理当前页码改变的方法，更新列表查询参数中的当前页码
+    created(){
-    handleCurrentChange(val) {
+      this.listQuery.flashPromotionId=this.$route.query.flashPromotionId;
-      this.listQuery.pageNum = val;
+      this.listQuery.flashPromotionSessionId=this.$route.query.flashPromotionSessionId;
-      this.getList(); //然后调用获取列表数据的方法，以获取对应页码的数据进行展示
+      this.getList();
     },
-    // 处理添加商品操作的方法
+    methods:{
-    handleSelectProduct() {
+      handleSizeChange(val) {
-      this.selectDialogVisible = true; //将选择商品对话框的显示状态设置为true
+        this.listQuery.pageNum = 1;
-      this.getDialogList(); //然后调用获取选择商品对话框列表数据的方法，准备展示商品列表供选择
+        this.listQuery.pageSize = val;
-    },
+        this.getList();
-    // 处理编辑商品操作的方法
+      },
-    handleUpdate(index, row) {
+      handleCurrentChange(val) {
-      this.editDialogVisible = true; //将编辑秒杀商品信息对话框的显示状态设置为true
+        this.listQuery.pageNum = val;
-      this.flashProductRelation = Object.assign({}, row); //然后将当前要编辑的商品关联关系数据赋值为传入的要编辑的行数据，方便在对话框中展示并修改数据
+        this.getList();
-    },
+      },
-    // 处理删除商品操作的方法，弹出确认框询问是否要删除商品
+      handleSelectProduct(){
-    handleDelete(index, row) {
+        this.selectDialogVisible=true;
-      this.$confirm('是否要删除该商品?', '提示', {
+        this.getDialogList();
-        confirmButtonText: '确定',
+      },
-        cancelButtonText: '取消',
+      handleUpdate(index,row){
-        type: 'warning'
+        this.editDialogVisible = true;
-      }).then(() => { //确认后调用删除商品关联关系的接口函数
+        this.flashProductRelation = Object.assign({},row);
-        deleteFlashProductRelation(row.id).then(response => {
+      },
-          this.$message({
+      handleDelete(index,row){
-            type: 'success',
+        this.$confirm('是否要删除该商品?', '提示', {
-            message: '删除成功!'
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteFlashProductRelation(row.id).then(response => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.getList();
           });
-          this.getList(); //成功删除后显示提示信息，并重新获取列表数据以更新页面展示
-        });
-      });
-    },
-    // 处理选择商品对话框内搜索操作的方法
-    handleSelectSearch() {
-      this.getDialogList(); //调用获取选择商品对话框列表数据的方法，根据输入的关键词重新获取商品列表进行展示
-    },
-    // 处理选择商品对话框内每页显示数量改变的方法
-    handleDialogSizeChange(val) {
-      this.dialogData.listQuery.pageNum = 1; //先将页码重置为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.length < 1) { //首先判断是否至少选择了一条记录
-        this.$message({
-          message: '请选择一条记录', //如果没有则弹出提示信息要求选择；
-          type: 'warning',
-          duration: 1000
         });
-        return;
+      },
-      }
+      handleSelectSearch(){
-      let selectProducts = []; //若有选择，则将选中的商品信息整理成特定格式的数组
+        this.getDialogList();
-      for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
+      },
-        selectProducts.push({
+      handleDialogSizeChange(val) {
-          productId: this.dialogData.multipleSelection[i].id,
+        this.dialogData.listQuery.pageNum = 1;
-          flashPromotionId: this.listQuery.flashPromotionId,
+        this.dialogData.listQuery.pageSize = val;
-          flashPromotionSessionId: this.listQuery.flashPromotionSessionId
+        this.getDialogList();
-        });
+      },
-      }
+      handleDialogCurrentChange(val) {
-      this.$confirm('是否要进行添加操作?', '提示', { //弹出确认框询问是否要进行添加操作
+        this.dialogData.listQuery.pageNum = val;
-        confirmButtonText: '确定',
+        this.getDialogList();
-        cancelButtonText: '取消',
+      },
-        type: 'warning'
+      handleDialogSelectionChange(val){
-      }).then(() => { //确认后调用创建秒杀商品关联关系的接口函数
+        this.dialogData.multipleSelection = val;
-        createFlashProductRelation(selectProducts).then(response => {
+      },
-          this.selectDialogVisible = false;
+      handleSelectDialogConfirm(){
-          this.dialogData.multipleSelection = [];
+        if (this.dialogData.multipleSelection < 1) {
-          this.getList();
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '添加成功!' //成功添加后进行一系列后续操作，如关闭对话框、清空选中记录、重新获取列表数据并显示添加成功提示信息
+            type: 'warning',
+            duration: 1000
           });
-        });
+          return;
-      });
+        }
-    },
+        let selectProducts = [];
-    // 处理编辑秒杀商品信息对话框确认操作的方法
+        for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
-    handleEditDialogConfirm() {
+          selectProducts.push({
-      this.$confirm('是否要确认?', '提示', { //弹出确认框询问是否要确认编辑操作
+            productId:this.dialogData.multipleSelection[i].id,
-        confirmButtonText: '确定',
+            flashPromotionId:this.listQuery.flashPromotionId,
-        cancelButtonText: '取消',
+            flashPromotionSessionId:this.listQuery.flashPromotionSessionId
-        type: 'warning'
-      }).then(() => { //确认后调用更新秒杀商品关联关系的接口函数，关闭对话框并重新获取列表数据以更新页面展示
-        updateFlashProductRelation(this.flashProductRelation.id, this.flashProductRelation).then(response => {
-          this.$message({
-            message: '修改成功！', //操作成功后显示相应提示信息
-            type: 'success'
           });
-          this.editDialogVisible = false;
+        }
-          this.getList();
+        this.$confirm('使用要进行添加操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          createFlashProductRelation(selectProducts).then(response=>{
+            this.selectDialogVisible=false;
+            this.dialogData.multipleSelection=[];
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            });
+          });
+        });
+      },
+      handleEditDialogConfirm(){
+        this.$confirm('是否要确认?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+            updateFlashProductRelation(this.flashProductRelation.id,this.flashProductRelation).then(response => {
+              this.$message({
+                message: '修改成功！',
+                type: 'success'
+              });
+              this.editDialogVisible =false;
+              this.getList();
+            })
         })
-      })
+      },
-    },
+      getList() {
-    // 获取秒杀商品关联关系列表数据的方法
+        this.listLoading = true;
-    getList() {
+        fetchList(this.listQuery).then(response => {
-      this.listLoading = true; //先将列表数据加载状态设置为true，表示正在获取数据
+          this.listLoading = false;
-      fetchList(this.listQuery).then(response => { //然后调用导入的获取列表数据的接口函数
+          this.list = response.data.list;
-        this.listLoading = false; //并将加载状态设置为false
+          this.total = response.data.total;
-        this.list = response.data.list; //获取成功后更新列表数据和总条数
+        });
-        this.total = response.data.total;
+      },
-      });
+      getDialogList(){
-    },
+        fetchProductList(this.dialogData.listQuery).then(response=>{
-    // 获取选择商品对话框列表数据的方法，用于在对话框内展示商品信息
+          this.dialogData.list=response.data.list;
-    getDialogList() {
+          this.dialogData.total=response.data.total;
-      fetchProductList(this.dialogData.listQuery).then(response => { //调用导入的获取商品列表的接口函数
+        })
-        this.dialogData.list = response.data.list; //获取成功后更新对话框数据中的商品列表和总条数
+      }
-        this.dialogData.total = response.data.total;
-      })
     }
   }
-}
 </script>
 <style scoped>
-<!-- 使用带有“scoped”属性的“style”标签，表示这里定义的样式仅作用于当前组件内的元素，避免样式污染其他组件 -->
+  .operate-container{
-<!-- 定义类名为“operate-container”的样式规则 -->
+    margin-top: 0;
-.operate-container{
+  }
-<!-- 设置该类所应用元素的上外边距为0，用于控制其与上方元素的间距 -->
+  .input-width{
-  margin-top: 0;
+    width: 200px;
-}
+  }
-<!-- 定义类名为“input-width”的样式规则 -->
-.input-width{
-<!-- 设置该类所应用元素的宽度为200px，通常可用于像输入框等需要统一宽度设置的表单元素 -->
-  width: 200px;
-}
 </style>
 
 

src/views/sms/flash/selectSessionList.vue

@@ -1,60 +1,31 @@
-<template>
+<template> 
-  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
-    <!-- el-card组件，用于创建一个卡片式的容器，设置了无阴影效果，并添加了"operate-container"类名，通常可用于放置操作相关的元素或内容展示 -->
     <el-card shadow="never" class="operate-container">
-      <!-- 显示一个图标，此处使用的是element-ui提供的"el-icon-tickets"图标，用于对下方数据列表进行某种示意，比如表示和票务、商品列表等相关 -->
       <i class="el-icon-tickets"></i>
-      <!-- 显示文字"数据列表"，用于明确下方表格所展示数据的性质 -->
       <span>数据列表</span>
     </el-card>
-
-    <!-- 放置数据表格的容器，用于包裹下面的el-table组件，使其在页面布局上更加规整 -->
     <div class="table-container">
-      <!-- el-table组件，用于创建一个数据表格，设置了表格引用为"selectSessionTable"，绑定了数据"list"，设置表格宽度为占满父容器（100%），根据"listLoading"的值来显示加载状态（如加载动画等），并添加了边框样式 -->
       <el-table ref="selectSessionTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示编号信息，设置了列的宽度为100像素，内容在单元格中居中对齐 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.id}}</template>
-            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"id"字段内容，即展示每一行数据的编号 -->
-            {{scope.row.id}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示秒杀时间段名称信息，内容在单元格中居中对齐 -->
         <el-table-column label="秒杀时间段名称" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.name}}</template>
-            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"name"字段内容，即展示每一行数据对应的秒杀时间段的名称 -->
-            {{scope.row.name}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日开始时间信息，内容在单元格中居中对齐，使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
         <el-table-column label="每日开始时间" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
-            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"startTime"字段（时间类型数据）进行格式化处理后展示 -->
-            {{scope.row.startTime | formatTime}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日结束时间信息，内容在单元格中居中对齐，同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
         <el-table-column label="每日结束时间" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
-            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"endTime"字段（时间类型数据）进行格式化处理后展示 -->
-            {{scope.row.endTime | formatTime}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示商品数量信息，内容在单元格中居中对齐，直接展示对应行数据中的"productCount"字段内容，即显示每个秒杀时间段对应的商品数量 -->
         <el-table-column label="商品数量" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.productCount}}</template>
-            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"productCount"字段内容，即展示每一行数据对应的商品数量 -->
-            {{scope.row.productCount}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示操作按钮，内容在单元格中居中对齐 -->
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），按钮类型为"text"，绑定了点击事件"handleShowRelation"，点击按钮可触发相应的操作逻辑，此处按钮显示的文字为"商品列表"，可能点击后会跳转到展示对应秒杀时间段下商品列表的页面 -->
             <el-button size="mini"
                        type="text"
                        @click="handleShowRelation(scope.$index, scope.row)">商品列表
@@ -66,67 +37,47 @@
   </div>
 </template>
 <script>
-// 从'@/api/flashSession'模块中导入用于获取选择列表（可能是与闪购时段相关的列表数据）的函数fetchSelectList
+  import {fetchSelectList} from '@/api/flashSession';
-import {fetchSelectList} from '@/api/flashSession';
+  import {formatDate} from '@/utils/date';
-// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate，可能会用于对时间相关数据进行格式化处理
+  export default {
-import {formatDate} from '@/utils/date';
+    name: 'selectSessionList',
-
+    data() {
-export default {
+      return {
-  name: 'selectSessionList',
+        list: null,
-  data() {
+        listLoading: false
-    return {
-      // 用于存储获取到的列表数据（可能是闪购时段相关的数据列表），初始值为null，后续会通过接口获取数据并赋值
-      list: null,
-      // 表示列表数据的加载状态，初始值为false，当开始获取数据时会设置为true，数据获取完成后再设回false，用于控制页面上加载动画等相关显示
-      listLoading: false
-    }
-  },
-  created() {
-    // 在组件创建完成后，立即调用获取列表数据的方法，用于初始化页面展示所需的数据
-    this.getList();
-  },
-  filters: {
-    // 定义一个名为formatTime的过滤器函数，用于对传入的时间数据进行格式化处理
-    formatTime(time) {
-      // 判断传入的时间数据是否为空（null或者空字符串），如果是则返回 'N/A' 作为默认显示内容
-      if (time == null || time === '') {
-        return 'N/A';
       }
-      // 将传入的时间数据转换为JavaScript的Date对象，以便后续使用相关方法进行格式化操作
-      let date = new Date(time);
-      // 调用导入的formatDate函数，按照 'hh:mm:ss' 的格式对Date对象表示的时间进行格式化，并返回格式化后的结果
-      return formatDate(date, 'hh:mm:ss')
-    }
-  },
-  methods: {
-    // 处理展示关联关系的方法，通常用于当用户点击页面上对应的操作按钮（比如查看关联商品列表之类的操作）时触发
-    handleShowRelation(index, row) {
-      // 使用Vue Router进行页面路由跳转，跳转到 '/sms/flashProductRelation' 路径对应的页面
-      this.$router.push({path: '/sms/flashProductRelation', query: {
-          flashPromotionId: this.$route.query.flashPromotionId, flashPromotionSessionId: row.id}}) //同时传递两个查询参数，一个是从当前路由查询参数中获取的闪购活动ID（flashPromotionId），另一个是当前行数据中对应的闪购时段ID（flashPromotionSessionId），可能用于在目标页面根据这两个ID来展示相关的商品关联关系等信息
     },
-    // 获取列表数据的方法，用于向服务器请求并获取相关的数据列表（比如闪购时段列表等）
+    created() {
-    getList() {
+      this.getList();
-      // 将列表数据加载状态设置为true，表示开始获取数据，此时页面上可以根据这个状态显示加载动画等提示信息
+    },
-      this.listLoading = true;
+    filters:{
-      // 调用导入的fetchSelectList函数，传递一个包含闪购活动ID的对象作为参数（从当前路由查询参数中获取闪购活动ID），向服务器发起请求获取数据，请求成功后执行then回调函数
+      formatTime(time) {
-      fetchSelectList({flashPromotionId: this.$route.query.flashPromotionId}).then(response => {
+        if (time == null || time === '') {
-        // 将列表数据加载状态设置为false，表示数据获取完成，停止页面上的加载动画等相关显示
+          return 'N/A';
-        this.listLoading = false;
+        }
-        // 将获取到的响应数据中的列表数据部分赋值给组件的list属性，以便在页面模板中进行展示等操作
+        let date = new Date(time);
-        this.list = response.data;
+        return formatDate(date, 'hh:mm:ss')
-      });
+      }
+    },
+    methods: {
+      handleShowRelation(index,row){
+        this.$router.push({path:'/sms/flashProductRelation',query:{
+          flashPromotionId:this.$route.query.flashPromotionId, flashPromotionSessionId:row.id}})
+      },
+      getList() {
+        this.listLoading = true;
+        fetchSelectList({flashPromotionId:this.$route.query.flashPromotionId}).then(response => {
+          this.listLoading = false;
+          this.list = response.data;
+        });
+      }
     }
   }
-}
 </script>
 <style scoped>
-<!-- “scoped”属性表示该样式作用范围仅限于当前组件内的元素，避免样式影响到其他组件中的同名元素，起到样式隔离的作用 -->
+  .operate-container {
-.operate-container {
+    margin-top: 0;
-<!-- 这是一个CSS样式规则，针对类名为“operate-container”的元素进行样式设置 -->
+  }
-<!-- “margin-top”属性用于设置元素的上外边距，这里将其值设置为“0”，意味着该元素距离上方相邻元素的间距为0，可用于精准控制元素在页面中的垂直布局位置 -->
-margin-top: 0;
-}
 </style>
 
 

src/views/sms/flash/sessionList.vue

@@ -1,55 +1,29 @@
-<template>
+<template> 
-  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
-    <!-- el-card组件，用于创建一个卡片式的容器，设置了无阴影效果（shadow="never"），并添加了"operate-container"类名，通常可用于放置操作相关的元素，比如这里放置了添加按钮等 -->
     <el-card shadow="never" class="operate-container">
-      <!-- 显示一个图标，此处使用的是element-ui提供的"el-icon-tickets"图标，用于对下方数据列表进行某种示意，比如暗示和票务、商品列表等相关的操作场景 -->
       <i class="el-icon-tickets"></i>
-      <!-- 显示文字"数据列表"，用于明确下方表格所展示数据的性质，让用户知晓表格中呈现的是什么内容 -->
       <span>数据列表</span>
-      <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），添加了"btn-add"类名（可能用于样式设置等），绑定了点击事件"handleAdd"，点击该按钮可触发对应的添加操作逻辑 -->
       <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
     </el-card>
-
-    <!-- 放置数据表格的容器，用于包裹下面的el-table组件，使其在页面布局上更加规整，将表格与其他元素区分开来 -->
     <div class="table-container">
-      <!-- el-table组件，用于创建一个数据表格，设置了表格引用为"flashSessionTable"，绑定了数据"list"（这个数据应该是从组件的data属性或者通过接口获取等方式得到的，包含了要展示在表格中的具体数据内容），设置表格宽度为占满父容器（100%），根据"listLoading"的值来显示加载状态（如加载动画等，方便用户知晓数据是否正在加载中），并添加了边框样式 -->
       <el-table ref="flashSessionTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示编号信息，设置了列的宽度为100像素，内容在单元格中居中对齐 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.id}}</template>
-            <!-- 在表格单元格的作用域内（通过slot-scope获取到对应行的数据对象），通过插值表达式显示对应行数据中的"id"字段内容，即展示每一行数据的编号 -->
-            {{scope.row.id}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示秒杀时间段名称信息，内容在单元格中居中对齐，直接展示对应行数据中的"name"字段内容，用于显示每个秒杀时间段对应的名称 -->
         <el-table-column label="秒杀时间段名称" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.name}}</template>
-            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"name"字段内容，即展示每一行数据对应的秒杀时间段的名称 -->
-            {{scope.row.name}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日开始时间信息，内容在单元格中居中对齐，使用了名为"formatTime"的过滤器（应该是在组件的filters选项中定义的，用于对时间数据进行格式化处理）对时间数据进行格式化后再展示 -->
         <el-table-column label="每日开始时间" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
-            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"startTime"字段（时间类型数据）进行格式化处理后展示 -->
-            {{scope.row.startTime | formatTime}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日结束时间信息，内容在单元格中居中对齐，同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
         <el-table-column label="每日结束时间" align="center">
-          <template slot-scope="scope">
+          <template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
-            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"endTime"字段（时间类型数据）进行格式化处理后展示 -->
-            {{scope.row.endTime | formatTime}}
-          </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示启用状态信息，内容在单元格中居中对齐，里面包含了一个el-switch组件（开关组件）用于切换启用/禁用状态 -->
         <el-table-column label="启用" align="center">
           <template slot-scope="scope">
-            <!-- el-switch组件，用于创建一个开关按钮，绑定了状态改变的事件"handleStatusChange"，当开关状态改变时会触发该事件，传递当前行的索引和整行数据作为参数，设置了激活值为1（表示启用状态对应的数值），未激活值为0（表示禁用状态对应的数值），双向绑定对应行数据中的"status"字段，意味着开关状态的改变会直接更新对应行数据里的这个字段值 -->
             <el-switch
               @change="handleStatusChange(scope.$index, scope.row)"
               :active-value="1"
@@ -58,15 +32,12 @@
             </el-switch>
           </template>
         </el-table-column>
-        <!-- el-table-column组件，用于定义表格中的列，此列用于展示操作按钮，设置了列的宽度为180像素，内容在单元格中居中对齐 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），按钮类型为"text"（文本样式按钮，通常外观上更简洁，无背景色等），绑定了点击事件"handleUpdate"，点击该按钮可触发编辑操作逻辑，按钮显示的文字为"编辑" -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
-            <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），按钮类型为"text"（文本样式按钮，通常外观上更简洁，无背景色等），绑定了点击事件"handleDelete"，点击该按钮可触发删除操作逻辑，按钮显示的文字为"删除" -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -75,203 +46,163 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- el-dialog组件，用于创建一个弹出式对话框，常用于展示表单让用户输入信息或者进行确认等操作，设置了对话框的标题为"添加时间段"，通过":visible.sync"双向绑定了对话框的显示状态（与组件data中的dialogVisible属性相关联，改变该属性值可控制对话框的显示与隐藏），设置了对话框的宽度为40%（相对于屏幕宽度等的占比，用于控制对话框大小） -->
     <el-dialog
       title="添加时间段"
       :visible.sync="dialogVisible"
       width="40%">
-      <!-- el-form组件，用于创建一个表单，绑定了数据模型"flashSession"（这个对象应该在组件的data属性中定义，用于存储表单中输入的数据等），设置了表单引用为"flashSessionForm"（可用于后续对表单进行验证等操作时的标识），设置了标签宽度为150像素，表单整体尺寸为"small"（小型尺寸，用于统一表单元素的外观大小等风格） -->
       <el-form :model="flashSession"
                ref="flashSessionForm"
                label-width="150px" size="small">
-        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"秒杀时间段名称："，用于提示用户此处应输入的内容 -->
         <el-form-item label="秒杀时间段名称：">
-          <!-- el-input组件，用于创建一个输入框，双向绑定了"flashSession.name"数据，意味着用户在输入框中输入的内容会实时更新到"flashSession"对象的"name"属性中，设置了输入框的宽度为250像素 -->
           <el-input v-model="flashSession.name" style="width: 250px"></el-input>
         </el-form-item>
-        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"每日开始时间："，用于提示用户此处应选择时间 -->
         <el-form-item label="每日开始时间：">
-          <!-- el-time-picker组件，用于创建一个时间选择器，用户可以通过它选择具体的时间，双向绑定了"flashSession.startTime"数据，选择的时间会更新到"flashSession"对象的"startTime"属性中，设置了占位提示文字为"请选择时间" -->
           <el-time-picker
             v-model="flashSession.startTime"
             placeholder="请选择时间">
           </el-time-picker>
         </el-form-item>
-        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"每日结束时间："，用于提示用户此处应选择时间 -->
         <el-form-item label="每日结束时间：">
-          <!-- el-time-picker组件，用于创建一个时间选择器，用户可以通过它选择具体的时间，双向绑定了"flashSession.endTime"数据，选择的时间会更新到"flashSession"对象的"endTime"属性中，设置了占位提示文字为"请选择时间" -->
           <el-time-picker
             v-model="flashSession.endTime"
             placeholder="请选择时间">
           </el-time-picker>
         </el-form-item>
-        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"是否启用"，用于让用户选择该时间段是否启用 -->
         <el-form-item label="是否启用">
-          <!-- el-radio-group组件，用于创建一个单选按钮组，绑定了"flashSession.status"数据，意味着用户选择的单选按钮的值会更新到"flashSession"对象的"status"属性中 -->
           <el-radio-group v-model="flashSession.status">
-            <!-- el-radio组件，用于创建一个单选按钮，设置了按钮的标签值为1，对应的显示文字为"启用"，用户选择该按钮后会将"flashSession.status"的值设为1 -->
             <el-radio :label="1">启用</el-radio>
-            <!-- el-radio组件，用于创建一个单选按钮，设置了按钮的标签值为0，对应的显示文字为"不启用"，用户选择该按钮后会将"flashSession.status"的值设为0 -->
             <el-radio :label="0">不启用</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
-      <!-- 对话框底部的操作按钮区域，使用了插槽"footer"来定义，通常用于放置确认、取消等按钮 -->
       <span slot="footer" class="dialog-footer">
-                <!-- el-button组件，用于创建一个按钮，点击事件绑定了将"dialogVisible"属性设为false的操作（即关闭对话框），设置了按钮尺寸为"small"（小型按钮），按钮显示的文字为"取 消" -->
+        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
-                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
-        <!-- el-button组件，用于创建一个按钮，设置了按钮类型为"primary"（主要按钮，通常会有突出的样式，比如颜色与其他按钮不同等），点击事件绑定了"handleDialogConfirm"方法（这个方法应该在组件的methods选项中定义，用于处理确认添加等相关逻辑），设置了按钮尺寸为"small"（小型按钮），按钮显示的文字为"确 定" -->
+      </span>
-                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
-            </span>
     </el-dialog>
   </div>
 </template>
 <script>
-// 从'@/api/flashSession'模块中导入多个函数，这些函数分别用于获取列表、更新状态、删除时段、创建时段以及更新时段相关操作，通常是与后端API进行交互来操作秒杀时间段相关的数据
+  import {fetchList,updateStatus,deleteSession,createSession,updateSession} from '@/api/flashSession';
-import {fetchList, updateStatus, deleteSession, createSession, updateSession} from '@/api/flashSession';
+  import {formatDate} from '@/utils/date';
-// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate，可能会在对时间相关数据进行展示等处理时使用到
+  const defaultFlashSession={
-import {formatDate} from '@/utils/date';
+    name:null,
-
+    startTime:null,
-// 定义一个默认的秒杀时间段对象
+    endTime:null,
-const defaultFlashSession = { //包含名称、开始时间、结束时间以及状态等属性
+    status:0
-  name: null,
+  };
-  startTime: null,
+  export default {
-  endTime: null,
+    name: 'flashPromotionSessionList',
-  status: 0 //并赋予初始值，用于初始化相关数据操作
+    data() {
-};
+      return {
-
+        list: null,
-export default {
+        listLoading: false,
-  name: 'flashPromotionSessionList',
+        dialogVisible:false,
-  data() {
+        isEdit:false,
-    return {
+        flashSession:Object.assign({},defaultFlashSession)
-      // 用于存储获取到的秒杀时间段列表数据，初始值为null，后续会通过调用接口获取数据并赋值给它，以便在页面中展示相关时间段信息
-      list: null,
-      // 表示列表数据的加载状态，初始值为false，当开始获取数据时会设置为true，数据获取完成后再设回false，可用于在页面上显示加载动画等提示用户数据正在加载中
-      listLoading: false,
-      // 控制弹出对话框（如添加/编辑时间段的对话框）的显示与隐藏，初始值为false，表示对话框默认是隐藏状态
-      dialogVisible: false,
-      // 标记当前操作是编辑（true）还是添加（false）状态，初始值为false，用于区分不同的操作场景，以便执行相应的逻辑处理
-      isEdit: false,
-      // 当前秒杀时间段的数据对象，初始化为defaultFlashSession的副本，在进行添加或编辑操作时会更新其属性值，用于存储和传递相关时间段的具体信息
-      flashSession: Object.assign({}, defaultFlashSession)
-    }
-  },
-  created() {
-    // 在组件创建完成后，立即调用获取列表数据的方法，用于初始化页面展示所需的秒杀时间段列表数据，使得页面加载完成后能及时显示相关信息
-    this.getList();
-  },
-  filters: {
-    // 定义一个名为formatTime的过滤器函数，用于对传入的时间数据进行格式化处理，方便在页面上按照特定格式展示时间信息
-    formatTime(time) {
-      // 判断传入的时间数据是否为空（null或者空字符串），如果是则返回 'N/A' 作为默认显示内容，表示时间数据无效或暂无数据
-      if (time == null || time === '') {
-        return 'N/A';
       }
-      // 将传入的时间数据转换为JavaScript的Date对象，以便后续使用formatDate函数进行格式化操作，Date对象可以方便地提取和处理时间相关的各个部分（如小时、分钟、秒等）
-      let date = new Date(time);
-      // 调用导入的formatDate函数，按照 'hh:mm:ss' 的格式对Date对象表示的时间进行格式化，例如将时间格式化为类似 "12:30:00" 的形式，并返回格式化后的结果用于页面展示
-      return formatDate(date, 'hh:mm:ss')
-    }
-  },
-  methods: {
-    // 处理添加操作的方法
-    handleAdd() {
-      this.dialogVisible = true; //将对话框显示状态设置为true，表示弹出添加时间段的对话框，把操作标记为添加（非编辑）状态
-      this.isEdit = false;
-      this.flashSession = Object.assign({}, defaultFlashSession); //同时将当前秒杀时间段的数据对象重置为默认值，准备让用户输入新的时间段信息进行添加操作
     },
-    // 处理状态改变的方法，当用户在页面上操作（比如通过开关切换时间段的启用/禁用状态）改变了某个时间段的状态时触发。
+    created() {
-    handleStatusChange(index, row) {
+      this.getList();
-      this.$confirm('是否要修改该状态?', '提示', { //首先弹出确认框询问用户是否要修改该状态
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        updateStatus(row.id, {status: row.status}).then(response => {
-          this.$message({
-            type: 'success',
-            message: '修改成功!' //确认修改后调用更新状态的接口函数，并根据接口返回结果显示相应的提示信息（成功则提示修改成功）
-          });
-        });
-      }).catch(() => { //如果用户取消修改，则显示取消修改的提示信息
-        this.$message({
-          type: 'info',
-          message: '取消修改'
-        });
-        this.getList(); //并重新调用获取列表数据的方法刷新页面数据展示
-      });
     },
-    // 处理编辑操作的方法，当用户点击编辑某个时间段的按钮时触发.
+    filters:{
-    handleUpdate(index, row) {
+      formatTime(time) {
-      this.dialogVisible = true; //将对话框显示状态设置为true
+        if (time == null || time === '') {
-      this.isEdit = true; //表示弹出编辑时间段的对话框，把操作标记为编辑状态，然后将当前秒杀时间段的数据对象赋值为传入的要编辑的行数据（即当前点击编辑的那个时间段的数据）
+          return 'N/A';
-      this.flashSession = Object.assign({}, row);
+        }
-      this.flashSession.startTime = new Date(row.startTime); //同时将开始时间和结束时间转换为Date对象（可能是为了后续更方便地进行时间相关的处理或验证等操作），以便在对话框中展示并修改相应的数据
+        let date = new Date(time);
-      this.flashSession.endTime = new Date(row.endTime);
+        return formatDate(date, 'hh:mm:ss')
+      }
     },
-    // 处理删除操作的方法，当用户点击删除某个时间段的按钮时触发.
+    methods: {
-    handleDelete(index, row) {
+      handleAdd() {
-      this.$confirm('是否要删除该时间段?', '提示', { //弹出确认框询问用户是否要删除该时间段
+        this.dialogVisible = true;
-        confirmButtonText: '确定',
+        this.isEdit = false;
-        cancelButtonText: '取消',
+        this.flashSession = Object.assign({},defaultFlashSession);
-        type: 'warning'
+      },
-      }).then(() => { //确认删除后调用删除时间段的接口函数
+      handleStatusChange(index,row){
-        deleteSession(row.id).then(response => {
+        this.$confirm('是否要修改该状态?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          updateStatus(row.id, {status: row.status}).then(response => {
+            this.$message({
+              type: 'success',
+              message: '修改成功!'
+            });
+          });
+        }).catch(() => {
           this.$message({
-            type: 'success',
+            type: 'info',
-            message: '删除成功!' //成功删除后显示提示信息告知用户删除成功
+            message: '取消修改'
           });
-          this.getList(); //并重新调用获取列表数据的方法刷新页面，使页面展示的数据列表更新为最新状态（已删除相应时间段后的列表）
+          this.getList();
         });
-      });
+      },
-    },
+      handleUpdate(index,row){
-    // 处理对话框确认操作的方法，当用户在添加或编辑时间段的对话框中点击确定按钮时触发.
+        this.dialogVisible = true;
-    handleDialogConfirm() {
+        this.isEdit = true;
-      this.$confirm('是否要确认?', '提示', { //首先弹出确认框再次询问用户是否要确认当前操作（添加或编辑），确认后根据当前是编辑还是添加状态
+        this.flashSession = Object.assign({},row);
-        confirmButtonText: '确定',
+        this.flashSession.startTime=new Date(row.startTime);
-        cancelButtonText: '取消',
+        this.flashSession.endTime=new Date(row.endTime);
-        type: 'warning'
+      },
-      }).then(() => { //分别调用对应的接口函数（更新或创建）来与后端交互完成相应操作
+      handleDelete(index,row){
-        if (this.isEdit) {
+        this.$confirm('是否要删除该时间段?', '提示', {
-          updateSession(this.flashSession.id, this.flashSession).then(response => {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteSession(row.id).then(response => {
             this.$message({
-              message: '修改成功！',
+              type: 'success',
-              type: 'success'
+              message: '删除成功!'
             });
-            this.dialogVisible = false;
             this.getList();
-          })
+          });
-        } else {
+        });
-          createSession(this.flashSession).then(response => {
+      },
-            this.$message({
+      handleDialogConfirm() {
-              message: '添加成功！', //操作成功后显示相应的提示信息告知用户操作成功
+        this.$confirm('是否要确认?', '提示', {
-              type: 'success'
+          confirmButtonText: '确定',
-            });
+          cancelButtonText: '取消',
-            this.dialogVisible = false;
+          type: 'warning'
-            this.getList(); //关闭对话框并重新调用获取列表数据的方法刷新页面展示，以反映最新的数据变化情况
+        }).then(() => {
-          })
+          if (this.isEdit) {
-        }
+            updateSession(this.flashSession.id,this.flashSession).then(response => {
-      })
+              this.$message({
-    },
+                message: '修改成功！',
-    // 获取列表数据的方法，用于向服务器请求并获取秒杀时间段的列表数据。
+                type: 'success'
-    getList() {
+              });
-      this.listLoading = true; //首先将列表数据加载状态设置为true，表示开始获取数据，此时页面上可以根据这个状态显示加载动画等提示信息
+              this.dialogVisible =false;
-      fetchList({}).then(response => { //然后调用导入的fetchList函数（不传参数，可能是获取全部时间段数据）向服务器发起请求
+              this.getList();
-        this.listLoading = false; //并将加载状态设置为false，表示数据获取完成，停止页面上的加载动画等相关显示
+            })
-        this.list = response.data; //请求成功后将获取到的响应数据中的列表数据部分赋值给组件的list属性
+          } else {
-      });
+            createSession(this.flashSession).then(response => {
+              this.$message({
+                message: '添加成功！',
+                type: 'success'
+              });
+              this.dialogVisible =false;
+              this.getList();
+            })
+          }
+        })
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList({}).then(response => {
+          this.listLoading = false;
+          this.list = response.data;
+        });
+      }
     }
   }
-}
 </script>
 <style scoped>
-<!-- “scoped”属性表示当前这个style标签内定义的样式作用范围仅限于当前组件内部，避免样式影响到其他组件中同名的类或元素，起到样式隔离的作用，使得样式管理更加清晰和模块化 -->
+  .operate-container {
-.operate-container {
+    margin-top: 0;
-<!-- 这是一个CSS选择器，用于选中页面中所有应用了“operate-container”类名的元素，接下来在花括号内定义的样式规则就会应用到这些被选中的元素上 -->
+  }
-<!-- “margin-top”是CSS的一个属性，用于设置元素的上外边距，也就是该元素距离其上方相邻元素的间隔距离。这里将其值设置为“0”，意味着应用了“operate-container”类名的元素，其上外边距为0像素，能精准控制这类元素在页面垂直方向上的布局位置，使其更贴合设计需求 -->
-margin-top: 0;
-}
 </style>
 
 

src/views/sms/hot/index.vue

@@ -1,14 +1,9 @@
-<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"
@@ -16,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 重置按钮，设置了样式为右浮动、右外边距为15px、点击时触发handleResetSearch方法、按钮大小为小 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -25,18 +19,12 @@
         </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"
@@ -47,34 +35,24 @@
         </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
@@ -85,15 +63,12 @@
             </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"
@@ -108,13 +83,10 @@
         </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"
@@ -122,7 +94,6 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <!-- 确定按钮，设置了左外边距为20px、样式类、点击时触发handleBatchOperate方法、类型为主要按钮、大小为小 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -132,9 +103,7 @@
         确定
       </el-button>
     </div>
-    <!-- 分页容器 -->
     <div class="pagination-container">
-      <!-- el-pagination分页组件，设置了背景色、页面尺寸改变时触发handleSizeChange方法、当前页改变时触发handleCurrentChange方法、布局样式、绑定了当前页、每页显示数量、可选的每页显示数量列表以及总记录数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -146,35 +115,27 @@
         :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"
@@ -188,331 +149,282 @@
       </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';
-import {fetchList, updateRecommendStatus, deleteHotProduct, createHotProduct, updateHotProductSort} from '@/api/hotProduct';
+  import {fetchList as fetchProductList} from '@/api/product';
-// 从'@/api/product'模块中导入fetchList函数，并将其重命名为fetchProductList，可能用于获取产品列表相关操作
-import {fetchList as fetchProductList} from '@/api/product';
 
-// 定义默认的列表查询参数对象，包含当前页码、每页数量、商品名称、推荐状态等初始值
+  const defaultListQuery = {
-const defaultListQuery = {
+    pageNum: 1,
-  pageNum: 1,
+    pageSize: 5,
-  pageSize: 5,
+    productName: null,
-  productName: null,
+    recommendStatus: null
-  recommendStatus: null
+  };
-};
+  const defaultRecommendOptions = [
-// 定义默认的推荐状态选项数组，每个选项包含显示的标签和对应的值，用于下拉选择等场景
+    {
-const defaultRecommendOptions = [
+      label: '未推荐',
-  {
+      value: 0
-    label: '未推荐',
+    },
-    value: 0
+    {
-  },
+      label: '推荐中',
-  {
+      value: 1
-    label: '推荐中',
+    }
-    value: 1
+  ];
-  }
+  export default {
-];
+    name: 'hotProductList',
-
+    data() {
-// 导出一个Vue组件配置对象，定义了组件的相关属性、方法等
+      return {
-export default {
+        listQuery: Object.assign({}, defaultListQuery),
-  // 组件的名称
+        recommendOptions: Object.assign({}, defaultRecommendOptions),
-  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: "设为推荐",
-          value: 0
-        },
-        {
-          label: "取消推荐",
-          value: 1
-        },
-        {
-          label: "删除",
-          value: 2
-        }
-      ],
-      // 存储当前选择的批量操作类型，初始为null，根据用户在下拉框的选择进行赋值
-      operateType: null,
-      // 选择商品对话框的显示状态，false表示隐藏，true表示显示，用于控制对话框的显示隐藏
-      selectDialogVisible: false,
-      // 选择商品对话框相关的数据对象，包含列表数据、总记录数、多选记录以及列表查询参数等
-      dialogData: {
         list: null,
         total: null,
+        listLoading: false,
         multipleSelection: [],
-        listQuery: {
+        operates: [
-          keyword: null,
+          {
-          pageNum: 1,
+            label: "设为推荐",
-          pageSize: 5
+            value: 0
-        }
+          },
-      },
+          {
-      // 设置排序对话框的显示状态，控制其显示隐藏
+            label: "取消推荐",
-      sortDialogVisible: false,
+            value: 1
-      // 设置排序对话框相关的数据对象，包含排序值和对应的记录id等，用于设置排序操作时的数据传递
+          },
-      sortDialogData: {sort: 0, id: null}
+          {
-    }
+            label: "删除",
-  },
+            value: 2
-  // 在组件创建时调用的生命周期钩子函数，这里调用了获取列表数据的方法
+          }
-  created() {
+        ],
-    this.getList();
+        operateType: null,
-  },
+        selectDialogVisible:false,
-  // 定义过滤器，用于格式化推荐状态的值，将数字状态转换为对应的文字描述（例如1转换为“推荐中”）
+        dialogData:{
-  filters: {
+          list: null,
-    formatRecommendStatus(status) {
+          total: null,
-      if (status === 1) {
+          multipleSelection:[],
-        return '推荐中';
+          listQuery:{
-      } else {
+            keyword: null,
-        return '未推荐';
+            pageNum: 1,
+            pageSize: 5
+          }
+        },
+        sortDialogVisible:false,
+        sortDialogData:{sort:0,id:null}
       }
-    }
-  },
-  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();
     },
-    // 处理当前页码变化的方法，更新当前页码后调用获取列表数据的方法获取对应页码的数据
+    created() {
-    handleCurrentChange(val) {
-      this.listQuery.pageNum = val;
       this.getList();
     },
-    // 处理推荐状态开关变化的方法，调用更新推荐状态的方法，传入对应记录的id和新的推荐状态值来更新推荐状态
+    filters:{
-    handleRecommendStatusStatusChange(index, row) {
+      formatRecommendStatus(status){
-      this.updateRecommendStatusStatus(row.id, row.recommendStatus);
+        if(status===1){
-    },
+          return '推荐中';
-    // 处理删除操作的方法，调用删除产品的方法，传入要删除记录的id来执行删除操作
+        }else{
-    handleDelete(index, row) {
+          return '未推荐';
-      this.deleteProduct(row.id);
+        }
-    },
-    // 处理批量操作的方法
-    handleBatchOperate() {
-      if (this.multipleSelection < 1) {
-        this.$message({
-          message: '请选择一条记录',
-          type: 'warning',
-          duration: 1000
-        });
-        return;
-      }
-      let ids = []; //执行相应的操作（设为推荐、取消推荐、删除等）
-      for (let i = 0; i < this.multipleSelection.length; i++) {
-        ids.push(this.multipleSelection[i].id);
-      }
-      if (this.operateType === 0) {
-        //设为推荐
-        this.updateRecommendStatusStatus(ids, 1);
-      } else if (this.operateType === 1) {
-        //取消推荐
-        this.updateRecommendStatusStatus(ids, 0);
-      } else if (this.operateType === 2) {
-        //删除
-        this.deleteProduct(ids);
-      } else {
-        this.$message({ //首先判断是否有选中的记录，如果没有则提示用户选择记录；然后根据选择的批量操作类型
-          message: '请选择批量操作类型',
-          type: 'warning',
-          duration: 1000
-        });
       }
     },
-    // 处理选择商品的方法，将选择商品对话框设置为显示状态，并调用获取对话框列表数据的方法来加载商品数据
+    methods: {
-    handleSelectProduct() {
+      handleResetSearch() {
-      this.selectDialogVisible = true;
+        this.listQuery = Object.assign({}, defaultListQuery);
-      this.getDialogList();
+      },
-    },
+      handleSearchList() {
-    // 处理在选择商品对话框中搜索的方法，调用获取对话框列表数据的方法来根据输入的关键词重新加载商品数据
+        this.listQuery.pageNum = 1;
-    handleSelectSearch() {
+        this.getList();
-      this.getDialogList();
+      },
-    },
+      handleSelectionChange(val){
-    // 处理选择商品对话框中每页显示数量变化的方法，先将对话框列表的当前页码重置为1，更新每页显示数量后调用获取对话框列表数据的方法重新获取数据
+        this.multipleSelection = val;
-    handleDialogSizeChange(val) {
+      },
-      this.dialogData.listQuery.pageNum = 1;
+      handleSizeChange(val) {
-      this.dialogData.listQuery.pageSize = val;
+        this.listQuery.pageNum = 1;
-      this.getDialogList();
+        this.listQuery.pageSize = val;
-    },
+        this.getList();
-    // 处理选择商品对话框中当前页码变化的方法，更新对话框列表的当前页码后调用获取对话框列表数据的方法获取对应页码的数据
+      },
-    handleDialogCurrentChange(val) {
+      handleCurrentChange(val) {
-      this.dialogData.listQuery.pageNum = val;
+        this.listQuery.pageNum = val;
-      this.getDialogList();
+        this.getList();
-    },
+      },
-    // 处理选择商品对话框中行选择变化的方法，将对话框中多选的记录更新为当前选择的行数据
+      handleRecommendStatusStatusChange(index,row){
-    handleDialogSelectionChange(val) {
+        this.updateRecommendStatusStatus(row.id,row.recommendStatus);
-      this.dialogData.multipleSelection = val;
+      },
-    },
+      handleDelete(index,row){
-    // 处理选择商品对话框中确定按钮点击的方法，首先判断是否有选中的记录，如果没有则提示用户选择记录；然后将选中的商品数据整理成特定格式，弹出确认框
+        this.deleteProduct(row.id);
-    handleSelectDialogConfirm() {
+      },
-      if (this.dialogData.multipleSelection < 1) {
+      handleBatchOperate(){
-        this.$message({
+        if (this.multipleSelection < 1) {
-          message: '请选择一条记录',
-          type: 'warning',
-          duration: 1000
-        });
-        return;
-      }
-      let selectProducts = [];
-      for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
-        selectProducts.push({
-          productId: this.dialogData.multipleSelection[i].id,
-          productName: this.dialogData.multipleSelection[i].name
-        });
-      }
-      this.$confirm('使用要进行添加操作?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => { //用户确认后调用创建热门产品的方法来添加选中的商品，添加成功后进行相关的界面更新和提示操作
-        createHotProduct(selectProducts).then(response => {
-          this.selectDialogVisible = false;
-          this.dialogData.multipleSelection = [];
-          this.getList();
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '添加成功!'
+            type: 'warning',
+            duration: 1000
           });
-        });
+          return;
-      });
+        }
-    },
+        let ids = [];
-    // 处理编辑排序的方法，将设置排序对话框设置为显示状态
+        for (let i = 0; i < this.multipleSelection.length; i++) {
-    handleEditSort(index, row) {
+          ids.push(this.multipleSelection[i].id);
-      this.sortDialogVisible = true;
+        }
-      this.sortDialogData.sort = row.sort; //并将当前记录的排序值和id赋值给对话框相关的数据对象，用于在对话框中显示和后续更新操作
+        if (this.operateType === 0) {
-      this.sortDialogData.id = row.id;
+          //设为推荐
-    },
+          this.updateRecommendStatusStatus(ids,1);
-    // 处理更新排序的方法
+        } else if (this.operateType === 1) {
-    handleUpdateSort() { //弹出确认框询问用户是否确认修改排序，用户确认后调用更新热门产品排序的方法，传入相关数据进行排序更新
+          //取消推荐
-      this.$confirm('是否要修改排序?', '提示', {
+          this.updateRecommendStatusStatus(ids,0);
-        confirmButtonText: '确定',
+        } else if(this.operateType===2){
-        cancelButtonText: '取消',
+          //删除
-        type: 'warning'
+          this.deleteProduct(ids);
-      }).then(() => { //更新成功后进行对话框隐藏、重新获取列表数据以及提示操作
+        }else {
-        updateHotProductSort(this.sortDialogData).then(response => {
-          this.sortDialogVisible = false;
-          this.getList();
           this.$message({
-            type: 'success',
+            message: '请选择批量操作类型',
-            message: '删除成功!'
+            type: 'warning',
+            duration: 1000
           });
-        });
+        }
-      })
+      },
-    },
+      handleSelectProduct(){
-    // 获取列表数据的方法，先将列表加载状态设置为正在加载
+        this.selectDialogVisible=true;
-    getList() {
+        this.getDialogList();
-      this.listLoading = true;
+      },
-      fetchList(this.listQuery).then(response => { //然后调用fetchList函数传入列表查询参数获取数据
+      handleSelectSearch(){
-        this.listLoading = false;
+        this.getDialogList();
-        this.list = response.data.list; //获取成功后更新列表数据、总记录数，并将列表加载状态设置为加载完成
+      },
-        this.total = response.data.total;
+      handleDialogSizeChange(val) {
-      })
+        this.dialogData.listQuery.pageNum = 1;
-    },
+        this.dialogData.listQuery.pageSize = val;
-    // 更新推荐状态的方法
+        this.getDialogList();
-    updateRecommendStatusStatus(ids, status) {
+      },
-      this.$confirm('是否要修改推荐状态?', '提示', { //先弹出确认框询问用户是否确认修改推荐状态
+      handleDialogCurrentChange(val) {
-        confirmButtonText: '确定',
+        this.dialogData.listQuery.pageNum = val;
-        cancelButtonText: '取消',
+        this.getDialogList();
-        type: 'warning'
+      },
-      }).then(() => {
+      handleDialogSelectionChange(val){
-        let params = new URLSearchParams(); //用户确认后将传入的记录id和新的推荐状态值整理成URLSearchParams格式
+        this.dialogData.multipleSelection = val;
-        params.append("ids", ids);
+      },
-        params.append("recommendStatus", status);
+      handleSelectDialogConfirm(){
-        updateRecommendStatus(params).then(response => { //调用updateRecommendStatus函数进行推荐状态更新
+        if (this.dialogData.multipleSelection < 1) {
-          this.getList();
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '修改成功!' //更新成功后重新获取列表数据并提示操作成功；
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        let selectProducts = [];
+        for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
+          selectProducts.push({
+            productId:this.dialogData.multipleSelection[i].id,
+            productName:this.dialogData.multipleSelection[i].name
+          });
+        }
+        this.$confirm('使用要进行添加操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          createHotProduct(selectProducts).then(response=>{
+            this.selectDialogVisible=false;
+            this.dialogData.multipleSelection=[];
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            });
           });
         });
-      }).catch(() => {
+      },
-        this.$message({
+      handleEditSort(index,row){
-          type: 'success',
+        this.sortDialogVisible=true;
-          message: '已取消操作!' //如果用户取消操作，也会重新获取列表数据并提示已取消操作
+        this.sortDialogData.sort=row.sort;
-        });
+        this.sortDialogData.id=row.id;
-        this.getList();
+      },
-      });
+      handleUpdateSort(){
-    },
+        this.$confirm('是否要修改排序?', '提示', {
-    // 删除产品的方法
+          confirmButtonText: '确定',
-    deleteProduct(ids) {
+          cancelButtonText: '取消',
-      this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框询问用户是否确认删除
+          type: 'warning'
-        confirmButtonText: '确定',
+        }).then(() => {
-        cancelButtonText: '取消',
+          updateHotProductSort(this.sortDialogData).then(response=>{
-        type: 'warning'
+            this.sortDialogVisible=false;
-      }).then(() => {
+            this.getList();
-        let params = new URLSearchParams(); //用户确认后将传入的记录id整理成URLSearchParams格式
+            this.$message({
-        params.append("ids", ids);
+              type: 'success',
-        deleteHotProduct(params).then(response => { //调用deleteHotProduct函数进行产品删除操作
+              message: '删除成功!'
-          this.getList();
+            });
+          });
+        })
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList(this.listQuery).then(response => {
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        })
+      },
+      updateRecommendStatusStatus(ids,status){
+        this.$confirm('是否要修改推荐状态?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          params.append("recommendStatus",status);
+          updateRecommendStatus(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '修改成功!'
+            });
+          });
+        }).catch(() => {
           this.$message({
             type: 'success',
-            message: '删除成功!' //删除成功后重新获取列表数据并提示删除成功
+            message: '已取消操作!'
           });
+          this.getList();
         });
-      })
+      },
-    },
+      deleteProduct(ids){
-    // 获取选择商品对话框列表数据的方法
+        this.$confirm('是否要删除该推荐?', '提示', {
-    getDialogList() {
+          confirmButtonText: '确定',
-      fetchProductList(this.dialogData.listQuery).then(response => { //调用fetchProductList函数传入对话框的列表查询参数获取商品数据
+          cancelButtonText: '取消',
-        this.dialogData.list = response.data.list; //获取成功后更新对话框列表数据和总记录数
+          type: 'warning'
-        this.dialogData.total = response.data.total;
+        }).then(() => {
-      })
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          deleteHotProduct(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          });
+        })
+      },
+      getDialogList(){
+        fetchProductList(this.dialogData.listQuery).then(response=>{
+          this.dialogData.list=response.data.list;
+          this.dialogData.total=response.data.total;
+        })
+      }
     }
   }
-}
 </script>
 <style></style>

src/views/sms/new/index.vue

@@ -1,14 +1,9 @@
-<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"
@@ -16,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- 重置按钮，点击触发handleResetSearch方法，按钮样式为小型，与查询搜索按钮有一定间隔 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -25,18 +19,12 @@
         </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">
-              <!-- 循环生成下拉选项，每个选项的key、label、value根据recommendOptions中的数据来设置 -->
               <el-option v-for="item in recommendOptions"
                          :key="item.value"
                          :label="item.label"
@@ -47,37 +35,26 @@
         </el-form>
       </div>
     </el-card>
-    <!-- 操作区域的卡片 -->
     <el-card class="operate-container" shadow="never">
-      <!-- 图标 -->
       <i class="el-icon-tickets"></i>
-      <!-- 显示“数据列表”文字 -->
       <span>数据列表</span>
-      <!-- 选择商品按钮，点击触发handleSelectProduct方法，按钮尺寸为迷你型 -->
       <el-button size="mini" class="btn-add" @click="handleSelectProduct()">选择商品</el-button>
     </el-card>
-    <!-- 表格容器 -->
     <div class="table-container">
-      <!-- el-table组件，绑定数据为list，设置宽度为100%，监听选择变化事件，根据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，内容居中，包含一个开关组件 -->
         <el-table-column label="是否推荐" width="200" align="center">
           <template slot-scope="scope">
-            <!-- 开关组件，监听状态改变事件，设置了激活和未激活的值，双向绑定对应行的recommendStatus数据 -->
             <el-switch
               @change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
               :active-value="1"
@@ -86,23 +63,18 @@
             </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，内容居中，包含设置排序和删除两个按钮 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <!-- 设置排序按钮，点击触发handleEditSort方法，按钮尺寸为迷你型，文本样式 -->
             <el-button size="mini"
                        type="text"
                        @click="handleEditSort(scope.$index, scope.row)">设置排序
             </el-button>
-            <!-- 删除按钮，点击触发handleDelete方法，按钮尺寸为迷你型，文本样式 -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -111,13 +83,10 @@
         </el-table-column>
       </el-table>
     </div>
-    <!-- 批量操作容器 -->
     <div class="batch-operate-container">
-      <!-- 下拉选择框，用于选择批量操作类型，双向绑定operateType，设置了占位提示文字 -->
       <el-select
         size="small"
         v-model="operateType" placeholder="批量操作">
-        <!-- 循环生成下拉选项，每个选项的key、label、value根据operates中的数据来设置 -->
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -125,7 +94,6 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <!-- 确定按钮，点击触发handleBatchOperate方法，按钮样式为小型、主色调，与下拉选择框有一定间隔 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -135,9 +103,7 @@
         确定
       </el-button>
     </div>
-    <!-- 分页容器 -->
     <div class="pagination-container">
-      <!-- el-pagination分页组件，设置了背景色，监听页面尺寸改变和当前页改变事件，配置了布局、页面尺寸、可选页面尺寸列表、当前页、总数据量等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -149,36 +115,27 @@
         :total="total">
       </el-pagination>
     </div>
-    <!-- 选择商品的对话框 -->
     <el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
-      <!-- 输入框，双向绑定dialogData.listQuery.keyword，设置了宽度、样式、占位提示文字，包含一个搜索按钮 -->
       <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组件，用于对话框内展示数据，绑定数据为dialogData.list，监听选择变化事件，有边框 -->
       <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数据，格式化展示格式 -->
         <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分页组件，设置了背景色，监听对话框内页面尺寸改变和当前页改变事件，配置了布局、页面尺寸、可选页面尺寸列表、当前页、总数据量等属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -192,334 +149,282 @@
       </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%">
-      <!-- el-form表单组件，绑定数据模型为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/newProduct'模块中导入多个函数，用于获取列表、更新推荐状态、删除新产品、创建新产品、更新新产品排序等操作
+  import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
-import {fetchList,updateRecommendStatus,deleteNewProduct,createNewProduct,updateNewProductSort} from '@/api/newProduct';
+  import {fetchList as fetchProductList} from '@/api/product';
-// 从'@/api/product'模块中导入名为fetchList的函数，并将其重命名为fetchProductList，用于获取产品列表相关操作
-import {fetchList as fetchProductList} from '@/api/product';
 
-// 定义默认的列表查询参数对象，包含当前页码、每页数量、商品名称、推荐状态等初始值
+  const defaultListQuery = {
-const defaultListQuery = {
+    pageNum: 1,
-  pageNum: 1,
+    pageSize: 5,
-  pageSize: 5,
+    productName: null,
-  productName: null,
+    recommendStatus: null
-  recommendStatus: null
+  };
-};
+  const defaultRecommendOptions = [
-// 定义默认的推荐状态选项数组，每个选项包含显示的标签（如'未推荐'）和对应的值（如0）
+    {
-const defaultRecommendOptions = [
+      label: '未推荐',
-  {
+      value: 0
-    label: '未推荐',
+    },
-    value: 0
+    {
-  },
+      label: '推荐中',
-  {
+      value: 1
-    label: '推荐中',
+    }
-    value: 1
+  ];
-  }
+  export default {
-];
+    name: 'newProductList',
-
+    data() {
-export default {
+      return {
-  name: 'newProductList',
+        listQuery: Object.assign({}, defaultListQuery),
-  data() {
+        recommendOptions: Object.assign({}, defaultRecommendOptions),
-    return {
-      // 列表查询参数对象，初始化为defaultListQuery的副本，后续会根据用户操作动态变化
-      listQuery: Object.assign({}, defaultListQuery),
-      // 推荐状态选项数组，初始化为defaultRecommendOptions的副本，用于下拉选择等展示
-      recommendOptions: Object.assign({}, defaultRecommendOptions),
-      // 用于存储获取到的列表数据，初始为null，会在获取数据后更新
-      list: null,
-      // 用于存储列表数据的总条数，初始为null，会在获取数据后更新
-      total: null,
-      // 表示列表数据是否正在加载的布尔值，用于控制加载动画显示等，初始为false
-      listLoading: false,
-      // 存储用户多选的记录数据，初始为空数组，会根据用户选择操作更新
-      multipleSelection: [],
-      // 定义可进行的批量操作选项数组，每个选项包含显示的标签（如'设为推荐'）和对应的值（如0）
-      operates: [
-        {
-          label: "设为推荐",
-          value: 0
-        },
-        {
-          label: "取消推荐",
-          value: 1
-        },
-        {
-          label: "删除",
-          value: 2
-        }
-      ],
-      // 用于存储当前选择的批量操作类型，初始为null，用户选择后更新
-      operateType: null,
-      // 控制选择商品对话框是否可见的布尔值，初始为false，点击相关按钮等操作可改变其值
-      selectDialogVisible:false,
-      dialogData:{
-        // 对话框中展示的列表数据，初始为null，获取后更新
         list: null,
-        // 对话框中列表数据的总条数，初始为null，获取后更新
         total: null,
-        // 对话框内用户多选的记录数据，初始为空数组，会根据用户选择操作更新
+        listLoading: false,
-        multipleSelection:[],
+        multipleSelection: [],
-        listQuery:{
+        operates: [
-          // 对话框内用于搜索的关键字，初始为null，用户输入后更新
+          {
-          keyword: null,
+            label: "设为推荐",
-          // 对话框内列表的当前页码，初始为1
+            value: 0
-          pageNum: 1,
+          },
-          // 对话框内列表每页的数量，初始为5
+          {
-          pageSize: 5
+            label: "取消推荐",
-        }
+            value: 1
-      },
+          },
-      // 控制设置排序对话框是否可见的布尔值，初始为false，点击相关按钮等操作可改变其值
+          {
-      sortDialogVisible:false,
+            label: "删除",
-      // 用于设置排序对话框的数据对象，包含排序值和对应的产品id等信息，初始值设置好相关属性
+            value: 2
-      sortDialogData:{sort:0,id:null}
+          }
-    }
+        ],
-  },
+        operateType: null,
-  created() {
+        selectDialogVisible:false,
-    // 在组件创建时调用getList方法，用于获取初始的列表数据
+        dialogData:{
-    this.getList();
+          list: null,
-  },
+          total: null,
-  filters:{
+          multipleSelection:[],
-    // 定义名为formatRecommendStatus的过滤器函数
+          listQuery:{
-    formatRecommendStatus(status){
+            keyword: null,
-      if(status===1){ //根据传入的状态值（1或0）返回对应的文字描述（'推荐中'或'未推荐'）
+            pageNum: 1,
-        return '推荐中';
+            pageSize: 5
-      }else{
+          }
-        return '未推荐';
+        },
+        sortDialogVisible:false,
+        sortDialogData:{sort:0,id:null}
       }
-    }
-  },
-  methods: {
-    // 处理重置搜索的方法，将列表查询参数重置为默认值（即复制defaultListQuery的内容）
-    handleResetSearch() {
-      this.listQuery = Object.assign({}, defaultListQuery);
-    },
-    // 处理查询搜索的方法，先将列表查询参数的当前页码重置为1，然后调用getList方法获取最新列表数据
-    handleSearchList() {
-      this.listQuery.pageNum = 1;
-      this.getList();
-    },
-    // 处理表格行选择变化的方法，将用户选择的行数据更新到multipleSelection数组中
-    handleSelectionChange(val){
-      this.multipleSelection = val;
     },
-    // 处理页面尺寸改变的方法，当用户切换每页显示数量时，先将当前页码重置为1，再更新列表查询参数中的每页数量，并调用getList方法获取新的数据
+    created() {
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = val;
       this.getList();
     },
-    // 处理当前页码改变的方法，当用户切换页码时，更新列表查询参数中的当前页码，并调用getList方法获取对应页码的数据
+    filters:{
-    handleCurrentChange(val) {
+      formatRecommendStatus(status){
-      this.listQuery.pageNum = val;
+        if(status===1){
-      this.getList();
+          return '推荐中';
-    },
+        }else{
-    // 处理推荐状态改变的方法，调用updateRecommendStatusStatus方法，传入对应行的id和推荐状态值，来更新推荐状态
+          return '未推荐';
-    handleRecommendStatusStatusChange(index,row){
+        }
-      this.updateRecommendStatusStatus(row.id,row.recommendStatus);
-    },
-    // 处理删除操作的方法，调用deleteProduct方法，传入要删除的产品id，执行删除操作
-    handleDelete(index,row){
-      this.deleteProduct(row.id);
-    },
-    // 处理批量操作的方法，首先判断用户是否至少选择了一条记录，如果没有则弹出提示并返回
-    handleBatchOperate(){
-      if (this.multipleSelection < 1) {
-        this.$message({
-          message: '请选择一条记录',
-          type: 'warning',
-          duration: 1000
-        });
-        return;
-      }
-      let ids = []; //然后根据用户选择的批量操作类型（设为推荐、取消推荐、删除等）执行相应的操作逻辑，如调用对应的更新或删除方法，并传递相应的参数
-      for (let i = 0; i < this.multipleSelection.length; i++) {
-        ids.push(this.multipleSelection[i].id);
-      }
-      if (this.operateType === 0) {
-        //设为推荐
-        this.updateRecommendStatusStatus(ids,1);
-      } else if (this.operateType === 1) {
-        //取消推荐
-        this.updateRecommendStatusStatus(ids,0);
-      } else if(this.operateType===2){
-        //删除
-        this.deleteProduct(ids);
-      }else {
-        this.$message({
-          message: '请选择批量操作类型',
-          type: 'warning',
-          duration: 1000
-        });
       }
     },
-    // 处理选择商品操作的方法，将选择商品对话框设置为可见，并调用getDialogList方法获取对话框内要展示的列表数据
+    methods: {
-    handleSelectProduct(){
+      handleResetSearch() {
-      this.selectDialogVisible=true;
+        this.listQuery = Object.assign({}, defaultListQuery);
-      this.getDialogList();
+      },
-    },
+      handleSearchList() {
-    // 处理在选择商品对话框内进行搜索的方法，调用getDialogList方法获取符合搜索条件的列表数据
+        this.listQuery.pageNum = 1;
-    handleSelectSearch(){
+        this.getList();
-      this.getDialogList();
+      },
-    },
+      handleSelectionChange(val){
-    // 处理选择商品对话框内页面尺寸改变的方法，当用户切换每页显示数量时，先将对话框内列表的当前页码重置为1，再更新对话框列表查询参数中的每页数量，并调用getDialogList方法获取新的数据
+        this.multipleSelection = val;
-    handleDialogSizeChange(val) {
+      },
-      this.dialogData.listQuery.pageNum = 1;
+      handleSizeChange(val) {
-      this.dialogData.listQuery.pageSize = val;
+        this.listQuery.pageNum = 1;
-      this.getDialogList();
+        this.listQuery.pageSize = val;
-    },
+        this.getList();
-    // 处理选择商品对话框内当前页码改变的方法，当用户切换页码时，更新对话框列表查询参数中的当前页码，并调用getDialogList方法获取对应页码的数据
+      },
-    handleDialogCurrentChange(val) {
+      handleCurrentChange(val) {
-      this.dialogData.listQuery.pageNum = val;
+        this.listQuery.pageNum = val;
-      this.getDialogList();
+        this.getList();
-    },
+      },
-    // 处理选择商品对话框内行选择变化的方法，将用户在对话框内选择的行数据更新到dialogData.multipleSelection数组中
+      handleRecommendStatusStatusChange(index,row){
-    handleDialogSelectionChange(val){
+        this.updateRecommendStatusStatus(row.id,row.recommendStatus);
-      this.dialogData.multipleSelection = val;
+      },
-    },
+      handleDelete(index,row){
-    // 处理在选择商品对话框中点击确定按钮的方法，首先判断用户是否至少选择了一条记录，如果没有则弹出提示并返回；
+        this.deleteProduct(row.id);
-    handleSelectDialogConfirm(){
+      },
-      if (this.dialogData.multipleSelection < 1) {
+      handleBatchOperate(){
-        this.$message({
+        if (this.multipleSelection < 1) {
-          message: '请选择一条记录',
-          type: 'warning',
-          duration: 1000
-        });
-        return;
-      }
-      let selectProducts = []; //然后将用户选择的商品信息整理成数组格式，弹出确认框询问是否添加
-      for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
-        selectProducts.push({
-          productId:this.dialogData.multipleSelection[i].id,
-          productName:this.dialogData.multipleSelection[i].name
-        });
-      }
-      this.$confirm('使用要进行添加操作?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        createNewProduct(selectProducts).then(response=>{ //用户确认后调用createNewProduct方法创建新产品，创建成功后关闭对话框、清空选择记录
-          this.selectDialogVisible=false;
-          this.dialogData.multipleSelection=[];
-          this.getList(); //并重新获取列表数据，同时弹出成功提示
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '添加成功!'
+            type: 'warning',
+            duration: 1000
           });
-        });
+          return;
-      });
+        }
-    },
+        let ids = [];
-    // 处理编辑排序操作的方法，将设置排序对话框设置为可见
+        for (let i = 0; i < this.multipleSelection.length; i++) {
-    handleEditSort(index,row){
+          ids.push(this.multipleSelection[i].id);
-      this.sortDialogVisible=true;
+        }
-      this.sortDialogData.sort=row.sort;
+        if (this.operateType === 0) {
-      this.sortDialogData.id=row.id; //并将对应行的当前排序值和id赋值给对话框的数据对象，方便后续修改操作
+          //设为推荐
-    },
+          this.updateRecommendStatusStatus(ids,1);
-    // 处理更新排序的方法
+        } else if (this.operateType === 1) {
-    handleUpdateSort(){
+          //取消推荐
-      this.$confirm('是否要修改排序?', '提示', { //弹出确认框询问是否修改排序
+          this.updateRecommendStatusStatus(ids,0);
-        confirmButtonText: '确定',
+        } else if(this.operateType===2){
-        cancelButtonText: '取消',
+          //删除
-        type: 'warning'
+          this.deleteProduct(ids);
-      }).then(() => {
+        }else {
-        updateNewProductSort(this.sortDialogData).then(response=>{ //用户确认后调用updateNewProductSort方法传入排序对话框的数据对象进行排序更新，更新成功后关闭对话框
-          this.sortDialogVisible=false;
-          this.getList(); //重新获取列表数据，同时弹出成功提示
           this.$message({
-            type: 'success',
+            message: '请选择批量操作类型',
-            message: '删除成功!'
+            type: 'warning',
+            duration: 1000
           });
-        });
+        }
-      })
+      },
-    },
+      handleSelectProduct(){
-    // 获取列表数据的方法
+        this.selectDialogVisible=true;
-    getList() {
+        this.getDialogList();
-      this.listLoading = true; //首先将列表加载状态设置为true，表示正在加载
+      },
-      fetchList(this.listQuery).then(response => { //然后调用fetchList方法传入列表查询参数获取数据
+      handleSelectSearch(){
-        this.listLoading = false; //将列表加载状态设置为false
+        this.getDialogList();
-        this.list = response.data.list; //获取成功后更新列表数据、总条数
+      },
-        this.total = response.data.total;
+      handleDialogSizeChange(val) {
-      })
+        this.dialogData.listQuery.pageNum = 1;
-    },
+        this.dialogData.listQuery.pageSize = val;
-    // 更新推荐状态的方法
+        this.getDialogList();
-    updateRecommendStatusStatus(ids,status){
+      },
-      this.$confirm('是否要修改推荐状态?', '提示', { //弹出确认框询问是否修改推荐状态
+      handleDialogCurrentChange(val) {
-        confirmButtonText: '确定',
+        this.dialogData.listQuery.pageNum = val;
-        cancelButtonText: '取消',
+        this.getDialogList();
-        type: 'warning'
+      },
-      }).then(() => {
+      handleDialogSelectionChange(val){
-        let params=new URLSearchParams(); //用户确认后将传入的产品id（或多个id组成的数组）和推荐状态值封装成URLSearchParams格式
+        this.dialogData.multipleSelection = val;
-        params.append("ids",ids);
+      },
-        params.append("recommendStatus",status);
+      handleSelectDialogConfirm(){
-        updateRecommendStatus(params).then(response=>{ //调用updateRecommendStatus方法进行状态更新
+        if (this.dialogData.multipleSelection < 1) {
-          this.getList(); //更新成功后重新获取列表数据，并弹出成功提示；
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '修改成功!'
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        let selectProducts = [];
+        for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
+          selectProducts.push({
+            productId:this.dialogData.multipleSelection[i].id,
+            productName:this.dialogData.multipleSelection[i].name
+          });
+        }
+        this.$confirm('使用要进行添加操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          createNewProduct(selectProducts).then(response=>{
+            this.selectDialogVisible=false;
+            this.dialogData.multipleSelection=[];
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            });
           });
         });
-      }).catch(() => {
+      },
-        this.$message({ //如果用户取消操作，也会重新获取列表数据并弹出相应提示
+      handleEditSort(index,row){
-          type: 'success',
+        this.sortDialogVisible=true;
-          message: '已取消操作!'
+        this.sortDialogData.sort=row.sort;
-        });
+        this.sortDialogData.id=row.id;
-        this.getList();
+      },
-      });
+      handleUpdateSort(){
-    },
+        this.$confirm('是否要修改排序?', '提示', {
-    // 删除产品的方法
+          confirmButtonText: '确定',
-    deleteProduct(ids){
+          cancelButtonText: '取消',
-      this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框询问是否删除
+          type: 'warning'
-        confirmButtonText: '确定',
+        }).then(() => {
-        cancelButtonText: '取消',
+          updateNewProductSort(this.sortDialogData).then(response=>{
-        type: 'warning'
+            this.sortDialogVisible=false;
-      }).then(() => {
+            this.getList();
-        let params=new URLSearchParams(); //用户确认后将传入的产品id（或多个id组成的数组）封装成URLSearchParams格式
+            this.$message({
-        params.append("ids",ids);
+              type: 'success',
-        deleteNewProduct(params).then(response=>{ //调用deleteNewProduct方法执行删除操作
+              message: '删除成功!'
-          this.getList(); //删除成功后重新获取列表数据，并弹出成功提示
+            });
+          });
+        })
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList(this.listQuery).then(response => {
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        })
+      },
+      updateRecommendStatusStatus(ids,status){
+        this.$confirm('是否要修改推荐状态?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          params.append("recommendStatus",status);
+          updateRecommendStatus(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '修改成功!'
+            });
+          });
+        }).catch(() => {
           this.$message({
             type: 'success',
-            message: '删除成功!'
+            message: '已取消操作!'
           });
+          this.getList();
         });
-      })
+      },
-    },
+      deleteProduct(ids){
-    // 获取选择商品对话框内列表数据的方法
+        this.$confirm('是否要删除该推荐?', '提示', {
-    getDialogList(){
+          confirmButtonText: '确定',
-      fetchProductList(this.dialogData.listQuery).then(response=>{ //调用fetchProductList方法传入对话框的列表查询参数获取数据
+          cancelButtonText: '取消',
-        this.dialogData.list=response.data.list; //获取成功后更新对话框内的列表数据和总条数
+          type: 'warning'
-        this.dialogData.total=response.data.total;
+        }).then(() => {
-      })
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          deleteNewProduct(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          });
+        })
+      },
+      getDialogList(){
+        fetchProductList(this.dialogData.listQuery).then(response=>{
+          this.dialogData.list=response.data.list;
+          this.dialogData.total=response.data.total;
+        })
+      }
     }
   }
-}
 </script>
 <style></style>

src/views/sms/subject/index.vue

@@ -1,14 +1,9 @@
-<template>
+<template> 
-  <!-- 整个页面的容器，用于包裹内部的各个组件 -->
   <div class="app-container">
-    <!-- el-card组件，作为筛选搜索区域的容器，设置阴影效果为"never"，即无阴影 -->
     <el-card class="filter-container" shadow="never">
       <div>
-        <!-- 使用el-icon-search图标，用于表示搜索相关的视觉元素 -->
         <i class="el-icon-search"></i>
-        <!-- 显示"筛选搜索"的文字提示 -->
         <span>筛选搜索</span>
-        <!-- el-button按钮组件，样式设置为右浮动，按钮类型为"primary"（主要按钮样式，通常为主题色等突出显示），点击时调用handleSearchList方法，按钮大小为"small" -->
         <el-button
           style="float:right"
           type="primary"
@@ -16,7 +11,6 @@
           size="small">
           查询搜索
         </el-button>
-        <!-- el-button按钮组件，样式设置为右浮动且距离右边距15px，点击时调用handleResetSearch方法，按钮大小为"small"，用于重置相关操作 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -25,18 +19,12 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
-        <!-- el-form表单组件，设置为行内表单形式，绑定的数据模型是listQuery，表单尺寸为"small"，标签宽度为140px -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-          <!-- el-form-item表单项目组件，用于输入框的包裹，此处对应的标签文本为"专题名称：" -->
           <el-form-item label="专题名称：">
-            <!-- el-input输入框组件，双向绑定数据到listQuery.subjectName，设置输入框的类名为"input-width"，有相应的占位提示文字 -->
             <el-input v-model="listQuery.subjectName" class="input-width" placeholder="专题名称"></el-input>
           </el-form-item>
-          <!-- el-form-item表单项目组件，用于下拉选择框的包裹，对应的标签文本为"推荐状态：" -->
           <el-form-item label="推荐状态：">
-            <!-- el-select下拉选择框组件，双向绑定数据到listQuery.recommendStatus，有相应的占位提示文字，可清空选择，设置类名为"input-width" -->
             <el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
-              <!-- 通过v-for循环遍历recommendOptions数组，生成el-option下拉选项，每个选项根据item中的属性设置相应的键、显示标签和值 -->
               <el-option v-for="item in recommendOptions"
                          :key="item.value"
                          :label="item.label"
@@ -47,34 +35,24 @@
         </el-form>
       </div>
     </el-card>
-    <!-- el-card组件，作为操作相关区域的容器，设置阴影效果为"never"，即无阴影 -->
     <el-card class="operate-container" shadow="never">
-      <!-- 使用el-icon-tickets图标，用于表示相关操作的视觉元素 -->
       <i class="el-icon-tickets"></i>
-      <!-- 显示"数据列表"的文字提示 -->
       <span>数据列表</span>
-      <!-- el-button按钮组件，按钮尺寸为"mini"，点击时调用handleSelectSubject方法，按钮样式类名为"btn-add"，用于选择专题操作 -->
       <el-button size="mini" class="btn-add" @click="handleSelectSubject()">选择专题</el-button>
     </el-card>
-    <!-- 作为表格显示区域的容器 -->
     <div class="table-container">
-      <!-- el-table表格组件，引用了ref为"newSubjectTable"，绑定的数据为list，设置宽度为100%，监听行选择变化事件，绑定加载状态到listLoading变量，显示表格边框 -->
       <el-table ref="newSubjectTable"
                 :data="list"
                 style="width: 100%;"
                 @selection-change="handleSelectionChange"
                 v-loading="listLoading" border>
-        <!-- el-table-column表格列组件，设置列类型为"selection"（用于行选择的复选框列），宽度为60px，内容居中对齐 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"编号"，宽度为120px，内容居中对齐，通过插槽作用域展示对应行数据中的id属性 -->
         <el-table-column label="编号" width="120" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"专题名称"，内容居中对齐，通过插槽作用域展示对应行数据中的subjectName属性 -->
         <el-table-column label="专题名称" align="center">
           <template slot-scope="scope">{{scope.row.subjectName}}</template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"是否推荐"，宽度为200px，内容居中对齐，内部包含一个el-switch开关组件，用于切换推荐状态，绑定相应的事件和值 -->
         <el-table-column label="是否推荐" width="200" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -85,15 +63,12 @@
             </el-switch>
           </template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"排序"，宽度为160px，内容居中对齐，通过插槽作用域展示对应行数据中的sort属性 -->
         <el-table-column label="排序" width="160" align="center">
           <template slot-scope="scope">{{scope.row.sort}}</template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"状态"，宽度为160px，内容居中对齐，通过过滤器formatRecommendStatus对推荐状态数据进行格式化展示 -->
         <el-table-column label="状态" width="160" align="center">
           <template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"操作"，宽度为180px，内容居中对齐，内部包含两个el-button按钮组件，分别用于设置排序和删除操作，绑定对应的点击事件 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
             <el-button size="mini"
@@ -108,13 +83,10 @@
         </el-table-column>
       </el-table>
     </div>
-    <!-- 作为批量操作区域的容器 -->
     <div class="batch-operate-container">
-      <!-- el-select下拉选择框组件，尺寸为"small"，双向绑定数据到operateType，有相应的占位提示文字 -->
       <el-select
         size="small"
         v-model="operateType" placeholder="批量操作">
-        <!-- 通过v-for循环遍历operates数组，生成el-option下拉选项，每个选项根据item中的属性设置相应的键、显示标签和值 -->
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -122,7 +94,6 @@
           :value="item.value">
         </el-option>
       </el-select>
-      <!-- el-button按钮组件，距离左边距20px，样式类名为"search-button"，点击时调用handleBatchOperate方法，按钮类型为"primary"（主要按钮样式），按钮尺寸为"small"，用于确定批量操作 -->
       <el-button
         style="margin-left: 20px"
         class="search-button"
@@ -132,9 +103,7 @@
         确定
       </el-button>
     </div>
-    <!-- 作为分页区域的容器 -->
     <div class="pagination-container">
-      <!-- el-pagination分页组件，设置背景色，监听页面尺寸变化和当前页变化事件，设置分页布局样式，绑定每页显示数量、可选的每页显示数量数组、当前页码以及总数据量等相关属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -146,35 +115,27 @@
         :total="total">
       </el-pagination>
     </div>
-    <!-- el-dialog对话框组件，标题为"选择专题"，对话框显示状态双向绑定到selectDialogVisible变量，宽度设置为50% -->
     <el-dialog title="选择专题" :visible.sync="selectDialogVisible" width="50%">
-      <!-- el-input输入框组件，双向绑定数据到dialogData.listQuery.keyword，设置宽度、底边距以及尺寸等样式属性，有相应的占位提示文字，内部包含一个用于搜索操作的el-button按钮 -->
       <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表格组件，绑定的数据为dialogData.list，监听行选择变化事件，显示表格边框 -->
       <el-table :data="dialogData.list"
                 @selection-change="handleDialogSelectionChange" border>
-        <!-- el-table-column表格列组件，设置列类型为"selection"（用于行选择的复选框列），宽度为60px，内容居中对齐 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"专题名称"，内容居中对齐，通过插槽作用域展示对应行数据中的title属性 -->
         <el-table-column label="专题名称" align="center">
           <template slot-scope="scope">{{scope.row.title}}</template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"所属分类"，宽度为160px，内容居中对齐，通过插槽作用域展示对应行数据中的categoryName属性 -->
         <el-table-column label="所属分类" width="160" align="center">
           <template slot-scope="scope">{{scope.row.categoryName}}</template>
         </el-table-column>
-        <!-- el-table-column表格列组件，对应的标签为"添加时间"，宽度为160px，内容居中对齐，通过过滤器formatTime对时间数据进行格式化展示 -->
         <el-table-column label="添加时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
         </el-table-column>
       </el-table>
       <div class="pagination-container">
-        <!-- el-pagination分页组件，设置背景色，监听对话框内页面尺寸变化和当前页变化事件，设置分页布局样式，绑定对话框内每页显示数量、当前页码以及总数据量等相关属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -188,340 +149,291 @@
       </div>
       <div style="clear: both;"></div>
       <div slot="footer">
-        <!-- el-button按钮组件，按钮尺寸为"small"，点击时关闭对话框（设置selectDialogVisible为false） -->
         <el-button  size="small" @click="selectDialogVisible = false">取 消</el-button>
-        <!-- el-button按钮组件，按钮尺寸为"small"，按钮类型为"primary"（主要按钮样式），点击时调用handleSelectDialogConfirm方法，用于确定操作 -->
         <el-button  size="small" type="primary" @click="handleSelectDialogConfirm()">确 定</el-button>
       </div>
     </el-dialog>
-    <!-- el-dialog对话框组件，标题为"设置排序"，对话框显示状态双向绑定到sortDialogVisible变量，宽度设置为40% -->
     <el-dialog title="设置排序"
                :visible.sync="sortDialogVisible"
                width="40%">
-      <!-- el-form表单组件，绑定的数据模型是sortDialogData，标签宽度为150px -->
       <el-form :model="sortDialogData"
                label-width="150px">
-        <!-- el-form-item表单项目组件，对应的标签为"排序："，内部包含一个el-input输入框组件，用于输入排序相关的值，设置输入框宽度 -->
         <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按钮组件，点击时关闭对话框（设置sortDialogVisible为false），按钮尺寸为"small" -->
         <el-button @click="sortDialogVisible = false" size="small">取 消</el-button>
-        <!-- el-button按钮组件，按钮类型为"primary"（主要按钮样式），点击时调用handleUpdateSort方法，按钮尺寸为"small"，用于确定排序设置操作 -->
         <el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
-// 从'@/api/homeSubject'模块中导入多个函数，用于获取列表、更新推荐状态、删除主题、创建主题以及更新主题排序等操作
+  import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
-import {fetchList,updateRecommendStatus,deleteHomeSubject,createHomeSubject,updateHomeSubjectSort} from '@/api/homeSubject';
+  import {fetchList as fetchSubjectList} from '@/api/subject';
-// 从'@/api/subject'模块中导入fetchList函数，并将其重命名为fetchSubjectList，用于获取相关主题列表
+  import {formatDate} from '@/utils/date';
-import {fetchList as fetchSubjectList} from '@/api/subject';
-// 从'@/utils/date'模块中导入formatDate函数，用于格式化日期
-import {formatDate} from '@/utils/date';
 
-// 定义默认的列表查询参数对象，包含页码、每页数量、专题名称、推荐状态等初始值
+  const defaultListQuery = {
-const defaultListQuery = {
+    pageNum: 1,
-  pageNum: 1,
+    pageSize: 5,
-  pageSize: 5,
+    subjectName: null,
-  subjectName: null,
+    recommendStatus: null
-  recommendStatus: null
+  };
-};
+  const defaultRecommendOptions = [
-// 定义默认的推荐状态选项数组，每个元素包含显示标签和对应的值，用于下拉选择等场景
+    {
-const defaultRecommendOptions = [
+      label: '未推荐',
-  {
+      value: 0
-    label: '未推荐',
+    },
-    value: 0
+    {
-  },
+      label: '推荐中',
-  {
+      value: 1
-    label: '推荐中',
+    }
-    value: 1
+  ];
-  }
+  export default {
-];
+    name: 'homeSubjectList',
-
+    data() {
-export default {
+      return {
-  name: 'homeSubjectList',
+        listQuery: Object.assign({}, defaultListQuery),
-  data() {
+        recommendOptions: Object.assign({}, defaultRecommendOptions),
-    return {
-      // 用于存储当前列表查询的参数，初始化为defaultListQuery的副本，方便后续修改和重置
-      listQuery: Object.assign({}, defaultListQuery),
-      // 存储推荐状态的选项列表，初始化为defaultRecommendOptions的副本
-      recommendOptions: Object.assign({}, defaultRecommendOptions),
-      // 用于存储获取到的列表数据，初始值为null，后续会赋值为实际数据
-      list: null,
-      // 用于存储列表数据的总条数，初始值为null，获取数据后更新
-      total: null,
-      // 用于标识列表数据是否正在加载的布尔值，true表示正在加载，初始为false
-      listLoading: false,
-      // 存储当前多选的记录数据，初始为空数组，在表格行多选操作时更新
-      multipleSelection: [],
-      // 定义批量操作的选项数组，每个元素包含操作的显示标签和对应的值，如设为推荐、取消推荐、删除等
-      operates: [
-        {
-          label: "设为推荐",
-          value: 0
-        },
-        {
-          label: "取消推荐",
-          value: 1
-        },
-        {
-          label: "删除",
-          value: 2
-        }
-      ],
-      // 用于存储当前选择的批量操作类型，初始值为null，用户选择后更新
-      operateType: null,
-      // 控制选择专题对话框是否显示的布尔值，初始为false，点击相关按钮时设置为true来显示对话框
-      selectDialogVisible: false,
-      // 存储对话框相关的数据对象，包含列表数据、总条数、多选记录以及列表查询参数等
-      dialogData: {
         list: null,
         total: null,
+        listLoading: false,
         multipleSelection: [],
-        listQuery: {
+        operates: [
-          keyword: null,
+          {
-          pageNum: 1,
+            label: "设为推荐",
-          pageSize: 5
+            value: 0
-        }
+          },
-      },
+          {
-      // 控制设置排序对话框是否显示的布尔值，初始为false，点击相关按钮时设置为true来显示对话框
+            label: "取消推荐",
-      sortDialogVisible: false,
+            value: 1
-      // 存储设置排序对话框相关的数据对象，包含排序值和对应的记录id等
+          },
-      sortDialogData: { sort: 0, id: null }
+          {
-    }
+            label: "删除",
-  },
+            value: 2
-  created() {
+          }
-    // 在组件创建时调用getList方法，用于获取初始的列表数据
+        ],
-    this.getList();
+        operateType: null,
-  },
+        selectDialogVisible:false,
-  filters: {
+        dialogData:{
-    // 过滤器函数，用于格式化推荐状态值，将数字状态转换为对应的文字描述（1转换为"推荐中"，其他为"未推荐"）
+          list: null,
-    formatRecommendStatus(status) {
+          total: null,
-      if (status === 1) {
+          multipleSelection:[],
-        return '推荐中';
+          listQuery:{
-      } else {
+            keyword: null,
-        return '未推荐';
+            pageNum: 1,
-      }
+            pageSize: 5
-    },
+          }
-    // 过滤器函数，用于格式化时间数据，如果时间为空则返回"N/A"，否则按照指定格式进行格式化
+        },
-    formatTime(time) {
+        sortDialogVisible:false,
-      if (time == null || time === '') {
+        sortDialogData:{sort:0,id:null}
-        return 'N/A';
       }
-      let date = new Date(time);
-      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-    },
-  },
-  methods: {
-    // 处理重置搜索的方法，将列表查询参数重置为默认值（defaultListQuery的副本）
-    handleResetSearch() {
-      this.listQuery = Object.assign({}, defaultListQuery);
-    },
-    // 处理查询搜索的方法，先将页码重置为1，然后调用getList方法获取符合查询条件的列表数据
-    handleSearchList() {
-      this.listQuery.pageNum = 1;
-      this.getList();
-    },
-    // 处理表格行选择变化的方法，更新multipleSelection数组，使其存储当前选中的行数据
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
     },
-    // 处理每页显示数量变化的方法，重置页码为1，更新每页显示数量为传入的值，然后调用getList方法重新获取列表数据
+    created() {
-    handleSizeChange(val) {
-      this.listQuery.pageNum = 1;
-      this.listQuery.pageSize = val;
       this.getList();
     },
-    // 处理当前页码变化的方法，更新列表查询参数中的页码为传入的值，然后调用getList方法获取对应页码的数据
+    filters:{
-    handleCurrentChange(val) {
+      formatRecommendStatus(status){
-      this.listQuery.pageNum = val;
+        if(status===1){
-      this.getList();
+          return '推荐中';
-    },
+        }else{
-    // 处理推荐状态开关变化的方法，调用updateRecommendStatusStatus方法，传入当前行的id和推荐状态值，用于更新推荐状态
+          return '未推荐';
-    handleRecommendStatusStatusChange(index, row) {
+        }
-      this.updateRecommendStatusStatus(row.id, row.recommendStatus);
+      },
-    },
+      formatTime(time){
-    // 处理删除操作的方法，调用deleteSubject方法，传入要删除记录的id，用于删除对应的主题数据
+        if(time==null||time===''){
-    handleDelete(index, row) {
+          return 'N/A';
-      this.deleteSubject(row.id);
+        }
-    },
+        let date = new Date(time);
-    // 处理批量操作的方法
+        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-    // 调用相应的方法处理选中的记录；如果未选择操作类型则提示用户选择类型
+      },
-    handleBatchOperate() {
-      if (this.multipleSelection < 1) { //首先判断是否选择了记录，如果没有则提示用户选择；
-        this.$message({
-          message: '请选择一条记录',
-          type: 'warning',
-          duration: 1000
-        });
-        return;
-      }
-      let ids = []; //然后根据选择的操作类型（设为推荐、取消推荐、删除）
-      for (let i = 0; i < this.multipleSelection.length; i++) {
-        ids.push(this.multipleSelection[i].id);
-      }
-      if (this.operateType === 0) {
-        //设为推荐
-        this.updateRecommendStatusStatus(ids, 1);
-      } else if (this.operateType === 1) {
-        //取消推荐
-        this.updateRecommendStatusStatus(ids, 0);
-      } else if (this.operateType === 2) {
-        //删除
-        this.deleteSubject(ids);
-      } else {
-        this.$message({
-          message: '请选择批量操作类型',
-          type: 'warning',
-          duration: 1000
-        });
-      }
-    },
-    // 处理选择专题操作的方法，将选择专题对话框设置为显示状态，清空对话框中的搜索关键词
-    handleSelectSubject() {
-      this.selectDialogVisible = true;
-      this.dialogData.listQuery.keyword = null;
-      this.getDialogList();//然后调用getDialogList方法获取对话框中的列表数据
-    },
-    // 处理对话框内搜索操作的方法
-    handleSelectSearch() {
-      this.getDialogList(); //调用getDialogList方法获取符合搜索条件的对话框中的列表数据
-    },
-    // 处理对话框内每页显示数量变化的方法
-    handleDialogSizeChange(val) {
-      this.dialogData.listQuery.pageNum = 1; //重置对话框列表查询参数中的页码为1，更新每页显示数量为传入的值
-      this.dialogData.listQuery.pageSize = val;
-      this.getDialogList(); //然后调用getDialogList方法重新获取列表数据
-    },
-    // 处理对话框内当前页码变化的方法，更新对话框列表查询参数中的页码为传入的值
-    handleDialogCurrentChange(val) {
-      this.dialogData.listQuery.pageNum = val;
-      this.getDialogList(); //然后调用getDialogList方法获取对应页码的数据
-    },
-    // 处理对话框内行选择变化的方法，更新对话框中存储多选记录的数组，使其存储当前选中的行数据
-    handleDialogSelectionChange(val) {
-      this.dialogData.multipleSelection = val;
     },
-    // 处理对话框确认操作的方法，首先判断是否选择了记录，如果没有则提示用户选择；然后将选中的记录整理成特定格式的数组，
+    methods: {
-    handleSelectDialogConfirm() {
+      handleResetSearch() {
-      if (this.dialogData.multipleSelection < 1) {
+        this.listQuery = Object.assign({}, defaultListQuery);
-        this.$message({
+      },
-          message: '请选择一条记录',
+      handleSearchList() {
-          type: 'warning',
+        this.listQuery.pageNum = 1;
-          duration: 1000
+        this.getList();
-        });
+      },
-        return;
+      handleSelectionChange(val){
-      }
+        this.multipleSelection = val;
-      let selectSubjects = [];
+      },
-      for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
+      handleSizeChange(val) {
-        selectSubjects.push({
+        this.listQuery.pageNum = 1;
-          subjectId: this.dialogData.multipleSelection[i].id,
+        this.listQuery.pageSize = val;
-          subjectName: this.dialogData.multipleSelection[i].title
+        this.getList();
-        });
+      },
-      }
+      handleCurrentChange(val) {
-      this.$confirm('使用要进行添加操作?', '提示', {
+        this.listQuery.pageNum = val;
-        confirmButtonText: '确定',
+        this.getList();
-        cancelButtonText: '取消',
+      },
-        type: 'warning'
+      handleRecommendStatusStatusChange(index,row){
-      }).then(() => {
+        this.updateRecommendStatusStatus(row.id,row.recommendStatus);
-        createHomeSubject(selectSubjects).then(response => { //// 弹出确认框让用户确认添加操作，确认后调用createHomeSubject方法创建主题数据，操作成功后关闭对话框、清空多选记录并更新列表数据，同时显示成功提示信息
+      },
-          this.selectDialogVisible = false;
+      handleDelete(index,row){
-          this.dialogData.multipleSelection = [];
+        this.deleteSubject(row.id);
-          this.getList();
+      },
+      handleBatchOperate(){
+        if (this.multipleSelection < 1) {
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '添加成功!'
+            type: 'warning',
+            duration: 1000
           });
-        });
+          return;
-      });
+        }
-    },
+        let ids = [];
-    // 处理编辑排序操作的方法，将设置排序对话框设置为显示状态
+        for (let i = 0; i < this.multipleSelection.length; i++) {
-    handleEditSort(index, row) {
+          ids.push(this.multipleSelection[i].id);
-      this.sortDialogVisible = true;
+        }
-      this.sortDialogData.sort = row.sort;
+        if (this.operateType === 0) {
-      this.sortDialogData.id = row.id; //将当前行的排序值和id赋值给对话框对应的数据对象，用于展示和后续更新操作
+          //设为推荐
-    },
+          this.updateRecommendStatusStatus(ids,1);
-    // 处理更新排序的方法，弹出确认框让用户确认修改排序操作
+        } else if (this.operateType === 1) {
-    handleUpdateSort() {
+          //取消推荐
-      this.$confirm('是否要修改排序?', '提示', {
+          this.updateRecommendStatusStatus(ids,0);
-        confirmButtonText: '确定',
+        } else if(this.operateType===2){
-        cancelButtonText: '取消',
+          //删除
-        type: 'warning'
+          this.deleteSubject(ids);
-      }).then(() => {
+        }else {
-        updateHomeSubjectSort(this.sortDialogData).then(response => { //确认后调用updateHomeSubjectSort方法更新排序数据
-          this.sortDialogVisible = false;
-          this.getList();
           this.$message({
-            type: 'success',
+            message: '请选择批量操作类型',
-            message: '删除成功!' //确认后调用updateHomeSubjectSort方法更新排序数据
+            type: 'warning',
+            duration: 1000
           });
-        });
+        }
-      })
+      },
-    },
+      handleSelectSubject(){
-    // 获取列表数据的方法
+        this.selectDialogVisible=true;
-    getList() {
+        this.dialogData.listQuery.keyword=null;
-      this.listLoading = true; //先将列表加载状态设置为true，表示正在加载数据
+        this.getDialogList();
-      fetchList(this.listQuery).then(response => { //然后调用fetchList函数获取数据
+      },
-        this.listLoading = false; //并将加载状态设置为false，表示数据加载完成
+      handleSelectSearch(){
-        this.list = response.data.list; //// 获取成功后更新列表数据和总条数
+        this.getDialogList();
-        this.total = response.data.total;
+      },
-      })
+      handleDialogSizeChange(val) {
-    },
+        this.dialogData.listQuery.pageNum = 1;
-    // 更新推荐状态的方法
+        this.dialogData.listQuery.pageSize = val;
-    updateRecommendStatusStatus(ids, status) {
+        this.getDialogList();
-      this.$confirm('是否要修改推荐状态?', '提示', { //先弹出确认框让用户确认是否修改推荐状态
+      },
-        confirmButtonText: '确定',
+      handleDialogCurrentChange(val) {
-        cancelButtonText: '取消',
+        this.dialogData.listQuery.pageNum = val;
-        type: 'warning'
+        this.getDialogList();
-      }).then(() => {
+      },
-        let params = new URLSearchParams(); //确认后构建URLSear的chParams对象传递要更新记录id和目标推荐状态值
+      handleDialogSelectionChange(val){
-        params.append("ids", ids);
+        this.dialogData.multipleSelection = val;
-        params.append("finalRecommendStatus", status);
+      },
-        updateRecommendStatus(params).then(response => { //// 调用updateRecommendStatus函数进行更新操作
+      handleSelectDialogConfirm(){
-          this.getList();
+        if (this.dialogData.multipleSelection < 1) {
           this.$message({
-            type: 'success',
+            message: '请选择一条记录',
-            message: '修改成功!' //操作成功后更新列表数据并显示成功提示信息；
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        let selectSubjects = [];
+        for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
+          selectSubjects.push({
+            subjectId:this.dialogData.multipleSelection[i].id,
+            subjectName:this.dialogData.multipleSelection[i].title
+          });
+        }
+        this.$confirm('使用要进行添加操作?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          createHomeSubject(selectSubjects).then(response=>{
+            this.selectDialogVisible=false;
+            this.dialogData.multipleSelection=[];
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            });
           });
         });
-      }).catch(() => {
+      },
-        this.$message({
+      handleEditSort(index,row){
-          type: 'success',
+        this.sortDialogVisible=true;
-          message: '已取消操作!' //如果取消操作则显示已取消操作的提示信息并更新列表数据
+        this.sortDialogData.sort=row.sort;
-        });
+        this.sortDialogData.id=row.id;
-        this.getList();
+      },
-      });
+      handleUpdateSort(){
-    },
+        this.$confirm('是否要修改排序?', '提示', {
-    // 删除主题的方法
+          confirmButtonText: '确定',
-    deleteSubject(ids) {
+          cancelButtonText: '取消',
-      this.$confirm('是否要删除该推荐?', '提示', { //弹出确认框让用户确认是否删除主题数据
+          type: 'warning'
-        confirmButtonText: '确定',
+        }).then(() => {
-        cancelButtonText: '取消',
+          updateHomeSubjectSort(this.sortDialogData).then(response=>{
-        type: 'warning'
+            this.sortDialogVisible=false;
-      }).then(() => {
+            this.getList();
-        let params = new URLSearchParams(); //确认后构建URLSearchParams对象传递要删除的记录id
+            this.$message({
-        params.append("ids", ids);
+              type: 'success',
-        deleteHomeSubject(params).then(response => { //// 调用deleteHomeSubject函数进行删除操作
+              message: '删除成功!'
-          this.getList();
+            });
+          });
+        })
+      },
+      getList() {
+        this.listLoading = true;
+        fetchList(this.listQuery).then(response => {
+          this.listLoading = false;
+          this.list = response.data.list;
+          this.total = response.data.total;
+        })
+      },
+      updateRecommendStatusStatus(ids,status){
+        this.$confirm('是否要修改推荐状态?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          params.append("recommendStatus",status);
+          updateRecommendStatus(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '修改成功!'
+            });
+          });
+        }).catch(() => {
           this.$message({
             type: 'success',
-            message: '删除成功!' //操作成功后更新列表数据并显示成功提示信息
+            message: '已取消操作!'
           });
+          this.getList();
         });
-      })
+      },
-    },
+      deleteSubject(ids){
-    // 获取对话框列表数据的方法
+        this.$confirm('是否要删除该推荐?', '提示', {
-    getDialogList() {
+          confirmButtonText: '确定',
-      fetchSubjectList(this.dialogData.listQuery).then(response => { //调用fetchSubjectList函数，传入对话框的列表查询参数
+          cancelButtonText: '取消',
-        this.dialogData.list = response.data.list; //获取成功后更新对话框中的列表数据和总条数
+          type: 'warning'
-        this.dialogData.total = response.data.total;
+        }).then(() => {
-      })
+          let params=new URLSearchParams();
+          params.append("ids",ids);
+          deleteHomeSubject(params).then(response=>{
+            this.getList();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          });
+        })
+      },
+      getDialogList(){
+        fetchSubjectList(this.dialogData.listQuery).then(response=>{
+          this.dialogData.list=response.data.list;
+          this.dialogData.total=response.data.total;
+        })
+      }
     }
   }
-}
 </script>
 <style></style>