feat(device-header-card): probe button

src/components/device-page/device-card/current-diag-card/device-header-card.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import type { NdmDeviceResultVO } from '@/apis/models';
+import { getDeviceDetailApi, probeDeviceApi } from '@/apis/requests';
 import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
-import { NButton, NCard, NFlex, NTag } from 'naive-ui';
+import { useLineDevicesStore } from '@/stores/line-devices';
+import { useMutation } from '@tanstack/vue-query';
+import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
+import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 
 const props = defineProps<{
+  stationCode: string;
   device: NdmDeviceResultVO;
 }>();
 
 // const emit = defineEmits<{}>();
 
-const { device } = toRefs(props);
+const { stationCode, device } = toRefs(props);
 
 const type = computed(() => {
   const deviceTypeVal = tryGetDeviceTypeVal(device.value.deviceType);
@@ -39,6 +44,34 @@ const onClickOpenMgmtPage = () => {
     }
   }
 };
+
+const canProbe = computed(() => device.value.snmpEnabled);
+
+const { mutate: probeDevice, isPending: probing } = useMutation({
+  mutationFn: async () => {
+    await probeDeviceApi(stationCode.value, device.value);
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
+const { mutate: getDeviceDetail, isPending: loading } = useMutation({
+  mutationFn: async () => {
+    const { id, deviceType } = device.value;
+    return await getDeviceDetailApi(stationCode.value, id, tryGetDeviceTypeVal(deviceType));
+  },
+  onSuccess: (device) => {
+    if (device) {
+      useLineDevicesStore().patch(stationCode.value, device);
+    }
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
 </script>
 
 <template>
@@ -51,6 +84,8 @@ const onClickOpenMgmtPage = () => {
         <div>{{ name }}</div>
         <NButton v-if="canOpenMgmtPage" ghost size="tiny" type="default" :focusable="false" @click="onClickOpenMgmtPage">管理</NButton>
       </NFlex>
+    </template>
+    <template #default>
       <div style="font-size: small; color: #666">
         <div>
           <span>设备类型：</span>
@@ -74,6 +109,32 @@ const onClickOpenMgmtPage = () => {
         </div>
       </div>
     </template>
+    <template #header-extra>
+      <NTooltip v-if="canProbe" trigger="hover">
+        <template #trigger>
+          <NButton size="small" quaternary circle :loading="probing" @click="() => probeDevice()">
+            <template #icon>
+              <NIcon :component="ApiOutlined" />
+            </template>
+          </NButton>
+        </template>
+        <template #default>
+          <span>获取最新诊断</span>
+        </template>
+      </NTooltip>
+      <NTooltip trigger="hover">
+        <template #trigger>
+          <NButton size="small" quaternary circle :loading="loading" @click="() => getDeviceDetail()">
+            <template #icon>
+              <NIcon :component="ReloadOutlined" />
+            </template>
+          </NButton>
+        </template>
+        <template #default>
+          <span>刷新设备</span>
+        </template>
+      </NTooltip>
+    </template>
   </NCard>
 </template>