feat(sj_1.0.0): 完成场景接入

This commit is contained in:
opensnail 2024-04-21 17:54:48 +08:00
parent 7e973cede9
commit 4643f0ab12
6 changed files with 81 additions and 28 deletions

View File

@ -668,7 +668,8 @@ const local: App.I18n.Schema = {
sceneStatus: 'Please enter State', sceneStatus: 'Please enter State',
deadlineRequest: 'Please enter Call chain timeout', deadlineRequest: 'Please enter Call chain timeout',
routeKey: 'Please enter Routing strategy', routeKey: 'Please enter Routing strategy',
backOff: 'Please enter Backoff strategy' backOff: 'Please enter Backoff strategy',
sceneName2: '场景名称: 仅支持长度为:1~64位字符.格式为:数字、字母、下划线。'
}, },
addScene: 'Add Scenes', addScene: 'Add Scenes',
editScene: 'Add Scenes', editScene: 'Add Scenes',

View File

@ -664,7 +664,8 @@ const local: App.I18n.Schema = {
sceneStatus: '请输入状态', sceneStatus: '请输入状态',
deadlineRequest: '请输入调用链超时时间', deadlineRequest: '请输入调用链超时时间',
routeKey: '请输入路由策略', routeKey: '请输入路由策略',
backOff: '请输入退避策略' backOff: '请输入退避策略',
sceneName2: '场景名称: 仅支持长度为:1~64位字符.格式为:数字、字母、下划线。'
}, },
addScene: '新增场景', addScene: '新增场景',
editScene: '编辑场景', editScene: '编辑场景',

View File

@ -837,6 +837,7 @@ declare namespace App {
deadlineRequest: string; deadlineRequest: string;
routeKey: string; routeKey: string;
backOff: string; backOff: string;
sceneName2: string;
}; };
addScene: string; addScene: string;
editScene: string; editScene: string;

View File

