elementplus django drf 如何做到确认单据禁止删除

elementplus django drf 如何做到确认单据禁止删除

 

 

要在Django和Django Rest Framework（DRF）中实现禁止删除确认单据的功能，你可以通过以下步骤来完成：

1. 创建模型：首先，你需要在Django中创建一个模型来表示确认单据。这个模型应该包含与确认单据相关的所有信息，例如日期、状态等。确保你的模型有一个字段来标识确认单据是否可以被删除，例如一个布尔字段 is_deletable。

　　

from django.db import models

class ConfirmationDocument(models.Model):
    date = models.DateField()
    status = models.CharField(max_length=50)
    is_deletable = models.BooleanField(default=True)

    # 其他字段和方法

1. 创建序列化器：使用DRF创建一个序列化器来将确认单据序列化为JSON格式。确保在序列化器中包含 is_deletable 字段。

from rest_framework import serializers

class ConfirmationDocumentSerializer(serializers.ModelSerializer):
    class Meta:
        model = ConfirmationDocument
        fields = '__all__'

1. 创建视图：创建一个DRF视图来处理确认单据的操作，包括查看、创建、更新和删除。在删除操作中，你需要检查 is_deletable 字段的值，如果为 True，则允许删除，否则禁止删除。

from rest_framework import generics
from rest_framework import status
from rest_framework.response import Response

class ConfirmationDocumentListCreateView(generics.ListCreateAPIView):
    queryset = ConfirmationDocument.objects.all()
    serializer_class = ConfirmationDocumentSerializer

class ConfirmationDocumentRetrieveUpdateDeleteView(generics.RetrieveUpdateDestroyAPIView):
    queryset = ConfirmationDocument.objects.all()
    serializer_class = ConfirmationDocumentSerializer

    def perform_destroy(self, instance):
        if instance.is_deletable:
            instance.delete()
        else:
            return Response({'message': 'This confirmation document cannot be deleted.'}, status=status.HTTP_403_FORBIDDEN)

1. 配置URL路由：配置Django的URL路由以便与视图关联。

from django.urls import path
from . import views

urlpatterns = [
    path('confirmation-documents/', views.ConfirmationDocumentListCreateView.as_view(), name='confirmation-document-list'),
    path('confirmation-documents/<int:pk>/', views.ConfirmationDocumentRetrieveUpdateDeleteView.as_view(), name='confirmation-document-detail'),
]

现在，你已经配置好了Django和DRF，以确保只有 is_deletable 字段为 True 的确认单据可以被删除。对于不可删除的确认单据，将返回一个HTTP 403禁止访问的响应。你可以根据你的需求进一步自定义消息和响应。

 

我使用的是viewsets.ModelViewSet，改如何编写

如果你正在使用viewsets.ModelViewSet，你可以覆盖destroy方法来实现确认单据是否可删除的逻辑。以下是一个示例：

from rest_framework import viewsets, status
from rest_framework.response import Response

class ConfirmationDocumentViewSet(viewsets.ModelViewSet):
    queryset = ConfirmationDocument.objects.all()
    serializer_class = ConfirmationDocumentSerializer

    def destroy(self, request, *args, **kwargs):
        instance = self.get_object()

        if instance.is_deletable:
            self.perform_destroy(instance)
            return Response(status=status.HTTP_204_NO_CONTENT)
        else:
            return Response({'message': 'This confirmation document cannot be deleted.'}, status=status.HTTP_403_FORBIDDEN)

这段代码覆盖了destroy方法，在删除确认单据之前检查了is_deletable字段的值。如果is_deletable为True，则允许删除，否则返回一个HTTP 403禁止访问的响应。

确保在你的URL路由中配置了ConfirmationDocumentViewSet，以便它可以处理相应的API请求。

 

很多都要有类似操作，如何将次方法变成共用的

 

你可以创建一个通用的 mixin 类（混合类），将这个逻辑封装在 mixin 中，然后让你的视图集成这个 mixin，以便多个视图共享相同的逻辑。这将帮助你避免重复编写相同的操作。以下是一个示例：

首先，创建一个 mixin 类，包含确认单据是否可删除的逻辑：

from rest_framework import status
from rest_framework.response import Response

class DeletableViewMixin:
    def destroy(self, request, *args, **kwargs):
        instance = self.get_object()

        if instance.is_deletable:
            self.perform_destroy(instance)
            return Response(status=status.HTTP_204_NO_CONTENT)
        else:
            return Response({'message': 'This item cannot be deleted.'}, status=status.HTTP_403_FORBIDDEN)

