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>

orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue

@@ -20,7 +20,7 @@
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
   import type { TagCreateRequest } from '@/api/meta/tag';
-  import { ref, computed, onMounted } from 'vue';
+  import { ref, computed, onBeforeMount } from 'vue';
   import { useCacheStore } from '@/store';
   import { Message } from '@arco-design/web-vue';
   import { createTag } from '@/api/meta/tag';
@@ -36,6 +36,8 @@
 
   const emits = defineEmits(['update:modelValue', 'onLimited']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed<Array<number>>({
     get() {
       return props.modelValue as Array<number>;
@@ -45,25 +47,17 @@
       emits('update:modelValue', e);
     }
   });
-
-  // 选项数据
-  const cacheStore = useCacheStore();
   const optionData = ref<SelectOptionData[]>([]);
-  const initOptionData = () => {
+
+  // 初始化选项
+  onBeforeMount(() => {
     const tagCache = cacheStore[props.tagType as string] as Array<any>;
     optionData.value = tagCache.map(s => {
       return {
         label: s.name,
         value: s.id,
       };
-    }) as SelectOptionData[];
-  };
-
-
-  defineExpose({ initOptionData });
-
-  onMounted(() => {
-    initOptionData();
+    });
   });
 
   // 检查是否可以创建tag

orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue

@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value as any"
-            :options="optionData()"
+            :options="optionData"
             :allow-search="true"
             :loading="loading"
             :disabled="loading"
@@ -17,7 +17,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';
   import { labelFilter } from '@/types/form';
 
@@ -32,6 +32,9 @@
 
   const emits = defineEmits(['update:modelValue', 'change']);
 
+  // 选项数据
+  const cacheStore = useCacheStore();
+
   const value = computed({
     get() {
       return props.modelValue;
@@ -54,17 +57,17 @@
       }
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.dictKeys.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.dictKeys.map(s => {
       return {
         label: `${s.keyName} - ${s.description || ''}`,
         value: s.id,
       };
     });
-  };
+  });
 
 </script>
 

orion-ops-ui/src/components/user/role/user-role-selector.vue

@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value as any"
-            :options="optionData()"
+            :options="optionData"
             :allow-search="true"
             :multiple="multiple"
             :loading="loading"
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
   import { RoleStatus } from '@/views/user/role/types/const';
   import { labelFilter } from '@/types/form';
@@ -31,6 +31,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed({
     get() {
       return props.modelValue;
@@ -39,18 +41,18 @@
       emits('update:modelValue', e);
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.roles.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.roles.map(s => {
       return {
         label: `${s.name} (${s.code})`,
         disabled: s.status === RoleStatus.DISABLED,
         value: s.id,
       };
     });
-  };
+  });
 
 </script>
 

orion-ops-ui/src/components/user/role/user-selector.vue

@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value as any"
-            :options="optionData()"
+            :options="optionData"
             :allow-search="true"
             :multiple="multiple"
             :loading="loading"
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, ref, onBeforeMount } from 'vue';
   import { useCacheStore } from '@/store';
   import { labelFilter } from '@/types/form';
 
@@ -30,6 +30,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed({
     get() {
       return props.modelValue;
@@ -38,16 +40,18 @@
       emits('update:modelValue', e);
     }
   });
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.users.map(s => {
+  const optionData = ref<Array<SelectOptionData>>([]);
+
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.users.map(s => {
       return {
         label: `${s.nickname} (${s.username})`,
         value: s.id,
       };
     });
-  };
+  });
+
 </script>
 
 <style lang="less" scoped>