<template>
|
<div class="home-image-list">
|
<div class="home-image-content">
|
<el-row :gutter="16">
|
<el-col style="text-align: center" :span="6" v-for="(item, key) in imageList" :key="'key'+key">
|
<el-image
|
style="width: 120px; height: 200px"
|
fit="contain"
|
:src="item.url"
|
:preview-src-list="item.list">
|
</el-image>
|
</el-col>
|
</el-row>
|
|
</div>
|
<div class="home-image-footer">
|
<el-button type="primary" size="small" icon="el-icon-refresh" @click="flush">刷新</el-button>
|
<el-button
|
v-if="showUpload"
|
type="success"
|
size="small"
|
icon="el-icon-upload"
|
@click="uploadImageDialog = true">上传图片</el-button>
|
</div>
|
<!-- 图片上传 -->
|
<el-dialog
|
title="图片上传"
|
width="auto"
|
:visible.sync="uploadImageDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal="false"
|
:modal-append-to-body="false">
|
<div class="upload-image-container">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
:action="action"
|
:data="info"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:on-success="handleSuccess"
|
:before-upload="beforeAvatarUpload"
|
list-type="picture"
|
:auto-upload="false"
|
multiple>
|
<el-button slot="trigger" size="small" type="primary" @click="flush">选取文件</el-button>
|
<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
|
</el-upload>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import sysConfig from "@/assets/js/config";
|
import getQRCodeUrl from "@/assets/js/outside/getQRCodeUrl";
|
export default {
|
name: "homeImageList",
|
props: {
|
batt: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
images: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
},
|
data() {
|
let baseUrl = window.location.protocol+"//"+window.location.hostname+`${location.port ? ':'+location.port : ''}/fg/`;
|
let action = baseUrl+"battInf/uploadPicOfStation";
|
return {
|
uploadImageDialog: false,
|
baseUrl: baseUrl,
|
action: action,
|
showUpload: true, // 允许上传
|
isQRCode: false, // 数据来源二维码资料库
|
}
|
},
|
watch: {
|
uploadImageDialog() {
|
if(!this.uploadImageDialog) {
|
this.$refs.upload.clearFiles();
|
}
|
}
|
},
|
methods: {
|
submitUpload() {
|
this.$refs.upload.submit();
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
beforeAvatarUpload(file) {
|
const isLt2M = file.size / 1024 / 1024 < 20;
|
if (!isLt2M) {
|
this.$message.error('上传头像图片大小不能超过 20MB!');
|
}
|
return isLt2M;
|
},
|
handleSuccess(res) {
|
if(res.code == 1) {
|
this.$layer.msg(res.msg);
|
this.uploadImageDialog = false;
|
this.flush();
|
}else {
|
this.$layer.msg(res.msg);
|
}
|
},
|
flush() {
|
this.$emit("success");
|
}
|
},
|
computed: {
|
info() {
|
let batt = this.batt;
|
return {
|
stationId: batt.stationId
|
}
|
},
|
imageList() {
|
let isQRCode = this.isQRCode;
|
let batt = this.batt;
|
let images = this.images;
|
let baseUrl = this.baseUrl;
|
let qrBaseUrl = getQRCodeUrl();
|
let imagesUrl = images.map(item=>{
|
return isQRCode?qrBaseUrl+item:baseUrl+"fg_photo/stationsrc/"+batt.stationId+"/"+item;
|
});
|
return imagesUrl.map(item=>{
|
return {
|
url: item,
|
list: imagesUrl
|
}
|
});
|
}
|
},
|
mounted() {
|
// 太原供电局模式 接入二维码资料库不用自己上传
|
if(sysConfig.clientName.name == "sxty") {
|
this.showUpload = false;
|
this.isQRCode = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.home-image-list {
|
width: 960px;
|
background-color: #FFFFFF;
|
}
|
.home-image-footer {
|
padding: 8px 16px;
|
background-color: #eaeaea;
|
text-align: right;
|
}
|
.el-carousel__item:nth-child(2n) {
|
background-color: #99a9bf;
|
}
|
|
.el-carousel__item:nth-child(2n+1) {
|
background-color: #d3dce6;
|
}
|
.el-carousel__item {
|
text-align: center;
|
}
|
.home-image-content {
|
min-height: 300px;
|
max-height: 500px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
.upload-image-container {
|
width: 500px;
|
padding: 8px 16px;
|
min-height: 300px;
|
|
background-color: #FFFFFF;
|
}
|
</style>
|
