From f19e5267cc23b1c714dc746239864f33ed715dd9 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 05 十二月 2025 17:55:02 +0800
Subject: [PATCH] 完成地图制作任务功能初版
---
src/views/fysp/check/components/ComChangeEdit.vue | 258 +++++++++++++++++++++------------------------------
1 files changed, 107 insertions(+), 151 deletions(-)
diff --git a/src/views/fysp/check/components/ComChangeEdit.vue b/src/views/fysp/check/components/ComChangeEdit.vue
index d456860..b8be328 100644
--- a/src/views/fysp/check/components/ComChangeEdit.vue
+++ b/src/views/fysp/check/components/ComChangeEdit.vue
@@ -1,88 +1,83 @@
<template>
- <div>
- <div class="t-card_item">
- 鏁存敼鍥剧墖
- <div>
- <el-button @click="choseChangePic" :disabled="fileList.length >= 3">浠庢枃浠跺す閫夊彇</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/*"
- >
- <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>
+ <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();
@@ -112,6 +107,8 @@
},
data() {
return {
+ // 鍒濆鍥剧墖棰勮index
+ initialIndex: -1,
// 鍥剧墖閫夋嫨鏈�澶ф暟閲�
maxSelectImgCount: 3,
previewDialogImageUrl: '',
@@ -121,15 +118,15 @@
deleteImg: [],
ledgerPicDialog: false,
- anyPhotoDialog: false
+ anyPhotoDialog: false,
+
+ loading: false
};
},
- mounted() {
- this.initParams();
- },
+ mounted() {},
methods: {
pictureValidate() {
- if (this.changeType == 1 && this.fileList.length < 1) {
+ if (this.fileList.length < 1) {
ElMessage({
message: '鑷冲皯涓婁紶涓�寮犲浘鐗�',
type: 'error'
@@ -146,7 +143,7 @@
return true;
},
initParams() {
- if (this.changeType == 0) {
+ if (!this.changeType || this.changeType == 0) {
return;
}
let beforeEditImgList = [];
@@ -166,10 +163,15 @@
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 = [];
@@ -192,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);
+ 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));
});
}
},
@@ -224,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() {
@@ -276,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;
}
}
};
@@ -311,10 +263,10 @@
margin-bottom: 30px;
margin-left: 63px;
}
-::v-deep .el-dialog__body {
+:deep(.el-dialog__body) {
width: 95%;
}
-::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
+:deep(.el-upload-list--picture-card .el-upload-list__item-thumbnail) {
object-fit: cover !important;
}
.preview-pic {
@@ -322,7 +274,11 @@
width: 100%;
height: 100%;
}
-::v-deep .el-upload--picture-card {
- border: 0 !important;
+:deep(.el-upload--picture-card) {
+ display: none;
+}
+/* 闅愯棌el-upload涓婁紶鎴愬姛缁勪欢 */
+:deep(.el-upload-list__item-status-label) {
+ display: none !important;
}
</style>
--
Gitblit v1.9.3