上传文件

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

@@ -511,4 +511,12 @@ export default {
             false,
         )
     },
+    //上传文件
+        async addBussFileNode(form) {
+        return HcApi({
+            url: '/api/blade-manager/exceltab/add-bussfile-node',
+            method: 'post',
+            data: form,
+        })
+    },
 }

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

@@ -1,31 +1,73 @@
 <template>
-    <el-upload
-        ref="uploadRef"
-        :accept="accept" :action="action" :before-remove="delUploadData" :before-upload="beforeUpload"
-        :data="uploadData"
-        :disabled="isCanuploadVal" :file-list="fileListData" :headers="getHeader()" :on-error="uploadError"
-        :on-exceed="uploadExceed" :on-preview="uploadPreview" :on-progress="uploadprogress"
-        :on-remove="uploadRemove" :on-success="uploadSuccess" class="hc-upload-border" :class="autoUpload === false ? 'hc-upload-border1' : 'hc-upload-border'"
-        drag multiple
-        :auto-upload="autoUpload"
-    >
-        <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" />
-                <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em></div>
-            </div>
-        </template>
+    <div>
+        <!-- 添加拖拽排序区域 -->
+        <draggable 
+            v-model="fileListData"
+            item-key="uid"
+            class="drag-area"
+            @end="onDragEnd"
+        >
+            <template #item="{ element }">
+                <div class="file-item">
+                    <div class="file-info">
+                        <HcIcon :name="getFileIcon(element.name)" ui="text-xl mr-2" />
+                        <span>{{ element.name }}</span>
+                    </div>
+                    <el-button 
+                        type="danger" 
+                        size="small" 
+                        circle 
+                        @click="handleRemove(element)"
+                    >
+                        <HcIcon name="delete" />
+                    </el-button>
+                </div>
+            </template>
+        </draggable>
 
-        <template #tip>
-            <div class="el-upload__tip" style="font-size: 14px;">
-                {{ acceptTip }}
-            </div>
-        </template>
-    </el-upload>
-    <div class="mt-3" style="float: right;">
-        <el-button v-if="!autoUpload" type="primary" @click="submitUpload">
-            确认上传
-        </el-button>
+        <!-- 原有的上传组件 -->
+        <el-upload
+            ref="uploadRef"
+            :accept="accept"
+            :action="action"
+            :before-remove="delUploadData"
+            :before-upload="beforeUpload"
+            :data="uploadData"
+            :disabled="isCanuploadVal"
+            :file-list="fileListData"
+            :headers="getHeader()"
+            :on-error="uploadError"
+            :on-exceed="uploadExceed"
+            :on-preview="uploadPreview"
+            :on-progress="uploadprogress"
+            :on-remove="uploadRemove"
+            :on-success="uploadSuccess"
+            class="hc-upload-border"
+            :class="autoUpload === false ? 'hc-upload-border1' : 'hc-upload-border'"
+            drag
+            multiple
+            :auto-upload="autoUpload"
+            :on-change="handleFileChange"
+        >
+            <!-- 原有的上传触发器 -->
+            <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" />
+                    <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em></div>
+                </div>
+            </template>
+            <template #tip>
+                <div class="el-upload__tip" style="font-size: 14px;">
+                    {{ acceptTip }}
+                </div>
+            </template>
+        </el-upload>
+    
+        <div class="mt-3" style="float: right;">
+            <el-button v-if="!autoUpload" type="primary" @click="submitUpload">
+                确认上传
+            </el-button>
+        </div>
     </div>
 </template>
 
