From f37d45b8998ea08a42002579ecc103244bdac17b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 21 十一月 2024 11:06:56 +0800
Subject: [PATCH] Merge remote-tracking branch 'supervisionVue/hc-dataproduct-v1112' into lsf-dataproduct-1024
---
src/views/fysp/check/components/ComChangeEdit.vue | 220 ++++++++++++++++++++----------------------------------
1 files changed, 83 insertions(+), 137 deletions(-)
diff --git a/src/views/fysp/check/components/ComChangeEdit.vue b/src/views/fysp/check/components/ComChangeEdit.vue
index d456860..293da55 100644
--- a/src/views/fysp/check/components/ComChangeEdit.vue
+++ b/src/views/fysp/check/components/ComChangeEdit.vue
@@ -1,88 +1,84 @@
<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">淇濆瓨</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 CompGenericWrapper from './CompGenericWrapper.vue';
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: {
- ArbitraryPhoto,
- LedgerPic
+ CompGenericWrapper
},
watch: {
+ oldChangeFileList: {
+ handler(nv, ov) {
+ this.initParams();
+ },
+ immediate: true
+ },
fileList: {
handler(newFileList, oldFileList) {
this.pictureValidate();
@@ -112,6 +108,8 @@
},
data() {
return {
+ // 鍒濆鍥剧墖棰勮index
+ initialIndex: -1,
// 鍥剧墖閫夋嫨鏈�澶ф暟閲�
maxSelectImgCount: 3,
previewDialogImageUrl: '',
@@ -124,9 +122,7 @@
anyPhotoDialog: false
};
},
- mounted() {
- this.initParams();
- },
+ mounted() {},
methods: {
pictureValidate() {
if (this.changeType == 1 && this.fileList.length < 1) {
@@ -146,7 +142,7 @@
return true;
},
initParams() {
- if (this.changeType == 0) {
+ if (!this.changeType || this.changeType == 0) {
return;
}
let beforeEditImgList = [];
@@ -165,6 +161,9 @@
);
this.fileList = useCloned(beforeEditImgList).cloned.value;
this.oldFileList = useCloned(beforeEditImgList).cloned.value;
+ },
+ onCancel() {
+ this.$emit("cancel")
},
onSubmit() {
if (!this.pictureValidate()) {
@@ -205,7 +204,7 @@
problemApi.updateChange(data).then((res) => {});
});
- that.$emit('submited', true);
+ that.$emit('submit', true);
} else {
fileUtil.getImageFiles(picUrls, function (files) {
data.append('problemId', that.problemId);
@@ -213,7 +212,7 @@
data.append('images', image);
});
problemApi.changeProblem(data).then((res) => {});
- that.$emit('submited', true);
+ that.$emit('submit', true);
});
}
},
@@ -224,48 +223,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 +236,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;
}
}
};
@@ -323,6 +265,10 @@
height: 100%;
}
::v-deep .el-upload--picture-card {
- border: 0 !important;
+ display: none;
+}
+/* 闅愯棌el-upload涓婁紶鎴愬姛缁勪欢 */
+::v-deep .el-upload-list__item-status-label {
+ display: none !important;
}
</style>
--
Gitblit v1.9.3