合并

build/build.js

@@ -2,7 +2,6 @@
 require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
-
 const ora = require('ora')
 const rm = require('rimraf')
 const path = require('path')
@@ -10,10 +9,8 @@ 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,7 +8,6 @@ exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
     ? config.build.assetsSubDirectory
     : config.dev.assetsSubDirectory
-
   return path.posix.join(assetsSubDirectory, _path)
 }
 

src/api/brand.js

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

src/api/companyAddress.js

@@ -1,7 +1,27 @@
+// 导入封装好的请求工具，用于发起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:'/companyAddress/list',
-    method:'get'
+    // 接口的URL路径，指向公司地址列表的后端接口
+    url: '/companyAddress/list',
+
+    // 请求方法：使用 HTTP GET 方法获取数据
+    method: 'get'
   })
 }

src/api/coupon.js

@@ -1,38 +1,106 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/coupon/list', // 接口URL路径：获取优惠券列表
+    method: 'get',       // 请求方法：GET
+    params: params       // 查询参数，通过URL参数传递
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/coupon/create', // 接口URL路径：创建优惠券
+    method: 'post',        // 请求方法：POST
+    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,
-    method:'get',
+    url: '/coupon/' + id, // 接口URL路径：根据ID获取优惠券详情
+    method: 'get'         // 请求方法：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,
-    method:'post',
-    data:data
+    url: '/coupon/update/' + id, // 接口URL路径：更新指定ID的优惠券
+    method: 'post',              // 请求方法：POST
+    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,
-    method:'post',
+    url: '/coupon/delete/' + id, // 接口URL路径：删除指定ID的优惠券
+    method: 'post'               // 请求方法：POST
   })
 }

src/api/couponHistory.js

@@ -1,8 +1,27 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/couponHistory/list', // 接口URL路径：获取优惠券历史记录列表
+    method: 'get',              // 请求方法：GET
+    params: params              // 查询参数，通过 URL 参数传递
   })
 }

src/api/flash.js

@@ -1,35 +1,109 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/flash/list', // 接口URL：获取限时购活动列表
+    method: 'get',      // 请求方法：GET
+    params: params      // 查询参数，通过 URL 查询字符串传递
   })
 }
-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,
-    method:'post',
-    params:params
+    url: '/flash/update/status/' + id, // 接口URL：更新指定活动状态
+    method: 'post',                    // 请求方法：POST
+    params: params                     // 状态参数，通过 URL 查询字符串传递
   })
 }
+
+/**
+ * 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,
-    method:'post'
+    url: '/flash/delete/' + id, // 接口URL：删除指定活动
+    method: 'post'              // 请求方法：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',
-    method:'post',
-    data:data
+    url: '/flash/create', // 接口URL：创建限时购活动
+    method: 'post',       // 请求方法：POST
+    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,
-    method:'post',
-    data:data
+    url: '/flash/update/' + id, // 接口URL：更新指定ID的活动
+    method: 'post',             // 请求方法：POST
+    data: data                  // 请求体，包含更新后的活动数据
   })
 }

src/api/flashProductRelation.js

@@ -1,28 +1,88 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/flashProductRelation/list', // 接口URL：获取关联列表
+    method: 'get',                     // 请求方法：GET
+    params: params                     // 查询参数，通过 URL 传递
   })
 }
+
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/flashProductRelation/create', // 接口URL：创建关联
+    method: 'post',                      // 请求方法：POST
+    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,
-    method:'post'
+    url: '/flashProductRelation/delete/' + id, // 接口URL：删除关联
+    method: 'post'                             // 请求方法：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,
-    method:'post',
-    data:data
+    url: '/flashProductRelation/update/' + id, // 接口URL：更新关联
+    method: 'post',                            // 请求方法：POST
+    data: data                                 // 请求体，包含更新数据
   })
 }

src/api/flashSession.js

@@ -1,48 +1,131 @@
+// 导入封装的 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',
-    method: 'get',
-    params: params
+    url: '/flashSession/list', // 接口URL：获取限时购场次列表
+    method: 'get',             // 请求方法：GET
+    params: params             // 查询参数，通过 URL 传递
   })
 }
 
+/**
+ * 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',
-    method: 'get',
-    params: params
+    url: '/flashSession/selectList', // 接口URL：获取可选的场次列表
+    method: 'get',                   // 请求方法：GET
+    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,
-    method: 'post',
-    params: params
+    url: '/flashSession/update/status/' + id, // 接口URL：更新场次状态
+    method: 'post',                           // 请求方法：POST
+    params: params                            // 状态参数，通过 URL 查询字符串传递
   })
 }
 
+/**
+ * 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,
-    method: 'post'
+    url: '/flashSession/delete/' + id, // 接口URL：删除场次
+    method: 'post'                     // 请求方法：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',
-    method: 'post',
-    data: data
+    url: '/flashSession/create', // 接口URL：创建场次
+    method: 'post',              // 请求方法：POST
+    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,
-    method: 'post',
-    data: data
+    url: '/flashSession/update/' + id, // 接口URL：更新场次信息
+    method: 'post',                    // 请求方法：POST
+    data: data                         // 请求体，包含更新数据
   })
 }

src/api/homeAdvertise.js

@@ -1,43 +1,130 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/home/advertise/list', // 接口URL：获取首页广告列表
+    method: 'get',               // 请求方法：GET
+    params: params               // 查询参数，通过 URL 传递
   })
 }
-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,
-    method:'post',
-    params:params
+    url: '/home/advertise/update/status/' + id, // 接口URL：更新广告状态
+    method: 'post',                             // 请求方法：POST
+    params: params                              // 状态参数，通过 URL 查询字符串传递
   })
 }
+
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/advertise/delete', // 接口URL：批量删除广告
+    method: 'post',                // 请求方法：POST
+    data: data                     // 请求体，包含广告ID数组
   })
 }
+
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/advertise/create', // 接口URL：创建广告
+    method: 'post',                // 请求方法：POST
+    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,
-    method:'get',
+    url: '/home/advertise/' + id, // 接口URL：获取广告详情
+    method: 'get'                 // 请求方法：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,
-    method:'post',
-    data:data
+    url: '/home/advertise/update/' + id, // 接口URL：更新广告信息
+    method: 'post',                      // 请求方法：POST
+    data: data                           // 请求体，包含更新后的广告数据
   })
 }

src/api/homeBrand.js

@@ -1,40 +1,110 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/home/brand/list', // 接口URL：获取品牌列表
+    method: 'get',           // 请求方法：GET
+    params: params           // 查询参数，通过 URL 传递
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/brand/update/recommendStatus', // 接口URL：更新推荐状态
+    method: 'post',                            // 请求方法：POST
+    data: data                                 // 请求体，包含品牌ID和状态
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/brand/delete', // 接口URL：批量删除品牌
+    method: 'post',            // 请求方法：POST
+    data: data                 // 请求体，包含品牌ID数组
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/brand/create', // 接口URL：创建品牌
+    method: 'post',            // 请求方法：POST
+    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,
-    method:'post',
-    params:params
+    url: '/home/brand/update/sort/' + params.id, // 接口URL：更新品牌排序
+    method: 'post',                             // 请求方法：POST
+    params: params                              // 排序参数，通过 URL 查询字符串传递
   })
 }

src/api/homeSubject.js

@@ -1,40 +1,110 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/home/recommendSubject/list', // 接口URL：获取推荐专题列表
+    method: 'get',                     // 请求方法：GET
+    params: params                     // 查询参数，通过 URL 传递
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/recommendSubject/update/recommendStatus', // 接口URL：更新推荐状态
+    method: 'post',                                       // 请求方法：POST
+    data: data                                            // 请求体，包含专题ID和推荐状态
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/recommendSubject/delete', // 接口URL：批量删除专题
+    method: 'post',                       // 请求方法：POST
+    data: data                            // 请求体，包含专题ID数组
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/recommendSubject/create', // 接口URL：创建推荐专题
+    method: 'post',                       // 请求方法：POST
+    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,
-    method:'post',
-    params:params
+    url: '/home/recommendSubject/update/sort/' + params.id, // 接口URL：更新专题排序
+    method: 'post',                                        // 请求方法：POST
+    params: params                                         // 排序参数，通过 URL 查询字符串传递
   })
 }

src/api/hotProduct.js

@@ -1,40 +1,110 @@
+// 导入封装的 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',
-    method:'get',
-    params:params
+    url: '/home/recommendProduct/list', // 接口URL：获取推荐商品列表
+    method: 'get',                     // 请求方法：GET
+    params: params                     // 查询参数，通过 URL 传递
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/recommendProduct/update/recommendStatus', // 接口URL：更新推荐状态
+    method: 'post',                                       // 请求方法：POST
+    data: data                                            // 请求体，包含商品ID和推荐状态
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/recommendProduct/delete', // 接口URL：批量删除推荐商品
+    method: 'post',                       // 请求方法：POST
+    data: data                            // 请求体，包含商品ID数组
   })
 }
 
+/**
+ * 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',
-    method:'post',
-    data:data
+    url: '/home/recommendProduct/create', // 接口URL：创建推荐商品
+    method: 'post',                       // 请求方法：POST
+    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,
-    method:'post',
-    params:params
+    url: '/home/recommendProduct/update/sort/' + params.id, // 接口URL：更新商品排序
+    method: 'post',                                        // 请求方法：POST
+    params: params                                         // 排序参数，通过 URL 查询字符串传递
   })
 }

src/views/404.vue

@@ -1,15 +1,33 @@
 <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>
-          <el-button style="margin-top: 20px" type="primary" round @click="handleGoMain">返回首页</el-button>
+          <!-- 进一步的操作提示 -->
+          <div style="color:#909399; font-size: 14px">
+            请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
+          </div>
+          <!-- 返回首页按钮 -->
+          <el-button
+            style="margin-top: 20px"
+            type="primary"
+            round
+            @click="handleGoMain"
+          >
+            返回首页
+          </el-button>
         </div>
       </el-col>
     </div>
@@ -17,33 +35,50 @@
 </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;
+    margin: 120px auto; /* 页面居中，距离顶部 120px */
+    display: flex; /* 使用 flex 布局 */
+    align-items: center; /* 垂直居中 */
   }
 
