go-view/src/utils/plugin.ts

import { icon } from '@/plugins'
import { DialogEnum } from '@/enums/pluginEnum'
import { dialogIconSize } from '@/settings/designSetting'
import { maskClosable } from '@/settings/designSetting'
import { DialogReactive } from 'naive-ui'
const { InformationCircleIcon } = icon.ionicons5
import { renderIcon } from '@/utils'

// * 开启加载
export const loadingStart = () => {
  window['$loading'].start()
}

// * 加载结束
export const loadingFinish = () => {
  setTimeout(() => {
    window['$loading'].finish()
  })
}

// * 加载错误
export const loadingError = () => {
  setTimeout(() => {
    window['$loading'].error()
  })
}

/**
 * * render 对话框
 * @param { Object} params 配置参数, 详见 https://www.naiveui.com/zh-CN/light/components/dialog
 * ```
 * 最简易的 demo
 * goDialog({
 *    onPositiveCallback: () => {}
 * })
 * ```
 */
 export const goDialog = (
  params: {
    // 基本
    type?: DialogEnum
    // 标题
    title?: string | (() => any)
    // 提示
    message?: string
    // 确定提示词
    positiveText?: string
    // 取消提示词
    negativeText?: string
    // 是否不展示取消按钮
    closeNegativeText?: boolean,
    // 点击遮罩是否关闭
    isMaskClosable?: boolean
    // 回调
    onPositiveCallback: Function
    onNegativeCallback?: Function
    // 异步
    promise?: boolean
    promiseResCallback?: Function
    promiseRejCallback?: Function
    [T:string]: any
  }
) => {
  const {
    type,
    title,
    message,
    positiveText,
    negativeText,
    closeNegativeText,
    isMaskClosable,
    onPositiveCallback,
    onNegativeCallback,
    promise,
    promiseResCallback,
    promiseRejCallback
  } = params

  const typeObj = {
    // 自定义
    [DialogEnum.DELETE]: {
      fn: window['$dialog'].warning,
      message: message || '是否删除此数据?'
    },
    // 原有
    [DialogEnum.WARNING]: {
      fn: window['$dialog'].warning,
      message: message || '是否执行此操作?'
    },
    [DialogEnum.ERROR]: {
      fn: window['$dialog'].error,
      message: message || '是否执行此操作?'
    },
    [DialogEnum.SUCCESS]: {
      fn: window['$dialog'].success,
      message: message || '是否执行此操作?'
    }
  }

  const dialog: DialogReactive = typeObj[type || DialogEnum.WARNING]['fn']({
    // 导入其余 NaiveUI 支持参数
    ...params,
    title: title || '提示',
    icon: renderIcon(InformationCircleIcon, { size: dialogIconSize }),
    content: typeObj[type || DialogEnum.WARNING]['message'],
    positiveText: positiveText || '确定',
    negativeText: closeNegativeText ? undefined : (negativeText || '取消'),
    // 是否通过遮罩关闭
    maskClosable: isMaskClosable || maskClosable,
    onPositiveClick: async () => {
      // 执行异步
      if (promise && onPositiveCallback) {
        dialog.loading = true
        try {
          const res = await onPositiveCallback()
          promiseResCallback && promiseResCallback(res)
        } catch (err) {
          promiseRejCallback && promiseRejCallback(err)
        }
        dialog.loading = false
        return
      }
      onPositiveCallback && onPositiveCallback(dialog)
    },
    onNegativeClick: async () => {
      onNegativeCallback && onNegativeCallback(dialog)
    }
  })
}