From a701d02133e128d75a934d144b2b81cfa4cb9e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 5 Mar 2022 12:10:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(goods):=20=E5=95=86=E5=93=81=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WangEditor/index.vue           | 112 +++++-------------
 src/views/pms/goods/components/GoodsInfo.vue  |  42 ++++---
 src/views/pms/goods/components/GoodsStock.vue |  43 +++----
 src/views/pms/goods/index.vue                 |  18 ++-
 4 files changed, 90 insertions(+), 125 deletions(-)

diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index 20b465b2..a8d7d89d 100644
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -4,109 +4,53 @@
       <Toolbar
           :editorId="editorId"
           :defaultConfig="toolbarConfig"
-          :mode="mode"
           style="border-bottom: 1px solid #ccc"
       />
       <Editor
           :editorId="editorId"
           :defaultConfig="editorConfig"
-          :mode="mode"
           style="height: 500px"
-          @onCreated="handleCreated"
-          @onChange="handleChange"
-          @onDestroyed="handleDestroyed"
-          @onFocus="handleFocus"
-          @onBlur="handleBlur"
-          @customAlert="customAlert"
-          @customPaste="customPaste"
       />
     </div>
     <p v-else>loading</p>
   </div>
 </template>
 
-<script>
-import {computed, onBeforeUnmount, ref} from 'vue'
+<script setup>
+import {onBeforeUnmount, reactive, ref, toRefs} from 'vue'
 import {Editor, Toolbar, getEditor, removeEditor} from '@wangeditor/editor-for-vue'
 import {uploadFile} from "@/api/system/file";
 
-export default {
-  components: {Editor, Toolbar},
-  setup() {
-    const editorId = `w-e-${Math.random().toString().slice(-5)}` //【注意】编辑器 id ，要全局唯一
-    const toolbarConfig = {}
-    const isEditorShow = ref(true)
-    const editorConfig = {
-      placeholder: '请输入内容...',
-      MENU_CONF: {
-        uploadImage: {
-          // 自定义图片上传
-          // @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
-          async customUpload(file, insertFn) {
-            uploadFile(file).then(response => {
-              const url = response.data
-              insertFn(url)
-            })
-          }
+const state =reactive({
+  editorId : `w-e-${Math.random().toString().slice(-5)}`, //【注意】编辑器 id ，要全局唯一
+  toolbarConfig : {},
+  isEditorShow : true,
+  editorConfig : {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+      uploadImage: {
+        // 自定义图片上传
+        // @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
+        async customUpload(file, insertFn) {
+          uploadFile(file).then(response => {
+            const url = response.data
+            insertFn(url)
+          })
         }
       }
     }
-    // 组件销毁时，也及时销毁编辑器
-    onBeforeUnmount(() => {
-      const editor = getEditor(editorId)
-      if (editor == null) return
-      editor.destroy()
-      removeEditor(editorId)
-    })
-    // 编辑器回调函数
-    const handleCreated = (editor) => {
-      console.log('created', editor);
-    }
-    const handleChange = (editor) => {
-      console.log('change:', editor.children);
-    }
-    const handleDestroyed = (editor) => {
-      console.log('destroyed', editor)
-    }
-    const handleFocus = (editor) => {
-      console.log('focus', editor)
-    }
-    const handleBlur = (editor) => {
-      console.log('blur', editor)
-    }
-    const customAlert = (info, type) => {
-      alert(`【自定义提示】${type} - ${info}`)
-    }
-    const customPaste = (editor, event, callback) => {
-      console.log('ClipboardEvent 粘贴事件对象', event)
-      // 自定义插入内容
-      editor.insertText('xxx')
-      // 返回值（注意，vue 事件的返回值，不能用 return）
-      callback(false) // 返回 false ，阻止默认粘贴行为
-      // callback(true) // 返回 true ，继续默认的粘贴行为
-    }
-    const insertText = () => {
-      const editor = getEditor(editorId)
-      if (editor == null) return
-      editor.insertText('hello world')
-    }
-    return {
-      editorId,
-      mode: 'default',
-      toolbarConfig,
-      editorConfig,
-      isEditorShow,
-      handleCreated,
-      handleChange,
-      handleDestroyed,
-      handleFocus,
-      handleBlur,
-      customAlert,
-      customPaste,
-      insertText
-    };
   }
-}
+})
+
+const {isEditorShow,editorId,toolbarConfig,editorConfig}  =toRefs(state)
+
+onBeforeUnmount(() => {
+  const editor = getEditor(state.editorId)
+  if (editor == null) return
+  editor.destroy()
+  removeEditor(state.editorId)
+})
+
 </script>
 
 <style src="@wangeditor/editor/dist/css/style.css"></style>
\ No newline at end of file
diff --git a/src/views/pms/goods/components/GoodsInfo.vue b/src/views/pms/goods/components/GoodsInfo.vue
index 4dfd2b41..09d8fdc0 100644
--- a/src/views/pms/goods/components/GoodsInfo.vue
+++ b/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>
 
diff --git a/src/views/pms/goods/components/GoodsStock.vue b/src/views/pms/goods/components/GoodsStock.vue
index ea8a0bef..e7c9bc5f 100644
--- a/src/views/pms/goods/components/GoodsStock.vue
+++ b/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()
 
diff --git a/src/views/pms/goods/index.vue b/src/views/pms/goods/index.vue
index 1710c687..92f0cc98 100644
--- a/src/views/pms/goods/index.vue
+++ b/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>