fixed 研究商品sku

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

@@ -152,6 +152,77 @@
               </el-form-item>
             </el-col>
           </el-row>
+
+          <el-row v-if="formData.goodsSpecType == 2">
+            <el-col :lg="24">
+
+              <el-form-item :label-width="labelWidth" label="商品规格">
+                <div style="display: block;width: 100%;">
+                  <!-- <el-input-number v-model.number="formData.goodsSpec" controls-position="right" :min="0.01"
+                    :precision="2" /> -->
+                  <div class="input-intro">最多添加3个商品规格组，生成的SKU数量不能超出50个</div>
+
+                  <!-- 规格样式 -->
+                  <div class="sepc-big-box" v-for="(item, index) in goodsSpecList">
+                    <div class="sepc-title-box">
+                      <el-input v-model="item.specName" @change="handleChangeSepc(item, index)" class="spec-input"
+                        placeholder="规格组名称" clearable />
+                      <el-link type="primary" @click="handleDelSpec(item)">删除规格组</el-link>
+                    </div>
+                    <div class="spec-value-box">
+                      <div class="spec-value-input-big-box">
+                        <div class="spec-value-input-box" v-for="specValue in item.props">
+                          <div class="spec-value-input-del" @click="handleDelSpecValue(item,specValue)"><el-icon>
+                              <Close />
+                            </el-icon></div>
+                          <el-input v-model="specValue.specValueName" @change="handleChangeSepcValue(item,specValue)"
+                            class="spec-value-input" placeholder="规格值名称" clearable />
+                        </div>
+                      </div>
+                      <el-link type="primary" v-if="isAddSpecValueMax" @click="handleAddSpecValue(item)">添加规格值</el-link>
+                    </div>
+                  </div>
+
+                  <el-button v-if="isAddSpecMax" class="mt-5" @click="handleAddSpec">
+                    <el-icon class="avatar-uploader-icon">
+                      <plus />
+                    </el-icon>
+                    添加规格组
+                  </el-button>
+                </div>
+              </el-form-item>
+
+              
+              <!-- Sku列表 -->
+              <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="预览图">
+                    <template #default="scope">
+                      <UploadImage ref="uploadRef" v-model="scope.row.goodsSkuImg" :data=imgData :limit="1"
+                        :fileSize="5" :drag="true" :isShowTip="false" />
+                    </template>
+                  </el-table-column> -->
+
+                  <el-table-column prop="goodsSkuPrice" label="商品价格">
+                    <template #default="scope">
+                      <el-input-number v-model.number="scope.row.goodsSkuPrice" controls-position="right" :min="0"
+                        :precision="2" />
+                    </template>
+                  </el-table-column>
+
+                </el-table>
+              </el-form-item>
+
+            </el-col>
+          </el-row>
+
         </el-form>
 
       </el-tab-pane>
@@ -351,7 +422,7 @@ const is_alone_grade = ref([]);
 // 上下架状态(1上架  2下架)字典选项列表
 const shelf_status = ref([]);
 // 标签选中
-const activeName = ref('base')
+const activeName = ref('sku')
 
 // 选择店铺弹窗参数
 const ChooseShopDialogVisible = ref(false);
@@ -364,6 +435,356 @@ const dataList = ref([])
 const deliveryDataList = ref([])
 
 
