106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="state.visible"
|
|||
|
|
draggable
|
|||
|
|
append-to-body
|
|||
|
|
:title="title"
|
|||
|
|
width="50%"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
:close-on-press-escape="false"
|
|||
|
|
@close="onClose"
|
|||
|
|
>
|
|||
|
|
<div class="import-tips">
|
|||
|
|
<p>{{ tips }}</p>
|
|||
|
|
<el-button v-if="templateUrl" type="primary" icon="download" text @click="emit('on-download', templateUrl)">下载模板</el-button>
|
|||
|
|
</div>
|
|||
|
|
<el-upload ref="uploadRef" drag action="#" :show-file-list="true" accept=".xlsx,.xls" :limit="1" :http-request="onUploadExcel">
|
|||
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|||
|
|
<div class="el-upload__text">将文件放在此处或单击上传</div>
|
|||
|
|
<template #tip>
|
|||
|
|
<div class="el-upload__tip">仅允许导入xls、xlsx格式文件，excel文件大小小于500kb</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button type="primary" @click="onConfirm"> 确定导入</el-button>
|
|||
|
|
<el-button @click="onClose"> 取消</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
<script setup name="custom-import-excel">
|
|||
|
|
import { reactive, ref, shallowRef } from 'vue';
|
|||
|
|
import { isEmpty } from '@/utils';
|
|||
|
|
const props = defineProps({
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: '文件导入',
|
|||
|
|
},
|
|||
|
|
tips: {
|
|||
|
|
type: String,
|
|||
|
|
default: '提示：导入前请先下载模板填写信息，然后再导入！',
|
|||
|
|
},
|
|||
|
|
templateUrl: {
|
|||
|
|
type: [String, URL],
|
|||
|
|
default: '',
|
|||
|
|
},
|
|||
|
|
// options: {
|
|||
|
|
// type: Object,
|
|||
|
|
// default: () => {
|
|||
|
|
// return {
|
|||
|
|
// tips: '提示：导入前请先下载模板填写信息，然后再导入！',
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
});
|
|||
|
|
const emit = defineEmits(['on-confirm', 'on-close', 'on-download']);
|
|||
|
|
|
|||
|
|
const uploadRef = ref(null);
|
|||
|
|
const formDate = shallowRef(null);
|
|||
|
|
const state = reactive({
|
|||
|
|
visible: false,
|
|||
|
|
loading: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const onUploadExcel = ({ file }) => {
|
|||
|
|
if (isEmpty(file.name)) return;
|
|||
|
|
formDate.value = new FormData();
|
|||
|
|
formDate.value.append('file', file);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onConfirm = () => {
|
|||
|
|
emit('on-confirm', formDate.value);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onClose = () => {
|
|||
|
|
uploadRef?.value && uploadRef.value.clearFiles();
|
|||
|
|
state.visible = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
show: () => {
|
|||
|
|
formDate.value = null;
|
|||
|
|
state.visible = true;
|
|||
|
|
},
|
|||
|
|
hide: () => {
|
|||
|
|
onClose();
|
|||
|
|
},
|
|||
|
|
clear: () => {
|
|||
|
|
uploadRef?.value && uploadRef.value.clearFiles();
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.import {
|
|||
|
|
&-tips {
|
|||
|
|
@include flex-row;
|
|||
|
|
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #979797;
|
|||
|
|
p {
|
|||
|
|
flex: 3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|