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

b7c6bce5 · linjinhong · wusiyi · 36846b93 · b7c6bce5 · b7c6bce5
Commit b7c6bce5 authored Nov 28, 2025 by linjinhong Committed by wusiyi Dec 18, 2025
Show whitespace changes
Inline Side-by-side

Showing with 262 additions and 51 deletions

components.d.ts
+1 -0

src/api/axios.ts
+1 -1

src/components/uploadBox.vue
+171 -0

src/types/api/podUsOrder.ts
+2 -0

src/views/order/podUs/index.vue
+87 -50

No files found.
--- a/components.d.ts
+++ b/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']

--- a/src/api/axios.ts
+++ b/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'

--- a/src/components/uploadBox.vue
+++ b/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>
--- a/src/types/api/podUsOrder.ts
+++ b/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

--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -28,7 +28,6 @@
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="工艺">
          <LogisticsWaySelect
            v-model="searchForm.craftCode"
@@ -410,33 +409,26 @@
                  :loading="tifDownloadLoading"
                  @click="downloadTif('tiff', 42)"
                  >TIF(40+2cm)
-                </ElDropdownItem
+                </ElDropdownItem>
-                >
                <ElDropdownItem
                  :loading="tifDownloadLoading"
                  @click="downloadTif('tiff', 60)"
                  >TIF(60cm)
-                </ElDropdownItem
+                </ElDropdownItem>
-                >
                <ElDropdownItem
                  :loading="pngDownloadLoading"
                  @click="downloadTif('png', 42)"
                  >PNG(40+2cm)
-                </ElDropdownItem
+                </ElDropdownItem>
-                >
                <ElDropdownItem
                  :loading="pngDownloadLoading"
                  @click="downloadTif('png', 60)"
                  >PNG(60cm)
-                </ElDropdownItem
+                </ElDropdownItem>
-                >
              </ElDropdownMenu>
-            </template
+            </template>
-            >
+          </ElDropdown>
-          </ElDropdown
+        </ElFormItem>
-          >
-        </ElFormItem
-        >
        <!-- <ElFormItem
          v-if="
            status === 'PICKING' ||
@@ -836,7 +828,9 @@
            >
          </span>
        </ElFormItem>
-        <ElFormItem v-if="['WAIT_TRACK'].includes(status)  && waitTrackStatus === 5">
+        <ElFormItem
+          v-if="['WAIT_TRACK'].includes(status) && waitTrackStatus === 5"
+        >
          <span class="item">
            <ElButton type="success" @click="reissueOrder">补发</ElButton>
          </span>
@@ -1542,14 +1536,22 @@
              </div>
              <div class="order-detail-item">
                <span class="order-detail-item-label">订单来源:</span>
-                <span :class="{'red-big':row.source==='factory-reissue'}" class="order-detail-item-value">
+                <span
+                  :class="{ 'red-big': row.source === 'factory-reissue' }"
+                  class="order-detail-item-value"
+                >
                  {{
                    row.source
                      ? {
                          'jomall-erp': 'erp推送',
                          'third-party': '第三方推送',
                          'factory-reissue': '补发订单',
-                      }[row.source as 'jomall-erp' | 'third-party' | 'factory-reissue']
+                        }[
+                          row.source as
+                            | 'jomall-erp'
+                            | 'third-party'
+                            | 'factory-reissue'
+                        ]
                      : ''
                  }}
                </span>
@@ -1761,21 +1763,37 @@
          </template>
          <template #prn="{ row }">
            <div style="display: flex">
-              <span :title="fileName(row)" class="flex-1">{{ fileName(row) }}</span>
+              <span :title="fileName(row)" class="flex-1">{{
-              <el-link :disabled="row.isUpload" underline="never" type="success" @click="uploadFile(row)">上传</el-link>
+                fileName(row)
-              <el-icon v-if="row.isUpload" style="right: 0;top:5px;" class="is-loading"
+              }}</span>
+              <el-link
+                :disabled="row.isUpload"
+                underline="never"
+                type="success"
+                @click="uploadFile(row)"
+                >上传</el-link
              >
-                <Loading
+              <el-icon
-                />
+                v-if="row.isUpload"
+                style="right: 0; top: 5px"
+                class="is-loading"
+              >
+                <Loading />
              </el-icon>
              <el-link
-:disabled="!row.prnUrl" style="margin-left: 8px" underline="never" type="primary"
+                :disabled="!row.prnUrl"
-                       @click="downloadRowProFile(row)">下载
+                style="margin-left: 8px"
+                underline="never"
+                type="primary"
+                @click="downloadRowProFile(row)"
+                >下载
              </el-link>
-              <el-icon v-if="row.prnDownloadStatus" style="right: -2px" class="check-icon"
+              <el-icon
+                v-if="row.prnDownloadStatus"
+                style="right: -2px"
+                class="check-icon"
              >
-                <CircleCheckFilled
+                <CircleCheckFilled />
-                />
              </el-icon>
            </div>
          </template>
@@ -2045,8 +2063,7 @@
                        :title="item.name || ''"
                        style="margin-bottom: 2px"
                        >{{ item.name || '' }}
