商品

src/views/dataCenter/goods/Create.vue

@@ -161,7 +161,7 @@
                 @change="onForceUpdate()"
               >
                 <a-radio :value="10">单规格</a-radio>
-                <a-radio :value="20">多规格</a-radio>
+                <a-radio :value="20" :disabled="true">多规格</a-radio>
               </a-radio-group>
             </a-form-item>
             <!-- 多规格的表单内容 -->

src/views/dataCenter/goods/Update.vue

@@ -176,6 +176,7 @@
                 :isSpecLocked="formData.goods.isSpecLocked"
                 :defaultSpecList="formData.goods.specList"
                 :defaultSkuList="formData.goods.skuList"
+                :checkList="checkList"
               />
             </div>
             <!-- 单规格的表单内容 -->
@@ -475,7 +476,6 @@ import { SelectImage, SelectVideo, Ueditor, InputNumberGroup } from '@/component
 import GoodsModel from '@/common/model/goods/Index'
 import { GoodsType, MultiSpec } from './modules'
 import { isEmptyObject } from '@/utils/util'
-
 export default {
   components: {
     GoodsType,
@@ -501,12 +501,14 @@ export default {
       // 商品ID
       goodsId: null,
       // 表单数据
-      formData: GoodsModel.formData
+      formData: GoodsModel.formData,
+      checkList:[]
     }
   },
   created () {
     // 初始化数据
     this.initData()
+    this.getDataList()
   },
   beforeDestroy () {
     // 销毁商品详情
@@ -574,11 +576,17 @@ export default {
         this.isLoading = false
       })
     },
