GTsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
opensnail 2024-04-22 17:57:02 +08:00
parent 373bf55150
commit f37697c899
4 changed files with 96 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/select-group.vue
View File

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

58
src/components/common/select-scene.vue Normal file
View File

@ -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>

1
src/typings/components.d.ts vendored
View File

@ -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']

72
src/views/retry/scene/modules/scene-search.vue
View File

@ -1,8 +1,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { $t } from '@/locales';
import { fetchGetAllGroupNameList, fetchGetRetrySceneList } from '@/service/api';
import { translateOptions2 } from '@/utils/common';
import SelectGroup from '@/components/common/select-group.vue';
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() {
const res = await fetchGetAllGroupNameList();
groupNameList.value = res.data as string[];
}
// async function getGroupNameList() {
// const res = await fetchGetAllGroupNameList();
// groupNameList.value = res.data as string[];
// }
function reset() {
emit('reset');
@ -35,40 +34,43 @@ function search() {
emit('search');
}
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.value.sceneName = '';
sceneNameList.value = [];
}
}
// 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.value.sceneName = '';
// sceneNameList.value = [];
// }
// }
onMounted(() => {
getGroupNameList();
});
// onMounted(() => {
// 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
v-model:value="model.groupName"
:placeholder="$t('page.retryScene.form.groupName')"
:options="translateOptions2(groupNameList)"
clearable
filterable
@update:value="handleGroupNameUpdate"
/>
<!-- <NSelect-->
<!-- v-model:value="model.groupName"-->
<!-- :placeholder="$t('page.retryScene.form.groupName')"-->
<!-- :options="translateOptions2(groupNameList)"-->
<!-- clearable-->
<!-- filterable-->
<!-- @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
v-model:value="model.sceneName"
:placeholder="$t('page.retryScene.form.sceneName')"
:options="translateOptions2(sceneNameList)"
clearable
/>
<!-- <NSelect-->
<!-- v-model:value="model.sceneName"-->
<!-- :placeholder="$t('page.retryScene.form.sceneName')"-->
<!-- :options="translateOptions2(sceneNameList)"-->
<!-- clearable-->
<!-- />-->
<SelectScene v-model:value="model.sceneName" :group-name="model.groupName as string" />
</NFormItemGi>
</SearchForm>
</template>