商品前台交互更新

src/router/index.js

@@ -128,6 +128,12 @@ export const constantRoutes = [
         name: 'TeamView',
         meta: { title: '拼桌详情' }
       },
+      {
+        path: 'goods/:id?',
+        component: () => import('@/views/bst/goodsCategory/components/goodsEdit.vue'),
+        name: 'GoodsEdit',
+        meta: { title: '商品管理' }
+      },
     ]
   },
   {

src/views/bst/goods/index.vue

@@ -1,22 +1,7 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="店铺ID" prop="storeId">
+
-        <el-input
-          v-model="queryParams.storeId"
-          placeholder="请输入店铺ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="分类ID" prop="categoryId">
-        <el-input
-          v-model="queryParams.categoryId"
-          placeholder="请输入分类ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="商品名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -25,34 +10,38 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="是否可存 0-是 1-否" prop="deposit">
+      <el-form-item label="是否可存" prop="deposit">
+        <el-select v-model="queryParams.deposit" placeholder="是否可存" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.goods_deposit"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="商品状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.goods_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="店铺名称" prop="storeName">
         <el-input
-          v-model="queryParams.deposit"
+          v-model="queryParams.storeName"
-          placeholder="请输入是否可存 0-是 1-否"
+          placeholder="请输入店铺名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="销量" prop="sales">
+      <el-form-item label="分类名称" prop="categoryId">
         <el-input
-          v-model="queryParams.sales"
+          v-model="queryParams.categoryName"
-          placeholder="请输入销量"
+          placeholder="请输入分类名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="虚拟销量" prop="virtualSales">
-        <el-input
-          v-model="queryParams.virtualSales"
-          placeholder="请输入虚拟销量"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input
-          v-model="queryParams.sort"
-          placeholder="请输入排序"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -119,6 +108,12 @@
             <template v-else-if="column.key === 'image'">
               <image-preview :src="d.row[column.key]" :width="50" :height="50"/>
             </template>
+            <template v-else-if="column.key === 'status'">
+              <dict-tag :value="d.row.status" :options="dict.type.goods_status"/>
+            </template>
+            <template v-else-if="column.key === 'deposit'">
+              <dict-tag :value="d.row.deposit" :options="dict.type.goods_deposit"/>
+            </template>
             <template v-else>
               {{d.row[column.key]}}
             </template>
@@ -153,41 +148,6 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改商品对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <form-col :span="span"  label="店铺ID" prop="storeId">
-            <el-input v-model="form.storeId" placeholder="请输入店铺ID" />
-          </form-col>
-          <form-col :span="span"  label="分类ID" prop="categoryId">
-            <el-input v-model="form.categoryId" placeholder="请输入分类ID" />
-          </form-col>
-          <form-col :span="span"  label="商品名称" prop="name">
-            <el-input v-model="form.name" placeholder="请输入商品名称" />
-          </form-col>
-          <form-col :span="span"  label="图片" prop="image">
-            <image-upload v-model="form.image"/>
-          </form-col>
-          <form-col :span="span"  label="是否可存 0-是 1-否" prop="deposit">
-            <el-input v-model="form.deposit" placeholder="请输入是否可存 0-是 1-否" />
-          </form-col>
-          <form-col :span="span"  label="销量" prop="sales">
-            <el-input v-model="form.sales" placeholder="请输入销量" />
-          </form-col>
-          <form-col :span="span"  label="虚拟销量" prop="virtualSales">
-            <el-input v-model="form.virtualSales" placeholder="请输入虚拟销量" />
-          </form-col>
-          <form-col :span="span"  label="排序" prop="sort">
-            <el-input v-model="form.sort" placeholder="请输入排序" />
-          </form-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -206,21 +166,22 @@ export default {
   name: "Goods",
   mixins: [$showColumns],
   components: {FormCol},
+  dicts: ['goods_deposit','goods_status'],
   data() {
     return {
       span: 24,
       // 字段列表
       columns: [
-        {key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'storeId', visible: true, label: '店铺ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'categoryId', visible: true, label: '分类ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'name', visible: true, label: '商品名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'image', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'deposit', visible: true, label: '是否可存 0-是 1-否', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+       // {key: 'sales', visible: true, label: '销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'sales', visible: true, label: '销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+       // {key: 'virtualSales', visible: true, label: '虚拟销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'virtualSales', visible: true, label: '虚拟销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'deposit', visible: true, label: '是否可存', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '商品状态 0-下架 1-在售', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'status', visible: true, label: '商品状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'sort', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'storeId', visible: true, label: '店铺名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'categoryId', visible: true, label: '分类名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
@@ -348,19 +309,14 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
+      this.$router.push({ name: 'GoodsEdit' })
-      this.open = true;
-      this.title = "添加商品";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.$router.push({
-      const id = row.id || this.ids
+        name: 'GoodsEdit',
-      getGoods(id).then(response => {
+        params: { id: row.id }
-        this.form = response.data;
+      })
-        this.open = true;
-        this.title = "修改商品";
-      });
     },
     /** 提交按钮 */
     submitForm() {

src/views/bst/goodsCategory/components/WD.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="goods-edit-container">
+    <!-- 头部区域 -->
+    <div class="edit-header">
+      <el-button icon="el-icon-arrow-left" class="back-btn" @click="cancel">返回</el-button>
+      <h2 class="title">商品管理</h2>
+    </div>
+
+    <!-- 选项卡导航 -->
+    <el-form ref="form" :model="form" label-width="120px" class="edit-form" :rules="rules">
+      <el-tabs v-model="activeTab" class="edit-tabs">
+        <el-tab-pane label="价格/库存" name="price">
+          <div class="specs-wrapper">
+            <div class="specs-container">
+              <!-- 规格项循环 -->
+              <div
+                v-for="(spec, sIndex) in form.specs"
+                :key="sIndex"
+                class="spec-card"
+              >
+                <div class="spec-header">
+                  <span class="spec-title">规格项 {{ sIndex + 1 }}</span>
+                  <el-button
+                    size="mini"
+                    @click="removeSpec(sIndex)"
+                    class="delete-btn"
+                  >删除规格项
+                  </el-button>
+                </div>
+
+                <!-- 规格名 -->
+                <el-form-item
+                  :prop="`specs[${sIndex}].specName`"
+                  :rules="{ required: true, message: '规格名不能为空', trigger: 'blur' }"
+                >
+                  <el-input
+                    v-model="spec.specName"
+                    placeholder="请输入规格名"
+                    maxlength="20"
+                    show-word-limit
+                    class="spec-input"
+                  >
+                    <template slot="prefix">
+                      <span class="input-label">规格名</span>
+                    </template>
+                  </el-input>
+                </el-form-item>
+
+                <!-- 规格值 -->
+                <div class="values-container">
+                  <el-form-item
+                    v-for="(value, vIndex) in spec.values"
+                    :key="vIndex"
+                    :prop="`specs[${sIndex}].values[${vIndex}].value`"
+                    class="value-item"
+                  >
+                    <el-input
+                      v-model="value.value"
+                      placeholder="请输入规格值"
+                      maxlength="20"
+                      show-word-limit
+                      class="value-input"
+                    >
+                      <template slot="prefix">
+                        <span class="input-label">规格值</span>
+                      </template>
+                      <el-button
+                        slot="append"
+                        icon="el-icon-remove"
+                        @click="removeValue(sIndex, vIndex)"
+                        class="value-delete"
+                      />
+                    </el-input>
+                  </el-form-item>
+                  <el-button
+                    type="text"
+                    class="add-value-btn"
+                    @click="addValue(sIndex)"
+                  >
+                    <i class="el-icon-circle-plus"></i> 添加规格值
+                  </el-button>
+                </div>
+              </div>
+
+              <!-- 添加规格项按钮 -->
+              <el-button
+                class="add-spec-btn"
+                @click="addSpec"
+              >
+                <i class="el-icon-circle-plus"></i> 添加规格项
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-form>
+
+    <!-- 底部操作按钮 -->
+    <div class="footer-actions">
+      <el-button type="primary" size="medium" @click="submitForm">保存商品</el-button>
+      <el-button size="medium" @click="cancel">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {addGoods, updateGoods} from "@/api/bst/goods";
+
+export default {
+  name: 'GoodsEdit',
+  dicts: ['goods_deposit', "goods_status"],
+  data() {
+    return {
+      activeTab: 'base',
+      categoryOptions: [], // 分类列表
+      storeOptions: [], // 店铺列表
+      cascaderProps: {
+        value: 'id',
+        children: 'children',
+        label: 'name',
+        checkStrictly: true,// 可单选任意级
+        emitPath: false,
+        disabled: (data) => data.parentId !== 0
+      },
+      form: {
+        specs: [{
+          specName: '',
+          values: [{ value: '' }]
+        }]
+      },
+    }
+  },
+  created() {
+    this.getStoreList()
+  },
+  methods: {
+
+    async submitForm() {
+      try {
+        await this.$refs.form.validate()
+        console.log('提交数据:', JSON.stringify(this.form, null, 2))
+        const promise = this.form.id != null ? updateGoods(this.form) : addGoods(this.form)
+        const response = await promise
+        this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功")
+        this.dialogVisible = false
+        this.$emit('success')
+        this.$router.go(-1);
+      } catch (errors) {
+
+      }
+    },
+    cancel() {
+      this.$router.back()
+    },
+    // 添加规格项
+    addSpec() {
+      this.form.specs.push({
+        specName: '',
+        values: [{value: ''}]
+      })
+    },
+    // 删除规格项
+    removeSpec(index) {
+      if (this.form.specs.length > 1) {
+        this.form.specs.splice(index, 1)
+      }
+    },
+
+    // 添加规格值
+    addValue(specIndex) {
+      this.form.specs[specIndex].values.push({value: ''})
+    },
+
+    // 删除规格值
+    removeValue(specIndex, valueIndex) {
+      if (this.form.specs[specIndex].values.length > 1) {
+        this.form.specs[specIndex].values.splice(valueIndex, 1)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.specs-wrapper {
+  padding: 20px;
+  background: #f5f7fa;
+}
+
+.specs-container {
+  width: 600px;
+}
+
+.spec-card {
+  padding: 12px;
+  margin-bottom: 16px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.spec-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.spec-title {
+  font-size: 13px;
+  color: #303133;
+}
+
+.delete-btn {
+  color: #f56c6c;
+  border-color: #fde2e2;
+  background: #fef0f0;
+}
+
+.spec-input,
+.value-input {
+  width: 100%;
+}
+
+.input-label {
+  color: #606266;
+  margin-right: 12px;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 12px !important; /* 减小表单项间距 */
+}
+
+::v-deep .el-input__inner {
+  height: 32px !important; /* 减小输入框高度 */
+  line-height: 32px !important;
+}
+
+.values-container {
+  margin-left: 30px;
+}
+
+.value-item {
+  margin-bottom: 12px;
+}
+
+.value-delete {
+  color: #f56c6c;
+  border-left: none;
+}
+
+.add-value-btn {
+  color: #409eff;
+  padding: 8px 0;
+}
+
+.add-value-btn i {
+  margin-right: 4px;
+}
+
+.add-spec-btn {
+  width: 100%;
+  color: #409eff;
+  border-color: #409eff;
+  background: #ecf5ff;
+  padding: 8px;
+}
+
+.goods-edit-container {
+  background: #fff;
+  padding: 20px;
+}
+
+
+.edit-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .back-btn {
+    padding: 0;
+    margin-right: 20px;
+  }
+
+  .title {
+    margin: 0;
+    color: #303133;
+  }
+}
+
+.edit-header ::v-deep .back-btn {
+  /* 移除按钮边框 */
+  border: 0 !important;
+
+  /* 清除聚焦状态阴影 */
+
+  &:focus,
+  &:hover {
+    box-shadow: none !important;
+  }
+}
+
+.edit-tabs {
+  ::v-deep .el-tabs__header {
+    margin: 0;
+  }
+}
+
+.edit-form {
+  padding: 20px 50px;
+
+  .char-counter {
+    color: #909399;
+    margin-left: 10px;
+    font-size: 12px;
+  }
+
+  .category-wrapper {
+    display: flex;
+    align-items: center;
+
+    .category-btns {
+      margin-left: 15px;
+    }
+  }
+
+  .upload-wrapper {
+    .upload-tips {
+      color: #909399;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+}
+
+.footer-actions {
+  padding: 20px 50px;
+  border-top: 1px solid #ebeef5;
+  text-align: right;
+  background: #fff;
+  position: sticky;
+  bottom: 0;
+}
+</style>

src/views/bst/goodsCategory/components/goodsEdit.vue

@@ -0,0 +1,697 @@
+<template>
+  <div class="goods-edit-container">
+    <!-- 头部区域 -->
+    <div class="edit-header">
+      <el-button icon="el-icon-arrow-left" class="back-btn" @click="cancel">返回</el-button>
+      <h2 class="title">商品管理</h2>
+    </div>
+
+    <!-- 选项卡导航 -->
+    <el-form ref="form" :model="form" label-width="120px" class="edit-form" :rules="rules">
+      <el-tabs v-model="activeTab" class="edit-tabs">
+        <!-- 基础设置 -->
+        <el-tab-pane label="基础设置" name="base">
+          <el-form-item label="所属店铺" prop="storeId">
+            <div class="category-wrapper">
+              <el-select
+                v-model="form.storeId"
+                placeholder="请选择店铺"
+                clearable
+                @change="handleStoreChange"
+              >
+                <el-option
+                  v-for="item in storeOptions"
+                  :key="item.storeId"
+                  :label="item.storeName"
+                  :value="item.storeId"
+                />
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="所属分类" label-width="120px" prop="categoryId">
+            <el-cascader
+              v-model="form.categoryId"
+              :options="categoryOptions"
+              :props="cascaderProps"
+              clearable
+              :show-all-levels="false"
+              placeholder="请先选择店铺"
+              :disabled="!form.storeId"
+            >
+              <template slot-scope="{ node, data }">
+                <span v-if="node.level === 1">{{ data.name }}</span>
+              </template>
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="商品名称" prop="name">
+            <el-input
+              v-model="form.name"
+              placeholder="请输入商品名称"
+              maxlength="64"
+              show-word-limit
+              style="width: 400px"
+            />
+          </el-form-item>
+          <el-form-item label="商品轮播图" prop="image">
+            <div class="upload-wrapper">
+              <image-upload v-model="form.image" type="textarea" placeholder="请输入内容"/>
+            </div>
+          </el-form-item>
+          <el-form-item label="是否可存" prop="deposit">
+            <el-radio-group v-model="form.deposit">
+              <el-radio
+                v-for="dict in dict.type.goods_deposit"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-tab-pane>
+
+        <el-tab-pane label="价格/库存" name="price">
+          <div class="specs-wrapper">
+            <div class="specs-container">
+              <el-button class="add-spec-btn" @click="addSpec">添加规格项</el-button>
+              <!-- 规格项循环 -->
+              <div
+                v-for="(spec, sIndex) in form.specs"
+                :key="sIndex"
+                class="spec-card"
+              >
+                <!-- 规格名 -->
+                <el-form-item
+                  :prop="`specs[${sIndex}].specName`"
+                  label="规格名"
+                  label-width="80px"
+                  class="spec-name-item"
+                >
+                  <el-input
+                    v-model="spec.specName"
+                    maxlength="14"
+                    show-word-limit
+                    class="spec-input"
+                  />
+                </el-form-item>
+
+                <!-- 规格值 -->
+                <div class="values-container">
+                  <div class="values-group">
+                  <div
+                    v-for="(value, vIndex) in spec.values"
+                    :key="vIndex"
+                    class="value-wrapper"
+                  >
+
+                    <el-form-item
+                      v-if="vIndex === 0"
+                      :prop="`specs[${sIndex}].values[${vIndex}].value`"
+                      class="value-item"
+                      label="规格值"
+                      label-width="80px"
+                    >
+                      <div class="input-container">
+                        <el-input
+                          v-model="value.value"
+                          maxlength="14"
+                          show-word-limit
+                          class="specValue-input"
+                        />
+                        <i
+                          class="el-icon-close value-delete-icon"
+                          @click="removeValue(sIndex, vIndex)"
+                          :style="{
+        cursor: spec.values.length === 1 ? 'not-allowed' : 'pointer',
+        color: spec.values.length === 1 ? '#c0c4cc' : '#f56c6c'
+      }"
+                        ></i>
+                      </div>
+                    </el-form-item>
+                    <el-form-item
+                      v-else
+                      :prop="`specs[${sIndex}].values[${vIndex}].value`"
+                      class="value-item"
+                      label-width="0"
+                    >
+                      <div class="input-container">
+                        <el-input
+                          v-model="value.value"
+                          maxlength="14"
+                          show-word-limit
+                          class="specValue-input"
+                        />
+                        <i
+                          class="el-icon-close value-delete-icon"
+                          @click="removeValue(sIndex, vIndex)"
+                          :style="{
+        cursor: spec.values.length === 1 ? 'not-allowed' : 'pointer',
+        color: spec.values.length === 1 ? '#c0c4cc' : '#f56c6c'
+      }"
+                        ></i>
+                      </div>
+                    </el-form-item>
+                  </div>
+                  <el-button
+                    type="text"
+                    class="add-value-btn"
+                    @click="addValue(sIndex)"
+                  >
+                    <i class="el-icon-circle-plus"></i> 添加规格值
+                  </el-button>
+                  </div>
+                </div>
+                <i
+                  class="el-icon-close delete-icon"
+                  @click="removeSpec(sIndex)"
+                  :style="{ cursor: form.specs.length === 1 ? 'not-allowed' : 'pointer' }"
+                ></i>
+              </div>
+            </div>
+          </div>
+
+          <div class="sku-table">
+            <el-table :data="form.skuList"  style="width: 100%">
+              <!-- 动态生成规格列 -->
+              <el-table-column
+                v-for="(spec, index) in form.specs"
+                :key="index"
+                :label="spec.specName">
+                <template slot-scope="{ row }">
+                  {{ row.specValues[index] }}
+                </template>
+              </el-table-column>
+
+              <!-- 固定字段 -->
+              <el-table-column label="规格图片" width="130">
+                <template slot-scope="{ row }">
+                  <image-upload v-model="row.image" :limit="1" width="120px" height="32px" :is-show-tip="false"/>
+                </template>
+              </el-table-column>
+
+              <el-table-column label="价格" prop="price" width="150">
+                <template slot-scope="{ row }">
+                  <el-input
+                    v-model.number="row.price"
+                    min="0"
+                    step="0.01">
+                  </el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="库存" prop="stock" width="150">
+                <template slot-scope="{ row }">
+                  <el-input
+                    v-model.number="row.stock"
+                    placeholder="请输入库存"
+                    min="0">
+                  </el-input>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="销售设置" name="sales">
+          <el-form-item label="虚拟销量" prop="virtualSales">
+            <el-input
+              v-model="form.virtualSales"
+              placeholder="请输入虚拟销量"
+              style="width: 400px"
+            />
+          </el-form-item>
+          <el-form-item label="显示顺序" prop="sort">
+            <el-input
+              v-model="form.sort"
+              placeholder="请输入显示顺序"
+              style="width: 400px"
+            />
+            <div class="form-tip" style="color: #909399;">
+              默认为0，越小越靠前
+            </div>
+          </el-form-item>
+          <el-form-item label="商品状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in dict.type.goods_status"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-tab-pane>
+      </el-tabs>
+    </el-form>
+
+    <!-- 底部操作按钮 -->
+    <div class="footer-actions">
+      <el-button type="primary" size="medium" @click="submitForm">保存商品</el-button>
+      <el-button size="medium" @click="cancel">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {listStore} from "@/api/bst/store";
+import {listGoodsCategory} from "@/api/bst/goodsCategory";
+import {handleTree} from "@/utils/ruoyi";
+import {addGoods, updateGoods} from "@/api/bst/goods";
+
+export default {
+  name: 'GoodsEdit',
+  dicts: ['goods_deposit', "goods_status"],
+  data() {
+    return {
+      activeTab: 'base',
+      categoryOptions: [], // 分类列表
+      storeOptions: [], // 店铺列表
+      cascaderProps: {
+        value: 'id',
+        children: 'children',
+        label: 'name',
+        checkStrictly: true,// 可单选任意级
+        emitPath: false,
+        disabled: (data) => data.parentId !== 0
+      },
+      form: {
+        storeName: null,
+        categoryName: null,
+        storeId: null,
+        categoryId: null,
+        name: null,
+        pid: null,
+        image: null,
+        deposit: '1',
+        virtualSales: null,
+        sort: 0,
+        status: '1',
+        specs: [{
+          specName: '',
+          values: [{value: ''}]
+        }]
+      },
+      fieldToTabMap: {
+        storeId: 'base',
+        categoryId: 'base',
+        name: 'base',
+        image: 'base',
+        deposit: 'base',
+        virtualSales: 'sales',
+        sort: 'sales',
+        status: 'sales'
+      },
+      rules: {
+        storeId: [
+          {required: true, message: "所属店铺不能为空", trigger: "change"}
+        ],
+        categoryId: [
+          {required: true, message: "所属分类不能为空", trigger: "change"}
+        ],
+        name: [
+          {required: true, message: "商品名称不能为空", trigger: "blur"}
+        ],
+        image: [
+          {required: true, message: "请上传商品图片", trigger: "change"}
+        ],
+        deposit: [
+          {required: true, message: "请选择可存状态", trigger: "change"}
+        ],
+        status: [
+          {required: true, message: "商品状态不能为空", trigger: "change"}
+        ],
+      }
+    }
+  },
+  created() {
+    this.getStoreList()
+  },
+  watch: {
+    // 监听规格变化自动生成SKU
+    'form.specs': {
+      deep: true,
+      handler(specs) {
+        this.generateSKU()
+      }
+    }
+  },
+  methods: {
+    generateSKU() {
+      const validSpecs = this.form.specs.filter(spec =>
+        spec.specName &&
+        spec.values.length > 0 &&
+        spec.values.every(v => v.value.trim())
+      )
+
+      if (validSpecs.length === 0) {
+        this.form.skuList = []
+        return
+      }
+
+      const specsValues = validSpecs.map(spec =>
+        spec.values.map(v => v.value.trim())
+      )
+
+      // 优化笛卡尔积计算
+      const combinations = specsValues.reduce((acc, curr) =>
+          acc.flatMap(c => curr.map(v => [...c, v])),
+        [[]]
+      ).filter(arr => arr.length > 0)
+
+      // 保留已有数据逻辑优化
+      this.form.skuList = combinations.map(comb => {
+        const key = comb.join('##')
+        return (
+          this.form.skuList.find(sku =>
+            sku.specValues.join('##') === key
+          ) || {
+            specValues: comb,
+            image: null,
+            price: null,
+            stock: null
+          }
+        )
+      })
+    },
+    async handleStoreChange() {
+      this.form.pid = null;
+      if (!this.form.storeId) {
+        this.categoryOptions = [];
+        return;
+      }
+      const res = await listGoodsCategory({
+        storeId: this.form.storeId // 仅传店铺ID
+      });
+
+      this.categoryOptions = handleTree(res.rows, "id", "pid");
+    },
+
+    async submitForm() {
+      try {
+        await this.$refs.form.validate()
+        console.log('提交数据:', JSON.stringify(this.form, null, 2))
+        const promise = this.form.id != null ? updateGoods(this.form) : addGoods(this.form)
+        const response = await promise
+        this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功")
+        this.dialogVisible = false
+        this.$emit('success')
+        this.$router.go(-1);
+      } catch (errors) {
+        const errorFields = Object.keys(errors);
+        if (errorFields.length > 0) {
+          const firstErrorField = errorFields[0];
+          const targetTab = this.fieldToTabMap[firstErrorField] || 'base'; // 默认切换到基础选项卡
+          this.activeTab = targetTab;
+        }
+      }
+    },
+    getStoreList() {
+      this.loading = true;
+      listStore().then(response => {
+        this.storeOptions = response.rows;
+      })
+    },
+    cancel() {
+      this.$router.back()
+    },
+    // 添加规格项
+    addSpec() {
+      this.form.specs.push({
+        specName: '',
+        values: [{value: ''}]
+      })
+      this.generateSKU()
+    },
+    // 删除规格项
+    removeSpec(index) {
+      if (this.form.specs.length === 1) {
+        this.$message.warning('至少需要保留一个规格项');
+        return;
+      }
+      this.form.specs.splice(index, 1);
+      this.generateSKU()
+    },
+
+    // 添加规格值
+    addValue(specIndex) {
+      this.form.specs[specIndex].values.push({value: ''}); // 改用push方法
+      this.generateSKU();
+    },
+
+    // 删除规格值
+    removeValue(specIndex, valueIndex) {
+      if (this.form.specs[specIndex].values.length > 1) {
+        // 使用splice触发响应式更新
+        this.form.specs[specIndex].values.splice(valueIndex, 1)
+        this.$nextTick(() => {
+          this.generateSKU()
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+.input-container {
+  position: relative;
+  display: inline-block;
+  width: 150px;
+}
+
+.values-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px; /* 元素间距 */
+}
+
+.value-wrapper {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.add-spec-btn {
+  width: 120px;
+  color: #ffffff;
+  background: rgba(48, 42, 204, 0.87);
+  padding: 8px;
+  margin-bottom: 20px; /* 新增下边距 */
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 增加层次感 */
+}
+
+.specs-wrapper {
+  padding: 20px;
+  background: #ffffff;
+}
+::v-deep .el-form-item--no-label .el-form-item__content {
+  margin-left: 0 !important;
+}
+::v-deep .el-form-item--no-label {
+  margin-bottom: 8px !important;
+}
+.values-group {
+  gap: 4px; /* 缩小间距 */
+}
+
+
+.specs-container {
+  width: 100%;
+}
+
+.spec-card {
+  position: relative;
+  padding: 12px;
+  margin-bottom: 16px;
+  background: rgb(245, 243, 255);
+  border-radius: 4px;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  color: #f56c6c;
+  font-size: 16px;
+  padding: 4px;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.delete-icon:hover {
+  background-color: #fde2e2;
+}
+
+.delete-icon[style*="not-allowed"] {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-color: transparent;
+}
+
+.spec-input,
+.value-input {
+  width: 300px;
+}
+
+
+.specValue-input,
+.value-input {
+  width: 150px;
+}
+
+.input-label {
+  color: #606266;
+  margin-right: 12px;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 12px !important; /* 减小表单项间距 */
+}
+
+::v-deep .el-input__inner {
+  height: 32px !important; /* 减小输入框高度 */
+  line-height: 32px !important;
+  padding-right: 30px !important;
+}
+
+.values-container {
+  margin-left: 0px;
+}
+
+::v-deep .spec-name-item .el-form-item__label,
+::v-deep .value-item .el-form-item__label {
+  padding-right: 3px;
+  text-align: center;
+}
+
+::v-deep .spec-input .el-input__inner,
+::v-deep .value-input .el-input__inner {
+  padding-left: 3px;
+}
+
+
+.value-item {
+  margin-bottom: 12px;
+}
+
+.value-delete {
+  color: #f56c6c;
+  border-left: none;
+}
+
+.add-value-btn {
+  margin-top: -12px !important;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  margin-left: 8px;
+}
+
+
+.add-spec-btn {
+  width: 120px;
+  color: #ffffff;
+  background: #1d50cc;
+  padding: 8px;
+}
+
+.goods-edit-container {
+  background: #fff;
+  padding: 20px;
+}
+
+
+.edit-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .back-btn {
+    padding: 0;
+    margin-right: 20px;
+  }
+
+  .title {
+    margin: 0;
+    color: #303133;
+  }
+}
+
+.edit-header ::v-deep .back-btn {
+  /* 移除按钮边框 */
+  border: 0 !important;
+
+  /* 清除聚焦状态阴影 */
+
+  &:focus,
+  &:hover {
+    box-shadow: none !important;
+  }
+}
+
+.edit-tabs {
+  ::v-deep .el-tabs__header {
+    margin: 0;
+  }
+}
+
+.edit-form {
+  padding: 20px 50px;
+
+  .char-counter {
+    color: #909399;
+    margin-left: 10px;
+    font-size: 12px;
+  }
+
+  .category-wrapper {
+    display: flex;
+    align-items: center;
+
+    .category-btns {
+      margin-left: 15px;
+    }
+  }
+
+  .upload-wrapper {
+    .upload-tips {
+      color: #909399;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+}
+
+.footer-actions {
+  padding: 20px 50px;
+  border-top: 1px solid #ebeef5;
+  text-align: right;
+  background: #fff;
+  position: sticky;
+  bottom: 0;
+}
+
+.value-delete-icon {
+  opacity: 0;
+  position: absolute;
+  top: 1px;
+  right: -11px;
+  transform: translateY(-50%);
+  z-index: 2;
+  font-size: 12px;
+  padding: 2px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.input-container:hover .value-delete-icon {
+  opacity: 1; /* 悬停时完全显示 */
+}
+
+</style>