feat: 完善商品管理

.env.development

@@ -7,5 +7,7 @@ ENV = 'development'
 # 云管铺/开发环境
 VUE_APP_BASE_API = '/dev-api'
 
+VUE_APP_IMG_URL = 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/'
+
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -6,3 +6,5 @@ ENV = 'production'
 
 # 云管铺/生产环境
 VUE_APP_BASE_API = '/prod-api'
+
+VUE_APP_IMG_URL = 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/'

src/views/business/goods/add.vue

@@ -52,49 +52,58 @@
       <el-row v-if="!multipleSpec" :gutter="40">
         <el-col :span="11">
           <el-form-item label="价格:" prop="value">
-            <el-input v-model="addData.value" placeholder="请输入商品价格">
+            <el-input v-model="addData.value" type="number" placeholder="请输入商品价格">
               <template slot="append">元</template>
             </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="兑换价格:" prop="exchangePrice">
-            <el-input v-model="addData.exchangePrice" placeholder="请输入兑换价格" />
+          <el-form-item label="成本:" prop="cost">
+            <el-input v-model.number="addData.cost" type="number" placeholder="请输入商品成本">
+              <template slot="append">元</template>
+            </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="11">
-          <el-form-item label="成本:" prop="cost">
-            <el-input v-model="addData.cost" placeholder="请输入商品成本">
+          <el-form-item label="原兑换价格:" prop="originPrice">
+            <el-input v-model="addData.originPrice" type="number" placeholder="请输入原兑换价格">
               <template slot="append">元</template>
             </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
+          <el-form-item label="现兑换价格:" prop="exchangePrice">
+            <el-input v-model="addData.exchangePrice" type="number" placeholder="请输入现兑换价格">
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="11">
           <el-form-item label="库存:" prop="quantity">
-            <el-input v-model="addData.quantity" placeholder="请输入商品库存" />
+            <el-input-number v-model="addData.quantity" placeholder="请输入商品库存" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
-    <div class="list-group" v-if="multipleSpec">
+    <div v-if="multipleSpec">
       <div style="margin-bottom: 16px">
         <el-button :plain="true" type="primary" size="small" @click="handleSpecificationShow">添加规格</el-button>
       </div>
