feat:批量下载页面添加上传列表

components.d.ts

@@ -73,6 +73,7 @@ declare module 'vue' {
     SplitDiv: typeof import('./src/components/splitDiv/splitDiv.vue')['default']
     'Switch ': typeof import('./src/components/Form/Switch .vue')['default']
     TableView: typeof import('./src/components/TableView.vue')['default']
+    UploadBox: typeof import('./src/components/uploadBox.vue')['default']
     UploadExcel: typeof import('./src/components/UploadExcel.vue')['default']
     UploadImage: typeof import('./src/components/UploadImage.vue')['default']
     WangEditor: typeof import('./src/components/WangEditor.vue')['default']

src/api/axios.ts

@@ -4,7 +4,7 @@ import { showError } from '@/utils/ui.ts'
 
 const axios = Axios.create({
   baseURL: import.meta.env.VITE_API_BASE,
-  timeout: 30 * 60 * 1000, //半小时
+  timeout: 60 * 60 * 1000, //半小时
 })
 
 const TOKEN_KEY = 'token'

src/components/uploadBox.vue

+<template>
+  <div class="upload-list-container">
+    <div class="list-header" @click="toggleFn">
+      <div>上传列表 ({{ props.uploadList.length || 0 }})</div>
+      <span
+        class="toggle-icon"
+        :style="{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(-180deg)' }"
+        >▼</span
+      >
+    </div>
+
+    <div class="list-content" :class="{ collapsed: !isExpanded }">
+      <div v-if="!props.uploadList.length" class="upload-item">
+        暂无上传任务
+      </div>
+
+      <div
+        v-else
+        v-for="(upload, index) in props.uploadList"
+        :key="index"
+        class="upload-item"
+      >
+        <div class="file-name" :title="upload.batchArrangeNum">
+          批次号：{{ upload.batchArrangeNum }}
+        </div>
+        <div class="file-name" :title="upload.fileName">
+          文件名：{{ upload.fileName }}
+        </div>
+        <div
+          class="file-status"
+          :class="{ success: !upload.isUpload, loading: upload.isUpload }"
+        >
+          {{ upload.isUpload ? '上传中' : '已上传' }}
+
+          <el-icon v-if="upload.isUpload" class="is-loading">
+            <Loading />
+          </el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PodUsOrderListData } from '@/types/api/podUsOrder'
+import { PropType } from 'vue'
+import { Loading } from '@element-plus/icons-vue'
+const props = defineProps({
+  uploadList: {
+    type: Array as PropType<PodUsOrderListData[]>,
+    default: () => [],
+  },
+})
+watch(
+  () => props.uploadList,
+  (value) => {
+    console.log(43, value)
+  },
+  { deep: true },
+)
+const isExpanded = ref(false)
+function toggleFn() {
+  isExpanded.value = !isExpanded.value
+}
+</script>
+<style lang="scss" scoped>
+.upload-list-container {
+  position: fixed;
+  right: 3%;
+  bottom: 30px;
+  width: 400px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  z-index: 100;
+}
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10px;
+  background: #4a6ee0;
+  color: white;
+  cursor: pointer;
+  user-select: none;
+}
+
+.list-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.toggle-icon {
+  font-size: 16px;
+  transition: transform 0.3s ease;
+}
+
+.list-header:hover {
+  background: #3a5bc7;
+}
+.list-content.collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+.list-content {
+  max-height: 300px;
+  overflow-y: auto;
+  transition: max-height 0.4s ease, opacity 0.3s ease;
+}
+
+.upload-item {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  align-items: center;
+  justify-content: space-between;
+  transition: background 0.2s;
+  gap: 10px;
+}
+
+.file-icon {
+  flex: 1;
+}
+
+.file-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #777;
+}
+.success {
+  color: #67c23a;
+}
+.loading {
+  color: #e6a23c;
+}
+.file-status {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.status-uploading {
+  background: #e1f0ff;
+  color: #0066cc;
+}
+.progress-bar {
+  height: 4px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+
+.progress {
+  height: 100%;
+  background: #4a6ee0;
+  width: 0%;
+  transition: width 0.3s ease;
+}
+</style>

src/types/api/podUsOrder.ts

@@ -94,6 +94,8 @@ export interface PodUsOrderListData {
   tiffUrl?: string | null
   lanshouAddress?: string | null
   customTagList?: { name: string }[]
+  batchArrangeNum?: string
+  fileName?: string
 }
 export interface ProductList {
   id: number