From 883ab99ab021be1adc6dc5689368f899ea436e54 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 31 十月 2025 20:01:57 +0800
Subject: [PATCH] 完成
---
src/pages/routingInspection/upload.vue | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 359 insertions(+), 0 deletions(-)
diff --git a/src/pages/routingInspection/upload.vue b/src/pages/routingInspection/upload.vue
new file mode 100644
index 0000000..70e3ad0
--- /dev/null
+++ b/src/pages/routingInspection/upload.vue
@@ -0,0 +1,359 @@
+<template>
+ <view class="attachment-container">
+ <!-- 澶撮儴鎿嶄綔鍖� -->
+ <view class="header-actions">
+ <wd-button
+ icon="file-add"
+ :round="false"
+ size="small"
+ custom-class="add_btn"
+ @click="addAttachment"
+ v-if="isEdit"
+ >
+ 鏂板
+ </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" @click.stop v-if="isEdit">
+ <wd-icon name="delete" color="#ff4757" @click="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 props = defineProps({
+ detailData: { type: Object, default: () => ({}) },
+ isEdit: { type: Boolean, default: false },
+ deviceType: { type: String, default: "" },
+});
+
+const toast = useToast();
+const attachmentList =
+ props.deviceType == "1"
+ ? ref<any[]>(props.detailData.value.files || [])
+ : ref<any[]>(props.detailData.files || []);
+const attachmentIds =
+ props.deviceType == "1"
+ ? ref<string[]>(props.detailData.value.attachmentId || [])
+ : ref<string[]>(props.detailData.attachmentId || []);
+
+// 鏂板闄勪欢
+const addAttachment = () => {
+ // 鏄剧ず閫夋嫨鏂囦欢绫诲瀷鐨勫脊绐�
+ uni.showActionSheet({
+ itemList: ["閫夋嫨鍥剧墖", "閫夋嫨瑙嗛", "鎷嶇収", "褰曞儚"],
+ success: (res) => {
+ switch (res.tapIndex) {
+ case 0: // 閫夋嫨鍥剧墖
+ chooseImages();
+ break;
+ case 1: // 閫夋嫨瑙嗛
+ chooseVideos();
+ break;
+ case 2: // 鎷嶇収
+ takePhoto();
+ break;
+ case 3: // 褰曞儚
+ recordVideo();
+ break;
+ }
+ },
+ fail: (error) => {
+ console.error("閫夋嫨鏂囦欢绫诲瀷澶辫触:", error);
+ toast.show("閫夋嫨鏂囦欢绫诲瀷澶辫触");
+ },
+ });
+};
+
+// 閫夋嫨鍥剧墖
+const chooseImages = () => {
+ uni.chooseImage({
+ count: 9,
+ sizeType: ["original", "compressed"],
+ sourceType: ["album"],
+ success: async (res) => {
+ const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
+ await handleFileUpload(filePaths);
+ },
+ fail: (error) => {
+ console.error("閫夋嫨鍥剧墖澶辫触:", error);
+ toast.show("閫夋嫨鍥剧墖澶辫触");
+ },
+ });
+};
+
+// 閫夋嫨瑙嗛
+const chooseVideos = () => {
+ uni.chooseVideo({
+ sourceType: ["album"],
+ maxDuration: 60,
+ camera: "back",
+ success: async (res) => {
+ await handleFileUpload([res.tempFilePath]);
+ },
+ fail: (error) => {
+ console.error("閫夋嫨瑙嗛澶辫触:", error);
+ toast.show("閫夋嫨瑙嗛澶辫触");
+ },
+ });
+};
+
+// 鎷嶇収
+const takePhoto = () => {
+ uni.chooseImage({
+ count: 1,
+ sizeType: ["original", "compressed"],
+ sourceType: ["camera"],
+ success: async (res) => {
+ const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
+ await handleFileUpload(filePaths);
+ },
+ fail: (error) => {
+ console.error("鎷嶇収澶辫触:", error);
+ toast.show("鎷嶇収澶辫触");
+ },
+ });
+};
+
+// 褰曞儚
+const recordVideo = () => {
+ uni.chooseVideo({
+ sourceType: ["camera"],
+ maxDuration: 60,
+ camera: "back",
+ success: async (res) => {
+ await handleFileUpload([res.tempFilePath]);
+ },
+ fail: (error) => {
+ console.error("褰曞儚澶辫触:", error);
+ toast.show("褰曞儚澶辫触");
+ },
+ });
+};
+
+// 澶勭悊鏂囦欢涓婁紶
+const handleFileUpload = async (filePaths: string[]) => {
+ try {
+ toast.show("姝ｅ湪涓婁紶...");
+
+ // 涓婁紶鏂囦欢
+ const uploadResults: any = await AttachmentAPI.uploadAttachmentFiles(filePaths);
+ const result = uploadResults.map((it: any) => {
+ return it.data;
+ });
+ console.log("result", result);
+
+ // 鏇存柊闄勪欢鍒楄〃
+ const flattenedResult = result.flat();
+ attachmentList.value.push(...flattenedResult);
+ console.log(attachmentList.value);
+
+ // 鎻愬彇闄勪欢ID
+ attachmentIds.value = attachmentList.value.map((item: any) => item.id);
+ toast.show("涓婁紶鎴愬姛");
+ console.log("111", attachmentIds.value.attachmentId);
+ } catch (error) {
+ console.error("涓婁紶澶辫触:", error);
+ toast.show("涓婁紶澶辫触");
+ }
+};
+
+// 鍒犻櫎闄勪欢
+const deleteAttachment = async (aid: number) => {
+ try {
+ uni.showModal({
+ title: "纭鍒犻櫎",
+ content: "纭畾瑕佸垹闄よ繖涓檮浠跺悧锛�",
+ success: async (res) => {
+ if (res.confirm) {
+ // 鍓嶇鎵嬪姩鍒犻櫎锛氱洿鎺ヤ粠鍒楄〃涓Щ闄よ繖鏉℃暟鎹�
+ attachmentList.value = attachmentList.value.filter((item) => item.id !== aid);
+
+ // 鑾峰彇鍓╀綑鐨勯檮浠禝D缁勫悎
+ attachmentIds.value = attachmentList.value.map((item) => item.id).join(",");
+ toast.show("鍒犻櫎鎴愬姛");
+ }
+ },
+ });
+ console.log("111", attachmentIds.value.attachmentId);
+ } 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();
+};
+// 瀵瑰鏆撮湶鏂规硶锛氳幏鍙栨墍鏈夐渶鎻愪氦鐨勬枃浠�
+const getSubmitFiles = () => ({
+ newFiles: attachmentIds.value || [],
+});
+defineExpose({ getSubmitFiles });
+</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>
--
Gitblit v1.9.3