pqs-9100_client/frontend/src/components/ImportZip/index.vue

<template>
    <el-dialog v-model="dialogVisible" :title="parameter.title" :destroy-on-close="true" width="450px" draggable>
        <el-form class="drawer-multiColumn-form" label-width="100px">
            <el-form-item label="">
                <el-upload
                    ref="uploadRef"
                    action="#"
                    class="upload"
                    :http-request="uploadZip"
                    accept=".zip"
                    :auto-upload="!parameter.confirmMessage"
                    :on-change="handleChange"
                    :on-remove="handleRemove"
                >
                    <slot name="empty">
                        <el-icon class="el-icon--upload">
                            <upload-filled />
                        </el-icon>
                        <div class="el-upload__text">
                            <spam>点击上传</spam>
                        </div>
                    </slot>
                    <template #tip>
                        <slot name="tip">
                            <div class="el-upload__tip">请上传 .zip 标准格式文件</div>
                        </slot>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer v-if="parameter.confirmMessage">
            <el-button :disabled="disable" type="primary" @click="uploadSubmit">开始导入</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="ImportZip">
import { ref } from 'vue'
import type { UploadInstance, UploadProps, UploadRequestOptions } from 'element-plus'

export interface ZipParameterProps {
    title: string // 标题
    patternId?: string // 模式ID
    importApi?: (params: any) => Promise<any> // 批量导入的Api
    confirmMessage?: string // 提示信息
}
// dialog状态
const dialogVisible = ref(false)
const disable = ref(true)
const uploadRef = ref<UploadInstance>()

// 父组件传过来的参数
const parameter = ref<ZipParameterProps>({
    title: ''
})
const emit = defineEmits<{
    (e: 'result', data: boolean): void
}>()
// 接收父组件参数
const acceptParams = (params: ZipParameterProps) => {
    parameter.value = { ...parameter.value, ...params }
    dialogVisible.value = true
}

// 文件上传
const uploadZip = async (param: UploadRequestOptions) => {
    let zipFormData = new FormData()
    zipFormData.append('file', param.file)
    if (parameter.value.patternId) {
        zipFormData.append('patternId', parameter.value.patternId)
    }
    await parameter.value.importApi!(zipFormData).then(res => handleImportResponse(res))
}

const handleImportResponse = (res: any) => {
    if (res.code === 'A0000') {
        ElMessage.success('导入成功')
    } else {
        ElMessage.error(res.message)
    }
    dialogVisible.value = false
    emit('result', res.data)
}
const uploadSubmit = () => {
    if (!uploadRef.value) {
        return ElMessage.warning('请选择文件！')
    }
    ElMessageBox.confirm(parameter.value.confirmMessage, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            uploadRef.value?.submit()
        })
        .catch(() => {})
}
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
    disable.value = uploadFiles.length === 0
}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    disable.value = uploadFiles.length === 0
}
defineExpose({
    acceptParams
})
</script>
<style lang="scss" scoped>
@use './index.scss';
</style>