-
+    // 获取商品列表
+    getDataList () {
+      return GoodsApi.list().then(result => {
+        this.checkList=result.data.list.data
+      })
+    },
     // 确认按钮
     handleSubmit (e) {
       e.preventDefault()
       // 表单验证
+      console.log(this.form)
       const { form: { validateFields } } = this
       validateFields((errors, values) => {
         // 定位到错误的tab选项卡

src/views/dataCenter/goods/modules/MultiSpec.vue

@@ -14,12 +14,9 @@
             placeholder="请输入规格名称"
             @change="onChangeSpecGroupIpt"
           />
-          <a
-            v-if="!isSpecLocked"
-            class="group-item-delete"
-            href="javascript:;"
-            @click="handleDeleteSpecGroup(index)"
-          >删除规格组</a>
+          <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">
@@ -39,11 +36,7 @@
             />
           </div>
           <div v-if="!isSpecLocked" class="spec-value-add">
-            <a
-              class="group-item-delete"
-              href="javascript:;"
-              @click="handleAddSpecValue(index)"
-            >新增规格值</a>
+            <a class="group-item-delete" href="javascript:;" @click="handleAddSpecValue(index)">新增规格值</a>
           </div>
         </div>
       </div>
@@ -53,14 +46,10 @@
         class="spec-group-add-btn"
         icon="plus"
         @click="handleAddSpecGroup"
-      >添加规格组</a-button>
+        >添加规格组</a-button
+      >
     </a-form-item>
-    <a-form-item
-      v-show="multiSpecData.skuList.length"
-      label="SKU列表"
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-    >
+    <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>
@@ -76,12 +65,7 @@
           :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.stock_num" placeholder="库存数量" :min="0" :precision="0" />
         <a-input-number
           v-model="multiSpecData.skuBatchForm.goods_weight"
           placeholder="商品重量"
@@ -91,6 +75,18 @@
         <a-input v-model="multiSpecData.skuBatchForm.goods_sku_no" placeholder="sku编码" />
         <a-button @click="handleSkuBatch">立即设置</a-button>
       </div>
+      <div style="margin-bottom: 15px;">
+        <span class="title">选择商品Id:</span>
+        <a-select style="width: 400px;margin-left: 5px;"
+          v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]"
+        >
+          <a-select-option :value="0">选择商品Id</a-select-option>
+          <a-select-option v-for="(item, index) in checkList" :key="index" :value="item.goods_id"
+            >{{ item.goods_id }}---{{ item.goods_name }}</a-select-option
+          >
+        </a-select>
+      </div>
+
       <!-- sku列表table -->
       <a-table
         class="sku-list"
@@ -104,7 +100,7 @@
         <template slot="image" slot-scope="text, item">
           <SelectImage
             v-model="item.image_id"
-            :defaultList="(item.image_id > 0 && item.image) ? [item.image] : []"
+            :defaultList="item.image_id > 0 && item.image ? [item.image] : []"
             :width="50"
           />
         </template>
@@ -140,7 +136,7 @@ import { SelectImage } from '@/components'
 
 export default {
   components: {
-    SelectImage
+    SelectImage,
   },
   props: {
     // 默认的规格列表
@@ -148,9 +144,10 @@ export default {
     // 默认的SKU列表
     defaultSkuList: PropTypes.array.def([]),
     // 商品规格是否锁定(锁定状态下不允许编辑规格)
-    isSpecLocked: PropTypes.bool.def(false)
+    isSpecLocked: PropTypes.bool.def(false),
+    checkList: PropTypes.array.def([]),
   },
-  data () {
+  data() {
     return {
       // 标签布局属性
       labelCol: { span: 3 },
@@ -163,93 +160,92 @@ export default {
         // 规格列表
         specList: [],
         // SKU列表
-        skuList: []
-      }
+        skuList: [],
+      },
     }
   },
   watch: {
-    defaultSpecList (val) {
+    defaultSpecList(val) {
       if (val.length && this.MultiSpecModel.isEmpty()) {
         this.getData()
       }
-    }
+    },
   },
   // 初始化数据
-  created () {
+  created() {
     // 获取规格及SKU信息
     this.getData()
   },
   methods: {
-
     // 获取规格及SKU信息(展示)
-    getData () {
+    getData() {
       const { defaultSpecList, defaultSkuList } = this
       this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList)
     },
 
     // 获取规格及SKU信息(表单提交)
-    getFromSpecData () {
+    getFromSpecData() {
       return this.MultiSpecModel.getFromSpecData()
     },
 
     // 添加规格组
-    handleAddSpecGroup () {
+    handleAddSpecGroup() {
       if (this.checkSkuMaxNum()) {
         this.MultiSpecModel.handleAddSpecGroup()
       }
     },
 
     // 删除规格组
-    handleDeleteSpecGroup (groupIndex) {
+    handleDeleteSpecGroup(groupIndex) {
       const app = this
       const modal = this.$confirm({
         title: '您确定要删除该规格组吗?',
         content: '删除后不可恢复',
-        onOk () {
+        onOk() {
           // 删除元素
           app.MultiSpecModel.handleDeleteSpecGroup(groupIndex)
           // 关闭对话框
           modal.destroy()
-        }
+        },
       })
     },
 
     // 新增规格值
-    handleAddSpecValue (groupIndex) {
+    handleAddSpecValue(groupIndex) {
       if (this.checkSkuMaxNum()) {
         this.MultiSpecModel.handleAddSpecValue(groupIndex)
       }
     },
 
     // 删除规格值
-    handleDeleteSpecValue (groupIndex, valueIndex) {
+    handleDeleteSpecValue(groupIndex, valueIndex) {
       const app = this
       const modal = this.$confirm({
         title: '您确定要删除该规格值吗?',
         content: '删除后不可恢复',
-        onOk () {
+        onOk() {
           // 删除元素
           app.MultiSpecModel.handleDeleteSpecValue(groupIndex, valueIndex)
           // 关闭对话框
           modal.destroy()
-        }
+        },
       })
     },
 
     // 规格组输入框change事件
-    onChangeSpecGroupIpt () {
+    onChangeSpecGroupIpt() {
       // 更新skuList
       this.MultiSpecModel.onUpdate(true)
     },
 
     // 规格值输入框change事件
-    onChangeSpecValueIpt (event, itm) {
+    onChangeSpecValueIpt(event, itm) {
       // 更新skuList
       this.MultiSpecModel.onUpdate(true)
     },
 
     // 验证最大sku数量
-    checkSkuMaxNum () {
+    checkSkuMaxNum() {
       const skuList = this.multiSpecData.skuList
       if (skuList.length >= 50) {
         this.$message.error(`生成的sku列表数量不能大于50个，当前数量：${skuList.length}个`, 2.5)
@@ -259,22 +255,21 @@ export default {
     },
 
     // 批量设置sku事件
-    handleSkuBatch () {
+    handleSkuBatch() {
       this.MultiSpecModel.handleSkuBatch()
     },
 
     // 验证多规格表单
-    verifyForm () {
+    verifyForm() {
       if (!this.MultiSpecModel.verifyForm()) {
         this.$message.error(this.MultiSpecModel.getError(), 2)
         return false
       }
       return true
-    }
-
-  }
+    },
+    handleGoodsId() {},
+  },
 }
-
 </script>
 <style lang="less" scoped>
 // 商品多规格