+  /* 404 图片样式 */
   .img-style {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
+    width: auto; /* 宽度自适应 */
+    height: auto; /* 高度自适应 */
+    max-width: 100%; /* 图片最大宽度不超过容器 */
+    max-height: 100%; /* 图片最大高度不超过容器 */
+  }
+
+  /* 标题主颜色样式 */
+  .color-main {
+    color: #409EFF; /* 标题颜色 */
+    font-size: 48px; /* 字体大小 */
+    font-weight: bold; /* 加粗字体 */
   }
 </style>

src/views/pms/brand/add.vue

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

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

@@ -1,145 +1,168 @@
-<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"></el-input>
+          :autosize="true"
+        ></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('brandFrom')">提交</el-button>
-        <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
+        <el-button type="primary" @click="onSubmit('brandForm')">提交</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('brandForm')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
+
 <script>
-  import {createBrand, getBrand, updateBrand} from '@/api/brand'
-  import SingleUpload from '@/components/Upload/singleUpload'
-  const defaultBrand={
-    bigPic: '',
-    brandStory: '',
-    factoryStatus: 0,
-    firstLetter: '',
-    logo: '',
-    name: '',
-    showStatus: 0,
-    sort: 0
-  };
-  export default {
-    name: 'BrandDetail',
-    components:{SingleUpload},
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      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({},defaultBrand);
-      }
+import { createBrand, getBrand, updateBrand } from "@/api/brand";
+import SingleUpload from "@/components/Upload/singleUpload";
+
+export default {
+  name: "BrandDetail", // 组件名称
+  components: {
+    SingleUpload, // 注册上传组件
+  },
+  props: {
+    // 是否编辑模式的标志
+    isEdit: {
+      type: Boolean,
+      default: false,
     },
-    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
-                  });
-                });
-              }
-            });
+  },
+  data() {
+    // 定义表单默认数据和校验规则
+    const defaultBrand = {
+      bigPic: "", // 品牌大图
+      brandStory: "", // 品牌故事
+      factoryStatus: 0, // 是否品牌制造商
+      firstLetter: "", // 品牌首字母
+      logo: "", // 品牌LOGO
+      name: "", // 品牌名称
+      showStatus: 0, // 是否显示
+      sort: 0, // 排序
+    };
 
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration:1000
-            });
-            return false;
-          }
-        });
+    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: "排序必须为数字" }],
       },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-        this.brand = Object.assign({},defaultBrand);
-      }
+    };
+  },
+  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;
+        }
+      });
+    },
+    // 重置一下表单
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.brand = Object.assign({}, this.defaultBrand);
+    },
+  },
+};
 </script>
-<style>
-</style>
-
-

src/views/pms/brand/index.vue

@@ -1,28 +1,39 @@
-<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"
-            @click="searchBrandList()"
-            type="primary"
-            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>
-            </el-form-item>
-          </el-form>
-        </div>
+      <div>
+        <!-- 搜索标题和按钮 -->
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+        <el-button
+          style="float: right"
+          @click="searchBrandList()"
+          type="primary"
+          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>
+          </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()"
@@ -30,26 +41,35 @@
         添加
       </el-button>
     </el-card>
+
+    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table ref="brandTable"
-                :data="list"
-                style="width: 100%"
-                @selection-change="handleSelectionChange"
-                v-loading="listLoading"
-                border>
+      <el-table
+        ref="brandTable"
+        :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>
+          <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
@@ -60,6 +80,7 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- 表格列：是否显示（开关操作） -->
         <el-table-column label="是否显示" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -70,41 +91,42 @@
             </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)">100
+              @click="getProductList(scope.$index, scope.row)">
+              100
             </el-button>
             <span>评价：</span>
             <el-button
               size="mini"
               type="text"
-              @click="getProductCommentList(scope.$index, scope.row)">1000
+              @click="getProductCommentList(scope.$index, scope.row)">
+              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"
@@ -114,196 +136,102 @@
       </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 {
-    name: 'brandList',
-    data() {
-      return {
-        operates: [
-          {
-            label: "显示品牌",
-            value: "showBrand"
-          },
-          {
-            label: "隐藏品牌",
-            value: "hideBrand"
-          }
-        ],
-        operateType: null,
-        listQuery: {
-          keyword: null,
-          pageNum: 1,
-          pageSize: 10
-        },
-        list: null,
-        total: null,
-        listLoading: true,
-        multipleSelection: []
-      }
+export default {
+  name: "brandList", // 组件名称
+  data() {
+    return {
+      operates: [
+        { label: "显示品牌", value: "showBrand" },
+        { label: "隐藏品牌", value: "hideBrand" },
+      ],
+      operateType: null, // 批量操作类型
+      listQuery: {
+        keyword: null,
+        pageNum: 1,
+        pageSize: 10,
+      },
+      list: null, // 品牌数据列表
+      total: null, // 数据总数
+      listLoading: true, // 加载状态
+      multipleSelection: [], // 多选数据
+    };
+  },
+  created() {
+    this.getList(); // 初始化加载列表数据
+  },
+  methods: {
+    // 获取品牌列表
+    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: {
-      getList() {
-        this.listLoading = true;
-        fetchList(this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
-          this.totalPage = response.data.totalPage;
-          this.pageSize = response.data.pageSize;
-        });
-      },
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-      handleUpdate(index, row) {
-        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;
-        this.getList();
-      },
-      searchBrandList() {
-        this.listQuery.pageNum = 1;
+    // 批量操作
+    handleBatchOperate() {
+      console.log(this.multipleSelection);
+    },
+    // 添加品牌
+    addBrand() {
+      this.$router.push({ path: "/pms/addBrand" });
+    },
+    // 更新品牌状态
+    handleUpdate(index, row) {
+      this.$router.push({ path: "/pms/updateBrand", query: { id: row.id } });
+    },
+    // 删除品牌
+    handleDelete(index, row) {
+      deleteBrand(row.id).then(() => {
+        this.$message({ message: "删除成功", type: "success" });
         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'})
-      }
-    }
-  }
+      });
+    },
+    // 分页事件
+    handleSizeChange(val) {
+      this.listQuery.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.listQuery.pageNum = val;
+      this.getList();
+    },
+  },
+};
 </script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-
 
+<style lang="scss" scoped>
+/* 自定义样式 */
 </style>
-
-

src/views/pms/brand/update.vue

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

src/views/pms/product/add.vue

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

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

@@ -1,10 +1,15 @@
 <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 v-model="value.productAttributeCategoryId"
-                   placeholder="请选择属性类型"
-                   @change="handleProductAttrChange">
+        <el-select
+          v-model="value.productAttributeCategoryId"
+          placeholder="请选择属性类型"
+          @change="handleProductAttrChange">
           <el-option
             v-for="item in productAttributeCategoryOptions"
             :key="item.value"
@@ -13,136 +18,98 @@
           </el-option>
         </el-select>
       </el-form-item>
