fix(goods): 商品一些问题修复

src/views/pms/goods/components/GoodsInfo.vue

@@ -2,7 +2,7 @@
   <div class="component-container">
     <div class="component-container__main">
       <el-form
-          ref="dataForm"
+          ref="dataFormRef"
           :rules="rules"
           :model="modelValue"
           label-width="120px"
@@ -35,11 +35,12 @@
         </el-form-item>
 
         <el-form-item label="商品简介">
-          <el-input type="textarea" v-model="modelValue.description"/>
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="modelValue.description"/>
         </el-form-item>
 
         <el-form-item label="商品相册">
-          <el-card   v-for="(item,index) in pictures" style="width: 170px;display: inline-block;margin-left: 10px" :body-style="{ padding: '10px' }">
+          <el-card v-for="(item,index) in pictures" style="width: 170px;display: inline-block;margin-left: 10px"
+                   :body-style="{ padding: '10px' }">
 
             <single-upload v-model="item.url"/>
 
@@ -69,14 +70,19 @@
   </div>
 </template>
 <script setup lang="ts">
-import {listBrands} from "@/api/pms/brand"
-import SingleUpload from '@/components/Upload/SingleUpload.vue'
+
 import {onMounted, reactive, ref, toRefs, unref} from "vue"
 import {ElForm} from "element-plus"
+
+// API 依赖
+import {listBrands} from "@/api/pms/brand"
+
+// 自定义组件依赖
+import SingleUpload from '@/components/Upload/SingleUpload.vue'
 import Editor from '@/components/WangEditor/index.vue'
 
 const emit = defineEmits(['prev', 'next'])
