group_web_merchant/src/views/accountRoleManagement/subAccountManagement/operationLog.vue

<template>
  <div class="operation-log-container">
    <!-- 返回按钮和标题 -->
    <div class="header-section">
      <el-button :icon="ArrowLeft" @click="handleBack"> 返回 </el-button>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="operation-tabs">
      <el-tab-pane label="账号操作记录" name="ACCOUNT" />
      <el-tab-pane label="角色操作记录" name="ROLE" />
    </el-tabs>

    <!-- 表格 -->
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      row-key="id"
      :pagination="true"
    />
  </div>
</template>

<script setup lang="tsx" name="operationLog">
import { ref, reactive, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { operationLog, type OperationLogItem } from "@/api/modules/accountRoleManagement";

// 路由
const router = useRouter();

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 当前激活的标签页
const activeTab = ref<"ACCOUNT" | "ROLE">("ACCOUNT");

// 初始化参数
const initParam = reactive({
  page: 1,
  size: 10,
  module: activeTab.value
});

// 数据回调处理
const dataCallback = (data: any) => {
  // 如果返回的是分页对象
  if (data.records) {
    return {
      list: data.records || [],
      total: data.total || 0
    };
  }
  // 默认返回
  return {
    list: [],
    total: 0
  };
};

// 请求接口
const getTableList = (params: any) => {
  return operationLog({
    page: params.pageNum || params.page || 1,
    size: params.pageSize || params.size || 10,
    account: params.account || "",
    endTime: params.endTime || "",
    module: activeTab.value,
    startTime: params.startTime || ""
  });
};

// 表格列配置
const columns = reactive<ColumnProps<OperationLogItem>[]>([
  {
    prop: "operationType",
    label: "操作记录",
    minWidth: 150
  },
  {
    prop: "operationTime",
    label: "操作时间",
    minWidth: 180
  },
  {
    prop: "operatorAccount",
    label: "操作账号",
    minWidth: 150,
    render: (scope: { row: OperationLogItem }) => {
      return scope.row.operatorAccount || "--";
    }
  },
  {
    prop: "operationContent",
    label: "操作记录详情",
    minWidth: 300
  }
]);

// 标签页切换
const handleTabChange = (tabName: string) => {
  activeTab.value = tabName as "ACCOUNT" | "ROLE";
  // 更新初始化参数
  initParam.module = activeTab.value;
  // 刷新表格
  proTable.value?.reset();
  proTable.value?.getTableList();
};

// 返回
const handleBack = () => {
  router.back();
};

// 监听标签页变化，更新初始化参数
watch(
  () => activeTab.value,
  newTab => {
    initParam.module = newTab;
  }
);
</script>

<style lang="scss" scoped>
.operation-log-container {
  min-height: calc(100vh - 84px);
  padding: 20px;
  background: #ffffff;
}
.header-section {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--el-text-color-primary);
  }
}
.operation-tabs {
  margin-bottom: 20px;
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
  :deep(.el-tabs__item.is-active) {
    font-weight: 500;
    color: var(--el-color-primary);
  }
  :deep(.el-tabs__active-bar) {
    background-color: var(--el-color-primary);
  }
}
</style>