<template>
|
<view class="attachment-container">
|
<!-- 头部操作区 -->
|
<view class="header-actions">
|
<wd-button
|
icon="file-add"
|
:round="false"
|
size="small"
|
custom-class="add_btn"
|
@click="addAttachment"
|
>
|
新增
|
</wd-button>
|
</view>
|
|
<!-- 附件列表 -->
|
<view class="attachment-list">
|
<wd-status-tip v-if="attachmentList.length === 0" image="content" tip="暂无附件" />
|
|
<wd-card
|
v-for="item in attachmentList"
|
:key="item.id"
|
type="rectangle"
|
custom-class="attachment-card"
|
:border="false"
|
>
|
<view class="attachment-item" @click="previewAttachment(item)">
|
<view class="attachment-info">
|
<view class="attachment-name">{{ item.bucketFileName || item.name }}</view>
|
<view class="attachment-meta">
|
<text class="file-type">{{ getFileType(item.bucketFileName) }}</text>
|
<text class="upload-time">{{ formatTime(item.createTime) }}</text>
|
</view>
|
</view>
|
<view class="attachment-actions">
|
<wd-icon name="delete" color="#ff4757" @click.stop="deleteAttachment(item.id)" />
|
</view>
|
</view>
|
</wd-card>
|
</view>
|
|
<wd-toast />
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from "vue";
|
import { useToast } from "wot-design-uni";
|
import AttachmentAPI from "@/api/product/attachment";
|
|
const toast = useToast();
|
|
// 页面参数
|
const reportId = ref("");
|
const reportType = ref("拉丝");
|
const attachmentList = ref<any[]>([]);
|
|
// 获取附件列表
|
const getAttachmentList = async () => {
|
try {
|
const pages = getCurrentPages();
|
const currentPage = pages[pages.length - 1];
|
const options = (currentPage as any).options;
|
const currentReportId = options?.reportId;
|
|
if (currentReportId) {
|
reportId.value = currentReportId;
|
|
// 直接调用通用查看接口查询附件列表
|
// 使用示例中的附件ID数组 [850,851]
|
const attachmentIds: number[] = [850, 851]; // 使用HTTP文件中的示例数据
|
|
const { data } = await AttachmentAPI.listAttachmentFiles(attachmentIds);
|
attachmentList.value = data || [];
|
} else {
|
attachmentList.value = [];
|
}
|
} catch (error) {
|
console.error("获取附件列表失败:", error);
|
toast.show("获取附件列表失败");
|
attachmentList.value = [];
|
}
|
};
|
|
// 新增附件
|
const addAttachment = () => {
|
uni.chooseFile({
|
count: 9, // 最多选择9个文件
|
type: "all", // 所有类型文件
|
success: async (res) => {
|
try {
|
toast.show("正在上传...");
|
|
// 上传文件
|
const filePaths = Array.isArray(res.tempFilePaths)
|
? res.tempFilePaths
|
: [res.tempFilePaths];
|
const uploadResults = await AttachmentAPI.uploadAttachmentFiles(filePaths);
|
|
// 提取附件ID
|
const attachmentIds = uploadResults.map((result) => result.data.id).join(",");
|
|
// 关联到报工
|
await AttachmentAPI.addOutputAttachments({
|
id: parseInt(reportId.value),
|
attachmentIds: attachmentIds,
|
});
|
|
toast.show("上传成功");
|
// 重新获取附件列表
|
await getAttachmentList();
|
} catch (error) {
|
console.error("上传失败:", error);
|
toast.show("上传失败");
|
}
|
},
|
fail: (error) => {
|
console.error("选择文件失败:", error);
|
toast.show("选择文件失败");
|
},
|
});
|
};
|
|
// 删除附件
|
const deleteAttachment = async (attachmentId: number) => {
|
try {
|
uni.showModal({
|
title: "确认删除",
|
content: "确定要删除这个附件吗？",
|
success: async (res) => {
|
if (res.confirm) {
|
// 前端手动删除：直接从列表中移除这条数据
|
attachmentList.value = attachmentList.value.filter((item) => item.id !== attachmentId);
|
|
// 获取剩余的附件ID组合
|
const remainingIds = attachmentList.value.map((item) => item.id);
|
const attachmentIds = remainingIds.join(",");
|
|
// 调用报工添加附件接口，更新附件关联
|
await AttachmentAPI.addOutputAttachments({
|
id: parseInt(reportId.value),
|
attachmentIds: attachmentIds,
|
});
|
|
toast.show("删除成功");
|
}
|
},
|
});
|
} catch (error) {
|
console.error("删除失败:", error);
|
toast.show("删除失败");
|
}
|
};
|
|
// 预览附件
|
const previewAttachment = (item: any) => {
|
// 根据文件类型进行预览
|
const fileName = item.bucketFileName || item.name;
|
const fileType = getFileType(fileName);
|
|
if (fileType.startsWith("image")) {
|
// 图片预览
|
uni.previewImage({
|
urls: [item.url],
|
current: item.url,
|
});
|
} else {
|
// 其他文件类型，可以下载或打开
|
uni.downloadFile({
|
url: item.url,
|
success: (res) => {
|
uni.openDocument({
|
filePath: res.tempFilePath,
|
success: () => {
|
console.log("打开文档成功");
|
},
|
fail: (error) => {
|
console.error("打开文档失败:", error);
|
toast.show("无法预览此文件类型");
|
},
|
});
|
},
|
fail: (error) => {
|
console.error("下载文件失败:", error);
|
toast.show("下载文件失败");
|
},
|
});
|
}
|
};
|
|
// 获取文件类型
|
const getFileType = (fileName: string) => {
|
if (!fileName) return "unknown";
|
const extension = fileName.split(".").pop()?.toLowerCase();
|
switch (extension) {
|
case "jpg":
|
case "jpeg":
|
case "png":
|
case "gif":
|
case "bmp":
|
case "webp":
|
return "image";
|
case "pdf":
|
return "pdf";
|
case "doc":
|
case "docx":
|
return "word";
|
case "xls":
|
case "xlsx":
|
return "excel";
|
case "ppt":
|
case "pptx":
|
return "powerpoint";
|
case "txt":
|
return "text";
|
case "zip":
|
case "rar":
|
return "archive";
|
default:
|
return "file";
|
}
|
};
|
|
// 格式化文件大小
|
const formatFileSize = (size: number) => {
|
if (size < 1024) return size + " B";
|
if (size < 1024 * 1024) return (size / 1024).toFixed(1) + " KB";
|
return (size / (1024 * 1024)).toFixed(1) + " MB";
|
};
|
|
// 格式化时间
|
const formatTime = (time: string) => {
|
const date = new Date(time);
|
return date.toLocaleString();
|
};
|
|
onMounted(() => {
|
getAttachmentList();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.attachment-container {
|
padding: 12px;
|
background: #f3f9f8;
|
min-height: 100vh;
|
}
|
|
.header-actions {
|
margin-bottom: 12px;
|
|
:deep(.add_btn) {
|
background: #0d867f;
|
color: white;
|
border: none;
|
}
|
}
|
|
.attachment-list {
|
.attachment-card {
|
margin-bottom: 12px;
|
border-radius: 4px;
|
}
|
}
|
|
.attachment-item {
|
display: flex;
|
align-items: center;
|
padding: 12px;
|
|
.attachment-info {
|
flex: 1;
|
|
.attachment-name {
|
font-size: 16px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 4px;
|
word-break: break-all;
|
}
|
|
.attachment-meta {
|
display: flex;
|
gap: 12px;
|
font-size: 12px;
|
color: #999;
|
}
|
}
|
|
.attachment-actions {
|
margin-left: 12px;
|
|
:deep(.wd-icon) {
|
font-size: 20px;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
