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

feat(完成日志管理基本功能): ✨ 完成登录日志，操作日志crud菜单

Browse Source
This commit is contained in:
H0nGzA1
2023-02-11 18:19:00 +08:00
parent c5e5767572
commit 3aa1d3ae4a
6 changed files with 651 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/views/system/log/loginLog/api.ts Normal file
View File

@@ -0,0 +1,41 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/login_log/';
export function GetList(query: PageQuery) {
return request({
url: apiPrefix,
method: 'get',
data: query,
});
}
export function GetObj(id: InfoReq) {
return request({
url: apiPrefix + id,
method: 'get',
});
}
export function AddObj(obj: AddReq) {
return request({
url: apiPrefix,
method: 'post',
data: obj,
});
}
export function UpdateObj(obj: EditReq) {
return request({
url: apiPrefix + obj.id + '/',
method: 'put',
data: obj,
});
}
export function DelObj(id: DelReq) {
return request({
url: apiPrefix + id + '/',
method: 'delete',
data: { id },
});
}

290
web/src/views/system/log/loginLog/crud.tsx Normal file
View File

@@ -0,0 +1,290 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
actionbar: {
buttons: {
add: {
show: false,
},
},
},
rowHandle: {
buttons: {
edit: {
show: false,
},
remove: {
show: false,
},
},
},
columns: {
_index: {
title: '序号',
form: { show: false },
column: {
//type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
search: {
title: '关键词',
column: {
show: false,
},
search: {
show: true,
component: {
props: {
clearable: true,
},
placeholder: '请输入关键词',
},
},
form: {
show: false,
component: {
props: {
clearable: true,
},
},
},
},
username: {
title: '登录用户名',
search: {
disabled: false,
},
width: 140,
type: 'input',
form: {
disabled: true,
component: {
placeholder: '请输入登录用户名',
},
},
},
ip: {
title: '登录ip',
search: {
disabled: false,
},
width: 130,
type: 'input',
form: {
disabled: true,
component: {
placeholder: '请输入登录ip',
},
},
},
isp: {
title: '运营商',
search: {
disabled: true,
},
disabled: true,
width: 180,
type: 'input',
form: {
component: {
placeholder: '请输入运营商',
},
},
},
continent: {
title: '大州',
width: 80,
type: 'input',
form: {
disabled: true,
component: {
placeholder: '请输入大州',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
country: {
title: '国家',
width: 80,
type: 'input',
form: {
component: {
placeholder: '请输入国家',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
province: {
title: '省份',
width: 80,
type: 'input',
form: {
component: {
placeholder: '请输入省份',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
city: {
title: '城市',
width: 80,
type: 'input',
form: {
component: {
placeholder: '请输入城市',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
district: {
title: '县区',
key: '',
width: 80,
type: 'input',
form: {
component: {
placeholder: '请输入县区',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
area_code: {
title: '区域代码',
type: 'input',
form: {
component: {
placeholder: '请输入区域代码',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
country_english: {
title: '英文全称',
width: 120,
type: 'input',
form: {
component: {
placeholder: '请输入英文全称',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
country_code: {
title: '简称',
type: 'input',
form: {
component: {
placeholder: '请输入简称',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
longitude: {
title: '经度',
type: 'input',
disabled: true,
form: {
component: {
placeholder: '请输入经度',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
latitude: {
title: '纬度',
type: 'input',
disabled: true,
form: {
component: {
placeholder: '请输入纬度',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
login_type: {
title: '登录类型',
type: 'select',
search: {
disabled: false,
},
dict: {
data: [
{ label: '普通登录', value: 1 },
{ label: '微信扫码登录', value: 2 },
],
},
form: {
component: {
placeholder: '请选择登录类型',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
os: {
title: '操作系统',
type: 'input',
form: {
component: {
placeholder: '请输入操作系统',
},
},
},
browser: {
title: '浏览器名',
type: 'input',
form: {
component: {
placeholder: '请输入浏览器名',
},
},
},
agent: {
title: 'agent信息',
disabled: true,
type: 'input',
form: {
component: {
placeholder: '请输入agent信息',
},
},
},
},
},
};
};

26
web/src/views/system/log/loginLog/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
</script>

41
web/src/views/system/log/operationLog/api.ts Normal file
View File

@@ -0,0 +1,41 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/operation_log/';
export function GetList(query: PageQuery) {
return request({
url: apiPrefix,
method: 'get',
data: query,
});
}
export function GetObj(id: InfoReq) {
return request({
url: apiPrefix + id,
method: 'get',
});
}
export function AddObj(obj: AddReq) {
return request({
url: apiPrefix,
method: 'post',
data: obj,
});
}
export function UpdateObj(obj: EditReq) {
return request({
url: apiPrefix + obj.id + '/',
method: 'put',
data: obj,
});
}
export function DelObj(id: DelReq) {
return request({
url: apiPrefix + id + '/',
method: 'delete',
data: { id },
});
}

227
web/src/views/system/log/operationLog/crud.tsx Normal file
View File

@@ -0,0 +1,227 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
actionbar: {
buttons: {
add: {
show: false,
},
},
},
rowHandle: {
buttons: {
edit: {
show: false,
},
remove: {
show: false,
},
},
},
columns: {
_index: {
title: '序号',
form: { show: false },
column: {
//type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
search: {
title: '关键词',
column: {
show: false,
},
search: {
show: true,
component: {
props: {
clearable: true,
},
placeholder: '请输入关键词',
},
},
form: {
show: false,
component: {
props: {
clearable: true,
},
},
},
},
request_modular: {
title: '请求模块',
search: {
disabled: false,
},
type: 'input',
form: {
disabled: true,
component: {
placeholder: '请输入请求模块',
},
},
},
request_path: {
title: '请求地址',
search: {
disabled: false,
},
type: 'input',
form: {
disabled: true,
component: {
placeholder: '请输入请求地址',
},
},
},
request_body: {
column: {
showOverflowTooltip: true,
width: 200, //列宽
minWidth: 100, //最小列宽
},
title: '请求参数',
search: {
disabled: true,
},
disabled: true,
type: 'textarea',
form: {
component: {
props: {
type: 'textarea',
},
autosize: {
minRows: 2,
maxRows: 8,
},
placeholder: '请输入关键词',
},
},
},
request_method: {
title: '请求方法',
type: 'input',
search: {
disabled: false,
},
form: {
disabled: true,
component: {
placeholder: '请输入请求方法',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
request_msg: {
title: '操作说明',
disabled: true,
form: {
component: {
span: 12,
},
},
},
request_ip: {
title: 'IP地址',
search: {
disabled: false,
},
type: 'input',
form: {
disabled: true,
component: {
placeholder: '请输入IP地址',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
request_browser: {
title: '请求浏览器',
type: 'input',
form: {
disabled: true,
},
component: { props: { color: 'auto' } }, // 自动染色
},
response_code: {
title: '响应码',
search: {
disabled: true,
},
type: 'input',
form: {
disabled: true,
},
component: { props: { color: 'auto' } }, // 自动染色
},
request_os: {
title: '操作系统',
disabled: true,
search: {
disabled: true,
},
type: 'input',
form: {
disabled: true,
},
component: { props: { color: 'auto' } }, // 自动染色
},
json_result: {
title: '返回信息',
search: {
disabled: true,
},
type: 'input',
form: {
disabled: true,
},
component: { props: { color: 'auto' } }, // 自动染色
},
creator_name: {
title: '操作人',
form: {
disabled: true,
},
},
},
},
};
};

26
web/src/views/system/log/operationLog/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
</script>