This commit is contained in:
hayu 2026-01-14 18:04:43 +08:00
parent 30e62d2f0b
commit eb158b7d68
2 changed files with 176 additions and 26 deletions

View File

@ -547,7 +547,7 @@ export default {
handleUpdate(row) { handleUpdate(row) {
this.flagTemp = 2; this.flagTemp = 2;
this.reset(); this.reset();
this.getTreeselect(); // this.getTreeselect();
const id = row.id; const id = row.id;
getAccessoryDetail(id).then((response) => { getAccessoryDetail(id).then((response) => {
this.form = response.data; this.form = response.data;

View File

@ -89,13 +89,17 @@
上传 上传
</el-button> </el-button>
</el-upload> </el-upload>
<!-- 查看按钮 - 显示图片数量 -->
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@click="picturePreview(scope.row)" @click="picturePreview(scope.row)"
v-if="scope.row.bmFileInfos && scope.row.bmFileInfos.length > 0" 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> </el-button>
</div> </div>
</template> </template>
@ -546,8 +550,98 @@
</el-dialog> </el-dialog>
<!-- 图片查看弹窗 --> <!-- 图片查看弹窗 -->
<el-dialog :visible.sync="dialogVisible" width="500px" height="500px"> <!-- <el-dialog :visible.sync="dialogVisible" width="500px" height="500px">-->
<img width="100%" height="500px" :src="dialogImageUrl" /> <!-- <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> </el-dialog>
</div> </div>
</template> </template>
@ -827,6 +921,9 @@ export default {
idsList:[], idsList:[],
//id //id
taskIdTemp:undefined, taskIdTemp:undefined,
previewRow: null, //
previewImageFiles: [], //
previewFileIndex: 0, //
}; };
}, },
mounted() { mounted() {
@ -842,9 +939,27 @@ export default {
...mapState(["user"]), ...mapState(["user"]),
}, },
methods: { methods: {
//
resetForm(formName) {
if (this.$refs[formName]) {
this.$refs[formName].resetFields();
}
},
goBack() { goBack() {
this.$emit("goBackPage"); 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() { async GetViewByApply() {
console.log(this.repairRow); console.log(this.repairRow);
@ -1035,8 +1150,10 @@ export default {
this.innerRowData = row; this.innerRowData = row;
this.partTableList = []; this.partTableList = [];
if (this.innerRowData.partTableList && this.innerRowData.partTableList.length > 0) { 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.getPartTypeTreeData();
this.openInner = true; this.openInner = true;
}, },
@ -1387,28 +1504,61 @@ export default {
this.repairDeviceList[index].bmFileInfos; this.repairDeviceList[index].bmFileInfos;
}, },
// //
// -
picturePreview(row) { picturePreview(row) {
// console.log(row); if (row.bmFileInfos && row.bmFileInfos.length > 0) {
// console.log(row.bmFileInfos); //
// if (row.bmFileInfos.length > 0) { const imageFiles = row.bmFileInfos.filter(file => {
// let file = row.bmFileInfos[0]; const parts = file.name.split(".");
// this.dialogImageUrl = file.url; const extension = parts.pop().toLowerCase();
// const parts = file.name.split("."); return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(extension);
// const extension = parts.pop(); });
// if (
// extension === "doc" || //
// extension === "docx" || if (imageFiles.length === 0) {
// extension === "pdf" this.$message.info("没有可预览的图片文件");
// ) { return;
// const windowName = file.name; }
// window.open(file.url, windowName);
// } else { //
// this.dialogVisible = true; this.previewRow = row;
// } this.previewImageFiles = imageFiles;
// } this.previewFileIndex = 0;
console.log(file);
this.dialogImageUrl = file.url.replaceAll('#','%23'); //
this.dialogVisible = true; 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) { handleChange(file, fileList) {