使用element-plus进行提示替换HTML原生弹窗

openhis-ui-vue3/src/views/maintainSystem/lisGroup/index.vue

@@ -118,6 +118,7 @@ import {computed, nextTick, onMounted, reactive, ref} from 'vue'
 import {addLisGroup, delLisGroup, listLisGroup, updateLisGroup} from '@/api/system/checkType'
 import {getDicts} from "@/api/system/dict/data";
 import useUserStore from '@/store/modules/user';
+import {ElMessage, ElMessageBox} from 'element-plus';
 
 export default {
   name: 'LisGroupMaintain',
@@ -303,10 +304,11 @@ export default {
 
     // 显示提示信息
     const showMessage = (message, type = 'success') => {
-      // 在实际项目中，这里可以使用Element Plus或其他UI库的消息组件
-      // 这里为了简单起见，使用浏览器的alert，但添加了类型标识
+      // 使用Element Plus的消息组件
       if (type === 'error') {
-        alert(`错误: ${message}`)
+        ElMessage.error(message)
+      } else {
+        ElMessage.success(message)
       }
     }
 
@@ -447,8 +449,6 @@ export default {
         // 清除focus-target类，避免下次添加行时影响
         focusElement.classList.remove('focus-target')
       }
-
-      showMessage('请填写新记录信息')
     }
 
     // 删除行
@@ -460,54 +460,65 @@ export default {
         return
       }
 
-      if (confirm(`确定要删除"${item.lisGroupName}"这条记录吗？`)) {
-        try {
-          loading.value = true
-
-          // 添加删除行标记，触发渐隐效果
-          item.deleting = true
-
-          // 等待300ms，让渐隐效果完成
-          await new Promise(resolve => setTimeout(resolve, 300))
-
-          // 如果是新添加的记录，直接从数组中移除
-          if (item.isNew) {
-            tableData.splice(index, 1)
-            showMessage('删除成功')
-            totalItems.value--
-          } else {
-            // 调用API删除
-            const response = await delLisGroup(item.id)
-
-            if (response.code === 200) {
-              // 更新总数
-              totalItems.value--
-
-              // 检查当前页码是否仍然有效
-              const newTotalPages = Math.ceil(totalItems.value / pageSize.value)
-              if (currentPage.value > newTotalPages && newTotalPages > 0) {
-                // 如果当前页码大于总页数且总页数大于0，调整为最后一页
-                currentPage.value = newTotalPages
-              }
-
-              // 重新加载当前页数据，保持页码不变
-              loadLisGroups()
-              showMessage('删除成功')
-            } else {
-              showMessage(`删除失败: ${response.msg || '未知错误'}`, 'error')
-              // 如果删除失败，移除删除标记
-              item.deleting = false
-            }
+      try {
+        // 使用Element Plus的确认对话框
+        await ElMessageBox.confirm(
+          `确定要删除"${item.lisGroupName}"这条记录吗？`,
+          '删除确认',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
           }
-        } catch (error) {
+        )
+        
+        loading.value = true
+        
+        // 添加删除行标记，触发渐隐效果
+        item.deleting = true
+        
+        // 等待300ms，让渐隐效果完成
+        await new Promise(resolve => setTimeout(resolve, 300))
+        
+        // 如果是新添加的记录，直接从数组中移除
+        if (item.isNew) {
+          tableData.splice(index, 1)
+          showMessage('删除成功')
+          totalItems.value--
+        } else {
+          // 调用API删除
+          const response = await delLisGroup(item.id)
+          
+          if (response.code === 200) {
+            // 更新总数
+            totalItems.value--
+            
+            // 检查当前页码是否仍然有效
+            const newTotalPages = Math.ceil(totalItems.value / pageSize.value)
+            if (currentPage.value > newTotalPages && newTotalPages > 0) {
+              // 如果当前页码大于总页数且总页数大于0，调整为最后一页
+              currentPage.value = newTotalPages
+            }
+            
+            // 重新加载当前页数据，保持页码不变
+            loadLisGroups()
+            showMessage('删除成功')
+          } else {
+            showMessage(`删除失败: ${response.msg || '未知错误'}`, 'error')
+            // 如果删除失败，移除删除标记
+            item.deleting = false
+          }
+        }
+      } catch (error) {
+        if (error !== 'cancel') {
           showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
           // 如果删除失败，移除删除标记
           if (tableData[index]) {
             tableData[index].deleting = false
           }
-        } finally {
-          loading.value = false
         }
+      } finally {
+        loading.value = false
       }
     }