然后，你可以在你的视图集成这个 mixin，以便多个视图共享相同的删除逻辑：

from rest_framework import viewsets

class ConfirmationDocumentViewSet(DeletableViewMixin, viewsets.ModelViewSet):
    queryset = ConfirmationDocument.objects.all()
    serializer_class = ConfirmationDocumentSerializer

通过这种方式，ConfirmationDocumentViewSet 现在包含了 DeletableViewMixin 中定义的删除逻辑，你可以将这个 mixin 用于其他需要相同逻辑的视图中。这样可以提高代码的可维护性和可重用性。

 

 

elementplus 前端如何操作

 

 

要使用 Element Plus（基于 Vue.js 的 UI 组件库）在前端实现确认单据的禁止删除功能，你可以按照以下步骤进行操作：

1. 安装 Element Plus：首先，确保你的项目中已经安装了 Vue.js 和 Element Plus。你可以通过 npm 或 yarn 来安装 Element Plus。

npm install element-plus

1. 导入 Element Plus 组件：在你的 Vue.js 项目中，导入 Element Plus 的相关组件。

import { Button, Table, TableColumn, MessageBox, Message } from 'element-plus';

// 注册 Element Plus 组件
app.component(Button.name, Button);
app.component(Table.name, Table);
app.component(TableColumn.name, TableColumn);

确保在你的 Vue 实例中注册了这些组件。

1. 创建确认单据列表：在你的组件中，使用 Element Plus 组件来创建确认单据的列表。你可以使用 el-table 和 el-button 来创建表格和按钮。

<template>
  <div>
    <el-button @click="deleteConfirmationDocument" type="danger">删除确认单据</el-button>
    <el-table :data="confirmationDocuments" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

1. 处理删除操作：在你的组件中，创建一个方法来处理删除操作。当用户点击删除按钮时，你可以弹出一个确认对话框，然后根据确认单据是否可删除来执行删除操作。

<script>
export default {
  data() {
    return {
      confirmationDocuments: [], // 确认单据列表
    };
  },
  methods: {
    deleteConfirmationDocument() {
      const selectedConfirmationDocument = this.getSelectedConfirmationDocument();

      if (!selectedConfirmationDocument) {
        Message.warning('请选择要删除的确认单据');
        return;
      }

      if (!selectedConfirmationDocument.is_deletable) {
        Message.error('此确认单据不能被删除');
        return;
      }

      MessageBox.confirm('确定要删除此确认单据吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 执行删除操作
        this.confirmationDocuments.splice(this.confirmationDocuments.indexOf(selectedConfirmationDocument), 1);
        Message.success('确认单据删除成功');
      });
    },
    getSelectedConfirmationDocument() {
      // 在你的数据中获取选中的确认单据
      // 你可以根据表格的选择状态来获取选中的数据
      // 这里的示例代码仅供参考，具体实现根据你的项目结构而定
    },
  },
};
</script>

上述代码中，我们创建了一个 deleteConfirmationDocument 方法来处理删除操作。在此方法中，我们首先检查用户是否选择了要删除的确认单据，然后再检查确认单据是否可删除。如果确认单据可以删除，将弹出一个确认对话框，用户确认后执行删除操作。

请注意，上述示例中的数据和方法都是简化的示例，你需要根据你的项目实际情况进行调整。此外，确保你的 Vue.js 组件与 Element Plus 组件正确集成，并且已经设置了确认单据列表和删除逻辑。

 

getSelectedConfirmationDocument是什么

 

getSelectedConfirmationDocument 是一个自定义的方法，用于获取用户在界面上选中的确认单据对象。在前端界面中，通常需要一种方法来检测用户在表格或列表中选择了哪些项目，然后执行相应的操作。

具体实现方法取决于你的界面和数据结构。以下是一种可能的实现方式：

getSelectedConfirmationDocument() {
  // 假设你有一个名为 selectedConfirmationDocument 的数据属性来跟踪选中的确认单据
  return this.selectedConfirmationDocument;
},

在这种实现中，我们假设你的组件有一个名为 selectedConfirmationDocument 的数据属性，该属性用来存储用户选中的确认单据对象。当用户在界面上选择一个确认单据时，你可以将其赋值给这个属性。

例如，在表格中，你可以使用 Element Plus 的 @row-click 事件来监听行的点击事件，并在事件处理程序中更新 selectedConfirmationDocument。以下是一个示例：

<el-table :data="confirmationDocuments" @row-click="handleRowClick">
  <!-- 表格列的定义 -->
</el-table>

