refactor: 规范化代码.

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>