admin-sjzx/src/views/pqs/supervise/interfere/components/undocumented/addUpload.vue

<template>
    <el-form-item label="入网设计方案审查报告:">
        <el-upload
            v-model:file-list="form.NetReport"
            ref="NetReportRef"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'NetReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="治理工程验收报告:">
        <el-upload
            v-model:file-list="form.governReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'governReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="信息安全检测报告:">
        <el-upload
            v-model:file-list="form.informationSecurityTestReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'informationSecurityTestReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="验收检验报告单:">
        <el-upload
            v-model:file-list="form.acceptanceInspectionReportSingle"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'acceptanceInspectionReportSingle')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="验收检验报告:">
        <el-upload
            v-model:file-list="form.acceptanceInspectionReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'acceptanceInspectionReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="型式实验报告:">
        <el-upload
            v-model:file-list="form.typeExperimentReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'typeExperimentReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="出厂检验报告:">
        <el-upload
            v-model:file-list="form.factoryInspectionReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'factoryInspectionReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="性能检测报告:">
        <el-upload
            v-model:file-list="form.performanceTestReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'performanceTestReport')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="主接线图:">
        <el-upload
            v-model:file-list="form.mainWiringDiagram"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'mainWiringDiagram')"
            :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
    <el-form-item label="试运行报告:">
        <el-upload
            v-model:file-list="form.runTheReport"
            action=""
            accept=".doc,.docx,.xlsx,.xls,.pdf"
            :limit="1"
            @change="choose($event, 'runTheReport')"
            :auto-upload="false"
            :before-remove="beforeRemove('runTheReport', '1')"
        >
            <template #trigger>
                <el-button type="primary">上传文件</el-button>
            </template>
        </el-upload>
    </el-form-item>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { uploadFile, getFileNameAndFilePath } from '@/api/system-boot/file'
import { genFileId, ElMessage } from 'element-plus'
import type { UploadProps, UploadRawFile } from 'element-plus'
import { addOrUpdateFile, getFileById } from '@/api/supervision-boot/interfere/index'

const form: any = ref({
    NetReport: [], //入网设计方案审查报告：
    governReport: [], //治理工程验收报告
    informationSecurityTestReport: [], //信息安全检测报告
    acceptanceInspectionReportSingle: [], //信息安全检测报告
    acceptanceInspectionReport: [], //验收检验报告：
    typeExperimentReport: [], //型式实验报告
    factoryInspectionReport: [], //出厂检验报告：
    performanceTestReport: [], //性能检测报告
    mainWiringDiagram: [], //主接线图：
    runTheReport: [] //试运行报告
})

const formName: any = ref({
    NetReport: '',
    governReport: '',
    informationSecurityTestReport: '',
    acceptanceInspectionReportSingle: '',
    acceptanceInspectionReport: '',
    typeExperimentReport: '',
    factoryInspectionReport: '',
    performanceTestReport: '',
    mainWiringDiagram: '',
    runTheReport: ''
})

const beforeRemove = (name: any, flag?: string) => {
    console.log('🚀 ~ beforeRemove ~ flag:', flag)
    if (flag == '1') {
        console.log('🚀 ~ beforeRemove ~ name:', name)

        formName.value[name] = ''
    }
}

const choose = (e: any, name: string) => {
    uploadFile(e.raw, '/supervision/').then(res => {
        formName.value[name] = res.data.name
    })
}

const submitForm = async (id: string) => {
    // console.log(form.value)

    let data = []
    for (let i in formName.value) {
        data.push({
            supervisionId: id,
            name: i,
            url: formName.value[i],
            state: 1
        })
    }

    await addOrUpdateFile(data)
}
const queryFiles = (id: string) => {
    reset()
    getFileById({ id: id }).then(res => {
        res.data.forEach((item: any) => {
            if (item.url.length > 0) getFileNamePath(item.url, item.name)
        })
    })
}
const getFileNamePath = async (val: any, pathName: any) => {
    await getFileNameAndFilePath({ filePath: val }).then(res => {
        form.value[pathName] = [
            {
                name: res.data.fileName,
                url: res.data.url
            }
        ]
        setTimeout(() => {
            formName.value[pathName] = res.data.fileName
        }, 100)
    })
}
const reset = () => {
    form.value = {
        NetReport: [], //入网设计方案审查报告：
        governReport: [], //治理工程验收报告
        informationSecurityTestReport: [], //信息安全检测报告
        acceptanceInspectionReportSingle: [], //信息安全检测报告
        acceptanceInspectionReport: [], //验收检验报告：
        typeExperimentReport: [], //型式实验报告
        factoryInspectionReport: [], //出厂检验报告：
        performanceTestReport: [], //性能检测报告
        mainWiringDiagram: [], //主接线图：
        runTheReport: [] //试运行报告
    }

    formName.value = {
        NetReport: '',
        governReport: '',
        informationSecurityTestReport: '',
        acceptanceInspectionReportSingle: '',
        acceptanceInspectionReport: '',
        typeExperimentReport: '',
        factoryInspectionReport: '',
        performanceTestReport: '',
        mainWiringDiagram: '',
        runTheReport: ''
    }
}
defineExpose({ submitForm, queryFiles })
</script>
<style lang="scss" scoped>
.el-form-item__content > div:first-child {
    display: flex;
}
:deep(.el-upload-list) {
    margin: 0;
    .el-upload-list__item {
        height: 25px;
    }
    .el-upload-list__item-file-name {
        width: 150px !important;
        height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>