xfflod-resCenter/src/views/Serv/Watch/DataTable.tsx

import { Badge, Divider, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import moment from 'moment';
import React, { useMemo } from 'react';
import OpButton, { DelOpButton, EditOpButton } from '../../../components/crud/OpButton';
import { DirItem } from '../../../models/_/defs';
import { IContextProp } from './_';





const DataTable: React.FC<{
  ctx: IContextProp
}> = ({ ctx }) => {

  const { pager, crud } = ctx;
  const columns = useMemo<ColumnsType<DirItem>>(() => [
    { title: '序号', key: 'id', align: 'center', width: 80, render: (_1: any, _2: any, index: number) => ctx.pager.noRender(index) },
    { title: '服务名称', key: 'serviceName', dataIndex: 'serviceName', width: 120 },
    {
      title: '注册时间', key: 'registerTime', dataIndex: 'registerTime', align: 'center', width: 160,
      render:rec => (<span>2025-06-12 00:00:00</span>)
     },
    {
      title: '最近数据时间', key: 'maxTime', dataIndex: 'maxTime', align: 'center', width: 160,
      render: rec => (<span>{moment().format("YYYY-MM-DD HH:mm:ss")}</span>)
    },
    { title: '共享数据(条)', key: '共享数据', dataIndex: 'countVo', align: 'center', width: 120, render: val => val?.allCount },
    // { title: '共享站点数量', key: 'stNum', dataIndex: 'stNum', align: 'center', width: 120 },
    {
      title: '操作', key: 'op', align: 'center', width: 120, render: rec =>
      (<Space split={<Divider type="vertical" />}>
        <OpButton text='详细'></OpButton>
      </Space>
      )
    }
  ], []);

  return (
    <>
      <Table
        columns={columns}
        rowKey={row => row.id}
        {...pager.tableProps}
      />
    </>
  )
}

export default DataTable