From c61a4fc2cd4825b58a5ee03c1370a0e61897cb3d Mon Sep 17 00:00:00 2001
From: Junling Bu <linlinjavaer@gmail.com>
Date: Tue, 12 Jun 2018 14:08:54 +0800
Subject: [PATCH] =?UTF-8?q?fix[litemall-admin]=EF=BC=9A=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E7=9A=84=E5=AE=A3=E4=BC=A0=E7=94=BB=E5=BB=8A=E6=89=80=E6=8C=87?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E7=89=87=E5=88=97=E8=A1=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 litemall-admin/src/api/storage.js        |  4 ++
 litemall-admin/src/views/goods/goods.vue | 54 +++++++++++++++++++++---
 2 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/litemall-admin/src/api/storage.js b/litemall-admin/src/api/storage.js
index 467f7c04..590b64af 100644
--- a/litemall-admin/src/api/storage.js
+++ b/litemall-admin/src/api/storage.js
@@ -60,3 +60,7 @@ export function deleteStorage(data) {
     data
   })
 }
+
+export function getUploadApi(data) {
+  return process.env.OS_API + '/storage/create'
+}
diff --git a/litemall-admin/src/views/goods/goods.vue b/litemall-admin/src/views/goods/goods.vue
index 6b493376..9d6f8ffd 100644
--- a/litemall-admin/src/views/goods/goods.vue
+++ b/litemall-admin/src/views/goods/goods.vue
@@ -146,8 +146,10 @@
         </el-form-item>
         
         <el-form-item label="宣传画廊">
-          <el-input v-model="dataForm.gallery"></el-input>
-        </el-form-item>            
+          <el-upload :action='UPLOAD_API' :limit='5' multiple accept=".jpg,.jpeg,.png,.gif" :file-list="galleryFileList" list-type="picture" :on-exceed='uploadOverrun' :on-success="handleGalleryUrl" :on-remove="handleRemove">
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>        
         
         <el-form-item label="商品介绍">
           <el-input v-model="dataForm.goodsBrief"></el-input>
@@ -207,7 +209,7 @@
 
 <script>
 import { listGoods, createGoods, updateGoods, deleteGoods } from '@/api/goods'
-import { createStorage } from '@/api/storage'
+import { createStorage, getUploadApi } from '@/api/storage'
 import waves from '@/directive/waves' // 水波纹指令
 import BackToTop from '@/components/BackToTop'
 import Editor from '@tinymce/tinymce-vue'
@@ -219,6 +221,8 @@ export default {
   data() {
     return {
       list: undefined,
+      galleryFileList: [],
+      UPLOAD_API: getUploadApi(),
       total: undefined,
       listLoading: true,
       listQuery: {
@@ -242,7 +246,7 @@ export default {
         goodsBrief: undefined,
         goodsDesc: '',
         keywords: undefined,
-        gallery: undefined,
+        gallery: [],
         categoryId: undefined,
         brandId: undefined
       },
@@ -302,6 +306,7 @@ export default {
       this.getList()
     },
     resetForm() {
+      this.galleryFileList = []
       this.dataForm = {
         id: undefined,
         goodsSn: undefined,
@@ -316,7 +321,7 @@ export default {
         goodsBrief: undefined,
         goodsDesc: '',
         keywords: undefined,
-        gallery: undefined,
+        gallery: [],
         categoryId: undefined,
         brandId: undefined
       }
@@ -324,6 +329,35 @@ export default {
     filterLevel(value, row) {
       return row.level === value
     },
+    uploadOverrun: function() {
+      this.$message({
+        type: 'error',
+        message: '上传文件个数超出限制!最多上传5张图片!'
+      })
+    },
+    handleGalleryUrl(response, file, fileList) {
+      if (response.errno === 0) {
+        this.dataForm.gallery.push(response.data.url)
+      }
+    },
+    handleRemove: function(file, fileList) {
+      for (var i = 0; i < this.dataForm.gallery.length; i++) {
+        // 这里存在两种情况
+        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
+        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
+        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
+        var url
+        if (file.response === undefined) {
+          url = file.url
+        } else {
+          url = file.response.data.url
+        }
+
+        if (this.dataForm.gallery[i] === url) {
+          this.dataForm.gallery.splice(i, 1)
+        }
+      }
+    },
     handleCreate() {
       this.resetForm()
       this.dialogStatus = 'create'
@@ -350,6 +384,16 @@ export default {
     },
     handleUpdate(row) {
       this.dataForm = Object.assign({}, row)
+      this.galleryFileList = []
+      if (this.dataForm.gallery.length > 0) {
+        for (var i = 0; i < row.gallery.length; i++) {
+          this.galleryFileList.push({
+            name: row.gallery[i].substring(row.gallery[i].lastIndexOf('/') + 1),
+            url: row.gallery[i]
+          })
+        }
+      }
+
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
       this.$nextTick(() => {