plugin.ts
3.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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)
}
})
}