refactor(components): extract component helpers

src/components/dashboard-page/device-alarm-detail-modal.vue

@@ -2,15 +2,16 @@
 import type { Station } from '@/apis/domains';
 import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO, NdmDeviceAlarmLogVO, PageQueryExtra } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components/helper';
 import type { StationAlarmCounts } from '@/composables/query';
 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 { useQueryControlStore } from '@/stores/query-control';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps, type TagProps } from 'naive-ui';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
 import { computed, h, reactive, ref, toRefs, watch } from 'vue';
 
 interface Props {
@@ -49,18 +50,12 @@ 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: '设备类型',
     key: 'deviceType',
-    render: (rowData) => {
-      const deviceTypeVal = tryGetDeviceTypeVal(rowData.deviceType);
-      if (!deviceTypeVal) return '-';
-      return DeviceTypeName[deviceTypeVal];
-    },
+    render: renderDeviceTypeCell,
     filter: true,
     filterMultiple: true,
     filterOptions: Object.values(DeviceType).map((deviceType) => ({ label: DeviceTypeName[deviceType], value: deviceType })),
@@ -70,13 +65,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     title: '告警类型',
     key: 'alarmType',
     align: 'center',
-    render: (rowData) => {
-      const { alarmType } = rowData;
-      if (!alarmType) {
-        return '';
-      }
-      return h(NTag, { type: 'default' }, { default: () => AlarmType[alarmType] });
-    },
+    render: renderAlarmTypeCell,
     filter: true,
     filterMultiple: true,
     filterOptions: Object.keys(AlarmType).map((alarmType) => ({ label: AlarmType[alarmType], value: alarmType })),
@@ -85,21 +74,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     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,
     filter: true,
     filterMultiple: true,
     filterOptions: Object.keys(FaultLevel).map((faultLevel) => ({ label: FaultLevel[faultLevel], value: faultLevel })),