refactor(components): extract component helpers

src/pages/alarm-page.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage, putNdmDeviceAlarmLog } from '@/apis/requests';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components/helper';
 import { FaultLevel } from '@/enums/fault-level';
 import { AlarmType } from '@/enums/alarm-type';
-import { DeviceType, DeviceTypeCode, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
+import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption, TagProps } from 'naive-ui';
+import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
 import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker, NTag, NPopconfirm } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, reactive, onBeforeMount, h, computed, watch } from 'vue';
@@ -101,9 +102,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '告警时间',
     key: 'alarmDate',
-    render: (rowData /* , rowIndex */) => {
-      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
-    },
+    render: renderAlarmDateCell,
   },
   {
     title: '车站',
@@ -116,44 +115,20 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '设备类型',
     key: 'deviceType',
-    render: (rowData) => {
-      const deviceTypeVal = tryGetDeviceTypeVal(rowData.deviceType);
-      if (!deviceTypeVal) return '-';
-      return DeviceTypeName[deviceTypeVal];
-    },
+    render: renderDeviceTypeCell,
   },
   { title: '设备名称', key: 'deviceName' },
   {
     title: '告警类型',
     key: 'alarmType',
     align: 'center',
-    render: (rowData) => {
-      const { alarmType } = rowData;
-      if (!alarmType) {
-        return '';
-      }
-      return h(NTag, { type: 'default' }, { default: () => AlarmType[alarmType] });
-    },
+    render: renderAlarmTypeCell,
   },
   {
     title: '故障级别',
     key: 'faultLevel',
     align: 'center',
-    render: (rowData) => {
-      const { faultLevel } = rowData;
-      if (!faultLevel) {
-        return '';
-      }
-      let type: TagProps['type'] = 'default';
-      if (faultLevel === '1') {
-        type = 'error';
-      } else if (faultLevel === '2') {
-        type = 'warning';
-      } else if (faultLevel === '3') {
-        type = 'info';
-      }
-      return h(NTag, { type }, { default: () => FaultLevel[faultLevel] });
-    },
+    render: renderFaultLevelCell,
   },
   // { title: '故障编码', key: 'faultCode', align: 'center' },
   // { title: '故障位置', key: 'faultLocation' },