yg-yygl 0.0.1

package/src/views/sys/log/index.vue

@@ -0,0 +1,607 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  BusinessPageTabItem,
+  IconActionItem,
+} from '@udp/component-ui';
+
+import type { LoginLogResponse, OperateLogResponse } from '../../../api/log/types';
+
+import { computed, h, onMounted, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  BusinessPageTabs,
+  Drawer,
+  IconActionGroup,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { ElMessage, ElTag } from 'element-plus';
+
+import {
+  getLoginLogPage,
+  getOperateLogById,
+  getOperateLogPage,
+} from '../../../api/log';
+import { StatusTag } from '../../../components/custom-tags';
+import { MainContainer } from '../../../components/main-container';
+
+import OperateLogDetail from './components/operate-log-detail.vue';
+
+// 当前激活的Tab
+const activeTab = ref('login');
+
+// 详情抽屉
+const detailDrawerVisible = ref(false);
+const detailData = ref<null | OperateLogResponse>(null);
+
+// 登录日志搜索参数和配置
+const loginSearchParams = ref({});
+const loginFilterItems: BusinessFilterItem[] = [
+  {
+    prop: 'keyword',
+    type: 'input',
+    width: 260,
+    placeholder: '请输入登录账号/IP/设备',
+  },
+  {
+    prop: 'loginType',
+    label: '登录类型',
+    type: 'select',
+    options: [
+      { label: '登录', value: 0 },
+      { label: '登出', value: 1 },
+    ],
+    placeholder: '请选择登录类型',
+  },
+  {
+    prop: 'loginStatus',
+    label: '登录状态',
+    type: 'select',
+    options: [
+      { label: '成功', value: 1 },
+      { label: '失败', value: 0 },
+    ],
+    placeholder: '请选择登录状态',
+  },
+  {
+    prop: 'loginTimeRange',
+    label: '登录时间',
+    type: 'daterange',
+    width: 360,
+    props: {
+      type: 'datetimerange',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      teleported: true,
+      placement: 'bottom-end',
+      popperOptions: {
+        strategy: 'fixed',
+        modifiers: [
+          {
+            name: 'preventOverflow',
+            options: {
+              boundary: 'viewport',
+              padding: 8,
+            },
+          },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: [
+                'bottom-end',
+                'top-end',
+                'bottom-start',
+                'top-start',
+              ],
+            },
+          },
+        ],
+      },
+    },
+    placeholder: '请选择时间范围',
+  },
+];
+
+// 操作日志搜索参数和配置
+const operateSearchParams = ref({});
+const operateFilterItems: BusinessFilterItem[] = [
+  {
+    prop: 'keyword',
+    type: 'input',
+    width: 280,
+    placeholder: '请输入操作账号/IP/设备/请求地址',
+  },
+  {
+    prop: 'requestMethod',
+    label: '请求方式',
+    type: 'select',
+    options: [
+      { label: 'GET', value: 'GET' },
+      { label: 'POST', value: 'POST' },
+      { label: 'PUT', value: 'PUT' },
+      { label: 'DELETE', value: 'DELETE' },
+    ],
+    placeholder: '请选择请求方式',
+  },
+  {
+    prop: 'operateStatus',
+    label: '操作状态',
+    type: 'select',
+    options: [
+      { label: '成功', value: 0 },
+      { label: '失败', value: 1 },
+    ],
+    placeholder: '请选择操作状态',
+  },
+  {
+    prop: 'operateTimeRange',
+    label: '操作时间',
+    type: 'daterange',
+    width: 360,
+    props: {
+      type: 'datetimerange',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    placeholder: '请选择时间范围',
+  },
+];
+
+// 登录日志API配置
+const loginApi = {
+  list: ({ model, current, size }: any) => {
+    // 处理时间范围se
+    let startTime = null;
+    let endTime = null;
+
+    if (model.loginTimeRange && Array.isArray(model.loginTimeRange)) {
+      startTime = model.loginTimeRange[0];
+      endTime = model.loginTimeRange[1];
+    }
+
+    const pageParam = {
+      model: {
+        keyword: model.keyword || undefined,
+        loginType: model.loginType === undefined ? undefined : model.loginType,
+        loginStatus:
+          model.loginStatus === undefined ? undefined : model.loginStatus,
+        startTime,
+        endTime,
+      },
+      current: current || 1,
+      size: size || 10,
+    };
+    return getLoginLogPage(pageParam);
+  },
+};
+
+// 操作日志API配置
+const operateApi = {
+  list: ({ model, current, size }: any) => {
+    // 处理时间范围
+    let startTime = null;
+    let endTime = null;
+
+    if (model.operateTimeRange && Array.isArray(model.operateTimeRange)) {
+      startTime = model.operateTimeRange[0];
+      endTime = model.operateTimeRange[1];
+    }
+
+    const pageParam = {
+      model: {
+        keyword: model.keyword || undefined,
+        requestMethod: model.requestMethod || undefined,
+        operateStatus:
+          model.operateStatus === undefined ? undefined : model.operateStatus,
+        startTime,
+        endTime,
+      },
+      current: current || 1,
+      size: size || 10,
+    };
+    return getOperateLogPage(pageParam);
+  },
+};
+
+// 登录日志useTable hook
+const {
+  loading: loginLoading,
+  data: loginData,
+  pagination: loginPagination,
+  refresh: loginRefresh,
+  reset: loginReset,
+  search: loginSearch,
+  handleSizeChange: loginHandleSizeChange,
+  handleCurrentPageChange: loginHandleCurrentPageChange,
+} = useTable({
+  api: loginApi,
+  immediate: false, // 不自动加载数据
+});
+
+// 操作日志useTable hook
+const {
+  loading: operateLoading,
+  data: operateData,
+  pagination: operatePagination,
+  refresh: operateRefresh,
+  reset: operateReset,
+  search: operateSearch,
+  handleSizeChange: operateHandleSizeChange,
+  handleCurrentPageChange: operateHandleCurrentPageChange,
+} = useTable({
+  api: operateApi,
+  immediate: false, // 不自动加载数据
+});
+
+// 登录日志表格列配置
+const loginColumns = [
+  {
+    prop: 'loginType',
+    label: '登录类型',
+    width: 100,
+    render: ({ row }: { row: LoginLogResponse }) =>
+      h(
+        ElTag,
+        {
+          type: row.loginType === 0 ? 'primary' : 'warning',
+          size: 'small',
+        },
+        () => (row.loginType === 0 ? '登录' : '登出'),
+      ),
+  },
+  { prop: 'loginUser', label: '登录账号', minWidth: 120 },
+  { prop: 'loginIp', label: '登录IP', width: 140 },
+  { prop: 'loginDevice', label: '登录设备', minWidth: 150 },
+  { prop: 'loginTime', label: '登录时间', width: 180 },
+  {
+    prop: 'loginStatus',
+    label: '登录状态',
+    width: 100,
+    render: ({ row }: { row: LoginLogResponse }) =>
+      h(StatusTag, {
+        value: row.loginStatus,
+        activeValue: 1,
+        inactiveValue: 0,
+        activeText: '成功',
+        inactiveText: '失败',
+      }),
+  },
+  { prop: 'loginDescribe', label: '登录描述', minWidth: 150 },
+];
+
+// 操作日志表格列配置
+const operateColumns = [
+  { prop: 'operateUser', label: '操作账号', minWidth: 120 },
+  { prop: 'operateIp', label: '操作IP', width: 140 },
+  {
+    prop: 'type',
+    label: '日志类型',
+    width: 100,
+    render: ({ row }: { row: OperateLogResponse }) =>
+      h(StatusTag, {
+        value: row.type,
+        activeValue: 'application',
+        inactiveValue: 'plat',
+        activeText: '应用日志',
+        inactiveText: '平台日志',
+      }),
+  },
+  {
+    prop: 'clientType',
+    label: '客户端类型',
+    width: 100,
+    render: ({ row }: { row: OperateLogResponse }) =>
+      h(StatusTag, {
+        value: row.clientType || 'app',
+        activeValue: 'web',
+        inactiveValue: 'app',
+        activeText: 'WEB端',
+        inactiveText: 'APP端',
+      }),
+  },
+  { prop: 'operateDevice', label: '操作设备', minWidth: 150 },
+  { prop: 'operateTime', label: '操作时间', width: 180 },
+  {
+    prop: 'requestMethod',
+    label: '请求方式',
+    width: 100,
+    render: ({ row }: { row: OperateLogResponse }) =>
+      h(
+        ElTag,
+        {
+          type: getMethodTagType(row.requestMethod) as
+            | 'danger'
+            | 'info'
+            | 'primary'
+            | 'success'
+            | 'warning',
+          size: 'small',
+        },
+        () => row.requestMethod,
+      ),
+  },
+  { prop: 'requestUrl', label: '请求地址', minWidth: 200 },
+  {
+    prop: 'operateStatus',
+    label: '操作状态',
+    width: 100,
+    render: ({ row }: { row: OperateLogResponse }) =>
+      h(StatusTag, {
+        value: row.operateStatus,
+        activeValue: 0,
+        inactiveValue: 1,
+        activeText: '成功',
+        inactiveText: '失败',
+      }),
+  },
+];
+
+const loginCardOptions = ref({
+  title: 'loginUser',
+  icon: 'mdi:login',
+  columns: [
+    {
+      prop: 'loginType',
+      label: '登录类型',
+      className: 'w-full truncate',
+      render: ({ row }: { row: LoginLogResponse }) =>
+        h(
+          ElTag,
+          {
+            type: row.loginType === 0 ? 'primary' : 'warning',
+            size: 'small',
+          },
+          () => (row.loginType === 0 ? '登录' : '登出'),
+        ),
+    },
+    { prop: 'loginIp', label: '登录IP', className: 'w-full truncate' },
+    { prop: 'loginDevice', label: '登录设备', className: 'w-full truncate' },
+    { prop: 'loginTime', label: '登录时间', className: 'w-full truncate' },
+    {
+      prop: 'loginStatus',
+      label: '登录状态',
+      className: 'w-full truncate',
+      render: ({ row }: { row: LoginLogResponse }) =>
+        h(StatusTag, {
+          value: row.loginStatus,
+          activeValue: 1,
+          inactiveValue: 0,
+          activeText: '成功',
+          inactiveText: '失败',
+        }),
+    },
+  ],
+  showActions: false,
+});
+
+const operateCardOptions = ref({
+  title: 'operateUser',
+  icon: 'mdi:file-document-outline',
+  columns: [
+    { prop: 'operateIp', label: '操作IP', className: 'w-full truncate' },
+    {
+      prop: 'type',
+      label: '日志类型',
+      className: 'w-full truncate',
+      render: ({ row }: { row: OperateLogResponse }) =>
+        h(StatusTag, {
+          value: row.type,
+          activeValue: 'application',
+          inactiveValue: 'plat',
+          activeText: '应用日志',
+          inactiveText: '平台日志',
+        }),
+    },
+    { prop: 'operateDevice', label: '操作设备', className: 'w-full truncate' },
+    { prop: 'operateTime', label: '操作时间', className: 'w-full truncate' },
+    {
+      prop: 'requestMethod',
+      label: '请求方式',
+      className: 'w-full truncate',
+      render: ({ row }: { row: OperateLogResponse }) =>
+        h(
+          ElTag,
+          {
+            type: getMethodTagType(row.requestMethod) as
+              | 'danger'
+              | 'info'
+              | 'primary'
+              | 'success'
+              | 'warning',
+            size: 'small',
+          },
+          () => row.requestMethod,
+        ),
+    },
+  ],
+  showActions: true,
+});
+
+// 获取请求方式标签类型
+const getMethodTagType = (method: string) => {
+  const typeMap: Record<string, string> = {
+    GET: 'success',
+    POST: 'primary',
+    PUT: 'warning',
+    DELETE: 'danger',
+  };
+  return typeMap[method] || 'info';
+};
+
+// 查看操作日志详情
+const handleViewDetail = async (row: OperateLogResponse) => {
+  try {
+    const response = await getOperateLogById({ id: String(row.id) });
+    detailData.value = response;
+    detailDrawerVisible.value = true;
+  } catch (error) {
+    console.error('获取操作日志详情失败:', error);
+    ElMessage.error('获取详情失败');
+  }
+};
+
+// 记录已加载的tab
+const loadedTabs = ref(new Set<string>());
+
+// Tab切换
+const handleTabChange = (tabName: string) => {
+  activeTab.value = tabName;
+
+  // 只有在首次切换到该tab时才加载数据
+  if (!loadedTabs.value.has(tabName)) {
+    loadedTabs.value.add(tabName);
+    if (tabName === 'login') {
+      loginRefresh();
+    } else {
+      operateRefresh();
+    }
+  }
+};
+
+// 刷新当前Tab数据
+const refresh = () => {
+  if (activeTab.value === 'login') {
+    loginRefresh();
+  } else {
+    operateRefresh();
+  }
+};
+
+const tabItems = computed<BusinessPageTabItem[]>(() => [
+  { label: '登录日志', value: 'login' },
+  { label: '操作日志', value: 'operate' },
+]);
+
+const operateActionBtns: IconActionItem[] = [
+  {
+    key: 'detail',
+    label: '详情',
+    icon: 'mdi:eye-outline',
+    onClick: (row: any) => handleViewDetail(row as OperateLogResponse),
+  },
+];
+
+const handleLoginFilterSearch = (params: Record<string, any>) => {
+  loginSearch((loginSearchParams.value = params));
+};
+
+const handleOperateFilterSearch = (params: Record<string, any>) => {
+  operateSearch((operateSearchParams.value = params));
+};
+
+const handleLoginFilterReset = () => {
+  loginReset();
+};
+
+const handleOperateFilterReset = () => {
+  operateReset();
+};
+
+// 初始化
+onMounted(() => {
+  // 触发默认tab的数据加载
+  handleTabChange(activeTab.value);
+});
+</script>
+
+<template>
+  <MainContainer>
+    <div class="bg-background flex h-full w-full flex-col overflow-hidden">
+      <BusinessPageTabs
+        v-model="activeTab"
+        :items="tabItems"
+        @change="handleTabChange"
+      />
+      <BusinessFilterBar
+        v-if="activeTab === 'login'"
+        v-model="loginSearchParams"
+        :items="loginFilterItems"
+        :loading="loginLoading"
+        @search="handleLoginFilterSearch"
+        @reset="handleLoginFilterReset"
+      />
+      <BusinessFilterBar
+        v-else
+        v-model="operateSearchParams"
+        :items="operateFilterItems"
+        :loading="operateLoading"
+        @search="handleOperateFilterSearch"
+        @reset="handleOperateFilterReset"
+      />
+
+      <Table
+        v-if="activeTab === 'login'"
+        :data="loginData"
+        :columns="loginColumns"
+        :card-options="loginCardOptions"
+        :loading="loginLoading"
+        :pagination="loginPagination"
+        show-toolbar
+        show-pagination
+        :show-layout="true"
+        layout-type="table"
+        @refresh="loginRefresh"
+        @size-change="loginHandleSizeChange"
+        @current-page-change="loginHandleCurrentPageChange"
+      />
+
+      <Table
+        v-else
+        :data="operateData"
+        :columns="operateColumns"
+        :card-options="operateCardOptions"
+        :loading="operateLoading"
+        :pagination="operatePagination"
+        show-toolbar
+        show-action
+        show-pagination
+        :show-layout="true"
+        layout-type="table"
+        action-width="84px"
+        @refresh="operateRefresh"
+        @size-change="operateHandleSizeChange"
+        @current-page-change="operateHandleCurrentPageChange"
+      >
+        <template #action="{ row }">
+          <IconActionGroup :actions="operateActionBtns" :row="row" />
+        </template>
+        <template #card-actions="{ row }">
+          <IconActionGroup :actions="operateActionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+
+    <!-- 操作日志详情抽屉 -->
+    <Drawer
+      v-model="detailDrawerVisible"
+      title="操作日志详情"
+      type="view"
+      size="600px"
+      :show-confirm-button="false"
+      cancel-text="关闭"
+    >
+      <OperateLogDetail v-if="detailData" :data="detailData" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.text-gray-400 {
+  color: #9ca3af;
+}
+</style>