wangzhuo

src/views/pms/brand/add.vue

@@ -1,14 +1,19 @@
-<template> 
+<template>
-  <brand-detail :is-edit='false'></brand-detail>
+  <!-- 使用 BrandDetail 组件并传递 is-edit 属性为 false，表示新增品牌模式 -->
+  <brand-detail :is-edit="false"></brand-detail>
 </template>
+
 <script>
-  import BrandDetail from './components/BrandDetail'
+import BrandDetail from "./components/BrandDetail"; // 导入 BrandDetail 组件
-  export default {
+
-    name: 'addBrand',
+export default {
-    components: { BrandDetail }
+  name: "addBrand", // 组件名称，用于在调试或开发工具中标识组件
-  }
+  components: {
+    BrandDetail, // 注册子组件 BrandDetail
+  },
+};
 </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>
+      <div>
-          <i class="el-icon-search"></i>
+        <!-- 搜索标题和按钮 -->
-          <span>筛选搜索</span>
+        <i class="el-icon-search"></i>
-          <el-button
+        <span>筛选搜索</span>
-            style="float: right"
+        <el-button
-            @click="searchBrandList()"
+          style="float: right"
-            type="primary"
+          @click="searchBrandList()"
-            size="small">
+          type="primary"
-            查询结果
+          size="small">
-          </el-button>
+          查询结果
-        </div>
+        </el-button>
-        <div style="margin-top: 15px">
+      </div>
-          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+      <!-- 筛选条件 -->
-            <el-form-item label="输入搜索：">
+      <div style="margin-top: 15px">
-              <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
+        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-            </el-form-item>
+          <el-form-item label="输入搜索：">
-          </el-form>
+            <el-input
-        </div>
+              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"
+      <el-table
-                :data="list"
+        ref="brandTable"
-                style="width: 100%"
+        :data="list"
-                @selection-change="handleSelectionChange"
+        style="width: 100%"
-                v-loading="listLoading"
+        @selection-change="handleSelectionChange"
-                border>
+        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
+            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">
-              size="mini"
+              编辑
-              @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
-            <el-button
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
-              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
+      <el-select size="small" v-model="operateType" placeholder="批量操作">
-        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 {
+export default {
-    name: 'brandList',
+  name: "brandList", // 组件名称
-    data() {
+  data() {
-      return {
+    return {
-        operates: [
+      operates: [
-          {
+        { label: "显示品牌", value: "showBrand" },
-            label: "显示品牌",
+        { label: "隐藏品牌", value: "hideBrand" },
-            value: "showBrand"
+      ],
-          },
+      operateType: null, // 批量操作类型
-          {
+      listQuery: {
-            label: "隐藏品牌",
+        keyword: null,
-            value: "hideBrand"
+        pageNum: 1,
-          }
+        pageSize: 10,
-        ],
+      },
-        operateType: null,
+      list: null, // 品牌数据列表
-        listQuery: {
+      total: null, // 数据总数
-          keyword: null,
+      listLoading: true, // 加载状态
-          pageNum: 1,
+      multipleSelection: [], // 多选数据
-          pageSize: 10
+    };
-        },
+  },
-        list: null,
+  created() {
-        total: null,
+    this.getList(); // 初始化加载列表数据
-        listLoading: true,
+  },
-        multipleSelection: []
+  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() {
+    handleBatchOperate() {
-        this.listLoading = true;
+      console.log(this.multipleSelection);
-        fetchList(this.listQuery).then(response => {
+    },
-          this.listLoading = false;
+    // 添加品牌
-          this.list = response.data.list;
+    addBrand() {
-          this.total = response.data.total;
+      this.$router.push({ path: "/pms/addBrand" });
-          this.totalPage = response.data.totalPage;
+    },
-          this.pageSize = response.data.pageSize;
+    // 更新品牌状态
-        });
+    handleUpdate(index, row) {
-      },
+      this.$router.push({ path: "/pms/updateBrand", query: { id: row.id } });
-      handleSelectionChange(val) {
+    },
-        this.multipleSelection = val;
+    // 删除品牌
-      },
+    handleDelete(index, row) {
-      handleUpdate(index, row) {
+      deleteBrand(row.id).then(() => {
-        this.$router.push({path: '/pms/updateBrand', query: {id: row.id}})
+        this.$message({ message: "删除成功", type: "success" });
-      },
-      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;
         this.getList();
-      },
+      });
-      handleBatchOperate() {
+    },
-        console.log(this.multipleSelection);
+    // 分页事件
-        if (this.multipleSelection < 1) {
+    handleSizeChange(val) {
-          this.$message({
+      this.listQuery.pageSize = val;
-            message: '请选择一条记录',
+      this.getList();
-            type: 'warning',
+    },
-            duration: 1000
+    handleCurrentChange(val) {
-          });
+      this.listQuery.pageNum = val;
-          return;
+      this.getList();
-        }
+    },
-        let showStatus = 0;
+  },
-        if (this.operateType === 'showBrand') {
+};
-          showStatus = 1;
-        } else if (this.operateType === 'hideBrand') {
-          showStatus = 0;
-        } else {
-          this.$message({
-            message: '请选择批量操作类型',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        let ids = [];
-        for (let i = 0; i < this.multipleSelection.length; i++) {
-          ids.push(this.multipleSelection[i].id);
-        }
-        let data = new URLSearchParams();
-        data.append("ids", ids);
-        data.append("showStatus", showStatus);
-        updateShowStatus(data).then(response => {
-          this.getList();
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-            duration: 1000
-          });
-        });
-      },
-      addBrand() {
-        this.$router.push({path: '/pms/addBrand'})
-      }
-    }
-  }
 </script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-
 
+<style lang="scss" scoped>
+/* 自定义样式 */
 </style>
-
-

src/views/pms/brand/update.vue

@@ -1,14 +1,19 @@
-<template> 
+<template>
-  <brand-detail :is-edit='true'></brand-detail>
+  <!-- 使用 BrandDetail 组件，并传递 is-edit 属性为 true，表示编辑品牌模式 -->
+  <brand-detail :is-edit="true"></brand-detail>
 </template>
+
 <script>
-  import BrandDetail from './components/BrandDetail'
+import BrandDetail from './components/BrandDetail'; // 导入 BrandDetail 组件
-  export default {
+
-    name: 'updateBrand',
+export default {
-    components: { BrandDetail }
+  name: 'updateBrand', // 组件名称，用于标识当前页面或调试时使用
-  }
+  components: {
+    BrandDetail, // 注册 BrandDetail 组件，使其可以在模板中使用
+  },
+};
 </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"
+        <el-select
-                   placeholder="请选择属性类型"
+          v-model="value.productAttributeCategoryId"
-                   @change="handleProductAttrChange">
+          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">
+          <div v-for="(productAttr, idx) in selectProductAttr" :key="idx">
-            {{productAttr.name}}：
+            <!-- 显示属性名称 -->
-            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
+            {{ productAttr.name }}：
-              <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
+
-                           class="littleMarginLeft"></el-checkbox>
+            <!-- 当 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"
+                <div
-                     class="littleMarginLeft">
+                  v-for="(item, index) in selectProductAttr[idx].options"
-                  <el-checkbox :label="item" :key="item"></el-checkbox>
+                  :key="index"
-                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
+                  style="display: inline-block" class="littleMarginLeft">
-                  </el-button>
+                  <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"
+        <!-- SKU 列表表格 -->
-                  border>
+        <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"
+          <el-table-column label="销售价格" width="100" align="center">
-            align="center">
             <template slot-scope="scope">
               <el-input v-model="scope.row.price"></el-input>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column label="促销价格" width="100" align="center">
-            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
+          <el-table-column label="商品库存" width="80" align="center">
-            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
+          <el-table-column label="库存预警值" width="80" align="center">
-            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
+          <el-table-column label="SKU编号" width="160" align="center">
-            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
+          <el-table-column label="操作" width="80" align="center">
-            label="操作"
-            width="80"
-            align="center">
             <template slot-scope="scope">
-              <el-button
+              <el-button type="text" @click="handleRemoveProductSku(scope.$index)">删除</el-button>
-                type="text"
-                @click="handleRemoveProductSku(scope.$index, scope.row)">删除
-              </el-button>
             </template>
           </el-table-column>
         </el-table>
-        <el-button
+
-          type="primary"
+        <!-- 操作按钮：刷新、同步价格、同步库存 -->
-          style="margin-top: 20px"
+        <el-button type="primary" style="margin-top: 20px" @click="handleRefreshProductSkuList">刷新列表</el-button>
-          @click="handleRefreshProductSkuList">刷新列表
+        <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuPrice">同步价格</el-button>
-        </el-button>
+        <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuStock">同步库存</el-button>
-        <el-button
-          type="primary"
-          style="margin-top: 20px"
-          @click="handleSyncProductSkuPrice">同步价格
-        </el-button>
-        <el-button
-          type="primary"
-          style="margin-top: 20px"
-          @click="handleSyncProductSkuStock">同步库存
-        </el-button>
-      </el-form-item>
-      <el-form-item label="属性图片：" v-if="hasAttrPic">
-        <el-card shadow="never" class="cardBg">
-          <div v-for="(item,index) in selectProductAttrPics">
-            <span>{{item.name}}:</span>
-            <single-upload v-model="item.pic"
-                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
-          </div>
-        </el-card>
-      </el-form-item>
-      <el-form-item label="商品参数：">
-        <el-card shadow="never" class="cardBg">
-          <div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
-            <div class="paramInputLabel">{{item.name}}:</div>
-            <el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
-              <el-option
-                v-for="item in getParamInputList(item.inputList)"
-                :key="item"
-                :label="item"
-                :value="item">
-              </el-option>
-            </el-select>
-            <el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
-          </div>
-        </el-card>
       </el-form-item>
+
+      <!-- 商品相册 -->
       <el-form-item label="商品相册：">
         <multi-upload v-model="selectProductPics"></multi-upload>
       </el-form-item>
+
+      <!-- 商品详情编辑器 -->
       <el-form-item label="商品详情：">
         <el-tabs v-model="activeHtmlName" type="card">
           <el-tab-pane label="电脑端详情" name="pc">
@@ -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 fetchProductAttrCateList } from '@/api/productAttrCate';
-  import {fetchList as fetchProductAttrList} from '@/api/productAttr'
+import { fetchList as fetchProductAttrList } from '@/api/productAttr';
-  import SingleUpload from '@/components/Upload/singleUpload'
+import SingleUpload from '@/components/Upload/singleUpload';
-  import MultiUpload from '@/components/Upload/multiUpload'
+import MultiUpload from '@/components/Upload/multiUpload';
-  import Tinymce from '@/components/Tinymce'
+import Tinymce from '@/components/Tinymce';
 
