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

<template>
    <div class="mb-1 p-2">
        <span class="text-orange">按住鼠标拖动文件可进行附件列表排序</span>
    </div>
    <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"
        :show-file-list="false"
    >
        <!-- 使用file插槽自定义文件列表 -->
        <draggable
            v-model="fileListData"
            v-loading="pdfLoading"
            item-key="uid"
            handle=".drag-handle"
            class="file-list-container"
            @end="onDragEnd"
        >
            <template #item="{ element }">
                <div class="file-item">
                    <HcIcon name="drag-move-2" class="drag-handle cursor-move" />
                    <HcIcon name="file" class="file-icon" />
                    <span class="file-name cursor-pointer" @click="previewUrl(element)">{{ element.name }}</span>
                
                    <HcIcon 
                        name="close" 
                        class="float-right cursor-pointer text-red" 
                        @click.stop="handleRemove(element)" 
                    />
                </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" />
                <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" :loading="subLoading" @click="submitUpload">
            确认上传
        </el-button>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { getHeader } from 'hc-vue3-ui'
import wbsApi from '~api/data-fill/wbs'
import { isFileSize } from 'js-fast-way'
import { toPdfPage } from '~uti/btn-auth'
import draggable from 'vuedraggable'
const props = defineProps({
    fileList: {
        type: Array,
        default: () => ([]),
    },
    datas: {
        type: Object,
        default: () => ({}),
    },
    isCanupload:{
        type:Boolean,
        default:false,
    },
    action:{
        type:String,
        default:'#',
    },
    accept:{
        type:String,
        default:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword',
    },
    acceptTip:{
        type:String,
        default:'允许格式：pdf/excel/word， 文件大小 小于 60MB',
    },
    autoUpload:{
        type:Boolean,
        default:true,
    },
    typevalue:{
        type:[String, Number],
        default:'',
    }, //附件类型
    isListFile:{
        type:Boolean,
        default:false,
    }, //是否列表文件

})

//事件
const emit = defineEmits(['change', 'close'])
//变量
const uploadData = ref(props.datas)
const fileListData = ref(props.fileList)
const action = ref(props.action)
const accept = ref(props.accept)
const acceptTip = ref(props.acceptTip)
const uploadDisabled = ref(false)
const isCanuploadVal = ref(props.isCanupload)
const autoUpload = ref(props.autoUpload)
const typevalue = ref(props.typevalue)
const isListFile = ref(props.isListFile)


//监听
watch(() => [
    props.fileList,
    props.datas,
    props.isCanupload,
    props.action,
    props.accept,
    props.acceptTip,
    props.autoUpload,
    props.typevalue,
    props.isListFile,

], ([fileList, datas, isCanupload, Action, Accept, Tip, auto, type, list]) => {
    uploadData.value = datas
    fileListData.value = fileList
    isCanuploadVal.value = isCanupload
    action.value = Action
    accept.value = Accept
    acceptTip.value = Tip
    autoUpload.value = auto
    typevalue.value = type
    isListFile.value = list
})
watch(() => [
    props.typevalue,
    props.autoUpload,
], ([ type, auto]) => {
    typevalue.value = type
    autoUpload.value = auto
},
{ immediate: true },
)
watch(() => [
    props.typevalue,
  
], ([ type]) => {
    typevalue.value = type
  
      if (typevalue.value) {
          emit('change', { type: 'success' })
      }

},
{ immediate: true },
)
// 在watch中添加对fileList的深度监听
watch(() => props.fileList, (newVal) => {
  fileListData.value = [...newVal] // 使用新数组保证响应性
}, { deep: true, immediate: true })
//渲染完成
onMounted(() => {
    beforeFileNum.value = 0
    finishFileNum.value = 0
    errorFileNum.value = 0
})

//上传前
const beforeFileNum = ref(0)
const beforeUpload = async (file) => {
  console.log(file, '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!')
      
        console.log(fileListData.value, 'fileListData.value')
        
        return false
    }
}


