<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '@vben/common-ui';
|
import { downloadFileFromBlobPart } from '@vben/utils';
|
|
import { DatePicker, message } from 'ant-design-vue';
|
|
import { getRangePickerDefaultProps } from '#/utils';
|
|
/** 导出参数（后端 PageReqVO 以数组解析 inspectDate 起止） */
|
interface ExportParams {
|
inspectDate?: [string, string];
|
}
|
|
interface ExportModalData {
|
/** 弹窗标题 */
|
title?: string;
|
/** 模块导出函数：requestClient.download(...) 返回 Blob */
|
exportApi: (params: ExportParams) => Promise<Blob>;
|
/** 导出文件名 */
|
fileName: string;
|
}
|
|
defineOptions({ name: 'QcExportRangeModal' });
|
|
const rangePickerProps = getRangePickerDefaultProps();
|
|
const modalData = ref<ExportModalData>();
|
const range = ref<[string, string] | undefined>(undefined);
|
const exporting = ref(false);
|
const title = ref('导出');
|
|
const [Modal, modalApi] = useVbenModal({
|
async onConfirm() {
|
if (exporting.value) {
|
return;
|
}
|
const data = modalData.value;
|
if (!data) {
|
return;
|
}
|
exporting.value = true;
|
modalApi.lock();
|
try {
|
const params: ExportParams =
|
range.value && range.value.length === 2
|
? { inspectDate: range.value }
|
: {};
|
const blob = await data.exportApi(params);
|
downloadFileFromBlobPart({ fileName: data.fileName, source: blob });
|
message.success('导出成功');
|
await modalApi.close();
|
} finally {
|
exporting.value = false;
|
modalApi.unlock();
|
}
|
},
|
onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
modalData.value = undefined;
|
range.value = undefined;
|
return;
|
}
|
const data = modalApi.getData<ExportModalData>();
|
modalData.value = data;
|
range.value = undefined;
|
title.value = data?.title ?? '导出';
|
modalApi.setState({ confirmText: '导出' });
|
},
|
});
|
</script>
|
|
<template>
|
<Modal :title="title" class="w-2/5" :mask-closable="false">
|
<div class="px-1 py-3">
|
<div class="mb-2 text-sm font-medium text-gray-700">检验时间</div>
|
<DatePicker.RangePicker
|
v-model:value="range"
|
v-bind="rangePickerProps"
|
allow-clear
|
class="w-full"
|
/>
|
<div class="mt-2 text-xs text-gray-400">
|
不选时间则导出全部数据；导出按「检测日期」过滤
|
</div>
|
</div>
|
</Modal>
|
</template>
|
