lingji-work-fe/src/utils/notification.tsx

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'}`,
  });
};