feat: 主机连接日志.

orion-ops-ui/src/components/asset/host/host-selector.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-select v-model:model-value="value"
+            :options="optionData"
+            :loading="loading"
+            placeholder="请选择主机"
+            allow-clear />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { SelectOptionData } from '@arco-design/web-vue';
+  import { computed, onBeforeMount, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import useLoading from '@/hooks/loading';
+
+  const props = defineProps({
+    modelValue: Number
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const { loading, setLoading } = useLoading();
+  const cacheStore = useCacheStore();
+
+  const value = computed<number>({
+    get() {
+      return props.modelValue as number;
+    },
+    set(e) {
+      if (e) {
+        emits('update:modelValue', e);
+      } else {
+        emits('update:modelValue', null);
+      }
+    }
+  });
+  const optionData = ref<Array<SelectOptionData>>([]);
+
+  // 初始化选项
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const hosts = await cacheStore.loadHosts();
+      optionData.value = hosts.map(s => {
+        return {
+          label: `${s.name} - ${s.address}`,
+          value: s.id,
+        };
+      });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>