lijing
a99b3073cf
- App 不统一包卡片（会与页面级卡片叠加），改由各页面根节点提供，与 Notice 一致 - 25 个视图套 .page-wrapper.yh-fill > .main-container；日志管理重写为 .search-wrap + .table-region + .page-panel 规范结构（卡片自动转 flex 纵向） - 新增 element_height mixin：ResizeObserver 实测 .table-region 高度喂 Table， 替代视口高度减常量的旧模型 - self_viewport 高度基准扣除卡片留白 64px，避免表格溢出被卡片裁切 - .env.dev 恢复真实后端地址
144 lines
3.6 KiB
Vue
144 lines
3.6 KiB
Vue
<template>
|
||
<!-- 内容卡片骨架（通道 §4.4）：page-wrapper.yh-fill > main-container
|
||
卡片直接被 .page-panel（分页脚）识别为「表格卡」，转 flex 纵向；
|
||
工具/筛选/分页固定高，.table-region 撑满剩余高度 -->
|
||
<div class="page-wrapper yh-fill">
|
||
<div class="main-container">
|
||
<!-- 搜索区（卡片内 filterbar 语义） -->
|
||
<div class="search-wrap fix">
|
||
<Input
|
||
class="fr"
|
||
style="width:460px"
|
||
v-model="searchKeyword"
|
||
placeholder="请输入用户名、IP、模块或详细操作"
|
||
search
|
||
suffix="ios-search"
|
||
@on-search="handleSearch"
|
||
@on-clear="handleSearch"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 表格区：实测高度喂 Table，避免卡内溢出 -->
|
||
<div class="table-region" ref="tableRegion">
|
||
<Table
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
:height="tableRegionHeight"
|
||
></Table>
|
||
</div>
|
||
|
||
<!-- 分页脚：正常流贴底，不再绝对定位 -->
|
||
<div class="page-panel">
|
||
<span class="total-text">共 {{ total }} 条</span>
|
||
<Page
|
||
v-model="pageNum"
|
||
:page-size="pageSize"
|
||
:total="total"
|
||
:page-size-opts="[10,20,50,100]"
|
||
show-sizer
|
||
@on-change="pageChange"
|
||
@on-page-size-change="sizeChange"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { element_height } from "@/mixins/element_height";
|
||
|
||
export default {
|
||
name: "OperationLogPage",
|
||
mixins: [element_height],
|
||
data() {
|
||
return {
|
||
// 搜索关键词
|
||
searchKeyword: "",
|
||
|
||
// 分页参数
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
|
||
// 表格配置列
|
||
tableColumns: [],
|
||
// 表格数据
|
||
tableData: []
|
||
};
|
||
},
|
||
created() {
|
||
this.initTableColumn();
|
||
this.loadLogData();
|
||
},
|
||
methods: {
|
||
// 初始化配置式表格列
|
||
initTableColumn() {
|
||
this.tableColumns = [
|
||
{ title: "序号", type: "index", align: "center", width: 70 },
|
||
{ title: "模块", key: "module", align: "center", width: 160 },
|
||
{ title: "详细操作", key: "content", align: "left" },
|
||
{ title: "用户", key: "operator", align: "center", width: 130 },
|
||
{ title: "IP", key: "ip", align: "center", width: 150 },
|
||
{
|
||
title: "时间",
|
||
key: "operateTime",
|
||
align: "center",
|
||
width: 190,
|
||
render: (h, params) => {
|
||
return h(
|
||
"div",
|
||
{ style: "line-height: 56px" },
|
||
this.$utils.dateFormat(params.row.operateTime, "yyyy-MM-dd HH:mm:ss")
|
||
);
|
||
}
|
||
}
|
||
];
|
||
},
|
||
|
||
// 请求日志列表
|
||
loadLogData() {
|
||
const _this = this;
|
||
var item = {
|
||
keyword: _this.searchKeyword,
|
||
page: _this.pageNum - 1,
|
||
size: _this.pageSize
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getlogsearch, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.tableData = resp.data.content;
|
||
_this.total = resp.data.total;
|
||
} else {
|
||
_this.tableData = [];
|
||
}
|
||
});
|
||
},
|
||
|
||
// 搜索
|
||
handleSearch() {
|
||
this.pageNum = 1;
|
||
this.loadLogData();
|
||
},
|
||
|
||
// 页码切换
|
||
pageChange(page) {
|
||
this.pageNum = page;
|
||
this.loadLogData();
|
||
},
|
||
// 每页条数修改
|
||
sizeChange(size) {
|
||
this.pageSize = size;
|
||
this.pageNum = 1;
|
||
this.loadLogData();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.total-text {
|
||
color: var(--text-2, #666);
|
||
font-size: 13px;
|
||
}
|
||
</style>
|