使用element-plus进行提示替换HTML原生弹窗
This commit is contained in:
@@ -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,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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user