admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
猿小天
2024-01-02 13:50:43 +08:00
parent 26ed59d1ff
commit d4e43e28e8
4 changed files with 124 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend/dvadmin/utils/filters.py
View File

@@ -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.filters import CharFilter
from django_filters import utils, FilterSet
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):

17
backend/dvadmin/utils/viewset.py
View File

@@ -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 = {}

105
web/src/utils/commonCrud.ts
View File

@@ -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

6
web/src/views/system/log/loginLog/crud.tsx
View File

@@ -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
}
})
},
},
};