From 0e0b856edb26ae88481146077bb17475cce9cb67 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 8 Mar 2026 02:38:43 +0700
Subject: [PATCH] refactor: improve code formatting and structure in product
 index view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enhanced readability by adjusting indentation and spacing in the template.
- Consolidated repeated code blocks for better maintainability.
- Added functionality for changing product status (上架/下架) with confirmation prompts.
- Updated the handleDelete function to maintain consistent formatting.
- Ensured all API calls and data handling are properly formatted for clarity.
---
 src/api/service/product.js            |   13 +
 src/views/service/product/details.vue | 1391 +++++++++++++------------
 src/views/service/product/index.vue   |  548 +++++-----
 3 files changed, 1036 insertions(+), 916 deletions(-)

diff --git a/src/api/service/product.js b/src/api/service/product.js
index 291c22a..2d89abe 100644
--- a/src/api/service/product.js
+++ b/src/api/service/product.js
@@ -42,3 +42,16 @@ export function delProduct(id) {
     method: 'delete'
   })
 }
+
+// 上架/下架商品
+export function changeProductStatus(id, status) {
+  const data = {
+    id,
+    status
+  }
+  return request({
+    url: '/service/product/status',
+    method: 'put',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/src/views/service/product/details.vue b/src/views/service/product/details.vue
index 62a4650..28bc634 100644
--- a/src/views/service/product/details.vue
+++ b/src/views/service/product/details.vue
@@ -1,216 +1,253 @@
 <template>
-    <div class="app-container">
-        <!-- 商品基本信息 -->
-        <div class="background-color-fff padding-20 border-radius-8px margin-bottom-20">
-            <el-form ref="productRef" :model="form" :rules="rules" label-width="100px">
-                <el-form-item label="商品分类" prop="categoryId">
-                    <el-select
-                        v-model="form.categoryId"
-                        placeholder="请选择商品分类"
-                        style="width: 100%"
-                        filterable
-                        :remote-method="remoteMethod"
-                    >
-                        <el-option
-                            v-for="value in productCategoryList"
-                            :label="value.categoryName"
-                            :value="value.id"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="商品名称" prop="productName">
-                    <el-input v-model="form.productName" placeholder="请输入商品名称" />
-                </el-form-item>
-                <!-- <el-form-item label="副标题" prop="subTitle">
+  <div class="app-container">
+    <!-- 商品基本信息 -->
+    <div
+      class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
+    >
+      <el-form
+        ref="productRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="商品分类" prop="categoryId">
+          <el-select
+            v-model="form.categoryId"
+            placeholder="请选择商品分类"
+            style="width: 100%"
+            filterable
+            :remote-method="remoteMethod"
+          >
+            <el-option
+              v-for="value in productCategoryList"
+              :label="value.categoryName"
+              :value="value.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品名称" prop="productName">
+          <el-input v-model="form.productName" placeholder="请输入商品名称" />
+        </el-form-item>
+        <!-- <el-form-item label="副标题" prop="subTitle">
                     <el-input v-model="form.subTitle" type="textarea" placeholder="请输入内容" />
                 </el-form-item> -->
-                <el-form-item label="主图URL" prop="mainImage">
-                    <image-upload v-model="form.mainImage" :limit="1" />
-                </el-form-item>
-                <el-form-item label="商品相册" prop="imageGallery">
-                    <image-upload v-model="form.imageGallery" :limit="5" />
-                </el-form-item>
+        <el-form-item label="主图URL" prop="mainImage">
+          <image-upload v-model="form.mainImage" :limit="1" />
+        </el-form-item>
+        <el-form-item label="商品相册" prop="imageGallery">
+          <image-upload v-model="form.imageGallery" :limit="5" />
+        </el-form-item>
 
-                <!-- SKU管理 -->
-                <div class="sku-management">
-                    <div class="sku-header flex justify-between items-center margin-bottom-20">
-                        <h3 class="text-16 font-600">商品规格(SKU)</h3>
-                        <el-button type="primary" @click="handleAddSku" size="small">
-                            <i class="el-icon-plus"></i>
-                            添加SKU
-                        </el-button>
-                    </div>
+        <!-- SKU管理 -->
+        <div class="sku-management">
+          <div
+            class="sku-header flex justify-between items-center margin-bottom-20"
+          >
+            <h3 class="text-16 font-600">商品规格(SKU)</h3>
+            <el-button type="primary" @click="handleAddSku" size="small">
+              <i class="el-icon-plus"></i>
+              添加SKU
+            </el-button>
+          </div>
 
-                    <!-- SKU列表表格 -->
-                    <div
-                        v-if="form.productSkuList && form.productSkuList.length > 0"
-                        class="sku-table-wrapper"
-                    >
-                        <el-table :data="form.productSkuList" border size="small" class="sku-table">
-                            <el-table-column type="index" width="50" label="序号" align="center" />
-                            <el-table-column prop="skuCode" label="SKU编码" min-width="120">
-                                <template #default="{ row, $index }">
-                                    <el-input
-                                        v-model="row.skuCode"
-                                        placeholder="SKU编码"
-                                        size="small"
-                                        @change="validateSkuCode(row, $index)"
-                                        :class="{ 'error-border': row.skuError }"
-                                    />
-                                    <div v-if="row.skuError" class="field-error">
-                                        {{ row.skuError }}
-                                    </div>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="specText" label="规格文本" min-width="120">
-                                <template #default="{ row }">
-                                    <el-input
-                                        v-model="row.specText"
-                                        placeholder="如：红色/128G"
-                                        size="small"
-                                        :class="{ 'error-border': row.specTextError }"
-                                        @blur="validateSpecText(row)"
-                                    />
-                                    <div v-if="row.specTextError" class="field-error">
-                                        {{ row.specTextError }}
-                                    </div>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="price" label="销售价" width="180" align="left">
-                                <template #default="{ row }">
-                                    <el-input
-                                        v-model.number="row.price"
-                                        type="number"
-                                        min="0"
-                                        step="0.01"
-                                        placeholder="价格"
-                                        size="small"
-                                        :class="{ 'error-border': row.priceError }"
-                                        @blur="validatePrice(row)"
-                                        @change="updatePriceRange"
-                                    >
-                                        <template #append>元</template>
-                                    </el-input>
-                                    <div v-if="row.priceError" class="field-error">
-                                        {{ row.priceError }}
-                                    </div>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                prop="originalPrice"
-                                label="原价"
-                                width="180"
-                                align="left"
-                            >
-                                <template #default="{ row }">
-                                    <el-input
-                                        v-model.number="row.originalPrice"
-                                        type="number"
-                                        min="0"
-                                        step="0.01"
-                                        placeholder="原价"
-                                        size="small"
-                                        :class="{ 'error-border': row.originalPriceError }"
-                                        @blur="validateOriginalPrice(row)"
-                                    >
-                                        <template #append>元</template>
-                                    </el-input>
-                                    <div v-if="row.originalPriceError" class="field-error">
-                                        {{ row.originalPriceError }}
-                                    </div>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                prop="stockQuantity"
-                                label="库存"
-                                width="120"
-                                align="left"
-                            >
-                                <template #default="{ row }">
-                                    <el-input
-                                        v-model.number="row.stockQuantity"
-                                        type="number"
-                                        min="0"
-                                        placeholder="库存"
-                                        size="small"
-                                        :class="{ 'error-border': row.stockQuantityError }"
-                                        @blur="validateStockQuantity(row)"
-                                    />
-                                    <div v-if="row.stockQuantityError" class="field-error">
-                                        {{ row.stockQuantityError }}
-                                    </div>
-                                </template>
-                            </el-table-column>
+          <!-- SKU列表表格 -->
+          <div
+            v-if="form.productSkuList && form.productSkuList.length > 0"
+            class="sku-table-wrapper"
+          >
+            <el-table
+              :data="form.productSkuList"
+              border
+              size="small"
+              class="sku-table"
+            >
+              <el-table-column
+                type="index"
+                width="50"
+                label="序号"
+                align="center"
+              />
+              <el-table-column prop="skuCode" label="SKU编码" min-width="120">
+                <template #default="{ row, $index }">
+                  <el-input
+                    v-model="row.skuCode"
+                    placeholder="SKU编码"
+                    size="small"
+                    @change="validateSkuCode(row, $index)"
+                    :class="{ 'error-border': row.skuError }"
+                  />
+                  <div v-if="row.skuError" class="field-error">
+                    {{ row.skuError }}
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="specText" label="规格文本" min-width="120">
+                <template #default="{ row }">
+                  <el-input
+                    v-model="row.specText"
+                    placeholder="如：红色/128G"
+                    size="small"
+                    :class="{ 'error-border': row.specTextError }"
+                    @blur="validateSpecText(row)"
+                  />
+                  <div v-if="row.specTextError" class="field-error">
+                    {{ row.specTextError }}
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="price"
+                label="销售价"
+                width="180"
+                align="left"
+              >
+                <template #default="{ row }">
+                  <el-input
+                    v-model.number="row.price"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    placeholder="价格"
+                    size="small"
+                    :class="{ 'error-border': row.priceError }"
+                    @blur="validatePrice(row)"
+                    @change="updatePriceRange"
+                  >
+                    <template #append>元</template>
+                  </el-input>
+                  <div v-if="row.priceError" class="field-error">
+                    {{ row.priceError }}
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="originalPrice"
+                label="原价"
+                width="180"
+                align="left"
+              >
+                <template #default="{ row }">
+                  <el-input
+                    v-model.number="row.originalPrice"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    placeholder="原价"
+                    size="small"
+                    :class="{ 'error-border': row.originalPriceError }"
+                    @blur="validateOriginalPrice(row)"
+                  >
+                    <template #append>元</template>
+                  </el-input>
+                  <div v-if="row.originalPriceError" class="field-error">
+                    {{ row.originalPriceError }}
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="stockQuantity"
+                label="库存"
+                width="120"
+                align="left"
+              >
+                <template #default="{ row }">
+                  <el-input
+                    v-model.number="row.stockQuantity"
+                    type="number"
+                    min="0"
+                    placeholder="库存"
+                    size="small"
+                    :class="{ 'error-border': row.stockQuantityError }"
+                    @blur="validateStockQuantity(row)"
+                  />
+                  <div v-if="row.stockQuantityError" class="field-error">
+                    {{ row.stockQuantityError }}
+                  </div>
+                </template>
+              </el-table-column>
 
-                            <el-table-column
-                                prop="isDefault"
-                                label="默认"
-                                width="80"
-                                align="center"
-                            >
-                                <template #default="{ row, $index }">
-                                    <el-radio
-                                        v-model="form.defaultSkuIndex"
-                                        :label="$index"
-                                        @change="setDefaultSku($index)"
-                                    >
-                                        {{ row.isDefault === 1 ? '是' : '否' }}
-                                    </el-radio>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="isEnable" label="状态" width="80" align="center">
-                                <template #default="{ row }">
-                                    <el-switch
-                                        v-model="row.isEnable"
-                                        :active-value="1"
-                                        :inactive-value="0"
-                                        active-color="#13ce66"
-                                    />
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="操作" width="100" align="center" fixed="right">
-                                <template #default="{ row, $index }">
-                                    <el-button
-                                        type="text"
-                                        size="small"
-                                        style="color: #f56c6c"
-                                        @click="handleRemoveSku($index)"
-                                    >
-                                        删除
-                                    </el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
+              <el-table-column
+                prop="isDefault"
+                label="默认"
+                width="80"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  <el-radio
+                    v-model="form.defaultSkuIndex"
+                    :label="$index"
+                    @change="setDefaultSku($index)"
+                  >
+                    {{ row.isDefault === 1 ? "是" : "否" }}
+                  </el-radio>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="isEnable"
+                label="状态"
+                width="80"
+                align="center"
+              >
+                <template #default="{ row }">
+                  <el-switch
+                    v-model="row.isEnable"
+                    :active-value="1"
+                    :inactive-value="0"
+                    active-color="#13ce66"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                width="100"
+                align="center"
+                fixed="right"
+              >
+                <template #default="{ row, $index }">
+                  <el-button
+                    type="text"
+                    size="small"
+                    style="color: #f56c6c"
+                    @click="handleRemoveSku($index)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
 
-                        <!-- SKU统计信息 -->
-                        <div class="sku-summary margin-top-20">
-                            <el-space>
-                                <el-tag type="info">
-                                    SKU数量: {{ form.productSkuList?.length || 0 }}
-                                </el-tag>
-                                <el-tag type="primary">库存总量: {{ totalStock }}</el-tag>
-                                <el-tag type="success">
-                                    价格区间: ￥{{ form.minPrice || 0 }} - ￥{{
-                                        form.maxPrice || 0
-                                    }}
-                                </el-tag>
-                                <el-tag :type="hasDuplicateSku ? 'danger' : 'success'">
-                                    {{ hasDuplicateSku ? '有重复SKU编码' : 'SKU编码无重复' }}
-                                </el-tag>
-                                <el-tag :type="hasSkuValidationError ? 'danger' : 'success'">
-                                    {{ hasSkuValidationError ? '存在验证错误' : 'SKU信息完整' }}
-                                </el-tag>
-                            </el-space>
-                        </div>
-                    </div>
+            <!-- SKU统计信息 -->
+            <div class="sku-summary margin-top-20">
+              <el-space>
+                <el-tag type="info">
+                  SKU数量: {{ form.productSkuList?.length || 0 }}
+                </el-tag>
+                <el-tag type="primary">库存总量: {{ totalStock }}</el-tag>
+                <el-tag type="success">
+                  价格区间: ￥{{ form.minPrice || 0 }} - ￥{{
+                    form.maxPrice || 0
+                  }}
+                </el-tag>
+                <el-tag :type="hasDuplicateSku ? 'danger' : 'success'">
+                  {{ hasDuplicateSku ? "有重复SKU编码" : "SKU编码无重复" }}
+                </el-tag>
+                <el-tag :type="hasSkuValidationError ? 'danger' : 'success'">
+                  {{ hasSkuValidationError ? "存在验证错误" : "SKU信息完整" }}
+                </el-tag>
+              </el-space>
+            </div>
+          </div>
 
-                    <!-- 无SKU提示 -->
-                    <div v-else class="empty-sku">
-                        <el-empty description="暂无SKU，请点击上方按钮添加" :image-size="60" />
-                    </div>
-                </div>
+          <!-- 无SKU提示 -->
+          <div v-else class="empty-sku">
+            <el-empty
+              description="暂无SKU，请点击上方按钮添加"
+              :image-size="60"
+            />
+          </div>
+        </div>
 
-                <!-- <el-form-item label="商品单位" prop="unit" style="margin-top: 20px">
+        <!-- <el-form-item label="商品单位" prop="unit" style="margin-top: 20px">
                     <el-input v-model="form.unit" placeholder="请输入商品单位" />
                 </el-form-item>
                 <el-form-item label="重量(kg)" prop="weight">
@@ -220,70 +257,70 @@
                         placeholder="请输入重量(kg)"
                     />
                 </el-form-item> -->
-                <el-form-item label="排序" prop="sortOrder">
-                    <el-input
-                        v-model.number="form.sortOrder"
-                        type="number"
-                        placeholder="请输入排序"
-                    />
-                </el-form-item>
-                <el-form-item label="总销量" prop="salesCount">
-                    <el-input
-                        v-model.number="form.salesCount"
-                        type="number"
-                        placeholder="请输入总销量"
-                    />
-                </el-form-item>
-                <el-form-item label="浏览数" prop="viewCount">
-                    <el-input
-                        v-model.number="form.viewCount"
-                        type="number"
-                        placeholder="请输入浏览数"
-                    />
-                </el-form-item>
-                <el-form-item label="收藏数" prop="likeCount">
-                    <el-input
-                        v-model.number="form.likeCount"
-                        type="number"
-                        placeholder="请输入收藏数"
-                    />
-                </el-form-item>
-                <el-form-item label="最低价格" prop="minPrice">
-                    <el-input
-                        v-model.number="form.minPrice"
-                        type="number"
-                        placeholder="请输入最低价格"
-                        :disabled="true"
-                    />
-                </el-form-item>
-                <el-form-item label="最高价格" prop="maxPrice">
-                    <el-input
-                        v-model.number="form.maxPrice"
-                        type="number"
-                        placeholder="请输入最高价格"
-                        :disabled="true"
-                    />
-                </el-form-item>
-                <el-form-item label="商品描述">
-                    <Editor v-model="form.description" :min-height="192" />
-                </el-form-item>
-            </el-form>
+        <el-form-item label="排序" prop="sortOrder">
+          <el-input
+            v-model.number="form.sortOrder"
+            type="number"
+            placeholder="请输入排序"
+          />
+        </el-form-item>
+        <el-form-item label="总销量" prop="salesCount">
+          <el-input
+            v-model.number="form.salesCount"
+            type="number"
+            placeholder="请输入总销量"
+          />
+        </el-form-item>
+        <el-form-item label="浏览数" prop="viewCount">
+          <el-input
+            v-model.number="form.viewCount"
+            type="number"
+            placeholder="请输入浏览数"
+          />
+        </el-form-item>
+        <el-form-item label="收藏数" prop="likeCount">
+          <el-input
+            v-model.number="form.likeCount"
+            type="number"
+            placeholder="请输入收藏数"
+          />
+        </el-form-item>
+        <el-form-item label="最低价格" prop="minPrice">
+          <el-input
+            v-model.number="form.minPrice"
+            type="number"
+            placeholder="请输入最低价格"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item label="最高价格" prop="maxPrice">
+          <el-input
+            v-model.number="form.maxPrice"
+            type="number"
+            placeholder="请输入最高价格"
+            :disabled="true"
+          />
+        </el-form-item>
+        <el-form-item label="商品描述">
+          <Editor v-model="form.description" :min-height="192" />
+        </el-form-item>
+      </el-form>
 
-            <!-- 操作按钮 -->
-            <div class="dialog-footer text-center">
-                <el-button type="primary" @click="submitForm" :loading="submitLoading">
-                    保存商品
-                </el-button>
-                <el-button @click="cancel">取消</el-button>
-            </div>
-        </div>
+      <!-- 操作按钮 -->
+      <div class="dialog-footer text-center">
+        <el-button type="primary" @click="submitForm" :loading="submitLoading">
+          保存商品
+        </el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup name="ProductDetailWithSku">
-import { useRoute, useRouter } from 'vue-router';
-import { getProduct, addProduct, updateProduct } from '@/api/service/product';
-import { listProductCategory } from '@/api/service/productCategory';
+import { useRoute, useRouter } from "vue-router";
+import { getProduct, addProduct, updateProduct } from "@/api/service/product";
+import { listProductCategory } from "@/api/service/productCategory";
 
 const { proxy } = getCurrentInstance();
 const route = useRoute();
@@ -295,594 +332,610 @@ const productCategoryList = ref([]);
 
 // 商品数据
 const data = reactive({
-    form: {
-        id: null,
-        categoryId: null,
-        spuCode: null,
-        productName: null,
-        subTitle: null,
-        mainImage: null,
-        imageGallery: null,
-        description: null,
-        unit: null,
-        weight: null,
-        status: 1, // 默认启用
-        isHot: 0,
-        isRecommend: 0,
-        sortOrder: 0,
-        salesCount: 0,
-        viewCount: 0,
-        likeCount: 0,
-        minPrice: 0,
-        maxPrice: 0,
-        productSkuList: [], // 新增SKU列表字段
-        defaultSkuIndex: -1, // 默认SKU索引
-    },
-    rules: {
-        categoryId: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
-        productName: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
-        mainImage: [{ required: true, message: '主图URL不能为空', trigger: 'blur' }],
-        unit: [{ required: true, message: '商品单位不能为空', trigger: 'blur' }],
-        productSkuList: [
-            {
-                validator: (rule, value, callback) => {
-                    if (!value || value.length === 0) {
-                        callback(new Error('请至少添加一个SKU'));
-                    } else if (data.hasDuplicateSku) {
-                        callback(new Error('存在重复的SKU编码，请检查'));
-                    } else if (data.hasSkuValidationError) {
-                        callback(new Error('SKU信息填写不完整或有误，请检查'));
-                    } else {
-                        callback();
-                    }
-                },
-                trigger: 'blur',
-            },
-        ],
-    },
+  form: {
+    id: null,
+    categoryId: null,
+    spuCode: null,
+    productName: null,
+    subTitle: null,
+    mainImage: null,
+    imageGallery: null,
+    description: null,
+    unit: null,
+    weight: null,
+    status: 1, // 默认启用
+    isHot: 0,
+    isRecommend: 0,
+    sortOrder: 0,
+    salesCount: 0,
+    viewCount: 0,
+    likeCount: 0,
+    minPrice: 0,
+    maxPrice: 0,
+    productSkuList: [], // 新增SKU列表字段
+    defaultSkuIndex: -1, // 默认SKU索引
+  },
+  rules: {
+    categoryId: [
+      { required: true, message: "商品分类不能为空", trigger: "blur" },
+    ],
+    productName: [
+      { required: true, message: "商品名称不能为空", trigger: "blur" },
+    ],
+    mainImage: [
+      { required: true, message: "主图URL不能为空", trigger: "blur" },
+    ],
+    unit: [{ required: true, message: "商品单位不能为空", trigger: "blur" }],
+    productSkuList: [
+      {
+        validator: (rule, value, callback) => {
+          if (!value || value.length === 0) {
+            callback(new Error("请至少添加一个SKU"));
+          } else if (data.hasDuplicateSku) {
+            callback(new Error("存在重复的SKU编码，请检查"));
+          } else if (data.hasSkuValidationError) {
+            callback(new Error("SKU信息填写不完整或有误，请检查"));
+          } else {
+            callback();
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+  },
 });
 
 const { form, rules } = toRefs(data);
 
 // 计算属性
 const totalStock = computed(() => {
-    if (!form.value.productSkuList) return 0;
-    return form.value.productSkuList.reduce((sum, sku) => {
-        return sum + (Number(sku.stockQuantity) || 0);
-    }, 0);
+  if (!form.value.productSkuList) return 0;
+  return form.value.productSkuList.reduce((sum, sku) => {
+    return sum + (Number(sku.stockQuantity) || 0);
+  }, 0);
 });
 
 const hasDuplicateSku = computed(() => {
-    if (!form.value.productSkuList) return false;
-    const skuCodes = form.value.productSkuList.map(sku => sku.skuCode?.trim()).filter(code => code);
-    return new Set(skuCodes).size !== skuCodes.length;
+  if (!form.value.productSkuList) return false;
+  const skuCodes = form.value.productSkuList
+    .map((sku) => sku.skuCode?.trim())
+    .filter((code) => code);
+  return new Set(skuCodes).size !== skuCodes.length;
 });
 
 const hasSkuValidationError = computed(() => {
-    if (!form.value.productSkuList) return false;
-    return form.value.productSkuList.some(
-        sku =>
-            sku.skuError ||
-            sku.specTextError ||
-            sku.priceError ||
-            sku.originalPriceError ||
-            sku.stockQuantityError
-    );
+  if (!form.value.productSkuList) return false;
+  return form.value.productSkuList.some(
+    (sku) =>
+      sku.skuError ||
+      sku.specTextError ||
+      sku.priceError ||
+      sku.originalPriceError ||
+      sku.stockQuantityError,
+  );
 });
 
 // 初始化SKU数据
 const initSkuData = () => {
-    return {
-        id: null,
-        productId: null,
-        skuCode: '',
-        specData: '',
-        specText: '',
-        price: 0,
-        originalPrice: 0,
-        stockQuantity: 0,
-        warningStock: 0,
-        salesVolume: 0,
-        skuImage: '',
-        barcode: '',
-        isDefault: 0,
-        isEnable: 1,
-        // 错误信息字段
-        skuError: '',
-        specTextError: '',
-        priceError: '',
-        originalPriceError: '',
-        stockQuantityError: '',
-    };
+  return {
+    id: null,
+    productId: null,
+    skuCode: "",
+    specData: "",
+    specText: "",
+    price: 0,
+    originalPrice: 0,
+    stockQuantity: 0,
+    warningStock: 0,
+    salesVolume: 0,
+    skuImage: "",
+    barcode: "",
+    isDefault: 0,
+    isEnable: 1,
+    // 错误信息字段
+    skuError: "",
+    specTextError: "",
+    priceError: "",
+    originalPriceError: "",
+    stockQuantityError: "",
+  };
 };
 
 // 添加SKU
 const handleAddSku = () => {
-    if (!form.value.productSkuList) {
-        form.value.productSkuList = [];
-    }
+  if (!form.value.productSkuList) {
+    form.value.productSkuList = [];
+  }
 
-    const newSku = initSkuData();
-    form.value.productSkuList.push(newSku);
+  const newSku = initSkuData();
+  form.value.productSkuList.push(newSku);
 
-    // 如果是第一个SKU，设置为默认
-    if (form.value.productSkuList.length === 1) {
-        setDefaultSku(0);
-    }
+  // 如果是第一个SKU，设置为默认
+  if (form.value.productSkuList.length === 1) {
+    setDefaultSku(0);
+  }
 
-    // 更新价格区间
-    updatePriceRange();
+  // 更新价格区间
+  updatePriceRange();
 };
 
 // 生成SKU编码
 const generateSkuCode = () => {
-    const spuCode = form.value.spuCode || 'SPU';
-    const timestamp = new Date().getTime().toString().slice(-6);
-    const random = Math.random().toString(36).substr(2, 4).toUpperCase();
-    return `${spuCode}_${timestamp}${random}`;
+  const spuCode = form.value.spuCode || "SPU";
+  const timestamp = new Date().getTime().toString().slice(-6);
+  const random = Math.random().toString(36).substr(2, 4).toUpperCase();
+  return `${spuCode}_${timestamp}${random}`;
 };
 
 // 删除SKU
-const handleRemoveSku = index => {
-    proxy.$modal.confirm('确定要删除这个SKU吗？').then(() => {
-        form.value.productSkuList.splice(index, 1);
+const handleRemoveSku = (index) => {
+  proxy.$modal.confirm("确定要删除这个SKU吗？").then(() => {
+    form.value.productSkuList.splice(index, 1);
 
-        // 如果删除的是默认SKU，重置默认索引
-        if (form.value.defaultSkuIndex === index) {
-            form.value.defaultSkuIndex = -1;
-            if (form.value.productSkuList.length > 0) {
-                setDefaultSku(0);
-            }
-        } else if (form.value.defaultSkuIndex > index) {
-            form.value.defaultSkuIndex--;
-        }
+    // 如果删除的是默认SKU，重置默认索引
+    if (form.value.defaultSkuIndex === index) {
+      form.value.defaultSkuIndex = -1;
+      if (form.value.productSkuList.length > 0) {
+        setDefaultSku(0);
+      }
+    } else if (form.value.defaultSkuIndex > index) {
+      form.value.defaultSkuIndex--;
+    }
 
-        updatePriceRange();
-    });
+    updatePriceRange();
+  });
 };
 
 // 设置默认SKU
-const setDefaultSku = index => {
-    form.value.defaultSkuIndex = index;
-    form.value.productSkuList.forEach((sku, i) => {
-        sku.isDefault = i === index ? 1 : 0;
-    });
+const setDefaultSku = (index) => {
+  form.value.defaultSkuIndex = index;
+  form.value.productSkuList.forEach((sku, i) => {
+    sku.isDefault = i === index ? 1 : 0;
+  });
 };
 
 // 验证SKU编码
 const validateSkuCode = (row, index) => {
-    // 清除之前的错误
-    row.skuError = '';
+  // 清除之前的错误
+  row.skuError = "";
 
-    // if (!row.skuCode || row.skuCode.trim() === '') {
-    //     row.skuError = 'SKU编码不能为空';
-    //     return false;
-    // }
+  // if (!row.skuCode || row.skuCode.trim() === '') {
+  //     row.skuError = 'SKU编码不能为空';
+  //     return false;
+  // }
 
-    // 检查重复
-    const duplicateIndex = form.value.productSkuList.findIndex(
-        (sku, i) => i !== index && sku.skuCode === row.skuCode
-    );
+  // 检查重复
+  const duplicateIndex = form.value.productSkuList.findIndex(
+    (sku, i) => i !== index && sku.skuCode === row.skuCode,
+  );
 
-    if (duplicateIndex !== -1) {
-        row.skuError = 'SKU编码已存在';
-        return false;
-    }
+  if (duplicateIndex !== -1) {
+    row.skuError = "SKU编码已存在";
+    return false;
+  }
 
-    return true;
+  return true;
 };
 
 // 验证规格文本
-const validateSpecText = row => {
-    // 清除之前的错误
-    row.specTextError = '';
+const validateSpecText = (row) => {
+  // 清除之前的错误
+  row.specTextError = "";
 
-    if (!row.specText || row.specText.trim() === '') {
-        row.specTextError = '规格文本不能为空';
-        return false;
-    }
+  if (!row.specText || row.specText.trim() === "") {
+    row.specTextError = "规格文本不能为空";
+    return false;
+  }
 
-    return true;
+  return true;
 };
 
 // 验证销售价格
-const validatePrice = row => {
-    // 清除之前的错误
-    row.priceError = '';
+const validatePrice = (row) => {
+  // 清除之前的错误
+  row.priceError = "";
 
-    if (row.price === null || row.price === undefined || row.price === '') {
-        row.priceError = '销售价不能为空';
-        return false;
-    }
+  if (row.price === null || row.price === undefined || row.price === "") {
+    row.priceError = "销售价不能为空";
+    return false;
+  }
 
-    const price = Number(row.price);
-    if (isNaN(price)) {
-        row.priceError = '请输入有效的数字';
-        return false;
-    }
+  const price = Number(row.price);
+  if (isNaN(price)) {
+    row.priceError = "请输入有效的数字";
+    return false;
+  }
 
-    if (price < 0) {
-        row.priceError = '价格不能为负数';
-        return false;
-    }
+  if (price < 0) {
+    row.priceError = "价格不能为负数";
+    return false;
+  }
 
-    if (price === 0) {
-        row.priceError = '价格不能为0';
-        return false;
-    }
+  if (price === 0) {
+    row.priceError = "价格不能为0";
+    return false;
+  }
 
-    return true;
+  return true;
 };
 
 // 验证原价
-const validateOriginalPrice = row => {
-    // 清除之前的错误
-    row.originalPriceError = '';
+const validateOriginalPrice = (row) => {
+  // 清除之前的错误
+  row.originalPriceError = "";
 
-    if (row.originalPrice === null || row.originalPrice === undefined || row.originalPrice === '') {
-        row.originalPriceError = '原价不能为空';
-        return false;
-    }
+  if (
+    row.originalPrice === null ||
+    row.originalPrice === undefined ||
+    row.originalPrice === ""
+  ) {
+    row.originalPriceError = "原价不能为空";
+    return false;
+  }
 
-    const originalPrice = Number(row.originalPrice);
-    if (isNaN(originalPrice)) {
-        row.originalPriceError = '请输入有效的数字';
-        return false;
-    }
+  const originalPrice = Number(row.originalPrice);
+  if (isNaN(originalPrice)) {
+    row.originalPriceError = "请输入有效的数字";
+    return false;
+  }
 
-    if (originalPrice < 0) {
-        row.originalPriceError = '原价不能为负数';
-        return false;
-    }
+  if (originalPrice < 0) {
+    row.originalPriceError = "原价不能为负数";
+    return false;
+  }
 
-    return true;
+  return true;
 };
 
 // 验证库存
-const validateStockQuantity = row => {
-    // 清除之前的错误
-    row.stockQuantityError = '';
+const validateStockQuantity = (row) => {
+  // 清除之前的错误
+  row.stockQuantityError = "";
 
-    if (row.stockQuantity === null || row.stockQuantity === undefined || row.stockQuantity === '') {
-        row.stockQuantityError = '库存不能为空';
-        return false;
-    }
+  if (
+    row.stockQuantity === null ||
+    row.stockQuantity === undefined ||
+    row.stockQuantity === ""
+  ) {
+    row.stockQuantityError = "库存不能为空";
+    return false;
+  }
 
-    const stockQuantity = Number(row.stockQuantity);
-    if (isNaN(stockQuantity)) {
-        row.stockQuantityError = '请输入有效的数字';
-        return false;
-    }
+  const stockQuantity = Number(row.stockQuantity);
+  if (isNaN(stockQuantity)) {
+    row.stockQuantityError = "请输入有效的数字";
+    return false;
+  }
 
-    if (stockQuantity < 0) {
-        row.stockQuantityError = '库存不能为负数';
-        return false;
-    }
+  if (stockQuantity < 0) {
+    row.stockQuantityError = "库存不能为负数";
+    return false;
+  }
 
-    // 检查是否为整数
-    if (!Number.isInteger(stockQuantity)) {
-        row.stockQuantityError = '库存必须为整数';
-        return false;
-    }
+  // 检查是否为整数
+  if (!Number.isInteger(stockQuantity)) {
+    row.stockQuantityError = "库存必须为整数";
+    return false;
+  }
 
-    return true;
+  return true;
 };
 
 // 验证所有SKU字段
 const validateAllSkuFields = () => {
-    if (!form.value.productSkuList) return false;
+  if (!form.value.productSkuList) return false;
 
-    let isValid = true;
-    form.value.productSkuList.forEach((sku, index) => {
-        validateSkuCode(sku, index);
-        validateSpecText(sku);
-        validatePrice(sku);
-        validateOriginalPrice(sku);
-        validateStockQuantity(sku);
+  let isValid = true;
+  form.value.productSkuList.forEach((sku, index) => {
+    validateSkuCode(sku, index);
+    validateSpecText(sku);
+    validatePrice(sku);
+    validateOriginalPrice(sku);
+    validateStockQuantity(sku);
 
-        // 检查是否有任何错误
-        if (
-            sku.skuError ||
-            sku.specTextError ||
-            sku.priceError ||
-            sku.originalPriceError ||
-            sku.stockQuantityError
-        ) {
-            isValid = false;
-        }
-    });
+    // 检查是否有任何错误
+    if (
+      sku.skuError ||
+      sku.specTextError ||
+      sku.priceError ||
+      sku.originalPriceError ||
+      sku.stockQuantityError
+    ) {
+      isValid = false;
+    }
+  });
 
-    return isValid;
+  return isValid;
 };
 
 // 格式化规格数据
-const formatSpecData = row => {
-    if (!row.specData) return;
+const formatSpecData = (row) => {
+  if (!row.specData) return;
 
-    try {
-        // 如果是JSON字符串，尝试解析
-        if (row.specData.trim().startsWith('{')) {
-            const specObj = JSON.parse(row.specData);
-            // 生成规格文本
-            row.specText = Object.values(specObj).join('/');
-        }
-    } catch (e) {
-        console.warn('规格数据格式错误:', e);
+  try {
+    // 如果是JSON字符串，尝试解析
+    if (row.specData.trim().startsWith("{")) {
+      const specObj = JSON.parse(row.specData);
+      // 生成规格文本
+      row.specText = Object.values(specObj).join("/");
     }
+  } catch (e) {
+    console.warn("规格数据格式错误:", e);
+  }
 };
 
 // 更新价格区间
 const updatePriceRange = () => {
-    if (!form.value.productSkuList || form.value.productSkuList.length === 0) {
-        form.value.minPrice = 0;
-        form.value.maxPrice = 0;
-        return;
-    }
+  if (!form.value.productSkuList || form.value.productSkuList.length === 0) {
+    form.value.minPrice = 0;
+    form.value.maxPrice = 0;
+    return;
+  }
 
-    const prices = form.value.productSkuList
-        .filter(sku => sku.isEnable === 1)
-        .map(sku => Number(sku.price) || 0)
-        .filter(price => price > 0);
+  const prices = form.value.productSkuList
+    .filter((sku) => sku.isEnable === 1)
+    .map((sku) => Number(sku.price) || 0)
+    .filter((price) => price > 0);
 
-    if (prices.length === 0) {
-        form.value.minPrice = 0;
-        form.value.maxPrice = 0;
-        return;
-    }
+  if (prices.length === 0) {
+    form.value.minPrice = 0;
+    form.value.maxPrice = 0;
+    return;
+  }
 
-    form.value.minPrice = Math.min(...prices);
-    form.value.maxPrice = Math.max(...prices);
+  form.value.minPrice = Math.min(...prices);
+  form.value.maxPrice = Math.max(...prices);
 };
 
 // 监听SKU列表变化
 watch(
-    () => form.value.productSkuList,
-    () => {
-        updatePriceRange();
-    },
-    { deep: true }
+  () => form.value.productSkuList,
+  () => {
+    updatePriceRange();
+  },
+  { deep: true },
 );
 
 // 获取商品详情
 const getProductDetail = async () => {
-    if (route.query.productId) {
-        try {
-            const response = await getProduct(route.query.productId);
-            const productData = response.data;
+  if (route.query.productId) {
+    try {
+      const response = await getProduct(route.query.productId);
+      const productData = response.data;
 
-            // 处理SKU数据
-            if (productData.productSkuList && productData.productSkuList.length > 0) {
-                // 找到默认SKU的索引
-                const defaultIndex = productData.productSkuList.findIndex(
-                    sku => sku.isDefault === 1
-                );
-                productData.defaultSkuIndex = defaultIndex;
+      // 处理SKU数据
+      if (productData.productSkuList && productData.productSkuList.length > 0) {
+        // 找到默认SKU的索引
+        const defaultIndex = productData.productSkuList.findIndex(
+          (sku) => sku.isDefault === 1,
+        );
+        productData.defaultSkuIndex = defaultIndex;
 
-                // 初始化错误字段
-                productData.productSkuList.forEach(sku => {
-                    sku.skuError = '';
-                    sku.specTextError = '';
-                    sku.priceError = '';
-                    sku.originalPriceError = '';
-                    sku.stockQuantityError = '';
-                });
-            } else {
-                productData.productSkuList = [];
-                productData.defaultSkuIndex = -1;
-            }
+        // 初始化错误字段
+        productData.productSkuList.forEach((sku) => {
+          sku.skuError = "";
+          sku.specTextError = "";
+          sku.priceError = "";
+          sku.originalPriceError = "";
+          sku.stockQuantityError = "";
+        });
+      } else {
+        productData.productSkuList = [];
+        productData.defaultSkuIndex = -1;
+      }
 
-            form.value = productData;
-        } catch (error) {
-            console.error('获取商品详情失败:', error);
-            proxy.$modal.msgError('获取商品信息失败');
-        }
-    } else {
-        // 新增商品时初始化一个默认SKU
-        handleAddSku();
+      form.value = productData;
+    } catch (error) {
+      console.error("获取商品详情失败:", error);
+      proxy.$modal.msgError("获取商品信息失败");
     }
+  } else {
+    // 新增商品时初始化一个默认SKU
+    handleAddSku();
+  }
 };
 
 // 准备提交的数据
 const prepareSubmitData = () => {
-    const submitData = { ...form.value };
+  const submitData = { ...form.value };
 
-    // 移除前端使用的字段
-    delete submitData.defaultSkuIndex;
+  // 移除前端使用的字段
+  delete submitData.defaultSkuIndex;
 
-    // 确保SKU列表中的productId正确
-    if (submitData.productSkuList) {
-        submitData.productSkuList.forEach(sku => {
-            if (!sku.id) {
-                delete sku.id; // 新增的SKU不应该有id
-            }
-            // 设置productId
-            sku.productId = submitData.id;
-            // 移除错误信息字段
-            delete sku.skuError;
-            delete sku.specTextError;
-            delete sku.priceError;
-            delete sku.originalPriceError;
-            delete sku.stockQuantityError;
-        });
-    }
+  // 确保SKU列表中的productId正确
+  if (submitData.productSkuList) {
+    submitData.productSkuList.forEach((sku) => {
+      if (!sku.id) {
+        delete sku.id; // 新增的SKU不应该有id
+      }
+      // 设置productId
+      sku.productId = submitData.id;
+      // 移除错误信息字段
+      delete sku.skuError;
+      delete sku.specTextError;
+      delete sku.priceError;
+      delete sku.originalPriceError;
+      delete sku.stockQuantityError;
+    });
+  }
 
-    return submitData;
+  return submitData;
 };
 
 // 提交表单
 const submitForm = async () => {
-    try {
-        // 先验证所有SKU字段
-        const isSkuValid = validateAllSkuFields();
-        if (!isSkuValid) {
-            proxy.$modal.msgWarning('请检查SKU信息填写是否完整');
-            return;
-        }
-
-        if (hasDuplicateSku.value) {
-            proxy.$modal.msgWarning('存在重复的SKU编码，请检查');
-            return;
-        }
-
-        // 验证商品表单
-        await proxy.$refs.productRef.validate();
-
-        if (!form.value.productSkuList || form.value.productSkuList.length === 0) {
-            proxy.$modal.msgWarning('请至少添加一个SKU');
-            return;
-        }
-
-        submitLoading.value = true;
-
-        const submitData = prepareSubmitData();
-
-        let response;
-        if (submitData.id) {
-            response = await updateProduct(submitData);
-            proxy.$modal.msgSuccess('修改成功');
-        } else {
-            response = await addProduct(submitData);
-            proxy.$modal.msgSuccess('新增成功');
-        }
-
-        // 处理响应
-        if (response.code === 200) {
-            // 保存成功后可以跳转或关闭页面
-            setTimeout(() => {
-                proxy.$tab.closePage();
-            }, 1500);
-        }
-    } catch (error) {
-        console.error('保存失败:', error);
-        proxy.$modal.msgError(error.message || '保存失败');
-    } finally {
-        submitLoading.value = false;
+  try {
+    // 先验证所有SKU字段
+    const isSkuValid = validateAllSkuFields();
+    if (!isSkuValid) {
+      proxy.$modal.msgWarning("请检查SKU信息填写是否完整");
+      return;
     }
+
+    if (hasDuplicateSku.value) {
+      proxy.$modal.msgWarning("存在重复的SKU编码，请检查");
+      return;
+    }
+
+    // 验证商品表单
+    await proxy.$refs.productRef.validate();
+
+    if (!form.value.productSkuList || form.value.productSkuList.length === 0) {
+      proxy.$modal.msgWarning("请至少添加一个SKU");
+      return;
+    }
+
+    submitLoading.value = true;
+
+    const submitData = prepareSubmitData();
+
+    let response;
+    if (submitData.id) {
+      response = await updateProduct(submitData);
+      proxy.$modal.msgSuccess("修改成功");
+    } else {
+      response = await addProduct(submitData);
+      proxy.$modal.msgSuccess("新增成功");
+    }
+
+    // 处理响应
+    if (response.code === 200) {
+      // 保存成功后可以跳转或关闭页面
+      setTimeout(() => {
+        proxy.$tab.closePage();
+      }, 1500);
+    }
+  } catch (error) {
+    console.error("保存失败:", error);
+    proxy.$modal.msgError(error.message || "保存失败");
+  } finally {
+    submitLoading.value = false;
+  }
 };
 
 // 取消
 const cancel = () => {
-    proxy.$modal.confirm('确定要取消吗？未保存的数据将会丢失。').then(() => {
-        proxy.$tab.closePage();
-    });
+  proxy.$modal.confirm("确定要取消吗？未保存的数据将会丢失。").then(() => {
+    proxy.$tab.closePage();
+  });
 };
 
-const remoteMethod = query => {
-    if (query) {
-        getProductList(query.toLowerCase());
-    } else {
-    }
+const remoteMethod = (query) => {
+  if (query) {
+    getProductList(query.toLowerCase());
+  } else {
+  }
 };
 
 /** 查询商品分类列表 */
 function getList(name) {
-    listProductCategory(proxy.CloneData({ pageNum: 1, pageSize: 100, productName: name })).then(
-        response => {
-            productCategoryList.value = response.rows;
-        }
-    );
+  listProductCategory(
+    proxy.CloneData({ pageNum: 1, pageSize: 100, productName: name }),
+  ).then((response) => {
+    productCategoryList.value = response.rows;
+  });
 }
 
 // 初始化加载
 onMounted(() => {
-    getList();
-    getProductDetail();
+  getList();
+  getProductDetail();
 });
 </script>
 
 <style scoped>
 .flex {
-    display: flex;
+  display: flex;
 }
 .justify-between {
-    justify-content: space-between;
+  justify-content: space-between;
 }
 .items-center {
-    align-items: center;
+  align-items: center;
 }
 .text-16 {
-    font-size: 16px;
+  font-size: 16px;
 }
 .font-600 {
-    font-weight: 600;
+  font-weight: 600;
 }
 .text-center {
-    text-align: center;
+  text-align: center;
 }
 .margin-top-20 {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 .margin-bottom-20 {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .sku-management {
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-    padding: 20px;
-    background: #fafafa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px;
+  background: #fafafa;
 }
 
 .sku-header {
-    padding-bottom: 10px;
-    border-bottom: 1px solid #ebeef5;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
 }
 
 .sku-table-wrapper {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .sku-table {
-    width: 100%;
-    margin-bottom: 20px;
+  width: 100%;
+  margin-bottom: 20px;
 }
 
 .sku-table :deep(.el-table__cell) {
-    padding: 8px 0;
+  padding: 8px 0;
 }
 
 .sku-table :deep(.el-input) {
-    width: 100%;
+  width: 100%;
 }
 
 .sku-table :deep(.error-border) {
-    border-color: #f56c6c;
+  border-color: #f56c6c;
 }
 
 .sku-table :deep(.error-border:focus) {
-    border-color: #f56c6c;
-    box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
+  border-color: #f56c6c;
+  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
 }
 
 .field-error {
-    color: #f56c6c;
-    font-size: 12px;
-    margin-top: 4px;
-    line-height: 1.2;
-    min-height: 16px;
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 4px;
+  line-height: 1.2;
+  min-height: 16px;
 }
 
 .sku-summary {
-    padding: 10px 0;
-    border-top: 1px dashed #ebeef5;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    align-items: center;
+  padding: 10px 0;
+  border-top: 1px dashed #ebeef5;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
 }
 
 .empty-sku {
-    padding: 40px 0;
-    text-align: center;
-    color: #909399;
-    background: #fff;
-    border-radius: 4px;
-    border: 1px dashed #dcdfe6;
+  padding: 40px 0;
+  text-align: center;
+  color: #909399;
+  background: #fff;
+  border-radius: 4px;
+  border: 1px dashed #dcdfe6;
 }
 
 .dialog-footer {
-    margin-top: 20px;
-    padding-top: 20px;
-    border-top: 1px solid #ebeef5;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
 }
 </style>
diff --git a/src/views/service/product/index.vue b/src/views/service/product/index.vue
index b34d9d2..75dcebf 100644
--- a/src/views/service/product/index.vue
+++ b/src/views/service/product/index.vue
@@ -1,50 +1,56 @@
 <template>
-    <div class="app-container">
-        <div class="background-color-fff padding-20 border-radius-8px margin-bottom-20">
-            <el-form
-                :model="queryParams"
-                ref="queryRef"
-                :inline="true"
-                v-show="showSearch"
-                label-width="68px"
-            >
-                <el-form-item label="商品编码" prop="spuCode">
-                    <el-input
-                        v-model="queryParams.spuCode"
-                        placeholder="请输入商品SPU编码"
-                        clearable
-                        @keyup.enter="handleQuery"
-                    />
-                </el-form-item>
-                <el-form-item label="商品名称" prop="productName">
-                    <el-input
-                        v-model="queryParams.productName"
-                        placeholder="请输入商品名称"
-                        clearable
-                        @keyup.enter="handleQuery"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
+  <div class="app-container">
+    <div
+      class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
+    >
+      <el-form
+        :model="queryParams"
+        ref="queryRef"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+        <el-form-item label="商品编码" prop="spuCode">
+          <el-input
+            v-model="queryParams.spuCode"
+            placeholder="请输入商品SPU编码"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="商品名称" prop="productName">
+          <el-input
+            v-model="queryParams.productName"
+            placeholder="请输入商品名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
 
-        <div class="background-color-fff padding-20 border-radius-8px margin-bottom-20">
-            <el-row :gutter="10" class="mb8">
-                <el-col :span="1.5">
-                    <el-button
-                        type="primary"
-                        plain
-                        icon="Plus"
-                        @click="handleAdd"
-                        v-hasPermi="['service:product:add']"
-                    >
-                        新增
-                    </el-button>
-                </el-col>
-                <!-- <el-col :span="1.5">
+    <div
+      class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
+    >
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="Plus"
+            @click="handleAdd"
+            v-hasPermi="['service:product:add']"
+          >
+            新增
+          </el-button>
+        </el-col>
+        <!-- <el-col :span="1.5">
                     <el-button
                         type="success"
                         plain
@@ -68,106 +74,138 @@
                         删除
                     </el-button>
                 </el-col> -->
-                <el-col :span="1.5">
-                    <el-button
-                        type="warning"
-                        plain
-                        icon="Download"
-                        @click="handleExport"
-                        v-hasPermi="['service:product:export']"
-                    >
-                        导出
-                    </el-button>
-                </el-col>
-                <right-toolbar
-                    v-model:showSearch="showSearch"
-                    @queryTable="getList"
-                ></right-toolbar>
-            </el-row>
-        </div>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="Download"
+            @click="handleExport"
+            v-hasPermi="['service:product:export']"
+          >
+            导出
+          </el-button>
+        </el-col>
+        <right-toolbar
+          v-model:showSearch="showSearch"
+          @queryTable="getList"
+        ></right-toolbar>
+      </el-row>
+    </div>
 
-        <div class="background-color-fff padding-20 border-radius-8px margin-bottom-20">
-            <el-table
-                v-loading="loading"
-                :data="productList"
-                @selection-change="handleSelectionChange"
-            >
-                <!-- <el-table-column type="selection" width="55" align="center" /> -->
-                <el-table-column label="商品ID" align="center" prop="id" />
-                <el-table-column label="分类ID" align="center" prop="categoryId" />
-                <el-table-column label="商品编码" align="center" prop="spuCode" />
-                <el-table-column label="商品名称" align="center" prop="productName" />
-                <el-table-column label="副标题" align="center" prop="subTitle" />
-                <el-table-column label="主图URL" align="center" prop="mainImage" width="100">
-                    <template #default="scope">
-                        <image-preview :src="scope.row.mainImage" :width="50" :height="50" />
-                    </template>
-                </el-table-column>
-                <!-- <el-table-column label="商品相册" align="center" prop="imageGallery" width="100">
+    <div
+      class="background-color-fff padding-20 border-radius-8px margin-bottom-20"
+    >
+      <el-table
+        v-loading="loading"
+        :data="productList"
+        @selection-change="handleSelectionChange"
+      >
+        <!-- <el-table-column type="selection" width="55" align="center" /> -->
+        <el-table-column label="商品ID" align="center" prop="id" />
+        <el-table-column label="分类ID" align="center" prop="categoryId" />
+        <el-table-column label="商品编码" align="center" prop="spuCode" />
+        <el-table-column label="商品名称" align="center" prop="productName" />
+        <el-table-column label="副标题" align="center" prop="subTitle" />
+        <el-table-column
+          label="主图URL"
+          align="center"
+          prop="mainImage"
+          width="100"
+        >
+          <template #default="scope">
+            <image-preview
+              :src="scope.row.mainImage"
+              :width="50"
+              :height="50"
+            />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="商品相册" align="center" prop="imageGallery" width="100">
                     <template #default="scope">
                         <image-preview :src="scope.row.imageGallery" :width="50" :height="50" />
                     </template>
                 </el-table-column> -->
-                <!-- <el-table-column label="商品描述" align="center" prop="description" /> -->
-                <el-table-column label="商品单位" align="center" prop="unit" />
-                <el-table-column label="重量(kg)" align="center" prop="weight" />
-                <el-table-column label="状态" align="center" prop="status" />
-                <!-- <el-table-column label="是否热销" align="center" prop="isHot" /> -->
-                <!-- <el-table-column label="是否推荐" align="center" prop="isRecommend" /> -->
-                <el-table-column label="排序" align="center" prop="sortOrder" />
-                <el-table-column label="总销量" align="center" prop="salesCount" />
-                <el-table-column label="浏览数" align="center" prop="viewCount" />
-                <el-table-column label="收藏数" align="center" prop="likeCount" />
-                <el-table-column label="最低价格" align="center" prop="minPrice" />
-                <el-table-column label="最高价格" align="center" prop="maxPrice" />
-                <el-table-column
-                    label="操作"
-                    align="center"
-                    class-name="small-padding fixed-width"
-                    fixed="right"
-                >
-                    <template #default="scope">
-                        <el-button
-                            link
-                            type="primary"
-                            icon="Edit"
-                            @click="handleUpdate(scope.row)"
-                            v-hasPermi="['service:product:edit']"
-                        >
-                            修改
-                        </el-button>
-                        <el-button
-                            link
-                            type="primary"
-                            icon="Delete"
-                            @click="handleDelete(scope.row)"
-                            v-hasPermi="['service:product:remove']"
-                        >
-                            删除
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+        <!-- <el-table-column label="商品描述" align="center" prop="description" /> -->
+        <el-table-column label="商品单位" align="center" prop="unit" />
+        <el-table-column label="重量(kg)" align="center" prop="weight" />
+        <el-table-column label="状态" align="center" prop="status" />
+        <!-- <el-table-column label="是否热销" align="center" prop="isHot" /> -->
+        <!-- <el-table-column label="是否推荐" align="center" prop="isRecommend" /> -->
+        <el-table-column label="排序" align="center" prop="sortOrder" />
+        <el-table-column label="总销量" align="center" prop="salesCount" />
+        <el-table-column label="浏览数" align="center" prop="viewCount" />
+        <el-table-column label="收藏数" align="center" prop="likeCount" />
+        <el-table-column label="最低价格" align="center" prop="minPrice" />
+        <el-table-column label="最高价格" align="center" prop="maxPrice" />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          fixed="right"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['service:product:edit']"
+            >
+              修改
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              v-if="scope.row.status === 0"
+              @click="handleChangeStatus(scope.row, 1)"
+              v-hasPermi="['service:product:edit']"
+            >
+              上架
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              v-if="scope.row.status === 1"
+              @click="handleChangeStatus(scope.row, 0)"
+              v-hasPermi="['service:product:edit']"
+            >
+              下架
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['service:product:remove']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-            <pagination
-                v-show="total > 0"
-                :total="total"
-                v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize"
-                @pagination="getList"
-            />
-        </div>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
     </div>
+  </div>
 </template>
 
 <script setup name="ProductIndex">
 import {
-    listProduct,
-    getProduct,
-    delProduct,
-    addProduct,
-    updateProduct,
-} from '@/api/service/product';
+  listProduct,
+  getProduct,
+  delProduct,
+  addProduct,
+  updateProduct,
+  changeProductStatus,
+} from "@/api/service/product";
 
 const { proxy } = getCurrentInstance();
 const router = useRouter();
@@ -180,167 +218,183 @@ const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const title = ref('');
+const title = ref("");
 
 const data = reactive({
-    form: {},
-    queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        categoryId: null,
-        spuCode: null,
-        productName: null,
-        subTitle: null,
-        mainImage: null,
-        imageGallery: null,
-        description: null,
-        unit: null,
-        weight: null,
-        status: null,
-        isHot: null,
-        isRecommend: null,
-        sortOrder: null,
-        salesCount: null,
-        viewCount: null,
-        likeCount: null,
-        minPrice: null,
-        maxPrice: null,
-    },
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    categoryId: null,
+    spuCode: null,
+    productName: null,
+    subTitle: null,
+    mainImage: null,
+    imageGallery: null,
+    description: null,
+    unit: null,
+    weight: null,
+    status: null,
+    isHot: null,
+    isRecommend: null,
+    sortOrder: null,
+    salesCount: null,
+    viewCount: null,
+    likeCount: null,
+    minPrice: null,
+    maxPrice: null,
+  },
 });
 
 const { queryParams, form } = toRefs(data);
 
 /** 查询商品列表列表 */
 function getList() {
-    loading.value = true;
-    listProduct(queryParams.value).then(response => {
-        productList.value = response.rows;
-        total.value = response.total;
-        loading.value = false;
-    });
+  loading.value = true;
+  listProduct(queryParams.value).then((response) => {
+    productList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
 }
 
 // 取消按钮
 function cancel() {
-    open.value = false;
-    reset();
+  open.value = false;
+  reset();
 }
 
 // 表单重置
 function reset() {
-    form.value = {
-        id: null,
-        categoryId: null,
-        spuCode: null,
-        productName: null,
-        subTitle: null,
-        mainImage: null,
-        imageGallery: null,
-        description: null,
-        unit: null,
-        weight: null,
-        status: null,
-        isHot: null,
-        isRecommend: null,
-        sortOrder: null,
-        salesCount: null,
-        viewCount: null,
-        likeCount: null,
-        minPrice: null,
-        maxPrice: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-    };
-    proxy.resetForm('productRef');
+  form.value = {
+    id: null,
+    categoryId: null,
+    spuCode: null,
+    productName: null,
+    subTitle: null,
+    mainImage: null,
+    imageGallery: null,
+    description: null,
+    unit: null,
+    weight: null,
+    status: null,
+    isHot: null,
+    isRecommend: null,
+    sortOrder: null,
+    salesCount: null,
+    viewCount: null,
+    likeCount: null,
+    minPrice: null,
+    maxPrice: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+  };
+  proxy.resetForm("productRef");
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-    queryParams.value.pageNum = 1;
-    getList();
+  queryParams.value.pageNum = 1;
+  getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-    proxy.resetForm('queryRef');
-    handleQuery();
+  proxy.resetForm("queryRef");
+  handleQuery();
 }
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
-    ids.value = selection.map(item => item.id);
-    single.value = selection.length != 1;
-    multiple.value = !selection.length;
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
-    router.push({
-        path: 'productDetails',
-        name: 'ProductDetails',
-    });
+  router.push({
+    path: "productDetails",
+    name: "ProductDetails",
+  });
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-    reset();
-    const _id = row.id || ids.value;
-    router.push({
-        path: 'productDetails',
-        name: 'ProductDetails',
-        query: {
-            productId: _id,
-        },
-    });
+  reset();
+  const _id = row.id || ids.value;
+  router.push({
+    path: "productDetails",
+    name: "ProductDetails",
+    query: {
+      productId: _id,
+    },
+  });
 }
 
 /** 提交按钮 */
 function submitForm() {
-    proxy.$refs['productRef'].validate(valid => {
-        if (valid) {
-            if (form.value.id != null) {
-                updateProduct(form.value).then(response => {
-                    proxy.$modal.msgSuccess('修改成功');
-                    open.value = false;
-                    getList();
-                });
-            } else {
-                addProduct(form.value).then(response => {
-                    proxy.$modal.msgSuccess('新增成功');
-                    open.value = false;
-                    getList();
-                });
-            }
-        }
-    });
+  proxy.$refs["productRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateProduct(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addProduct(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 上架/下架按钮操作 */
+function handleChangeStatus(row, status) {
+  const _ids = row.id || ids.value;
+  const action = status === 1 ? "上架" : "下架";
+  proxy.$modal
+    .confirm(`是否确认${action}商品列表编号为"${_ids}"的数据项？`)
+    .then(function () {
+      return changeProductStatus(_ids, status);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess(`${action}成功`);
+    })
+    .catch(() => {});
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-    const _ids = row.id || ids.value;
-    proxy.$modal
-        .confirm('是否确认删除商品列表编号为"' + _ids + '"的数据项？')
-        .then(function () {
-            return delProduct(_ids);
-        })
-        .then(() => {
-            getList();
-            proxy.$modal.msgSuccess('删除成功');
-        })
-        .catch(() => {});
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除商品列表编号为"' + _ids + '"的数据项？')
+    .then(function () {
+      return delProduct(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-    proxy.download(
-        'service/product/export',
-        {
-            ...queryParams.value,
-        },
-        `product_${new Date().getTime()}.xlsx`
-    );
+  proxy.download(
+    "service/product/export",
+    {
+      ...queryParams.value,
+    },
+    `product_${new Date().getTime()}.xlsx`,
+  );
 }
 
 getList();