上传文件排序

src/api/modules/data-fill/wbs.js

@@ -514,9 +514,22 @@ export default {
     //上传文件
         async addBussFileNode(form) {
         return HcApi({
+              headers: {
+            'Content-Type': 'multipart/form-data', 
+        },
             url: '/api/blade-manager/exceltab/add-bussfile-node',
             method: 'post',
             data: form,
         })
     },
+    async addBussFile(form) {
+        return HcApi({
+              headers: {
+            'Content-Type': 'multipart/form-data', 
+        },
+            url: '/api/blade-manager/exceltab/add-buss-file',
+            method: 'post',
+            data: form,
+        })
+    },
 }

src/views/data-fill/components/HcUpload.vue

@@ -10,9 +10,9 @@
         drag multiple
         :auto-upload="autoUpload"
         :on-change="handleFileChange"
+        :show-file-list="false"
     >
         <!-- 使用file插槽自定义文件列表 -->
-        <!-- 自定义可拖拽排序的文件列表 -->
         <draggable
             v-model="fileListData"
             item-key="uid"
@@ -22,9 +22,10 @@
         >
             <template #item="{ element }">
                 <div class="file-item">
-                    <HcIcon name="menu" class="drag-handle cursor-move" />
+                    <HcIcon name="drag-move-2" class="drag-handle cursor-move" />
                     <HcIcon name="file" class="file-icon" />
                     <span class="file-name">{{ element.name }}</span>
+                
                     <HcIcon 
                         name="close" 
                         class="float-right cursor-pointer text-red" 
@@ -33,7 +34,6 @@
                 </div>
             </template>
         </draggable>
-
         <template #trigger>
             <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading h-full" @click.stop="beforesubmitUpload">
                 <HcIcon name="backup" ui="text-5xl mt-4" />
@@ -48,7 +48,7 @@
         </template>
     </el-upload>
     <div class="mt-3" style="float: right;">
-        <el-button v-if="!autoUpload" type="primary" @click="submitUpload">
+        <el-button v-if="!autoUpload" type="primary" :loading="subLoading" @click="submitUpload">
             确认上传
         </el-button>
     </div>
@@ -94,6 +94,10 @@ const props = defineProps({
         type:[String, Number],
         default:'',
     }, //附件类型
+    isListFile:{
+        type:Boolean,
+        default:false,
+    }, //是否列表文件
 
 })
 
@@ -109,6 +113,7 @@ const uploadDisabled = ref(false)
 const isCanuploadVal = ref(props.isCanupload)
 const autoUpload = ref(props.autoUpload)
 const typevalue = ref(props.typevalue)
+const isListFile = ref(props.isListFile)
 
 
 //监听
