From d28223384922de5fb08c20516eb3f99981c8136a Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 22 十一月 2024 17:37:34 +0800
Subject: [PATCH] 1. 修复上传问题或整改图片后，界面更新错误问题； 2. 优化问题整改界面展示效果； 3. 场景图片对话框添加查看状态下可以点击图片放大功能
---
src/views/fysp/check/components/ComChangeEdit.vue | 275 ++++++++++++++++++++++++------------------------------
1 files changed, 122 insertions(+), 153 deletions(-)
diff --git a/src/views/fysp/check/components/ComChangeEdit.vue b/src/views/fysp/check/components/ComChangeEdit.vue
index af5562b..9bf3d15 100644
--- a/src/views/fysp/check/components/ComChangeEdit.vue
+++ b/src/views/fysp/check/components/ComChangeEdit.vue
@@ -1,85 +1,83 @@
<template>
- <div>
- <div class="t-card_item">
- 鏁存敼鍥剧墖
- <div>
- <!-- <el-button @click="chosePicFromAnyPic">浠庝换鎰忓浘鐗囬�夊彇</el-button> -->
- <!-- <el-button type="primary" @click="chosePicFromLedgerPic">浠庡彴璐﹂�夊彇</el-button> -->
- <el-button @click="choseChangePic">浠庢枃浠跺す閫夊彇</el-button>
+ <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>
- </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/*"
- >
- <el-button type="primary" id="uploadBtnId" style="display: none"></el-button>
- <el-icon>
- <Plus />
- </el-icon>
- </el-upload>
- <div class="flex-div">
- <el-button type="primary" @click="onSubmit">淇濆瓨</el-button>
- <el-button @click="this.$emit('submited', false)">鍙栨秷</el-button>
- </div>
- <el-dialog
- title="浠绘剰鍥剧墖"
- width="80%"
- v-model="anyPhotoDialog"
- :before-close="beforeAnyPhotoDialogclose"
- >
- <ArbitraryPhoto
- v-if="anyPhotoDialog"
- @selectByAnyPhonoEvent="handleSelectedAnyPhono"
- :subtask="subtask"
- :defaultFile="fileList"
- ref="arbitraryPhotoRef"
- >
- </ArbitraryPhoto>
- </el-dialog>
- <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>
+ <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 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
- },
+ emits: ['submit', 'cancel'],
+ components: {},
watch: {
+ oldChangeFileList: {
+ handler(nv, ov) {
+ this.initParams();
+ },
+ immediate: true
+ },
fileList: {
handler(newFileList, oldFileList) {
this.pictureValidate();
@@ -109,6 +107,10 @@
},
data() {
return {
+ // 鍒濆鍥剧墖棰勮index
+ initialIndex: -1,
+ // 鍥剧墖閫夋嫨鏈�澶ф暟閲�
+ maxSelectImgCount: 3,
previewDialogImageUrl: '',
previewDialogVisible: false,
fileList: [],
@@ -116,12 +118,12 @@
deleteImg: [],
ledgerPicDialog: false,
- anyPhotoDialog: false
+ anyPhotoDialog: false,
+
+ loading: false
};
},
- mounted() {
- this.initParams();
- },
+ mounted() {},
methods: {
pictureValidate() {
if (this.changeType == 1 && this.fileList.length < 1) {
@@ -141,25 +143,35 @@
return true;
},
initParams() {
- if (this.changeType == 0) {
+ 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);
+ 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 = [];
@@ -182,28 +194,35 @@
}
});
- const that = this;
let deleteImgCopy = this.deleteImg;
-
+
if (this.changeType == 1) {
- fileUtil.getImageFiles(picUrls, function (files) {
+ fileUtil.getImageFiles(picUrls, (files) => {
data.append('deleteImg', deleteImgCopy);
- data.append('problemId', that.problemId);
+ data.append('problemId', this.problemId);
files.forEach((image) => {
data.append('images', image);
});
-
- problemApi.updateChange(data).then((res) => {});
+
+ problemApi
+ .updateChange(data)
+ .then((res) => {
+ this.$emit('submit', true);
+ })
+ .finally(() => (this.loading = false));
});
- that.$emit('submited', true);
- }else {
- fileUtil.getImageFiles(picUrls, function (files) {
- data.append('problemId', that.problemId);
+ } else {
+ fileUtil.getImageFiles(picUrls, (files) => {
+ data.append('problemId', this.problemId);
files.forEach((image) => {
data.append('images', image);
});
- problemApi.changeProblem(data).then((res) => {});
- that.$emit('submited', true);
+ problemApi
+ .changeProblem(data)
+ .then((res) => {
+ this.$emit('submit', true);
+ })
+ .finally(() => (this.loading = false));
});
}
},
@@ -214,48 +233,9 @@
}
},
handlePictureCardPreview(uploadFile) {
+ this.initialIndex = this.fileList.indexOf(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() {
@@ -266,24 +246,6 @@
// 瑙﹀彂鐐瑰嚮浜嬩欢
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;
}
}
};
@@ -312,4 +274,11 @@
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>
--
Gitblit v1.9.3