+/** 商品规格 */
+
+// 添加商品规格按钮状态
+const isAddSpecMax = ref(true)
+const isAddSpecValueMax = ref(true)
+
+// 规格组
+const goodsSpecList = ref([
+  // 规格值Json属性
+  // {
+  //   specId: 0,
+  //   specName: "",
+  //   props: [
+  //     {
+  //       specValueId: 0,
+  //       specValueName: "",
+  //       specValue: "",
+  //     },
+  //   ],
+  // }
+])
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const skuList = ref([
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "4+128G",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "4+128G",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "8+256G",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "8+256G",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "12+1T",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "12+1T",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "1000G",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "蓝色",
+  //   specSecondValue: "1000G",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "4+128G",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "4+128G",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "8+256G",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "8+256G",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "12+1T",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "12+1T",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "1000G",
+  //   specThirdValue: "5G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+  // {
+  //   specValue: "黑色",
+  //   specSecondValue: "1000G",
+  //   specThirdValue: "4G",
+  //   goodsGuid: 0,
+  //   specValueName: "",
+  //   goodsSkuImg: "",
+  //   goodsSkuSkuCode: 0,
+  //   goodsSkuPrice: 10,
+  //   goodsSkuLinePrice: 0,
+  //   goodsSkuStockNum: 0,
+  //   goodsSkuWeight: 0,
+  //   goodsSkuProps: ""
+  // },
+])
+
+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, '第二列');
+
+const skuColumns = ref([
+  // {
+  //   prop: 'specValue',
+  //   label: '颜色',
+  //   width: '100'
+  // },
+  // {
+  //   prop: 'specSecondValue',
+  //   label: '内存',
+  //   width: '100'
+  // },
+  // {
+  //   prop: 'specThirdValue',
+  //   label: '版本',
+  //   width: '100'
+  // },
+])
+
+
+
+
+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,
+  //     }
+  //   }
+  // }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 // -业务方法
@@ -462,17 +883,143 @@ async function getDeliveryList() {
 
 /** 商品规格 */
 
-// 切换商品规格
+// 添加规格组
-function handleChangeSpecType(e) {
+function handleAddSpec() {
-  if (e === 1) {
+  let data = {
-    console.log(e);
+    specId: 0,
-  }
+    specName: "",
-  if (e === 2) {
+    key: 0,
+    props: [
 
+    ]
+  }
+  goodsSpecList.value.push(data)
+
+  if (goodsSpecList.value.length == 3) {
+    isAddSpecMax.value = false
+  }
+}
+
+// 修改规格组
+function handleChangeSepc(item, idx) {
+  
+  item.key = idx
+  let foundMatch = false;
+  skuColumns.value.map((i, index) => {
+    if (i.key == idx) {
+      i.label = item.specName
+      foundMatch = true
+      return true
+    }
+  })
+
+  if (foundMatch) {
+    return; // 停止执行后续代码
+  }
+
+  // 添加动态表头
+  let column = {
+    prop: 'specValue',
+    label: item.specName,
+    width: '100',
+    key: idx
+  }
+  skuColumns.value.push(column)
+
+}
+
+// 删除规格组
+function handleDelSpec(item) {
+  const index = goodsSpecList.value.indexOf(item);
+  if (index > -1) {
+    goodsSpecList.value.splice(index, 1);
+  }
+
+  if (goodsSpecList.value.length < 3) {
+    isAddSpecMax.value = true
+  }
+
+
+  // 输出对应的表头
+  skuColumns.value = skuColumns.value.filter(column => column.label !== item.specName);
+
+  // 删除对应的sku
+  // skuColumns.value = skuColumns.value.filter(column => column.specName !== item.specName);
+
+
+}
+
+
+
+
+// 添加规格值
+function handleAddSpecValue(item) {
+  let data = {
+    specId: 0,
+    specValueId: 0,
+    specValueName: "",
+  }
+  item.props.push(data)
+
+  if (item.props.length == 50) {
+    isAddSpecValueMax.value = false
   }
 }
 
 
+// 修改规格值
+function handleChangeSepcValue(item,specValue) {
+
+  let firstSpecValue = ""
+  let secondSpecValue = ""
+  let thirdSpecValue = ""
+  
+    console.log(item,'item喵喵喵喵喵喵');
+  // goodsSpecList.value.map((item,index) => {
+  //   if(item.key === 0){
+  //     firstSpecValue = specValue.specValueName
+  //   }
+  //   if(item.key === 1){
+  //     secondSpecValue = specValue.specValueName
+  //   }
+  //   if(item.key === 2){
+  //     thirdSpecValue = specValue.specValueName
+  //   }
+  // })
+
+  // 添加sku
+  let sku = {
+    specValue: firstSpecValue,
+    specSecondValue: secondSpecValue,
+    specThirdValue: thirdSpecValue,
+    goodsGuid: 0,
+    specValueName: "",
+    goodsSkuImg: "",
+    goodsSkuSkuCode: 0,
+    goodsSkuPrice: 0,
+    goodsSkuLinePrice: 0,
+    goodsSkuStockNum: 0,
+    goodsSkuWeight: 0,
+    goodsSkuProps: ""
+  }
+  skuList.value.push(sku)
+
+  console.log(skuList.value,'asdasd-------------');
+
+}
+
+
+// 删除规格值
+function handleDelSpecValue(item, specValue) {
+  const index = item.props.indexOf(specValue);
+  if (index > -1) {
+    item.props.splice(index, 1);
+  }
+
+  if (item.props.length < 50) {
+    isAddSpecValueMax.value = true
+  }
+}
 
 
 
@@ -581,4 +1128,68 @@ const handleResetClick = async (formEl) => {
 .el-divider {
   margin: 50px 0;
 }
+
+.sepc-big-box {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.sepc-title-box {
+  width: 100%;
+  padding: 10px;
+  background-color: #f4f4f5;
+  display: flex;
+  justify-content: space-between;
+}
+
+.spec-value-box {
+  width: 100%;
+  padding: 20px 20px 20px 40px;
+  background-color: #fbfbfb;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.spec-value-input-big-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.spec-value-input-box {
+  width: 250px;
+  position: relative;
+  margin-right: 30px;
+  margin-bottom: 15px;
+}
+
+.spec-value-input-del {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  z-index: 99;
+  width: 18px;
+  height: 18px;
+  background-color: grey;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.spec-input {
+  width: 250px;
+  margin-right: 30px;
+}
+
+
+.mt-5 {
+  margin-top: 10px;
+}
+
+.el-input-number {
+  width: 140px;
+}
 </style>

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

@@ -0,0 +1,286 @@
+<template>
+  <el-form-item :label-width="labelWidth" label="商品规格">
+    <div style="display: block;width: 100%;">
+      <div class="input-intro">最多添加3个商品规格组，生成的SKU数量不能超出50个</div>
+
+      <!-- 规格样式 -->
+      <div class="sepc-big-box" v-for="(item, index) in multiSpecData.specList">
+        <div class="sepc-title-box">
+          <el-input v-model="item.spec_name" @change="onChangeSpecGroupIpt" class="spec-input" placeholder="规格组名称"
+            clearable />
+          <el-link type="primary" @click="handleDeleteSpecGroup(index)">删除规格组</el-link>
+        </div>
+        <div class="spec-value-box">
+          <div class="spec-value-input-big-box">
+            <div class="spec-value-input-box" v-for="(itm, idx) in item.valueList" :key="idx">
+              <div class="spec-value-input-del" @click="handleDeleteSpecValue(index, idx)"><el-icon>
+                  <Close />
+                </el-icon></div>
+              <el-input v-model="specValue.specValueName" @change="onChangeSpecValueIpt"
+                class="spec-value-input" placeholder="规格值名称" clearable />
+            </div>
+          </div>
+          <el-link type="primary" v-if="!isSpecLocked" @click="handleAddSpecValue(index)">添加规格值</el-link>
+        </div>
+      </div>
+
+      <el-button v-if="!isSpecLocked && multiSpecData.specList.length < 3" class="mt-5" @click="handleAddSpecGroup">
+        <el-icon class="avatar-uploader-icon">
+          <plus />
+        </el-icon>
+        添加规格组
+      </el-button>
+    </div>
+  </el-form-item>
+
+
+  <!-- Sku列表 -->
+  <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="预览图">
+                    <template #default="scope">
+                      <UploadImage ref="uploadRef" v-model="scope.row.goodsSkuImg" :data=imgData :limit="1"
+                        :fileSize="5" :drag="true" :isShowTip="false" />
+                    </template>
+                  </el-table-column> -->
+
+      <el-table-column prop="goodsSkuPrice" label="商品价格">
+        <template #default="scope">
+          <el-input-number v-model.number="scope.row.goodsSkuPrice" controls-position="right" :min="0" :precision="2" />
+        </template>
+      </el-table-column>
+
+    </el-table>
+  </el-form-item>
+</template>
+
+<script>
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import MultiSpecModel from '@/common/model/goods/MultiSpec'
+import { SelectImage } from '@/components'
+
+export default {
+  components: {
+    SelectImage
+  },
+  props: {
+    // 默认的规格列表
+    defaultSpecList: PropTypes.array.def([]),
+    // 默认的SKU列表
+    defaultSkuList: PropTypes.array.def([]),
+    // 商品规格是否锁定(锁定状态下不允许编辑规格)
+    isSpecLocked: PropTypes.bool.def(false)
+  },
+  data() {
+    return {
+      // 标签布局属性
+      labelCol: { span: 3 },
+      // 输入框布局属性
+      wrapperCol: { span: 21 },
+      // 商品多规格模型
+      MultiSpecModel: new MultiSpecModel(),
+      // MultiSpecModel: Object,
+      multiSpecData: {
+        // 规格列表
+        specList: [],
+        // SKU列表
+        skuList: []
+      }
+    }
+  },
+  watch: {
+    defaultSpecList(val) {
+      if (val.length && this.MultiSpecModel.isEmpty()) {
+        this.getData()
+      }
+    }
+  },
+  // 初始化数据
+  created() {
+    // 获取规格及SKU信息
+    this.getData()
+  },
+  methods: {
+
+    // 获取规格及SKU信息(展示)
+    getData() {
+      const { defaultSpecList, defaultSkuList } = this
+      this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList)
+    },
+
+    // 获取规格及SKU信息(表单提交)
+    getFromSpecData() {
+      return this.MultiSpecModel.getFromSpecData()
+    },
+
+    // 添加规格组
+    handleAddSpecGroup() {
+      if (this.checkSkuMaxNum()) {
+        this.MultiSpecModel.handleAddSpecGroup()
+      }
+    },
+
+    // 删除规格组
+    handleDeleteSpecGroup(groupIndex) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该规格组吗?',
+        content: '删除后不可恢复',
+        onOk() {
+          // 删除元素
+          app.MultiSpecModel.handleDeleteSpecGroup(groupIndex)
+          // 关闭对话框
+          modal.destroy()
+        }
+      })
+    },
+
+    // 新增规格值
+    handleAddSpecValue(groupIndex) {
+      if (this.checkSkuMaxNum()) {
+        this.MultiSpecModel.handleAddSpecValue(groupIndex)
+      }
+    },
+
+    // 删除规格值
+    handleDeleteSpecValue(groupIndex, valueIndex) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该规格值吗?',
+        content: '删除后不可恢复',
+        onOk() {
+          // 删除元素
+          app.MultiSpecModel.handleDeleteSpecValue(groupIndex, valueIndex)
+          // 关闭对话框
+          modal.destroy()
+        }
+      })
+    },
+
+    // 规格组输入框change事件
+    onChangeSpecGroupIpt() {
+      // 更新skuList
+      this.MultiSpecModel.onUpdate(true)
+    },
+
+    // 规格值输入框change事件
+    onChangeSpecValueIpt(event, itm) {
+      // 更新skuList
+      this.MultiSpecModel.onUpdate(true)
+    },
+
+    // 验证最大sku数量
+    checkSkuMaxNum() {
+      const skuList = this.multiSpecData.skuList
+      if (skuList.length >= 50) {
+        this.$message.error(`生成的sku列表数量不能大于50个，当前数量：${skuList.length}个`, 2.5)
+        return false
+      }
+      return true
+    },
+
+    // 批量设置sku事件
+    handleSkuBatch() {
+      this.MultiSpecModel.handleSkuBatch()
+    },
+
+    // 验证多规格表单
+    verifyForm() {
+      if (!this.MultiSpecModel.verifyForm()) {
+        this.$message.error(this.MultiSpecModel.getError(), 2)
+        return false
+      }
+      return true
+    }
+
+  }
+}
+
+</script>
+
+
+<style lang="less" scoped>
+.divider-title {
+  font-size: 18px;
+}
+
+.input-intro {
+  color: #8c8c8c;
+  font-size: 12px;
+}
+
+.el-divider {
+  margin: 50px 0;
+}
+
+.sepc-big-box {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.sepc-title-box {
+  width: 100%;
+  padding: 10px;
+  background-color: #f4f4f5;
+  display: flex;
+  justify-content: space-between;
+}
+
+.spec-value-box {
+  width: 100%;
+  padding: 20px 20px 20px 40px;
+  background-color: #fbfbfb;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.spec-value-input-big-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.spec-value-input-box {
+  width: 250px;
+  position: relative;
+  margin-right: 30px;
+  margin-bottom: 15px;
+}
+
+.spec-value-input-del {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  z-index: 99;
+  width: 18px;
+  height: 18px;
+  background-color: grey;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.spec-input {
+  width: 250px;
+  margin-right: 30px;
+}
+
+
+.mt-5 {
+  margin-top: 10px;
+}
+
+.el-input-number {
+  width: 140px;
+}
+</style>

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

@@ -0,0 +1,446 @@
+
+import _ from 'lodash'
+import { debounce, isEmpty } from '@/utils/util'
+
+// 默认的sku字段属性
+const defaultColumns = [
+  {
+    title: '预览图',
+    dataIndex: 'image',
+    width: 90,
+    scopedSlots: { customRender: 'image' }
+  },
+  {
+    title: '商品价格',
+    dataIndex: 'goods_price',
+    width: 120,
+    scopedSlots: { customRender: 'goods_price' }
+  },
+  {
+    title: '划线价格',
+    dataIndex: 'line_price',
+    width: 120,
+    scopedSlots: { customRender: 'line_price' }
+  },
+  {
+    title: '库存数量',
+    dataIndex: 'stock_num',
+    width: 120,
+    scopedSlots: { customRender: 'stock_num' }
+  },
+  {
+    title: '商品重量 (KG)',
+    dataIndex: 'goods_weight',
+    width: 120,
+    scopedSlots: { customRender: 'goods_weight' }
+  },
+  {
+    title: 'SKU编码',
+    dataIndex: 'goods_sku_no',
+    width: 140,
+    scopedSlots: { customRender: 'goods_sku_no' }
+  }
+]
+
+// 默认的sku记录值
+const defaultSkuItemData = {
+  image_id: 0,
+  image: {},
+  // imageList: [],
+  goods_price: '',
+  line_price: '',
+  stock_num: '',
+  goods_weight: '',
+  goods_sku_no: ''
+}
+
+// const demoSpecList = [
+//   {
+//     key: 0,
+//     spec_name: '颜色',
+//     valueList: [
+//       { key: 0, groupKey: 0, /* spec_value_id: 10001, */ spec_value: '红色' },
+//       { key: 1, groupKey: 0, spec_value: '白色' },
+//       { key: 2, groupKey: 0, spec_value: '蓝色' }
+//     ]
+//   },
+//   {
+//     key: 1,
+//     spec_name: '尺码',
+//     valueList: [
+//       { key: 0, groupKey: 1, spec_value: 'XXL' },
+//       { key: 1, groupKey: 1, spec_value: 'XL' }
+//     ]
+//   }
+// ]
+
+/**
+ * 商品 model类
+ * GoodsModel
+ */
+export default class MultiSpec {
+  // 商品多规格数据
+  multiSpecData = {}
+
+  // 错误信息
+  error = '';
+
+  /**
+   * 构造方法
+   * @param {array} specList 规格列表
+   * @param {array} skuList SKU列表
+   */
+  constructor () {
+    this.multiSpecData = {
+      // 规格列表
+      specList: [],
+      // SKU列表
+      skuList: [],
+      // SKU字段
+      skuColumns: _.cloneDeep(defaultColumns),
+      // 批量设置sku
+      skuBatchForm: _.cloneDeep(defaultSkuItemData)
+    }
+  }
+
+  // 生成并获取多规格数据
+  getData (specList = [], skuList = []) {
+    if (specList.length) {
+      this.multiSpecData.specList = _.cloneDeep(specList)
+      this.multiSpecData.skuList = _.cloneDeep(skuList)
+    }
+    // 整理所有的规格组
+    const specGroupArr = this.specGroupArr()
+    // sku记录的规格属性集(生成笛卡尔积)
+    const cartesianList = cartesianProductOf(specGroupArr)
+    // 合并单元格
+    const rowSpanArr = this.rowSpanArr(specGroupArr, cartesianList)
+    // 生成sku字段名
+    this.buildSkuColumns(rowSpanArr)
+    // 生成sku列表数据
+    this.buildSkuList(cartesianList)
+    // 返回多规格数据
+    return this.multiSpecData
+  }
+
+  // 数据是否为空
+  isEmpty () {
+    return this.multiSpecData.specList.length === 0
+  }
+
+  // 返回错误信息
+  getError () {
+    return this.error
+  }
+
+  // 整理所有的规格
+  specGroupArr () {
+    const specGroupArr = []
+    this.multiSpecData.specList.forEach(specGroup => {
+      const itemArr = []
+      specGroup.valueList.forEach(value => {
+        itemArr.push(value)
+      })
+      specGroupArr.push(itemArr)
+    })
+    return specGroupArr
+  }
+
+  // 合并单元格
+  rowSpanArr (specGroupArr, cartesianList) {
+    const rowSpanArr = []
+    var rowSpan = cartesianList.length
+    for (let i = 0; i < specGroupArr.length; i++) {
+      rowSpanArr[i] = parseInt(rowSpan / specGroupArr[i].length)
+      rowSpan = rowSpanArr[i]
+    }
+    return rowSpanArr
+  }
+
+  // 生成skuList
+  buildSkuList (cartesianList) {
+    // 生成新的skuList
+    const newSkuList = []
+    for (let i = 0; i < cartesianList.length; i++) {
+      const newSkuItem = {
+        ...defaultSkuItemData,
+        key: i,
+        // skuKey用于合并旧记录
+        skuKey: cartesianList[i].map(item => item.key).join('_'),
+        // skuKeys用于传参给后端
+        skuKeys: cartesianList[i].map(item => {
+          return {
+            groupKey: item.groupKey,
+            valueKey: item.key
+          }
+        })
+      }
+      cartesianList[i].forEach((val, idx) => {
+        newSkuItem[`spec_value_${idx}`] = val.spec_value
+      })
+      newSkuList.push(newSkuItem)
+    }
+    // 兼容旧的sku数据
+    this.multiSpecData.skuList = this.oldSkuList(newSkuList)
+  }
+
+  // 合并已存在的sku数据
+  oldSkuList (newSkuList) {
+    // const oldSkuList = _.cloneDeep(this.multiSpecData.skuList)
+    const oldSkuList = this.multiSpecData.skuList.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.skuKey === newSkuList[index].skuKey
+        })
+      }
+      // 写入新纪录
+      if (oldSkuItem) {
+        newSkuList[index] = {
+          ...newSkuList[index],
+          ..._.pick(oldSkuItem, Object.keys(defaultSkuItemData))
+        }
+        // console.log(newSkuList[index].image)
+      }
+    }
+    return newSkuList
+  }
+
+  // 生成sku表格字段名
+  buildSkuColumns (rowSpanArr) {
+    const specList = this.multiSpecData.specList
+    const newColumns = defaultColumns.concat()
+    // 渲染字段的rowSpan
+    const customRender = (specIndex, value, row, index) => {
+      const obj = {
+        children: value,
+        attrs: {}
+      }
+      const rowSpan = rowSpanArr[specIndex - 1]
+      if ((index % rowSpan) === 0) {
+        obj.attrs.rowSpan = rowSpan
+      } else {
+        obj.attrs.rowSpan = 0
+      }
+      return obj
+    }
+    // 遍历规格组整理字段
+    for (let specIndex = specList.length; specIndex > 0; specIndex--) {
+      const specGroupItem = specList[specIndex - 1]
+      newColumns.unshift({
+        title: specGroupItem.spec_name,
+        dataIndex: `spec_value_${specIndex - 1}`,
+        customRender: (value, row, index) => customRender(specIndex, value, row, index)
+      })
+    }
+    this.multiSpecData.skuColumns = newColumns
+  }
+
+  // 添加规格组
+  handleAddSpecGroup () {
+    const specList = this.multiSpecData.specList
+    specList.push({
+      key: specList.length || 0,
+      spec_name: '',
+      valueList: []
+    })
+    // 默认规格值
+    const groupIndex = specList.length - 1
+    this.handleAddSpecValue(groupIndex)
+  }
+
+  // 添加规格值
+  handleAddSpecValue (groupIndex) {
+    const specGroupItem = this.multiSpecData.specList[groupIndex]
+    const specValueList = specGroupItem.valueList
+    specValueList.push({
+      key: specValueList.length || 0,
+      groupKey: specGroupItem.key,
+      spec_value: ''
+    })
+    // 刷新规格值的key
+    this.onRefreshSpecValueKey(groupIndex)
+  }
+
+  // 删除规格组
+  handleDeleteSpecGroup (groupIndex) {
+    this.multiSpecData.specList.splice(groupIndex, 1)
+    this.onUpdate(false)
+  }
+
+  // 删除规格值
+  handleDeleteSpecValue (groupIndex, valueIndex) {
+    // 将规格值移出
+    this.multiSpecData.specList[groupIndex].valueList.splice(valueIndex, 1)
+    // 刷新规格值的key
+    this.onRefreshSpecValueKey(groupIndex)
+    this.onUpdate(false)
+  }
+
+  // 刷新规格值的key
+  onRefreshSpecValueKey (groupIndex) {
+    const specGroupItem = this.multiSpecData.specList[groupIndex]
+    const specValueList = specGroupItem.valueList
+    specValueList.forEach((item, index) => {
+      specValueList[index].key = index
+    })
+  }
+
+  // 批量设置sku事件
+  handleSkuBatch () {
+    const skuBatchForm = this.getFilterObject(this.multiSpecData.skuBatchForm)
+    const skuList = this.multiSpecData.skuList
+    // if (!skuBatchForm.image_id) {
+    //   delete skuBatchForm.image
+    // }
+    console.log('skuBatchForm', skuBatchForm)
+    for (const index in skuList) {
+      skuList[index] = { ...skuList[index], ...skuBatchForm }
+    }
+    this.onUpdate(false)
+  }
+
+  /**
+   * 过滤对象的空元素
+   * (仅支持一维对象)
+   * @param {object} object 源对象
+   * @returns {object}
+   */
+  getFilterObject (object) {
+    const newObj = {}
+    for (const key in object) {
+      const value = object[key]
+      // value === 0 可以不过滤image_id为0的情况
+      // if (!isEmpty(value) || value === 0) {
+      //   newObj[key] = value
+      // }
+      if (!isEmpty(value)) {
+        newObj[key] = value
+      }
+    }
+    return newObj
+  }
+
+  // 表单验证
+  verifyForm () {
+    // 验证规格
+    if (!this.verifySpec()) {
+      return false
+    }
+    // 验证sku
+    if (!this.verifySkuList()) {
+      return false
+    }
+    return true
+  }
+
+  // 验证sku
+  verifySkuList () {
+    const columns = [
+      { field: 'goods_price', name: '商品价格' },
+      { field: 'stock_num', name: '库存数量' },
+      { field: 'goods_weight', name: '商品重量' }
+    ]
+    const skuList = this.multiSpecData.skuList
+    for (const skuIndex in skuList) {
+      const skuItem = skuList[skuIndex]
+      for (const colIndex in columns) {
+        const value = skuItem[columns[colIndex].field]
+        if (value === '' || value === null) {
+          this.error = `${columns[colIndex].name}不能为空`
+          return false
+        }
+      }
+    }
+    return true
+  }
+
+  // 验证规格
+  verifySpec () {
+    const specList = this.multiSpecData.specList
+    if (!specList.length) {
+      this.error = '亲，还没有添加规格组~'
+      return false
+    }
+    for (const index in specList) {
+      // 验证规格组
+      const specGroup = specList[index]
+      if (isEmpty(specGroup.spec_name)) {
+        this.error = '规格组名称不能为空~'
+        return false
+      }
+      // 验证规格值
+      const valueList = specGroup.valueList
+      if (!valueList.length) {
+        this.error = '还没有添加规格值~'
+        return false
+      }
+      for (const i in valueList) {
+        if (isEmpty(valueList[i].spec_value)) {
+          this.error = '规格值不能为空~'
+          return false
+        }
+      }
+    }
+    return true
+  }
+
+  // 获取规格及SKU信息(表单提交)
+  getFromSpecData () {
+    const { multiSpecData: { specList, skuList } } = this
+    const specData = {
+      specList: _.cloneDeep(specList),
+      skuList: _.cloneDeep(skuList)
+    }
+    for (const skuIndex in specData.skuList) {
+      const skuItem = specData.skuList[skuIndex]
+      delete skuItem.image
+      // delete skuItem.imageList
+      delete skuItem.key
+    }
+    return specData
+  }
+
+  /**
+   * 使用防抖节流方式刷新sku列表
+   * @param {boolean} isDebounce 如果true则使用防抖函数
+   */
+  onUpdate (isDebounce = true) {
+    if (isDebounce) {
+      debounce(getDataForDebounce, 200)(this)
+    } else {
+      getDataForDebounce(this)
+    }
+  }
+}
+
+// onUpdate调用的逻辑方法
+const getDataForDebounce = MultiSpecModel => {
+  return MultiSpecModel.getData()
+}
+
+/**
+ * 生成笛卡尔积数据
+ * cartesianProductOf([arr1, arr2, arr3 ...])
+ */
+const cartesianProductOf = arrays => {
+  if (!arrays.length) {
+    return []
+  }
+  return Array.prototype.reduce.call(arrays, (arr1, arr2) => {
+    var ret = []
+    arr1.forEach(v1 => {
+      arr2.forEach(v2 => {
+        ret.push(v1.concat([v2]))
+      })
+    })
+    return ret
+  }, [[]])
+}

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

