deepMate-操作日志完成

src/views/UserPermissions/LogDeepMate.vue

@@ -1,13 +1,209 @@
 <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"/>
+        <el-table-column prop="name" label="姓名" align="center" header-align="center"/>
+        <el-table-column prop="module_name" label="模块名称" align="center" header-align="center"/>
+        <el-table-column prop="token_change_num" label="token数量" align="center" header-align="center"/>
+        <el-table-column prop="created_at" label="操作时间" align="center" header-align="center" sortable="custom"/>
+    </el-table>
 
-<script>
-export default {
+    <!-- 分页组件 -->
+    <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 setup>
+import { ref, onMounted } from 'vue';
+import { logMListApi } from '../../api/userPermissions'
+import { useRoute, useRouter } from 'vue-router'; 
+
+// token
+const token = localStorage.getItem('token')
+
+// 组件挂载时
+onMounted(() => {
+  targetId.value = route.query.dccode;
+  logTableData(targetId.value)
+});
+
+// 获取路由实例
+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: 2,
+      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;
   }
+};
+
+// 返回按钮
+const goback = () => {
+  router.push({
+    path: "/userPermissions/module",
+    query: { taber: "DeepMate" }
+  });
+};
+
+// 分页方法
+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;
+  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>