94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import { notification } from 'ant-design-vue';
|
||
import { downloadByUrl } from '@/utils/tools';
|
||
import { IconLoading } from '@arco-design/web-vue/es/icon';
|
||
|
||
|
||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||
import icon2 from '@/assets/img/media-account/icon-success.png';
|
||
import icon3 from "@/assets/img/media-account/icon-warn.png"
|
||
|
||
interface RenderNotificationData {
|
||
total_number: number;
|
||
success_number: number;
|
||
fail_number: number;
|
||
file?: string;
|
||
}
|
||
|
||
// 下载通知框
|
||
export function showExportNotification(label: string, others: { id?: string, duration?: number }) {
|
||
const { id = '', duration = 3 } = others ?? {}
|
||
notification.warning({
|
||
key: id,
|
||
icon: () => null,
|
||
message: () => null,
|
||
description: (
|
||
<div class="flex items-center pr-16px">
|
||
<IconLoading size={16} class="color-#6D4CFE mr-8px" />
|
||
<p class="text-14px lh-22px font-400 color-#211F24">{label}</p>
|
||
</div>
|
||
),
|
||
duration,
|
||
class: 'w-450px rounded-2px bg-#F0EDFF',
|
||
});
|
||
}
|
||
|
||
// 下载失败框
|
||
export function showFailExportNotification(label: string, others: { id?: string, duration?: number, onReDownload?: Function }) {
|
||
const { id = '', duration = 0, onReDownload } = others ?? {}
|
||
notification.warning({
|
||
key: id,
|
||
icon: () => null,
|
||
message: () => null,
|
||
description: (
|
||
<div class="flex items-center justify-between pr-16px">
|
||
<div class="flex items-center mr-10px">
|
||
<img src={icon3} width={16} height={16} class=" mr-8px" />
|
||
<p class="text-14px lh-22px font-400 color-#211F24 ">{label}</p>
|
||
</div>
|
||
|
||
<p class="text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={() => onReDownload?.()}>重新下载</p>
|
||
</div>
|
||
),
|
||
duration,
|
||
class: 'w-500px rounded-2px bg-#FFE9E7',
|
||
});
|
||
}
|
||
|
||
export const showImportResultNotification = (data: RenderNotificationData) => {
|
||
const { total_number, success_number, fail_number, file } = data;
|
||
const hasError = fail_number > 0;
|
||
const handleDownloadError = (file?: string) => {
|
||
file && downloadByUrl(file);
|
||
};
|
||
|
||
notification.warning({
|
||
icon: () => null,
|
||
message: () => null,
|
||
description: (
|
||
<div>
|
||
<div class="flex items-center mb-4px">
|
||
<img src={hasError ? icon1 : icon2} width="16" height="16" class="mr-8px" />
|
||
<span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
|
||
</div>
|
||
<p class="text-14px lh-22px font-400 color-#211F24">
|
||
共导入 {total_number} 个账号，导入成功 {success_number} 个
|
||
{hasError && (
|
||
<span>
|
||
，失败 <span class="color-#F64B31">{fail_number}</span> 个
|
||
</span>
|
||
)}
|
||
</p>
|
||
{hasError && (
|
||
<div
|
||
class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer"
|
||
onClick={() => handleDownloadError(file)}
|
||
>
|
||
下载问题表格
|
||
</div>
|
||
)}
|
||
</div>
|
||
),
|
||
duration: 3000,
|
||
class: `w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
|
||
});
|
||
}; |