@@ -0,0 +1,407 @@
+<template>
+  <div>
+    <a-form-item label="商品规格" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <div v-if="true" class="form-item-help" style="line-height: 36px">
+        <small>最多添加3个商品规格组，生成的SKU数量不能超出50个</small>
+      </div>
+      <!-- 规格组 -->
+      <div class="spec-group" v-for="(item, index) in multiSpecData.specList" :key="index">
+        <div class="spec-group-item clearfix">
+          <a-input
+            class="group-item-input"
+            v-model="item.spec_name"
+            :readOnly="isSpecLocked"
+            placeholder="请输入规格名称"
+            @change="onChangeSpecGroupIpt"
+          />
+          <a
+            v-if="!isSpecLocked"
+            class="group-item-delete"
+            href="javascript:;"
+            @click="handleDeleteSpecGroup(index)"
+          >删除规格组</a>
+        </div>
+        <div class="spec-value clearfix">
+          <div class="spec-value-item" v-for="(itm, idx) in item.valueList" :key="idx">
+            <a-input
+              class="value-item-input"
+              v-model="itm.spec_value"
+              :readOnly="isSpecLocked"
+              placeholder="请输入规格值"
+              @change="onChangeSpecValueIpt"
+            />
+            <a-icon
+              v-if="!isSpecLocked"
+              class="icon-close"
+              theme="filled"
+              type="close-circle"
+              @click="handleDeleteSpecValue(index, idx)"
+            />
+          </div>
+          <div v-if="!isSpecLocked" class="spec-value-add">
+            <a
+              class="group-item-delete"
+              href="javascript:;"
+              @click="handleAddSpecValue(index)"
+            >新增规格值</a>
+          </div>
+        </div>
+      </div>
+      <!-- 添加规格按钮 -->
+      <a-button
+        v-if="!isSpecLocked && multiSpecData.specList.length < 3"
+        class="spec-group-add-btn"
+        icon="plus"
+        @click="handleAddSpecGroup"
+      >添加规格组</a-button>
+    </a-form-item>
+    <a-form-item
+      v-show="multiSpecData.skuList.length"
+      label="SKU列表"
+      :labelCol="labelCol"
+      :wrapperCol="wrapperCol"
+    >
+      <!-- 批量设置 -->
+      <div v-if="multiSpecData.skuList.length > 1" class="sku-batch">
+        <span class="title">批量设置:</span>
+        <a-input-number
+          v-model="multiSpecData.skuBatchForm.goods_price"
+          placeholder="商品价格"
+          :min="0.01"
+          :precision="2"
+        />
+        <a-input-number
+          v-model="multiSpecData.skuBatchForm.line_price"
+          placeholder="划线价格"
+          :min="0"
+          :precision="2"
+        />
+        <a-input-number
+          v-model="multiSpecData.skuBatchForm.stock_num"
+          placeholder="库存数量"
+          :min="0"
+          :precision="0"
+        />
+        <a-input-number
+          v-model="multiSpecData.skuBatchForm.goods_weight"
+          placeholder="商品重量"
+          :min="0"
+          :precision="2"
+        />
+        <a-input v-model="multiSpecData.skuBatchForm.goods_sku_no" placeholder="sku编码" />
+        <a-button @click="handleSkuBatch">立即设置</a-button>
+      </div>
+      <!-- sku列表table -->
+      <a-table
+        class="sku-list"
+        :columns="multiSpecData.skuColumns"
+        :dataSource="multiSpecData.skuList"
+        :scroll="{ x: true }"
+        :pagination="false"
+        bordered
+      >
+        <!-- 预览图 -->
+        <template slot="image" slot-scope="text, item">
+          <SelectImage
+            v-model="item.image_id"
+            :defaultList="(item.image_id > 0 && item.image) ? [item.image] : []"
+            :width="50"
+          />
+        </template>
+        <!-- 商品价格 -->
+        <template slot="goods_price" slot-scope="text, item">
+          <a-input-number v-model="item.goods_price" size="small" :min="0.01" :precision="2" />
+        </template>
+        <!-- 划线价格 -->
+        <template slot="line_price" slot-scope="text, item">
+          <a-input-number v-model="item.line_price" size="small" :min="0" :precision="2" />
+        </template>
+        <!-- 库存数量 -->
+        <template slot="stock_num" slot-scope="text, item">
+          <a-input-number v-model="item.stock_num" size="small" :min="0" :precision="0" />
+        </template>
+        <!-- 商品重量 -->
+        <template slot="goods_weight" slot-scope="text, item">
+          <a-input-number v-model="item.goods_weight" size="small" :min="0" :precision="2" />
+        </template>
+        <!-- sku编码 -->
+        <template slot="goods_sku_no" slot-scope="text, item">
+          <a-input v-model="item.goods_sku_no" size="small" />
+        </template>
+      </a-table>
+    </a-form-item>
+  </div>
+</template>
+
+<script>
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import MultiSpecModel from '@/common/model/goods/MultiSpec'
+import { SelectImage } from '@/components'
+
+export default {
+  components: {
+    SelectImage
+  },
+  props: {
+    // 默认的规格列表
+    defaultSpecList: PropTypes.array.def([]),
+    // 默认的SKU列表
+    defaultSkuList: PropTypes.array.def([]),
+    // 商品规格是否锁定(锁定状态下不允许编辑规格)
+    isSpecLocked: PropTypes.bool.def(false)
+  },
+  data () {
+    return {
+      // 标签布局属性
+      labelCol: { span: 3 },
+      // 输入框布局属性
+      wrapperCol: { span: 21 },
+      // 商品多规格模型
+      MultiSpecModel: new MultiSpecModel(),
+      // MultiSpecModel: Object,
+      multiSpecData: {
+        // 规格列表
+        specList: [],
+        // SKU列表
+        skuList: []
+      }
+    }
+  },
+  watch: {
+    defaultSpecList (val) {
+      if (val.length && this.MultiSpecModel.isEmpty()) {
+        this.getData()
+      }
+    }
+  },
+  // 初始化数据
+  created () {
+    // 获取规格及SKU信息
+    this.getData()
+  },
+  methods: {
+
+    // 获取规格及SKU信息(展示)
+    getData () {
+      const { defaultSpecList, defaultSkuList } = this
+      this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList)
+    },
+
+    // 获取规格及SKU信息(表单提交)
+    getFromSpecData () {
+      return this.MultiSpecModel.getFromSpecData()
+    },
+
+    // 添加规格组
+    handleAddSpecGroup () {
+      if (this.checkSkuMaxNum()) {
+        this.MultiSpecModel.handleAddSpecGroup()
+      }
+    },
+
+    // 删除规格组
+    handleDeleteSpecGroup (groupIndex) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该规格组吗?',
+        content: '删除后不可恢复',
+        onOk () {
+          // 删除元素
+          app.MultiSpecModel.handleDeleteSpecGroup(groupIndex)
+          // 关闭对话框
+          modal.destroy()
+        }
+      })
+    },
+
+    // 新增规格值
+    handleAddSpecValue (groupIndex) {
+      if (this.checkSkuMaxNum()) {
+        this.MultiSpecModel.handleAddSpecValue(groupIndex)
+      }
+    },
+
+    // 删除规格值
+    handleDeleteSpecValue (groupIndex, valueIndex) {
+      const app = this
+      const modal = this.$confirm({
+        title: '您确定要删除该规格值吗?',
+        content: '删除后不可恢复',
+        onOk () {
+          // 删除元素
+          app.MultiSpecModel.handleDeleteSpecValue(groupIndex, valueIndex)
+          // 关闭对话框
+          modal.destroy()
+        }
+      })
+    },
+
+    // 规格组输入框change事件
+    onChangeSpecGroupIpt () {
+      // 更新skuList
+      this.MultiSpecModel.onUpdate(true)
+    },
+
+    // 规格值输入框change事件
+    onChangeSpecValueIpt (event, itm) {
+      // 更新skuList
+      this.MultiSpecModel.onUpdate(true)
+    },
+
+    // 验证最大sku数量
+    checkSkuMaxNum () {
+      const skuList = this.multiSpecData.skuList
+      if (skuList.length >= 50) {
+        this.$message.error(`生成的sku列表数量不能大于50个，当前数量：${skuList.length}个`, 2.5)
+        return false
+      }
+      return true
+    },
+
+    // 批量设置sku事件
+    handleSkuBatch () {
+      this.MultiSpecModel.handleSkuBatch()
+    },
+
+    // 验证多规格表单
+    verifyForm () {
+      if (!this.MultiSpecModel.verifyForm()) {
+        this.$message.error(this.MultiSpecModel.getError(), 2)
+        return false
+      }
+      return true
+    }
+
+  }
+}
+
+</script>
+<style lang="less" scoped>
+// 商品多规格
+.spec-group {
+  width: 895px;
+  margin-bottom: 15px;
+  line-height: normal;
+
+  .ant-input {
+    height: 28px;
+    padding: 4px 11px;
+    font-size: @font-size-base;
+    line-height: 1.5;
+
+    &::placeholder {
+      font-size: @font-size-base;
+    }
+  }
+
+  .form-item-help {
+    line-height: 36px;
+  }
+
+  .spec-group-item {
+    background: #f4f5f9;
+    padding: 7px 12px;
+    line-height: 28px;
+
+    .group-item-input {
+      float: left;
+      width: 180px;
+    }
+
+    .group-item-delete {
+      font-size: 12px;
+      float: right;
+    }
+  }
+
+  .spec-value {
+    background: #fbfbfb;
+    padding: 8px 35px;
+
+    .spec-value-add,
+    .spec-value-item {
+      float: left;
+      margin-bottom: 6px;
+      margin-top: 6px;
+    }
+
+    .spec-value-add {
+      height: 28px;
+      line-height: 28px;
+
+      a {
+        font-size: 12px;
+      }
+    }
+
+    .spec-value-item {
+      position: relative;
+      margin-right: 20px;
+
+      .value-item-input {
+        width: 186px;
+      }
+
+      &:hover {
+        .icon-close {
+          display: block;
+        }
+      }
+
+      .icon-close {
+        display: none;
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        cursor: pointer;
+        font-size: 16px;
+        color: #7d7d7d;
+      }
+    }
+  }
+}
+
+// 添加规格按钮
+.spec-group-add-btn {
+  font-size: @font-size-base;
+}
+
+// 批量设置sku
+.sku-batch {
+  line-height: 40px;
+  margin-bottom: 12px;
+  .title {
+    line-height: 28px;
+    margin-right: 15px;
+    font-size: @font-size-base;
+  }
+  /deep/.ant-input,
+  /deep/.ant-input-number {
+    width: 120px;
+    margin-right: 15px;
+  }
+  /deep/.ant-input {
+    width: 140px;
+  }
+}
+
+// sku列表
+.sku-list {
+  width: 895px;
+  /deep/.ant-table-thead > tr > th,
+  /deep/.ant-table-tbody > tr > td {
+    white-space: nowrap;
+  }
+  /deep/.ant-table-tbody > tr > td {
+    padding: 12px 18px;
+  }
+
+  /deep/.ant-input-sm,
+  /deep/.ant-input-number-sm {
+    height: 28px;
+  }
+  /deep/.ant-input-number-sm input {
+    height: 26px;
+  }
+}
+</style>