feat: 统一修改ElMessage.confirm的样式

src/hooks/useFormConfigHook.ts

@@ -16,8 +16,9 @@ import { ref, reactive } from 'vue';
 import type { FormRules } from 'element-plus';
 import { cloneDeep, isEqual } from 'lodash-es';
 import { onBeforeRouteLeave } from 'vue-router';
-import { ElMessageBox } from 'element-plus';
 import type { FormConfig } from '@/types/basic-form';
+import { msgConfirm } from '@/utils/element-plus/messageBox';
+
 export const useFormConfigHook = <T extends Record<string, any> = Record<string, any>>(
   config: FormConfig[],
   data: T,
@@ -41,7 +42,7 @@ export const useFormConfigHook = <T extends Record<string, any> = Record<string,
         return;
       }
       setTimeout(() => {
-        ElMessageBox.confirm('当前页面存在修改，是否确认离开当前页面？', '提示', {
+        msgConfirm('当前页面存在修改，是否确认离开当前页面？', '提示', {
           confirmButtonText: '确认',
           cancelButtonText: '取消',
           customClass: 'customMessageBox--warn',

src/layout/components/SwitchTenant.vue

@@ -15,12 +15,12 @@
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  import { ElMessageBox, ElMessage } from 'element-plus';
   import { queryListTenant } from '@/api/tenant';
   import { useTargetTenantIdSetting } from '@/utils/useTargetTenantIdSetting';
   import { replaceParams } from '@/utils/helper/treeHelper';
   import router from '@/router';
   import { useRoute } from 'vue-router';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   interface TenantOption {
     label: string;
@@ -56,24 +56,17 @@
 
   /* 选择租户添加二次确认弹窗 */
   const handleChange = (targetTenantId: string) => {
-    ElMessageBox.confirm('是否切换租户？', '提示', {
+    msgConfirm('是否切换租户？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
-    })
-      .then(async () => {
-        setValue(targetTenantId);
-        currentTenant.value = Number(targetTenantId);
-        // 统一返回首页
-        await router.push('/');
-        window.location.reload();
-      })
-      .catch(() => {
-        ElMessage({
-          type: 'info',
-          message: '取消切换',
-        });
-      });
+    }).then(async () => {
+      setValue(targetTenantId);
+      currentTenant.value = Number(targetTenantId);
+      // 统一返回首页
+      await router.push('/');
+      window.location.reload();
+    });
   };
 </script>
 <style scoped>

src/styles/custom-component.scss

@@ -52,30 +52,31 @@ $message-box-content-padding--icon: 36px;
   }
 }
 
-.customMessageBox--default {
+ .customMessageBox--default {
   @extend .customMessageBox;
   .el-message-box__content {
     padding-left: $message-box-content-padding--default;
   }
 }
 
-.customMessageBox--weak {
-  @extend .customMessageBox--icon;
+ 
+.customMessageBox--primary {
+   @extend .customMessageBox--icon;
   .el-message-box__title::before {
-    background-image: url('@/assets/images/message-box/weak@1X.png');
+    background-image: url('@/assets/images/message-box/primary@1X.png');
   }
 }
 
-.customMessageBox--warn {
+.customMessageBox--warning {
   @extend .customMessageBox--icon;
   .el-message-box__title::before {
-    background-image: url('@/assets/images/message-box/warn@1X.png');
+    background-image: url('@/assets/images/message-box/warning@1X.png');
   }
 }
 
-.customMessageBox--strong {
+.customMessageBox--error {
   @extend .customMessageBox--icon;
   .el-message-box__title::before {
-    background-image: url('@/assets/images/message-box/strong@1X.png');
+    background-image: url('@/assets/images/message-box/error@1X.png');
   }
 }

src/utils/element-plus/messageBox.ts

@@ -0,0 +1,26 @@
+import { ElMessageBox, ElMessageBoxOptions } from 'element-plus';
+
+export const openMessageBox = (content: string, title: string, type: 'default' | ElMessageBoxOptions['type']) => {
+  return ElMessageBox.confirm(content, title, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    customClass: `customMessageBox--${type}`,
+  })
+    .then(() => {
+      return true;
+    })
+    .catch(() => {
+      return false;
+    });
+};
+
+/** UI定制化样式的confirm方法，和elmessage.confirm一样的参数 */
+export const msgConfirm = (content: string, title: string, options: ElMessageBoxOptions) => {
+  const { type, ...otherOptions } = options;
+  return ElMessageBox.confirm(content, title, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    customClass: `customMessageBox--${type}`,
+    ...otherOptions,
+  });
+};

src/utils/http/axios/index.ts

@@ -18,6 +18,7 @@ import { RequestOptions, Result, CreateAxiosOptions } from './types';
 
 import { useUserStore, useUserStoreWidthOut } from '@/store/modules/user';
 import urlJoin from 'url-join';
+import { msgConfirm } from '@/utils/element-plus/messageBox';
 
 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix || '';
@@ -83,7 +84,7 @@ const transform: AxiosTransform = {
         ElMessage.error(errorMsg || errorMessageText || '操作失败！');
       } else if (!hasSuccess && options.errorMessageMode === 'modal') {
         // errorMessageMode=‘custom-modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
-        ElMessageBox.confirm(message, '提示', {
+        msgConfirm(message, '提示', {
           confirmButtonText: '确定',
           showCancelButton: false,
           type: 'warning',
@@ -226,7 +227,7 @@ const transform: AxiosTransform = {
         return;
       }
       if (err && err.includes('Network Error')) {
-        ElMessageBox.confirm('请检查您的网络连接是否正常', '网络异常', {
+        msgConfirm('请检查您的网络连接是否正常', '网络异常', {
           confirmButtonText: '确定',
           showCancelButton: false,
           type: 'warning',

src/views/disaster/components/UploadFiles.vue

@@ -48,7 +48,9 @@
 <script lang="ts" setup>
   import { ref, computed, nextTick, watch } from 'vue';
   import { UploadFilled, Delete } from '@element-plus/icons-vue';
-  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ElMessage } from 'element-plus';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
+
   import { FILE_TYPE_ICON } from '../constant';
   import type { FileItem } from '../types';
   const props = defineProps<{
@@ -190,10 +192,8 @@
   };
 
   const removeFile = (id: number) => {
-    ElMessageBox.confirm('确定删除该文件吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      customClass: 'customMessageBox--warn',
+    msgConfirm('确定删除该文件吗？', '提示', {
+      type: 'warning',
     }).then(() => {
       const index = fileList.value.findIndex((item) => item.fileId === id);
       if (index !== -1) {

src/views/disaster/disaster-control/PageDisposalManagement.vue

@@ -215,11 +215,10 @@
   import Empty from 'assets/images/empty@1X.png';
   import ViewDocument from './src/svg/view-document.svg';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
-  import { useMessageBox } from '@/views/disaster/hooks/messageBox';
+  import { openMessageBox } from '@/utils/element-plus/messageBox';
   import { ElMessage } from 'element-plus';
 
   const { permissions } = useUserInfoHook();
-  const { openMessageBox } = useMessageBox();
   const firstLevelDepts = ref<DeptTreeItem[]>([]);
   const searchData = reactive({
     reportDeptIds: null,
@@ -383,7 +382,7 @@
   };
 
   const handleBatchRelease = async (id: number) => {
-    const confirmed = await openMessageBox('', '确定发布吗？', 'warn');
+    const confirmed = await openMessageBox('', '确定发布吗？', 'warning');
     if (!confirmed) return;
     await publishDisasterHandleTask(id);
     ElMessage.success('发布成功');
@@ -391,7 +390,7 @@
   };
 
   const handleBatchWithdraw = async (id: number) => {
-    const confirmed = await openMessageBox('', '确定撤回吗？', 'warn');
+    const confirmed = await openMessageBox('', '确定撤回吗？', 'warning');
     if (!confirmed) return;
     await withdrawDisasterHandleTask(id);
     ElMessage.success('撤回成功');
@@ -399,7 +398,7 @@
   };
 
   const handleBatchDelete = async (id: number) => {
-    const confirmed = await openMessageBox('', '确定删除吗？', 'warn');
+    const confirmed = await openMessageBox('', '确定删除吗？', 'warning');
     if (!confirmed) return;
     await deleteDisasterHandleTask(id);
     ElMessage.success('删除成功');

src/views/disaster/disaster-precaution/PageTaskManagement.vue

@@ -128,10 +128,9 @@
   import type { QueryPageRequest } from '@/types/disaster';
   import { DISASTER_PERMISSIONS } from '@/views/disaster/constant';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
-  import { useMessageBox } from '@/views/disaster/hooks/messageBox';
+  import { openMessageBox } from '@/utils/element-plus/messageBox';
 
   const { permissions } = useUserInfoHook();
-  const { openMessageBox } = useMessageBox();
   const router = useRouter();
   const searchData = reactive({
     inspectType: '',
@@ -177,7 +176,7 @@
     isBatchDelete.value = Boolean(selectionItems.value.length === publishIds.length);
   };
   const handleBatchPublish = async () => {
-    const confirmed = await openMessageBox('', '确认发布任务吗？', 'warn');
+    const confirmed = await openMessageBox('', '确认发布任务吗？', 'warning');
     if (!confirmed) return;
     const publishIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
     try {
@@ -188,7 +187,7 @@
     }
   };
   const handleBatchWithdraw = async () => {
-    const confirmed = await openMessageBox('', '确认撤回已发布任务吗？', 'warn');
+    const confirmed = await openMessageBox('', '确认撤回已发布任务吗？', 'warning');
     if (!confirmed) return;
     const withdrawIds = getSelectionIds(ACTIVE_STATUS.ACTIVE);
     try {
@@ -200,7 +199,7 @@
   };
   const basicTableRef = ref<InstanceType<typeof BasicTable>>();
   const handleBatchDelete = async () => {
-    const confirmed = await openMessageBox('', '删除后任务不可恢复，确认删除吗？', 'warn');
+    const confirmed = await openMessageBox('', '删除后任务不可恢复，确认删除吗？', 'warning');
     if (!confirmed) return;
     const deleteIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
     await deleteTaskManagementItem(deleteIds);

src/views/disaster/hooks/messageBox.ts

@@ -1,17 +0,0 @@
-import { ElMessageBox } from 'element-plus';
-export const useMessageBox = () => {
-  const openMessageBox = (content: string, title: string, type: 'default' | 'weak' | 'warn' | 'strong') => {
-    return ElMessageBox.confirm(content, title, {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      customClass: `customMessageBox--${type}`,
-    })
-      .then(() => {
-        return true;
-      })
-      .catch(() => {
-        return false;
-      });
-  };
-  return { openMessageBox };
-};

src/views/setting/system/BasicSetting.vue

@@ -1,13 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
-      <el-form
-        label-position="top"
-        :label-width="80"
-        :model="formValue"
-        :rules="rules"
-        ref="formRef"
-      >
+      <el-form label-position="top" :label-width="80" :model="formValue" :rules="rules" ref="formRef">
         <el-form-item label="网站名称" prop="name">
           <el-input v-model="formValue.name" placeholder="请输入网站名称" />
         </el-form-item>
@@ -38,11 +32,7 @@
         </el-form-item>
 
         <el-form-item label="网站关闭提示" prop="closeText">
-          <el-input
-            v-model="formValue.closeText"
-            type="textarea"
-            placeholder="请输入网站关闭提示"
-          />
+          <el-input v-model="formValue.closeText" type="textarea" placeholder="请输入网站关闭提示" />
         </el-form-item>
 
         <el-form-item>
@@ -55,8 +45,9 @@
 
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
-  import { ElMessageBox, ElMessage } from 'element-plus';
+  import { ElMessage } from 'element-plus';
   import type { ElForm } from 'element-plus';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   type FormInstance = InstanceType<typeof ElForm>;
 
@@ -81,14 +72,13 @@
     icpCode: '',
     address: '',
     loginCode: 0,
-    closeText:
-      '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
+    closeText: '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
     systemOpen: true,
   });
 
   function systemOpenChange(value) {
     if (!value) {
-      ElMessageBox.confirm('您确定要关闭系统访问吗？该操作立马生效，请慎重操作！', '提示', {
+      msgConfirm('您确定要关闭系统访问吗？该操作立马生效，请慎重操作！', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',

src/views/system/dictionary/components/AddDict.vue

@@ -63,8 +63,13 @@
                 :prop="`sysDictDataList.${index}.itemCode`"
                 :rules="[{ required: true, message: '请输入字典项编码', trigger: 'blur' }]"
               >
-                <el-input v-model="item.itemCode" placeholder="请输入字典项编码" type="textarea" show-word-limit
-                maxlength="500"
+                <el-input
+                  v-model="item.itemCode"
+                  placeholder="请输入字典项编码"
+                  type="textarea"
+                  show-word-limit
+                  maxlength="500"
+                />
               </el-form-item>
               <el-form-item label="图标">
                 <!-- // 在模板部分修改上传组件的ref绑定 -->

src/views/system/dictionary/dictionary.vue

@@ -65,6 +65,7 @@
   import { dictionaryStatusOptions, dictionaryTypeOptions } from './constants';
   import Breadcrumb from '@/components/Breadcrumb.vue';
   import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   // 表格数据
   const loading = ref(false);
@@ -115,7 +116,7 @@
   // 删除字典
   async function handleDelete(row: any) {
     try {
-      await ElMessageBox.confirm('确定要删除这条字典记录吗？', '提示', {
+      await msgConfirm('确定要删除这条字典记录吗？', '提示', {
         type: 'warning',
       });
       await deleteDictionary(row.dictId);

src/views/system/log/components/OperationLog.vue

@@ -123,7 +123,7 @@
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
   import { Search, Refresh, SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue';
-  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ElMessage } from 'element-plus';
   import { exportOperationLog } from '@/api/system/log';
   import { downloadByData } from '@/utils/file/download';
   import type { FormInstance } from 'element-plus';
@@ -136,6 +136,7 @@
     OperationType,
   } from '@/types/log/constants';
   import userOperationQuery from '../hooks/userOperationQuery';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   const { requestParams, total, operationLogList, loading, queryOperationLogPage, resetRequestParams } =
     userOperationQuery();
@@ -146,7 +147,7 @@
 
   /* 导出数据 */
   const handleExport = () => {
-    ElMessageBox.confirm('确定导出所查询数据？', '导出', {
+    msgConfirm('确定导出所查询数据？', '导出', {
       confirmButtonText: '确定',
       showCancelButton: true,
       type: 'warning',

src/views/system/log/components/SystemLog.vue

@@ -5,33 +5,26 @@
 <template>
   <div class="login-log">
     <el-card class="mb-3 proCard">
-      <el-space >
+      <el-space>
         <el-form ref="searchFormRef" :inline="true" :model="requestParams.queryParam" class="form-inline">
           <el-form-item label="事件类型" prop="eventType">
-            <el-select 
-              v-model="requestParams.queryParam.eventType" 
-              placeholder="请选择事件类型" 
-              clearable>
-                <el-option 
-                :label="item.label" 
-                :value="item.value" 
-                v-for="item in eventList" 
-                :key="item.value" />
+            <el-select v-model="requestParams.queryParam.eventType" placeholder="请选择事件类型" clearable>
+              <el-option :label="item.label" :value="item.value" v-for="item in eventList" :key="item.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="登录时间" prop="date">
-            <el-date-picker 
-              v-model="requestParams.queryParam.date" 
-              type="daterange" 
-              placeholder="请选择登录时间" 
+            <el-date-picker
+              v-model="requestParams.queryParam.date"
+              type="daterange"
+              placeholder="请选择登录时间"
               range-separator="～"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
               :disabled-date="disabledDate"
-              clearable 
+              clearable
               format="YYYY/MM/DD"
               value-format="YYYY/MM/DD"
-              />
+            />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" :icon="Search" @click="querySystemLogPage">查询</el-button>
@@ -47,9 +40,9 @@
       </template>
       <el-table height="calc(100vh - 450px)" :data="systemLogList" v-loading="loading">
         <el-table-column type="index" label="序号" width="100" />
-        <el-table-column label="事件类型" prop="realName" >
+        <el-table-column label="事件类型" prop="realName">
           <template #default="{ row }">
-           <span>{{ eventTypeArr[row.eventType] }}</span>
+            <span>{{ eventTypeArr[row.eventType] }}</span>
           </template>
         </el-table-column>
         <el-table-column label="时间" prop="createdAt" />
@@ -57,75 +50,82 @@
       </el-table>
 
       <section class="mt-4 flex justify-end">
-        <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 30, 50]" :total="total"
-          v-model:page-size="requestParams.pageSize" v-model:current-page="requestParams.pageNumber"
-          @change="querySystemLogPage" />
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next"
+          :page-sizes="[10, 30, 50]"
+          :total="total"
+          v-model:page-size="requestParams.pageSize"
+          v-model:current-page="requestParams.pageNumber"
+          @change="querySystemLogPage"
+        />
       </section>
     </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref,onMounted } from 'vue';
-import { Search, Refresh, Edit } from '@element-plus/icons-vue';
-import useSystemQuery from '../hooks/useSystemQuery';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { exportSystemLog } from '@/api/system/log';
-import { downloadByData } from '@/utils/file/download';
-import { eventList, eventTypeArr } from '@/types/log/constants.ts';
-import type { FormInstance } from 'element-plus'
+  import { ref, onMounted } from 'vue';
+  import { Search, Refresh } from '@element-plus/icons-vue';
+  import useSystemQuery from '../hooks/useSystemQuery';
+  import { ElMessage } from 'element-plus';
+  import { exportSystemLog } from '@/api/system/log';
+  import { downloadByData } from '@/utils/file/download';
+  import { eventList, eventTypeArr } from '@/types/log/constants.ts';
+  import type { FormInstance } from 'element-plus';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
-const { requestParams, total, systemLogList, loading, resetRequestParams, querySystemLogPage } = useSystemQuery();
+  const { requestParams, total, systemLogList, loading, resetRequestParams, querySystemLogPage } = useSystemQuery();
 
-onMounted(async () => {
-  querySystemLogPage();
-});
+  onMounted(async () => {
+    querySystemLogPage();
+  });
 
-/* 导出数据 */
-const handleExport = () => {
-  ElMessageBox.confirm('确定导出所查询数据？', '导出', {
+  /* 导出数据 */
+  const handleExport = () => {
+    msgConfirm('确定导出所查询数据？', '导出', {
       confirmButtonText: '确定',
       showCancelButton: true,
       type: 'warning',
     })
-    .then(() => {
-      exportSystemLog(requestParams.queryParam).then(async (responnse) => {
-        if (!responnse) {
-          throw new Error('下载文件失败');
-        }
-        downloadByData(responnse, '系统日志.xlsx');
-        ElMessage.success('下载文件成功');
+      .then(() => {
+        exportSystemLog(requestParams.queryParam).then(async (responnse) => {
+          if (!responnse) {
+            throw new Error('下载文件失败');
+          }
+          downloadByData(responnse, '系统日志.xlsx');
+          ElMessage.success('下载文件成功');
+        });
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消导出',
+        });
       });
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '取消导出',
-      });
-    });
-}
+  };
 
-/* 重置 */
-const searchFormRef = ref<FormInstance>()
-const handleResetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  resetRequestParams();
-  formEl.resetFields();
-  querySystemLogPage();
-}
+  /* 重置 */
+  const searchFormRef = ref<FormInstance>();
+  const handleResetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    resetRequestParams();
+    formEl.resetFields();
+    querySystemLogPage();
+  };
 
-/* 设置今天之后的时间不可选 */
-const disabledDate = (time) => {
-  return time.getTime() > Date.now();
-}
+  /* 设置今天之后的时间不可选 */
+  const disabledDate = (time) => {
+    return time.getTime() > Date.now();
+  };
 </script>
 
 <style scoped lang="scss">
-.form-inline .el-input {
-  --el-input-width: 160px;
-}
+  .form-inline .el-input {
+    --el-input-width: 160px;
+  }
 
-.form-inline .el-select {
-  --el-select-width: 160px;
-}
+  .form-inline .el-select {
+    --el-select-width: 160px;
+  }
 </style>

src/views/system/person-group/PersonGroup.vue

@@ -63,13 +63,14 @@
   import PersonGroupEditDrawer from './components/PersonGroupEditDrawer.vue';
   import { onMounted, ref } from 'vue';
   import PersonGroupExhibitionDrawer from './components/PersonGroupExhibitionDrawer.vue';
-  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ElMessage } from 'element-plus';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
+
   import { PERM_NOTICE } from '@/types/permission/constants';
   import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
   import Breadcrumb from '@/components/Breadcrumb.vue';
 
-  const { personGroupListRequestParams, personGroupList, total, setRequestParams, queryPersonGroupList } =
-    usePersonGroupListQuery();
+  const { personGroupListRequestParams, personGroupList, total, queryPersonGroupList } = usePersonGroupListQuery();
 
   const drawerTitle = ref('');
   const editDrawerInstance = ref();
@@ -84,7 +85,7 @@
     exhibitionDrawerInstance.value?.open(row);
   }
   function deleteGroup(row: PersonGroupListItem) {
-    ElMessageBox.confirm('确认删除，删除后无法恢复，确认删除吗？', '提示', {
+    msgConfirm('确认删除，删除后无法恢复，确认删除吗？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       customClass: 'customMessageBox--warn',

src/views/system/role/role.vue

@@ -58,7 +58,6 @@
 
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  import { ElMessageBox } from 'element-plus';
   import { Search } from '@element-plus/icons-vue';
   import RoleDrawer from './components/RoleDrawer.vue';
   import useRolesQuery from './hooks/useRolesQuery';
@@ -67,6 +66,7 @@
   import { PERM_USER } from '@/types/permission/constants';
   import Breadcrumb from '@/components/Breadcrumb.vue';
   import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   const { roleList, total, queryRolesPage, requestParams } = useRolesQuery();
 
@@ -91,7 +91,7 @@
    */
   const deleteRole = async (roleId: number) => {
     try {
-      await ElMessageBox.confirm('删除后无法回复，确认删除吗？', '确认删除', { type: 'warning' });
+      await msgConfirm('删除后无法回复，确认删除吗？', '确认删除', { type: 'warning' });
       await _deleteRole(roleId);
       queryRolesPage();
     } catch (e) {

src/views/system/tenant/tenant.vue

@@ -53,12 +53,7 @@
                 添加下一级
               </div>
 
-              <div
-                v-if="scope.row.parentId === -1 || scope.row.parentId === null"
-                class="separator"
-              >
-                |
-              </div>
+              <div v-if="scope.row.parentId === -1 || scope.row.parentId === null" class="separator"> | </div>
 
               <img
                 class="operation-img"
@@ -66,11 +61,7 @@
                 @click="openAddTenantDrawer('edit', scope.row)"
               />
 
-              <img
-                class="operation-img"
-                src="@/assets/icons/delete.png"
-                @click="handleDelete(scope.row.id)"
-              />
+              <img class="operation-img" src="@/assets/icons/delete.png" @click="handleDelete(scope.row.id)" />
             </div>
           </template>
         </el-table-column>
@@ -90,16 +81,13 @@
 <script lang="ts" setup>
   import { reactive, ref, onMounted } from 'vue';
   import { ElInput, ElButton, ElIcon, ElTable, ElTableColumn, ElTag } from 'element-plus';
-  import { ElMessageBox, ElMessage } from 'element-plus';
+  import { ElMessage } from 'element-plus';
+
   import { FileAddOutlined, SearchOutlined } from '@vicons/antd';
-  import {
-    TenantInfoTreeType,
-    TENANT_STATUS_LABEL,
-    tenantDrawerModeType,
-    tenantFormType,
-  } from '@/types/tenant/type';
+  import { TenantInfoTreeType, tenantDrawerModeType, tenantFormType } from '@/types/tenant/type';
   import AddTenantDrawer from './components/AddTenantDrawer.vue';
   import { queryTenantTreeApi, deleteTenantApi } from '@/api/tenant/index';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   const tenantTable = ref<TenantInfoTreeType>();
 
@@ -129,7 +117,7 @@
   }
 
   function handleDelete(tenantId: number) {
-    ElMessageBox.confirm('是否删除租户，删除后该租户无法继续使用平台！', '删除租户', {
+    msgConfirm('是否删除租户，删除后该租户无法继续使用平台！', '删除租户', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',

src/views/system/user/user.vue

@@ -163,7 +163,7 @@
 <script lang="ts" setup>
   import { reactive, ref, onMounted } from 'vue';
   import { storeToRefs } from 'pinia';
-  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ElMessage } from 'element-plus';
   import { Plus, DocumentAdd, Stamp } from '@element-plus/icons-vue';
   import { OptionsProps, SearchParamsProps } from './types';
   import { RoleTypeEnum } from '@/types/role/constants';
@@ -186,6 +186,7 @@
   import { DeptTreeItem } from '@/types/dept/type';
   import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
   import Breadcrumb from '@/components/Breadcrumb.vue';
+  import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   const userStore = useUserStore();
   const { getUserInfo } = storeToRefs(userStore);
@@ -231,7 +232,7 @@
   }
 
   function handleDelete(record: Recordable) {
-    ElMessageBox.confirm('确认要删除该用户吗', {
+    msgConfirm('', '确认要删除该用户吗', {
       confirmButtonText: '确认',
       cancelButtonText: '取消',
       type: 'warning',