data() {
  return {
    confirmationDocuments: [],
    selectedConfirmationDocument: null, // 用来存储选中的确认单据
  };
},
methods: {
  handleRowClick(row) {
    this.selectedConfirmationDocument = row;
  },
  // 其他方法
},

在这个示例中，我们使用了 @row-click 事件来监听行的点击事件，并在 handleRowClick 方法中更新了 selectedConfirmationDocument，以便我们后续可以在 deleteConfirmationDocument 方法中使用它来获取选中的确认单据。

请根据你的项目的实际情况和界面交互方式来调整 getSelectedConfirmationDocument 方法的实现。

  

如果是多选的情况怎么处理确认单据不能删除

 

如果你的界面允许多选确认单据，并且你想要确保不能删除其中某些选中的确认单据，可以通过以下方式进行处理：

1. 修改确认单据模型：首先，确保你的确认单据模型中有一个字段，用来表示确认单据是否可以删除。例如，你可以添加一个名为 is_deletable 的布尔字段。

class ConfirmationDocument(models.Model):
    # 其他字段
    is_deletable = models.BooleanField(default=True)

1. 在前端界面中处理多选：在前端界面中，确保用户可以选择多个确认单据。可以使用 Element Plus 的多选表格（<el-table>）来实现这一点。你需要添加一个复选框列，并在组件中维护一个选中的确认单据列表。

<el-table :data="confirmationDocuments" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <!-- 其他列的定义 -->
</el-table>

在 handleSelectionChange 方法中，你可以获取当前选中的确认单据列表：

data() {
  return {
    confirmationDocuments: [],
    selectedConfirmationDocuments: [], // 存储选中的确认单据
  };
},
methods: {
  handleSelectionChange(selection) {
    this.selectedConfirmationDocuments = selection;
  },
  // 其他方法
},

1. 处理删除操作：在你的删除操作中，需要遍历选中的确认单据列表，检查每个确认单据的 is_deletable 属性，以确定是否可以删除。

deleteConfirmationDocuments() {
  if (this.selectedConfirmationDocuments.length === 0) {
    Message.warning('请选择要删除的确认单据');
    return;
  }

  const nonDeletableDocuments = this.selectedConfirmationDocuments.filter(document => !document.is_deletable);

  if (nonDeletableDocuments.length > 0) {
    const nonDeletableDocumentNames = nonDeletableDocuments.map(document => document.name).join(', ');
    Message.error(`以下确认单据不能被删除：${nonDeletableDocumentNames}`);
    return;
  }

  MessageBox.confirm('确定要删除选中的确认单据吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 执行删除操作
    this.selectedConfirmationDocuments.forEach(document => {
      // 从界面和数据源中删除确认单据
      const index = this.confirmationDocuments.indexOf(document);
      if (index !== -1) {
        this.confirmationDocuments.splice(index, 1);
      }
    });
    Message.success('确认单据删除成功');
  });
},

上述代码中，我们首先检查用户是否选择了要删除的确认单据，然后遍历选中的确认单据列表，检查每个确认单据的 is_deletable 属性。如果有不可删除的确认单据，将显示错误消息，否则将执行删除操作。

请根据你的项目的实际情况和界面交互方式来调整处理多选删除操作的代码。

 

 

 

在其他js文件中有个共用的删除方法doDelete()，但是里面没有判断确认单据是否删除的的代码，因为不是所有的模块都有确认功能，这该如何解决

 

  

如果你有一个共用的删除方法 doDelete()，但不是所有的模块都具有确认功能，你可以考虑在调用 doDelete() 方法时传递一个额外的参数，用来表示是否需要进行确认操作。这可以通过一个布尔值参数来实现。以下是一个示例：

首先，在你的 doDelete() 方法中添加一个参数 needsConfirmation，用于表示是否需要进行确认操作：

function doDelete(item, needsConfirmation = false) {
  if (needsConfirmation) {
    // 显示确认对话框并在用户确认后执行删除操作
    showConfirmationDialog(() => {
      // 执行删除操作
      deleteItem(item);
    });
  } else {
    // 不需要确认操作，直接执行删除操作
    deleteItem(item);
  }
}

function deleteItem(item) {
  // 执行删除操作的实际逻辑
  // ...
}

function showConfirmationDialog(onConfirm) {
  // 显示确认对话框的逻辑
  // ...
}

在上述代码中，我们将 doDelete() 方法修改为接受一个额外的 needsConfirmation 参数，默认为 false。如果 needsConfirmation 为 true，则会显示确认对话框并在用户确认后执行删除操作。如果 needsConfirmation 为 false，则直接执行删除操作。

