admin-sjzx/src/views/system/icd/form.vue

<template>
    <el-dialog draggable width="400px" v-model="dialogVisible" :title="title">
        <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
            <el-form-item label="icd文件">
                <el-upload
                    v-model:file-list="reportPath"
                    ref="uploadRef"
                    action=""
                    :limit="1"
                    accept=".xml"
                    :on-exceed="handleExceed"
                    :auto-upload="false"
                    :on-remove="removeFile"
                    :on-change="choose"
                >
                    <template #trigger>
                        <el-button type="primary">上传文件</el-button>
                    </template>
                    <template #tip>
                        <div>请上传xml文件，文件名不能包含空格</div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue'
import { uploadFile } from '@/api/system-boot/file'
import { reactive } from 'vue'
import { UploadInstance, UploadProps, UploadRawFile, ElMessage, genFileId } from 'element-plus'
import { addIcdPath, updateIcdPath } from '@/api/device-boot/icd'

const emit = defineEmits(['submit'])
const dialogVisible = ref(false)
const title = ref('')
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
    fileName: '',
    filePath: '',
    id: ''
})
const reportPath: any = ref([])
const formRef = ref()
const rules = {
    path: [{ required: true, message: '请选择任务执行器', trigger: 'change' }],
    fileName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }]
}

const open = (text: string, data?: any) => {
    reportPath.value = []
    title.value = text
    dialogVisible.value = true
    if (data?.path) {
        reportPath.value = [
            {
                name: data?.path.split('/icd/')[1]
            }
        ]
    }
    form.fileName = data?.name
    form.id = data?.id
    form.filePath = data?.path
}
const uploadRef = ref()
/**
 * 选择待上传文件
 */
const choose = (e: any) => {
    const file = e.raw
    if (!isValidFile(file)) {
        uploadRef.value!.clearFiles()
        form.filePath = []
        return
    }
    form.filePath.file = file
}
/**
 * 文件校验函数
 */
const isValidFile = (file: UploadRawFile) => {
    const validExtensions = ['.xml']
    const fileExtension = file.name.slice(((file.name.lastIndexOf('.') - 1) >>> 0) + 2)
    if (!validExtensions.includes(`.${fileExtension}`)) {
        ElMessage.error('文件类型不支持，请选择 .xml')
        return false
    }

     // 检查文件名是否包含空格
    if (file.name.includes(' ')) {
        ElMessage.error('文件名不能包含空格，请重命名文件后再上传')
        return false
    }

    return true
}
// 上传报告

const handleExceed: UploadProps['onExceed'] = files => {


    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()

     // 检查文件名是否包含空格
    if (file.name.includes(' ')) {
        ElMessage.error('文件名不能包含空格，请重命名文件后再上传')
        return
    }
    

    uploadRef.value!.handleStart(file)
}

//移除文件上传
const removeFile = (file: any, uploadFiles: any) => {
    form.filePath = ''
}

const submit = async () => {

    if (reportPath.value.length == 0) {
        return ElMessage.warning('请上传icd文件')
    }
    if (reportPath.value[0]?.raw != undefined) {

         // 检查文件名是否包含空格
        if (reportPath.value[0].raw.name.includes(' ')) {
            ElMessage.error('文件名不能包含空格，请重命名文件后再上传')
            return
        }

        await uploadFile(reportPath.value[0].raw, '/icd/').then(res => {
            //治理工程验收报告
            form.fileName = res.data.fileName.split('.')[0]
            form.filePath = res.data.name
        })
    }

    if (title.value == '新增icd文件') {
        await addIcdPath(form).then(res => {
            ElMessage.success('新增成功!')
            dialogVisible.value = false
            emit('submit')
        })
    } else {
        await updateIcdPath(form).then(res => {
            ElMessage.success('编辑成功！')
            dialogVisible.value = false
            emit('submit')
        })
    }
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-upload-list__item) {
    width: 300px;
}
</style>