新功能: 封装时间范围的搜索,示例在登录日志页面

backend/dvadmin/utils/filters.py

@@ -14,13 +14,14 @@ from functools import reduce
 import six
 from django.db.models import Q, F
 from django.db.models.constants import LOOKUP_SEP
-from django_filters import utils
+from django_filters import utils, FilterSet
-from django_filters.filters import CharFilter
+from django_filters.filters import CharFilter, DateTimeFromToRangeFilter
 from django_filters.rest_framework import DjangoFilterBackend
 from django_filters.utils import get_model_field
 from rest_framework.filters import BaseFilterBackend
 
 from dvadmin.system.models import Dept, ApiWhiteList, RoleMenuButtonPermission
+from dvadmin.utils.models import CoreModel
 
 
 def get_dept(dept_id: int, dept_all_list=None, dept_list=None):

backend/dvadmin/utils/viewset.py

@@ -7,6 +7,8 @@
 @Remark: 自定义视图集
 """
 from django.db import transaction
+from django_filters import DateTimeFromToRangeFilter
+from django_filters.rest_framework import FilterSet
 from drf_yasg import openapi
 from drf_yasg.utils import swagger_auto_schema
 from rest_framework.decorators import action
@@ -16,11 +18,23 @@ from dvadmin.utils.filters import DataLevelPermissionsFilter
 from dvadmin.utils.import_export_mixin import ExportSerializerMixin, ImportSerializerMixin
 from dvadmin.utils.json_response import SuccessResponse, ErrorResponse, DetailResponse
 from dvadmin.utils.permission import CustomPermission
-from dvadmin.utils.models import get_custom_app_models
+from dvadmin.utils.models import get_custom_app_models, CoreModel
 from dvadmin.system.models import FieldPermission, MenuField
 from django_restql.mixins import QueryArgumentsMixin
 
 
+class CoreModelFliterSet(FilterSet):
+    """
+    封装一个时间范围过滤器:
+    使用方式:
+    {'create_datetime_after': '2024-01-01 8:00', 'create_datetime_before': '2024-01-05 10:00'}
+    """
+    create_datetime = DateTimeFromToRangeFilter()
+    update_datetime = DateTimeFromToRangeFilter()
+    class Meta:
+        model = None
+        fields = "__all__"
+
 class CustomModelViewSet(ModelViewSet, ImportSerializerMixin, ExportSerializerMixin, QueryArgumentsMixin):
     """
     自定义的ModelViewSet:
