init

2026-08-12 17:19:37 +08:00
commit e73d22744e
131 changed files with 66997 additions and 0 deletions
@@ -0,0 +1,157 @@
+<template>
+    <!-- 外层全屏容器，用于高度自适应 -->
+    <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
+          border
+          stripe
+          :columns="tableColumns"
+          :data="tableData"
+          class="log-table"
+        />
+      </div>
+  
+      <!-- 底部分页：固定在容器底部，不会随表格滚动 -->
+      <div class="pagination-wrap">
+        <span class="total-text">共 {{ total }} 条</span>
+        <Page
+          :current.sync="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>
+</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;
+    padding: 16px;
+    box-sizing: border-box;
+    background: #fff;
+  }
+  
+  .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>