refactor: 规范化代码.

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

@@ -0,0 +1,62 @@
+<template>
+  <a-tree-select v-model="value"
+                 :multiple="true"
+                 :data="treeData"
+                 placeholder="请选择主机分组"
+                 :allow-clear="true"
+                 :allow-search="true">
+  </a-tree-select>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-tree-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TreeNodeData } from '@arco-design/web-vue';
+  import type { PropType } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { getHostGroupTree } from '@/api/asset/host-group';
+
+  const props = defineProps({
+    modelValue: Array as PropType<Array<Number>>,
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const cacheStore = useCacheStore();
+
+  const value = computed<Array<number>>({
+    get() {
+      return props.modelValue as Array<number>;
+    },
+    set(e) {
+      if (e) {
+        emits('update:modelValue', e);
+      } else {
+        emits('update:modelValue', null);
+      }
+    }
+  });
+  const treeData = ref<Array<TreeNodeData>>([]);
+
+  // 初始化选项
+  onBeforeMount(async () => {
+    if (cacheStore.hostGroups.length) {
+      treeData.value = cacheStore.hostGroups;
+    } else {
+      // 加载数据
+      const { data } = await getHostGroupTree();
+      treeData.value = data;
+      cacheStore.set('hostGroups', data);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value"
-            :options="optionData()"
+            :options="optionData"
             placeholder="请选择主机身份"
             allow-clear />
 </template>
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
 
   const props = defineProps({
@@ -22,6 +22,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed<number>({
     get() {
       return props.modelValue as number;
@@ -34,17 +36,18 @@
       }
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.hostIdentities.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.hostIdentities.map(s => {
       return {
         label: `${s.name} (${s.username})`,
         value: s.id,
       };
     });
-  };
+  });
+
 </script>
 
 <style lang="less" scoped>

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

@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value"
-            :options="optionData()"
+            :options="optionData"
             placeholder="请选择主机秘钥"
             allow-clear />
 </template>
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
 
   const props = defineProps({
@@ -22,6 +22,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed<number>({
     get() {
       return props.modelValue as number;
@@ -34,17 +36,17 @@
       }
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.hostKeys.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.hostKeys.map(s => {
       return {
         label: s.name,
         value: s.id,
       };
     });
-  };
+  });
 </script>
 
 <style lang="less" scoped>