<template>
|
<div>
|
<div class="t-card_item">
|
整改图片
|
<div>
|
<el-button @click="choseChangePic" :disabled="fileList.length >= 3">从文件夹选取</el-button>
|
</div>
|
</div>
|
<el-upload
|
class="img-upload"
|
ref="uploadRef"
|
v-model:file-list="fileList"
|
list-type="picture-card"
|
multiple
|
:auto-upload="false"
|
crossorigin="Anonymous"
|
:before-remove="beforeRemoveFile"
|
:on-preview="handlePictureCardPreview"
|
:disabled="readonly"
|
accept="image/*"
|
>
|
<template #trigger v-if="fileList.length < 3 && !readonly">
|
<el-button
|
v-if="fileList.length < 3"
|
type="primary"
|
id="uploadBtnId"
|
style="display: none"
|
></el-button>
|
<el-icon>
|
<Plus />
|
</el-icon>
|
</template>
|
<template #tip>
|
<div style="color: #f56c6c">最少上传一张图片，最多选择三张图片</div>
|
</template>
|
</el-upload>
|
<div class="flex-div">
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
<el-button @click="this.$emit('submited', false)">取消</el-button>
|
</div>
|
<ArbitraryPhoto
|
:max-select="maxSelectImgCount - fileList.length"
|
v-if="anyPhotoDialog"
|
v-model:dialog-visible="anyPhotoDialog"
|
@submit="handleSelectedAnyPhono"
|
:subtask="subtask"
|
:defaultFile="fileList"
|
ref="arbitraryPhotoRef"
|
>
|
</ArbitraryPhoto>
|
<el-dialog
|
title="台账图片"
|
width="80%"
|
v-model="ledgerPicDialog"
|
:before-close="beforeLedgerPicDialogclose"
|
>
|
<LedgerPic
|
v-if="ledgerPicDialog"
|
@selectByLedgerPicEvent="handleLedgerPicPhono"
|
:month="month"
|
:subtask="subtask"
|
ref="ledgerPicRef"
|
>
|
</LedgerPic>
|
</el-dialog>
|
</div>
|
<el-dialog v-model="previewDialogVisible">
|
<img w-full :src="previewDialogImageUrl" alt="预览" class="preview-pic" />
|
</el-dialog>
|
</template>
|
<script>
|
import ArbitraryPhoto from './ArbitraryPhoto.vue';
|
import LedgerPic from './CompLedgerPic.vue';
|
import problemApi from '@/api/fysp/problemApi.js';
|
|
import { $fysp } from '@/api/index.js';
|
import fileUtil from '@/utils/fileUtils.js';
|
import { useCloned } from '@vueuse/core';
|
import { ElMessage } from 'element-plus';
|
export default {
|
components: {
|
ArbitraryPhoto,
|
LedgerPic
|
},
|
watch: {
|
fileList: {
|
handler(newFileList, oldFileList) {
|
this.pictureValidate();
|
},
|
deep: true
|
}
|
},
|
props: {
|
changeType: {
|
type: Number
|
},
|
problemId: {
|
type: String
|
},
|
oldChangeFileList: {
|
type: Array,
|
default: () => []
|
},
|
subtask: {
|
type: Object,
|
default: () => {}
|
},
|
month: {
|
type: Number,
|
default: -1
|
}
|
},
|
data() {
|
return {
|
// 图片选择最大数量
|
maxSelectImgCount: 3,
|
previewDialogImageUrl: '',
|
previewDialogVisible: false,
|
fileList: [],
|
oldFileList: [],
|
deleteImg: [],
|
|
ledgerPicDialog: false,
|
anyPhotoDialog: false
|
};
|
},
|
mounted() {
|
this.initParams();
|
},
|
methods: {
|
pictureValidate() {
|
if (this.changeType == 1 && this.fileList.length < 1) {
|
ElMessage({
|
message: '至少上传一张图片',
|
type: 'error'
|
});
|
return false;
|
} else if (this.fileList.length > 3) {
|
ElMessage({
|
message: '超过三张, 已删除多出的图片',
|
type: 'error'
|
});
|
this.fileList = this.fileList.slice(0, 3);
|
return false;
|
}
|
return true;
|
},
|
initParams() {
|
if (this.changeType == 0) {
|
return;
|
}
|
let beforeEditImgList = [];
|
useCloned(this.oldChangeFileList).cloned.value.forEach(
|
(oldChangeFileitem) => {
|
if (oldChangeFileitem.ischanged == 1) {
|
oldChangeFileitem.url =
|
$fysp.imgUrl +
|
oldChangeFileitem.extension1 +
|
oldChangeFileitem.guid +
|
'.jpg';
|
oldChangeFileitem.name = '1';
|
beforeEditImgList.push(oldChangeFileitem);
|
}
|
}
|
);
|
this.fileList = useCloned(beforeEditImgList).cloned.value;
|
this.oldFileList = useCloned(beforeEditImgList).cloned.value;
|
},
|
onSubmit() {
|
if (!this.pictureValidate()) {
|
return;
|
}
|
// 数据准备
|
let data = new FormData();
|
var picUrls = [];
|
this.fileList.forEach((item) => {
|
if (!('guid' in item)) {
|
// 新的
|
let exclude = false;
|
for (let index = 0; index < this.oldFileList.length; index++) {
|
const element = this.oldFileList[index];
|
if (item.url == element.url) {
|
exclude = true;
|
break;
|
}
|
}
|
if (!exclude) {
|
picUrls.push(item.url);
|
}
|
exclude = false;
|
// picUrls.push(item)
|
}
|
});
|
|
const that = this;
|
let deleteImgCopy = this.deleteImg;
|
|
if (this.changeType == 1) {
|
fileUtil.getImageFiles(picUrls, function (files) {
|
data.append('deleteImg', deleteImgCopy);
|
data.append('problemId', that.problemId);
|
files.forEach((image) => {
|
data.append('images', image);
|
});
|
|
problemApi.updateChange(data).then((res) => {});
|
});
|
that.$emit('submited', true);
|
} else {
|
fileUtil.getImageFiles(picUrls, function (files) {
|
data.append('problemId', that.problemId);
|
files.forEach((image) => {
|
data.append('images', image);
|
});
|
problemApi.changeProblem(data).then((res) => {});
|
that.$emit('submited', true);
|
});
|
}
|
},
|
beforeRemoveFile(file, fileList) {
|
if (file.remark == '已上传') {
|
this.deleteImg.push(file.guid);
|
this.oldFileList.filter((item) => item.url != file.url);
|
}
|
},
|
handlePictureCardPreview(uploadFile) {
|
this.previewDialogVisible = true;
|
this.previewDialogImageUrl = uploadFile.url;
|
},
|
handleSelectedAnyPhono(data) {
|
this.beforeAnyPhotoDialogclose();
|
let isExist = false;
|
for (const item of data) {
|
for (const already of this.fileList) {
|
if (item.url == already.url) {
|
isExist = true;
|
}
|
}
|
if (!isExist) {
|
this.fileList.push({
|
url: item.url,
|
name: '1'
|
});
|
}
|
isExist = false;
|
}
|
},
|
handleLedgerPicPhono(data) {
|
let isExist = false;
|
for (const item of data) {
|
for (const already of this.fileList) {
|
if (item.url == already.url) {
|
isExist = true;
|
}
|
}
|
if (!isExist) {
|
this.fileList.push({
|
url: item.url,
|
name: '1'
|
});
|
}
|
isExist = false;
|
}
|
|
this.beforeAnyPhotoDialogclose();
|
},
|
chosePicFromAnyPic() {
|
this.anyPhotoDialog = true;
|
},
|
// 从文件夹中
|
choseChangePic() {
|
// 获取指定ID的元素
|
var btnElement = document.getElementById('uploadBtnId');
|
// 检查元素是否存在
|
if (btnElement) {
|
// 触发点击事件
|
btnElement.click();
|
}
|
},
|
chosePicFromLedgerPic() {
|
// 使用Date对象解析日期字符串
|
var date = new Date(this.subtask.subtask.planstarttime.splice(0, 7));
|
// 获取月份信息，月份是从0开始的，所以需要加1
|
this.month = date.getMonth() + 1;
|
if (String(this.month).length == 1) {
|
this.month = `0${this.month}`;
|
}
|
var year = date.getFullYear();
|
this.month = `${year}-${this.month}`;
|
this.ledgerPicDialog = true;
|
},
|
beforeAnyPhotoDialogclose() {
|
this.anyPhotoDialog = false;
|
},
|
beforeLedgerPicDialogclose() {
|
this.ledgerPicDialog = false;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.flex-div {
|
display: flex;
|
}
|
.t-card_item {
|
display: flex;
|
padding: 5px;
|
}
|
.img-upload {
|
margin-top: 30px;
|
margin-bottom: 30px;
|
margin-left: 63px;
|
}
|
::v-deep .el-dialog__body {
|
width: 95%;
|
}
|
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
|
object-fit: cover !important;
|
}
|
.preview-pic {
|
object-fit: cover;
|
width: 100%;
|
height: 100%;
|
}
|
::v-deep .el-upload--picture-card {
|
border: 0 !important;
|
}
|
</style>
|