+
+      <!-- 商品规格 -->
       <el-form-item label="商品规格：">
         <el-card shadow="never" class="cardBg">
-          <div v-for="(productAttr,idx) in selectProductAttr">
-            {{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"
-                           class="littleMarginLeft"></el-checkbox>
+          <div v-for="(productAttr, idx) in selectProductAttr" :key="idx">
+            <!-- 显示属性名称 -->
+            {{ productAttr.name }}：
+
+            <!-- 当 handAddStatus=0 时，显示多选框 -->
+            <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 v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
-                     class="littleMarginLeft">
-                  <el-checkbox :label="item" :key="item"></el-checkbox>
-                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
-                  </el-button>
+                <div
+                  v-for="(item, index) in selectProductAttr[idx].options"
+                  :key="index"
+                  style="display: inline-block" class="littleMarginLeft">
+                  <el-checkbox :label="item"></el-checkbox>
+                  <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"
-                  :data="value.skuStockList"
-                  border>
+
+        <!-- SKU 列表表格 -->
+        <el-table style="width: 100%; margin-top: 20px" :data="value.skuStockList" 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="销售价格"
-            width="100"
-            align="center">
+
+          <!-- 其他表格列：销售价格、促销价格、库存等 -->
+          <el-table-column label="销售价格" 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, scope.row)">删除
-              </el-button>
+              <el-button type="text" @click="handleRemoveProductSku(scope.$index)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
-        <el-button
-          type="primary"
-          style="margin-top: 20px"
-          @click="handleRefreshProductSkuList">刷新列表
-        </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-button type="primary" style="margin-top: 20px" @click="handleRefreshProductSkuList">刷新列表</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="商品相册：">
         <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">
@@ -153,6 +120,8 @@
           </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>
@@ -162,479 +131,74 @@
 </template>
 
 <script>
-  import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
-  import {fetchList as fetchProductAttrList} from '@/api/productAttr'
-  import SingleUpload from '@/components/Upload/singleUpload'
-  import MultiUpload from '@/components/Upload/multiUpload'
-  import Tinymce from '@/components/Tinymce'
+import { fetchList as fetchProductAttrCateList } from '@/api/productAttrCate';
+import { fetchList as fetchProductAttrList } from '@/api/productAttr';
+import SingleUpload from '@/components/Upload/singleUpload';
+import MultiUpload from '@/components/Upload/multiUpload';
+import Tinymce from '@/components/Tinymce';
 
-  export default {
-    name: "ProductAttrDetail",
-    components: {SingleUpload, MultiUpload, Tinymce},
-    props: {
-      value: Object,
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: 'ProductAttrDetail', // 组件名称
+  components: { SingleUpload, MultiUpload, Tinymce }, // 注册组件
+  props: {
+    value: Object, // 父组件传入的表单数据对象
+    isEdit: { type: Boolean, default: false } // 编辑模式标志
+  },
+  data() {
+    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() {
-      return {
-        //编辑模式时是否初始化成功
-        hasEditCreated:false,
-        //商品属性分类下拉选项
-        productAttributeCategoryOptions: [],
-        //选中的商品属性
-        selectProductAttr: [],
-        //选中的商品参数
-        selectProductParam: [],
-        //选中的商品属性图片
-        selectProductAttrPics: [],
-        //可手动添加的商品属性
-        addProductAttrValue: '',
-        //商品富文本详情激活类型
-        activeHtmlName: 'pc'
-      }
+    // 处理属性类型变化，加载对应的属性和参数
+    handleProductAttrChange(value) {
+      this.getProductAttrList(0, value); // 商品规格
+      this.getProductAttrList(1, value); // 商品参数
     },
-    computed: {
-      //是否有商品属性图片
-      hasAttrPic() {
-        if (this.selectProductAttrPics.length < 1) {
-          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 += ',';
-                }
-              }
-            }
-          }
-        }
+    // 处理添加手动属性值
+    handleAddProductAttrValue(idx) {
+      if (this.addProductAttrValue) {
+        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
+        this.addProductAttrValue = '';
       }
     },
-    created() {
-      this.getProductAttrCateList();
+    // 删除 SKU 列表中的某一项
+    handleRemoveProductSku(index) {
+      this.value.skuStockList.splice(index, 1);
     },
-    watch: {
-      productId:function (newValue) {
-        if(!this.isEdit)return;
-        if(this.hasEditCreated)return;
-        if(newValue===undefined||newValue==null||newValue===0)return;
-        this.handleEditCreated();
-      }
+    // 上一步
+    handlePrev() {
+      this.$emit('prevStep');
     },
-    methods: {
-      handleEditCreated() {
-        //根据商品属性分类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')
-      }
+    // 下一步
+    handleNext() {
+      this.$emit('nextStep');
     }
   }
+};
 </script>
 
 <style scoped>
-  .littleMarginLeft {
-    margin-left: 10px;
-  }
-
-  .littleMarginTop {
-    margin-top: 10px;
-  }
-
-  .paramInput {
-    width: 250px;
-  }
+.littleMarginLeft {
+  margin-left: 10px;
+}
 
-  .paramInputLabel {
-    display: inline-block;
-    width: 100px;
-    text-align: right;
-    padding-right: 10px
-  }
-
-  .cardBg {
-    background: #F8F9FC;
-  }
+.cardBg {
+  background: #f8f9fc;
+}
 </style>

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

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

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

@@ -1,200 +1,247 @@
 <template>
+  <!-- 商品基本信息表单 -->
   <div style="margin-top: 50px">
-    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" class="form-inner-container" size="small">
+    <el-form
+      :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">
-        </el-cascader>
+          :options="productCateOptions"
+        ></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">
-          </el-option>
+            :value="item.value"
+          ></el-option>
         </el-select>
       </el-form-item>
+
+      <!-- 商品介绍文本域 -->
       <el-form-item label="商品介绍：">
         <el-input
           :autoSize="true"
           v-model="value.description"
           type="textarea"
-          placeholder="请输入内容"></el-input>
+          placeholder="请输入内容"
+        ></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 type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
+        <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 {fetchList as fetchBrandList} from '@/api/brand'
-  import {getProduct} from '@/api/product';
-
-  export default {
-    name: "ProductInfoDetail",
-    props: {
-      value: Object,
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
+import { fetchListWithChildren } from '@/api/productCate'; // 获取商品分类
+import { fetchList as fetchBrandList } from '@/api/brand'; // 获取品牌列表
+
+export default {
+  name: 'ProductInfoDetail', // 组件名称
+  props: {
+    value: Object, // 父组件传入的数据对象
+    isEdit: {
+      type: Boolean, // 是否为编辑模式
+      default: false,
     },
-    data() {
-      return {
-        hasEditCreated:false,
-        //选中商品分类的值
-        selectProductCateValue: [],
-        productCateOptions: [],
-        brandOptions: [],
-        rules: {
-          name: [
-            {required: true, message: '请输入商品名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-          ],
-          subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
-          productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
-          brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
-          description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
-          requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
-        }
-      };
+  },
+  data() {
+    return {
+      hasEditCreated: false, // 控制编辑状态是否初始化完成
+      selectProductCateValue: [], // 选中的商品分类
+      productCateOptions: [], // 商品分类级联数据
+      brandOptions: [], // 品牌列表选项
+      rules: {
+        name: [
+          { required: true, message: '请输入商品名称', trigger: 'blur' },
+          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
+        ],
+        subTitle: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
+        productCategoryId: [
+          { required: true, message: '请选择商品分类', trigger: 'blur' },
+        ],
+        brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
+        description: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {
+    // 初始化分类列表和品牌列表
+    this.getProductCateList();
+    this.getBrandList();
+  },
+  computed: {
+    // 监听商品ID
+    productId() {
+      return this.value.id;
     },
-    created() {
-      this.getProductCateList();
-      this.getBrandList();
+  },
+  watch: {
+    productId(newValue) {
+      if (!this.isEdit || this.hasEditCreated || !newValue) return;
+      this.handleEditCreated();
     },
-    computed:{
-      //商品的编号
-      productId(){
-        return this.value.id;
+    selectProductCateValue(newValue) {
+      // 选中分类时，设置对应的分类ID和分类名称
+      if (newValue && 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;
       }
     },
-    watch: {
-      productId:function(newValue){
-        if(!this.isEdit)return;
-        if(this.hasEditCreated)return;
-        if(newValue===undefined||newValue==null||newValue===0)return;
-        this.handleEditCreated();
-      },
-      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;
-        }
+  },
+  methods: {
+    // 编辑模式下初始化商品分类
+    handleEditCreated() {
+      if (this.value.productCategoryId != null) {
+        this.selectProductCateValue = [
+          this.value.cateParentId,
+          this.value.productCategoryId,
+        ];
       }
+      this.hasEditCreated = true;
     },
-    methods: {
-      //处理编辑逻辑
-      handleEditCreated(){
-        if(this.value.productCategoryId!=null){
-          this.selectProductCateValue.push(this.value.cateParentId);
-          this.selectProductCateValue.push(this.value.productCategoryId);
-        }
-        this.hasEditCreated=true;
-      },
-      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});
-          }
-        });
-      },
-      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;
-      },
-      handleNext(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$emit('nextStep');
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration:1000
-            });
-            return false;
-          }
-        });
-      },
-      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;
+
+    // 获取商品分类列表
+    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,
+          })),
+        }));
+      });
+    },
+
+    // 获取品牌列表
+    getBrandList() {
+      fetchBrandList({ pageNum: 1, pageSize: 100 }).then((response) => {
+        this.brandOptions = response.data.list.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }));
+      });
+    },
+
+    // 根据分类ID获取分类名称
+    getCateNameById(id) {
+      for (const parent of this.productCateOptions) {
+        for (const child of parent.children || []) {
+          if (child.value === id) {
+            return child.label;
           }
         }
-        this.value.brandName = brandName;
       }
-    }
-  }
+      return null;
+    },
+
+    // 下一步验证表单数据
+    handleNext(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('nextStep'); // 触发下一步事件
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000,
+          });
+        }
+      });
+    },
+
+    // 处理品牌选择变化
+    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,10 +1,14 @@
 <template>
