This commit is contained in:
parent
30e62d2f0b
commit
eb158b7d68
|
|
@ -547,7 +547,7 @@ export default {
|
|||
handleUpdate(row) {
|
||||
this.flagTemp = 2;
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
// this.getTreeselect();
|
||||
const id = row.id;
|
||||
getAccessoryDetail(id).then((response) => {
|
||||
this.form = response.data;
|
||||
|
|
|
|||
|
|
@ -89,13 +89,17 @@
|
|||
上传
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<!-- 查看按钮 - 显示图片数量 -->
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="picturePreview(scope.row)"
|
||||
v-if="scope.row.bmFileInfos && scope.row.bmFileInfos.length > 0"
|
||||
>
|
||||
查看
|
||||
查看图片
|
||||
<span v-if="getImageCount(scope.row) > 0" style="margin-left: 2px; color: #409EFF;">
|
||||
({{ getImageCount(scope.row) }})
|
||||
</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -546,8 +550,98 @@
|
|||
</el-dialog>
|
||||
|
||||
<!-- 图片查看弹窗 -->
|
||||
<el-dialog :visible.sync="dialogVisible" width="500px" height="500px">
|
||||
<img width="100%" height="500px" :src="dialogImageUrl" />
|
||||
<!-- <el-dialog :visible.sync="dialogVisible" width="500px" height="500px">-->
|
||||
<!-- <img width="100%" height="500px" :src="dialogImageUrl" />-->
|
||||
<!-- </el-dialog>-->
|
||||
|
||||
<!-- 图片查看弹窗 - 支持多张图片切换 -->
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
height="600px"
|
||||
:close-on-click-modal="false"
|
||||
@closed="handlePreviewClose"
|
||||
>
|
||||
<div style="position: relative; height: 500px; background-color: #f5f5f5;">
|
||||
<!-- 图片显示区域 -->
|
||||
<img
|
||||
v-if="dialogImageUrl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:src="dialogImageUrl"
|
||||
style="object-fit: contain;"
|
||||
/>
|
||||
|
||||
<!-- 多图导航 - 当有多张图片时显示 -->
|
||||
<div
|
||||
v-if="previewImageFiles && previewImageFiles.length > 1"
|
||||
style="position: absolute; top: 50%; width: 100%; transform: translateY(-50%);"
|
||||
>
|
||||
<!-- 上一张按钮 -->
|
||||
<el-button
|
||||
circle
|
||||
size="mini"
|
||||
style="position: absolute; left: 10px; background: rgba(0,0,0,0.3); color: white;"
|
||||
@click="prevImage"
|
||||
>
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</el-button>
|
||||
|
||||
<!-- 下一张按钮 -->
|
||||
<el-button
|
||||
circle
|
||||
size="mini"
|
||||
style="position: absolute; right: 10px; background: rgba(0,0,0,0.3); color: white;"
|
||||
@click="nextImage"
|
||||
>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 图片计数器 -->
|
||||
<div
|
||||
v-if="previewImageFiles && previewImageFiles.length > 1"
|
||||
style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: white; padding: 5px 15px; border-radius: 15px; font-size: 14px;"
|
||||
>
|
||||
{{ previewFileIndex + 1 }} / {{ previewImageFiles.length }}
|
||||
</div>
|
||||
|
||||
<!-- 图片名称 -->
|
||||
<!-- <div-->
|
||||
<!-- v-if="previewImageFiles && previewImageFiles.length > 0 && previewImageFiles[previewFileIndex]"-->
|
||||
<!-- style="position: absolute; bottom: 40px; left: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.5); color: white; padding: 5px; font-size: 12px;"-->
|
||||
<!-- >-->
|
||||
<!-- {{ previewImageFiles[previewFileIndex].name }}-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<!-- 缩略图列表 -->
|
||||
<div
|
||||
v-if="previewImageFiles && previewImageFiles.length > 1"
|
||||
style="margin-top: 10px; padding: 10px; background-color: #f8f8f8; border-radius: 5px; max-height: 80px; overflow-x: auto; white-space: nowrap;"
|
||||
>
|
||||
<div
|
||||
v-for="(file, index) in previewImageFiles"
|
||||
:key="index"
|
||||
:style="{
|
||||
display: 'inline-block',
|
||||
margin: '0 5px',
|
||||
border: '2px solid',
|
||||
borderColor: previewFileIndex === index ? '#409EFF' : '#ddd',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
opacity: previewFileIndex === index ? 1 : 0.8,
|
||||
transition: 'all 0.3s'
|
||||
}"
|
||||
@click="previewFileIndex = index; dialogImageUrl = file.url;"
|
||||
>
|
||||
<img
|
||||
:src="file.url"
|
||||
:alt="file.name"
|
||||
style="width: 50px; height: 50px; object-fit: cover;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -827,6 +921,9 @@ export default {
|
|||
idsList:[],
|
||||
//一级页面传来的id
|
||||
taskIdTemp:undefined,
|
||||
previewRow: null, // 当前预览的行数据
|
||||
previewImageFiles: [], // 当前行的图片文件列表
|
||||
previewFileIndex: 0, // 当前预览的图片索引
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -842,9 +939,27 @@ export default {
|
|||
...mapState(["user"]),
|
||||
},
|
||||
methods: {
|
||||
// 重置表单方法
|
||||
resetForm(formName) {
|
||||
if (this.$refs[formName]) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
this.$emit("goBackPage");
|
||||
},
|
||||
// 计算行数据中的图片数量
|
||||
getImageCount(row) {
|
||||
if (!row.bmFileInfos || row.bmFileInfos.length === 0) return 0;
|
||||
|
||||
const imageFiles = row.bmFileInfos.filter(file => {
|
||||
const parts = file.name.split(".");
|
||||
const extension = parts.pop().toLowerCase();
|
||||
return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(extension);
|
||||
});
|
||||
|
||||
return imageFiles.length;
|
||||
},
|
||||
// 获取 任务详情数据
|
||||
async GetViewByApply() {
|
||||
console.log(this.repairRow);
|
||||
|
|
@ -1035,8 +1150,10 @@ export default {
|
|||
this.innerRowData = row;
|
||||
this.partTableList = [];
|
||||
if (this.innerRowData.partTableList && this.innerRowData.partTableList.length > 0) {
|
||||
this.partTableList = this.innerRowData.partTableList;
|
||||
this.partTableList = JSON.parse(JSON.stringify(this.innerRowData.partTableList));
|
||||
}
|
||||
// 重置配件选择器
|
||||
this.partTypeId = null;
|
||||
this.getPartTypeTreeData();
|
||||
this.openInner = true;
|
||||
},
|
||||
|
|
@ -1387,28 +1504,61 @@ export default {
|
|||
this.repairDeviceList[index].bmFileInfos;
|
||||
},
|
||||
//维修弹窗图片查看
|
||||
// 图片查看 - 支持多张图片预览（只处理图片）
|
||||
picturePreview(row) {
|
||||
// console.log(row);
|
||||
// console.log(row.bmFileInfos);
|
||||
// if (row.bmFileInfos.length > 0) {
|
||||
// let file = row.bmFileInfos[0];
|
||||
// this.dialogImageUrl = file.url;
|
||||
// const parts = file.name.split(".");
|
||||
// const extension = parts.pop();
|
||||
// if (
|
||||
// extension === "doc" ||
|
||||
// extension === "docx" ||
|
||||
// extension === "pdf"
|
||||
// ) {
|
||||
// const windowName = file.name;
|
||||
// window.open(file.url, windowName);
|
||||
// } else {
|
||||
// this.dialogVisible = true;
|
||||
// }
|
||||
// }
|
||||
console.log(file);
|
||||
this.dialogImageUrl = file.url.replaceAll('#','%23');
|
||||
this.dialogVisible = true;
|
||||
if (row.bmFileInfos && row.bmFileInfos.length > 0) {
|
||||
// 筛选出图片文件（只显示图片）
|
||||
const imageFiles = row.bmFileInfos.filter(file => {
|
||||
const parts = file.name.split(".");
|
||||
const extension = parts.pop().toLowerCase();
|
||||
return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(extension);
|
||||
});
|
||||
|
||||
// 如果没有图片，显示提示
|
||||
if (imageFiles.length === 0) {
|
||||
this.$message.info("没有可预览的图片文件");
|
||||
return;
|
||||
}
|
||||
|
||||
// 存储当前行和图片列表
|
||||
this.previewRow = row;
|
||||
this.previewImageFiles = imageFiles;
|
||||
this.previewFileIndex = 0;
|
||||
|
||||
// 显示第一张图片
|
||||
this.dialogImageUrl = imageFiles[0].url;
|
||||
this.dialogVisible = true;
|
||||
} else {
|
||||
this.$message.info("没有可预览的附件");
|
||||
}
|
||||
},
|
||||
|
||||
// 切换到上一张图片
|
||||
prevImage() {
|
||||
if (this.previewImageFiles && this.previewImageFiles.length > 0) {
|
||||
this.previewFileIndex--;
|
||||
if (this.previewFileIndex < 0) {
|
||||
this.previewFileIndex = this.previewImageFiles.length - 1;
|
||||
}
|
||||
this.dialogImageUrl = this.previewImageFiles[this.previewFileIndex].url;
|
||||
}
|
||||
},
|
||||
|
||||
// 切换到下一张图片
|
||||
nextImage() {
|
||||
if (this.previewImageFiles && this.previewImageFiles.length > 0) {
|
||||
this.previewFileIndex++;
|
||||
if (this.previewFileIndex >= this.previewImageFiles.length) {
|
||||
this.previewFileIndex = 0;
|
||||
}
|
||||
this.dialogImageUrl = this.previewImageFiles[this.previewFileIndex].url;
|
||||
}
|
||||
},
|
||||
// 预览弹窗关闭时的清理
|
||||
handlePreviewClose() {
|
||||
this.previewRow = null;
|
||||
this.previewImageFiles = [];
|
||||
this.previewFileIndex = 0;
|
||||
},
|
||||
// 图片上传
|
||||
handleChange(file, fileList) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue