useMessage.tsx_backup 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
  2. import { Modal, message as Message, notification } from 'ant-design-vue';
  3. import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
  4. import { NotificationArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
  5. import { useI18n } from './useI18n';
  6. import { isString } from '/@/utils/is';
  7. export interface NotifyApi {
  8. info(config: NotificationArgsProps): void;
  9. success(config: NotificationArgsProps): void;
  10. error(config: NotificationArgsProps): void;
  11. warn(config: NotificationArgsProps): void;
  12. warning(config: NotificationArgsProps): void;
  13. open(args: NotificationArgsProps): void;
  14. close(key: String): void;
  15. config(options: ConfigProps): void;
  16. destroy(): void;
  17. }
  18. export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
  19. export declare type IconType = 'success' | 'info' | 'error' | 'warning';
  20. export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
  21. iconType: 'warning' | 'success' | 'error' | 'info';
  22. }
  23. export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;
  24. interface ConfirmOptions {
  25. info: ModalFunc;
  26. success: ModalFunc;
  27. error: ModalFunc;
  28. warn: ModalFunc;
  29. warning: ModalFunc;
  30. }
  31. function getIcon(iconType: string) {
  32. try {
  33. if (iconType === 'warning') {
  34. return <InfoCircleFilled class="modal-icon-warning" />;
  35. } else if (iconType === 'success') {
  36. return <CheckCircleFilled class="modal-icon-success" />;
  37. } else if (iconType === 'info') {
  38. return <InfoCircleFilled class="modal-icon-info" />;
  39. } else {
  40. return <CloseCircleFilled class="modal-icon-error" />;
  41. }
  42. } catch (e) {
  43. console.log(e);
  44. }
  45. }
  46. function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
  47. try {
  48. if (isString(content)) {
  49. return <div innerHTML={`<div>${content as string}</div>`}></div>;
  50. } else {
  51. return content;
  52. }
  53. } catch (e) {
  54. console.log(e);
  55. return content;
  56. }
  57. }
  58. /**
  59. * @description: Create confirmation box
  60. */
  61. function createConfirm(options: ModalOptionsEx): ReturnType<ModalFunc> {
  62. const iconType = options.iconType || 'warning';
  63. Reflect.deleteProperty(options, 'iconType');
  64. const opt: ModalFuncProps = {
  65. centered: true,
  66. icon: getIcon(iconType),
  67. ...options,
  68. content: renderContent(options),
  69. };
  70. return Modal.confirm(opt);
  71. }
  72. const getBaseOptions = () => {
  73. const { t } = useI18n();
  74. return {
  75. okText: t('common.okText'),
  76. centered: true,
  77. };
  78. };
  79. function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOptionsPartial {
  80. return {
  81. ...getBaseOptions(),
  82. ...options,
  83. content: renderContent(options),
  84. icon: getIcon(icon),
  85. };
  86. }
  87. function createSuccessModal(options: ModalOptionsPartial) {
  88. return Modal.success(createModalOptions(options, 'success'));
  89. }
  90. function createErrorModal(options: ModalOptionsPartial) {
  91. return Modal.error(createModalOptions(options, 'close'));
  92. }
  93. function createInfoModal(options: ModalOptionsPartial) {
  94. return Modal.info(createModalOptions(options, 'info'));
  95. }
  96. function createWarningModal(options: ModalOptionsPartial) {
  97. return Modal.warning(createModalOptions(options, 'warning'));
  98. }
  99. notification.config({
  100. placement: 'topRight',
  101. duration: 3,
  102. });
  103. /**
  104. * @description: message
  105. */
  106. export function useMessage() {
  107. return {
  108. createMessage: Message,
  109. notification: notification as NotifyApi,
  110. createConfirm: createConfirm,
  111. createSuccessModal,
  112. createErrorModal,
  113. createInfoModal,
  114. createWarningModal,
  115. };
  116. }