-const dataForm = ref(ElForm)
+const dataFormRef = ref(ElForm)
 
 const props = defineProps({
   modelValue: {
@@ -88,7 +94,13 @@ const props = defineProps({
 const state = reactive({
   brandOptions: [] as Array<any>,
   // 商品图册
-  pictures: [] as Array<any>,
+  pictures: [
+    {url: undefined, main: true}, // main = true 代表主图，可切换
+    {url: undefined, main: false},
+    {url: undefined, main: false},
+    {url: undefined, main: false},
+    {url: undefined, main: false}
+  ] as Array<any>,
   rules: {
     name: [{required: true, message: '请填写商品名称', trigger: 'blur'}],
     originPrice: [{required: true, message: '请填写原价', trigger: 'blur'}],
@@ -103,13 +115,15 @@ function loadData() {
   listBrands({}).then(response => {
     state.brandOptions = response.data
   })
-  const goodsId = props.modelValue.id
+  const goodsInfo = props.modelValue
+  console.log('商品信息', goodsInfo)
+  const goodsId = goodsInfo.id
   if (goodsId) {
-    const mainPicUrl = props.modelValue.picUrl
+    const mainPicUrl = goodsInfo.picUrl
     if (mainPicUrl) {
       state.pictures.filter(item => item.main)[0].url = mainPicUrl
     }
-    const subPicUrls = props.modelValue.subPicUrls
+    const subPicUrls = goodsInfo.subPicUrls
     if (subPicUrls && subPicUrls.length > 0) {
       for (let i = 1; i <= subPicUrls.length; i++) {
         state.pictures[i].url = subPicUrls[i - 1]
@@ -120,11 +134,11 @@ function loadData() {
 
 function resetForm() {
   state.pictures = [
-    {url: undefined, main: true},
-    {url: undefined, main: false},
+    {url: undefined, main: true}, // main 代表主图，可以切换
     {url: undefined, main: false},
     {url: undefined, main: false},
     {url: undefined, main: false},
+    {url: undefined, main: false}
   ]
 }
 
@@ -148,8 +162,7 @@ function handlePrev() {
 }
 
 function handleNext() {
-  const form = unref(dataForm)
-  form.validate((valid: any) => {
+  dataFormRef.value.validate((valid: any) => {
     if (valid) {
       // 商品图片
       const mainPicUrl = state.pictures.filter(item => item.main == true && item.url).map(item => item.url)
@@ -167,7 +180,6 @@ function handleNext() {
 
 onMounted(() => {
   loadData()
-  resetForm()
 })
 </script>
 

src/views/pms/goods/components/GoodsStock.vue

@@ -137,8 +137,8 @@
                 align="center"
             >
               <template #default="scope">
-                <el-form-item :prop="'skuList['+scope.$index+'].sn'" :rules="rules.sku.sn">
-                  <el-input v-model="scope.row.sn"/>
+                <el-form-item :prop="'skuList['+scope.$index+'].skuSn'" :rules="rules.sku.skuSn">
+                  <el-input v-model="scope.row.skuSn"/>
                 </el-form-item>
               </template>
             </el-table-column>
@@ -153,8 +153,8 @@
 
             <el-table-column label="库存" align="center">
               <template #default="scope">
-                <el-form-item :prop="'skuList['+scope.$index+'].stock'" :rules="rules.sku.stock">
-                  <el-input v-model="scope.row.stock"/>
+                <el-form-item :prop="'skuList['+scope.$index+'].stockNum'" :rules="rules.sku.stockNum">
+                  <el-input v-model="scope.row.stockNum"/>
                 </el-form-item>
               </template>
             </el-table-column>
@@ -174,16 +174,21 @@
 </template>
 
 <script setup>
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, unref, watch} from "vue";
+import {useRouter} from "vue-router";
+import {Plus, Minus} from '@element-plus/icons-vue'
+import {ElNotification, ElMessage, ElTable, ElForm} from "element-plus"
+
+// API 引用
 import {listAttributes} from "@/api/pms/attribute";
+import {addGoods, updateGoods} from "@/api/pms/goods";
+
+// 自定义组件引用
+import SvgIcon from '@/components/SvgIcon/index.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 {ElNotification, ElMessage, ElTable, ElForm} from "element-plus"
-import {Plus, Minus} from '@element-plus/icons-vue'
-import SvgIcon from '@/components/SvgIcon/index.vue'
-import {useRouter} from "vue-router";
 
+const categoryId = computed(() => props.modelValue.categoryId);
 const emit = defineEmits(['prev', 'next'])
 
 const proxy = getCurrentInstance()
@@ -200,7 +205,6 @@ const props = defineProps({
   }
 })
 
-const categoryId = computed(() => props.modelValue.categoryId);
 
 const state = reactive({
   specForm: {
@@ -217,9 +221,9 @@ const state = reactive({
       value: [{required: true, message: '请输入规格值', trigger: 'blur'}]
     },
     sku: {
-      sn: [{required: true, message: '请输入商品编号', trigger: 'blur'}],
+      skuSn: [{required: true, message: '请输入商品编号', trigger: 'blur'}],
       price: [{required: true, message: '请输入商品价格', trigger: 'blur'}],
-      stock: [{required: true, message: '请输入商品库存', trigger: 'blur'}],
+      stockNum: [{required: true, message: '请输入商品库存', trigger: 'blur'}],
     }
   },
   colors: ['', 'success', 'warning', 'danger'],
@@ -367,7 +371,7 @@ function generateSkuList() {
 
   skuList.forEach((item) => {
     item.specIds = item.specIds.substring(0, item.specIds.length - 1)
-    item.name = item.specValues.substring(0, item.specIds.length - 1).replaceAll('_', ' ')
+    item.name = item.specValues.substring(0, item.specValues.length - 1).replaceAll('_', ' ')
     const specIdArr = item.specIds.split('|')
     const skus = props.modelValue.skuList.filter((sku) =>
         sku.specIdArr.length === specIdArr.length &&
@@ -378,9 +382,9 @@ function generateSkuList() {
     if (skus && skus.length > 0) {
       const sku = skus[0]
       item.id = sku.id
-      item.sn = sku.sn
+      item.skuSn = sku.skuSn
       item.price = sku.price / 100
-      item.stock = sku.stock
+      item.stockNum = sku.stockNum
     }
     const specValueArr = item.specValues.substring(0, item.specValues.length - 1).split('_')  // ['黑','6+128G','官方标配']
     specValueArr.forEach((v, i) => {
@@ -527,12 +531,9 @@ function submitForm() {
     ElMessage.warning("未添加商品库存")
     return false;
   }
-
-  const specForm = unref(specFormRef)
-  specForm.validate((specValid) => {
+  specFormRef.value.validate((specValid) => {
     if (specValid) {
-      const skuForm = unref(skuFormRef)
-      skuForm.validate((skuValid) => {
+      skuFormRef.value.validate((skuValid) => {
         if (skuValid) {
           // openFullScreen()
 

src/views/pms/goods/index.vue

@@ -43,7 +43,7 @@
           <el-table
               :data="props.row.skuList"
               border>
-            <el-table-column align="center" label="商品编码" prop="sn"/>
+            <el-table-column align="center" label="商品编码" prop="skuSn"/>
             <el-table-column align="center" label="商品规格" prop="name"/>
             <el-table-column label="图片" prop="picUrl">
               <template #default="scope">
@@ -53,21 +53,29 @@
             <el-table-column align="center" label="现价" prop="price">
               <template #default="scope">{{ moneyFormatter(scope.row.price) }}</template>
             </el-table-column>
-            <el-table-column align="center" label="库存" prop="stock"/>
+            <el-table-column align="center" label="库存" prop="stockNum"/>
           </el-table>
         </template>
 
       </el-table-column>
       <el-table-column label="商品名称" prop="name" min-width="140"/>
       <el-table-column label="商品图片">
-        <template #default="row">
-          <img :src="row.picUrl" width="40">
+        <template #default="scope">
+          <el-popover
+              placement="right"
+              :width="400"
+              trigger="hover">
+            <img :src="scope.row.picUrl" width="400" height="400"/>
+            <template #reference>
+              <img :src="scope.row.picUrl" style="max-height: 60px;max-width: 60px"/>
+            </template>
+          </el-popover>
         </template>
       </el-table-column>
       <el-table-column label="商品类目" prop="categoryName" min-width="100"/>
       <el-table-column label="商品品牌" prop="brandName" min-width="100"/>
       <el-table-column align="center" label="零售价" prop="originalPrice">
-        <template #default="scope">{{ moneyFormatter(scope.row.price) }}</template>
+        <template #default="scope">{{ moneyFormatter(scope.row.originPrice) }}</template>
       </el-table-column>
       <el-table-column align="center" label="促销价" prop="price">
         <template #default="scope">{{ moneyFormatter(scope.row.price) }}</template>