使用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库的消息组件
+      // 使用Element Plus的消息组件
-      // 这里为了简单起见，使用浏览器的alert，但添加了类型标识
       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,8 +460,18 @@ export default {
         return
       }
 
-      if (confirm(`确定要删除"${item.lisGroupName}"这条记录吗？`)) {
       try {
+        // 使用Element Plus的确认对话框
+        await ElMessageBox.confirm(
+          `确定要删除"${item.lisGroupName}"这条记录吗？`,
+          '删除确认',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        )
+        
         loading.value = true
         
         // 添加删除行标记，触发渐隐效果
@@ -500,16 +510,17 @@ export default {
           }
         }
       } catch (error) {
+        if (error !== 'cancel') {
           showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
           // 如果删除失败，移除删除标记
           if (tableData[index]) {
             tableData[index].deleting = false
           }
+        }
       } finally {
         loading.value = false
       }
     }
-    }
 
     // 分页方法
     const prevPage = () => {