//超出限制时
const uploadExceed = () => {
    window?.$message?.warning('请上传 jpg/png/pdf/excel/word 的文件，文件大小 不超过60M')
}
const q = 1 // 假设q是固定偏移量，可以根据需要调整
// 新增的处理方法
// 文件变化处理
const handleFileChange = async (file, fileList) => {
    if (!isFileSize(file?.size, 60)) {
        window?.$message?.warning('文件大小, 不能过60M!')
        return
    }
      fileListData.value = fileList.map((item, index) => ({
        ...item,
        sort: index + q, // 为每个文件添加sort字段
        url:'',
      }))

    fileListData.value = fileList.filter(file => {
      // 检查 size 属性是否存在且等于 60M，或者 size 属性不存在
      return (file.size !== undefined && isFileSize(file?.size, 60)) || file.size === undefined
    })
  

      
}
//上传文件前预览pdf
const pdfLoading = ref(false)
const getPdfUrl = async (arr) => {
      // 创建 FormData 对象
      const formData = new FormData()
    //   // 1. 添加多个文件（后端接收的是 files[] 数组）
      arr.forEach((file) => {
      if (file.raw !== undefined) {
          formData.append('file', file.raw) // 确保 file.raw 是 File 对象
        }
      })
      pdfLoading.value = true

      const { error, code, msg, data } = await wbsApi.previewBussfile(formData) // 修改这里
           pdfLoading.value = false
              if (!error && code === 200) {
                console.log(data, 'data')
                return data

                
               } else {
                window?.$message?.error(msg || '操作失败')

              }

}
// 拖拽结束事件
const onDragEnd = () => {
  // 更新排序号
  fileListData.value = fileListData.value.map((file, index) => ({
    ...file,
    sort: index + q,
  }))
}
// 手动删除文件
const handleRemove = (file) => {
  console.log('手动删除文件', file)
  
      delUploadData(file)
}
//上传中
const loadingText = ref('上传中...')
const uploadprogress = () => {
    loadingText.value = '上传中...'
    uploadDisabled.value = true
}

//上传完成
const finishFileNum = ref(0)
const uploadSuccess = () => {
    finishFileNum.value++
    if (beforeFileNum.value === finishFileNum.value) {
        uploadDisabled.value = false
        emit('change', { type: 'success' })
    }
}

//上传失败
const errorFileNum = ref(0)
const uploadError = () => {
    errorFileNum.value++
    window?.$message?.error('上传失败')
    const num = finishFileNum.value + errorFileNum.value
    if (beforeFileNum.value === num) {
        uploadDisabled.value = false
        emit('change', { type: 'success' })
    }
}

//预览
const uploadPreview = ({ url }) => {
    emit('close')
    toPdfPage(url)
    /*if (url) {
        window.open(url, '_blank')
    }*/
}
const previewUrl = async (item)=>{
    const pdfUrLArray = await getPdfUrl([item])

    item.url = pdfUrLArray[0]?.url || ''
    if (item.url) {
        toPdfPage(item.url)
    }
}
const uploadRef = ref(null)

// 删除文件
const delUploadData = async (file) => {
    const { id, status } = file
    console.log(file, 'file')
    
    if (!id || status === 'uploading') {
        // 如果id不存在或文件正在上传，直接删除文件
        const index = fileListData.value.findIndex(f => f.uid === file.uid)
        if (index !== -1) {
            fileListData.value.splice(index, 1)
        }
        uploadRef.value.abort()
        uploadDisabled.value = false
      
    } else {
        // 如果id存在且文件不在上传状态，调用接口删除文件
        loadingText.value = '删除中...'
        uploadDisabled.value = true
        // const { error, code, msg } = await (accept.value === 'application/pdf'
         const { error, code, msg } = await (!isListFile.value 
            ? wbsApi.delTabById({ ids: id })
            : wbsApi.removeBussFile({ ids: id }))
        uploadDisabled.value = false
        if (!error && code === 200) {
            window?.$message?.success('删除成功')
            // 从fileListData中移除已删除的文件
            const index = fileListData.value.findIndex(f => f.uid === file.uid)
            if (index !== -1) {
                fileListData.value.splice(index, 1)
            }
         
        } else {
            window?.$message?.error(msg || '操作失败')
           
        }
    }
       
}

const uploadRemove = () => {


    if (fileListData.value.length <= 0) {
        emit('change', { type: 'del' })
    }
}

