wangxiang
3 years ago
15 changed files with 50 additions and 407 deletions
@ -1,33 +0,0 @@
@@ -1,33 +0,0 @@
|
||||
/** |
||||
* @program: kicc-ui |
||||
* @description: 文件上传实体类 |
||||
* 类型定义 |
||||
* @author: entfrm开发团队-王翔 |
||||
* @create: 2022/4/8 |
||||
*/ |
||||
import { Page, R } from '/@/api/model'; |
||||
|
||||
// 定义查询参数
|
||||
export type LogParams = Page & { |
||||
title?: string; |
||||
traceId?: string; |
||||
}; |
||||
|
||||
// 定义日志对象
|
||||
export interface LogListItem { |
||||
type: string; |
||||
traceId: string; |
||||
title: string; |
||||
operation: string; |
||||
method: string; |
||||
url: string; |
||||
params: string; |
||||
ip: string; |
||||
executeTime: string; |
||||
location: string; |
||||
createTime: string; |
||||
exception: string; |
||||
} |
||||
|
||||
// 根据日志对象生成响应模型
|
||||
export type LogListGetResultModel = R<LogListItem>; |
||||
@ -1,72 +0,0 @@
@@ -1,72 +0,0 @@
|
||||
<template> |
||||
<BasicDrawer |
||||
v-bind="$attrs" |
||||
@register="registerDrawer" |
||||
showFooter |
||||
:title="getTitle" |
||||
width="500px" |
||||
@ok="handleSubmit" |
||||
> |
||||
<BasicForm @register="registerForm"> |
||||
<template #menu="{ model, field }"> |
||||
<BasicTree |
||||
v-model:value="model[field]" |
||||
:treeData="treeData" |
||||
:replaceFields="{ title: 'menuName', key: 'id' }" |
||||
checkable |
||||
toolbar |
||||
title="菜单分配" |
||||
/> |
||||
</template> |
||||
</BasicForm> |
||||
</BasicDrawer> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { ref, computed, unref } from 'vue'; |
||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
||||
import { formSchema } from './log.data'; |
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
||||
import { BasicTree, TreeItem } from '/@/components/Tree'; |
||||
//import { getMenuList } from '/@/api/system/role'; |
||||
|
||||
const emit = defineEmits(['success', 'register']); |
||||
const isUpdate = ref(true); |
||||
const treeData = ref<TreeItem[]>([]); |
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
||||
labelWidth: 90, |
||||
schemas: formSchema, |
||||
showActionButtonGroup: false, |
||||
}); |
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
||||
resetFields(); |
||||
setDrawerProps({ confirmLoading: false }); |
||||
// 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告 |
||||
if (unref(treeData).length === 0) { |
||||
//treeData.value = (await getMenuList()) as any as TreeItem[]; |
||||
} |
||||
isUpdate.value = !!data?.isUpdate; |
||||
|
||||
if (unref(isUpdate)) { |
||||
setFieldsValue({ |
||||
...data.record, |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增日志' : '编辑日志')); |
||||
|
||||
async function handleSubmit() { |
||||
try { |
||||
const values = await validate(); |
||||
setDrawerProps({ confirmLoading: true }); |
||||
// TODO custom api |
||||
console.log(values); |
||||
closeDrawer(); |
||||
emit('success'); |
||||
} finally { |
||||
setDrawerProps({ confirmLoading: false }); |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,90 +0,0 @@
@@ -1,90 +0,0 @@
|
||||
<template> |
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
||||
<BasicTable @register="registerTable"> |
||||
<template #toolbar> |
||||
<a-button type="primary" @click="handleDeleteAll">清空日志</a-button> |
||||
</template> |
||||
<template #action="{ record }"> |
||||
<TableAction |
||||
:actions="[ |
||||
{ |
||||
icon: 'clarity:note-edit-line', |
||||
onClick: handleEdit.bind(null, record), |
||||
}, |
||||
{ |
||||
icon: 'ant-design:delete-outlined', |
||||
color: 'error', |
||||
popConfirm: { |
||||
title: '是否确认删除', |
||||
confirm: handleDelete.bind(null, record), |
||||
}, |
||||
}, |
||||
]" |
||||
/> |
||||
</template> |
||||
</BasicTable> |
||||
<LogDrawer @register="registerDrawer" @success="handleSuccess" /> |
||||
</PageWrapper> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
// 引入基础组件 |
||||
import { PageWrapper } from '/@/components/Page'; |
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
||||
// 插入数据内容 |
||||
import { columns, searchFormSchema } from './log.data'; |
||||
// 通过API接口获取日志 |
||||
import { getLogListByPage, logEmpty } from '/@/api/platform/system/controller/log'; |
||||
import { useDrawer } from '/@/components/Drawer'; |
||||
import LogDrawer from './LogDrawer.vue'; |
||||
|
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
const { createConfirm } = useMessage(); |
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer(); |
||||
const [registerTable, { reload }] = useTable({ |
||||
title: '日志列表', |
||||
api: getLogListByPage, |
||||
columns, |
||||
formConfig: { |
||||
labelWidth: 120, |
||||
schemas: searchFormSchema, |
||||
}, |
||||
useSearchForm: true, |
||||
showTableSetting: true, |
||||
bordered: true, |
||||
showIndexColumn: false, |
||||
actionColumn: { |
||||
width: 80, |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
slots: { customRender: 'action' }, |
||||
fixed: undefined, |
||||
}, |
||||
}); |
||||
|
||||
function handleEdit(record: Recordable) { |
||||
openDrawer(true, { |
||||
record, |
||||
isUpdate: true, |
||||
}); |
||||
} |
||||
|
||||
function handleDelete(record: Recordable) { |
||||
console.log(record); |
||||
} |
||||
|
||||
function handleDeleteAll() { |
||||
createConfirm({ |
||||
iconType: 'warning', |
||||
content: '确定要清空所有日志数据吗？', |
||||
onOk: async () => { |
||||
await logEmpty(); |
||||
reload(); |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
function handleSuccess() { |
||||
reload(); |
||||
} |
||||
</script> |
||||
@ -1,137 +0,0 @@
@@ -1,137 +0,0 @@
|
||||
import { BasicColumn } from '/@/components/Table'; |
||||
import { FormSchema } from '/@/components/Table'; |
||||
import { h } from 'vue'; |
||||
import { Tag } from 'ant-design-vue'; |
||||
|
||||
export const columns: BasicColumn[] = [ |
||||
{ |
||||
title: 'TraceId', |
||||
dataIndex: 'traceId', |
||||
width: 100, |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'title', |
||||
width: 100, |
||||
}, |
||||
{ |
||||
title: '路径', |
||||
dataIndex: 'url', |
||||
width: 130, |
||||
}, |
||||
{ |
||||
title: '方法', |
||||
dataIndex: 'method', |
||||
width: 60, |
||||
customRender: ({ record }) => { |
||||
return h(Tag, { color: 'blue' }, () => record.method); |
||||
}, |
||||
}, |
||||
{ |
||||
title: '耗时(ms)', |
||||
dataIndex: 'executeTime', |
||||
width: 80, |
||||
customRender: ({ record }) => { |
||||
const time = record.executeTime; |
||||
const color = time > 1000 ? 'red' : 'green'; |
||||
return h(Tag, { color: color }, () => time); |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'IP地址', |
||||
dataIndex: 'ip', |
||||
width: 100, |
||||
}, |
||||
{ |
||||
title: '地区', |
||||
dataIndex: 'location', |
||||
width: 100, |
||||
}, |
||||
{ |
||||
title: '类型', |
||||
dataIndex: 'type', |
||||
width: 120, |
||||
customRender: ({ record }) => { |
||||
const type = record.type; |
||||
const enable = ~~type === 1; |
||||
const color = enable ? 'green' : 'red'; |
||||
const text = enable ? '日志' : '异常'; |
||||
return h(Tag, { color: color }, () => text); |
||||
}, |
||||
}, |
||||
{ |
||||
title: '创建时间', |
||||
dataIndex: 'createTime', |
||||
width: 180, |
||||
}, |
||||
]; |
||||
|
||||
export const searchFormSchema: FormSchema[] = [ |
||||
{ |
||||
field: 'keyword', |
||||
label: '关键字', |
||||
component: 'Input', |
||||
componentProps: { |
||||
placeholder: '请输入TraceId/名称', |
||||
}, |
||||
colProps: { span: 8 }, |
||||
}, |
||||
{ |
||||
field: 'startDate', |
||||
label: '起始时间', |
||||
component: 'DatePicker', |
||||
colProps: { span: 8 }, |
||||
}, |
||||
{ |
||||
field: 'endDate', |
||||
label: '截止时间', |
||||
component: 'DatePicker', |
||||
colProps: { span: 8 }, |
||||
}, |
||||
]; |
||||
|
||||
export const formSchema: FormSchema[] = [ |
||||
{ |
||||
field: 'type', |
||||
label: '日志类型', |
||||
required: true, |
||||
component: 'Select', |
||||
componentProps: { |
||||
options: [ |
||||
{ label: '日志', value: '1' }, |
||||
{ label: '异常', value: '2' }, |
||||
], |
||||
}, |
||||
dynamicDisabled: true, |
||||
}, |
||||
{ |
||||
field: 'title', |
||||
label: '日志标题', |
||||
component: 'Input', |
||||
}, |
||||
{ |
||||
field: 'method', |
||||
label: '执行方法', |
||||
component: 'Input', |
||||
}, |
||||
{ |
||||
field: 'url', |
||||
label: '请求路径', |
||||
component: 'Input', |
||||
}, |
||||
{ |
||||
field: 'params', |
||||
label: '请求参数', |
||||
component: 'InputTextArea', |
||||
}, |
||||
{ |
||||
label: '操作内容', |
||||
field: 'operation', |
||||
component: 'InputTextArea', |
||||
}, |
||||
{ |
||||
field: 'exception', |
||||
label: '异常信息', |
||||
component: 'InputTextArea', |
||||
} |
||||
]; |
||||
Loading…
Reference in new issue