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

<template>
    <el-upload
        ref="uploadRef"
        :accept="accept" :action="action" :before-remove="delUploadData" :before-upload="beforeUpload"
        :data="uploadData"
        :disabled="isCanuploadVal" :file-list="fileListData" :headers="getTokenHeader()" :on-error="uploadError"
        :on-exceed="uploadExceed" :on-preview="uploadPreview" :on-progress="uploadprogress"
        :on-remove="uploadRemove" :on-success="uploadSuccess" class="hc-upload-border"
        drag multiple
        :auto-upload="autoUpload"
    >
        <template #trigger>
            <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading" @click="submitUpload">
                <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 ">
        <el-button v-if="!autoUpload" type="primary" @click="submitUpload">
            确认上传
        </el-button>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getTokenHeader } from '~src/api/request/header'
import wbsApi from '~api/data-fill/wbs'
import { isFileSize } from 'js-fast-way'
import { toPdfPage } from '~uti/btn-auth'
import { number } from 'echarts'

const props = defineProps({
    fileList: {
        type: Array,
        default: () => ([]),
    },
    datas: {
        type: Object,
        default: () => ({}),
    },
    isCanupload:{
        type:Boolean,
        default:false,
    },
    action:{
        type:String,
        default:'/api/blade-manager/exceltab/add-buss-file',
    },
    accept:{
        type:String,
        default:'image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword',
    },
    acceptTip:{
        type:String,
        default:'允许格式：jpg/png/pdf/excel/word， 文件大小 小于 60MB',
    },
    autoUpload:{
        type:Boolean,
        default:true,
    },
    typevalue:{
        type:[String, Number],
        default:'',
    }, //附件类型

})

//事件
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)


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

], ([fileList, datas, isCanupload, Action, Accept, Tip, auto, type]) => {
    uploadData.value = datas
    fileListData.value = fileList
    isCanuploadVal.value = isCanupload
    action.value = Action
    accept.value = Accept
    acceptTip.value = Tip
    autoUpload.value = auto
    typevalue.value = type
})

//渲染完成
onMounted(() => {
    beforeFileNum.value = 0
    finishFileNum.value = 0
    errorFileNum.value = 0
})

//上传前
const beforeFileNum = ref(0)
const beforeUpload = async (file) => {
    if (isFileSize(file?.size, 60)) {
        beforeFileNum.value++
        return true
    } else {
        window?.$message?.warning('文件大小, 不能过60M!')
        return false
    }
}

//超出限制时
const uploadExceed = () => {
    window?.$message?.warning('请上传 jpg/png/pdf/excel/word 的文件，文件大小 不超过60M')
}

//上传中
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 uploadRef = ref(null)
//删除文件
const delUploadData = async (res) => {
    const { id, status } = res

    if (accept.value === 'application/pdf') {
        if (!id || status === 'uploading') {
            uploadRef.value.abort()
            uploadDisabled.value = false
            return true
         } else {
            loadingText.value = '删除中...'
            uploadDisabled.value = true
            const { error, code } = await wbsApi.delTabById({
                ids: id,
            })
            uploadDisabled.value = false
            if (!error && code === 200) {
                window?.$message?.success('删除成功')
                return true
            } else {
                return false
            }
        }
        
    } else {
        if (!id || status === 'uploading') {
            uploadRef.value.abort()
            uploadDisabled.value = false
            return true
        } else {
            loadingText.value = '删除中...'
            uploadDisabled.value = true
            const { error, code } = await wbsApi.removeBussFile({
                ids: id,
            })
            uploadDisabled.value = false
            if (!error && code === 200) {
                window?.$message?.success('删除成功')
                return true
            } else {
                return false
            }
        }
      
    }
}

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

const submitUpload = () => {
    if (!typevalue.value && !autoUpload.value) {
        window.$message.warning('请先选择附件类型')
        return
    }

  uploadRef.value.submit()
}
</script>