<template>
|
<CompGenericWrapper type="dialog">
|
<template #content>
|
<el-row>
|
<el-col>
|
<el-form-item label="整改图片">
|
<el-button @click="choseChangePic" :disabled="fileList.length >= 3"
|
>从文件夹选取</el-button
|
>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="!fileList || fileList.length <= 0">
|
<el-empty style="height: 145px" description="请添加图片" />
|
</el-col>
|
<el-col>
|
<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>
|
</el-col>
|
</el-row>
|
<div class="flex-div">
|
<el-button type="primary" @click="onSubmit" :loading="loading"
|
>保存</el-button
|
>
|
<el-button @click="onCancel">取消</el-button>
|
</div>
|
<el-image-viewer
|
v-if="previewDialogVisible"
|
:url-list="fileList.map((item) => item.url)"
|
:initial-index="initialIndex"
|
@close="previewDialogVisible = false"
|
alt="预览"
|
class="preview-pic"
|
/>
|
</template>
|
</CompGenericWrapper>
|
</template>
|
<script>
|
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 {
|
emits: ['submit', 'cancel'],
|
components: {},
|
watch: {
|
oldChangeFileList: {
|
handler(nv, ov) {
|
this.initParams();
|
},
|
immediate: true
|
},
|
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 {
|
// 初始图片预览index
|
initialIndex: -1,
|
// 图片选择最大数量
|
maxSelectImgCount: 3,
|
previewDialogImageUrl: '',
|
previewDialogVisible: false,
|
fileList: [],
|
oldFileList: [],
|
deleteImg: [],
|
|
ledgerPicDialog: false,
|
anyPhotoDialog: false,
|
|
loading: false
|
};
|
},
|
mounted() {},
|
methods: {
|
pictureValidate() {
|
if (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 || 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;
|
},
|
onCancel() {
|
this.$emit('cancel');
|
this.$emit('update:visible', false);
|
},
|
onSubmit() {
|
if (!this.pictureValidate()) {
|
return;
|
}
|
this.loading = true;
|
// 数据准备
|
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)
|
}
|
});
|
|
let deleteImgCopy = this.deleteImg;
|
|
if (this.changeType == 1) {
|
fileUtil.getImageFiles(picUrls, (files) => {
|
data.append('deleteImg', deleteImgCopy);
|
data.append('problemId', this.problemId);
|
files.forEach((image) => {
|
data.append('images', image);
|
});
|
|
problemApi
|
.updateChange(data)
|
.then((res) => {
|
this.$emit('submit', true);
|
})
|
.finally(() => (this.loading = false));
|
});
|
} else {
|
fileUtil.getImageFiles(picUrls, (files) => {
|
data.append('problemId', this.problemId);
|
files.forEach((image) => {
|
data.append('images', image);
|
});
|
problemApi
|
.changeProblem(data)
|
.then((res) => {
|
this.$emit('submit', true);
|
})
|
.finally(() => (this.loading = false));
|
});
|
}
|
},
|
beforeRemoveFile(file, fileList) {
|
if (file.remark == '已上传') {
|
this.deleteImg.push(file.guid);
|
this.oldFileList.filter((item) => item.url != file.url);
|
}
|
},
|
handlePictureCardPreview(uploadFile) {
|
this.initialIndex = this.fileList.indexOf(uploadFile);
|
this.previewDialogVisible = true;
|
this.previewDialogImageUrl = uploadFile.url;
|
},
|
// 从文件夹中
|
choseChangePic() {
|
// 获取指定ID的元素
|
var btnElement = document.getElementById('uploadBtnId');
|
// 检查元素是否存在
|
if (btnElement) {
|
// 触发点击事件
|
btnElement.click();
|
}
|
}
|
}
|
};
|
</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 {
|
display: none;
|
}
|
/* 隐藏el-upload上传成功组件 */
|
::v-deep .el-upload-list__item-status-label {
|
display: none !important;
|
}
|
</style>
|