@@ -52,7 +94,7 @@ const props = defineProps({
     },
     action:{
         type:String,
-        default:'/api/blade-manager/exceltab/add-buss-file',
+        default:'#',
     },
     accept:{
         type:String,
@@ -117,6 +159,13 @@ watch(() => [
 },
 { immediate: true },
 )
+
+// 在watch中添加对fileList的深度监听
+watch(() => props.fileList, (newVal) => {
+    console.log(newVal, 'newVal')
+    
+  fileListData.value = [...newVal] // 使用新数组保证响应性
+}, { deep: true, immediate: true })
 //渲染完成
 onMounted(() => {
     beforeFileNum.value = 0
@@ -129,6 +178,11 @@ const beforeFileNum = ref(0)
 const beforeUpload = async (file) => {
     if (isFileSize(file?.size, 60)) {
         beforeFileNum.value++
+        // 获取当前文件的索引
+        const fileIndex = fileListData.value.findIndex(f => f.raw === file.raw)
+        
+        // 设置uploadData中的sort参数
+        uploadData.value.sort = fileIndex + 1
         return true
     } else {
         window?.$message?.warning('文件大小, 不能过60M!')
@@ -140,7 +194,17 @@ const beforeUpload = async (file) => {
 const uploadExceed = () => {
     window?.$message?.warning('请上传 jpg/png/pdf/excel/word 的文件，文件大小 不超过60M')
 }
-
+const q = 1 // 假设q是固定偏移量，可以根据需要调整
+// 新增的处理方法
+// 文件变化处理
+const handleFileChange = (file, fileList) => {
+    console.log(fileList, 'fileList')
+    
+  fileListData.value = fileList.map((item, index) => ({
+    ...item,
+    sort: index + q, // 为每个文件添加sort字段
+  }))
+}
 //上传中
 const loadingText = ref('上传中...')
 const uploadprogress = () => {
@@ -182,7 +246,8 @@ const uploadRef = ref(null)
 //删除文件
 const delUploadData = async (res) => {
     const { id, status } = res
-
+    console.log(res, 'res')
+    
     if (accept.value === 'application/pdf') {
         if (!id || status === 'uploading') {
             uploadRef.value.abort()
@@ -229,6 +294,8 @@ const delUploadData = async (res) => {
 }
 
 const uploadRemove = () => {
+
+
     if (fileListData.value.length <= 0) {
         emit('change', { type: 'del' })
     }
@@ -248,12 +315,37 @@ const beforesubmitUpload = () => {
 
 
 }
-const submitUpload = ()=>{
-    if (!typevalue.value && !autoUpload.value) {
-        window.$message.warning('请先选择附件类型')
-        return
-    }
-    uploadRef.value.submit()
+const submitUpload = async ()=>{
+  if (!typevalue.value && !autoUpload.value) {
+    window.$message.warning('请先选择附件类型')
+    return
+  }
+  console.log( fileListData.value, ' fileListData.valu1111111e')
+  
+  // 确保所有文件都有sort参数
+  fileListData.value = fileListData.value.map((file, index) => ({
+    ...file,
+    sort: index + q,
+  }))
+  console.log(fileListData.value, ' fileListData.valu222222e')
+    // 准备文件数据（包含sort）
+  const filesWithSort = fileListData.value.map((file, index) => ({
+    file: file.raw || file, // 上传的文件对象
+    sort: index + q, // 计算sort值
+  }))
+          const { error, code, msg } = await wbsApi.addBussFileNode({
+                ...uploadData.value, // 原有的上传参数
+                files: filesWithSort, // 文件数组（含sort）
+            })
+            uploadDisabled.value = false
+            if (!error && code === 200) {
+                window?.$message?.success('删除成功')
+                return true
+            } else {
+                window?.$message?.error(msg || '操作失败')
+                return false
+            }
+//   uploadRef.value.submit()
 }
 </script>
 

src/views/data-fill/wbs.vue

@@ -1333,7 +1333,7 @@
                 :datas="uploadData"
                 :file-list="fileListData"
                 :is-canupload="false"
-                action="/api/blade-manager/exceltab/add-bussfile-node"
+                action="#"
                 accept="application/pdf"
                 accept-tip="允许格式：pdf"
                 :auto-upload="false"
@@ -3359,6 +3359,7 @@ const changeType = (val) => {
 //上传文件
 const uploadChange = async ({ type }) => {
     if (type === 'success') {
+        
         getBussFileList(primaryKeyId.value)
     } else if (type === 'del') {
         getBussFileList(primaryKeyId.value)