refactor(sj_1.0.0_beta4): 使用SelectGroup,SelectScene组件重构

src/views/job/task/modules/job-task-operate-drawer.vue

@@ -282,7 +282,7 @@ watch(visible, () => {
         />
       </NFormItem>
       <NFormItem :label="$t('page.jobTask.groupName')" path="groupName">
-        <SelectGroup v-model:value="model.groupName" />
+        <SelectGroup v-model:value="model.groupName" :disabled="props.operateType === 'edit'" />
       </NFormItem>
       <NFormItem :label="$t('page.jobTask.jobStatus')" path="jobStatus">
         <NRadioGroup v-model:value="model.jobStatus" name="jobStatus">

src/views/retry/dead-letter/modules/dead-letter-search.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
 import { $t } from '@/locales';
-import { fetchGetAllGroupNameList } from '@/service/api';
 import SelectGroup from '@/components/common/select-group.vue';
 import SelectScene from '@/components/common/select-scene.vue';
 
@@ -18,14 +16,6 @@ const emit = defineEmits<Emits>();
 
 const model = defineModel<Api.RetryDeadLetter.RetryDeadLetterSearchParams>('model', { required: true });
 
-/** 组列表 */
-const groupNameList = ref<string[]>([]);
-
-async function getGroupNameList() {
-  const res = await fetchGetAllGroupNameList();
-  groupNameList.value = res.data as string[];
-}
-
 function reset() {
   emit('reset');
 }
@@ -33,10 +23,6 @@ function reset() {
 function search() {
   emit('search');
 }
-
-onMounted(() => {
-  getGroupNameList();
-});
 </script>
 
 <template>

src/views/retry/scene/modules/scene-operate-drawer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import RouteKey from '@/components/common/route-key.vue';
 import { $t } from '@/locales';
-import { fetchAddRetryScene, fetchEditRetryScene, fetchGetAllGroupNameList } from '@/service/api';
+import { fetchAddRetryScene, fetchEditRetryScene } from '@/service/api';
 import { DelayLevel, backOffRecordOptions, enableStatusNumberOptions } from '@/constants/business';
-import { translateOptions, translateOptions2 } from '@/utils/common';
+import { translateOptions } from '@/utils/common';
 
 defineOptions({
   name: 'SceneOperateDrawer'
@@ -19,7 +19,6 @@ interface Props {
   rowData?: Api.RetryScene.Scene | null;
 }
 
-const groupNameList = ref<string[]>([]);
 const delayLevelDesc = ref<string>('10s');
 
 const props = defineProps<Props>();
@@ -77,17 +76,6 @@ function createDefaultModel(): Model {
   };
 }
 
-onMounted(() => {
-  nextTick(() => {
-    getGroupNameList();
-  });
-});
-
-async function getGroupNameList() {
-  const res = await fetchGetAllGroupNameList();
-  groupNameList.value = res.data as string[];
-}
-
 type RuleKey = Extract<
   keyof Model,
   | 'groupName'
@@ -239,13 +227,7 @@ watch(
         />
       </NFormItem>
       <NFormItem :label="$t('page.retryScene.groupName')" path="groupName">
-        <NSelect
+        <SelectGroup v-model:value="model.groupName" :disabled="props.operateType === 'edit'" />
-          v-model:value="model.groupName"
-          :disabled="props.operateType === 'edit'"
-          :placeholder="$t('page.retryScene.form.groupName')"
-          :options="translateOptions2(groupNameList)"
-          clearable
-        />
       </NFormItem>
       <NFormItem :label="$t('page.retryScene.sceneStatus')" path="sceneStatus">
         <NRadioGroup v-model:value="model.sceneStatus" name="sceneStatus">

src/views/retry/task/modules/retry-task-batch-add-drawer.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue';
+import { reactive, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
-import { fetchBatchAddRetryTask, fetchGetAllGroupNameList } from '@/service/api';
+import { fetchBatchAddRetryTask } from '@/service/api';
-import { translateOptions, translateOptions2 } from '@/utils/common';
+import { translateOptions } from '@/utils/common';
 import { retryTaskStatusTypeOptions } from '@/constants/business';
+import SelectGroup from '@/components/common/select-group.vue';
 
 defineOptions({
   name: 'RetryTaskBatchAddDrawer'
@@ -28,9 +29,6 @@ type Model = Pick<Api.RetryTask.RetryTaskBatchAdd, 'groupName' | 'retryStatus' |
 
 const model: Model = reactive(createDefaultModel());
 
-/** 组列表 */
-const groupNameList = ref<string[]>([]);
-
 function createDefaultModel(): Model {
   return {
     groupName: '',
@@ -63,33 +61,19 @@ async function handleSubmit() {
   emit('submitted');
 }
 
-async function getGroupNameList() {
-  const res = await fetchGetAllGroupNameList();
-  groupNameList.value = res.data as string[];
-}
-
 watch(visible, () => {
   if (visible.value) {
     restoreValidation();
   }
 });
-
-onMounted(() => {
-  getGroupNameList();
-});
 </script>
 
 <template>
   <OperateDrawer v-model="visible" :title="$t('page.retryTask.batchAddRetryTask')" @handle-submit="handleSubmit">
     <NForm ref="formRef" :model="model" :rules="rules">
       <NFormItem :label="$t('page.retryTask.groupName')" path="groupName">
-        <NSelect
+        <SelectGroup v-model:value="model.groupName" />
-          v-model:value="model.groupName"
-          :placeholder="$t('page.retryTask.form.groupName')"
-          :options="translateOptions2(groupNameList)"
-        />
       </NFormItem>
-
       <NFormItem :label="$t('page.retryTask.retryStatus')" path="retryStatus">
         <NSelect
           v-model:value="model.retryStatus"

src/views/retry/task/modules/retry-task-operate-drawer.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
-import {
+import { fetchAddRetryTask, fetchIdempotentIdGenerate } from '@/service/api';
-  fetchAddRetryTask,
+import { translateOptions } from '@/utils/common';
-  fetchGetAllGroupNameList,
-  fetchGetRetrySceneList,
-  fetchIdempotentIdGenerate
-} from '@/service/api';
-import { translateOptions, translateOptions2 } from '@/utils/common';
 import { retryTaskStatusTypeOptions } from '@/constants/business';
 import CodeMirror from '@/components/common/code-mirror.vue';
+import SelectGroup from '@/components/common/select-group.vue';
+import SelectScene from '@/components/common/select-scene.vue';
 
 defineOptions({
   name: 'RetryTaskOperateDrawer'
@@ -54,11 +51,6 @@ type Model = Pick<
 
 const model: Model = reactive(createDefaultModel());
 
-/** 组列表 */
-const groupNameList = ref<string[]>([]);
-/** 场景列表 */
-const sceneNameList = ref<string[]>([]);
-
 function createDefaultModel(): Model {
   return {
     groupName: '',
@@ -130,21 +122,6 @@ watch(visible, () => {
   }
 });
 
-async function getGroupNameList() {
-  const res = await fetchGetAllGroupNameList();
-  groupNameList.value = res.data as string[];
-}
-
-async function handleGroupNameUpdate(groupName: string) {
-  if (groupName) {
-    const res = await fetchGetRetrySceneList({ groupName });
-    sceneNameList.value = res.data!.map((scene: Api.RetryScene.Scene) => scene.sceneName);
-  } else {
-    model.sceneName = '';
-    sceneNameList.value = [];
-  }
-}
-
 async function setIdempotentId() {
   const groupName = model.groupName;
   const sceneName = model.sceneName;
@@ -160,29 +137,18 @@ async function setIdempotentId() {
     model.idempotentId = idempotentId;
   }
 }
-
-onMounted(() => {
-  getGroupNameList();
-});
 </script>
 
 <template>
   <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
     <NForm ref="formRef" :model="model" :rules="rules">
       <NFormItem :label="$t('page.retryTask.groupName')" path="groupName">
-        <NSelect
+        <SelectGroup v-model:value="model.groupName" :disabled="props.operateType === 'edit'" />
-          v-model:value="model.groupName"
-          :placeholder="$t('page.retryTask.form.groupName')"
-          :options="translateOptions2(groupNameList)"
-          :disabled="props.operateType === 'edit'"
-          @update-value="handleGroupNameUpdate"
-        />
       </NFormItem>
       <NFormItem :label="$t('page.retryTask.sceneName')" path="sceneName">
-        <NSelect
+        <SelectScene
           v-model:value="model.sceneName"
-          :placeholder="$t('page.retryTask.form.sceneName')"
+          :group-name="model.groupName as string"
-          :options="translateOptions2(sceneNameList)"
           :disabled="props.operateType === 'edit'"
         />
       </NFormItem>