+  <!-- 商品关联表单 -->
   <div style="margin-top: 50px">
-    <el-form :model="value"
-             ref="productRelationForm"
-             label-width="120px"
-             class="form-inner-container"
-             size="small">
+    <el-form
+      :model="value"
+      ref="productRelationForm"
+      label-width="120px"
+      class="form-inner-container"
+      size="small"
+    >
+      <!-- 关联专题 Transfer 组件 -->
       <el-form-item label="关联专题：">
         <el-transfer
           style="display: inline-block"
@@ -13,9 +17,11 @@
           filter-placeholder="请输入专题名称"
           v-model="selectSubject"
           :titles="subjectTitles"
-          :data="subjectList">
-        </el-transfer>
+          :data="subjectList"
+        ></el-transfer>
       </el-form-item>
+
+      <!-- 关联优选 Transfer 组件 -->
       <el-form-item label="关联优选：">
         <el-transfer
           style="display: inline-block"
@@ -24,122 +30,166 @@
           filter-placeholder="请输入优选名称"
           v-model="selectPrefrenceArea"
           :titles="prefrenceAreaTitles"
-          :data="prefrenceAreaList">
-        </el-transfer>
+          :data="prefrenceAreaList"
+        ></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>
+        <el-button type="primary" size="medium" @click="handleFinishCommit">
+          完成，提交商品
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-  import {fetchListAll as fetchSubjectList} from '@/api/subject'
-  import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
+import { fetchListAll as fetchSubjectList } from '@/api/subject'; // 获取专题列表API
+import { fetchList as fetchPrefrenceAreaList } from '@/api/prefrenceArea'; // 获取优选列表API
 
