From 622bcc5554905d61bbf198b36ae234a745c1397b Mon Sep 17 00:00:00 2001
From: guqing <1484563614@qq.com>
Date: Wed, 12 Jun 2019 21:29:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E4=BA=86=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E4=B9=9D=E5=AE=AB=E6=A0=BC=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/UploadPhoto.vue    | 100 +++++++++++++++++++++++
 src/views/dashboard/Dashboard.vue        |  54 +++++++++---
 src/views/sheet/internal/JournalList.vue |  67 ++++++++++++---
 3 files changed, 196 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Upload/UploadPhoto.vue

diff --git a/src/components/Upload/UploadPhoto.vue b/src/components/Upload/UploadPhoto.vue
new file mode 100644
index 000000000..82141b453
--- /dev/null
+++ b/src/components/Upload/UploadPhoto.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :name="name"
+	  :customRequest="handleUpload"
+      listType="picture-card"
+      :fileList="fileList"
+      @preview="handlePreview"
+      @change="handleChange"
+    >
+      <div v-if="fileList.length < 9" id="plus-photo-uploadbox">
+        <a-icon type="plus" />
+        <div class="ant-upload-text">Upload</div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import attachmentApi from '@/api/attachment'
+export default {
+  data () {
+    return {
+	  name: 'file',
+      previewVisible: false,
+      previewImage: '',
+      fileList: [],
+	  uploadHandler: attachmentApi.upload
+    }
+  },
+  methods: {
+    handleCancel () {
+      this.previewVisible = false
+    },
+    handlePreview (file) {
+      this.previewImage = file.url || file.thumbUrl
+      this.previewVisible = true
+    },
+    handleChange ({ fileList }) {
+      this.fileList = fileList
+    },
+	handleUpload(option) {
+	  this.$log.debug('Uploading option', option)
+	  const CancelToken = axios.CancelToken
+	  const source = CancelToken.source()
+	
+	  const data = new FormData()
+	  data.append(this.name, option.file)
+	
+	  this.uploadHandler(
+	    data,
+	    progressEvent => {
+	      if (progressEvent.total > 0) {
+	        progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
+	      }
+	      this.$log.debug('Uploading percent: ', progressEvent.percent)
+	      option.onProgress(progressEvent)
+	    },
+	    source.token,
+	    option.file
+	  )
+	    .then(response => {
+	      this.$log.debug('Uploaded successfully', response)
+	      option.onSuccess(response, option.file)
+	      this.$emit('success', response, option.file)
+	    })
+	    .catch(error => {
+	      this.$log.debug('Failed to upload file', error)
+	      option.onError(error, error.response)
+	      this.$emit('failure', error, option.file)
+	    })
+	  return {
+	    abort: () => {
+	      this.$log.debug('Upload operation aborted by the user')
+	      source.cancel('Upload operation canceled by the user.')
+	    }
+	  }
+	}
+  },
+}
+</script>
+<style>
+  /* you can make up upload button and sample style by using stylesheets */
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+	.ant-upload-list-picture-card {
+		/* 将浮动恢复为默认值,避免出现纵向换行情况 */
+    float: initial;
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 8e3016ed0..add75bf91 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -199,12 +199,27 @@
                 v-model="journal.content"
                 placeholder="写点什么吧..."
               />
-            </a-form-item>
-            <a-form-item>
-              <a-button
-                type="primary"
-                @click="handleCreateJournalClick"
-              >保存</a-button>
+            </a-form-item>
+						
+						<!-- 日志图片上传 -->
+						<a-form-item v-show="showMoreOptions">
+							<UploadPhoto></UploadPhoto>
+							<!-- <a-collapse :bordered="false">
+								<a-collapse-panel key="1">
+									
+								</a-collapse-panel>
+							</a-collapse> -->
+						</a-form-item>
+						
+            <a-form-item>
+								 <a-button
+									type="primary"
+									@click="handleCreateJournalClick"
+								>保存</a-button>
+								<a href="javascript:;" class="more-options-btn"
+									type="default"
+									@click="handleUploadPhotoWallClick"
+								>更多选项<a-icon type="down" /></a>
             </a-form-item>
           </a-form>
         </a-card>
@@ -317,7 +332,8 @@ import postApi from '@/api/post'
 import logApi from '@/api/log'
 import adminApi from '@/api/admin'
 import journalApi from '@/api/journal'
-import countTo from 'vue-count-to'
+import countTo from 'vue-count-to'
+import UploadPhoto from '../../components/Upload/UploadPhoto.vue'
 export default {
   name: 'Dashboard',
   mixins: [mixin, mixinDevice],
@@ -325,10 +341,12 @@ export default {
     PageView,
     AnalysisCard,
     RecentCommentTab,
-    countTo
+    countTo,
+		UploadPhoto
   },
   data() {
-    return {
+    return {
+			showMoreOptions: false,
       startVal: 0,
       logType: logApi.logType,
       activityLoading: true,
@@ -397,7 +415,7 @@ export default {
     }
     next()
   },
-  methods: {
+  methods: {
     loadOptions() {
       optionApi.listAll(this.keys).then(response => {
         this.options = response.data.data
@@ -430,7 +448,11 @@ export default {
         this.$message.success('发表成功！')
         this.journal = {}
       })
-    },
+    },
+		handleUploadPhotoWallClick(){
+			// 是否显示上传照片墙组件
+			this.showMoreOptions = !this.showMoreOptions
+		},
     handleShowLogDrawer() {
       this.logDrawerVisiable = true
       this.loadLogs()
@@ -457,4 +479,12 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped="scoped">
+	.more-options-btn{
+		margin-left: 15px;
+		text-decoration: none;
+	}
+	
+</style>
diff --git a/src/views/sheet/internal/JournalList.vue b/src/views/sheet/internal/JournalList.vue
index 5bcfa8142..717df78e2 100644
--- a/src/views/sheet/internal/JournalList.vue
+++ b/src/views/sheet/internal/JournalList.vue
@@ -138,24 +138,33 @@
         >
           <a-icon type="info-circle-o" />
         </a-tooltip>
-      </template>
+      </template>
       <template slot="footer">
         <a-button
           key="submit"
           type="primary"
           @click="createOrUpdateJournal"
-        >
+        >
           发布
         </a-button>
-      </template>
+      </template>
       <a-form layout="vertical">
         <a-form-item>
           <a-input
             type="textarea"
             :autosize="{ minRows: 8 }"
             v-model="journal.content"
-          />
-        </a-form-item>
+          />
+        </a-form-item>
+				<a-form-item v-show="showMoreOptions">
+					<UploadPhoto @success="handlerPhotoUploadSuccess"></UploadPhoto>
+				</a-form-item>
+				<a-form-item>
+					<a href="javascript:;" class="more-options-btn"
+						type="default"
+						@click="handleUploadPhotoWallClick"
+					>更多选项<a-icon type="down" /></a>
+				</a-form-item>
       </a-form>
     </a-modal>
 
@@ -231,12 +240,13 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 import journalApi from '@/api/journal'
 import journalCommentApi from '@/api/journalComment'
 import userApi from '@/api/user'
-
+import UploadPhoto from '@/components/Upload/UploadPhoto.vue'
 export default {
   mixins: [mixin, mixinDevice],
-  components: { JournalCommentTree },
+  components: { JournalCommentTree, UploadPhoto },
   data() {
-    return {
+    return {
+			showMoreOptions: false,
       title: '发表',
       listLoading: false,
       visible: false,
@@ -255,17 +265,38 @@ export default {
       },
       journals: [],
       comments: [],
-      journal: {},
+      journal: {
+				id: null,
+				content: '',
+				photos: []
+			},
+			journalPhotos: [],
       selectComment: null,
       replyComment: {},
-      user: {}
+      user: {},
     }
   },
   created() {
     this.loadJournals()
     this.loadUser()
   },
-  methods: {
+  methods: {
+		handlerPhotoUploadSuccess(response, file){
+			var callData = response.data.data
+			var photo = {
+				name: callData.name,
+				url: callData.path,
+				thumbnail: callData.thumbPath,
+				suffix: callData.suffix,
+				width: callData.width,
+				height: callData.height
+			}
+			this.journalPhotos.push(photo)
+		},
+		handleUploadPhotoWallClick(){
+			// 是否显示上传照片墙组件
+			this.showMoreOptions = !this.showMoreOptions
+		},
     loadJournals(isSearch) {
       this.queryParam.page = this.pagination.page - 1
       this.queryParam.size = this.pagination.size
@@ -329,7 +360,10 @@ export default {
         this.handleCommentShow(this.journal)
       })
     },
-    createOrUpdateJournal() {
+    createOrUpdateJournal() {
+			// 给属性填充数据
+			this.journal.photos = this.journalPhotos
+			
       if (this.journal.id) {
         journalApi.update(this.journal.id, this.journal).then(response => {
           this.$message.success('更新成功！')
@@ -355,4 +389,11 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style scoped="scoped">
+	.more-options-btn{
+		margin-left: 15px;
+		text-decoration: none;
+	}
+	
+</style>