yifengyide/src/views/configuration/index.vue

<template>
  <lay-container style="padding: 20px">
    <lay-card>
      <div style="padding: 10px">
        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">登录日志列表</span>
      </div>
      <lay-table size="lg" ref="tableRef" :columns="columns" :data-source="dataSource">
        <template v-slot:event_type="{ data }">
          <span :style="{ color: data.event_type === '登录' ? '#67C23A' : '#409EFF' }">
            {{ data.event_type }}
          </span>
        </template>
      </lay-table>
    </lay-card>
  </lay-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { layer } from '@layui/layer-vue'

// 定义接口类型
interface LoginLog {
  id: number
  department: string      // 科室
  record_time: string    // 记录时间
  login_name: string     // 登录名
  username: string       // 用户名
  ip_address: string     // 登录IP
  event_type: string     // 事件类型（登录/登出）
  event_content: string  // 事件内容
  device_info: string    // 设备信息
}

// 列表数据
const dataSource = ref<LoginLog[]>([])

// 表格列定义
const columns = [
  {
    title: "科室",
    width: "120px",
    key: "department"
  },
  {
    title: "记录时间",
    width: "180px",
    key: "record_time"
  },
  {
    title: "登录名",
    width: "120px",
    key: "login_name"
  },
  {
    title: "用户名",
    width: "120px",
    key: "username"
  },
  {
    title: "登录IP",
    width: "150px",
    key: "ip_address"
  },
  {
    title: "事件类型",
    width: "100px",
    key: "event_type",
    customSlot: 'event_type'
  },
  {
    title: "事件内容",
    width: "200px",
    key: "event_content"
  },
  {
    title: "设备信息",
    width: "250px",
    key: "device_info"
  }
]

onMounted(() => {
  getLoginLogs()
})

// 获取登录日志数据
const getLoginLogs = () => {
  // 这里替换为实际的API调用
  // getLoginLogList().then((res) => {
  //   if (res.code === 1) {
  //     dataSource.value = res.data
  //   } else {
  //     layer.msg(res.msg, {icon: 2})
  //   }
  // })

  // 模拟数据
  dataSource.value = [
    {
      id: 1,
      department: '内科',
      record_time: '2024-03-20 10:30:45',
      login_name: 'admin',
      username: '管理员',
      ip_address: '192.168.1.100',
      event_type: '登录',
      event_content: '用户登录成功',
      device_info: 'Chrome 122.0.0.0 / Windows 10'
    },
    {
      id: 2,
      department: '外科',
      record_time: '2024-03-20 09:15:22',
      login_name: 'user1',
      username: '张医生',
      ip_address: '192.168.1.101',
      event_type: '登出',
      event_content: '用户主动登出',
      device_info: 'Firefox 123.0 / MacOS'
    }
  ]
}
</script>

<style scoped></style>