Vue-如何设置提示和警告的弹出框
案例1:
const handleDelete = (index, row) => {
if (!isEmptyList(row.children)) {
ElMessageBox.confirm('该分类下存在子分类,不可删除!', '提示', {
type: 'warning',
confirmButtonText: '确认'
});
return;
}
const id = row.groupId;
selectResource(id).then(response => {
if (!isEmptyList(response.data)) {
ElMessageBox.confirm('该分类下已经分配资源,确定要删除吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return deleteGroup(id);
});
} else {
ElMessageBox.confirm('确认删除名称为"' + row.groupName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return deleteGroup(id);
});
}
});
};
这段代码是一个函数,名为`handleDelete`,接受两个参数:`index`和`row`。主要用于处理分类数据的删除操作。
函数首先判断该分类是否存在子分类,如果存在则不允许删除,并通过`ElMessageBox`弹出提示框,提醒用户不可删除。
如果分类下没有子分类,该函数会检查该分类是否已经分配了资源。如果已经分配了资源,则通过`ElMessageBox`弹出确认框,让用户确认是否要删除该分类及其下属所有资源。如果用户确认,会执行`deleteGroup`函数,将该分类从数据库中删除。
如果分类下没有资源,则直接通过`ElMessageBox`弹出确认框,让用户确认是否要删除该分类。如果用户确认,也会执行`deleteGroup`函数,将该分类从数据库中删除。
总之,这段代码主要完成了分类数据的删除操作,需要依赖`ElMessageBox`组件和`deleteGroup`函数。
案例2:
const handleEdit = (index, row) => {
resetForm();
const id = row.groupId;
selectResource(id).then(response => {
if (!isEmptyList(response.data)) {
ElMessageBox.confirm('该分类已经分配资源,不可修改!', '提示', {
type: 'warning',
confirmButtonText: '确认'
});
return;
} else {
dialogParam.type = row.type;
caGroupTreeSelect(id);
getCaGroupDetails(id).then(response => {
caGroupForm.value = response.data;
dialogParam.open = true;
dialogParam.title = "修改分类";
});
}
});
};
这段代码定义了一个名为handleEdit的函数,它有两个参数:index和row。在函数内部,resetForm()函数会重置一个表单。然后,使用row.groupId作为参数调用了一个名为selectResource的函数,该函数的返回值是一个Promise对象。在Promise对象的回调函数中,使用了一个名为isEmptyList的函数来检查response.data是否是一个空列表。如果response.data不是一个空列表,那么会显示一个带有警告图标的提示框,告诉用户该分类已经分配资源,不可修改。如果response.data是一个空列表,则会将dialogParam.type设置为row.type,调用caGroupTreeSelect函数,并使用id作为参数调用getCaGroupDetails函数。getCaGroupDetails函数会返回一个Promise对象,其回调函数会将response.data的值赋给caGroupForm.value,打开一个名为dialogParam的对话框,将其标题设置为"修改分类"。
更多推荐
所有评论(0)