new_huozhou_frontend/src/views/projectLib/projectPlan/addPlanFile.vue

<template>
    <!-- 自定义表单 -->
    <!-- <el-divider content-position="left">模板表格文件下载</el-divider>
    <div style="padding-left: 40px;">
        <el-button slot="trigger" type="primary">下载模板</el-button>
    </div> -->
    <el-divider content-position="left">上传表格文件</el-divider>
    <el-form ref="importFormRef" >
        <el-form-item v-for=" (item, index) in dataTo.files" :key="index" :label="item" label-width="auto">
            <el-upload class="upload-demo" ref="upload" action :http-request="httpRequest"
                :before-upload="(file) => { return beforeUpload(file, item) }" :on-exceed="handleExceed" :limit="1"
                :on-remove="removeFile">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传{{ item }}且不超过500M</div>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitImportForm">开始导入</el-button>
            <el-button type="info" @click="dialogVisible">关闭窗口</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" name="uploadFile" setup>
import { reactive, defineProps, onMounted } from 'vue'
import { planUploadFile, planUploadModifyFile } from './projectPlan.api';
import { ElMessage } from 'element-plus'


let fileList = reactive<Array<any>>([]);
let dataTo = defineProps(["type", "files", "planinfoid"])
const emit = defineEmits(['close']);
//加载项目数据
onMounted(async () => {
    console.log("dataTo", dataTo)
})


function httpRequest(option) {
    fileList.push(option)
    console.log(fileList, option)
}
function removeFile(option) {
    for (let i = 0; i < fileList.length; i++) {
        if (fileList[i].file.name == option.name) {
            fileList.splice(i, 1)
        }
    }
    console.log(fileList, option)

}
// 上传前处理
function beforeUpload(file, item) {
    console.log("file,item", file, item)
    let fileSize = file.size
    const FIVE_M = 500 * 1024 * 1024;
    //大于5M，不允许上传
    if (fileSize > FIVE_M) {
        ElMessage.error("最大上传500M")
        return false
    }
    let geShi = ["xlx","xlsx", "docx", "doc", "pdf"] as Array<string>
    if (geShi.indexOf(file.name.substring(file.name.indexOf(".") + 1)) == -1) {
        ElMessage.error('文件格式错误！仅支持' + "xlx,xlsx, docx, doc, pdf");
        console.log('文件格式错误！仅支持' + "xlsx", "docx", "doc", "pdf")
        return false;
    }
    if (item.indexOf(file.name.substring(0,file.name.indexOf(".")))==-1) {
        ElMessage.error('请上传文件:' + item);
        return false;
    }
    console.log('文件上传成功')

    return true
}
// 文件数量过多时提醒
function handleExceed() {
    ElMessage.warning("最多只能上传一个文件")
}
//导入Excel病种信息数据
async function submitImportForm() {
    if (fileList.length == 0) {
        ElMessage({
            message: "未选择任何文件，无法上传！",
            type: "error"
        })
        return
    }
    // type ==0新增，type ==1 是修改
    if (fileList.length != dataTo.files.length && dataTo.type == 0) {
        ElMessage({
            message: "上传的文件不符合要求请检查",
            type: "error"
        })
        return
    }
    // // 使用form表单的数据格式
    const params = new FormData()
    // 将上传文件数组依次添加到参数paramsData中
    fileList.forEach((x) => {
        console.log("xxxxxxxxxx", x, x.file)
        params.append('file', x.file)
    });
    params.append("planinfoid", dataTo.planinfoid)
    if (dataTo.type == 0) {
        planUploadFile(params).then(() => {
            emit("close")
        })
    } else {
        planUploadModifyFile(params).then(() => {
            emit("close")
        })

    }

}
function dialogVisible() {
    emit("close")
}
</script>

<style></style>