-  export default {
+export default {
-    name: "ProductAttrDetail",
+  name: 'ProductAttrDetail', // 组件名称
-    components: {SingleUpload, MultiUpload, Tinymce},
+  components: { SingleUpload, MultiUpload, Tinymce }, // 注册组件
-    props: {
+  props: {
-      value: Object,
+    value: Object, // 父组件传入的表单数据对象
-      isEdit: {
+    isEdit: { type: Boolean, default: false } // 编辑模式标志
-        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 {
+    handleProductAttrChange(value) {
-        //编辑模式时是否初始化成功
+      this.getProductAttrList(0, value); // 商品规格
-        hasEditCreated:false,
+      this.getProductAttrList(1, value); // 商品参数
-        //商品属性分类下拉选项
-        productAttributeCategoryOptions: [],
-        //选中的商品属性
-        selectProductAttr: [],
-        //选中的商品参数
-        selectProductParam: [],
-        //选中的商品属性图片
-        selectProductAttrPics: [],
-        //可手动添加的商品属性
-        addProductAttrValue: '',
-        //商品富文本详情激活类型
-        activeHtmlName: 'pc'
-      }
     },
-    computed: {
+    // 处理添加手动属性值
-      //是否有商品属性图片
+    handleAddProductAttrValue(idx) {
-      hasAttrPic() {
+      if (this.addProductAttrValue) {
-        if (this.selectProductAttrPics.length < 1) {
+        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
-          return false;
+        this.addProductAttrValue = '';
-        }
-        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 += ',';
-                }
-              }
-            }
-          }
-        }
       }
     },
-    created() {
+    // 删除 SKU 列表中的某一项
-      this.getProductAttrCateList();
+    handleRemoveProductSku(index) {
+      this.value.skuStockList.splice(index, 1);
     },
-    watch: {
+    // 上一步
-      productId:function (newValue) {
+    handlePrev() {
-        if(!this.isEdit)return;
+      this.$emit('prevStep');
-        if(this.hasEditCreated)return;
-        if(newValue===undefined||newValue==null||newValue===0)return;
-        this.handleEditCreated();
-      }
     },
-    methods: {
+    // 下一步
-      handleEditCreated() {
+    handleNext() {
-        //根据商品属性分类id获取属性和参数
+      this.$emit('nextStep');
-        if(this.value.productAttributeCategoryId!=null){
-          this.handleProductAttrChange(this.value.productAttributeCategoryId);
-        }
-        this.hasEditCreated=true;
-      },
-      getProductAttrCateList() {
-        let param = {pageNum: 1, pageSize: 100};
-        fetchProductAttrCateList(param).then(response => {
-          this.productAttributeCategoryOptions = [];
-          let list = response.data.list;
-          for (let i = 0; i < list.length; i++) {
-            this.productAttributeCategoryOptions.push({label: list[i].name, value: list[i].id});
-          }
-        });
-      },
-      getProductAttrList(type, cid) {
-        let param = {pageNum: 1, pageSize: 100, type: type};
-        fetchProductAttrList(cid, param).then(response => {
-          let list = response.data.list;
-          if (type === 0) {
-            this.selectProductAttr = [];
-            for (let i = 0; i < list.length; i++) {
-              let options = [];
-              let values = [];
-              if (this.isEdit) {
-                if (list[i].handAddStatus === 1) {
-                  //编辑状态下获取手动添加编辑属性
-                  options = this.getEditAttrOptions(list[i].id);
-                }
-                //编辑状态下获取选中属性
-                values = this.getEditAttrValues(i);
-              }
-              this.selectProductAttr.push({
-                id: list[i].id,
-                name: list[i].name,
-                handAddStatus: list[i].handAddStatus,
-                inputList: list[i].inputList,
-                values: values,
-                options: options
-              });
-            }
-            if(this.isEdit){
-              //编辑模式下刷新商品属性图片
-              this.refreshProductAttrPics();
-            }
-          } else {
-            this.selectProductParam = [];
-            for (let i = 0; i < list.length; i++) {
-              let value=null;
-              if(this.isEdit){
-                //编辑模式下获取参数属性
-                value= this.getEditParamValue(list[i].id);
-              }
-              this.selectProductParam.push({
-                id: list[i].id,
-                name: list[i].name,
-                value: value,
-                inputType: list[i].inputType,
-                inputList: list[i].inputList
-              });
-            }
-          }
-        });
-      },
-      //获取设置的可手动添加属性值
-      getEditAttrOptions(id) {
-        let options = [];
-        for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
-          let attrValue = this.value.productAttributeValueList[i];
-          if (attrValue.productAttributeId === id) {
-            let strArr = attrValue.value.split(',');
-            for (let j = 0; j < strArr.length; j++) {
-              options.push(strArr[j]);
-            }
-            break;
-          }
-        }
-        return options;
-      },
-      //获取选中的属性值
-      getEditAttrValues(index) {
-        let values = new Set();
-        if (index === 0) {
-          for (let i = 0; i < this.value.skuStockList.length; i++) {
-            let sku = this.value.skuStockList[i];
-            let spData = JSON.parse(sku.spData);
-            if (spData!= null && spData.length>=1) {
-              values.add(spData[0].value);
-            }
-          }
-        } else if (index === 1) {
-          for (let i = 0; i < this.value.skuStockList.length; i++) {
-            let sku = this.value.skuStockList[i];
-            let spData = JSON.parse(sku.spData);
-            if (spData!= null && spData.length>=2) {
-              values.add(spData[1].value);
-            }
-          }
-        } else {
-          for (let i = 0; i < this.value.skuStockList.length; i++) {
-            let sku = this.value.skuStockList[i];
-            let spData = JSON.parse(sku.spData);
-            if (spData!= null && spData.length>=3) {
-              values.add(spData[2].value);
-            }
-          }
-        }
-        return Array.from(values);
-      },
-      //获取属性的值
-      getEditParamValue(id){
-        for(let i=0;i<this.value.productAttributeValueList.length;i++){
-          if(id===this.value.productAttributeValueList[i].productAttributeId){
-            return this.value.productAttributeValueList[i].value;
-          }
-        }
-      },
-      handleProductAttrChange(value) {
-        this.getProductAttrList(0, value);
-        this.getProductAttrList(1, value);
-      },
-      getInputListArr(inputList) {
-        return inputList.split(',');
-      },
-      handleAddProductAttrValue(idx) {
-        let options = this.selectProductAttr[idx].options;
-        if (this.addProductAttrValue == null || this.addProductAttrValue == '') {
-          this.$message({
-            message: '属性值不能为空',
-            type: 'warning',
-            duration: 1000
-          });
-          return
-        }
-        if (options.indexOf(this.addProductAttrValue) !== -1) {
-          this.$message({
-            message: '属性值不能重复',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
-        this.addProductAttrValue = null;
-      },
-      handleRemoveProductAttrValue(idx, index) {
-        this.selectProductAttr[idx].options.splice(index, 1);
-      },
-      getProductSkuSp(row, index) {
-        let spData = JSON.parse(row.spData);
-        if(spData!=null&&index<spData.length){
-          return spData[index].value;
-        }else{
-          return null;
-        }
-      },
-      handleRefreshProductSkuList() {
-        this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.refreshProductAttrPics();
-          this.refreshProductSkuList();
-        });
-      },
-      handleSyncProductSkuPrice(){
-        this.$confirm('将同步第一个sku的价格到所有sku,是否继续', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
-            let tempSkuList = [];
-            tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
-            let price=this.value.skuStockList[0].price;
-            for(let i=0;i<tempSkuList.length;i++){
-              tempSkuList[i].price=price;
-            }
-            this.value.skuStockList=[];
-            this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
-          }
-        });
-      },
-      handleSyncProductSkuStock(){
-        this.$confirm('将同步第一个sku的库存到所有sku,是否继续', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
-            let tempSkuList = [];
-            tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
-            let stock=this.value.skuStockList[0].stock;
-            let lowStock=this.value.skuStockList[0].lowStock;
-            for(let i=0;i<tempSkuList.length;i++){
-              tempSkuList[i].stock=stock;
-              tempSkuList[i].lowStock=lowStock;
-            }
-            this.value.skuStockList=[];
-            this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
-          }
-        });
-      },
-      refreshProductSkuList() {
-        this.value.skuStockList = [];
-        let skuList = this.value.skuStockList;
-        //只有一个属性时
-        if (this.selectProductAttr.length === 1) {
-          let attr = this.selectProductAttr[0];
-          for (let i = 0; i < attr.values.length; i++) {
-            skuList.push({
-              spData: JSON.stringify([{key:attr.name,value:attr.values[i]}])
-            });
-          }
-        } else if (this.selectProductAttr.length === 2) {
-          let attr0 = this.selectProductAttr[0];
-          let attr1 = this.selectProductAttr[1];
-          for (let i = 0; i < attr0.values.length; i++) {
-            if (attr1.values.length === 0) {
-              skuList.push({
-                spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
-              });
-              continue;
-            }
-            for (let j = 0; j < attr1.values.length; j++) {
-              let spData = [];
-              spData.push({key:attr0.name,value:attr0.values[i]});
-              spData.push({key:attr1.name,value:attr1.values[j]});
-              skuList.push({
-                spData: JSON.stringify(spData)
-              });
-            }
-          }
-        } else {
-          let attr0 = this.selectProductAttr[0];
-          let attr1 = this.selectProductAttr[1];
-          let attr2 = this.selectProductAttr[2];
-          for (let i = 0; i < attr0.values.length; i++) {
-            if (attr1.values.length === 0) {
-              skuList.push({
-                spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
-              });
-              continue;
-            }
-            for (let j = 0; j < attr1.values.length; j++) {
-              if (attr2.values.length === 0) {
-                let spData = [];
-                spData.push({key:attr0.name,value:attr0.values[i]});
-                spData.push({key:attr1.name,value:attr1.values[j]});
-                skuList.push({
-                  spData: JSON.stringify(spData)
-                });
-                continue;
-              }
-              for (let k = 0; k < attr2.values.length; k++) {
-                let spData = [];
-                spData.push({key:attr0.name,value:attr0.values[i]});
-                spData.push({key:attr1.name,value:attr1.values[j]});
-                spData.push({key:attr2.name,value:attr2.values[k]});
-                skuList.push({
-                  spData: JSON.stringify(spData)
-                });
-              }
-            }
-          }
-        }
-      },
-      refreshProductAttrPics() {
-        this.selectProductAttrPics = [];
-        if (this.selectProductAttr.length >= 1) {
-          let values = this.selectProductAttr[0].values;
-          for (let i = 0; i < values.length; i++) {
-            let pic=null;
-            if(this.isEdit){
-              //编辑状态下获取图片
-              pic=this.getProductSkuPic(values[i]);
-            }
-            this.selectProductAttrPics.push({name: values[i], pic: pic})
-          }
-        }
-      },
-      //获取商品相关属性的图片
-      getProductSkuPic(name){
-        for(let i=0;i<this.value.skuStockList.length;i++){
-          let spData = JSON.parse(this.value.skuStockList[i].spData);
-          if(name===spData[0].value){
-            return this.value.skuStockList[i].pic;
-          }
-        }
-        return null;
-      },
-      //合并商品属性
-      mergeProductAttrValue() {
-        this.value.productAttributeValueList = [];
-        for (let i = 0; i < this.selectProductAttr.length; i++) {
-          let attr = this.selectProductAttr[i];
-          if (attr.handAddStatus === 1 && attr.options != null && attr.options.length > 0) {
-            this.value.productAttributeValueList.push({
-              productAttributeId: attr.id,
-              value: this.getOptionStr(attr.options)
-            });
-          }
-        }
-        for (let i = 0; i < this.selectProductParam.length; i++) {
-          let param = this.selectProductParam[i];
-          this.value.productAttributeValueList.push({
-            productAttributeId: param.id,
-            value: param.value
-          });
-        }
-      },
-      //合并商品属性图片
-      mergeProductAttrPics() {
-        for (let i = 0; i < this.selectProductAttrPics.length; i++) {
-          for (let j = 0; j < this.value.skuStockList.length; j++) {
-            let spData = JSON.parse(this.value.skuStockList[j].spData);
-            if (spData[0].value === this.selectProductAttrPics[i].name) {
-              this.value.skuStockList[j].pic = this.selectProductAttrPics[i].pic;
-            }
-          }
-        }
-      },
-      getOptionStr(arr) {
-        let str = '';
-        for (let i = 0; i < arr.length; i++) {
-          str += arr[i];
-          if (i != arr.length - 1) {
-            str += ',';
-          }
-        }
-        return str;
-      },
-      handleRemoveProductSku(index, row) {
-        let list = this.value.skuStockList;
-        if (list.length === 1) {
-          list.pop();
-        } else {
-          list.splice(index, 1);
-        }
-      },
-      getParamInputList(inputList) {
-        return inputList.split(',');
-      },
-      handlePrev() {
-        this.$emit('prevStep')
-      },
-      handleNext() {
-        this.mergeProductAttrValue();
-        this.mergeProductAttrPics();
-        this.$emit('nextStep')
-      }
     }
   }
