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的对话框，将其标题设置为"修改分类"。