在调用 doDelete() 方法时，根据模块是否具有确认功能，传递相应的参数值。例如：

// 调用需要确认的删除操作
doDelete(itemWithConfirmation, true);

// 调用不需要确认的删除操作
doDelete(itemWithoutConfirmation, false);

通过这种方式，你可以在不同的模块中根据需要控制是否进行确认操作，而无需在 doDelete() 方法内部硬编码确认逻辑。这样可以更灵活地处理不同模块的需求。

 

 

请按照我的要求重新编写elementplus代码，点击删除按钮判断是否选中行，如果有选中行，然后判断选中的行中是否有的行中的确认栏位是否为true，如果为true则禁止删除并提示，如果没有确认，则删除

 

 

根据你的要求，你可以在点击删除按钮时，首先判断是否有选中的行，然后再判断选中的行中是否有的行中的确认字段是否为 true。如果是 true，则禁止删除并显示提示信息，否则执行删除操作。以下是相应的 Element Plus 代码示例：

<template>
  <div>
    <el-button @click="handleDelete" type="danger">删除</el-button>
    <el-table :data="confirmationDocuments" @row-click="handleRowClick" ref="table">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      confirmationDocuments: [
        { id: 1, date: '2023-09-19', status: '已确认' },
        { id: 2, date: '2023-09-20', status: '未确认' },
        { id: 3, date: '2023-09-21', status: '已确认' },
      ],
      selectedRows: [], // 存储选中的行数据
    };
  },
  methods: {
    handleRowClick(selection) {
      this.selectedRows = selection;
    },
    handleDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的确认单据');
        return;
      }

      const hasUnconfirmed = this.selectedRows.some(row => row.status === '未确认');

      if (hasUnconfirmed) {
        this.$message.error('选中的确认单据中包含未确认的单据，无法删除');
      } else {
        // 执行删除操作
        this.confirmationDocuments = this.confirmationDocuments.filter(
          document => !this.selectedRows.includes(document)
        );
        this.selectedRows = [];
        this.$message.success('确认单据删除成功');
        this.$refs.table.clearSelection(); // 清除表格中的选中状态
      }
    },
  },
};
</script>

在上述代码中，我们使用 selectedRows 来存储选中的行数据。在点击删除按钮时，首先检查是否有选中的行，然后使用 some 方法来检查是否有未确认的行。如果有未确认的行，则显示错误消息，否则执行删除操作。

请根据你的项目的实际数据和逻辑来调整代码中的数据和条件。这个示例假设状态为 "已确认" 的行可以被删除，而状态为 "未确认" 的行不能被删除。

const hasUnconfirmed = this.selections.some(row => row.confirm === true);这段代码用于查询选中的行中是否有确认的行，如果再添加一个判断，是否还有已经核准的

 

如果你想要同时判断选中的行中是否有确认的行和已经核准的行，你可以在 some 方法中添加一个额外的条件。下面是示例代码：

const hasUnconfirmed = this.selections.some(row => row.confirm === true);
const hasApproved = this.selections.some(row => row.approved === true);

if (hasUnconfirmed) {
  // 选中的行中包含确认的行
  // 处理逻辑
}

if (hasApproved) {
  // 选中的行中包含已核准的行
  // 处理逻辑
}

在这段代码中，首先使用 some 方法来检查 row.confirm 属性是否为 true，以判断选中的行中是否有确认的行。然后，再使用另一个 some 方法来检查 row.approved 属性是否为 true，以判断选中的行中是否有已核准的行。

你可以根据实际需求，根据 hasUnconfirmed 和 hasApproved 的值来执行相应的逻辑操作。这样可以同时处理两种情况，无需重复遍历选中的行。

 

 

const hasUnconfirmed = this.selections.some(row => row.confirm === true); const hasApproved = this.selections.some(row => row.approved === true);这两个能合并吗

 

const hasUnconfirmedOrApproved = this.selections.some(row => row.confirm === true || row.approved === true);

if (hasUnconfirmedOrApproved) {
  // 选中的行中包含确认的行或已核准的行
  // 处理逻辑
}

是的，你可以将这两个条件合并成一个条件，以便更简洁地判断选中的行中是否有确认的行和已核准的行。你可以使用逻辑运算符 ||（或）来实现这一点，如下所示：

在上述代码中，hasUnconfirmedOrApproved 将为 true，如果选中的行中至少有一行的 row.confirm 属性为 true 或 row.approved 属性为 true。这样，你只需要检查一个条件就可以同时处理两种情况。