update 优化日志管理

This commit is contained in:
2021-04-26 15:17:35 +08:00
parent 104f223410
commit 618c588965
8 changed files with 224 additions and 581 deletions

View File

@@ -19,6 +19,7 @@
@import './lib/table.less';
@import './lib/list.less';
@import './lib/form.less';
@import './lib/description.less';
@import './lib/select.less';
@import './lib/dropdown.less';
@import './lib/tree-layout.less';

View File

@@ -0,0 +1,10 @@
@import (reference) '~@/assets/style/extend.less';
.ant-descriptions-bordered {
.ant-descriptions-view {
>table {
border-collapse: collapse;
background-color: @white;
}
}
}

View File

@@ -1,72 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
:width="1024"
@ok="onOk"
:footer="false"
title="日志详情"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
onOpen(record) {
this.visible = true;
this.$nextTick(() => {
this.$refs['form-body'].onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
// this.$refs['form-body'].onValidate((valid) => {
// if (valid) {
// this.confirmLoading = true;
// this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
// this.confirmLoading = false;
// if (success) {
// this.$message.success('编辑成功');
// this.onCancel();
// this.$emit('ok');
// } else {
// this.$message.error(message);
// }
// });
// }
// });
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.$refs['form-body'].onResetFields();
this.visible = false;
},
},
};
</script>

View File

@@ -1,105 +0,0 @@
<template>
<a-form-model :model="form" class="yo-form" ref="form">
<a-descriptions bordered>
<a-descriptions-item label="方法名称" :span="1">
{{form.methodName}}
</a-descriptions-item>
<a-descriptions-item label="地址" :span="2">
{{form.location}}
</a-descriptions-item>
<a-descriptions-item label="浏览器">
{{form.browser}}
</a-descriptions-item>
<a-descriptions-item label="操作系统" :span="2">
{{form.os}}
</a-descriptions-item>
<a-descriptions-item label="类名称" :span="3">
{{form.className}}
</a-descriptions-item>
<a-descriptions-item label="返回结果" :span="3">
{{form.result}}
</a-descriptions-item>
<a-descriptions-item label="请求参数" :span="3">
{{form.param}}
</a-descriptions-item>
<a-descriptions-item label="具体消息" :span="3">
{{form.message}}
</a-descriptions-item>
</a-descriptions>
</a-form-model>
<!-- <a-form-model :model="form" class="yo-form" ref="form">
<a-row :gutter="16">
<a-col :span="10">
<div class="yo-form-group">
<a-form-model-item label="方法名称" prop="methodName">
<a-input v-model="form.methodName" />
</a-form-model-item>
<a-form-model-item label="地址" prop="location">
<a-input v-model="form.location" />
</a-form-model-item>
<a-form-model-item label="类名称" prop="className">
<a-textarea :rows="4" v-model="form.className" />
</a-form-model-item>
<a-form-model-item label="返回结果" prop="result">
<a-textarea :rows="4" v-model="form.result" />
</a-form-model-item>
</div>
</a-col>
<a-col :span="14">
<div class="yo-form-group">
<a-form-model-item label="浏览器" prop="browser">
<a-input v-model="form.browser" />
</a-form-model-item>
<a-form-model-item label="操作系统" prop="os">
<a-input v-model="form.os" />
</a-form-model-item>
<a-form-model-item label="请求参数" prop="param">
<a-textarea :rows="4" v-model="form.param" />
</a-form-model-item>
<a-form-model-item label="具体消息" prop="message">
<a-textarea :rows="4" v-model="form.message" />
</a-form-model-item>
</div>
</a-col>
</a-row>
</a-form-model> -->
</template>
<script>
export default {
data() {
return {
form: {
active: "N",
},
};
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
this.form = this.$_.cloneDeep(record);
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
*/
onResetFields() {
setTimeout(() => {
this.form = {};
this.$refs.form.resetFields();
}, 300);
},
},
};
</script>

View File

