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

This commit is contained in:
dhb52 2024-06-04 18:27:11 +08:00
parent 0ff686e27d
commit 979559f96a
5 changed files with 18 additions and 100 deletions

View File

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

View File

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

View File

@ -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
v-model:value="model.groupName"
:disabled="props.operateType === 'edit'"
:placeholder="$t('page.retryScene.form.groupName')"
:options="translateOptions2(groupNameList)"
clearable
/>
<SelectGroup v-model:value="model.groupName" :disabled="props.operateType === 'edit'" />
</NFormItem>
<NFormItem :label="$t('page.retryScene.sceneStatus')" path="sceneStatus">
<NRadioGroup v-model:value="model.sceneStatus" name="sceneStatus">

View File

@ -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 { translateOptions, translateOptions2 } from '@/utils/common';
import { fetchBatchAddRetryTask } from '@/service/api';
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
v-model:value="model.groupName"
:placeholder="$t('page.retryTask.form.groupName')"
:options="translateOptions2(groupNameList)"
/>
<SelectGroup v-model:value="model.groupName" />
</NFormItem>
<NFormItem :label="$t('page.retryTask.retryStatus')" path="retryStatus">
<NSelect
v-model:value="model.retryStatus"

View File

@ -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 {
fetchAddRetryTask,
fetchGetAllGroupNameList,
fetchGetRetrySceneList,
fetchIdempotentIdGenerate
} from '@/service/api';
import { translateOptions, translateOptions2 } from '@/utils/common';
import { fetchAddRetryTask, fetchIdempotentIdGenerate } from '@/service/api';
import { translateOptions } 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
v-model:value="model.groupName"
:placeholder="$t('page.retryTask.form.groupName')"
:options="translateOptions2(groupNameList)"
:disabled="props.operateType === 'edit'"
@update-value="handleGroupNameUpdate"
/>
<SelectGroup v-model:value="model.groupName" :disabled="props.operateType === 'edit'" />
</NFormItem>
<NFormItem :label="$t('page.retryTask.sceneName')" path="sceneName">
<NSelect
<SelectScene
v-model:value="model.sceneName"
:placeholder="$t('page.retryTask.form.sceneName')"
:options="translateOptions2(sceneNameList)"
:group-name="model.groupName as string"
:disabled="props.operateType === 'edit'"
/>
</NFormItem>