+};
 </script>
 
 <style scoped>
-  .littleMarginLeft {
+.littleMarginLeft {
-    margin-left: 10px;
+  margin-left: 10px;
-  }
+}
-
-  .littleMarginTop {
-    margin-top: 10px;
-  }
-
-  .paramInput {
-    width: 250px;
-  }
 
-  .paramInputLabel {
+.cardBg {
-    display: inline-block;
+  background: #f8f9fc;
-    width: 100px;
+}
-    text-align: right;
-    padding-right: 10px
-  }
-
-  .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 ProductInfoDetail from './ProductInfoDetail'; // 商品信息组件
-  import ProductSaleDetail from './ProductSaleDetail';
+import ProductSaleDetail from './ProductSaleDetail'; // 商品促销组件
-  import ProductAttrDetail from './ProductAttrDetail';
+import ProductAttrDetail from './ProductAttrDetail'; // 商品属性组件
-  import ProductRelationDetail from './ProductRelationDetail';
+import ProductRelationDetail from './ProductRelationDetail'; // 商品关联组件
-  import {createProduct,getProduct,updateProduct} from '@/api/product';
+import { createProduct, getProduct, updateProduct } from '@/api/product'; // API 导入
 
-  const defaultProductParam = {
+// 定义默认的商品参数数据结构
-    albumPics: '',
+const defaultProductParam = {
-    brandId: null,
+  albumPics: '', // 商品相册图片
-    brandName: '',
+  brandId: null, // 品牌ID
-    deleteStatus: 0,
+  brandName: '', // 品牌名称
-    description: '',
+  deleteStatus: 0, // 删除状态
-    detailDesc: '',
+  description: '', // 商品描述
-    detailHtml: '',
+  detailDesc: '', // 详情描述
-    detailMobileHtml: '',
+  detailHtml: '', // 电脑端详情
-    detailTitle: '',
+  detailMobileHtml: '', // 移动端详情
-    feightTemplateId: 0,
+  detailTitle: '', // 详情标题
-    flashPromotionCount: 0,
+  feightTemplateId: 0, // 运费模板ID
-    flashPromotionId: 0,
+  flashPromotionCount: 0, // 秒杀数量
-    flashPromotionPrice: 0,
+  flashPromotionPrice: 0, // 秒杀价格
-    flashPromotionSort: 0,
+  giftPoint: 0, // 赠送积分
-    giftPoint: 0,
+  giftGrowth: 0, // 成长值
-    giftGrowth: 0,
+  keywords: '', // 关键词
-    keywords: '',
+  lowStock: 0, // 库存预警值
-    lowStock: 0,
+  name: '', // 商品名称
-    name: '',
+  newStatus: 0, // 新品状态
-    newStatus: 0,
+  originalPrice: 0, // 原价
-    note: '',
+  price: 0, // 价格
-    originalPrice: 0,
+  skuStockList: [], // SKU库存列表
-    pic: '',
+  productAttributeValueList: [], // 商品属性值列表
-    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
+  promotionStartTime: '', // 促销开始时间
-    memberPriceList: [],
+  promotionEndTime: '', // 促销结束时间
-    //商品满减
+  publishStatus: 0, // 发布状态
-    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
+  sale: 0, // 销售量
-    //商品阶梯价格
+  stock: 0, // 库存
-    productLadderList: [{count: 0,discount: 0,price: 0}],
+};
-    previewStatus: 0,
+
-    price: 0,
+export default {
-    productAttributeCategoryId: null,
+  name: 'ProductDetail', // 组件名称
-    //商品属性相关{productAttributeId: 0, value: ''}
+  components: {
-    productAttributeValueList: [],
+    ProductInfoDetail,
-    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
+    ProductSaleDetail,
-    skuStockList: [],
+    ProductAttrDetail,
-    //商品相关专题{subjectId: 0}
+    ProductRelationDetail,
-    subjectProductRelationList: [],
+  },
-    //商品相关优选{prefrenceAreaId: 0}
+  props: {
-    prefrenceAreaProductRelationList: [],
+    isEdit: {
-    productCategoryId: null,
+      type: Boolean,
-    productCategoryName: '',
+      default: false, // 是否为编辑模式，默认是新增
-    productSn: '',
+    },
-    promotionEndTime: '',
+  },
-    promotionPerLimit: 0,
+  data() {
-    promotionPrice: null,
+    return {
-    promotionStartTime: '',
+      active: 0, // 当前步骤索引
-    promotionType: 0,
+      productParam: Object.assign({}, defaultProductParam), // 商品参数对象
-    publishStatus: 0,
+      showStatus: [true, false, false, false], // 控制步骤组件显示状态
-    recommandStatus: 0,
+    };
-    sale: 0,
+  },
-    serviceIds: '',
+  created() {
-    sort: 0,
+    // 如果是编辑模式，获取商品数据
-    stock: 0,
+    if (this.isEdit) {
-    subTitle: '',
+      getProduct(this.$route.query.id).then((response) => {
-    unit: '',
+        this.productParam = response.data; // 加载编辑的商品数据
-    usePointLimit: 0,
+      });
-    verifyStatus: 0,
+    }
-    weight: 0
+  },
-  };
+  methods: {
-  export default {
+    // 隐藏所有步骤的内容
-    name: 'ProductDetail',
+    hideAll() {
-    components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
+      for (let i = 0; i < this.showStatus.length; i++) {
-    props: {
+        this.showStatus[i] = false;
-      isEdit: {
-        type: Boolean,
-        default: false
       }
     },
-    data() {
+    // 上一步操作
-      return {
+    prevStep() {
-        active: 0,
+      if (this.active > 0) {
-        productParam: Object.assign({}, defaultProductParam),
+        this.active--; // 回退到上一步
-        showStatus: [true, false, false, false]
+        this.hideAll(); // 隐藏所有步骤
+        this.showStatus[this.active] = true; // 显示当前步骤
       }
     },
-    created(){
+    // 下一步操作
-      if(this.isEdit){
+    nextStep() {
-        getProduct(this.$route.query.id).then(response=>{
+      if (this.active < this.showStatus.length - 1) {
-          this.productParam=response.data;
+        this.active++; // 跳到下一步
-        });
+        this.hideAll(); // 隐藏所有步骤
+        this.showStatus[this.active] = true; // 显示当前步骤
       }
     },
-    methods: {
+    // 提交表单数据
-      hideAll() {
+    finishCommit(isEdit) {
-        for (let i = 0; i < this.showStatus.length; i++) {
+      this.$confirm('是否要提交该产品？', '提示', {
-          this.showStatus[i] = false;
+        confirmButtonText: '确定',
-        }
+        cancelButtonText: '取消',
-      },
+        type: 'warning',
-      prevStep() {
+      }).then(() => {
-        if (this.active > 0 && this.active < this.showStatus.length) {
+        if (isEdit) {
-          this.active--;
+          // 编辑模式下更新商品数据
-          this.hideAll();
+          updateProduct(this.$route.query.id, this.productParam).then(() => {
-          this.showStatus[this.active] = true;
+            this.$message({
-        }
+              type: 'success',
-      },
+              message: '修改成功',
-      nextStep() {
+              duration: 1000,
-        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();
             });
-          }else{
+            this.$router.back(); // 返回上一页
-            createProduct(this.productParam).then(response=>{
+          });
-              this.$message({
+        } else {
-                type: 'success',
+          // 新增模式下创建商品数据
-                message: '提交成功',
+          createProduct(this.productParam).then(() => {
-                duration:1000
+            this.$message({
-              });
+              type: 'success',
-              location.reload();
+              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">
+          :options="productCateOptions"
-        </el-cascader>
+        ></el-cascader>
       </el-form-item>
+
+      <!-- 商品名称输入框 -->
       <el-form-item label="商品名称：" prop="name">
         <el-input v-model="value.name"></el-input>
       </el-form-item>
+
+      <!-- 商品副标题输入框 -->
       <el-form-item label="副标题：" prop="subTitle">
         <el-input v-model="value.subTitle"></el-input>
       </el-form-item>
+
+      <!-- 商品品牌选择框 -->
       <el-form-item label="商品品牌：" prop="brandId">
         <el-select
           v-model="value.brandId"
           @change="handleBrandChange"
-          placeholder="请选择品牌">
+          placeholder="请选择品牌"
+        >
           <el-option
             v-for="item in brandOptions"
             :key="item.value"
             :label="item.label"
-            :value="item.value">
+            :value="item.value"
-          </el-option>
+          ></el-option>
         </el-select>
       </el-form-item>
+
+      <!-- 商品介绍文本域 -->
       <el-form-item label="商品介绍：">
         <el-input
           :autoSize="true"
           v-model="value.description"
           type="textarea"
-          placeholder="请输入内容"></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 { fetchListWithChildren } from '@/api/productCate'; // 获取商品分类
-  import {fetchList as fetchBrandList} from '@/api/brand'
+import { fetchList as fetchBrandList } from '@/api/brand'; // 获取品牌列表
-  import {getProduct} from '@/api/product';
+
-
+export default {
-  export default {
+  name: 'ProductInfoDetail', // 组件名称
-    name: "ProductInfoDetail",
+  props: {
-    props: {
+    value: Object, // 父组件传入的数据对象
-      value: Object,
+    isEdit: {
-      isEdit: {
+      type: Boolean, // 是否为编辑模式
-        type: Boolean,
+      default: false,
-        default: false
-      }
     },
-    data() {
+  },
-      return {
+  data() {
-        hasEditCreated:false,
+    return {
-        //选中商品分类的值
+      hasEditCreated: false, // 控制编辑状态是否初始化完成
-        selectProductCateValue: [],
+      selectProductCateValue: [], // 选中的商品分类
-        productCateOptions: [],
+      productCateOptions: [], // 商品分类级联数据
-        brandOptions: [],
+      brandOptions: [], // 品牌列表选项
-        rules: {
+      rules: {
-          name: [
+        name: [
-            {required: true, message: '请输入商品名称', trigger: 'blur'},
+          { required: true, message: '请输入商品名称', trigger: 'blur' },
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
-          ],
+        ],
-          subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
+        subTitle: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
-          productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
+        productCategoryId: [
-          brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
+          { required: true, message: '请选择商品分类', trigger: 'blur' },
-          description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
+        ],
-          requiredProp: [{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();
+  watch: {
-      this.getBrandList();
+    productId(newValue) {
+      if (!this.isEdit || this.hasEditCreated || !newValue) return;
+      this.handleEditCreated();
     },
-    computed:{
+    selectProductCateValue(newValue) {
-      //商品的编号
+      // 选中分类时，设置对应的分类ID和分类名称
-      productId(){
+      if (newValue && newValue.length === 2) {
-        return this.value.id;
+        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){
+  methods: {
-        if(!this.isEdit)return;
+    // 编辑模式下初始化商品分类
-        if(this.hasEditCreated)return;
+    handleEditCreated() {
-        if(newValue===undefined||newValue==null||newValue===0)return;
+      if (this.value.productCategoryId != null) {
-        this.handleEditCreated();
+        this.selectProductCateValue = [
-      },
+          this.value.cateParentId,
-      selectProductCateValue: function (newValue) {
+          this.value.productCategoryId,
-        if (newValue != null && newValue.length === 2) {
+        ];
-          this.value.productCategoryId = newValue[1];
-          this.value.productCategoryName= this.getCateNameById(this.value.productCategoryId);
-        } else {
-          this.value.productCategoryId = null;
-          this.value.productCategoryName=null;
-        }
       }
+      this.hasEditCreated = true;
     },
-    methods: {
+
-      //处理编辑逻辑
+    // 获取商品分类列表
-      handleEditCreated(){
+    getProductCateList() {
-        if(this.value.productCategoryId!=null){
+      fetchListWithChildren().then((response) => {
-          this.selectProductCateValue.push(this.value.cateParentId);
+        let list = response.data;
-          this.selectProductCateValue.push(this.value.productCategoryId);
+        this.productCateOptions = list.map((item) => ({
-        }
+          label: item.name,
-        this.hasEditCreated=true;
+          value: item.id,
-      },
+          children: item.children?.map((child) => ({
-      getProductCateList() {
+            label: child.name,
-        fetchListWithChildren().then(response => {
+            value: child.id,
-          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});
+    getBrandList() {
-              }
+      fetchBrandList({ pageNum: 1, pageSize: 100 }).then((response) => {
-            }
+        this.brandOptions = response.data.list.map((item) => ({
-            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+          label: item.name,
-          }
+          value: item.id,
-        });
+        }));
-      },
+      });
-      getBrandList() {
+    },
-        fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
+
-          this.brandOptions = [];
+    // 根据分类ID获取分类名称
-          let brandList = response.data.list;
+    getCateNameById(id) {
-          for (let i = 0; i < brandList.length; i++) {
+      for (const parent of this.productCateOptions) {
-            this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
+        for (const child of parent.children || []) {
-          }
+          if (child.value === id) {
-        });
+            return child.label;
-      },
-      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;
           }
         }
-        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"
+    <el-form
-             ref="productRelationForm"
+      :model="value"
-             label-width="120px"
+      ref="productRelationForm"
-             class="form-inner-container"
+      label-width="120px"
-             size="small">
+      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">
+          :data="subjectList"
-        </el-transfer>
+        ></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">
+          :data="prefrenceAreaList"
-        </el-transfer>
+        ></el-transfer>
       </el-form-item>
+
+      <!-- 操作按钮 -->
       <el-form-item style="text-align: center">
         <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
-        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
+        <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 { fetchListAll as fetchSubjectList } from '@/api/subject'; // 获取专题列表API
-  import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
+import { fetchList as fetchPrefrenceAreaList } from '@/api/prefrenceArea'; // 获取优选列表API
 
-  export default {
+export default {
-    name: "ProductRelationDetail",
+  name: 'ProductRelationDetail', // 组件名称
-    props: {
+  props: {
-      value: Object,
+    value: Object, // 父组件传入的数据对象（用于存储表单数据）
-      isEdit: {
+    isEdit: {
-        type: Boolean,
+      type: Boolean, // 是否为编辑模式
-        default: false
+      default: false,
-      }
-    },
-    data() {
-      return {
-        //所有专题列表
-        subjectList: [],
-        //专题左右标题
-        subjectTitles: ['待选择', '已选择'],
-        //所有专题列表
-        prefrenceAreaList: [],
-        //专题左右标题
-        prefrenceAreaTitles: ['待选择', '已选择']
-      };
-    },
-    created() {
-      this.getSubjectList();
-      this.getPrefrenceAreaList();
     },
-    computed:{
+  },
-      //选中的专题
+  data() {
-      selectSubject:{
+    return {
-        get:function () {
+      subjectList: [], // 专题数据列表
-          let subjects =[];
+      subjectTitles: ['待选择', '已选择'], // Transfer组件标题：关联专题
-          if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
+      prefrenceAreaList: [], // 优选数据列表
-            return subjects;
+      prefrenceAreaTitles: ['待选择', '已选择'], // Transfer组件标题：关联优选
-          }
+    };
-          for(let i=0;i<this.value.subjectProductRelationList.length;i++){
+  },
-            subjects.push(this.value.subjectProductRelationList[i].subjectId);
+  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]});
-          }
         }
-      },
+        // 提取选中的专题ID
-      //选中的优选
+        for (let i = 0; i < this.value.subjectProductRelationList.length; i++) {
-      selectPrefrenceArea:{
+          subjects.push(this.value.subjectProductRelationList[i].subjectId);
-        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]});
-          }
         }
-      }
+        return subjects;
-    },
-    methods: {
-      filterMethod(query, item) {
-        return item.label.indexOf(query) > -1;
       },
-      getSubjectList() {
+      set(newValue) {
-        fetchSubjectList().then(response => {
+        // 更新关联的专题列表
-          let list = response.data;
+        this.value.subjectProductRelationList = [];
-          for (let i = 0; i < list.length; i++) {
+        for (let i = 0; i < newValue.length; i++) {
-            this.subjectList.push({
+          this.value.subjectProductRelationList.push({ subjectId: newValue[i] });
-              label: list[i].title,
+        }
-              key: list[i].id
-            });
-          }
-        });
       },
-      getPrefrenceAreaList() {
+    },
-        fetchPrefrenceAreaList().then(response=>{
+
-          let list = response.data;
+    /**
-          for (let i = 0; i < list.length; i++) {
+     * 选中的优选：通过 v-model 和 computed 绑定选中的优选数据
-            this.prefrenceAreaList.push({
+     */
-              label: list[i].name,
+    selectPrefrenceArea: {
-              key: list[i].id
+      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(){
+      set(newValue) {
-        this.$emit('prevStep')
+        // 更新关联的优选列表
+        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">
+          :inactive-value="0"
-        </el-switch>
+        ></el-switch>
       </el-form-item>
+
+      <!-- 商品上架开关 -->
       <el-form-item label="商品上架：">
         <el-switch
           v-model="value.publishStatus"
           :active-value="1"
-          :inactive-value="0">
+          :inactive-value="0"
-        </el-switch>
+        ></el-switch>
       </el-form-item>
+
+      <!-- 商品推荐：新品与推荐开关 -->
       <el-form-item label="商品推荐：">
         <span style="margin-right: 10px">新品</span>
         <el-switch
           v-model="value.newStatus"
           :active-value="1"
-          :inactive-value="0">
+          :inactive-value="0"
-        </el-switch>
+        ></el-switch>
-        <span style="margin-left: 10px;margin-right: 10px">推荐</span>
+        <span style="margin-left: 10px; margin-right: 10px">推荐</span>
         <el-switch
           v-model="value.recommandStatus"
           :active-value="1"
-          :inactive-value="0">
+          :inactive-value="0"
-        </el-switch>
+        ></el-switch>
       </el-form-item>
+
+      <!-- 服务保证复选框组 -->
       <el-form-item label="服务保证：">
         <el-checkbox-group v-model="selectServiceList">
           <el-checkbox :label="1">无忧退货</el-checkbox>
@@ -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="选择开始时间">
+            placeholder="选择开始时间"
-          </el-date-picker>
+          ></el-date-picker>
         </div>
         <div class="littleMargin">
           结束时间：
@@ -82,225 +118,156 @@
             v-model="value.promotionEndTime"
             type="datetime"
             :picker-options="pickerOptions1"
-            placeholder="选择结束时间">
+            placeholder="选择结束时间"
-          </el-date-picker>
+          ></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-form-item v-show="value.promotionType === 3">
-          <el-table-column
+        <el-table :data="value.productLadderList" style="width: 80%" border>
-            label="数量"
+          <el-table-column label="数量" align="center" width="120">
-            align="center"
-            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.count"></el-input>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column label="折扣" align="center" width="120">
-            label="折扣"
-            align="center"
-            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.discount"></el-input>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column label="操作" align="center">
-            align="center"
-            label="操作">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
+              <el-button type="text" @click="handleRemoveProductLadder(scope.$index)">
-              <el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
+                删除
+              </el-button>
+              <el-button type="text" @click="handleAddProductLadder(scope.$index)">
+                添加
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
-      <el-form-item v-show="value.promotionType===4">
+
-        <el-table :data="value.productFullReductionList"
+      <!-- 满减价格设置 -->
-                  style="width: 80%" border>
+      <el-form-item v-show="value.promotionType === 4">
-          <el-table-column
+        <el-table :data="value.productFullReductionList" style="width: 80%" border>
-            label="满"
+          <el-table-column label="满" align="center" width="120">
-            align="center"
-            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.fullPrice"></el-input>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column label="立减" align="center" width="120">
-            label="立减"
-            align="center"
-            width="120">
             <template slot-scope="scope">
               <el-input v-model="scope.row.reducePrice"></el-input>
             </template>
           </el-table-column>
-          <el-table-column
+          <el-table-column label="操作" align="center">
-            align="center"
-            label="操作">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
+              <el-button type="text" @click="handleRemoveFullReduction(scope.$index)">
-              <el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
+                删除
+              </el-button>
+              <el-button type="text" @click="handleAddFullReduction(scope.$index)">
+                添加
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
+
+      <!-- 操作按钮 -->
       <el-form-item style="text-align: center">
         <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
-        <el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
+        <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 {
+export default {
-    name: "ProductSaleDetail",
+  name: 'ProductSaleDetail',
-    props: {
+  props: {
-      value: Object,
+    value: Object, // 父组件传入的数据对象
-      isEdit: {
+    isEdit: {
-        type: Boolean,
+      type: Boolean, // 是否编辑模式
-        default: false
+      default: false,
-      }
-    },
-    data() {
-      return {
-        //日期选择器配置
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() < Date.now();
-          }
-        }
-      }
-    },
-    created() {
-      if (this.isEdit) {
-        // this.handleEditCreated();
-      } else {
-        fetchMemberLevelList({defaultStatus: 0}).then(response => {
-          let memberPriceList = [];
-          for (let i = 0; i < response.data.length; i++) {
-            let item = response.data[i];
-            memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
-          }
-          this.value.memberPriceList = memberPriceList;
-        });
-      }
     },
-    computed: {
+  },
-      //选中的服务保证
+  data() {
-      selectServiceList: {
+    return {
-        get() {
+      pickerOptions1: {
-          let list = [];
+        disabledDate(time) {
-          if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list;
+          return time.getTime() < Date.now(); // 禁用过去时间
-          let ids = this.value.serviceIds.split(',');
-          for (let i = 0; i < ids.length; i++) {
-            list.push(Number(ids[i]));
-          }
-          return list;
         },
-        set(newValue) {
-          let serviceIds = '';
-          if (newValue != null && newValue.length > 0) {
-            for (let i = 0; i < newValue.length; i++) {
-              serviceIds += newValue[i] + ',';
-            }
-            if (serviceIds.endsWith(',')) {
-              serviceIds = serviceIds.substr(0, serviceIds.length - 1)
-            }
-            this.value.serviceIds = serviceIds;
-          } else {
-            this.value.serviceIds = null;
-          }
-        }
-      }
-    },
-    methods: {
-      handleEditCreated() {
-        let ids = this.value.serviceIds.split(',');
-        console.log('handleEditCreated', ids);
-        for (let i = 0; i < ids.length; i++) {
-          this.selectServiceList.push(Number(ids[i]));
-        }
-      },
-      handleRemoveProductLadder(index, row) {
-        let productLadderList = this.value.productLadderList;
-        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) {
+  created() {
-          fullReductionList.push({
+    fetchMemberLevelList({ defaultStatus: 0 }).then((response) => {
-            fullPrice: 0,
+      this.value.memberPriceList = response.data.map((item) => ({
-            reducePrice: 0
+        memberLevelId: item.id,
-          });
+        memberLevelName: item.name,
-        } else {
+        memberPrice: 0,
-          this.$message({
+      }));
-            message: '最多只能添加三条',
+    });
-            type: 'warning'
+  },
-          });
+  computed: {
-        }
+    // 选中的服务保证
+    selectServiceList: {
+      get() {
+        return this.value.serviceIds ? this.value.serviceIds.split(',').map(Number) : [];
       },
-      handlePrev() {
+      set(newValue) {
-        this.$emit('prevStep')
+        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 {
+.littleMargin {
-    margin-top: 10px;
+  margin-top: 10px;
-  }
+}
 </style>