lijing
45a758adea
- .main-container 去掉通道默认的 1px 描边（保留白底/圆角/阴影） - 24 个视图根容器剥离自带的 border/圆角/背景/padding——它与卡片 16px 叠加成 32px， 是「双层边框 + 空隙过大」的主因 - 学科管理不再 flex:1 把图例推到卡片底部；时段设置工具条去灰底，避免与表头双色带 - 教师管理页签 activeTab 统一为字符串，与 TabPane name 一致
153 lines
3.9 KiB
Vue
153 lines
3.9 KiB
Vue
<template>
|
||
<div class="page-wrapper yh-fill">
|
||
<div class="main-container">
|
||
<!-- 外层全屏容器，用于高度自适应 -->
|
||
<div class="page-wrap">
|
||
<!-- 顶部搜索栏 -->
|
||
<div class="search-wrap">
|
||
<div class="search-right">
|
||
<Input
|
||
v-model="keyword"
|
||
placeholder="请输入用户名、IP、模块或详细操作"
|
||
search
|
||
style="width:460px"
|
||
@on-search="searchData"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格自适应滚动容器（核心滚动区域） -->
|
||
<div class="table-scroll-wrap">
|
||
<Table
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
class="log-table"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 底部分页：固定在容器底部，不会随表格滚动 -->
|
||
<div class="pagination-wrap">
|
||
<span class="total-text">共 {{ total }} 条</span>
|
||
<Page
|
||
v-model="pageNum"
|
||
:total="total"
|
||
:page-size="pageSize"
|
||
:page-size-opts="[10, 20, 50, 100]"
|
||
show-sizer
|
||
@on-change="handlePageChange"
|
||
@on-page-size-change="handleSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'OperateLog',
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
|
||
tableColumns: [
|
||
{ title: '序号', type: 'index', align: 'center', width: 70 },
|
||
{ title: '用户', key: 'operator', align: 'center', width: 130 },
|
||
{ title: 'IP', key: 'ip', align: 'center', width: 150 },
|
||
{ title: '模块', key: 'module', align: 'center', width: 160 },
|
||
{ title: '详细操作', key: 'content', align: 'left' },
|
||
{
|
||
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'));
|
||
}
|
||
}
|
||
],
|
||
|
||
tableData: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadLogData();
|
||
},
|
||
methods: {
|
||
// 请求日志列表
|
||
loadLogData() {
|
||
const _this = this;
|
||
var item = {
|
||
keyword:_this.keyword,
|
||
page:_this.pageNum-1,
|
||
size:_this.pageSize
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.systemSearch, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.tableData = resp.data.content;
|
||
_this.total=resp.data.total;
|
||
} else {
|
||
_this.tableData = [];
|
||
}
|
||
});
|
||
},
|
||
searchData() {
|
||
this.pageNum = 1
|
||
this.loadLogData()
|
||
},
|
||
handlePageChange(page) {
|
||
this.pageNum = page
|
||
this.loadLogData()
|
||
},
|
||
handleSizeChange(size) {
|
||
this.pageSize = size
|
||
this.pageNum = 1
|
||
this.loadLogData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面撑满父容器高度，必须设置父级html、body高度100% */
|
||
.page-wrap {height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
|
||
|
||
.search-wrap {
|
||
flex-shrink: 0; /* 固定高度，不压缩 */
|
||
background: #f7f7f7;
|
||
margin-bottom: 16px;
|
||
border-radius: 4px;
|
||
}
|
||
.search-right {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 表格容器：自动填充剩余高度，内容超出滚动 */
|
||
.table-scroll-wrap {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
margin-bottom: 16px;
|
||
}
|
||
.log-table {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 分页区域：固定在底部，不参与滚动 */
|
||
.pagination-wrap {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.total-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
</style> |