wx-jincw
1 day ago
parent
c2ce25de03
commit
96c8a1d506
@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<div class="image-chooser" v-loading="loading">
|
||||||
|
<div v-for="(item, i) in list" :key="item.id" class="image-item">
|
||||||
|
<img :src="imageUrl(item)" />
|
||||||
|
<i v-if="!readonly" class="el-icon-circle-close" @click.stop="removeImage(item, i)"></i>
|
||||||
|
</div>
|
||||||
|
<div class="image-item" v-loading="uploading" v-if="!readonly">
|
||||||
|
<el-popover
|
||||||
|
v-model="bubVisible"
|
||||||
|
placement="top"
|
||||||
|
trigger="click">
|
||||||
|
<el-button type="primary" size="small" @click="goChooseImage" plain>选择系统图库</el-button>
|
||||||
|
<el-upload
|
||||||
|
ref="upload"
|
||||||
|
class="image-uploader"
|
||||||
|
:action="uploadFileUrl"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-change="handleFileChange"
|
||||||
|
:on-success="handleFileSuccess"
|
||||||
|
:on-error="handleFileError"
|
||||||
|
:before-upload="beforeFileUpload"
|
||||||
|
:auto-upload="true"
|
||||||
|
:headers="headers"
|
||||||
|
:data="uploadData"
|
||||||
|
:limit="1" accept=".png,.jpg,.jpeg,.gif">
|
||||||
|
<el-button type="success" size="small" style="margin-top: 10px;width: 104px;" plain>上传图片</el-button>
|
||||||
|
</el-upload>
|
||||||
|
<div class="image-choose" slot="reference">
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
<ImageChooseDialog ref="imageChooseDialog" @confirm="addImages"></ImageChooseDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { delImages, listImages } from "@/api/gallery/images";
|
||||||
|
import { getToken } from "@/utils/auth";
|
||||||
|
import { formatDateStr } from "@/utils";
|
||||||
|
import ImageChooseDialog from "./ImageChooseDialog";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ImageChooser',
|
||||||
|
components: {
|
||||||
|
ImageChooseDialog,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
queryId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
taskName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.queryId) {
|
||||||
|
this.loading = true;
|
||||||
|
listImages({
|
||||||
|
feedbackId: this.queryId,
|
||||||
|
}).then(res => {
|
||||||
|
this.list = res.data || [];
|
||||||
|
this.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/gallery/images/upload", // 上传文件服务器地址
|
||||||
|
headers: {
|
||||||
|
Authorization: "Bearer " + getToken(),
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
uploadData: {
|
||||||
|
imageTitle: this.taskName + '任务-' + this.tag.tagName + '图片',
|
||||||
|
photoTime: formatDateStr(),// 图片拍摄时间,
|
||||||
|
uploadTime: formatDateStr(),
|
||||||
|
isOpen: 1,
|
||||||
|
keyWords: '任务',
|
||||||
|
cataId: this.tag.saveDir,
|
||||||
|
},
|
||||||
|
uploading: false,
|
||||||
|
loading: false,
|
||||||
|
bubVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
imageUrl(item) {
|
||||||
|
let url = item.imagePath;
|
||||||
|
if (item.file?.length > 0) {
|
||||||
|
url = item.file[0].attachFileUrl || item.imagePath;
|
||||||
|
}
|
||||||
|
if (url.indexOf("http") === 0 || url.indexOf("blob:") === 0) {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
return process.env.VUE_APP_BASE_API + url;
|
||||||
|
},
|
||||||
|
handleFileChange(file) {
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeFileUpload() {
|
||||||
|
this.uploading = true;
|
||||||
|
},
|
||||||
|
handleFileSuccess(res, file) {
|
||||||
|
this.uploading = false;
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success('上传成功');
|
||||||
|
console.log('上传成功；', res);
|
||||||
|
|
||||||
|
this.list.push({
|
||||||
|
imagePath: URL.createObjectURL(file.raw),
|
||||||
|
id: res.imageId,
|
||||||
|
_new: true,
|
||||||
|
});
|
||||||
|
this.$emit('change', this.list.map(item => item.id));
|
||||||
|
this.bubVisible = false;
|
||||||
|
} else {
|
||||||
|
this.$message.error('上传失败');
|
||||||
|
|
||||||
|
}
|
||||||
|
this.$refs.upload.clearFiles();
|
||||||
|
},
|
||||||
|
handleFileError() {
|
||||||
|
this.$message.error('上传失败');
|
||||||
|
this.uploading = false;
|
||||||
|
},
|
||||||
|
removeImage(item, i) {
|
||||||
|
if (item._new) {
|
||||||
|
this.loading = true;
|
||||||
|
delImages(item.id).then(() => {
|
||||||
|
this.$message.success('删除成功');
|
||||||
|
this.list.splice(i, 1);
|
||||||
|
this.$emit('change', this.list.map(item => item.id));
|
||||||
|
this.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.list.splice(i, 1);
|
||||||
|
this.$emit('change', this.list.map(item => item.id));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goChooseImage() {
|
||||||
|
this.bubVisible = false;
|
||||||
|
this.$refs.imageChooseDialog.open();
|
||||||
|
},
|
||||||
|
addImages(list) {
|
||||||
|
this.list = this.list.concat(list);
|
||||||
|
this.$emit('change', this.list.map(item => item.id));
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.image-chooser {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.image-item {
|
||||||
|
background: #f3f3f3;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon-circle-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #f56c6c;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-choose {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.image-item:hover {
|
||||||
|
.el-icon-circle-close {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-item + .image-item {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue