city-gather-admin/src/views/device/terminal-manage/index.vue

<script setup lang="tsx">
import { fetchGetDeviceList } from '@/service/api/device/terminal-manage';
import { useTable } from '@/components/zt/Table/hooks/useTable';

const outColumns: NaiveUI.TableColumn<Api.device.manage>[] = [
  {
    key: 'connectorId',
    title: '接口ID',
    align: 'center'
  },
  {
    key: 'connectorName',
    title: '接口名称',
    align: 'center'
  },
  {
    key: 'stationName',
    title: '所属充电站',
    align: 'center'
  },
  {
    key: 'power',
    title: '总功率(kW)',
    align: 'center'
  },
  {
    key: 'equipmentId',
    title: '设备编码',
    align: 'center'
  },
  {
    key: 'equipmentName',
    title: '设备名称',
    align: 'center'
  },
  {
    key: 'parkNo',
    title: '车位号',
    align: 'center'
  },
  {
    key: 'nationalStandard',
    title: '国家标准',
    align: 'center'
  },
  {
    key: 'connectorTips',
    title: '充电提示语',
    align: 'center'
  }
];

const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'stationName',
        label: '所属站点',
        component: 'NInput'
      },
      {
        field: 'equipmentId',
        label: '设备编码',
        component: 'NInput'
      },
      {
        field: 'equipmentName',
        label: '设备名称',
        component: 'NInput'
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '充电终端管理',
    showAddButton: false
  }
});
</script>

<template>
  <LayoutTable>
    <ZTable
      :show-table-action="false"
      :columns="outColumns"
      :immediate="true"
      :api="fetchGetDeviceList"
      @register="registerTable"
    ></ZTable>
  </LayoutTable>
</template>

<style scoped></style>