@@ -1,35 +1,59 @@
<template>
<container>
<br />
<a-alert banner closable type="error">
<template slot="message">后端bug:任何操作的操作类型都是增加</template>
</a-alert>
<br />
<a-alert banner closable type="warning">
<template slot="message">详情的确认按钮没功能</template>
</a-alert>
<br />
<br />
<a-alert closable type="error">
<template slot="message">
<div>后端bug:任何操作的操作类型都是增加</div>
<div>没有记录请求参数.返回结果等信息</div>
</template>
</a-alert>
<br />
<a-card :bordered="false">
<Auth auth="sysApp:page">
<Auth auth="sysOpLog:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<a-form-model-item label="角色名称">
<a-input placeholder="请输入角色名称" v-model="query.name" />
<a-form-model-item label="日志名称">
<a-input placeholder="请输入日志名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编号">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
<a-form-model-item label="操作类型">
<a-select
:style="{ width: '170px' }"
allow-clear
placeholder="请选择操作类型"
v-model="query.opType"
>
<a-select-option
:key="item.code"
:value="item.code"
v-for="item in codes.opTypeDict"
>{{ item.value }}</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="是否成功">
<a-select
:style="{ width: '170px' }"
allow-clear
placeholder="请选择是否成功"
v-model="query.success"
>
<a-select-option value="true"></a-select-option>
<a-select-option value="false"></a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="操作时间">
<a-range-picker
:show-time="{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
}"
format="YYYY-MM-DD HH:mm:ss"
v-model="query.dates"
/>
</a-form-model-item>
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button
@click="
() => {
(query = {}), onQuery();
}
"
>重置</a-button
>
<a-button @click="() => { query = {}, onQuery() }">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
@@ -37,126 +61,96 @@
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<div class="yo-action-bar" slot="title">
<Auth auth="sysApp:delete">
<div class="yo-action-bar--actions">
<a-popconfirm
@confirm="sysVisLogDelete()"
placement="topRight"
title="确认清空日志?"
>
<a-button>清空日志</a-button>
</a-popconfirm>
</div>
</Auth>
</div>
<span slot="opType" slot-scope="text">
{{ opTypeFilter(text) }}
</span>
<span slot="success" slot-scope="text">
{{ successFilter(text) }}
</span>
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<a @click="onOpen('details-Form', record)">详情</a>
</yo-table-actions>
</span>
<Auth auth="sysOpLog:delete" slot="operator">
<a-popconfirm @confirm="onOpLogClear" placement="bottomLeft" title="是否确认清空日志">
<a-button>清空日志</a-button>
</a-popconfirm>
</Auth>
<span slot="opType" slot-scope="text">{{ bindCodeValue(text, 'opTypeDict') }}</span>
<span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
<a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
<a-descriptions-item :span="1" label="方法名称">{{ record.methodName }}</a-descriptions-item>
<a-descriptions-item :span="2" label="地址">{{ record.location }}</a-descriptions-item>
<a-descriptions-item label="浏览器">{{ record.browser }}</a-descriptions-item>
<a-descriptions-item :span="2" label="操作系统">{{ record.os }}</a-descriptions-item>
<a-descriptions-item :span="3" label="类名称">{{ record.className }}</a-descriptions-item>
<a-descriptions-item :span="3" label="返回结果">{{ record.result }}</a-descriptions-item>
<a-descriptions-item :span="3" label="请求参数">{{ record.param }}</a-descriptions-item>
<a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
</a-descriptions>
</yo-table>
<details-Form ref="details-Form" />
</a-card>
<br />
</container>
</template>
<script>
import detailsForm from "./detailsForm";
import moment from 'moment';
export default {
components: {
detailsForm,
},
data() {
return {
query: {},
columns: [
{
title: "日志名称",
dataIndex: "name",
title: '日志名称',
dataIndex: 'name',
},
{
title: "操作类型",
dataIndex: "opType",
scopedSlots: { customRender: "opType" },
title: '操作类型',
dataIndex: 'opType',
scopedSlots: { customRender: 'opType' },
},
{
title: "是否成功",
dataIndex: "success",
scopedSlots: { customRender: "success" },
title: '是否成功',
dataIndex: 'success',
scopedSlots: { customRender: 'success' },
},
{
title: "ip",
dataIndex: "ip",
title: 'ip',
dataIndex: 'ip',
},
{
title: "请求地址",
dataIndex: "url",
scopedSlots: { customRender: "url" },
title: '请求地址',
dataIndex: 'url',
scopedSlots: { customRender: 'url' },
},
{
title: "操作时间",
dataIndex: "opTime",
scopedSlots: { customRender: "opTime" },
title: '操作时间',
dataIndex: 'opTime',
scopedSlots: { customRender: 'opTime' },
},
{
title: "操作人",
dataIndex: "account",
},
{
title: "详情",
dataIndex: "action",
width: "150px",
scopedSlots: { customRender: "action" },
title: '操作人',
dataIndex: 'account',
},
],
opTypeDict: [],
successDict: [],
codes: {
opTypeDict: [],
},
};
},
created() {
this.onLoadCodes();
},
methods: {
opTypeFilter(result) {
// eslint-disable-next-line eqeqeq
const values = this.opTypeDict.filter((item) => item.code == result);
if (values.length > 0) {
return values[0].value;
}
},
sysVisLogDelete() {
this.$api.sysOpLogDelete().then((res) => {
if (res.success) {
this.$message.success("清空成功");
this.onReloadData();
} else {
this.$message.error("清空失败:" + res.message);
}
});
},
successFilter(result) {
// eslint-disable-next-line eqeqeq
const values = this.successDict.filter((item) => item.code == result);
if (values.length > 0) {
return values[0].value;
}
},
moment,
/**
* 必要的方法
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
const query = this.$_.cloneDeep(this.query);
if (query.dates && query.dates.length) {
query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
delete query.dates;
}
return this.$api
.sysOpLogPage({
...params,
...this.query,
...query,
})
.then((res) => {
return res.data;
@@ -183,59 +177,34 @@ export default {
* 加载字典数据时的必要方法
*/
onLoadCodes() {
this.$api
.$queue([
this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
this.$api.sysDictTypeDropDownWait({ code: "op_type" }),
])
.then(([yesOrNo, commonStatus]) => {
this.opTypeDict = commonStatus.data;
this.successDict = yesOrNo.data;
});
this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'op_type' })]).then(([commonStatus]) => {
this.codes.opTypeDict = commonStatus.data;
});
},
bindCodeValue(code, name) {
const c = this.codes
.find((p) => p.code == name)
.values.find((p) => p.code == code);
const c = this.codes[name].find((p) => p.code == code);
if (c) {
return c.value;
}
return null;
},
/**
* 有编辑新增功能的必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
},
onResult(success, message, successMessage) {
if (success) {
this.$message.success(successMessage);
this.onReloadData();
} else {
this.$refs.table.onLoaded();
this.$message.error(message);
}
},
onSetDefault(record) {
onOpLogClear() {
this.$refs.table.onLoading();
this.$api
.sysAppSetAsDefault({ id: record.id })
.then(({ success, message }) => {
this.onResult(success, message, "设置成功");
.sysOpLogDelete()
.then((res) => {
if (res.success) {
this.$message.success('清空成功');
this.onReloadData();
} else {
this.$message.error('清空失败:' + res.message);
}
})
.finally(() => {
this.$refs.table.onLoaded();
});
},
onDelete(record) {
this.$refs.table.onLoading();
this.$api.sysRoleDel(record).then(({ success, message }) => {
this.onResult(success, message, "删除成功");
});
},
},
};
</script>

View File

@@ -1,72 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="日志详情"
:footer="false"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
onOpen(record) {
this.visible = true;
this.$nextTick(() => {
this.$refs['form-body'].onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
// this.$refs['form-body'].onValidate((valid) => {
// if (valid) {
// this.confirmLoading = true;
// this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
// this.confirmLoading = false;
// if (success) {
// this.$message.success('编辑成功');
// this.onCancel();
// this.$emit('ok');
// } else {
// this.$message.error(message);
// }
// });
// }
// });
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.$refs['form-body'].onResetFields();
this.visible = false;
},
},
};
</script>

View File

@@ -1,46 +0,0 @@
<template>
<a-form-model :model="form" class="yo-form" ref="form">
<a-form-model-item label="具体消息" prop="message">
<a-textarea :rows="4" v-model="form.message" />
</a-form-model-item>
</a-form-model>
</template>
<script>
export default {
data() {
return {
form: {
active: 'N',
},
};
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
this.form = this.$_.cloneDeep(record);
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
*/
onResetFields() {
setTimeout(() => {
this.form = {};
this.$refs.form.resetFields();
}, 300);
},
},
};
</script>

