wangxiang
3 years ago
15 changed files with 50 additions and 407 deletions
@ -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 @@ |
|||||||
<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 @@ |
|||||||
<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 @@ |
|||||||
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