@@ -38,6 +52,7 @@ class CustomModelViewSet(ModelViewSet, ImportSerializerMixin, ExportSerializerMi
     filter_fields = '__all__'
     search_fields = ()
     extra_filter_class = [DataLevelPermissionsFilter]
+    filterset_class  = CoreModelFliterSet
     permission_classes = [CustomPermission]
     import_field_dict = {}
     export_field_label = {}

web/src/utils/commonCrud.ts

@@ -1,6 +1,7 @@
-import { dict } from "@fast-crud/fast-crud";
+import {dict} from "@fast-crud/fast-crud";
 import {shallowRef} from 'vue'
 import deptFormat from "/@/components/dept-format/index.vue";
+
 export const commonCrudConfig = (options = {
     create_datetime: {
         form: false,
@@ -51,7 +52,7 @@ export const commonCrudConfig = (options = {
                 align: 'center',
                 width: 300,
                 show: options.dept_belong_id?.table || false,
-                component:{
+                component: {
                     name: shallowRef(deptFormat),
                     vModel: "modelValue",
                 }
@@ -62,7 +63,7 @@ export const commonCrudConfig = (options = {
                     multiple: false,
                     clearable: true,
                     props: {
-                        checkStrictly:true,
+                        checkStrictly: true,
                         props: {
                             // 为什么这里要写两层props
                             // 因为props属性名与fs的动态渲染的props命名冲突，所以要多写一层
@@ -132,7 +133,53 @@ export const commonCrudConfig = (options = {
             title: '更新时间',
             type: 'datetime',
             search: {
-                show: options.update_datetime?.search || false
+                show: options.update_datetime?.search || false,
+                col: {span: 8},
+                component: {
+                    type: 'datetimerange',
+                    props: {
+                        'start-placeholder': '开始时间',
+                        'end-placeholder': '结束时间',
+                        'value-format': 'YYYY-MM-DD HH:mm:ss',
+                        'picker-options': {
+                            shortcuts: [{
+                                text: '最近一周',
+                                onClick(picker) {
+                                    const end = new Date();
+                                    const start = new Date();
+                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                                    picker.$emit('pick', [start, end]);
+                                }
+                            }, {
+                                text: '最近一个月',
+                                onClick(picker) {
+                                    const end = new Date();
+                                    const start = new Date();
+                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                                    picker.$emit('pick', [start, end]);
+                                }
+                            }, {
+                                text: '最近三个月',
+                                onClick(picker) {
+                                    const end = new Date();
+                                    const start = new Date();
+                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                                    picker.$emit('pick', [start, end]);
+                                }
+                            }]
+                        }
+                    }
+                },
+                valueResolve(context: any) {
+                    const {key, value} = context
+                    //value解析，就是把组件的值转化为后台所需要的值
+                    //在form表单点击保存按钮后，提交到后台之前执行转化
+                    if (value) {
+                        context.form.update_datetime_after = value[0]
+                        context.form.update_datetime_before = value[1]
+                    }
+                    //  ↑↑↑↑↑ 注意这里是form，不是row
+                }
             },
             column: {
                 width: 160,
@@ -149,14 +196,60 @@ export const commonCrudConfig = (options = {
             title: '创建时间',
             type: 'datetime',
             search: {
-                show: options.create_datetime?.search || false
+                show: options.create_datetime?.search || false,
+                col: {span: 8},
+                component: {
+                    type: 'datetimerange',
+                    props: {
+                        'start-placeholder': '开始时间',
+                        'end-placeholder': '结束时间',
+                        'value-format': 'YYYY-MM-DD HH:mm:ss',
+                        'picker-options': {
+                            shortcuts: [{
+                                text: '最近一周',
+                                onClick(picker) {
+                                    const end = new Date();
+                                    const start = new Date();
+                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                                    picker.$emit('pick', [start, end]);
+                                }
+                            }, {
+                                text: '最近一个月',
+                                onClick(picker) {
+                                    const end = new Date();
+                                    const start = new Date();
+                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                                    picker.$emit('pick', [start, end]);
+                                }
+                            }, {
+                                text: '最近三个月',
+                                onClick(picker) {
+                                    const end = new Date();
+                                    const start = new Date();
+                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                                    picker.$emit('pick', [start, end]);
+                                }
+                            }]
+                        }
+                    }
+                },
+                valueResolve(context: any) {
+                    const {key, value} = context
+                    //value解析，就是把组件的值转化为后台所需要的值
+                    //在form表单点击保存按钮后，提交到后台之前执行转化
+                    if (value) {
+                        context.form.create_datetime_after = value[0]
+                        context.form.create_datetime_before = value[1]
+                    }
+                    //  ↑↑↑↑↑ 注意这里是form，不是row
+                }
             },
             column: {
                 width: 160,
                 show: options.create_datetime?.table || false,
             },
             form: {
-                show: false,
+                show: false
             },
             viewForm: {
                 show: true

web/src/views/system/log/loginLog/crud.tsx

@@ -1,5 +1,6 @@
 import * as api from './api';
 import { UserPageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from '@fast-crud/fast-crud';
+import {commonCrudConfig} from "/@/utils/commonCrud";
 
 export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
@@ -325,6 +326,11 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 						},
 					},
 				},
+				...commonCrudConfig({
+					create_datetime: {
+						search: true
+					}
+				})
 			},
 		},
 	};