FranklinWH-Toolbox/src/views/fault-record/common/OperationHistory.vue

<template>
  <div class="flex flex-col gap-2">
    <div class="flex gap-2 items-center">
      <span class="font-bold">操作历史</span>
      <span class="text-xs text-gray-500">（所有人共享{{ gatewaySn ? `，网关 ${gatewaySn}` : '' }}）</span>
      <div class="flex-1" />
      <NButton size="small" quaternary :loading="loading" @click="load">刷新</NButton>
    </div>
    <NDataTable
      size="small"
      remote
      :columns="columns"
      :data="rows"
      :loading="loading"
      :pagination="pagination"
      :row-key="(r: FaultRecordOpSummary) => r.id"
      :row-props="rowProps"
    />
  </div>
</template>

<script setup lang="ts">
import { h, reactive, ref, watch } from 'vue'
import { NButton, NDataTable, NTag, NTooltip, useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'

import { getFaultRecordOperations } from '@/service/faultRecord'
import type {
  FaultRecordEnv,
  FaultRecordKind,
  FaultRecordOpSummary,
} from '@/service/faultRecord/interface'

import { KIND_LABEL, STATUS_META, errText, fmtTime } from './constants'

const props = defineProps<{
  env: FaultRecordEnv
  kind: FaultRecordKind | string // 可多个，逗号分隔
  gatewaySn?: string
  refreshKey?: number
}>()
const emit = defineEmits<{ select: [row: FaultRecordOpSummary] }>()
const slots = defineSlots<{ actions?: (p: { row: FaultRecordOpSummary }) => any }>()

const message = useMessage()
const loading = ref(false)
const rows = ref<FaultRecordOpSummary[]>([])

const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  showSizePicker: true,
  pageSizes: [10, 20, 50],
  onChange: (p: number) => {
    pagination.page = p
    load()
  },
  onUpdatePageSize: (s: number) => {
    pagination.pageSize = s
    pagination.page = 1
    load()
  },
})

const columns: DataTableColumns<FaultRecordOpSummary> = [
  { title: '时间', key: 'createdAt', width: 160, render: (r) => fmtTime(r.createdAt) },
  { title: '操作人', key: 'operator', width: 110, ellipsis: { tooltip: true } },
  { title: '网关', key: 'gatewaySn', width: 180, ellipsis: { tooltip: true } },
  { title: '设备', key: 'deviceSn', width: 200, render: (r) => `${r.deviceType} ${r.deviceSn}` },
  { title: '操作', key: 'kind', width: 90, render: (r) => KIND_LABEL[r.kind] },
  { title: '参数', key: 'summary', ellipsis: { tooltip: true } },
  {
    title: '状态',
    key: 'status',
    width: 110,
    render: (r) => {
      const meta = STATUS_META[r.status]
      const tag = h(NTag, { type: meta.type, size: 'small' }, { default: () => meta.label })
      return r.error
        ? h(NTooltip, null, { trigger: () => tag, default: () => r.error })
        : tag
    },
  },
  {
    title: '',
    key: 'actions',
    width: 200,
    render: (r) =>
      h('div', { class: 'flex gap-1', onClick: (e: Event) => e.stopPropagation() }, [
        h(NButton, { size: 'tiny', onClick: () => emit('select', r) }, { default: () => '查看' }),
        slots.actions?.({ row: r }),
      ]),
  },
]

const rowProps = (r: FaultRecordOpSummary) => ({
  style: 'cursor: pointer',
  onClick: () => emit('select', r),
})

async function load() {
  loading.value = true
  try {
    const res = await getFaultRecordOperations(
      props.env,
      pagination.page,
      pagination.pageSize,
      props.gatewaySn ?? '',
      props.kind,
    )
    rows.value = res.data ?? []
    pagination.itemCount = res.total
  } catch (e) {
    message.error(`获取操作历史失败：${errText(e)}`)
  } finally {
    loading.value = false
  }
}

watch(
  () => [props.env, props.gatewaySn, props.kind, props.refreshKey],
  () => {
    pagination.page = 1
    load()
  },
  { immediate: true },
)

defineExpose({ load })
</script>