@@ -121,8 +126,9 @@ watch(() => [
     props.acceptTip,
     props.autoUpload,
     props.typevalue,
+    props.isListFile,
 
-], ([fileList, datas, isCanupload, Action, Accept, Tip, auto, type]) => {
+], ([fileList, datas, isCanupload, Action, Accept, Tip, auto, type, list]) => {
     uploadData.value = datas
     fileListData.value = fileList
     isCanuploadVal.value = isCanupload
@@ -131,6 +137,7 @@ watch(() => [
     acceptTip.value = Tip
     autoUpload.value = auto
     typevalue.value = type
+    isListFile.value = list
 })
 watch(() => [
     props.typevalue,
@@ -144,8 +151,6 @@ watch(() => [
 
 // 在watch中添加对fileList的深度监听
 watch(() => props.fileList, (newVal) => {
-    console.log(newVal, 'newVal')
-    
   fileListData.value = [...newVal] // 使用新数组保证响应性
 }, { deep: true, immediate: true })
 //渲染完成
@@ -158,7 +163,7 @@ onMounted(() => {
 //上传前
 const beforeFileNum = ref(0)
 const beforeUpload = async (file) => {
-    console.log(file, 'file111111s')
+
     
     if (isFileSize(file?.size, 60)) {
         beforeFileNum.value++
@@ -183,13 +188,22 @@ const q = 1 // 假设q是固定偏移量，可以根据需要调整
 // 新增的处理方法
 // 文件变化处理
 const handleFileChange = (file, fileList) => {
-    console.log(fileList, 'fileList')
+
     
   fileListData.value = fileList.map((item, index) => ({
     ...item,
     sort: index + q, // 为每个文件添加sort字段
   }))
 }
+
+// 拖拽结束事件
+const onDragEnd = () => {
+  // 更新排序号
+  fileListData.value = fileListData.value.map((file, index) => ({
+    ...file,
+    sort: index + q,
+  }))
+}
 // 手动删除文件
 const handleRemove = (file) => {
   const index = fileListData.value.findIndex(f => f.uid === file.uid)
@@ -294,7 +308,7 @@ const uploadRemove = () => {
 }
 
 const beforesubmitUpload = () => {
-    if (!typevalue.value && !autoUpload.value) {
+    if (!typevalue.value && !autoUpload.value && !isListFile.value) {
         window.$message.warning('请先选择附件类型')
         return
     } else {
@@ -307,8 +321,9 @@ const beforesubmitUpload = () => {
 
 
 }
+const subLoading = ref(false)
 const submitUpload = async () => {
-  if (!typevalue.value && !autoUpload.value) {
+  if (!typevalue.value && !autoUpload.value && !isListFile.value) {
     window.$message.warning('请先选择附件类型')
     return
   }
@@ -321,13 +336,12 @@ const submitUpload = async () => {
 
   // 创建 FormData 对象
   const formData = new FormData()
-
-  // 1. 追加多个文件（后端接收 files: [二进制, 二进制, ...]）
+//   // 1. 添加多个文件（后端接收的是 files[] 数组）
   fileListData.value.forEach((file) => {
-    formData.append('files', file.raw || file) // 关键：使用相同的字段名 `files`
-  })
-
 
+    
+    formData.append('files', file.raw || file) // 确保 file.raw 是 File 对象
+  })
 
   // 2. 添加其他参数
   formData.append('classify', uploadData.value.classify)
@@ -336,21 +350,36 @@ const submitUpload = async () => {
   formData.append('contractId', uploadData.value.contractId)
 
   // 3. 发送请求
-  try {
-    const { error, code, msg } = await wbsApi.addBussFileNode(formData)
-    uploadDisabled.value = false
+ subLoading.value = true
+   if (isListFile.value) {
+    const { error, code, msg } = await wbsApi.addBussFile(formData) // 修改这里
+        uploadDisabled.value = false
+     subLoading.value = false
+    if (!error && code === 200) {
+      window?.$message?.success('上传成功') 
+      emit('change', { type: 'success' })
+
+    } else {
+      window?.$message?.error(msg || '操作失败')
 
+    }
+  } else {
+    const { error, code, msg } = await wbsApi.addBussFileNode(formData) // 修改这里
+        uploadDisabled.value = false
+        subLoading.value = false
     if (!error && code === 200) {
-      window?.$message?.success('上传成功') // 修改 "删除成功" → "上传成功"
-      return true
+      window?.$message?.success('上传成功') 
+      emit('change', { type: 'success' })
+
     } else {
       window?.$message?.error(msg || '操作失败')
-      return false
+
     }
-  } catch (err) {
-    window?.$message?.error('上传失败，请重试')
-    return false
   }
+
+ 
+
+ 
 }
 </script>
 
@@ -362,3 +391,81 @@ const submitUpload = async () => {
     padding: 40px;
 }
 </style>
+
+<style scoped>
+.file-list-container {
+  margin-top: 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #f9f9f9;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  margin: 6px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.file-item:hover {
+  background-color: #f5f7fa;
+  transform: translateY(-1px);
+}
+
+.drag-handle {
+  margin-right: 10px;
+  cursor: move;
+  color: #999;
+}
+
+.drag-handle:hover {
+  color: #409eff;
+}
+
+.file-icon {
+  margin-right: 10px;
+  color: #409eff;
+  font-size: 18px;
+}
+
+.file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.file-status {
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+.uploading-text {
+  color: #e6a23c;
+}
+
+.success-text {
+  color: #67c23a;
+}
+
+.fail-text {
+  color: #f56c6c;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+.hc-upload-border1 .el-upload-dragger{
+  padding: 0px;
+}
+.hc-upload-border1 .el-upload-dragger .el-upload__text{
+  padding: 40px;
+}
+</style>