<template>
|
<div v-loading="loading">
|
<el-upload class="upload-demo" drag action :http-request="doUpload" accept=".xls,.xlsx" :headers="uploadHeaders"
|
:show-file-list="false" :on-success="handleImportSuccess" :on-error="handleImportError"
|
:before-upload="beforeImportUpload">
|
<div>
|
<el-icon class="el-icon--upload" style="height: 40px; width: 40px;">
|
<upload-filled />
|
</el-icon>
|
<div class="el-upload__text">
|
{{ $t('message.DropFileHereOr') }} <em>{{ $t('message.ClickToUpload') }}</em>
|
</div>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">
|
{{ $t('message.FilesWithSizeLessThan') }} 2MB
|
</div>
|
</template>
|
</el-upload>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import * as elementplus from "element-plus";
|
import { getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs } from "vue";
|
import { useBasicInfoStore } from "@/store/basicInfo";
|
|
export default {
|
name: "FileUploadExt",
|
components: {},
|
props: {
|
method: null,
|
url: null,
|
successCallBack: null
|
},
|
setup(props) {
|
let { proxy } = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
staticDomain: WGURL.staticDomain,
|
uploadHeaders: [{ Authorization: localStorage.getItem('Authorization') }],
|
fileList: [],
|
resultFileList: [],
|
loading: false
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
|
};
|
const doUpload = (fileObject) => {
|
state.loading = true
|
let fd = new FormData()
|
fd.append('file', fileObject.file);
|
|
props.method(props.url, fd).then(resp => {
|
state.loading = false
|
if (resp.data && resp.data.code !== 200) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.' + resp.data.message)}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'error',
|
}
|
);
|
} else {
|
props.successCallBack()
|
}
|
});
|
};
|
const handleImportSuccess = (res, file) => {
|
|
};
|
const beforeImportUpload = (file) => {
|
const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
const isXls = file.type === 'application/vnd.ms-excel';
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isXlsx && !isXls) {
|
proxy.$message.error(proxy.$t('message.MSG_ERROR_UPLOAD_FILE_FORMAT_INVALID'));
|
}
|
if (!isLt2M) {
|
proxy.$message.error(proxy.$t('message.MSG_ERROR_UPLOAD_FILE_SIZE_INVALID'));
|
}
|
|
return true;
|
};
|
const handleImportError = (res, file) => {
|
proxy.$message.error(res);
|
};
|
|
return {
|
...toRefs(state),
|
props,
|
icon,
|
doUpload,
|
handleImportSuccess,
|
beforeImportUpload,
|
handleImportError,
|
}
|
},
|
}
|
</script>
|
|
<style scoped></style>
|
