feat: add message hook

xingyu
1 parent 0cb6dd58
Showing 8 changed files with 128 additions and 79 deletions
yudao-ui-admin-vue3/src/hooks/web/useMessage.ts
yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue
yudao-ui-admin-vue3/src/views/infra/codegen/index.vue
yudao-ui-admin-vue3/src/views/infra/fileConfig/index.vue
yudao-ui-admin-vue3/src/views/infra/job/index.vue
yudao-ui-admin-vue3/src/views/system/dept/index.vue
yudao-ui-admin-vue3/src/views/system/menu/index.vue
yudao-ui-admin-vue3/src/views/system/user/index.vue
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import { useI18n } from './useI18n'
+export const useMessage = () => {
+  const { t } = useI18n()
+  return {
+    // 消息提示
+    info(content: string) {
+      ElMessage.info(content)
+    },
+    // 错误消息
+    error(content: string) {
+      ElMessage.error(content)
+    },
+    // 成功消息
+    success(content: string) {
+      ElMessage.success(content)
+    },
+    // 警告消息
+    warning(content: string) {
+      ElMessage.warning(content)
+    },
+    // 弹出提示
+    alert(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'))
+    },
+    // 错误提示
+    alertError(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content: string) {
+      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'warning' })
+    },
+    // 通知提示
+    notify(content: string) {
+      ElNotification.info(content)
+    },
+    // 错误通知
+    notifyError(content: string) {
+      ElNotification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content: string) {
+      ElNotification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content: string) {
+      ElNotification.warning(content)
+    },
+    // 确认窗体
+    confirm(content: string, tip: string) {
+      return ElMessageBox.confirm(content, tip, {
+        confirmButtonText: t('common.ok'),
+        cancelButtonText: t('common.cancel'),
+        type: 'warning'
+      })
+    },
+    // 提交内容
+    prompt(content: string, tip: string) {
+      return ElMessageBox.prompt(content, tip, {
+        confirmButtonText: t('common.ok'),
+        cancelButtonText: t('common.cancel'),
+        type: 'warning'
+      })
+    }
+  }
+}
@@ -8,7 +8,8 @@ import type { ApiErrorLogVO } from &#39;@/api/infra/apiErrorLog/types&#39;
 import { allSchemas } from './apiErrorLog.data'
 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 const { t } = useI18n() // 国际化
 // ========== 列表相关 ==========
