feat: 优化车站状态页面的操作栏交互逻辑

src/composables/station/use-batch-actions.ts

@@ -0,0 +1,104 @@
+import { type Station } from '@/apis';
+import { computed, ref, watch, type Ref } from 'vue';
+
+type BatchActionKey = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr';
+
+type BatchAction = {
+  label: string;
+  key: BatchActionKey;
+  active: boolean;
+};
+
+export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<AbortController | undefined>) => {
+  const batchActions = ref<BatchAction[]>([
+    {
+      label: '导出设备状态',
+      key: 'export-icmp',
+      active: false,
+    },
+    {
+      label: '导出录像诊断',
+      key: 'export-record',
+      active: false,
+    },
+    {
+      label: '同步摄像机',
+      key: 'sync-camera',
+      active: false,
+    },
+    {
+      label: '同步录像机通道',
+      key: 'sync-nvr',
+      active: false,
+    },
+  ]);
+
+  const selectedAction = computed(() => {
+    return batchActions.value.find((action) => action.active);
+  });
+
+  const selectableStations = computed(() => {
+    if (!selectedAction.value) return [];
+    return stations.value;
+  });
+
+  const stationSelection = ref<Record<Station['code'], boolean>>({});
+
+  const toggleSelectAction = (action: BatchAction) => {
+    batchActions.value.forEach((batchAction) => {
+      if (batchAction.key === action.key) {
+        if (batchAction.active) stationSelection.value = {};
+        batchAction.active = !batchAction.active;
+      } else {
+        batchAction.active = false;
+      }
+    });
+  };
+
+  const toggleSelectAllStations = (checked: boolean) => {
+    if (!checked) {
+      stationSelection.value = {};
+      return;
+    }
+    selectableStations.value.forEach((station) => {
+      stationSelection.value[station.code] = checked;
+    });
+  };
+
+  watch(selectedAction, () => {
+    toggleSelectAllStations(false);
+  });
+
+  const confirmAction = (callbacks: Record<BatchActionKey, () => void>) => {
+    const { key } = selectedAction.value ?? {};
+    if (!key) return;
+    const noStationSeleted = !Object.values(stationSelection.value).some((selected) => selected);
+    if (noStationSeleted) {
+      window.$message.warning('请选择车站');
+      return;
+    }
+    callbacks[key]();
+  };
+
+  const cancelAction = () => {
+    abortController?.value?.abort();
+    stationSelection.value = {};
+    batchActions.value.forEach((batchAction) => {
+      batchAction.active = false;
+    });
+  };
+
+  return {
+    batchActions,
+    selectedAction,
+
+    selectableStations,
+    stationSelection,
+
+    toggleSelectAction,
+    toggleSelectAllStations,
+
+    confirmAction,
+    cancelAction,
+  };
+};