nuclear-detection-frontend/src/components/DetailTable.vue

<template>
  <t-table rowKey="id" :data="data" :columns="columns" bordered />
</template>

<script setup lang="jsx">
import { computed, ref } from 'vue'
import { useImageStore } from '@/store'
import moment from 'moment'
const imageStore = useImageStore()
const data = computed(() => {
  const res = { ...imageStore.coreInfo }
  res.nuclearCoreName = imageStore.nuclearCoreName
  res.operatorName = imageStore.operatorName
  res.nuclearStationName = imageStore.nuclearStationName
  return [res]
})
const columns = ref([
  {
    colKey: 'operatorName',
    title: '操作员',
    width: 120,
  },
  {
    colKey: 'serialNumber',
    width: 120,
    title: '核查坐标',
    cell: (h, { row }) => (row.serialNumber ? row.serialNumber : '---'),
  },
  {
    colKey: 'firstSign',
    title: '坐标信息',
    width: 120,
    cell: (h, { row }) =>
      row.firstSign && row.secondSign ? (
        <div>
          <p>{row.firstSign?.substr(-4)}</p>
          <p>{row.secondSign?.substr(-4)}</p>
        </div>
      ) : (
        '---'
      ),
  },
  {
    colKey: 'result',
    title: '核对结果',
    cell: (h, { row }) => {
      if (row.result == 1) {
        return (
          <div>
            <p>{row.resultSerial}</p>
            <p>正确</p>
          </div>
        )
      } else if (row.result == 2) {
        return (
          <div>
            <p>{row.resultSerial}</p>
            <p>错误</p>
          </div>
        )
      } else {
        return '---'
      }
    },
  },
  {
    colKey: 'checkTime',
    title: '核对时间',
    cell: (h, { row }) =>
      row.checkTime ? moment(checkTime).format('YYYY-MM-DD HH:mm') : '---',
  },
  {
    colKey: 'nuclearStationName',
    title: '核电站名称',
  },
  {
    colKey: 'nuclearCoreName',
    title: '核反应堆名称',
  },
])
</script>

<style></style>