@ -150,18 +150,10 @@ const {
handleAdd, handleAdd,
handleEdit, handleEdit,
checkedRowKeys, checkedRowKeys,
onBatchDeleted,
onDeleted onDeleted
// closeDrawer // closeDrawer
} = useTableOperate(data, getData); } = useTableOperate(data, getData);
async function handleBatchDelete() {
// request
console.log(checkedRowKeys.value);
onBatchDeleted();
}
function handleDelete(id: string) { function handleDelete(id: string) {
// request // request
console.log(id); console.log(id);
@ -189,8 +181,8 @@ function edit(id: string) {
v-model:columns="columnChecks" v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0" :disabled-delete="checkedRowKeys.length === 0"
:loading="loading" :loading="loading"
:show-delete="false"
@add="handleAdd" @add="handleAdd"
@delete="handleBatchDelete"
@refresh="getData" @refresh="getData"
/> />
</template> </template>

View File

@ -102,17 +102,25 @@ type RuleKey = Extract<
| 'routeKey' | 'routeKey'
>; >;
const rules: Record<RuleKey, App.Global.FormRule> = { const rules = {
groupName: defaultRequiredRule, groupName: [defaultRequiredRule],
sceneName: defaultRequiredRule, sceneName: [
sceneStatus: defaultRequiredRule, defaultRequiredRule,
backOff: defaultRequiredRule, {
maxRetryCount: defaultRequiredRule, required: true,
triggerInterval: defaultRequiredRule, pattern: /^[A-Za-z0-9_]{1,64}$/,
deadlineRequest: defaultRequiredRule, trigger: 'change',
executorTimeout: defaultRequiredRule, message: $t('page.retryScene.form.sceneName2')
routeKey: defaultRequiredRule }
}; ],
sceneStatus: [defaultRequiredRule],
backOff: [defaultRequiredRule],
maxRetryCount: [defaultRequiredRule],
triggerInterval: [defaultRequiredRule],
deadlineRequest: [defaultRequiredRule],
executorTimeout: [defaultRequiredRule],
routeKey: [defaultRequiredRule]
} satisfies Record<RuleKey, App.Global.FormRule[]>;
function handleUpdateModelWhenEdit() { function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') { if (props.operateType === 'add') {
@ -204,7 +212,13 @@ watch(visible, () => {
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit"> <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules"> <NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.retryScene.sceneName')" path="sceneName"> <NFormItem :label="$t('page.retryScene.sceneName')" path="sceneName">
<NInput v-model:value="model.sceneName" :placeholder="$t('page.retryScene.form.sceneName')" /> <NInput
v-model:value="model.sceneName"
:disabled="props.operateType === 'edit'"
:maxlength="64"
show-count
:placeholder="$t('page.retryScene.form.sceneName')"
/>
</NFormItem> </NFormItem>
<NFormItem :label="$t('page.retryScene.sceneStatus')" path="sceneStatus"> <NFormItem :label="$t('page.retryScene.sceneStatus')" path="sceneStatus">
<NRadioGroup v-model:value="model.sceneStatus" name="sceneStatus"> <NRadioGroup v-model:value="model.sceneStatus" name="sceneStatus">
@ -221,6 +235,7 @@ watch(visible, () => {
<NFormItem :label="$t('page.retryScene.groupName')" path="groupName"> <NFormItem :label="$t('page.retryScene.groupName')" path="groupName">
<NSelect <NSelect
v-model:value="model.groupName" v-model:value="model.groupName"
:disabled="props.operateType === 'edit'"
:placeholder="$t('page.retryScene.form.groupName')" :placeholder="$t('page.retryScene.form.groupName')"
:options="translateOptions2(groupNameList)" :options="translateOptions2(groupNameList)"
clearable clearable
@ -247,6 +262,7 @@ watch(visible, () => {
v-if="model.backOff === 2 || model.backOff === 4" v-if="model.backOff === 2 || model.backOff === 4"
v-model:value="model.triggerInterval as any" v-model:value="model.triggerInterval as any"
:placeholder="$t('page.retryScene.form.triggerInterval')" :placeholder="$t('page.retryScene.form.triggerInterval')"
clearable
/> />
<CronInput v-if="model.backOff === 3" v-model:value="model.triggerInterval as any" :lang="app.locale" /> <CronInput v-if="model.backOff === 3" v-model:value="model.triggerInterval as any" :lang="app.locale" />
@ -257,6 +273,7 @@ watch(visible, () => {
:min="1" :min="1"
:max="model.backOff === 1 ? 26 : 9999999" :max="model.backOff === 1 ? 26 : 9999999"
:placeholder="$t('page.retryScene.form.maxRetryCount')" :placeholder="$t('page.retryScene.form.maxRetryCount')"
clearable
/> />
</NFormItem> </NFormItem>
<NFormItem :label="$t('page.retryScene.executorTimeout')" path="executorTimeout"> <NFormItem :label="$t('page.retryScene.executorTimeout')" path="executorTimeout">
@ -265,6 +282,7 @@ watch(visible, () => {
:min="1" :min="1"
:max="3600" :max="3600"
:placeholder="$t('page.retryScene.form.executorTimeout')" :placeholder="$t('page.retryScene.form.executorTimeout')"
clearable
/> />
</NFormItem> </NFormItem>
<NFormItem :label="$t('page.retryScene.deadlineRequest')" path="deadlineRequest"> <NFormItem :label="$t('page.retryScene.deadlineRequest')" path="deadlineRequest">
@ -273,13 +291,17 @@ watch(visible, () => {
:min="100" :min="100"
:max="60000" :max="60000"
:placeholder="$t('page.retryScene.form.deadlineRequest')" :placeholder="$t('page.retryScene.form.deadlineRequest')"
clearable
/> />
</NFormItem> </NFormItem>
<NFormItem :label="$t('page.retryScene.description')" path="description"> <NFormItem :label="$t('page.retryScene.description')" path="description">
<NInput <NInput
v-model:value="model.description" v-model:value="model.description"
type="textarea" type="textarea"
:maxlength="256"
:placeholder="$t('page.retryScene.form.description')" :placeholder="$t('page.retryScene.form.description')"
show-count
clearable
/> />
</NFormItem> </NFormItem>
</NForm> </NForm>

View File

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