-                      </el-tag
+                      </el-tag>
-                      >
                    </div>
                  </template>
                  <div
@@ -2081,8 +2098,7 @@
                      size="small"
                      type="primary"
                      >+{{ cardItem.customTagList.slice(3).length }}
-                    </el-tag
+                    </el-tag>
-                    >
                  </div>
                </el-tooltip>
              </template>
@@ -2846,8 +2862,7 @@
          }
        "
        >取消
-      </el-button
+      </el-button>
-      >
      <el-button type="primary" @click="submitTypesetting">确认</el-button>
    </template>
  </ElDialog>
@@ -2890,12 +2905,22 @@
      <ElButton type="primary" @click="confirmReplenishment">确定</ElButton>
    </template>
  </ElDialog>
-  <ReissueOrderComponent ref="reissueOrderRef" :selection="selection" @success="handleSuccess"></ReissueOrderComponent>
+  <ReissueOrderComponent
+    ref="reissueOrderRef"
+    :selection="selection"
+    @success="handleSuccess"
+  ></ReissueOrderComponent>
+  <uploadBox
+    v-if="status === 'BATCH_DOWNLOAD'"
+    :uploadList="uploadList"
+  ></uploadBox>
 </template>
 <script setup lang="ts">
 import LogisticsWaySelect from '../../logistics/components/LogisticsWaySelect.tsx'
 import { getUserMarkList } from '@/api/common'
 // import { AnyObject } from '@/types/api/warehouse'
+import uploadBox from '@/components/uploadBox.vue'
 import { convertToChinaTime } from '@/utils/index'
 import {
  InfoFilled,
@@ -3034,7 +3059,7 @@ import {
 declare global {
  interface Window {
    ActiveXObject: {
-      new(type: string): XMLHttpRequest
+      new (type: string): XMLHttpRequest
    }
    VBS_BinaryToArray: {
      (data: unknown): { toArray(): number[] }
@@ -3054,7 +3079,8 @@ const sourceList = [
  {
    name: '第三方推送',
    id: 'third-party',
-  },{
+  },
+  {
    name: '补发订单',
    id: 'factory-reissue',
  },
@@ -3565,7 +3591,8 @@ const tableColumns = computed(() => {
        prop: 'automaticComposing',
        slot: 'automaticComposing',
        align: 'center',
-      }, {
+      },
+      {
        label: 'PRN文件',
        width: 300,
        prop: 'automaticComposing',
@@ -4168,15 +4195,12 @@ const productionClientVisible = ref(false)
 // }
 const downloadRowProFile = async (row: PodUsOrderListData) => {
-  const url =
+  const url = `https://factory.jomalls.com/upload/factory` + row.prnUrl
-    `https://factory.jomalls.com/upload/factory` + row.prnUrl
  window.open(url, '_blank')
-  await updatePRNDownloadStatus(
+  await updatePRNDownloadStatus(row.id)
-    row.id,
-  )
  search()
 }
+const uploadList = ref<PodUsOrderListData[]>([])
 const uploadFile = (row: PodUsOrderListData) => {
  const input = document.createElement('input')
  input.style.display = 'none'
@@ -4184,11 +4208,17 @@ const uploadFile = (row: PodUsOrderListData) => {
  input.multiple = false
  input?.click()
  row.isUpload = true
-  input.onchange = async function() {
+  input.onchange = async function () {
    try {
      if (input.files && input.files.length) {
+        uploadList.value.push(row)
        const fm = new FormData()
        fm.append('file', input.files?.[0])
+        row.fileName = input.files?.[0]?.name
+        // console.log(4219, input.files?.[0])
        const res = await uploadPRNFile(row.id, fm)
        row.prnUrl = res.message
      }
@@ -4196,6 +4226,12 @@ const uploadFile = (row: PodUsOrderListData) => {
      row.isUpload = false
    }
  }
+  input.oncancel = () => {
+    row.isUpload = false
+  }
+  if (input.parentNode) {
+    input.parentNode.removeChild(input)
+  }
 }
 const downloadTif = async (type: string, templateWidth: number) => {
@@ -6326,8 +6362,9 @@ const reissueOrder = async () => {
  if (selection.value.length === 0) {
    return ElMessage.warning('请选择数据')
  }
-  const isSameShipmentType = Array.from(new Set(selection.value.map(s=>s.shipmentType))).length===1
+  const isSameShipmentType =
-  if(!isSameShipmentType){
+    Array.from(new Set(selection.value.map((s) => s.shipmentType))).length === 1
+  if (!isSameShipmentType) {
    return ElMessage.warning('请选择相同物流类型的数据')
  }
  reissueOrderRef.value.open()
@@ -6883,8 +6920,8 @@ const printNormal = async () => {
 }
 .el-timeline
-> .el-timeline-item:first-child
+  > .el-timeline-item:first-child
-.el-timeline-item__timestamp.is-top {
+  .el-timeline-item__timestamp.is-top {
  color: #409eff;
 }
@@ -6921,7 +6958,7 @@ const printNormal = async () => {
  text-overflow: ellipsis;
  white-space: nowrap;
 }
-.red-big{
+.red-big {
  font-size: 15px;
  color: red;
 }