-  export default {
-    name: "ProductRelationDetail",
-    props: {
-      value: Object,
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        //所有专题列表
-        subjectList: [],
-        //专题左右标题
-        subjectTitles: ['待选择', '已选择'],
-        //所有专题列表
-        prefrenceAreaList: [],
-        //专题左右标题
-        prefrenceAreaTitles: ['待选择', '已选择']
-      };
-    },
-    created() {
-      this.getSubjectList();
-      this.getPrefrenceAreaList();
+export default {
+  name: 'ProductRelationDetail', // 组件名称
+  props: {
+    value: Object, // 父组件传入的数据对象（用于存储表单数据）
+    isEdit: {
+      type: Boolean, // 是否为编辑模式
+      default: false,
     },
-    computed:{
-      //选中的专题
-      selectSubject:{
-        get:function () {
-          let subjects =[];
-          if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
-            return subjects;
-          }
-          for(let i=0;i<this.value.subjectProductRelationList.length;i++){
-            subjects.push(this.value.subjectProductRelationList[i].subjectId);
-          }
+  },
+  data() {
+    return {
+      subjectList: [], // 专题数据列表
+      subjectTitles: ['待选择', '已选择'], // Transfer组件标题：关联专题
+      prefrenceAreaList: [], // 优选数据列表
+      prefrenceAreaTitles: ['待选择', '已选择'], // Transfer组件标题：关联优选
+    };
+  },
+  created() {
+    this.getSubjectList(); // 初始化获取专题列表
+    this.getPrefrenceAreaList(); // 初始化获取优选列表
+  },
+  computed: {
+    /**
+     * 选中的专题：通过 v-model 和 computed 绑定选中的专题数据
+     */
+    selectSubject: {
+      get() {
+        let subjects = [];
+        if (
+          this.value.subjectProductRelationList == null ||
+          this.value.subjectProductRelationList.length <= 0
+        ) {
           return subjects;
-        },
-        set:function (newValue) {
-          this.value.subjectProductRelationList=[];
-          for(let i=0;i<newValue.length;i++){
-            this.value.subjectProductRelationList.push({subjectId:newValue[i]});
-          }
         }
-      },
-      //选中的优选
-      selectPrefrenceArea:{
-        get:function () {
-          let prefrenceAreas =[];
-          if(this.value.prefrenceAreaProductRelationList==null||this.value.prefrenceAreaProductRelationList.length<=0){
-            return prefrenceAreas;
-          }
-          for(let i=0;i<this.value.prefrenceAreaProductRelationList.length;i++){
-            prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
-          }
-          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; i < this.value.subjectProductRelationList.length; i++) {
+          subjects.push(this.value.subjectProductRelationList[i].subjectId);
         }
-      }
-    },
-    methods: {
-      filterMethod(query, item) {
-        return item.label.indexOf(query) > -1;
+        return subjects;
       },
-      getSubjectList() {
-        fetchSubjectList().then(response => {
-          let list = response.data;
-          for (let i = 0; i < list.length; i++) {
-            this.subjectList.push({
-              label: list[i].title,
-              key: list[i].id
-            });
-          }
-        });
+      set(newValue) {
+        // 更新关联的专题列表
+        this.value.subjectProductRelationList = [];
+        for (let i = 0; i < newValue.length; i++) {
+          this.value.subjectProductRelationList.push({ subjectId: newValue[i] });
+        }
       },
-      getPrefrenceAreaList() {
-        fetchPrefrenceAreaList().then(response=>{
-          let list = response.data;
-          for (let i = 0; i < list.length; i++) {
-            this.prefrenceAreaList.push({
-              label: list[i].name,
-              key: list[i].id
-            });
-          }
-        });
+    },
+
+    /**
+     * 选中的优选：通过 v-model 和 computed 绑定选中的优选数据
+     */
+    selectPrefrenceArea: {
+      get() {
+        let prefrenceAreas = [];
+        if (
+          this.value.prefrenceAreaProductRelationList == null ||
+          this.value.prefrenceAreaProductRelationList.length <= 0
+        ) {
+          return prefrenceAreas;
+        }
+        // 提取选中的优选ID
+        for (
+          let i = 0;
+          i < this.value.prefrenceAreaProductRelationList.length;
+          i++
+        ) {
+          prefrenceAreas.push(
+            this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId
+          );
+        }
+        return prefrenceAreas;
       },
-      handlePrev(){
-        this.$emit('prevStep')
+      set(newValue) {
+        // 更新关联的优选列表
+        this.value.prefrenceAreaProductRelationList = [];
+        for (let i = 0; i < newValue.length; i++) {
+          this.value.prefrenceAreaProductRelationList.push({
+            prefrenceAreaId: newValue[i],
+          });
+        }
       },
-      handleFinishCommit(){
-        this.$emit('finishCommit',this.isEdit);
-      }
-    }
-  }
+    },
+  },
+  methods: {
+    /**
+     * 筛选方法：根据关键词过滤 Transfer 组件数据
+     * @param {String} query - 查询关键词
+     * @param {Object} item - 当前项
+     */
+    filterMethod(query, item) {
+      return item.label.indexOf(query) > -1;
+    },
+
+    /**
+     * 获取专题列表数据
+     */
+    getSubjectList() {
+      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,43 +1,63 @@
 <template>
+  <!-- 商品促销信息表单 -->
   <div style="margin-top: 50px">
-    <el-form :model="value" ref="productSaleForm" label-width="120px" class="form-inner-container" size="small">
+    <el-form
+      :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">
-        </el-switch>
+          :inactive-value="0"
+        ></el-switch>
       </el-form-item>
+
+      <!-- 商品上架开关 -->
       <el-form-item label="商品上架：">
         <el-switch
           v-model="value.publishStatus"
           :active-value="1"
-          :inactive-value="0">
-        </el-switch>
+          :inactive-value="0"
+        ></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">
-        </el-switch>
-        <span style="margin-left: 10px;margin-right: 10px">推荐</span>
+          :inactive-value="0"
+        ></el-switch>
+        <span style="margin-left: 10px; margin-right: 10px">推荐</span>
         <el-switch
           v-model="value.recommandStatus"
           :active-value="1"
-          :inactive-value="0">
-        </el-switch>
+          :inactive-value="0"
+        ></el-switch>
       </el-form-item>
+
+      <!-- 服务保证复选框组 -->
       <el-form-item label="服务保证：">
         <el-checkbox-group v-model="selectServiceList">
           <el-checkbox :label="1">无忧退货</el-checkbox>
@@ -45,18 +65,32 @@
           <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 v-model="value.note" type="textarea" :autoSize="true"></el-input>
+        <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>
@@ -66,15 +100,17 @@
           <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="选择开始时间">
-          </el-date-picker>
+            placeholder="选择开始时间"
+          ></el-date-picker>
         </div>
         <div class="littleMargin">
           结束时间：
@@ -82,225 +118,156 @@
             v-model="value.promotionEndTime"
             type="datetime"
             :picker-options="pickerOptions1"
-            placeholder="选择结束时间">
-          </el-date-picker>
+            placeholder="选择结束时间"
+          ></el-date-picker>
         </div>
         <div class="littleMargin">
           促销价格：
-          <el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
+          <el-input
+            style="width: 220px"
+            v-model="value.promotionPrice"
+            placeholder="输入促销价格"
+          ></el-input>
         </div>
-
       </el-form-item>
-      <el-form-item v-show="value.promotionType===2">
-        <div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
-          {{item.memberLevelName}}：
+
+      <!-- 会员价格设置 -->
+      <el-form-item v-show="value.promotionType === 2">
+        <div v-for="(item, index) in value.memberPriceList" :key="index" class="littleMargin">
+          {{ 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"
-                  style="width: 80%" border>
-          <el-table-column
-            label="数量"
-            align="center"
-            width="120">
+
+      <!-- 阶梯价格设置 -->
+      <el-form-item v-show="value.promotionType === 3">
+        <el-table :data="value.productLadderList" style="width: 80%" border>
+          <el-table-column 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
-            align="center"
-            label="操作">
+          <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <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 type="text" @click="handleRemoveProductLadder(scope.$index)">
+                删除
+              </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"
-                  style="width: 80%" border>
-          <el-table-column
-            label="满"
-            align="center"
-            width="120">
+
+      <!-- 满减价格设置 -->
+      <el-form-item v-show="value.promotionType === 4">
+        <el-table :data="value.productFullReductionList" style="width: 80%" border>
+          <el-table-column 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
-            align="center"
-            label="操作">
+          <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <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 type="text" @click="handleRemoveFullReduction(scope.$index)">
+                删除
+              </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>
+        <el-button type="primary" size="medium" @click="handleNext">
+          下一步，填写商品属性
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-  import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
+import { fetchList as fetchMemberLevelList } from '@/api/memberLevel'; // 获取会员等级API
 
-  export default {
-    name: "ProductSaleDetail",
-    props: {
-      value: Object,
-      isEdit: {
-        type: Boolean,
-        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;
-        });
-      }
+export default {
+  name: 'ProductSaleDetail',
+  props: {
+    value: Object, // 父组件传入的数据对象
+    isEdit: {
+      type: Boolean, // 是否编辑模式
+      default: false,
     },
-    computed: {
-      //选中的服务保证
-      selectServiceList: {
-        get() {
-          let list = [];
-          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;
+  },
+  data() {
+    return {
+      pickerOptions1: {
+        disabledDate(time) {
+          return time.getTime() < Date.now(); // 禁用过去时间
         },
-        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;
-        if (productLadderList.length === 1) {
-          productLadderList.pop();
-          productLadderList.push({
-            count: 0,
-            discount: 0,
-            price: 0
-          })
-        } else {
-          productLadderList.splice(index, 1);
-        }
-      },
-      handleAddProductLadder(index, row) {
-        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;
-        if (fullReductionList.length === 1) {
-          fullReductionList.pop();
-          fullReductionList.push({
-            fullPrice: 0,
-            reducePrice: 0
-          });
-        } else {
-          fullReductionList.splice(index, 1);
-        }
       },
-      handleAddFullReduction(index, row) {
-        let fullReductionList = this.value.productFullReductionList;
-        if (fullReductionList.length < 3) {
-          fullReductionList.push({
-            fullPrice: 0,
-            reducePrice: 0
-          });
-        } else {
-          this.$message({
-            message: '最多只能添加三条',
-            type: 'warning'
-          });
-        }
+    };
+  },
+  created() {
+    fetchMemberLevelList({ defaultStatus: 0 }).then((response) => {
+      this.value.memberPriceList = response.data.map((item) => ({
+        memberLevelId: item.id,
+        memberLevelName: item.name,
+        memberPrice: 0,
+      }));
+    });
+  },
+  computed: {
+    // 选中的服务保证
+    selectServiceList: {
+      get() {
+        return this.value.serviceIds ? this.value.serviceIds.split(',').map(Number) : [];
       },
-      handlePrev() {
-        this.$emit('prevStep')
+      set(newValue) {
+        this.value.serviceIds = newValue.join(',');
       },
-      handleNext() {
-        this.$emit('nextStep')
-      }
-    }
-  }
+    },
+  },
+  methods: {
+    handleRemoveProductLadder(index) {
+      this.value.productLadderList.splice(index, 1);
+    },
+    handleAddProductLadder() {
+      this.value.productLadderList.push({ count: 0, discount: 0 });
+    },
+    handleRemoveFullReduction(index) {
+      this.value.productFullReductionList.splice(index, 1);
+    },
+    handleAddFullReduction() {
+      this.value.productFullReductionList.push({ fullPrice: 0, reducePrice: 0 });
+    },
+    handlePrev() {
+      this.$emit('prevStep');
+    },
+    handleNext() {
+      this.$emit('nextStep');
+    },
+  },
+};
 </script>
 
 <style scoped>
-  .littleMargin {
-    margin-top: 10px;
-  }
+.littleMargin {
+  margin-top: 10px;
+}
 </style>

src/views/pms/product/index.vue

@@ -1,24 +1,22 @@
-<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"
-          @click="handleSearchList()"
-          type="primary"
-          size="small">
+        <!-- 查询按钮 -->
+        <el-button style="float: right" @click="handleSearchList()" type="primary" size="small">
           查询结果
         </el-button>
-        <el-button
-          style="float: right;margin-right: 15px"
-          @click="handleResetSearch()"
-          size="small">
+        <!-- 重置按钮 -->
+        <el-button 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>
@@ -30,8 +28,8 @@
             <el-cascader
               clearable
               v-model="selectProductCateValue"
-              :options="productCateOptions">
-            </el-cascader>
+              :options="productCateOptions"
+            ></el-cascader>
           </el-form-item>
           <el-form-item label="商品品牌：">
             <el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable>
@@ -39,8 +37,8 @@
                 v-for="item in brandOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value">
-              </el-option>
+                :value="item.value"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="上架状态：">
@@ -49,8 +47,8 @@
                 v-for="item in publishStatusOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value">
-              </el-option>
+                :value="item.value"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="审核状态：">
@@ -59,591 +57,206 @@
                 v-for="item in verifyStatusOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value">
-              </el-option>
+                :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-button
-        class="btn-add"
-        @click="handleAddProduct()"
-        size="mini">
-        添加
-      </el-button>
+      <!-- 添加商品按钮 -->
+      <el-button class="btn-add" @click="handleAddProduct()" size="mini">添加</el-button>
     </el-card>
+
+    <!-- 商品数据表格 -->
     <div class="table-container">
-      <el-table ref="productTable"
-                :data="list"
-                style="width: 100%"
-                @selection-change="handleSelectionChange"
-                v-loading="listLoading"
-                border>
+      <el-table
+        ref="productTable"
+        :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>
+          <template slot-scope="scope">{{ scope.row.id }}</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>
+          <template slot-scope="scope">
+            <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.brandName}}</p>
+            <p>{{ scope.row.name }}</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.productSn}}</p>
+            <p>价格：￥{{ scope.row.price }}</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">
-              </el-switch>
+                v-model="scope.row.publishStatus"
+              ></el-switch>
             </p>
-            <p>新品：
+            <!-- 新品状态 -->
+            <p>
+              新品：
               <el-switch
                 @change="handleNewStatusChange(scope.$index, scope.row)"
                 :active-value="1"
                 :inactive-value="0"
-                v-model="scope.row.newStatus">
-              </el-switch>
+                v-model="scope.row.newStatus"
+              ></el-switch>
             </p>
-            <p>推荐：
+            <!-- 推荐状态 -->
+            <p>
+              推荐：
               <el-switch
                 @change="handleRecommendStatusChange(scope.$index, scope.row)"
                 :active-value="1"
                 :inactive-value="0"
-                v-model="scope.row.recommandStatus">
-              </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>
+                v-model="scope.row.recommandStatus"
+              ></el-switch>
             </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
-                size="mini"
-                @click="handleUpdateProduct(scope.$index, scope.row)">编辑
-              </el-button>
+              <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
-                size="mini"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)">删除
-              </el-button>
+              <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">
-        </el-option>
+          :value="item.value"
+        ></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">
-      </el-pagination>
+        :total="total"
+      ></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 {
-    fetchList,
-    updateDeleteStatus,
-    updateNewStatus,
-    updateRecommendStatus,
-    updatePublishStatus
-  } 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'
+import {
+  fetchList,
+  updateDeleteStatus,
+  updateNewStatus,
+  updateRecommendStatus,
+  updatePublishStatus,
+} from '@/api/product';
 
-  const defaultListQuery = {
-    keyword: null,
-    pageNum: 1,
-    pageSize: 5,
-    publishStatus: null,
-    verifyStatus: null,
-    productSn: null,
-    productCategoryId: null,
-    brandId: null
-  };
-  export default {
-    name: "productList",
-    data() {
-      return {
-        editSkuInfo:{
-          dialogVisible:false,
-          productId:null,
-          productSn:'',
-          productAttributeCategoryId:null,
-          stockList:[],
-          productAttr:[],
-          keyword:null
-        },
-        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: '未审核'
-        }]
-      }
+export default {
+  name: 'productList',
+  data() {
+    return {
+      listQuery: { pageNum: 1, pageSize: 5 },
+      list: [],
+      total: 0,
+      listLoading: false,
+      operates: [{ label: '商品上架', value: 'publishOn' }],
+      operateType: null,
+    };
+  },
+  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;
+      });
     },
-    created() {
+    // 重置搜索
+    handleResetSearch() {
+      this.listQuery = { pageNum: 1, pageSize: 5 };
       this.getList();
-      this.getBrandList();
-      this.getProductCateList();
     },
-    watch: {
-      selectProductCateValue: function (newValue) {
-        if (newValue != null && newValue.length == 2) {
-          this.listQuery.productCategoryId = newValue[1];
-        } else {
-          this.listQuery.productCategoryId = null;
-        }
-
-      }
+    // 查询列表
+    handleSearchList() {
+      this.listQuery.pageNum = 1;
+      this.getList();
     },
-    filters: {
-      verifyStatusFilter(value) {
-        if (value === 1) {
-          return '审核通过';
-        } else {
-          return '未审核';
-        }
-      }
+    // 添加商品
+    handleAddProduct() {
+      this.$router.push('/pms/addProduct');
     },
-    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,12 +1,24 @@
-<template> 
-  <product-detail :is-edit='true'></product-detail>
+<template>
+  <!-- 商品详情组件，用于编辑商品 -->
+  <!-- 通过 `:is-edit="true"` 传递一个布尔值，标识当前操作是编辑模式 -->
+  <product-detail :is-edit="true"></product-detail>
 </template>
+
 <script>
-  import ProductDetail from './components/ProductDetail'
-  export default {
-    name: 'updateProduct',
-    components: { ProductDetail }
-  }
+/**
+ * 导入 ProductDetail 组件，作为编辑商品的核心组件
+ * 该组件内部根据传入的 `is-edit` 参数区分新增或编辑模式
+ */
+import ProductDetail from './components/ProductDetail';
+
+export default {
+  name: 'updateProduct', // 组件名称：用于标识当前页面
+  components: {
+    ProductDetail, // 注册 ProductDetail 组件，使其可以在模板中使用
+  },
+};
 </script>
+
 <style>
+/* 样式部分：暂无自定义样式，根据需求可以添加 */
 </style>

src/views/pms/productAttr/addProductAttr.vue

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

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

@@ -1,25 +1,38 @@
 <template>
+  <!-- 属性详情表单卡片 -->
   <el-card class="form-container" shadow="never">
-    <el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px">
+    <el-form
+      :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">
-          </el-option>
+            :value="item.id"
+          ></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>
@@ -27,12 +40,16 @@
           <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>
@@ -40,146 +57,178 @@
           <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 :autosize="true" type="textarea" v-model="inputListFormat"></el-input>
+        <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'
-  import {createProductAttr,getProductAttr,updateProductAttr} from '@/api/productAttr'
+import { fetchList } from '@/api/productAttrCate'; // 获取商品类型分类API
+import {
+  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,
+};
 
-  const defaultProductAttr = {
-    filterType: 0,
-    handAddStatus: 0,
-    inputList: '',
-    inputType: 0,
-    name: '',
-    productAttributeCategoryId: 0,
-    relatedStatus: 0,
-    searchType: 0,
-    selectType: 0,
-    sort: 0,
-    type: 0
-  };
-  export default {
-    name: "ProductAttrDetail",
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: 'ProductAttrDetail', // 组件名称
+  props: {
+    isEdit: {
+      type: Boolean, // 是否编辑模式
+      default: false,
     },
-    data() {
-      return {
-        productAttr: Object.assign({}, defaultProductAttr),
-        rules: {
-          name: [
-            {required: true, message: '请输入属性名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-          ]
-        },
-        productAttrCateList: null,
-        inputListFormat:null
-      }
+  },
+  data() {
+    return {
+      productAttr: Object.assign({}, defaultProductAttr), // 商品属性对象
+      rules: {
+        // 表单验证规则
+        name: [
+          { required: true, message: '请输入属性名称', trigger: 'blur' },
+          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
+        ],
+      },
+      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() {
-      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();
+  },
+  methods: {
+    // 获取商品分类列表
+    getCateList() {
+      let listQuery = { pageNum: 1, pageSize: 100 };
+      fetchList(listQuery).then((response) => {
+        this.productAttrCateList = response.data.list;
+      });
     },
-    watch:{
-      inputListFormat: function (newValue, oldValue) {
-        newValue = newValue.replace(/\n/g,',');
-        this.productAttr.inputList = newValue;
-      }
+    // 重置商品属性对象
+    resetProductAttr() {
+      this.productAttr = Object.assign({}, defaultProductAttr);
+      this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
+      this.productAttr.type = Number(this.$route.query.type);
     },
-    methods: {
-      getCateList() {
-        let listQuery = {pageNum: 1, pageSize: 100};
-        fetchList(listQuery).then(response => {
-          this.productAttrCateList = response.data.list;
-        });
-      },
-      resetProductAttr() {
-        this.productAttr = Object.assign({}, defaultProductAttr);
-        this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
-        this.productAttr.type = Number(this.$route.query.type);
-      },
-      onSubmit(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$confirm('是否提交数据', '提示', {
-              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();
+    // 提交表单
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 弹窗确认
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }).then(() => {
+            if (this.isEdit) {
+              // 编辑模式：更新数据
+              updateProductAttr(this.$route.query.id, this.productAttr).then(() => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000,
                 });
-              }else{
-                createProductAttr(this.productAttr).then(response=>{
-                  this.$message({
-                    message: '提交成功',
-                    type: 'success',
-                    duration: 1000
-                  });
-                  this.resetForm('productAttrFrom');
+                this.$router.back();
+              });
+            } else {
+              // 新增模式：创建数据
+              createProductAttr(this.productAttr).then(() => {
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000,
                 });
-              }
-            });
-
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration: 1000
-            });
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-        this.resetProductAttr();
-      }
+                this.resetForm(formName);
+              });
+            }
+          });
+        } else {
+          // 表单验证失败
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000,
+          });
+          return false;
+        }
+      });
     },
-  }
+    // 重置表单
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetProductAttr();
+    },
+  },
+};
 </script>
 
 <style scoped>