View File

@@ -1,37 +1,56 @@
<template>
<container>
<br />
<a-alert banner closable type="warning">
<template slot="message">详情的确认按钮没功能</template>
</a-alert>
<br />
<a-alert banner closable type="warning">
<template slot="message"
>页面刷新的时候也会有保存登录日志但是没有ip显示</template
>
<a-alert closable type="error">
<template slot="message">页面刷新的时候也会有保存登录日志但是没有ip显示</template>
</a-alert>
<br />
<a-card :bordered="false">
<Auth auth="sysApp:page">
<Auth auth="sysVisLog:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<a-form-model-item label="角色名称">
<a-input placeholder="请输入角色名称" v-model="query.name" />
<a-form-model-item label="日志名称">
<a-input placeholder="请输入日志名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编号">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
<a-form-model-item label="访问类型">
<a-select
:style="{ width: '170px' }"
allow-clear
placeholder="请选择访问类型"
v-model="query.visType"
>
<a-select-option
:key="item.code"
:value="item.code"
v-for="item in codes.visTypeDict"
>{{ item.value }}</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="是否成功">
<a-select
:style="{ width: '170px' }"
allow-clear
placeholder="请选择是否成功"
v-model="query.success"
>
<a-select-option value="true"></a-select-option>
<a-select-option value="false"></a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="操作时间">
<a-range-picker
:show-time="{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
}"
format="YYYY-MM-DD HH:mm:ss"
v-model="query.dates"
/>
</a-form-model-item>
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button
@click="
() => {
(query = {}), onQuery();
}
"
>重置</a-button
>
<a-button @click="() => {query = {}, onQuery()}">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
@@ -39,127 +58,91 @@
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<div class="yo-action-bar" slot="title">
<Auth auth="sysApp:delete">
<div class="yo-action-bar--actions">
<a-popconfirm
@confirm="sysVisLogDelete()"
placement="topRight"
title="确认清空日志?"
>
<a-button>清空日志</a-button>
</a-popconfirm>
</div>
</Auth>
</div>
<span slot="visType" slot-scope="text">
{{ visTypeFilter(text) }}
</span>
<span slot="success" slot-scope="text">
{{ successFilter(text) }}
</span>
<span slot="action" slot-scope="text, record">
<span slot="action" >
<a @click="onOpen('details-Form', record)">详情</a>
</span>
</span>
<Auth auth="sysVisLog:delete" slot="operator">
<div class="yo-action-bar--actions">
<a-popconfirm @confirm="onVisLogClear" placement="bottomLeft" title="是否确认清空日志">
<a-button>清空日志</a-button>
</a-popconfirm>
</div>
</Auth>
<span slot="visType" slot-scope="text">{{ bindCodeValue(text, 'visTypeDict') }}</span>
<span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
<a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
<a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
</a-descriptions>
</yo-table>
<details-Form ref="details-Form" />
</a-card>
<br />
</container>
</template>
<script>
import detailsForm from "./detailsForm";
import moment from 'moment';
export default {
components: {
detailsForm,
},
data() {
return {
query: {},
columns: [
{
title: "日志名称",
dataIndex: "name",
title: '日志名称',
dataIndex: 'name',
},
{
title: "访问类型",
dataIndex: "visType",
scopedSlots: { customRender: "visType" },
title: '访问类型',
dataIndex: 'visType',
scopedSlots: { customRender: 'visType' },
},
{
title: "是否成功",
dataIndex: "success",
scopedSlots: { customRender: "success" },
title: '是否成功',
dataIndex: 'success',
scopedSlots: { customRender: 'success' },
},
{
title: "ip",
dataIndex: "ip",
title: 'ip',
dataIndex: 'ip',
},
{
title: "浏览器",
dataIndex: "browser",
title: '浏览器',
dataIndex: 'browser',
},
{
title: "访问时间",
dataIndex: "visTime",
scopedSlots: { customRender: "visTime" },
title: '访问时间',
dataIndex: 'visTime',
scopedSlots: { customRender: 'visTime' },
},
{
title: "访问人",
dataIndex: "account",
},
{
title: "详情",
width: "200px",
dataIndex: "action",
scopedSlots: {
customRender: "action",
},
title: '访问人',
dataIndex: 'account',
},
],
visTypeDict: [],
successDict: [],
codes: {
visTypeDict: [],
},
};
},
created() {
this.onLoadCodes();
},
methods: {
visTypeFilter(result) {
// eslint-disable-next-line eqeqeq
const values = this.visTypeDict.filter((item) => item.code == result);
if (values.length > 0) {
return values[0].value;
}
},
sysVisLogDelete() {
this.$api.sysVisLogDelete().then((res) => {
if (res.success) {
this.$message.success("清空成功");
this.onReloadData();
} else {
this.$message.error("清空失败:" + res.message);
}
});
},
successFilter(result) {
// eslint-disable-next-line eqeqeq
const values = this.successDict.filter((item) => item.code == result);
if (values.length > 0) {
return values[0].value;
}
},
moment,
/**
* 必要的方法
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
const query = this.$_.cloneDeep(this.query);
if (query.dates && query.dates.length) {
query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
delete query.dates;
}
return this.$api
.sysVisLogPage({
...params,
...this.query,
...query,
})
.then((res) => {
return res.data;
@@ -186,59 +169,34 @@ export default {
* 加载字典数据时的必要方法
*/
onLoadCodes() {
this.$api
.$queue([
this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
this.$api.sysDictTypeDropDownWait({ code: "vis_type" }),
])
.then(([yesOrNo, commonStatus]) => {
this.visTypeDict = commonStatus.data;
this.successDict = yesOrNo.data;
});
this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'vis_type' })]).then(([commonStatus]) => {
this.codes.visTypeDict = commonStatus.data;
});
},
bindCodeValue(code, name) {
const c = this.codes
.find((p) => p.code == name)
.values.find((p) => p.code == code);
const c = this.codes[name].find((p) => p.code == code);
if (c) {
return c.value;
}
return null;
},
/**
* 有编辑新增功能的必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
},
onResult(success, message, successMessage) {
if (success) {
this.$message.success(successMessage);
this.onReloadData();
} else {
this.$refs.table.onLoaded();
this.$message.error(message);
}
},
onSetDefault(record) {
onVisLogClear() {
this.$refs.table.onLoading();
this.$api
.sysAppSetAsDefault({ id: record.id })
.then(({ success, message }) => {
this.onResult(success, message, "设置成功");
.sysVisLogDelete()
.then((res) => {
if (res.success) {
this.$message.success('清空成功');
this.onReloadData();
} else {
this.$message.error('清空失败:' + res.message);
}
})
.finally(() => {
this.$refs.table.onLoaded();
});
},
onDelete(record) {
this.$refs.table.onLoading();
this.$api.sysRoleDel(record).then(({ success, message }) => {
this.onResult(success, message, "删除成功");
});
},
},
};
</script>