feat: 完成dialog动态封装

src/enums/pluginEnum.ts

@@ -0,0 +1,6 @@
+export enum DialogEnum {
+  delete = 'delete',
+  warning = 'warning',
+  error = 'error',
+  success = 'success'
+}

src/utils/plugin.ts

@@ -1,43 +1,85 @@
 import { icon } from '@/plugins'
+import { DialogEnum } from '@/enums/pluginEnum'
 import { dialogIconSize, maskClosable } from '@/settings/designSetting'
+import { DialogReactive } from 'naive-ui'
 const { InformationCircleIcon } = icon.ionicons5
 import { renderIcon } from '@/utils'
 
 /**
- * * render 弹出确认框
+ * * render 对话框
  * @param { Function } dialogFn dialog函数，暂时必须从页面传过来
  * @param { Object} params 配置参数
  */
- export const goDialog = (
+export const goDialog = (
-  dialogFn: Function,
   params: {
     // 基本
-    type: 'delete'
+    type: DialogEnum
     message?: string
+    // 回调
     onPositiveCallback?: Function
     onNegativeCallback?: Function
-    // 渲染函数
+    // 异步
-    render?: boolean
+    promise?: boolean
-    contentFn?: Function
+    promiseResCallback?: Function
-    actionFn?: Function
+    promiseRejCallback?: Function
-  }
+  },
+  dialogFn?: Function
 ) => {
-  const { type, message, onPositiveCallback, onNegativeCallback } = params
+  const {
-  const tip = {
+    type,
-    delete: '是否删除此数据'
+    message,
+    onPositiveCallback,
+    onNegativeCallback,
+    promise,
+    promiseResCallback,
+    promiseRejCallback
+  } = params
+
+  const typeObj = {
+    // 自定义
+    delete: {
+      fn: dialogFn || window['$dialog'].warning,
+      message: message || '是否删除此数据?'
+    },
+    // 原有
+    warning: {
+      fn: window['$dialog'].warning,
+      message: message || '是否执行此操作?'
+    },
+    error: {
+      fn: window['$dialog'].error,
+      message: message || '是否执行此操作?'
+    },
+    success: {
+      fn: window['$dialog'].success,
+      message: message || '是否执行此操作?'
+    }
   }
-  const instance = dialogFn({
+
+  const d: DialogReactive = (typeObj as any)[type]['fn']({
     title: '提示',
     icon: renderIcon(InformationCircleIcon, { size: dialogIconSize }),
-    content: message || tip[type] || '',
+    content: (typeObj as any)[type]['message'],
     positiveText: '确定',
     negativeText: '取消',
     maskClosable: maskClosable,
-    onPositiveClick: () => {
+    onPositiveClick: async () => {
-      onPositiveCallback && onPositiveCallback(instance)
+      // 执行异步
+      if (promise && onPositiveCallback) {
+        d.loading = true
+        try {
+          const res = await onPositiveCallback()
+          promiseResCallback && promiseResCallback(res)
+        } catch (err) {
+          promiseRejCallback && promiseRejCallback(err)
+        }
+        d.loading = false
+        return
+      }
+      onPositiveCallback && onPositiveCallback(d)
     },
-    onNegativeClick: () => {
+    onNegativeClick: async () => {
-      onNegativeCallback && onNegativeCallback(instance)
+      onNegativeCallback && onNegativeCallback(d)
     }
   })
-}
+}

src/views/project/items/components/Card/index.vue

@@ -4,7 +4,11 @@
       <div class="list-content">
         <!-- 顶部按钮 -->
         <n-space class="list-content-top">
-          <AppleControlBtn :hidden="['remove']" @close="deleteHanlde" @resize="resizeHandle" />
+          <AppleControlBtn
+            :hidden="['remove']"
+            @close="deleteHanlde"
+            @resize="resizeHandle"
+          />
         </n-space>
         <!-- 中间 -->
         <div class="list-content-img">
@@ -76,6 +80,8 @@ import { renderIcon, goDialog } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
 import { useMessage, useDialog } from 'naive-ui'
+import { DialogEnum } from '@/enums/pluginEnum'
+import { DialogReactive } from 'naive-ui'
 const {
   EllipsisHorizontalCircleSharpIcon,
   CopyIcon,
@@ -160,10 +166,13 @@ const requireUrl = (path: string, name: string) => {
 
 // 删除处理
 const deleteHanlde = () => {
-  goDialog(dialog.warning, {
+  goDialog({
-    type: 'delete',
+    type: DialogEnum.delete,
-    onPositiveCallback: () => {
+    promise: true,
-      message.success('删除成功')
+    onPositiveCallback: () =>
+      new Promise(res => setTimeout(() => res(1), 1000)),
+    promiseResCallback: (e: any) => {
+      window.$message.success('删除成功')
     }
   })
 }