django-vue-admin如何增加一个功能，如请假流程

<think>我们正在使用django-vue-admin这个快速开发平台来实现一个请假流程功能。请假流程通常涉及以下几个步骤： 1. 创建请假模型（定义请假单的数据结构） 2. 实现请假流程的API（包括创建、提交、审批等） 3. 前端界面开发（让用户可以操作请假流程） 根据django-vue-admin的特点，它基于RBAC权限控制，前后端分离，后端使用Django+DRF，前端使用Vue3。我们可以按照以下步骤进行： 步骤1：在后端创建请假模型（LeaveRequest） 在Django的某个app（或者新建一个app）中定义请假模型。字段可能包括：用户（关联用户）、开始时间、结束时间、请假类型、请假原因、状态（待审批、通过、拒绝）等。 步骤2：创建请假模型的序列化器和视图集 使用DRF创建序列化器（Serializer）和视图集（ViewSet），以便提供API接口。 步骤3：注册API路由 将请假相关的API路由添加到项目中。 步骤4：前端开发 在前端项目中，创建请假管理相关的页面，包括请假申请表单、请假列表、审批页面等。使用Vue3编写组件，并通过axios调用后端API。 步骤5：权限配置 在系统的权限管理模块中，配置请假流程的权限，比如普通用户可以申请请假，部门经理可以审批等。 下面我们逐步详细说明： ### 后端实现（Django部分） 1. 创建模型（models.py） 假设我们在一个名为`leave`的app中创建模型。如果还没有这个app，请先创建。 ```bash python manage.py startapp leave ``` 然后在`leave/models.py`中定义模型： ```python from django.db import models from django.contrib.auth import get_user_model User = get_user_model() class LeaveRequest(models.Model): LEAVE_TYPES = ( ('annual', '年假'), ('sick', '病假'), ('personal', '事假'), ('other', '其他'), ) STATUS_CHOICES = ( ('pending', '待审批'), ('approved', '已批准'), ('rejected', '已拒绝'), ) user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='leave_requests', verbose_name='申请人') start_time = models.DateTimeField(verbose_name='开始时间') end_time = models.DateTimeField(verbose_name='结束时间') leave_type = models.CharField(max_length=20, choices=LEAVE_TYPES, verbose_name='请假类型') reason = models.TextField(verbose_name='请假原因') status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='pending', verbose_name='状态') created_at = models.DateTimeField(auto_now_add=True, verbose_name='创建时间') updated_at = models.DateTimeField(auto_now=True, verbose_name='更新时间') class Meta: verbose_name = '请假申请' verbose_name_plural = verbose_name def __str__(self): return f"{self.user.username}的请假申请({self.leave_type})" ``` 2. 创建序列化器（serializers.py） 在`leave` app下创建`serializers.py`文件： ```python from rest_framework import serializers from .models import LeaveRequest class LeaveRequestSerializer(serializers.ModelSerializer): class Meta: model = LeaveRequest fields = '__all__' read_only_fields = ('status', 'created_at', 'updated_at', 'user') ``` 3. 创建视图集（views.py） 在`leave/views.py`中： ```python from rest_framework import viewsets from .models import LeaveRequest from .serializers import LeaveRequestSerializer class LeaveRequestViewSet(viewsets.ModelViewSet): queryset = LeaveRequest.objects.all() serializer_class = LeaveRequestSerializer # 在创建时自动设置当前用户为申请人 def perform_create(self, serializer): serializer.save(user=self.request.user) ``` 4. 注册路由 在项目的urls.py中（或者app的路由中）添加： ```python from django.urls import path, include from rest_framework.routers import DefaultRouter from leave import views router = DefaultRouter() router.register(r'leave', views.LeaveRequestViewSet) urlpatterns = [ ..., path('api/leave/', include(router.urls)), ] ``` 5. 注册app 在`settings.py`的`INSTALLED_APPS`中添加`'leave'`。 6. 迁移数据库 执行： ```bash python manage.py makemigrations python manage.py migrate ``` ### 前端实现（Vue3部分） 1. 创建请假申请页面 在`src/views`目录下创建`leave`目录，然后在其中创建`ApplyLeave.vue`组件。 2. 在`ApplyLeave.vue`中，编写表单，调用后端的创建请假API。 示例代码（简化）： ```vue <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="请假类型"> <el-select v-model="form.leave_type"> <el-option label="年假" value="annual"></el-option> <el-option label="病假" value="sick"></el-option> <el-option label="事假" value="personal"></el-option> <el-option label="其他" value="other"></el-option> </el-select> </el-form-item> <el-form-item label="开始时间"> <el-date-picker v-model="form.start_time" type="datetime"></el-date-picker> </el-form-item> <el-form-item label="结束时间"> <el-date-picker v-model="form.end_time" type="datetime"></el-date-picker> </el-form-item> <el-form-item label="请假原因"> <el-input type="textarea" v-model="form.reason"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submit">提交</el-button> </el-form-item> </el-form> </div> </template> <script setup> import { ref } from 'vue' import { createLeaveRequest } from '@/api/leave' import { ElMessage } from 'element-plus' const form = ref({ leave_type: '', start_time: '', end_time: '', reason: '' }) const submit = async () => { try { await createLeaveRequest(form.value) ElMessage.success('提交成功') } catch (error) { ElMessage.error('提交失败') } } </script> ``` 3. 在`src/api/leave.js`中定义API函数： ```javascript import request from '@/utils/request' export function createLeaveRequest(data) { return request({ url: '/api/leave/leave/', method: 'post', data }) } ``` 4. 创建请假列表页面 同样在`src/views/leave`目录下创建`LeaveList.vue`，展示当前用户的请假记录。 5. 如果是审批人，还需要有审批页面，可以查看待审批的请假列表，并进行审批操作。 6. 添加路由：在`src/router/index.js`中配置请假相关的路由。 ### 权限配置 在django-vue-admin的后台管理系统中，进入权限管理，为请假相关的API配置权限（比如哪些角色可以访问哪些API），并配置前端菜单和按钮权限。 注意：以上步骤是一个基本实现，实际生产环境可能需要更复杂的流程（如多级审批、通知等），可以考虑使用工作流引擎（如django-viewflow）来实现，但这里我们先用简单方式实现。 由于django-vue-admin已经提供了基础的CRUD和权限管理，我们可以利用其已有的功能快速搭建。 以上就是在django-vue-admin中实现请假流程功能的基本步骤。 如果遇到问题，可以参考项目文档和社区讨论[^4][^5]。 §§相关问题§§ 1. 如何为请假流程添加多级审批功能？ 2. 如何在django-vue-admin中实现消息通知（比如审批通过后通知申请人）？ 3. 如何在前端展示请假审批进度？</think>在 Django-Vue-Admin 中实现请假流程功能，需要按照前后端分离的架构进行开发。以下是详细实现步骤： ### 一、后端实现（Django） 1. **创建请假模型** 在 `backend/web/apps/` 目录下创建 `leave/models.py`： ```python from django.db import models from django.contrib.auth import get_user_model User = get_user_model() class LeaveRequest(models.Model): STATUS_CHOICES = ( ('pending', '待审批'), ('approved', '已批准'), ('rejected', '已拒绝') ) user = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="申请人") start_date = models.DateField(verbose_name="开始日期") end_date = models.DateField(verbose_name="结束日期") reason = models.TextField(verbose_name="请假原因") status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='pending') created_at = models.DateTimeField(auto_now_add=True) approved_by = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, related_name="approved_leaves") ``` 2. **序列化器与视图集** 创建 `leave/serializers.py`： ```python from rest_framework import serializers from .models import LeaveRequest class LeaveRequestSerializer(serializers.ModelSerializer): class Meta: model = LeaveRequest fields = "__all__" ``` 创建 `leave/views.py`： ```python from rest_framework.viewsets import ModelViewSet from .models import LeaveRequest from .serializers import LeaveRequestSerializer from dvadmin.utils.viewset import CustomModelViewSet class LeaveRequestViewSet(CustomModelViewSet): queryset = LeaveRequest.objects.all() serializer_class = LeaveRequestSerializer filter_fields = ['user', 'status'] ``` 3. **注册路由** 在 `backend/web/urls.py` 添加： ```python from apps.leave.views import LeaveRequestViewSet from rest_framework.routers import DefaultRouter router = DefaultRouter() router.register('leave/request', LeaveRequestViewSet) urlpatterns += router.urls ``` 4. **配置权限** 在系统管理后台的「权限管理」中，为请假模块添加权限： - `leave:add` (申请请假) - `leave:approve` (审批请假) - `leave:view` (查看记录) ### 二、前端实现（Vue3） 1. **创建请假页面组件** 在 `web/src/views/leave/` 目录下创建： - `ApplyForm.vue` (申请表单) - `ApprovalList.vue` (审批列表) - `HistoryList.vue` (历史记录) 2. **实现申请表单** (`ApplyForm.vue`) ```vue <template> <dv-form :model="form" label-width="120px"> <dv-date-picker v-model="form.start_date" label="开始日期"/> <dv-date-picker v-model="form.end_date" label="结束日期"/> <dv-input type="textarea" v-model="form.reason" label="请假原因"/> <dv-button @click="submit">提交申请</dv-button> </dv-form> </template> <script setup> import { ref } from 'vue' import { createLeave } from '@/api/leave' const form = ref({ start_date: '', end_date: '', reason: '' }) const submit = async () => { await createLeave(form.value) ElMessage.success('申请已提交') } </script> ``` 3. **API 接口调用** (`src/api/leave.js`) ```javascript import request from '@/utils/request' export function createLeave(data) { return request.post('/api/leave/request/', data) } export function getApprovalList(params) { return request.get('/api/leave/request/', { params }) } ``` 4. **配置路由菜单** 在 `src/router/modules/` 添加 `leave.js`： ```javascript export default { path: '/leave', component: Layout, children: [ { path: 'apply', name: 'LeaveApply', component: () => import('@/views/leave/ApplyForm'), meta: { title: '请假申请', permission: ['leave:add'] } }, { path: 'approve', name: 'LeaveApprove', component: () => import('@/views/leave/ApprovalList'), meta: { title: '请假审批', permission: ['leave:approve'] } } ] } ``` ### 三、流程优化建议 1. **审批流程**： - 添加多级审批（部门经理→HR） - 实现审批通知（站内信/邮件） 2. **数据验证**： ```python # 在 serializer 中添加验证 def validate(self, attrs): if attrs['start_date'] > attrs['end_date']: raise serializers.ValidationError("结束日期不能早于开始日期") return attrs ``` 3. **集成工作流引擎**： - 使用 `django-viewflow` 实现复杂审批流 - 配置可视化流程图 ### 四、部署与测试 1. 生成数据库迁移： ```bash python manage.py makemigrations python manage.py migrate ``` 2. 启动前后端服务： ```bash # 后端 python manage.py runserver # 前端 npm run dev ``` 3. 测试流程： - 普通用户提交请假申请 - 管理员审批申请 - 查看历史记录 > 提示：完整实现可参考项目文档中的「工作流开发指南」[^4]，遇到问题可在社区提问[^4]。