-      <div class="list-group-header">
-        <div class="f2">规格名</div>
-        <div class="f2">规格值</div>
-        <div class="f1 tr">操作</div>
-      </div>
-      <Draggable v-if="products.length > 0" v-model="specifications" :options="dragOptions">
-        <transition-group type="transition" :name="'flip-list'">
-          <div class="list-group-item" v-for="item in specifications" :key="item.specification + item.value">
-            <div class="f2">{{item.specification}}</div>
-            <div class="f2">{{item.value}}</div>
-            <div class="f1 tr"><el-button type="danger" size="mini" @click="handleSpecificationDelete(item)">删除</el-button></div>
-          </div>
-        </transition-group>
-      </Draggable>
-      <div v-else class="list-empty">无内容</div>
+      <el-table :data="specifications">
+        <el-table-column property="specification" label="规格名"/>
+        <el-table-column property="value" label="规格值">
+          <template slot-scope="scope">
+            <el-tag type="primary">
+              {{ scope.row.value }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button type="danger" size="small" @click="handleSpecificationDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
     <el-dialog :visible.sync="specVisiable" title="设置规格" :close-on-click-modal="false" width="400px">
       <el-form ref="specForm" :model="specForm" label-width="80px">
@@ -112,48 +121,47 @@
       </div>
     </el-dialog>
     <br>
-    <div class="list-group" v-if="multipleSpec">
-      <div class="list-group-header">
-        <div class="f2">商品规格</div>
-        <div class="f1">商品售价</div>
-        <div class="f1">折扣价格</div>
-        <div class="f1">商品数量</div>
-        <div class="f2">商品图片</div>
-        <div class="f1 tr">操作</div>
-      </div>
-      <Draggable v-if="products.length > 0" v-model="products" :options="dragOptions">
-        <transition-group type="transition" :name="'flip-list'">
-          <div class="list-group-item" v-for="item in products" :key="item.specificationList.toString()">
-            <div class="f2">{{item.specificationList.toString()}}</div>
-            <div class="f1">{{item.price}}</div>
-            <div class="f1">{{item.discountPrice}}</div>
-            <div class="f1">{{item.number}}</div>
-            <div class="f2"><img v-if="item.imgUrl" :src="IMG_URL+item.imgUrl" width="40"></div>
-            <div class="f1 tr"><el-button type="primary" size="mini" @click="handleProductShow(item)">设置</el-button></div>
-          </div>
-        </transition-group>
-      </Draggable>
-      <div v-else class="list-empty">无内容</div>
-    </div>
+    <el-table v-if="multipleSpec" :data="products">
+      <el-table-column property="name" label="sku名称" />
+      <el-table-column property="picUrl" width="100" label="商品图片">
+        <template slot-scope="scope">
+          <img v-if="scope.row.picUrl" :src="IMG_URL+scope.row.picUrl" width="40">
+        </template>
+      </el-table-column>
+      <el-table-column property="value" label="价格"/>
+      <el-table-column property="originPrice" label="原兑换价格"/>
+      <el-table-column property="exchangePrice" label="现兑换价格"/>
+      <el-table-column property="cost" label="成本"/>
+      <el-table-column property="quantity" label="库存数量"/>
+      <el-table-column align="center" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
     <el-dialog :visible.sync="productVisiable" title="设置商品" :close-on-click-modal="false" width="400px">
       <el-form ref="productForm" :model="productForm" label-width="100px">
-        <el-form-item label="商品规格:" prop="specificationList">
-          <el-tag v-for="tag in productForm.specificationList" :key="tag">
-            {{ tag }}
-          </el-tag>
+        <el-form-item label="sku名称:" prop="name">
+          <el-input v-model="productForm.name" />
+        </el-form-item>
+        <el-form-item label="价格:" prop="value">
+          <el-input-number v-model="productForm.value" />
+        </el-form-item>
+        <el-form-item label="原兑换价格:" prop="originPrice">
+          <el-input-number v-model="productForm.originPrice"/>
         </el-form-item>
-        <el-form-item label="商品原价:" prop="price">
-          <el-input-number v-model="productForm.price"/>
+        <el-form-item label="现兑换价格:" prop="exchangePrice">
+          <el-input-number v-model="productForm.exchangePrice"/>
         </el-form-item>
-        <el-form-item label="折扣价:" prop="discountPrice">
-          <el-input-number v-model="productForm.discountPrice"/>
+        <el-form-item label="成本:" prop="cost">
+          <el-input-number v-model="productForm.cost"/>
         </el-form-item>
-        <el-form-item label="商品数量:" prop="number">
-          <el-input-number v-model="productForm.number"/>
+        <el-form-item label="库存数量:" prop="quantity">
+          <el-input-number v-model="productForm.quantity"/>
         </el-form-item>
-        <el-form-item label="商品图片:" prop="imgUrl">
-          <Upload v-model="productForm.imgUrl" :limit="1" :type="4" />
+        <el-form-item label="商品图片:" prop="picUrl">
+          <Upload v-model="productForm.picUrl" :limit="1" :type="4" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -180,6 +188,7 @@ export default {
   },
   data() {
     return {
+      IMG_URL: process.env.VUE_APP_IMG_URL,
       id: this.$route.query.id,
       addData: {
         multiSku: 0
@@ -187,20 +196,15 @@ export default {
       rules: {
         title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
       },
-
-
       dragOptions: {
         animation: 100,
       },
       specifications: [],
       products: [],
-      
-      IMG_URL: process.env.IMG_URL,
-      
       specVisiable: false, // 规格弹窗
-      specForm: { specification: '', value: '', imgUrl: '' }, // 规格暂存
+      specForm: {}, // 规格暂存
       productVisiable: false,
-      productForm: { id: 0, specificationList: [], price: 0.00, discountPrice: 0.00, number: 0, imgUrl: '' },
+      productForm: {},
     }
   },
   computed: {
@@ -226,7 +230,7 @@ export default {
       }
     },
     handleSpecificationShow() {
-      this.specForm = { specification: '', value: '', imgUrl: '' }
+      this.specForm = {}
       this.specVisiable = true
     },
     handleSpecificationDelete(row) {
@@ -271,17 +275,22 @@ export default {
       var isContinue = false
       do {
         var specifications = []
+        var properties = ''
         for (var x = 0; x < n; x++) {
           var z = specValues[x][combination[x]]
           specifications.push(this.specifications[z].value)
+          properties = `${properties ? (properties + ';') : ''}${this.specifications[z].specification}:${this.specifications[z].value}`
         }
         products[productsIndex] = {
-          id: productsIndex,
-          specificationList: specifications,
-          price: 0.00,
-          discountPrice: 0.00,
-          number: 0,
-          imgUrl: ''
+          idx: productsIndex,
+          name: specifications.toString(),
+          picUrl: '',
+          originPrice: 0.00,
+          exchangePrice: 0.00,
+          value: 0.00,
+          cost: 0.00,
+          quantity: 0,
+          properties
         }
         productsIndex++
 
@@ -320,8 +329,7 @@ export default {
         }
         this.specifications.splice(index + 1, 0, {
           specification: this.specForm.specification,
-          value: element,
-          imgUrl: ''
+          value: element
         })
         
       });
@@ -333,42 +341,26 @@ export default {
       this.productVisiable = true
     },
     handleProductEdit() {
-      if (this.multipleSpec) {
-        for (var i = 0; i < this.products.length; i++) {
-          const v = this.products[i]
-          if (v.id === this.productForm.id) {
-            this.products.splice(i, 1, this.productForm)
-            break
-          }
-        }
-      } else {
-        for (var i = 0; i < this.productSingle.length; i++) {
-          const v = this.productSingle[i]
-          if (v.id === this.productForm.id) {
-            this.productSingle.splice(i, 1, this.productForm)
-            break
-          }
+      for (var i = 0; i < this.products.length; i++) {
+        const v = this.products[i]
+        if (v.idx === this.productForm.idx) {
+          this.products.splice(i, 1, this.productForm)
+          break
         }
       }
-      
       this.productVisiable = false
     },
-
-
     updateItem() {
       this.$refs.addItem.validate((valid, items) => {
         if (valid) {
-          const action = this.addData.id ? editGoods : publishProduct
-          action({
-            product: this.addData,
-            appProductCommodities: this.multipleSpec? this.products:this.productSingle
-          }).then(res => {
+          this.addData.skuList = this.products
+          addGoods(this.addData).then(res => {
             if (res.code === 0) {
               this.$message({
-                message: this.addData.id ? '修改成功!' : '添加成功!',
+                message: this.addData.goodsId ? '修改成功!' : '添加成功!',
                 type: 'success'
               })
-              this.$router.replace('/goods/list')
+              this.$router.go(-1)
             }
           })
         } else {

src/views/business/goods/index.vue

@@ -41,7 +41,7 @@
       <el-table-column label="商品ID" prop="goodsId" width="60" />
       <el-table-column label="商品图片" prop="picUrl" align="center" width="80">
         <template slot-scope="{row}">
-          <a target="_black" v-if="row.picUrl" :href="`https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/${row.picUrl}`"><img :src="`https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/${row.picUrl}`" style="max-height: 37px;max-width: 54px"></a>
+          <a target="_black" v-if="row.picUrl && row.picUrl.split(',').length > 0" :href="`${IMG_URL + row.picUrl}`"><img :src="`${IMG_URL + row.picUrl.split(',')[0]}`" style="max-height: 37px;max-width: 54px"></a>
           <span v-else>-</span>
         </template>
       </el-table-column>
@@ -76,6 +76,7 @@ export default {
   name: 'GoodsList',
   data() {
     return {
+      IMG_URL: process.env.VUE_APP_IMG_URL,
       loading: false,
       showSearch: true,
       queryParams: {},