fixed 完善商品的添加与修改逻辑

src/api/business/GoodsManager/Goodss/goods.js

@@ -18,6 +18,24 @@ export function goodsList(query) {
   })
 }
 
+// 获取商品Sku
+export function getGoodsSkuList(query) {
+  return request({
+    url: '/business/Goods/getGoodsSkuList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取商品服务与承诺
+export function getCurrentGoodsServiceList(query) {
+  return request({
+    url: '/business/Goods/getCurrentGoodsServiceList',
+    method: 'get',
+    params: query
+  })
+}
+
 // 商品新增或修改
 export function addOrUpdateGoods(data) {
   return request({

src/views/business/GoodsManager/Goodss/components/AddDialog.vue

@@ -94,7 +94,7 @@
         <el-form ref="skuFormRef" :model="formData" :rules="rules">
           <el-row :gutter="20">
             <el-col :lg="12">
-              <el-form-item :label-width="labelWidth" label="商品规格" prop="goodsSpecType">
+              <el-form-item :label-width="labelWidth" label="规格类型" prop="goodsSpecType">
                 <el-radio-group v-model="formData.goodsSpecType">
                   <el-radio v-for="item in  spec_type " :key="item.dictValue" :label="parseInt(item.dictValue)"
                     @change="handleChangeSpecType">{{
@@ -315,7 +315,7 @@
 
     <template #footer>
       <div key="dialog-footer">
-        <el-button type="primary" @click="handleAddClick()">添加</el-button>
+        <el-button type="primary" @click="handleAddClick()" :loading="loadingStatus">添加</el-button>
         <el-button @click="handleResetClick()">重置</el-button>
       </div>
     </template>
@@ -377,6 +377,7 @@ const activeName = ref('base')
 // 选择店铺弹窗参数
 const ChooseShopDialogVisible = ref(false);
 const ChooseShopDialogRow = ref({});
+// 当前用户id
 const userid = useUserStore().userId
 
 // 商品类目树形列表
@@ -499,17 +500,15 @@ async function getGoodsServicesList() {
 
 // 基础信息表单
 const baseFormRef = ref();
-
 // 商品规格表单
 const skuFormRef = ref();
-
 // 商品详情表单
 const detailFormRef = ref();
-
 // 更多设置表单
 const moreFormRef = ref();
 
 // -基础参数
+const loadingStatus = ref(false)
 const labelWidth = 100;
 const { proxy } = getCurrentInstance()
 const emits = defineEmits(["update:modelValue"]);
@@ -541,7 +540,7 @@ const imgData = ref({
 const rules = reactive({
   shopGuid: [{ required: true, message: "店铺不能为空", trigger: "blur" }],
   goodsCategoryGuid: [{ required: true, message: "商品类目不能为空", trigger: "blur" }],
-  goodsSpecType: [{ required: true, message: "商品规格类型不能为空", trigger: "blur" }],
+  goodsSpecType: [{ required: true, message: "规格类型不能为空", trigger: "blur" }],
   deliveryGuid: [{ required: true, message: "配送模板不能为空", trigger: "blur" }],
   goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
   goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
@@ -577,11 +576,12 @@ const handleAddClick = async () => {
     const validateResult = res.every((item) => !!item)
 
     if (validateResult) {
+      loadingStatus.value = true
       if (formData.goodsServicesIds.length !== 0) {
         formData.goodsServicesIds = formData.goodsServicesIds.join(',')
       }
 
-      if (formData.goodsSpecType = "2") {
+      if (formData.goodsSpecType = 2) {
         if (formData.goodsSpecList.length == 0) {
           modal.msgError('商品规格不能为空！')
           return
@@ -592,6 +592,7 @@ const handleAddClick = async () => {
       if (code == 200) {
         modal.msgSuccess('添加成功')
         closeDialog();
+        loadingStatus.value = false
       }
     } else {
       modal.msgError('表单未通过验证！')

src/views/business/GoodsManager/Goodss/components/EditDialog.vue

@@ -7,198 +7,312 @@
  * @LastEditTime: (2023-06-19)
 -->
 <template>
-  <el-dialog v-model="props.modelValue" title="修改商品信息" width="900px" @closed="closeDialog" @open="openDialog">
+  <el-dialog v-model="props.modelValue" title="修改商品信息" width="1200px" @closed="closeDialog" @open="openDialog">
-    <el-form ref="formRef" :model="formData" :rules="rules">
-      <el-row :gutter="20">
-	  
 
-    
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="店铺guid" prop="shopGuid">
-              <el-input v-model="formData.shopGuid" placeholder="请输入店铺guid" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="商品类目guid" prop="goodsCategoryGuid">
-              <el-input v-model="formData.goodsCategoryGuid" placeholder="请输入商品类目guid" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="商品规格guid" prop="goodsSkuGuid">
-              <el-input v-model="formData.goodsSkuGuid" placeholder="请输入商品规格guid" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="配送模板guid" prop="deliveryGuid">
-              <el-input v-model="formData.deliveryGuid" placeholder="请输入配送模板guid" />
-            </el-form-item>
-          </el-col>
 
-          <el-col :lg="12">
+      <el-tab-pane label="基本信息" name="base">
-            <el-form-item :label-width="labelWidth" label="名称" prop="goodsName">
-              <el-input v-model="formData.goodsName" placeholder="请输入名称" />
-            </el-form-item>
-          </el-col>
 
-          <el-col :lg="12">
+        <el-form ref="baseFormRef" :model="formData" :rules="rules">
-            <el-form-item :label-width="labelWidth" label="编码" prop="goodsCoding">
-              <el-input v-model="formData.goodsCoding" placeholder="请输入编码" />
-            </el-form-item>
-          </el-col>
 
-          <el-col :lg="12">
+          <el-row :gutter="20">
-            <el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo">
-              <UploadFile v-model="formData.goodsMainImageVideo" :data=imgData />
-            </el-form-item>
-          </el-col>
 
-          <el-col :lg="12">
+            <el-col v-if="userid == 1" :lg="12">
-            <el-form-item :label-width="labelWidth" label="视频封面" prop="goodsVideoCover">
+              <el-form-item :label-width="labelWidth" label="店铺" prop="shopGuid">
-              <UploadImage ref="uploadRef" v-model="formData.goodsVideoCover" :data=imgData :limit="1" :fileSize="5"
+                <el-input v-model='formData.shopName' disabled type="text" />
-              :drag="true" />
+              </el-form-item>
-            </el-form-item>
+            </el-col>
-          </el-col>
-
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="图片" prop="goodsPicture">
-              <UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="1" :fileSize="5"
-              :drag="true" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="价格(最低)" prop="goodsPriceLowest">
-              <el-input-number v-model.number="formData.goodsPriceLowest" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="价格(最高)" prop="goodsPriceHighest">
-              <el-input-number v-model.number="formData.goodsPriceHighest" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="划线价格(最低)" prop="goodsDashedPriceLowest">
-              <el-input-number v-model.number="formData.goodsDashedPriceLowest" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="库存总量" prop="goodsTotalInventory">
-              <el-input-number v-model.number="formData.goodsTotalInventory" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="初始销量" prop="goodsSalesInitial">
-              <el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="实际销量" prop="goodsSalesActual">
-              <el-input-number v-model.number="formData.goodsSalesActual" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :lg="24">
-            <el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
-              <editor v-model="formData.goodsDetails" :min-height="200" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="库存计算方式(1下单立减库存 2付款立减库存)" prop="goodsDeductStockType">
-              <el-radio-group v-model="formData.goodsDeductStockType">
-                <el-radio v-for="item in  deduct_stock_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="是否赠送积分(1开启 0关闭)" prop="goodsIsPointsGift">
-              <el-radio-group v-model="formData.goodsIsPointsGift">
-                <el-radio v-for="item in  is_points_gift " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="是否允许使用积分抵扣(1允许 0不允许)" prop="goodsIsPointsDiscount">
-              <el-radio-group v-model="formData.goodsIsPointsDiscount">
-                <el-radio v-for="item in  is_points_discount " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" prop="goodsIsAlonePointsDiscount">
-              <el-radio-group v-model="formData.goodsIsAlonePointsDiscount">
-                <el-radio v-for="item in  is_alone_points_discount " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="单独设置积分抵扣的配置" prop="goodsPointsDiscountConfig">
-              <el-input v-model="formData.goodsPointsDiscountConfig" placeholder="请输入单独设置积分抵扣的配置" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="是否开启会员折扣(1开启 0关闭)" prop="goodsIsEnableGrade">
-              <el-radio-group v-model="formData.goodsIsEnableGrade">
-                <el-radio v-for="item in  is_enable_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="会员折扣设置(0默认等级折扣 1单独设置折扣)" prop="goodsIsAloneGrade">
-              <el-radio-group v-model="formData.goodsIsAloneGrade">
-                <el-radio v-for="item in  is_alone_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="单独设置折扣的配置" prop="goodsAloneGradeEquity">
-              <el-input v-model="formData.goodsAloneGradeEquity" placeholder="请输入单独设置折扣的配置" />
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="上下架状态(1上架  2下架)" prop="goodsShelfStatus">
-              <el-radio-group v-model="formData.goodsShelfStatus">
-                <el-radio v-for="item in  shelf_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-    
-          <el-col :lg="12">
-            <el-form-item :label-width="labelWidth" label="排序" prop="goodsSort">
-              <el-input-number v-model.number="formData.goodsSort" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
 
 
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="商品类目" prop="goodsCategoryGuid">
+                <el-cascader class="w100" :options="dataList"
+                  :props="{ checkStrictly: true, value: 'shopGoodsCategoryGuid', label: 'shopGoodsCategoryName', emitPath: false }"
+                  placeholder="请选择商品类目" clearable v-model="formData.goodsCategoryGuid">
+                  <template #default="{ node, data }">
+                    <span>{{ data.shopGoodsCategoryName }}</span>
+                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                  </template>
+                </el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="名称" prop="goodsName">
+                <el-input v-model="formData.goodsName" placeholder="请输入名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="编码" prop="goodsCoding">
+                <el-input v-model="formData.goodsCoding" placeholder="请输入编码" />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="图片" prop="goodsPicture">
+                <UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="5" :fileSize="5"
+                  :drag="true" :isShowTip="false" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="配送模板" prop="deliveryGuid">
+                <el-select v-model="formData.deliveryGuid" placeholder="请选择配送模板">
+                  <el-option v-for="item in deliveryDataList" :key="item.deliveryId" :label="item.deliveryName"
+                    :value="item.deliveryGuid" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="上下架状态" prop="goodsShelfStatus">
+                <el-radio-group v-model="formData.goodsShelfStatus">
+                  <el-radio v-for="item in  shelf_status " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
+                    item.dictLabel }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="排序" prop="goodsSort">
+                <el-input-number v-model.number="formData.goodsSort" controls-position="right" :min="0" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+        </el-form>
+
+      </el-tab-pane>
+
+      <el-tab-pane label="规格/库存" name="sku">
+
+        <el-form ref="skuFormRef" :model="formData" :rules="rules">
+          <el-row :gutter="20">
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="规格类型" prop="goodsSpecType">
+                <el-radio-group v-model="formData.goodsSpecType">
+                  <el-radio v-for="item in  spec_type " :key="item.dictValue" :label="parseInt(item.dictValue)"
+                    @change="handleChangeSpecType">{{
+                      item.dictLabel }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row v-if="formData.goodsSpecType == 1">
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="商品价格" prop="goodsPriceHighest">
+                <div style="display: block;">
+                  <el-input-number v-model.number="formData.goodsPriceHighest" controls-position="right" :min="0.01"
+                    :precision="2" />
+                  <span style="margin-left: 10px;">元</span>
+                  <div class="input-intro">商品的实际购买金额，最低0.01</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="划线价格" prop="goodsDashedPriceHighest">
+                <div style="display: block;">
+                  <el-input-number v-model.number="formData.goodsDashedPriceHighest" controls-position="right" :min="0"
+                    :precision="2" />
+                  <span style="margin-left: 10px;">元</span>
+                  <div class="input-intro">划线价仅用于商品页展示</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="库存总量" prop="goodsTotalInventory">
+                <div style="display: block;">
+                  <el-input-number v-model.number="formData.goodsTotalInventory" controls-position="right" :min="0" />
+                  <span style="margin-left: 10px;">件</span>
+                  <div class="input-intro">商品的实际库存数量，为0时用户无法下单</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <!-- TODO: Sku单个  -->
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="商品重量" prop="goodsSalesInitial">
+                <div style="display: block;">
+                  <el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :min="0"
+                    :precision="2" />
+                  <span style="margin-left: 10px;">Kg</span>
+                  <div class="input-intro">商品的实际重量，用于计算运费</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth + 20" label="库存计算方式" prop="goodsDeductStockType">
+                <el-radio-group v-model="formData.goodsDeductStockType">
+                  <el-radio v-for="item in  deduct_stock_type " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
+                    item.dictLabel }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row v-if="formData.goodsSpecType == 2">
+            <el-col :lg="24">
+
+              <MultiSpec v-model="formData"></MultiSpec>
+
+            </el-col>
+          </el-row>
+
+        </el-form>
+
+      </el-tab-pane>
+
+      <el-tab-pane label="商品详情" name="detail">
+
+        <el-form ref="detailFormRef" :model="formData" :rules="rules">
+          <el-row :gutter="20">
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
+                <editor v-model="formData.goodsDetails" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+      </el-tab-pane>
+
+      <el-tab-pane label="更多设置" name="more">
+
+        <el-form ref="moreFormRef" :model="formData" :rules="rules">
+          <el-row :gutter="20">
+
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="商品卖点" prop="goodsSellingPoint">
+                <el-input v-model="formData.goodsSellingPoint" placeholder="请输入商品卖点" />
+                <div class="input-intro">一句话简述，例如：此款商品美观大方 性价比较高 不容错过</div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="服务与承诺" prop="goodsServicesIds">
+                <el-select v-model="formData.goodsServicesIds" multiple placeholder="请选择服务与承诺">
+                  <el-option v-for="item in goodsServicesDataList" :key="item.goodsServicesId"
+                    :label="item.goodsServicesName" :value="item.goodsServicesId" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo">
+                <div style="display: block;">
+                  <UploadFile v-model="formData.goodsMainImageVideo" :limit="1" :fileSize="100" :data=imgData
+                    :isShowTip="false" />
+                  <div class="input-intro">建议视频宽高比19:9，建议时长8-45秒</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="视频封面" prop="goodsVideoCover">
+                <div style="display: block;">
+                  <UploadImage ref="uploadRef" v-model="formData.goodsVideoCover" :data=imgData :limit="1" :fileSize="5"
+                    :drag="true" :isShowTip="false" />
+                  <div class="input-intro">建议尺寸：750像素*750像素</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12">
+              <el-form-item :label-width="labelWidth" label="初始销量" prop="goodsSalesInitial">
+                <div style="display: block;">
+                  <el-input-number v-model.number="formData.goodsSalesInitial" controls-position="right" :min="0" />
+                  <div class="input-intro">用户端展示的销量 = 初始销量 + 实际销量</div>
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-divider content-position="left">
+            <div class="divider-title">积分设置</div>
+          </el-divider>
+
+          <el-row>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="积分赠送" prop="goodsIsPointsGift">
+                <div style="display: block;">
+                  <el-radio-group v-model="formData.goodsIsPointsGift">
+                    <el-radio v-for="item in  is_points_gift " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
+                      item.dictLabel }}</el-radio>
+                  </el-radio-group>
+                  <div class="input-intro">开启后用户购买此商品将获得积分</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="积分抵扣" prop="goodsIsPointsDiscount">
+                <div style="display: block;">
+                  <el-radio-group v-model="formData.goodsIsPointsDiscount">
+                    <el-radio v-for="item in  is_points_discount " :key="item.dictValue"
+                      :label="parseInt(item.dictValue)">{{
+                        item.dictLabel }}</el-radio>
+                  </el-radio-group>
+                  <div class="input-intro">开启后用户购买此商品可以使用积分进行抵扣</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :lg="12">
+        <el-form-item :label-width="labelWidth" label="积分抵扣设置(0默认抵扣 1单独设置抵扣)" prop="goodsIsAlonePointsDiscount">
+          <el-radio-group v-model="formData.goodsIsAlonePointsDiscount">
+            <el-radio v-for="item in  is_alone_points_discount " :key="item.dictValue"
+              :label="parseInt(item.dictValue)">{{ item.dictLabel }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col> -->
+            <!-- <el-col :lg="12">
+        <el-form-item :label-width="labelWidth" label="单独设置积分抵扣的配置" prop="goodsPointsDiscountConfig">
+          <el-input v-model="formData.goodsPointsDiscountConfig" placeholder="请输入单独设置积分抵扣的配置" />
+        </el-form-item>
+      </el-col> -->
+          </el-row>
 
 
+          <el-divider content-position="left">
+            <div class="divider-title">会员折扣设置</div>
+          </el-divider>
 
+          <el-row>
+            <el-col :lg="24">
+              <el-form-item :label-width="labelWidth" label="会员折扣" prop="goodsIsEnableGrade">
+                <div style="display: block;">
+                  <el-radio-group v-model="formData.goodsIsEnableGrade">
+                    <el-radio v-for="item in  is_enable_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
+                      item.dictLabel }}</el-radio>
+                  </el-radio-group>
+                  <div class="input-intro">开启后会员折扣，会员购买此商品可以享受会员等级折扣价</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :lg="24">
+              <el-form-item label="会员折扣设置" prop="goodsIsAloneGrade">
+                <div style="display: block;">
+                  <el-radio-group v-model="formData.goodsIsAloneGrade">
+                    <el-radio v-for="item in  is_alone_grade " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
+                      item.dictLabel }}</el-radio>
+                  </el-radio-group>
+                  <div class="input-intro">默认折扣：默认为用户所属会员等级的折扣率</div>
+                </div>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :lg="12">
+        <el-form-item :label-width="labelWidth" label="单独设置折扣的配置" prop="goodsAloneGradeEquity">
+          <el-input v-model="formData.goodsAloneGradeEquity" placeholder="请输入单独设置折扣的配置" />
+        </el-form-item>
+      </el-col> -->
+
+          </el-row>
+        </el-form>
+
+      </el-tab-pane>
+
+    </el-tabs>
 
-      </el-row>
-    </el-form>
 
     <template #footer>
       <div class="dialog-footer">
-        <el-button type="primary" @click="handleEditClick(formRef)">编辑</el-button>
+        <el-button type="primary" @click="handleEditClick()" :loading="loadingStatus">编辑</el-button>
-        <el-button @click="handleResetClick(formRef)">重置</el-button>
+        <el-button @click="handleResetClick()">重置</el-button>
       </div>
     </template>
   </el-dialog>
@@ -208,18 +322,30 @@
 import { ElMessage } from 'element-plus'
 import modal from '@/plugins/modal.js'
 import { reactive, ref, watch } from "vue";
-import {  addOrUpdateGoods } from "@/api/business/GoodsManager/Goodss/goods.js";
+import { addOrUpdateGoods, getCurrentGoodsServiceList, getGoodsSkuList } from "@/api/business/GoodsManager/Goodss/goods.js";
+import { shopGoodsCategoryTreeList } from '@/api/business/GoodsManager/ShopGoodsCategorys/shopGoodsCategory.js';
+import { deliveryList } from '@/api/business/LogisticsManage/Deliverys/delivery.js'
+import { goodsServicesList } from '@/api/business/GoodsManager/GoodsServicess/goodsServices.js'
+import useUserStore from '@/store/modules/user'
+import MultiSpec from './MultiSpec/MultiSpec.vue';
 
 
 // 打开弹窗时回调
 const openDialog = async () => {
-   await getdeduct_stock_type()
+
-   await getis_points_gift()
+  await getTreeList()
-   await getis_points_discount()
+  await getDeliveryList()
-   await getis_alone_points_discount()
+  await getspec_type()
-   await getis_enable_grade()
+  await getGoodsSkuListFun()
-   await getis_alone_grade()
+  await getGoodsServicesList()
-   await getshelf_status()
+  await getCurrentGoodsServiceListFun()
+  await getdeduct_stock_type()
+  await getis_points_gift()
+  await getis_points_discount()
+  await getis_alone_points_discount()
+  await getis_enable_grade()
+  await getis_alone_grade()
+  await getshelf_status()
 
 }
 
@@ -230,8 +356,10 @@ watch(props, async (v) => {
   formData.value = v.data;
 
 });
-  
+
 // 业务参数
+// 商品规格(1单规格 2多规格)
+const spec_type = ref([]);
 // 库存计算方式(1下单立减库存 2付款立减库存)字典选项列表
 const deduct_stock_type = ref([]);
 // 是否赠送积分(1开启 0关闭)字典选项列表
@@ -247,7 +375,33 @@ const is_alone_grade = ref([]);
 // 上下架状态(1上架  2下架)字典选项列表
 const shelf_status = ref([]);
 
+// 当前用户id
+const userid = useUserStore().userId
+// 标签选中
+const activeName = ref('base')
+// 商品类目树形列表
+const dataList = ref([])
+// 配送模板列表
+const deliveryDataList = ref([])
+// 商品服务与承诺列表
+const goodsServicesDataList = ref([])
+
+// 基础信息表单
+const baseFormRef = ref();
+// 商品规格表单
+const skuFormRef = ref();
+// 商品详情表单
+const detailFormRef = ref();
+// 更多设置表单
+const moreFormRef = ref();
+
 // -业务方法
+// 字典获取
+async function getspec_type() {
+  await proxy.getDicts('spec_type').then((res) => {
+    spec_type.value = res.data
+  })
+}
 //字典获取
 async function getdeduct_stock_type() {
   await proxy.getDicts('deduct_stock_type').then((res) => {
@@ -291,6 +445,64 @@ async function getshelf_status() {
   })
 }
 
+// 获取商品类目树形列表
+async function getTreeList() {
+  shopGoodsCategoryTreeList({ shopGuid: formData.value?.shopGuid }).then((res) => {
+    if (res.code == 200) {
+      dataList.value = res.data
+    }
+  })
+}
+
+// 获取配送模板列表
+async function getDeliveryList() {
+  deliveryList({
+    pageNum: 1,
+    pageSize: 10000,
+    shopGuid: formData.value?.shopGuid
+  }).then((res) => {
+    if (res.code == 200) {
+      deliveryDataList.value = res.data.result
+    }
+  })
+}
+
+// 获取商品服务与承诺列表
+async function getGoodsServicesList() {
+  goodsServicesList({
+    pageNum: 1,
+    pageSize: 10000,
+    shopGuid: formData.value?.shopGuid
+  }).then((res) => {
+    if (res.code == 200) {
+      goodsServicesDataList.value = res.data.result
+    }
+  })
+}
+
+// 获取当前商品服务与承诺
+async function getCurrentGoodsServiceListFun() {
+  getCurrentGoodsServiceList({
+    goodsGuid: formData.value?.goodsGuid
+  }).then((res) => {
+    if (res.code == 200) {
+      formData.value.goodsServicesIds = res.data
+    }
+  })
+}
+
+// 获取当前商品sku列表
+async function getGoodsSkuListFun() {
+  getGoodsSkuList({
+    goodsGuid: formData.value?.goodsGuid
+  }).then((res) => {
+    if (res.code == 200) {
+      formData.value.goodsSpecList = res.data.goodsSpecList
+      formData.value.skuList = res.data.skuList
+      console.log(formData.value.skuList, 'skuList');
+    }
+  })
+}
 
 
 // -基础参数
@@ -300,6 +512,7 @@ const props = defineProps({
   done: Function,
 });
 
+const loadingStatus = ref(false)
 const labelWidth = 100;
 const formRef = ref();
 const { proxy } = getCurrentInstance()
@@ -310,54 +523,93 @@ const imgData = ref({
 
 // 验证
 const rules = reactive({
-    goodsGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
+  shopGuid: [{ required: true, message: "店铺不能为空", trigger: "blur" }],
-    shopGuid: [{ required: true, message: "店铺guid不能为空", trigger: "blur", type: "number" }],
+  goodsCategoryGuid: [{ required: true, message: "商品类目不能为空", trigger: "blur" }],
-    goodsCategoryGuid: [{ required: true, message: "商品类目guid不能为空", trigger: "blur", type: "number" }],
+  goodsSpecType: [{ required: true, message: "规格类型不能为空", trigger: "blur" }],
-    goodsSkuGuid: [{ required: true, message: "商品规格guid不能为空", trigger: "blur", type: "number" }],
+  deliveryGuid: [{ required: true, message: "配送模板不能为空", trigger: "blur" }],
-    deliveryGuid: [{ required: true, message: "配送模板guid不能为空", trigger: "blur", type: "number" }],
+  goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
-    goodsName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+  goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
-    goodsCoding: [{ required: true, message: "编码不能为空", trigger: "blur" }],
+  goodsPriceHighest: [{ required: true, message: "价格不能为空", trigger: "blur" }],
-    goodsPicture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
+  goodsTotalInventory: [{ required: true, message: "库存总量不能为空", trigger: "blur", type: "number" }],
-    goodsPriceLowest: [{ required: true, message: "价格(最低)不能为空", trigger: "blur" }],
+  goodsSalesInitial: [{ required: true, message: "初始销量不能为空", trigger: "blur", type: "number" }],
-    goodsPriceHighest: [{ required: true, message: "价格(最高)不能为空", trigger: "blur" }],
+  goodsDetails: [{ required: true, message: "详情不能为空", trigger: "blur" }],
-    goodsDashedPriceLowest: [{ required: true, message: "划线价格(最低)不能为空", trigger: "blur" }],
+  goodsDeductStockType: [{ required: true, message: "库存计算方式不能为空", trigger: "blur", type: "number" }],
-    goodsTotalInventory: [{ required: true, message: "库存总量不能为空", trigger: "blur", type: "number" }],
+  goodsIsPointsGift: [{ required: true, message: "是否赠送积分不能为空", trigger: "blur", type: "number" }],
-    goodsSalesInitial: [{ required: true, message: "初始销量不能为空", trigger: "blur", type: "number" }],
+  goodsIsPointsDiscount: [{ required: true, message: "是否允许使用积分抵扣不能为空", trigger: "blur", type: "number" }],
-    goodsSalesActual: [{ required: true, message: "实际销量不能为空", trigger: "blur", type: "number" }],
+  goodsIsAlonePointsDiscount: [{ required: true, message: "积分抵扣设置不能为空", trigger: "blur", type: "number" }],
-    goodsDetails: [{ required: true, message: "详情不能为空", trigger: "blur" }],
+  goodsIsEnableGrade: [{ required: true, message: "是否开启会员折扣不能为空", trigger: "blur", type: "number" }],
-    goodsDeductStockType: [{ required: true, message: "库存计算方式(1下单立减库存 2付款立减库存)不能为空", trigger: "blur", type: "number" }],
+  goodsIsAloneGrade: [{ required: true, message: "会员折扣设置不能为空", trigger: "blur", type: "number" }],
-    goodsIsPointsGift: [{ required: true, message: "是否赠送积分(1开启 0关闭)不能为空", trigger: "blur", type: "number" }],
+  goodsShelfStatus: [{ required: true, message: "上下架状态不能为空", trigger: "blur", type: "number" }],
-    goodsIsPointsDiscount: [{ required: true, message: "是否允许使用积分抵扣(1允许 0不允许)不能为空", trigger: "blur", type: "number" }],
+  goodsSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
-    goodsIsAlonePointsDiscount: [{ required: true, message: "积分抵扣设置(0默认抵扣 1单独设置抵扣)不能为空", trigger: "blur", type: "number" }],
-    goodsIsEnableGrade: [{ required: true, message: "是否开启会员折扣(1开启 0关闭)不能为空", trigger: "blur", type: "number" }],
-    goodsIsAloneGrade: [{ required: true, message: "会员折扣设置(0默认等级折扣 1单独设置折扣)不能为空", trigger: "blur", type: "number" }],
-    goodsShelfStatus: [{ required: true, message: "上下架状态(1上架  2下架)不能为空", trigger: "blur", type: "number" }],
-    goodsSort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
 });
 
 // -基础方法
+function getFormPromise(form) {
+  return new Promise((resolve) => {
+    form.validate((res) => {
+      resolve(res)
+    })
+  })
+}
+
 // 提交
-const handleEditClick = async (formEl) => {
+const handleEditClick = async () => {
-  if (!formEl) return;
+
-  formEl.validate(async (valid) => {
+  Promise.all([baseFormRef.value, skuFormRef.value, detailFormRef.value, moreFormRef.value,].map(getFormPromise)).then(async (res) => {
-    if (!valid) {
+    const validateResult = res.every((item) => !!item)
-      return;
+
+    if (validateResult) {
+      loadingStatus.value = true
+      if (formData.value.goodsServicesIds.length !== 0) {
+        formData.value.goodsServicesIds = formData.value.goodsServicesIds.join(',')
+      }
+      else {
+        formData.value.goodsServicesIds = ""
+      }
+
+      if (formData.value.goodsSpecType == 2) {
+        if (formData.value.goodsSpecList.length == 0) {
+          modal.msgError('商品规格不能为空！')
+          return
+        }
+      }
+
+      const { code } = await addOrUpdateGoods(formData.value);
+      if (code == 200) {
+        modal.msgSuccess('修改成功')
+        closeDialog();
+        loadingStatus.value = false
+      }
+    } else {
+      modal.msgError('表单未通过验证！')
     }
 
-
-    const { code } = await addOrUpdateGoods(formData.value);
-    if (code == 200) {
-      modal.msgSuccess('修改成功')
-      closeDialog();
-    }
   });
 }
 
-const handleResetClick = async (formEl) => {
+const handleResetClick = async () => {
-  if (!formEl) return;
+  let formElList = [baseFormRef.value, skuFormRef.value, detailFormRef.value, moreFormRef.value]
-  formEl.resetFields();
+  if (!formElList) return;
-}
+  formElList.forEach(item => {
+    item.resetFields();
+  });
+};
 const closeDialog = () => {
+
+  // 基础信息
+  formData.value.shopName = ""
+  formData.value.shopGuid = ""
+  dataList.value = []
+  deliveryDataList.value = []
+
+  activeName.value = 'base'
+
+  // 商品规格
+  formData.value.goodsSpecList = []
+  formData.value.skuList = []
+
+  handleResetClick();
+
   props.done();
   emits("update:modelValue", false);
 };

src/views/business/GoodsManager/Goodss/components/MultiSpec/MultiSpec.vue

@@ -40,13 +40,14 @@
   <el-form-item :label-width="labelWidth" label="Sku列表">
 
     <!-- sku列表 -->
+
     <el-table :data="skuList" border style="width: 100%" :span-method="objectSpanMethod">
       <!-- 动态列 -->
       <el-table-column v-for="column in skuColumns" :prop="column.prop" :label="column.label" :key="column.key"
         :width="column.width">
       </el-table-column>
 
-      <el-table-column prop="goodsSkuPrice" label="预览图" width="125" align="center">
+      <el-table-column prop="goodsSkuImg" label="预览图" width="125" align="center">
         <template #default="scope">
           <UploadImage ref="uploadRef" v-model="scope.row.goodsSkuImg" :data=imgData :limit="1" :fileSize="5" :drag="true"
             :isShowTip="false" />
@@ -59,31 +60,33 @@
         </template>
       </el-table-column>
 
-      <el-table-column prop="goodsSkuPrice" label="划线价格" width="145">
+      <el-table-column prop="goodsSkuLinePrice" label="划线价格" width="145">
         <template #default="scope">
-          <el-input-number v-model.number="scope.row.goodsSkuLinePrice" controls-position="right" :min="0" :precision="2" />
+          <el-input-number v-model.number="scope.row.goodsSkuLinePrice" controls-position="right" :min="0"
+            :precision="2" />
         </template>
       </el-table-column>
 
-      <el-table-column prop="goodsSkuPrice" label="库存数量" width="145">
+      <el-table-column prop="goodsSkuStockNum" label="库存数量" width="145">
         <template #default="scope">
-          <el-input-number v-model.number="scope.row.goodsSkuStockNum" controls-position="right" :min="0"  />
+          <el-input-number v-model.number="scope.row.goodsSkuStockNum" controls-position="right" :min="0" />
         </template>
       </el-table-column>
 
-      <el-table-column prop="goodsSkuPrice" label="商品重量 (KG)" width="145">
+      <el-table-column prop="goodsSkuWeight" label="商品重量 (KG)" width="145">
         <template #default="scope">
           <el-input-number v-model.number="scope.row.goodsSkuWeight" controls-position="right" :min="0" :precision="2" />
         </template>
       </el-table-column>
 
-      <el-table-column prop="goodsSkuPrice" label="SKU编码"  width="145">
+      <el-table-column prop="goodsSkuSkuCode" label="SKU编码" width="145">
         <template #default="scope">
           <el-input v-model="scope.row.goodsSkuSkuCode" placeholder="" />
         </template>
       </el-table-column>
 
     </el-table>
+
   </el-form-item>
 </template>
 
@@ -96,9 +99,36 @@ const props = defineProps({
 
 watch(props, async (v) => {
   goodsSpecList.value = v.modelValue.goodsSpecList;
+  if (v.modelValue.goodsSpecList && v.modelValue.goodsSpecList.length !== 0) {
+    skuColumns.value = []; // 清空原有的表头
+
+    // 遍历规格组列表
+    v.modelValue.goodsSpecList.forEach((specGroup, index) => {
+      let prop;
+      if (index === 0) {
+        prop = 'specValue';
+      } else if (index === 1) {
+        prop = 'specSecondValue';
+      } else if (index === 2) {
+        prop = 'specThirdValue';
+      }
+
+      const column = {
+        prop: prop, // 使用属性名称
+        label: specGroup.specName, // 使用规格组的名称作为标签
+        width: '100'
+      };
+
+      skuColumns.value.push(column); // 将表头对象添加到skuColumns数组
+    });
+  }
   skuList.value = v.modelValue.skuList;
+  if (v.modelValue.skuList && v.modelValue.skuList.length !== 0) {
+    getSpanArr(skuList.value);
+  }
 });
 
+
 /** 商品规格 业务参数 */
 
 // 添加商品规格按钮状态
@@ -137,7 +167,18 @@ const goodsSpecList = ref([
   //       specValue: "",
   //     },
   //   ],
-  // }
+  // },
+  // {
+  //   specId: 0,
+  //   specName: "",
+  //   props: [
+  //     {
+  //       specValueId: 0,
+  //       specValueName: "",
+  //       specValue: "",
+  //     },
+  //   ],
+  // },
 ])
 
 // sku列表
@@ -175,20 +216,17 @@ const getList = () => {
   newList.value = descartes(newData.value);
   console.log(newList.value, '笛卡尔积处理过后的数据');
   newList.value.forEach((item) => {
-    console.log(item, 'item数据');
     skuList.value.push({
       specValue: Array.isArray(item) ? item[0] : item,
       specSecondValue: Array.isArray(item) ? item[1] : null,
       specThirdValue: Array.isArray(item) ? item[2] : null,
       goodsGuid: 0,
-      specValueName: "",
       goodsSkuImg: "",
       goodsSkuPrice: 0.01,
       goodsSkuLinePrice: 0,
       goodsSkuStockNum: 0,
       goodsSkuWeight: 0,
       goodsSkuSkuCode: "",
-      goodsSkuProps: ""
     });
   });
 
@@ -199,6 +237,43 @@ const getList = () => {
   console.log(skuList.value, '表格中的数据');
 }
 
+// 合并已存在的sku数据
+// function oldSkuList(newSkuList) {
+//   // const oldSkuList = _.cloneDeep(this.multiSpecData.skuList)
+//   const oldSkuList = skuList.value.concat()
+//   if (!oldSkuList.length || !newSkuList.length) {
+//     return newSkuList
+//   }
+//   for (const index in newSkuList) {
+//     // 查找符合的旧记录
+//     let oldSkuItem = {}
+//     if (oldSkuList.length === newSkuList.length) {
+//       oldSkuItem = _.cloneDeep(oldSkuList[index])
+//     } else {
+//       oldSkuItem = oldSkuList.find(item => {
+//         return item.key === newSkuList[index].key
+//       })
+//     }
+//     // 写入新纪录
+//     if (oldSkuItem) {
+//       newSkuList[index] = {
+//         ...newSkuList[index],
+//         ..._.pick(oldSkuItem, Object.keys({
+//           goodsGuid: 0,
+//           goodsSkuImg: "",
+//           goodsSkuPrice: 0.01,
+//           goodsSkuLinePrice: 0,
+//           goodsSkuStockNum: 0,
+//           goodsSkuWeight: 0,
+//           goodsSkuSkuCode: "",
+//         }))
+//       }
+//       // console.log(newSkuList[index].image)
+//     }
+//   }
+//   return newSkuList
+// }
+
 
 //计算位置的方法
 const getSpanArr = (data) => {
@@ -246,84 +321,29 @@ const getSpanArr = (data) => {
 // 合并行数
 const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   // columnIndex === 0 找到第一列，实现合并随机出现的行数
-  if (columnIndex === 0) {
+  if (goodsSpecList.value && goodsSpecList.value.length !== 0) {
-    const _row = spanArr.value[rowIndex];
+    if (columnIndex === 0) {
-    const _col = _row > 0 ? 1 : 0;
+      const _row = spanArr.value[rowIndex];
-    return {
-      rowspan: _row,
-      colspan: _col
-    };
-    // columnIndex === 1 找到第二列，合并他的列数
-  } else if (columnIndex === 1) {
-    if (spanArr1.value.length != 0) {
-      const _row = spanArr1.value[rowIndex];
       const _col = _row > 0 ? 1 : 0;
       return {
         rowspan: _row,
         colspan: _col
       };
+      // columnIndex === 1 找到第二列，合并他的列数
+    } else if (columnIndex === 1) {
+      if (spanArr1.value.length != 0) {
+        const _row = spanArr1.value[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
+      }
     }
   }
 }
 
 
-// 合并列表
-// const objectSpanMethod = ({
-//   row,
-//   column,
-//   rowIndex,
-//   columnIndex,
-// }) => {
-//   // if (columnIndex === 0) {
-//   //   if (rowIndex % firstLen === 0) {
-//   //     return {
-//   //       rowspan: firstLen,
-//   //       colspan: 1,
-//   //     }
-//   //   } else {
-//   //     return {
-//   //       rowspan: 0,
-//   //       colspan: 0,
-//   //     }
-//   //   }
-//   // }
-
-//   // if (columnIndex === 1) {
-//   //   if (rowIndex % secondLen === 0) {
-//   //     return {
-//   //       rowspan: secondLen,
-//   //       colspan: 1,
-//   //     }
-//   //   } else {
-//   //     return {
-//   //       rowspan: 0,
-//   //       colspan: 0,
-//   //     }
-//   //   }
-//   // }
-
-// }
-
-// let firstLen = 0
-// let secondLen = 0
-// skuList.value.map((item, idx) => {
-//   let firstVal = skuList?.value[0].specValue
-//   if (item.specValue === firstVal) {
-//     firstLen += 1
-//     firstVal = item.specValue
-//   }
-
-//   // let secondVal = skuList?.value[0].specSecondValue
-//   // if (item.specSecondValue === secondVal) {
-//   //   secondLen += 1
-//   //   secondVal = item.specSecondValue
-//   // }
-// })
-// console.log(secondLen, '第二列');
-
-
-
-
 
 /** 商品规格 业务方法 */
 
@@ -380,7 +400,6 @@ function handleChangeSepc(item, idx) {
     key: idx
   }
   skuColumns.value.push(column)
-
 }
 
 // 删除规格组
@@ -531,9 +550,7 @@ function handleDelSpecValue(item, specValue) {
   height: 90px;
 }
 
-:deep(.el-upload-list--picture-card ) {
+:deep(.el-upload-list--picture-card) {
   --el-upload-list-picture-card-size: 100px;
 }
-
-
 </style>