Files
SmartOpsWeb/src/components/ImportExcel.vue

106 lines
2.3 KiB
Vue

<template>
<el-upload :file-list="[]"
:limit="maxSize"
with-credentials
:multiple="multiple"
:http-request="httpRequestHandle"
:data="uploadParams"
:auto-upload="true"
:show-file-list="false"
:before-upload="beforeUpload"
:on-remove="handleRemove"
>
<el-button color="#DED0B2" style="margin-left: 10px; margin-right: 10px;" :loading="loading" v-perm="['order:contacts:import']" :disabled="disabled">导入</el-button>
</el-upload>
</template>
<script setup>
import {ElMessageBox, ElNotification} from "element-plus";
import {getToken} from '@/utils/auth'
import axios from "axios";
const props = defineProps({
value: {
type: Array,
default: () => {
return []
}
},
maxSize: {
type: Number,
default: 30
},
disabled: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
})
const loading = ref(false)
const baseURL = import.meta.env.VITE_BASE_URL
const uploadFileUrl = ref(baseURL + "/contact/import")
const headers = reactive({
authorization: getToken()
})
const uploadParams = ref({})
const emit = defineEmits(["input", "getFile", "delete"])
const handleRemove = (file) => {
emit("delete", file.response.data.id)
}
const beforeUpload = () => {
loading.value = true
return true
}
const httpRequestHandle = (param) => {
// loading.value=true
let file = param.file
axios.post(uploadFileUrl.value, {
file: file
}, {
headers: {
'Content-Type': 'multipart/form-data',
...headers
}
}).then(res => {
loading.value=false
handleUploadSuccess(res)
}).catch(error => {
loading.value=false
uploadError(error)
})
}
const handleUploadSuccess = (res) => {
let data = res.data
ElNotification({
title: '提示',
message: data.code === 1000 ? '导入成功' : '导入失败',
type: data.code === 1000 ? 'success' : 'error'
})
emit("success")
}
const uploadError = (error) => {
loading.value = false
ElNotification({
title: '提示',
message: "导入失败,请稍后再试!",
type: 'error'
})
}
defineExpose({
handleRemove
})
</script>
<style lang="scss" scoped>
a {
font-size: 14px;
color: #2a99ff;
}
</style>