<script lang="ts" setup>
|
import type { FileType } from 'ant-design-vue/es/upload/interface';
|
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '#/packages/effects/common-ui/src';
|
import { downloadFileFromBlobPart } from '#/packages/utils/src';
|
|
import { Button, message, Switch, Upload } from 'ant-design-vue';
|
|
import { importAttendanceRecord, importAttendanceTemplate } from '#/api/hrm/attendance/record';
|
|
const emit = defineEmits(['success']);
|
|
const fileList = ref<FileType[]>([]);
|
const updateSupport = ref(false);
|
|
const [Modal, modalApi] = useVbenModal({
|
async onConfirm() {
|
if (fileList.value.length === 0) {
|
message.warning('请选择要导入的文件');
|
return;
|
}
|
modalApi.lock();
|
try {
|
await importAttendanceRecord(fileList.value[0] as File, updateSupport.value);
|
await modalApi.close();
|
emit('success');
|
message.success('导入成功');
|
} finally {
|
modalApi.unlock();
|
}
|
},
|
});
|
|
function beforeUpload(file: FileType) {
|
fileList.value = [file];
|
return false;
|
}
|
|
function handleRemove() {
|
fileList.value = [];
|
}
|
|
async function handleDownloadTemplate() {
|
const data = await importAttendanceTemplate();
|
downloadFileFromBlobPart({ fileName: '考勤导入模板.xls', source: data });
|
}
|
</script>
|
|
<template>
|
<Modal title="导入考勤记录" class="w-[500px]">
|
<div class="mx-4">
|
<Upload
|
:max-count="1"
|
accept=".xls,.xlsx"
|
:file-list="fileList"
|
:before-upload="beforeUpload"
|
@remove="handleRemove"
|
>
|
<Button type="primary">选择 Excel 文件</Button>
|
</Upload>
|
<div class="mt-4">
|
<span class="mr-2">是否覆盖已存在的数据：</span>
|
<Switch v-model:checked="updateSupport" />
|
</div>
|
<div class="mt-2 text-gray-500">
|
仅允许导入 xls、xlsx 格式文件
|
</div>
|
</div>
|
<template #prepend-footer>
|
<Button @click="handleDownloadTemplate">下载导入模板</Button>
|
</template>
|
</Modal>
|
</template>
|
