1. <template>
    2.   <div>
    3.     <div class="title-left">
    4.       现场照片：
    5.     </div>
    6.     <div class="peer">
    7.       <el-image
    8.           style="width: 150px; height: 150px;margin-left: 5px"
    9.           v-for="(item,index) in fileList"
    10.           :src="item"
    11.           ref="previewImage"
    12.           :key="index"
    13.           @click.capture="handlePreviewImage(index)">
    14.       </el-image>
    15.     </div>
    16.     <el-upload
    17.         ref="elUpload"
    18.         :action="uploadUrl"
    19.         :data="fileData"
    20.         list-type="picture-card"
    21.         :on-success="handleSuccess"
    22.         :on-error="uploadError"
    23.         :before-upload="beforeUpload"
    24.         style="padding: 0 20px; display: inline"
    25.     >
    26.       <i class="el-icon-plus"></i>
    27.       <div slot="file" slot-scope="{file}">
    28.         <el-image id="122" ref="previewImg" :src="file.url" :preview-src-list='file.url' lazy></el-image>
    29.         <span class="el-upload-list__item-actions">
    30.             <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
    31.                 <i class="el-icon-zoom-in"/>
    32.             </span>
    33.             <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
    34.                 <i class="el-icon-download"/>
    35.             </span>
    36.             <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
    37.               <i class="el-icon-delete"/>
    38.             </span>
    39.         </span>
    40.       </div>
    41.     </el-upload>
    42.     <!--图片预览-->
    43.     <el-image-viewer :z-index="2002" v-if="showViewer"
    44.                      :on-close="closeViewer" :initial-index="initialIndex"
    45.                      :onSwitch="onSwitch"
    46.                      :url-list="dialogImageUrl"/>
    47.   </div>
    48. </template>
    50. <script>
    51. import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    52. import {getZjdlyFileInfo} from "@/assets/js/zjdsjjg/zd";
    54. export default {
    55.   name: "ZjdsjjgZjdzdZjdly",
    56.   props: {
    57.     parameter: {}
    58.   },
    59.   created: function () {
    60.     this.getZjdlyFileInfo(this.parameter.iid);
    61.   },
    62.   computed: {
    63.     fileData: function () {
    64.       return {
    65.         iid: this.parameter.iid,
    66.         userid: window.getCookie('userId')
    67.         // "token": this.token,
    68.         // "args": [this.token, this.iid]
    69.       }
    70.     },
    71.   },
    72.   components: {
    73.     ElImageViewer
    74.   },
    75.   data() {
    76.     return {
    77.       uploadUrl: this.$API.uploadSignImg + "?jwt=" + window.getCookie("token"),
    78.       dialogImageUrl: [],
    79.       disabled: false,
    80.       fileList: [],
    81.       showViewer: false, // 显示查看器
    82.       token: window.getCookie("token"),
    83.       initialIndex: 0
    84.     }
    85.   },
    86.   methods: {
    87.     ontopfunction: function (data, json) {
    88.       this.$emit("ontopfunction", data, json);
    89.     },
    90.     // 删除
    91.     handleRemove(file, fileList) {
    92.       let uploadFiles = this.$refs.elUpload.uploadFiles;
    93.       uploadFiles.forEach((value, index) => {
    94.         if (value.uid === file.uid) {
    95.           uploadFiles.splice(index, 1)
    96.           this.fileList.splice(index, 1)
    97.         }
    98.       })
    99.     },
    100.     // 大图预览
    101.     handlePictureCardPreview(file) {
    102.       this.dialogImageUrl = file.url || file.response.imgUrl;
    103.       this.showViewer = true;
    104.     },
    105.     // 下载图片
    106.     handleDownload(file) {
    107.       let a = document.createElement('a');
    108.       a.download = file.name;
    109.       a.href = (file.url);
    110.       a.click();
    111.     },
    112.     // 上传前检查
    113.     beforeUpload(file) {
    114.       const fileType = file.type,
    115.           isImage = fileType.indexOf('image') !== -1,
    116.           isLt2M = file.size / 1024 / 1024 < 2;
    118.       if (!isImage) {
    119.         this.$message.error('上传图片格式只能是png、jpg、gif!');
    120.       }
    121.       return isImage;
    122.     },
    123.     //上传失败
    124.     uploadError() {
    125.       this.$message.error('上传失败!');
    126.     },
    127.     //上传成功
    128.     handleSuccess(res, file, list) {
    129.       let self = this;
    130.       let status = res.status;
    131.       if (status == -1) {
    132.         self.$message.error('上传失败!');
    133.       } else {
    134.         self.fileList.push(res.data.result);
    135.         self.$message.success('上传成功!');
    136.       }
    137.     },
    138.     // 关闭
    139.     closeViewer() {
    140.       this.showViewer = false;
    141.     },
    142.     // 获取现场照片
    143.     getZjdlyFileInfo(iid) {
    144.       let self = this;
    145.       getZjdlyFileInfo([self.token, iid]).then(res => {
    146.         if (res.data.status == 0) {
    147.           let result = eval('(' + res.data.result + ')');
    148.           self.fileList = result;
    149.         }
    150.       });
    151.     },
    152.     // 预览图查看
    153.     handlePreviewImage(index) {
    154.       this.dialogImageUrl = this.fileList;
    155.       this.initialIndex = index;
    156.       this.showViewer = true;
    157.     },
    158.     // 切换下一张预览图
    159.     onSwitch(index){
    160.       this.initialIndex = index;
    161.     }
    162.   }
    163. }
    164. </script>
    166. <style scoped>
    167. .title-left {
    168.   font-size: 26px;
    169.   height: 40px;
    170. }
    172. .peer {
    173.   display: inline-block;
    174. }
    175. </style>