From 1c28b8ff87ed5e63161801d0d737126a67dc711b Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Tue, 25 Nov 2025 13:19:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E6=8E=A2=E7=B4=A2-=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=97=A5=E5=BF=97=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/UserPermissions/LogDeepExplore.vue | 220 ++++++++++++++++++++++++++-
 1 file changed, 215 insertions(+), 5 deletions(-)

diff --git a/src/views/UserPermissions/LogDeepExplore.vue b/src/views/UserPermissions/LogDeepExplore.vue
index 17bcab3..9ed799b 100644
--- a/src/views/UserPermissions/LogDeepExplore.vue
+++ b/src/views/UserPermissions/LogDeepExplore.vue
@@ -1,13 +1,223 @@
 <template>
-  
+  <div class="page-container">
+    <!-- 头部 -->
+    <div class="button-group">
+      <el-button type="danger" @click="goback">返回上一页</el-button>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table 
+      :data="tableData"
+      style="width: 100%; margin-top: 20px;"
+      header-cell-class-name="table-header"
+      @sort-change="handleSortChange"
+      :default-sort="{ prop: null, order: null }" 
+      class="table-rounded" 
+      :loading="tableLoading" 
+    >
+      <el-table-column prop="id" label="序号" align="center" header-align="center" width="60">
+        <template #default="scope">
+          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="dccode" label="账号" align="center" header-align="center" width="120"/>
+      <el-table-column prop="name" label="姓名" align="center" header-align="center" width="150"/>
+      <el-table-column prop="module_name" label="模块名称" align="center" header-align="center" width="100"/>
+      <el-table-column prop="created_at" label="操作时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="remark" label="备注" align="center" header-align="center">
+        <template #default="scope">
+            <el-tooltip :content="scope.row.remark" placement="top">
+                <span class="note-ellipsis">
+                    {{ scope.row.remark }}
+                </span>
+            </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div class="demo-pagination-block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="datatotal"
+      />
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { ref, onMounted } from 'vue';
+import { logMListApi } from '../../api/userPermissions'
+import { useRoute, useRouter } from 'vue-router'; 
 
-}
+// token
+const token = localStorage.getItem('token')
+
+//获取路由实例
+const route = useRoute();
+const router = useRouter();
+
+// 全局账号
+const targetId = ref('');
+
+// 排序参数
+const sortProp = ref(null);
+const sortOrder = ref(null);
+
+// 表格数据
+const tableData = ref([]);
+const tableLoading = ref(false);
+const datatotal = ref(0);
+
+// 分页参数
+const currentPage = ref(1); 
+const pageSize = ref(15); 
+
+// 获取表格数据
+const logTableData = async (dccode) => {
+  try {
+    tableLoading.value = true;
+    const requestParams = {
+      token: token,
+      dccode: dccode, 
+      type: 3,
+      sort_field: sortProp.value,
+      sort_order: sortOrder.value,
+      page: currentPage.value,
+      page_size: pageSize.value     
+    };
+    const data = await logMListApi(requestParams);
+    tableData.value = data.list
+    datatotal.value = data.total
+  } catch (error) {
+    console.error('获取表格数据失败：', error);
+    tableData.value = [];
+    datatotal.value = 0;
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 组件挂载时
+onMounted(() => {
+  targetId.value = route.query.dccode;
+  logTableData(targetId.value)
+});
+
+// 返回按钮
+const goback = () => {
+  router.push({
+    path: "/userPermissions/module",
+    query: { taber: "DeepExplore" }
+  });
+};
+
+// 分页方法
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  logTableData(targetId.value);
+  console.log(`每页 ${val} 条`);
+};
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+  logTableData(targetId.value);
+  console.log(`当前页: ${val}`);
+};
+
+// 排序事件
+const handleSortChange = (sort) => {
+  const { prop, order } = sort;
+
+  if (!['created_at', 'expire_time'].includes(prop)) return;
+
+  // 覆盖排序状态（实现二选一）
+  sortProp.value = prop; // 保存当前排序字段
+  sortOrder.value = order; // 保存当前排序方式
+  
+  logTableData(targetId.value);
+};
 </script>
 
-<style>
+<style scoped>
+/* 父容器 */
+.page-container {
+  position: relative;
+  min-height: 600px; 
+}
+
+/* 按钮组 */
+.button-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+/* 按钮样式 */
+.button-group .el-button {
+  padding: 6px 10px !important;
+  font-size: 14px !important;
+  height: 36px !important;
+}
+
+/* 表格样式 */
+.table-rounded {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid #e4e7ed !important;
+}
+
+.table-header {
+  text-align: center !important;
+  font-weight: 800 !important;
+  font-size: 15px !important;
+  color: #333 !important;
+  background-color: #f8f9fa !important;
+}
 
+.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__header th.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__row:hover .el-table__cell {
+  background-color: #fafafa !important;
+}
+
+/* 备注 */
+.note-ellipsis {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap; 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+  padding: 0 4px;
+}
+
+/* 分页组件 */
+.demo-pagination-block {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  align-items: center;
+  gap: 16px;
+  margin-top: 10px;
+  border-radius: 0 0 3px 3px;
+  border-top: 1px solid #EAEAEA;
+  background: #FEFBFB;
+  box-sizing: border-box;
+}
 </style>
\ No newline at end of file