deepChartBack/src/views/UserPermissions/LogDeepExplore.vue

<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="80">
        <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="[10, 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')

//获取路由实例
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(10); 

// 获取表格数据
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 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;
  min-height: 800px;
}

.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>