feat(sj_1.0.0): 重试场景组件化

src/components/common/select-group.vue

@@ -20,10 +20,6 @@ async function getGroupNameList() {
   groupNameList.value = res.data as string[];
 }
 
-// function handleGroupNameUpdate(groupName: string) {
-//   emit('update:value', groupName);
-// }
-
 onMounted(() => {
   getGroupNameList();
 });

src/components/common/select-scene.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { $t } from '@/locales';
+import { translateOptions2 } from '@/utils/common';
+import { fetchGetRetrySceneList } from '@/service/api';
+
+const emit = defineEmits<Emits>();
+
+interface Props {
+  groupName: string | null;
+}
+
+const props = defineProps<Props>();
+
+/** 场景列表 */
+const sceneNameList = ref<string[]>([]);
+/** 场景列表 */
+const sceneNameRef = ref<string>('');
+
+interface Emits {
+  (e: 'update:value', value: string): void;
+}
+
+async function getRetrySceneList(groupName: string) {
+  if (props.groupName) {
+    const res = await fetchGetRetrySceneList({ groupName });
+    sceneNameList.value = res.data!.map((scene: Api.RetryScene.Scene) => scene.sceneName);
+  } else {
+    sceneNameRef.value = '';
+    sceneNameList.value = [];
+  }
+}
+
+watch(
+  () => props.groupName,
+  () => {
+    getRetrySceneList(props.groupName!);
+  }
+);
+
+watch(
+  () => sceneNameRef.value,
+  () => {
+    emit('update:value', sceneNameRef.value);
+  }
+);
+</script>
+
+<template>
+  <NSelect
+    v-model:value="sceneNameRef"
+    :placeholder="$t('page.retryTask.form.sceneName')"
+    :options="translateOptions2(sceneNameList)"
+    clearable
+  />
+</template>
+
+<style scoped></style>

src/typings/components.d.ts

@@ -97,6 +97,7 @@ declare module 'vue' {
     Search: typeof import('../components/common/search-form.vue')['default']
     SearchForm: typeof import('./../components/common/search-form.vue')['default']
     SelectGroup: typeof import('./../components/common/select-group.vue')['default']
+    SelectScene: typeof import('./../components/common/select-scene.vue')['default']
     SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']
     SvgIcon: typeof import('./../components/custom/svg-icon.vue')['default']
     SystemLogo: typeof import('./../components/common/system-logo.vue')['default']

src/views/retry/scene/modules/scene-search.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
 import { $t } from '@/locales';
-import { fetchGetAllGroupNameList, fetchGetRetrySceneList } from '@/service/api';
+import SelectGroup from '@/components/common/select-group.vue';
-import { translateOptions2 } from '@/utils/common';
+import SelectScene from '@/components/common/select-scene.vue';
 
 defineOptions({
   name: 'SceneSearch'
@@ -18,14 +17,14 @@ const emit = defineEmits<Emits>();
 const model = defineModel<Api.RetryScene.SceneSearchParams>('model', { required: true });
 
 /** 组列表 */
-const groupNameList = ref<string[]>([]);
+// const groupNameList = ref<string[]>([]);
 /** 场景列表 */
-const sceneNameList = ref<string[]>([]);
+// const sceneNameList = ref<string[]>([]);
 
-async function getGroupNameList() {
+// async function getGroupNameList() {
-  const res = await fetchGetAllGroupNameList();
+//   const res = await fetchGetAllGroupNameList();
-  groupNameList.value = res.data as string[];
+//   groupNameList.value = res.data as string[];
-}
+// }
 
 function reset() {
   emit('reset');
@@ -35,40 +34,43 @@ function search() {
   emit('search');
 }
 
-async function handleGroupNameUpdate(groupName: string) {
+// async function handleGroupNameUpdate(groupName: string) {
-  if (groupName) {
+//   if (groupName) {
-    const res = await fetchGetRetrySceneList({ groupName });
+//     const res = await fetchGetRetrySceneList({ groupName });
-    sceneNameList.value = res.data!.map((scene: Api.RetryScene.Scene) => scene.sceneName);
+//     sceneNameList.value = res.data!.map((scene: Api.RetryScene.Scene) => scene.sceneName);
-  } else {
+//   } else {
-    model.value.sceneName = '';
+//     model.value.sceneName = '';
-    sceneNameList.value = [];
+//     sceneNameList.value = [];
-  }
+//   }
-}
+// }
 
-onMounted(() => {
+// onMounted(() => {
-  getGroupNameList();
+//   getGroupNameList();
-});
+// });
 </script>
 
 <template>
   <SearchForm :model="model" @search="search" @reset="reset">
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryScene.groupName')" path="userName" class="pr-24px">
-      <NSelect
+      <!--      <NSelect-->
-        v-model:value="model.groupName"
+      <!--        v-model:value="model.groupName"-->
-        :placeholder="$t('page.retryScene.form.groupName')"
+      <!--        :placeholder="$t('page.retryScene.form.groupName')"-->
-        :options="translateOptions2(groupNameList)"
+      <!--        :options="translateOptions2(groupNameList)"-->
-        clearable
+      <!--        clearable-->
-        filterable
+      <!--        filterable-->
-        @update:value="handleGroupNameUpdate"
+      <!--        @update:value="handleGroupNameUpdate"-->
-      />
+      <!--      />-->
+
+      <SelectGroup v-model:value="model.groupName" />
     </NFormItemGi>
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryScene.sceneName')" path="userName" class="pr-24px">
-      <NSelect
+      <!--      <NSelect-->
-        v-model:value="model.sceneName"
+      <!--        v-model:value="model.sceneName"-->
-        :placeholder="$t('page.retryScene.form.sceneName')"
+      <!--        :placeholder="$t('page.retryScene.form.sceneName')"-->
-        :options="translateOptions2(sceneNameList)"
+      <!--        :options="translateOptions2(sceneNameList)"-->
-        clearable
+      <!--        clearable-->
-      />
+      <!--      />-->
+      <SelectScene v-model:value="model.sceneName" :group-name="model.groupName as string" />
     </NFormItemGi>
   </SearchForm>
 </template>