-
+/* 样式部分：可以根据需求添加自定义样式 */
 </style>

src/views/pms/productAttr/index.vue

@@ -1,82 +1,103 @@
-<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
-        class="btn-add"
-        @click="addProductAttrCate()"
-        size="mini">
-        添加
-      </el-button>
+      <!-- 添加商品属性分类按钮 -->
+      <el-button class="btn-add" @click="addProductAttrCate()" size="mini">添加</el-button>
     </el-card>
+
+    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table ref="productAttrCateTable"
-                style="width: 100%"
-                :data="list"
-                v-loading="listLoading"
-                border>
+      <el-table
+        ref="productAttrCateTable"
+        style="width: 100%"
+        :data="list"
+        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="200" align="center">
-          <template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template>
+          <template slot-scope="scope">
+            {{ scope.row.attributeCount == null ? 0 : scope.row.attributeCount }}
+          </template>
         </el-table-column>
+
+        <!-- 列：参数数量 -->
         <el-table-column label="参数数量" width="200" align="center">
-          <template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template>
+          <template slot-scope="scope">
+            {{ 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
-              size="mini"
-              @click="getAttrList(scope.$index, scope.row)">属性列表
+            <!-- 属性列表按钮 -->
+            <el-button size="mini" @click="getAttrList(scope.$index, scope.row)">
+              属性列表
             </el-button>
-            <el-button
-              size="mini"
-              @click="getParamList(scope.$index, scope.row)">参数列表
+            <!-- 参数列表按钮 -->
+            <el-button 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
-              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" @click="handleUpdate(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">
-      </el-pagination>
+        :total="total"
+      ></el-pagination>
     </div>
+
+    <!-- 弹出框：添加/编辑商品属性分类 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
-      :before-close="handleClose()"
-      width="30%">
-      <el-form ref="productAttrCatForm":model="productAttrCate" :rules="rules" label-width="120px">
+      :before-close="handleClose"
+      width="30%"
+    >
+      <!-- 表单：输入类型名称 -->
+      <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>
@@ -84,127 +105,155 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
-  import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttrCate'
-
-  export default {
-    name: 'productAttrCateList',
-    data() {
-      return {
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
-          pageNum: 1,
-          pageSize: 5
-        },
-        dialogVisible: false,
-        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 = "添加类型";
+/**
+ * 导入商品属性分类相关的 API
+ */
+import {
+  fetchList,
+  createProductAttrCate,
+  deleteProductAttrCate,
+  updateProductAttrCate,
+} from '@/api/productAttrCate';
+
+export default {
+  name: 'productAttrCateList', // 组件名称
+  data() {
+    return {
+      list: null, // 数据列表
+      total: null, // 数据总条数
+      listLoading: true, // 加载状态
+      listQuery: {
+        pageNum: 1,
+        pageSize: 5,
       },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
+      dialogVisible: false, // 控制弹窗的显示
+      dialogTitle: '', // 弹窗标题
+      productAttrCate: {
+        name: '',
+        id: null,
       },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
+      rules: {
+        name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
       },
-      handleDelete(index, row) {
-        this.$confirm('是否要删除该品牌', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deleteProductAttrCate(row.id).then(response=>{
-            this.$message({
-              message: '删除成功',
-              type: 'success',
-              duration:1000
-            });
-            this.getList();
+    };
+  },
+  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();
+    },
+
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.listQuery.pageNum = val;
+      this.getList();
+    },
+
+    // 删除商品属性分类
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该分类？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        deleteProductAttrCate(row.id).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000,
           });
+          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();
-              });
-            }
+      });
+    },
+
+    // 编辑商品属性分类
+    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) {
+          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();
+            });
           } else {
-            console.log('error submit!!');
-            return false;
+            // 修改类型
+            updateProductAttrCate(this.productAttrCate.id, data).then(() => {
+              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>
-
 
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+</style>

src/views/pms/productAttr/productAttrList.vue

@@ -1,219 +1,248 @@
-<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
-        class="btn-add"
-        @click="addProductAttr()"
-        size="mini">
-        添加
-      </el-button>
+      <!-- 添加按钮：跳转到添加商品属性页面 -->
+      <el-button class="btn-add" @click="addProductAttr()" size="mini">添加</el-button>
     </el-card>
+
+    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table ref="productAttrTable"
-                :data="list"
-                style="width: 100%"
-                @selection-change="handleSelectionChange"
-                v-loading="listLoading"
-                border>
+      <el-table
+        ref="productAttrTable"
+        :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>
+          <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
-              size="mini"
-              @click="handleUpdate(scope.$index, scope.row)">编辑
-            </el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除
-            </el-button>
+            <!-- 编辑按钮 -->
+            <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>
           </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">
-        </el-option>
+          :value="item.value"
+        ></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">
-      </el-pagination>
+        :total="total"
+      ></el-pagination>
     </div>
   </div>
 </template>
+
 <script>
-  import {fetchList, deleteProductAttr} from '@/api/productAttr'
-
-  export default {
-    name: 'productAttrList',
-    data() {
-      return {
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
-          pageNum: 1,
-          pageSize: 5,
-          type: this.$route.query.type
-        },
-        operateType: null,
-        multipleSelection: [],
-        operates: [
-          {
-            label: "删除",
-            value: "deleteProductAttr"
-          }
-        ]
+/**
+ * 导入商品属性相关 API
+ */
+import { fetchList, deleteProductAttr } from '@/api/productAttr';
+
+export default {
+  name: 'productAttrList', // 组件名称
+  data() {
+    return {
+      list: null, // 商品属性数据列表
+      total: null, // 数据总条数
+      listLoading: true, // 加载状态
+      listQuery: {
+        pageNum: 1,
+        pageSize: 5,
+        type: this.$route.query.type, // 查询参数，来源于路由
+      },
+      operateType: null, // 批量操作类型
+      multipleSelection: [], // 多选的属性集合
+      operates: [
+        { 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();
     },
-    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 < 1) {
-          this.$message({
-            message: '请选择一条记录',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        if (this.operateType !== 'deleteProductAttr') {
+
+    // 页码切换
+    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(() => {
+        const data = new URLSearchParams();
+        data.append('ids', ids);
+        deleteProductAttr(data).then(() => {
           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();
+            message: '删除成功',
+            type: 'success',
+            duration: 1000,
           });
+          this.getList();
         });
-      },
-      handleDelete(index, row) {
-        let ids = [];
-        ids.push(row.id);
-        this.handleDeleteProductAttr(ids);
-      },
+      });
     },
-    filters: {
-      inputTypeFilter(value) {
-        if (value === 1) {
-          return '从列表中选取';
-        } else {
-          return '手工录入'
-        }
-      },
-      selectTypeFilter(value) {
-        if (value === 1) {
-          return '单选';
-        } else if (value === 2) {
-          return '多选';
-        } else {
-          return '唯一'
-        }
-      },
-    }
-  }
-</script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+    // 删除单个商品属性
+    handleDelete(index, row) {
+      const ids = [row.id];
+      this.handleDeleteProductAttr(ids);
+    },
+  },
+  filters: {
+    // 过滤器：属性值的录入方式
+    inputTypeFilter(value) {
+      return value === 1 ? '从列表中选取' : '手工录入';
+    },
+    // 过滤器：属性是否可选
+    selectTypeFilter(value) {
+      if (value === 1) return '单选';
+      if (value === 2) return '多选';
+      return '唯一';
+    },
+  },
+};
+</script>
 
+<style scoped>
+/* 自定义样式区域 */
+.app-container {
+  padding: 20px;
+}
 </style>
-
-

src/views/pms/productAttr/updateProductAttr.vue

@@ -1,15 +1,20 @@
 <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',
-    components: { ProductAttrDetail }
-  }
+    name: 'updateProductAttr', // 组件名称
+    components: {
+      ProductAttrDetail, // 注册 ProductAttrDetail 组件
+    },
+  };
 </script>
 
 <style scoped>
-
+/* scoped 表示样式只会应用于当前组件 */
 </style>

src/views/pms/productCate/add.vue

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

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

@@ -1,15 +1,19 @@
 <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"
@@ -18,47 +22,67 @@
           </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>
@@ -68,6 +92,7 @@
 </template>
 
 <script>
+  // API 引入
   import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
   import {fetchListWithAttr} from '@/api/productAttrCate';
   import {getProductAttrInfo} from '@/api/productAttr';
@@ -85,9 +110,10 @@
     sort: 0,
     productAttributeIdList: []
   };
+
   export default {
     name: "ProductCateDetail",
-    components: {SingleUpload},
+    components: { SingleUpload },
     props: {
       isEdit: {
         type: Boolean,
@@ -97,168 +123,114 @@
     data() {
       return {
         productCate: Object.assign({}, defaultProductCate),
-        selectProductCateList: [],
+        selectProductCateList: [], // 上级分类列表
         rules: {
           name: [
-            {required: true, message: '请输入品牌名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+            { required: true, message: '请输入品牌名称', trigger: 'blur' },
+            { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
           ]
         },
-        filterAttrs: [],
-        filterProductAttrList: [{
-          value: []
-        }]
-      }
+        filterAttrs: [], // 筛选属性列表
+        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 = [];
-            for (let i = 0; i < response.data.length; i++) {
-              this.filterProductAttrList.push({
-                key: Date.now() + i,
-                value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
-              })
-            }
+            this.filterProductAttrList = response.data.map((item, index) => ({
+              key: Date.now() + index,
+              value: [item.attributeCategoryId, item.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 => {
-          let list = response.data;
-          for (let i = 0; i < list.length; i++) {
-            let productAttrCate = list[i];
-            let children = [];
-            if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
-              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});
-          }
+          this.filterAttrs = response.data.map(category => ({
+            label: category.name,
+            value: category.id,
+            children: category.productAttributeList.map(attr => ({
+              label: attr.name,
+              value: attr.id
+            }))
+          }));
         });
       },
-      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('是否提交数据', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(() => {
+            this.$confirm('是否提交数据', '提示', { type: 'warning' }).then(() => {
+              this.productCate.productAttributeIdList = this.getProductAttributeIdList();
               if (this.isEdit) {
-                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
-                updateProductCate(this.$route.query.id, this.productCate).then(response => {
-                  this.$message({
-                    message: '修改成功',
-                    type: 'success',
-                    duration: 1000
-                  });
+                updateProductCate(this.$route.query.id, this.productCate).then(() => {
+                  this.$message.success('修改成功');
                   this.$router.back();
                 });
               } else {
-                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
-                createProductCate(this.productCate).then(response => {
-                  this.$refs[formName].resetFields();
+                createProductCate(this.productCate).then(() => {
                   this.resetForm(formName);
-                  this.$message({
-                    message: '提交成功',
-                    type: 'success',
-                    duration: 1000
-                  });
+                  this.$message.success('提交成功');
                 });
               }
             });
-
           } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration: 1000
-            });
-            return false;
+            this.$message.error('验证失败');
           }
         });
       },
+      // 重置表单
       resetForm(formName) {
         this.$refs[formName].resetFields();
         this.productCate = Object.assign({}, defaultProductCate);
-        this.getSelectProductCateList();
-        this.filterProductAttrList = [{
-          value: []
-        }];
       },
-      removeFilterAttr(productAttributeId) {
-        if (this.filterProductAttrList.length === 1) {
-          this.$message({
-            message: '至少要留一个',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        var index = this.filterProductAttrList.indexOf(productAttributeId);
-        if (index !== -1) {
-          this.filterProductAttrList.splice(index, 1)
-        }
+      // 获取选中的筛选属性ID列表
+      getProductAttributeIdList() {
+        return this.filterProductAttrList
+          .filter(item => item.value.length === 2)
+          .map(item => item.value[1]);
+      },
+      // 删除筛选属性
+      removeFilterAttr(filterAttr) {
+        const index = this.filterProductAttrList.indexOf(filterAttr);
+        if (index > -1) this.filterProductAttrList.splice(index, 1);
       },
+      // 添加筛选属性
       handleAddFilterAttr() {
-        if (this.filterProductAttrList.length === 3) {
-          this.$message({
-            message: '最多添加三个',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
+        if (this.filterProductAttrList.length < 3) {
+          this.filterProductAttrList.push({ value: [], key: Date.now() });
+        } else {
+          this.$message.warning('最多添加三个');
         }
-        this.filterProductAttrList.push({
-          value: null,
-          key: Date.now()
-        });
       }
     },
     filters: {
+      // 自定义过滤器，为第一个筛选属性设置标签
       filterLabelFilter(index) {
-        if (index === 0) {
-          return '筛选属性：';
-        } else {
-          return '';
-        }
+        return index === 0 ? '筛选属性：' : '';
       }
     }
-  }
+  };
 </script>
 
 <style scoped>
-
+/* 本地样式，样式只对当前组件生效 */
 </style>

src/views/pms/productCate/index.vue

@@ -1,35 +1,53 @@
 <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 ref="productCateTable"
-                style="width: 100%"
-                :data="list"
-                v-loading="listLoading" border>
+      <el-table
+        ref="productCateTable"
+        style="width: 100%"
+        :data="list"
+        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
@@ -40,6 +58,8 @@
             </el-switch>
           </template>
         </el-table-column>
+
+        <!-- 列：是否显示 -->
         <el-table-column label="是否显示" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -50,9 +70,13 @@
             </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
@@ -66,6 +90,8 @@
             </el-button>
           </template>
         </el-table-column>
+
+        <!-- 列：操作 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <el-button
@@ -81,14 +107,16 @@
         </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>
@@ -97,44 +125,46 @@
 </template>
 
 <script>
-  import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate'
+  // API 引入
+  import {
+    fetchList,
+    deleteProductCate,
+    updateShowStatus,
+    updateNavStatus
+  } from '@/api/productCate';
 
   export default {
     name: "productCateList",
     data() {
       return {
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
+        list: null, // 数据列表
+        total: null, // 数据总数
+        listLoading: true, // 加载状态
+        listQuery: { // 查询条件
           pageNum: 1,
           pageSize: 5
         },
-        parentId: 0
-      }
+        parentId: 0 // 当前父级分类ID
+      };
     },
     created() {
       this.resetParentId();
       this.getList();
     },
     watch: {
-      $route(route) {
+      // 监听路由变化，重新获取列表
+      $route() {
         this.resetParentId();
         this.getList();
       }
     },
     methods: {
-      resetParentId(){
+      // 重置父级分类ID
+      resetParentId() {
         this.listQuery.pageNum = 1;
-        if (this.$route.query.parentId != null) {
-          this.parentId = this.$route.query.parentId;
-        } else {
-          this.parentId = 0;
-        }
-      },
-      handleAddProductCate() {
-        this.$router.push('/pms/addProductCate');
+        this.parentId = this.$route.query.parentId || 0;
       },
+      // 获取数据列表
       getList() {
         this.listLoading = true;
         fetchList(this.parentId, this.listQuery).then(response => {
@@ -143,88 +173,77 @@
           this.total = response.data.total;
         });
       },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
+      // 添加分类
+      handleAddProductCate() {
+        this.$router.push('/pms/addProductCate');
       },
+      // 修改导航栏状态
       handleNavStatusChange(index, row) {
         let data = new URLSearchParams();
-        let ids=[];
-        ids.push(row.id)
-        data.append('ids',ids);
-        data.append('navStatus',row.navStatus);
-        updateNavStatus(data).then(response=>{
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-            duration: 1000
-          });
+        data.append('ids', row.id);
+        data.append('navStatus', row.navStatus);
+        updateNavStatus(data).then(() => {
+          this.$message.success('修改成功');
         });
       },
+      // 修改显示状态
       handleShowStatusChange(index, row) {
         let data = new URLSearchParams();
-        let ids=[];
-        ids.push(row.id)
-        data.append('ids',ids);
-        data.append('showStatus',row.showStatus);
-        updateShowStatus(data).then(response=>{
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-            duration: 1000
-          });
+        data.append('ids', row.id);
+        data.append('showStatus', row.showStatus);
+        updateShowStatus(data).then(() => {
+          this.$message.success('修改成功');
         });
       },
+      // 查看下级分类
       handleShowNextLevel(index, row) {
-        this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
-      },
-      handleTransferProduct(index, row) {
-        console.log('handleAddProductCate');
+        this.$router.push({ path: '/pms/productCate', query: { parentId: row.id } });
       },
+      // 编辑分类
       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(response => {
-            this.$message({
-              message: '删除成功',
-              type: 'success',
-              duration: 1000
-            });
+          deleteProductCate(row.id).then(() => {
+            this.$message.success('删除成功');
             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) {
-        if (value === 0) {
-          return '一级';
-        } else if (value === 1) {
-          return '二级';
-        }
+        return value === 0 ? '一级' : '二级';
       },
+      // 禁用下级按钮过滤器
       disableNextLevel(value) {
-        if (value === 0) {
-          return false;
-        } else {
-          return true;
-        }
+        return value !== 0;
       }
     }
-  }
+  };
 </script>
 
 <style scoped>
-
+/* 样式留空，按需添加 */
 </style>

src/views/pms/productCate/update.vue

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