const beforesubmitUpload = () => {
    if (!typevalue.value && !autoUpload.value && !isListFile.value) {
        window.$message.warning('请先选择附件类型')
        return
    } else {
        const uploadInput = uploadRef.value.$el.querySelector('input[type=file]')
        if (uploadInput) {
            uploadInput.click()
        }
    }



}
const subLoading = ref(false)
const submitUpload = async () => {
     
          if (fileListData.value.length === 0) {
            window.$message.warning('请先上传文件')
            return
          }

          // 确保所有文件都有 sort 参数
          fileListData.value = fileListData.value.map((file, index) => ({
            ...file,
            sort: index + q,
          }))

          // 创建 FormData 对象
          const formData = new FormData()
        //   // 1. 添加多个文件（后端接收的是 files[] 数组）
          fileListData.value.forEach((file) => {

            
          if (file.raw !== undefined) {
              formData.append('file', file.raw) // 确保 file.raw 是 File 对象
            }
          })
          function hasFileFields(formData) {
            for (let [key, value] of formData.entries()) {
                if (value instanceof File || value instanceof Blob) {
                    return true
                }
            }
            return false
        }
        if (hasFileFields(formData)) {
            console.log('formData 包含文件字段')
              subLoading.value = true
              if (isListFile.value) {
                        // 2. 添加其他参数
                  formData.append('classify', uploadData.value.classify)
                  formData.append('pkeyId', uploadData.value.pkeyId)
                  formData.append('nodeId', uploadData.value.nodeId)
                  formData.append('type', 2)
                  formData.append('contractId', uploadData.value.contractId)
                  formData.append('projectId', uploadData.value.projectId)
                  const { error, code, msg } = await wbsApi.addBussFile(formData) // 修改这里
                  uploadDisabled.value = false
                  subLoading.value = false
                  if (!error && code === 200) {
                    window?.$message?.success('上传成功') 
                  await sortFile()
                    emit('change', { type: 'success' })

                  } else if (code === 413) {
                      window?.$message?.error('上传文件过大，请上传小于60M的文件')
                  
                    } else {
                    window?.$message?.error(msg || '操作失败')

                  }
                } else {
                    // 2. 添加其他参数
                  formData.append('classify', uploadData.value.classify)
                  formData.append('nodeId', uploadData.value.nodeId)
                  formData.append('type', uploadData.value.type)
                  formData.append('contractId', uploadData.value.contractId)
                  const { error, code, msg } = await wbsApi.addBussFileNode(formData) // 修改这里
                        uploadDisabled.value = false
                        subLoading.value = false
                  if (!error && code === 200) {
                  window?.$message?.success('上传成功') 
                  await sortFile()
                      emit('change', { type: 'success' })

                    } else if (code === 413) {
                      window?.$message?.error('上传文件过大，请上传小于60M的文件')
                  
                    } else {
                      window?.$message?.error(msg || '操作失败')

                    }
                }

        } else {
            console.log('formData 不包含文件字段')
            // 处理没有文件字段的情况
            await sortFile()
              emit('change', { type: 'success' })
        }
    subLoading.value = false
}
//上传文件后排序
const sortFile = async ()=>{
  if (fileListData.value.length <= 0) {
    window.$message.warning('请先上传文件')
    return
  }
  let list = []
  fileListData.value.forEach((file) => {
    list.push(
      file.name,
  
    )
  })
  let obj1 = {
    list:list,
    id:uploadData.value.nodeId,
    contractId:uploadData.value.contractId,
    classify:uploadData.value.classify,
    type:uploadData.value.type,
   
 

  }
    let obj2 = {
    list:list,
  
    id:uploadData.value.pkeyId,
    contractId:uploadData.value.contractId,
    classify:uploadData.value.classify,
    projectId:uploadData.value.projectId,
    type:2,

  }
      const { error, code, msg } = await (isListFile.value
            ? wbsApi.addFileSort(obj2)
            : wbsApi.addFileSort(obj1))
        uploadDisabled.value = false
        if (!error && code === 200) {
            // window?.$message?.success('排序成功')
           
        } else {
            window?.$message?.error(msg || '操作失败')
            
        }
}
</script>

<style lang="scss">
.hc-upload-border1 .el-upload-dragger{
    padding: 0px;
}
.hc-upload-border1 .el-upload-dragger .el-upload__text{
    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>