From e2158940640866499d959cdc73cc08292e431cf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Wed, 12 Jan 2022 00:23:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(GoodsStock.vue):=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E4=B8=8A=E6=9E=B6=E5=BA=93=E5=AD=98=E9=A1=B5=E9=9D=A2=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pms/goods/components/GoodsStock.vue | 45 ++++++++++++-------
 src/views/pms/goods/detail.vue                | 20 +++++----
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/views/pms/goods/components/GoodsStock.vue b/src/views/pms/goods/components/GoodsStock.vue
index bae01e0a..198efc3d 100644
--- a/src/views/pms/goods/components/GoodsStock.vue
+++ b/src/views/pms/goods/components/GoodsStock.vue
@@ -4,7 +4,13 @@
       <el-card class="box-card">
         <template #header>
           <span>商品规格</span>
-          <el-button style="float: right;" type="primary" size="mini" @click="handleSpecAdd">
+          <el-button
+              :icon="Plus"
+              type="success"
+              @click="handleSpecAdd"
+              size="mini"
+              style="float: right;"
+          >
             添加规格项
           </el-button>
         </template>
@@ -48,26 +54,35 @@
               </template>
 
               <template #default="scope">
-                <div style="margin-right:15px;display: inline-block" v-for="item in scope.row.values">
+                <div v-for="item in scope.row.values"
+                     style="margin-right:15px;display: inline-block"
+                >
                   <el-tag
+                      size="small"
                       closable
-                      :type="colors[scope.row.index%colors.length]"
-                      @close="handleSpecValueRemove(scope.row.index,item.id)">
+                      :type="colors[scope.$index%colors.length]"
+                      @close="handleSpecValueRemove(scope.$index,item.id)"
+                  >
                     {{ item.value }}
                   </el-tag>
-                  <mini-card-upload v-if="scope.row.index==0" style="margin-top: 5px" v-model="item.picUrl"/>
+                  <single-upload
+                      v-model="item.picUrl"
+                      v-if="scope.$index==0"
+                      style="margin-top: 5px"
+                  />
                 </div>
+
                 <el-input
-                    v-if="tagInputs[scope.row.index].visible"
-                    v-model="tagInputs[scope.row.index].value"
-                    @keyup.enter.native="handleSpecValueInput(scope.row.index)"
-                    @blur="handleSpecValueInput(scope.row.index)"
+                    v-if="tagInputs[scope.$index].visible"
+                    v-model="tagInputs[scope.$index].value"
+                    @keyup.enter.native="handleSpecValueInput(scope.$index)"
+                    @blur="handleSpecValueInput(scope.$index)"
                     style="width: 80px;vertical-align: top"
                     size="mini"
                 />
                 <el-button
                     v-else
-                    @click="handleSpecValueAdd(scope.row.index)"
+                    @click="handleSpecValueAdd(scope.$index)"
                     :icon="Plus"
                     style="vertical-align: top"
                     size="mini"
@@ -81,7 +96,7 @@
               <template #default="scope">
                 <el-button
                     type="danger"
-                    icon="el-icon-delete"
+                    :icon="Minus"
                     size="mini"
                     circle
                     plain
@@ -158,12 +173,12 @@
 
 <script setup lang="ts">
 import {listAttributes} from "@/api/pms/attribute";
-import MiniCardUpload from '@/components/Upload/MiniCardUpload.vue'
+import SingleUpload from '@/components/Upload/SingleUpload.vue'
 import Sortable from 'sortablejs'
 import {addGoods, updateGoods} from "@/api/pms/goods";
 import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, unref, watch} from "vue";
 import {ElMessage, ElTable, ElForm} from "element-plus"
-import {Plus} from '@element-plus/icons'
+import {Plus, Minus} from '@element-plus/icons'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import {useRouter} from "vue-router";
 
@@ -187,7 +202,7 @@ const categoryId = computed(() => props.modelValue.categoryId);
 
 const state = reactive({
   specForm: {
-    specList: [] as Array<any>,
+    specList: [{}] as Array<any>,
   },
   skuForm: {
     skuList: []
@@ -274,7 +289,6 @@ function loadData() {
     nextTick(() => {
       registerSpecDragSortEvent()
     })
-    console.log('tagInputs',tagInputs)
   }
 }
 
@@ -545,7 +559,6 @@ function submitForm() {
   })
 }
 
-
 function openFullScreen() {
   state.loading = proxy.$loading({
     lock: true,
diff --git a/src/views/pms/goods/detail.vue b/src/views/pms/goods/detail.vue
index 863403a3..2a94eb2d 100644
--- a/src/views/pms/goods/detail.vue
+++ b/src/views/pms/goods/detail.vue
@@ -1,41 +1,43 @@
 <template>
   <div class="components-container">
+
     <el-steps :active="active" process-status="finish" finish-status="success" simple>
       <el-step title="选择商品分类"></el-step>
       <el-step title="填写商品信息"></el-step>
       <el-step title="设置商品属性"></el-step>
       <el-step title="设置商品库存"></el-step>
     </el-steps>
+
     <goods-category
       v-show="active==0"
       v-model="goods"
       v-if="loaded==true"
       @prev="prev"
-      @next="next">
-    </goods-category>
+      @next="next"
+    />
+
     <goods-info
       v-show="active==1"
       v-model="goods"
       v-if="loaded==true"
       @prev="prev"
-      @next="next">
-    </goods-info>
-
+      @next="next"
+    />
     <goods-attribute
       v-show="active==2"
       v-model="goods"
       v-if="loaded==true"
       @prev="prev"
-      @next="next">
-    </goods-attribute>
+      @next="next"
+    />
 
     <goods-stock
       v-show="active==3"
       v-model="goods"
       v-if="loaded==true"
       @prev="prev"
-      @next="next">
-    </goods-stock>
+      @next="next"
+    />
   </div>
 </template>