跟进上传

src/components/user/statistics.vue

@@ -177,10 +177,36 @@
           </el-option>
         </el-select>
         <el-input style="margin:5px 0" v-model="set_follow_status.remark" size="small" placeholder="请输入跟进记录"></el-input>
+        <el-input
+          class="mb10 input-layout"
+          type="textarea"
+          :rows="2"
+          placeholder="粘贴图片即可上传 目前只能上传一张"
+          @paste.native="handlePaste"
+      >
+      </el-input>
+        <el-upload
+          class="upload-demo"
+          ref="upload"
+          action=""
+          :http-request="httpRequest"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :limit="1"
+          :file-list="fileList">
+          <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
+        </el-upload>
+        <br>
         <el-table :data="follow_status_list" border>
             <el-table-column prop="create_time" width="200" label="时间"></el-table-column>
             <el-table-column v-if="$local.isRoot()" width="100" prop="op_user" label="维护经理"></el-table-column>
             <el-table-column prop="druation" width="90" label="呼叫时长"></el-table-column>
+            <el-table-column label="跟进截图">
+              <template slot-scope="scope">   
+                <el-link type="primary" v-if="scope.row.file" :href="scope.row.file"  target="_blank"> {{scope.row.file}} 查看大图</el-link>
+              </template>
+            </el-table-column>
             <el-table-column label="跟进记录">
               <template slot-scope="scope">
                 <span v-if="scope.row.remark != null">{{scope.row.remark}}</span>
@@ -277,6 +303,7 @@ export default {
   },
   data () {
     return {
+      fileList: [],
       loading: false,
       cost_loading: false,
       account_loading: false,
@@ -313,7 +340,8 @@ export default {
         user_id: null,
         old_status: null,
         status: null,
-        remark: null
+        remark: null,
+        file:null
       },
       userinfo_fall: false,
       phone_fall: false,
@@ -453,7 +481,10 @@ export default {
       }
       this.temps.follow_status = this.setStatus(this.set_follow_status.status)
       this.clickOk = true
-      this.$api.post(this.$api.phpURL + 'manager/UserFollow/changeFolowStatus', {data: this.set_follow_status}).then(res => {
+      var up_data = {};
+      this.set_follow_status.file = this.fileList[0]
+      up_data.params = this.set_follow_status;
+      this.$api.upload(this.$api.phpURL + 'manager/UserFollow/changeFolowStatus',up_data).then(res => {
         this.follow_status_change_fall = false
         this.follow_status_change_two = false
         this.set_follow_status.id = null
@@ -589,6 +620,46 @@ export default {
           })
         }
       })
+    },
+    submitUpload() {
+      console.log(this.$refs);
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    // 自定义的提交函数，取出文件设置进请求参数
+    httpRequest(param) {
+      this.set_follow_status.file = param.file
+    },
+    handlePaste (e) {
+      var clipboardData = e.clipboardData; // IE
+        if (!clipboardData) {
+            //chrome
+          clipboardData = e.originalEvent.clipboardData;
+        }
+        var items='';
+        items = (e.clipboardData || window.clipboardData).items;
+        let file = null;
+        if (!items || items.length === 0) {
+          this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');
+          return;
+        }
+        // 搜索剪切板items
+        for (let i = 0; i < items.length; i++) {
+          // 限制上传文件类型
+          if (items[i].type.indexOf('image') !== -1) {
+            file = items[i].getAsFile();
+            break;
+          }
+        }
+        // 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
+        if(file){
+          // 上传到图片服务器
+          this.fileList.push(file)
+        }
     }
   }
 }