@@ -36,14 +37,11 @@ const handleDetail = (row: ApiErrorLogVO) =&gt; {
 }
 // 异常处理操作
 const handleProcessClick = (row: ApiErrorLogVO, processSttatus: number, type: string) => {
-  ElMessageBox.confirm('确认标记为' + type + '?', t('common.reminder'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
+  message
+    .confirm('确认标记为' + type + '?', t('common.reminder'))
     .then(async () => {
       ApiErrorLogApi.updateApiErrorLogPageApi(row.id, processSttatus).then(() => {
-        ElMessage.success(t('common.updateSuccess'))
+        message.success(t('common.updateSuccess'))
         getList()
       })
     })
@@ -10,7 +10,8 @@ import ImportTable from &#39;./components/ImportTable.vue&#39;
 import Preview from './components/Preview.vue'
 import download from '@/utils/download'
 import { useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 const { t } = useI18n() // 国际化
 const { push } = useRouter()
 // ========== 列表相关 ==========
@@ -37,14 +38,12 @@ const handleEditTable = (row: CodegenTableVO) =&gt; {
 const handleSynchDb = (row: CodegenTableVO) => {
   // 基于 DB 同步
   const tableName = row.tableName
-  ElMessageBox.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  }).then(async () => {
-    await CodegenApi.syncCodegenFromDBApi(row.id)
-    ElMessage.success('同步成功')
-  })
+  message
+    .confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
+    .then(async () => {
+      await CodegenApi.syncCodegenFromDBApi(row.id)
+      message.success('同步成功')
+    })
 }
 // 生成代码操作
 const handleGenTable = (row: CodegenTableVO) => {
 <script setup lang="ts">
 import { ref, unref } from 'vue'
 import dayjs from 'dayjs'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import { DICT_TYPE } from '@/utils/dict'
 import { useTable } from '@/hooks/web/useTable'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -9,6 +8,8 @@ import { FormExpose } from &#39;@/components/Form&#39;
 import type { FileConfigVO } from '@/api/infra/fileConfig/types'
 import { rules, allSchemas } from './fileConfig.data'
 import * as FileConfigApi from '@/api/infra/fileConfig'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 const { t } = useI18n() // 国际化
 // ========== 列表相关 ==========
@@ -49,16 +50,12 @@ const handleUpdate = async (row: FileConfigVO) =&gt; {
 // 主配置操作
 const handleMaster = (row: FileConfigVO) => {
-  ElMessageBox.confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
+  message
+    .confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'))
     .then(async () => {
       await FileConfigApi.updateFileConfigMasterApi(row.id)
       await getList()
     })
-    .catch(() => {})
 }
 // 提交按钮
@@ -69,10 +66,10 @@ const submitForm = async () =&gt; {
     const data = unref(formRef)?.formModel as FileConfigVO
     if (actionType.value === 'create') {
       await FileConfigApi.createFileConfigApi(data)
-      ElMessage.success(t('common.createSuccess'))
+      message.success(t('common.createSuccess'))
     } else {
       await FileConfigApi.updateFileConfigApi(data)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
     }
     // 操作成功，重新加载列表
     dialogVisible.value = false
@@ -9,8 +9,9 @@ import { useTable } from &#39;@/hooks/web/useTable&#39;
 import { useI18n } from '@/hooks/web/useI18n'
 import { FormExpose } from '@/components/Form'
 import { rules, allSchemas } from './job.data'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 const { t } = useI18n() // 国际化
 const { push } = useRouter()
 // ========== 列表相关 ==========
@@ -64,18 +65,11 @@ const handleJobLog = (row: JobVO) =&gt; {
 }
 // 执行一次
 const handleRun = (row: JobVO) => {
-  ElMessageBox.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
+  message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
+    await JobApi.runJobApi(row.id)
+    message.success('执行成功')
+    getList()
   })
-    .then(async () => {
-      JobApi.runJobApi(row.id).then(() => {
-        ElMessage.success('执行成功')
-        getList()
-      })
-    })
-    .catch(() => {})
 }
 // 提交按钮
 const submitForm = async () => {
@@ -85,10 +79,10 @@ const submitForm = async () =&gt; {
     const data = unref(formRef)?.formModel as JobVO
     if (actionType.value === 'create') {
       await JobApi.createJobApi(data)
-      ElMessage.success(t('common.createSuccess'))
+      message.success(t('common.createSuccess'))
     } else {
       await JobApi.updateJobApi(data)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
     }
     // 操作成功，重新加载列表
     dialogVisible.value = false
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElInput, ElCard, ElTree, ElTreeSelect, ElMessage, ElMessageBox } from 'element-plus'
+import { ElInput, ElCard, ElTree, ElTreeSelect } from 'element-plus'
 import { handleTree } from '@/utils/tree'
 import { onMounted, ref, unref, watch } from 'vue'
 import * as DeptApi from '@/api/system/dept'
 import { Form, FormExpose } from '@/components/Form'
 import { modelSchema } from './dept.data'
 import { DeptVO } from '@/api/system/dept/types'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 interface Tree {
   id: number
   name: string
@@ -60,14 +62,11 @@ const handleUpdate = async (data: { id: number }) =&gt; {
 }
 // 删除
 const handleDelete = async (data: { id: number }) => {
-  ElMessageBox.confirm(t('common.delDataMessage'), t('common.confirmTitle'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
+  message
+    .confirm(t('common.delDataMessage'), t('common.confirmTitle'))
     .then(async () => {
       await DeptApi.deleteDeptApi(data.id)
-      ElMessage.success(t('common.delSuccess'))
+      message.success(t('common.delSuccess'))
     })
     .catch(() => {})
   await getTree()
@@ -18,14 +18,14 @@ import {
   ElSelect,
   ElTreeSelect,
   ElOption,
-  ElMessageBox,
-  ElMessage,
   ElRadioGroup,
   ElRadioButton
 } from 'element-plus'
 import { MenuVO } from '@/api/system/menu/types'
 import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 const { t } = useI18n() // 国际化
 // ========== 创建菜单树结构 ==========
 const loading = ref(true)
@@ -111,14 +111,11 @@ const handleUpdate = async (row: MenuVO) =&gt; {
 }
 // 删除操作
 const handleDelete = async (row: MenuVO) => {
-  ElMessageBox.confirm(t('common.delDataMessage'), t('common.confirmTitle'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
+  message
+    .confirm(t('common.delDataMessage'), t('common.confirmTitle'))
     .then(async () => {
       await MenuApi.deleteMenuApi(row.id)
-      ElMessage.success(t('common.delSuccess'))
+      message.success(t('common.delSuccess'))
     })
     .catch(() => {})
   await getList()
@@ -137,20 +134,20 @@ const submitForm = async () =&gt; {
     ) {
       if (!isExternal(menuForm.value.path)) {
         if (menuForm.value.parentId === 0 && menuForm.value.path.charAt(0) !== '/') {
-          ElMessage.error('路径必须以 / 开头')
+          message.error('路径必须以 / 开头')
           return
         } else if (menuForm.value.parentId !== 0 && menuForm.value.path.charAt(0) === '/') {
-          ElMessage.error('路径不能以 / 开头')
+          message.error('路径不能以 / 开头')
           return
         }
       }
     }
     if (actionType.value === 'create') {
       await MenuApi.createMenuApi(menuForm.value)
-      ElMessage.success(t('common.createSuccess'))
+      message.success(t('common.createSuccess'))
     } else {
       await MenuApi.updateMenuApi(menuForm.value)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
     }
     // 操作成功，重新加载列表
     dialogVisible.value = false
@@ -3,7 +3,6 @@ import { onMounted, ref, unref, watch } from &#39;vue&#39;
 import dayjs from 'dayjs'
 import {
   ElInput,
-  ElMessage,
   ElCard,
   ElTree,
   ElTreeSelect,
@@ -14,7 +13,6 @@ import {
   ElUpload,
   ElSwitch,
   ElCheckbox,
-  ElMessageBox,
   UploadInstance,
   UploadRawFile
 } from 'element-plus'
@@ -32,6 +30,8 @@ import * as UserApi from &#39;@/api/system/user&#39;
 import download from '@/utils/download'
 import { CommonStatusEnum } from '@/utils/constants'
 import { getAccessToken, getTenantId } from '@/utils/auth'
+import { useMessage } from '@/hooks/web/useMessage'
+const message = useMessage()
 interface Tree {
   id: number
   name: string
@@ -127,10 +127,10 @@ const submitForm = async () =&gt; {
     data.postIds = postIds.value
     if (actionType.value === 'create') {
       await UserApi.createUserApi(data)
-      ElMessage.success(t('common.createSuccess'))
+      message.success(t('common.createSuccess'))
     } else {
       await UserApi.updateUserApi(data)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
     }
     // 操作成功，重新加载列表
     dialogVisible.value = false
@@ -142,16 +142,13 @@ const submitForm = async () =&gt; {
 // 改变用户状态操作
 const handleStatusChange = async (row: UserVO) => {
   const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
-  ElMessageBox.confirm('确认要"' + text + '""' + row.username + '"用户吗?', t('common.reminder'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
+  message
+    .confirm('确认要"' + text + '""' + row.username + '"用户吗?', t('common.reminder'))
     .then(async () => {
       row.status =
         row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.ENABLE : CommonStatusEnum.DISABLE
       await UserApi.updateUserStatusApi(row.id, row.status)
-      ElMessage.success(text + '成功')
+      message.success(text + '成功')
       await getList()
     })
     .catch(() => {
@@ -161,12 +158,9 @@ const handleStatusChange = async (row: UserVO) =&gt; {
 }
 // 重置密码
 const handleResetPwd = (row: UserVO) => {
-  ElMessageBox.prompt('请输入"' + row.username + '"的新密码', t('common.reminder'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel')
-  }).then(({ value }) => {
+  message.prompt('请输入"' + row.username + '"的新密码', t('common.reminder')).then(({ value }) => {
     UserApi.resetUserPwdApi(row.id, value).then(() => {
-      ElMessage.success('修改成功，新密码是：' + value)
+      message.success('修改成功，新密码是：' + value)
     })
   })
 }
@@ -207,8 +201,8 @@ const beforeExcelUpload = (file: UploadRawFile) =&gt; {
     file.type === 'application/vnd.ms-excel' ||
     file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
   const isLt5M = file.size / 1024 / 1024 < 5
-  if (!isExcel) ElMessage.error('上传文件只能是 xls / xlsx 格式!')
-  if (!isLt5M) ElMessage.error('上传文件大小不能超过 5MB!')
+  if (!isExcel) message.error('上传文件只能是 xls / xlsx 格式!')
+  if (!isLt5M) message.error('上传文件大小不能超过 5MB!')
   return isExcel && isLt5M
 }
 // 文件上传
@@ -224,7 +218,7 @@ const submitFileForm = () =&gt; {
 // 文件上传成功
 const handleFileSuccess = (response: any): void => {
   if (response.code !== 0) {
-    ElMessage.error(response.msg)
+    message.error(response.msg)
     return
   }
   importDialogVisible.value = false
@@ -242,15 +236,15 @@ const handleFileSuccess = (response: any): void =&gt; {
   for (const username in data.failureUsernames) {
     text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
   }
-  ElMessageBox.alert(text)
+  message.alert(text)
 }
 // 文件数超出提示
 const handleExceed = (): void => {
-  ElMessage.error('最多只能上传一个文件！')
+  message.error('最多只能上传一个文件！')
 }
 // 上传错误提示
 const excelUploadError = (): void => {
-  ElMessage.error('导入数据失败，请您重新上传！')
+  message.error('导入数据失败，请您重新上传！')
 }
 // ========== 初始化 ==========
 onMounted(async () => {