feat: JobTask,Scene表单NGrid布局调整

This commit is contained in:
dhb52 2024-05-18 23:51:42 +08:00
parent c1f3891eda
commit f45aa6fae9
2 changed files with 125 additions and 87 deletions

View File

@ -271,7 +271,7 @@ watch(visible, () => {
</script> </script>
<template> <template>
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit"> <OperateDrawer v-model="visible" :title="title" :min-size="480" @handle-submit="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules"> <NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.jobTask.jobName')" path="jobName"> <NFormItem :label="$t('page.jobTask.jobName')" path="jobName">
<NInput <NInput
@ -281,27 +281,39 @@ watch(visible, () => {
:placeholder="$t('page.jobTask.form.jobName')" :placeholder="$t('page.jobTask.form.jobName')"
/> />
</NFormItem> </NFormItem>
<NFormItem :label="$t('page.jobTask.groupName')" path="groupName"> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<SelectGroup v-model:value="model.groupName" /> <NGi>
</NFormItem> <NFormItem :label="$t('page.jobTask.groupName')" path="groupName">
<NFormItem :label="$t('page.jobTask.jobStatus')" path="jobStatus"> <SelectGroup v-model:value="model.groupName" />
<NRadioGroup v-model:value="model.jobStatus" name="jobStatus"> </NFormItem>
<NSpace> </NGi>
<NRadio <NGi>
v-for="item in enableStatusNumberOptions" <NFormItem :label="$t('page.jobTask.jobStatus')" path="jobStatus">
:key="item.value" <NRadioGroup v-model:value="model.jobStatus" name="jobStatus">
:value="item.value" <NSpace>
:label="$t(item.label)" <NRadio
/> v-for="item in enableStatusNumberOptions"
</NSpace> :key="item.value"
</NRadioGroup> :value="item.value"
</NFormItem> :label="$t(item.label)"
<NFormItem :label="$t('page.jobTask.executorType')" path="executorType"> />
<ExecutorType v-model:value="model.executorType" /> </NSpace>
</NFormItem> </NRadioGroup>
<NFormItem :label="$t('page.jobTask.executorInfo')" path="executorInfo"> </NFormItem>
<NInput v-model:value="model.executorInfo" :placeholder="$t('page.jobTask.form.executorInfo')" /> </NGi>
</NFormItem> </NGrid>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.executorType')" path="executorType">
<ExecutorType v-model:value="model.executorType" />
</NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.executorInfo')" path="executorInfo">
<NInput v-model:value="model.executorInfo" :placeholder="$t('page.jobTask.form.executorInfo')" />
</NFormItem>
</NGi>
</NGrid>
<NFormItem :label="$t('page.jobTask.taskType')" path="taskType"> <NFormItem :label="$t('page.jobTask.taskType')" path="taskType">
<TaskType v-model:value="model.taskType" :placeholder="$t('page.jobTask.form.taskType')" /> <TaskType v-model:value="model.taskType" :placeholder="$t('page.jobTask.form.taskType')" />
</NFormItem> </NFormItem>
@ -336,58 +348,84 @@ watch(visible, () => {
</NCard> </NCard>
<CodeMirror v-else v-model="model.argsStr" lang="json" :placeholder="$t('page.jobTask.form.argsStr')" /> <CodeMirror v-else v-model="model.argsStr" lang="json" :placeholder="$t('page.jobTask.form.argsStr')" />
</NFormItem> </NFormItem>
<NFormItem :label="$t('page.jobTask.routeKey')" path="routeKey"> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<RouteKey v-model:value="model.routeKey" :task-type="model.taskType" /> <NGi>
</NFormItem> <NFormItem :label="$t('page.jobTask.routeKey')" path="routeKey">
<NFormItem :label="$t('page.jobTask.blockStrategy')" path="blockStrategy"> <RouteKey v-model:value="model.routeKey" :task-type="model.taskType" />
<BlockStrategy v-model:value="model.blockStrategy" /> </NFormItem>
</NFormItem> </NGi>
<NFormItem :label="$t('page.jobTask.triggerType')" path="triggerType"> <NGi>
<TriggerType <NFormItem :label="$t('page.jobTask.blockStrategy')" path="blockStrategy">
v-model:value="model.triggerType" <BlockStrategy v-model:value="model.blockStrategy" />
:placeholder="$t('page.jobTask.form.triggerType')" </NFormItem>
@update:value="model.triggerInterval = ''" </NGi>
/> </NGrid>
</NFormItem> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NFormItem :label="$t('page.jobTask.triggerInterval')" path="triggerInterval"> <NGi>
<JobTriggerInterval v-model="model.triggerInterval" :trigger-type="model.triggerType" /> <NFormItem :label="$t('page.jobTask.triggerType')" path="triggerType">
</NFormItem> <TriggerType
<NFormItem :label="$t('page.jobTask.executorTimeout')" path="executorTimeout"> v-model:value="model.triggerType"
<NInputNumber :placeholder="$t('page.jobTask.form.triggerType')"
v-model:value="model.executorTimeout" @update:value="model.triggerInterval = ''"
:min="1" />
:max="99999999" </NFormItem>
:placeholder="$t('page.jobTask.form.executorTimeout')" </NGi>
clearable <NGi>
/> <NFormItem :label="$t('page.jobTask.triggerInterval')" path="triggerInterval">
</NFormItem> <JobTriggerInterval v-model="model.triggerInterval" :trigger-type="model.triggerType" />
<NFormItem :label="$t('page.jobTask.maxRetryTimes')" path="maxRetryTimes"> </NFormItem>
<NInputNumber </NGi>
v-model:value="model.maxRetryTimes" </NGrid>
:min="1" <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
:max="999" <NGi>
:placeholder="$t('page.jobTask.form.maxRetryTimes')" <NFormItem :label="$t('page.jobTask.executorTimeout')" path="executorTimeout">
clearable <NInputGroup>
/> <NInputNumber
</NFormItem> v-model:value="model.executorTimeout"
<NFormItem :label="$t('page.jobTask.retryInterval')" path="retryInterval"> :min="1"
<NInputNumber :max="99999999"
v-model:value="model.retryInterval" :placeholder="$t('page.jobTask.form.executorTimeout')"
:min="1" clearable
:max="99999999" />
:placeholder="$t('page.jobTask.form.retryInterval')" </NInputGroup>
clearable </NFormItem>
/> </NGi>
</NFormItem> <NGi>
<NFormItem :label="$t('page.jobTask.parallelNum')" path="parallelNum"> <NFormItem :label="$t('page.jobTask.maxRetryTimes')" path="maxRetryTimes">
<NInputNumber <NInputNumber
v-model:value="model.parallelNum" v-model:value="model.maxRetryTimes"
:min="1" :min="1"
:max="999" :max="999"
:placeholder="$t('page.jobTask.form.parallelNum')" :placeholder="$t('page.jobTask.form.maxRetryTimes')"
clearable clearable
/> />
</NFormItem> </NFormItem>
</NGi>
</NGrid>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.retryInterval')" path="retryInterval">
<NInputNumber
v-model:value="model.retryInterval"
:min="1"
:max="99999999"
:placeholder="$t('page.jobTask.form.retryInterval')"
clearable
/>
</NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.parallelNum')" path="parallelNum">
<NInputNumber
v-model:value="model.parallelNum"
:min="1"
:max="999"
:placeholder="$t('page.jobTask.form.parallelNum')"
clearable
/>
</NFormItem>
</NGi>
</NGrid>
<NFormItem :label="$t('page.jobTask.description')" path="description"> <NFormItem :label="$t('page.jobTask.description')" path="description">
<NInput v-model:value="model.description" type="textarea" :placeholder="$t('page.jobTask.form.description')" /> <NInput v-model:value="model.description" type="textarea" :placeholder="$t('page.jobTask.form.description')" />
</NFormItem> </NFormItem>

View File

@ -229,7 +229,7 @@ watch(
</script> </script>
<template> <template>
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit"> <OperateDrawer v-model="visible" :title="title" :min-size="480" @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 <NInput
@ -240,8 +240,8 @@ watch(
:placeholder="$t('page.retryScene.form.sceneName')" :placeholder="$t('page.retryScene.form.sceneName')"
/> />
</NFormItem> </NFormItem>
<NGrid cols="24" item-responsive responsive="screen" x-gap="20"> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi span="0 m:1 l:17"> <NGi>
<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"
@ -252,7 +252,7 @@ watch(
/> />
</NFormItem> </NFormItem>
</NGi> </NGi>
<NGi span="0 m:1 l:7"> <NGi>
<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">
<NSpace> <NSpace>
@ -268,13 +268,13 @@ watch(
</NGi> </NGi>
</NGrid> </NGrid>
<NGrid cols="24" item-responsive responsive="screen" x-gap="20"> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi span="0 m:1 l:12"> <NGi>
<NFormItem :label="$t('common.routeKey.routeLabel')" path="routeKey"> <NFormItem :label="$t('common.routeKey.routeLabel')" path="routeKey">
<RouteKey v-model:value="model.routeKey" /> <RouteKey v-model:value="model.routeKey" />
</NFormItem> </NFormItem>
</NGi> </NGi>
<NGi span="0 m:1 l:12"> <NGi>
<NFormItem :label="$t('page.retryScene.maxRetryCount')" path="maxRetryCount"> <NFormItem :label="$t('page.retryScene.maxRetryCount')" path="maxRetryCount">
<NInputNumber <NInputNumber
v-model:value="model.maxRetryCount" v-model:value="model.maxRetryCount"
@ -286,8 +286,8 @@ watch(
</NFormItem> </NFormItem>
</NGi> </NGi>
</NGrid> </NGrid>
<NGrid cols="24" item-responsive responsive="screen" x-gap="20"> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi span="0 m:1 l:12"> <NGi>
<NFormItem :label="$t('page.retryScene.backOff')" path="backOff"> <NFormItem :label="$t('page.retryScene.backOff')" path="backOff">
<NSelect <NSelect
v-model:value="model.backOff" v-model:value="model.backOff"
@ -297,7 +297,7 @@ watch(
/> />
</NFormItem> </NFormItem>
</NGi> </NGi>
<NGi span="0 m:1 l:12"> <NGi>
<NFormItem path="triggerInterval"> <NFormItem path="triggerInterval">
<SceneTriggerInterval v-model="model.triggerInterval" :back-off="model.backOff" /> <SceneTriggerInterval v-model="model.triggerInterval" :back-off="model.backOff" />
<template #label> <template #label>
@ -325,8 +325,8 @@ watch(
</NFormItem> </NFormItem>
</NGi> </NGi>
</NGrid> </NGrid>
<NGrid cols="24" item-responsive responsive="screen" x-gap="20"> <NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi span="0 m:1 l:12"> <NGi>
<NFormItem :label="$t('page.retryScene.executorTimeout')" path="executorTimeout"> <NFormItem :label="$t('page.retryScene.executorTimeout')" path="executorTimeout">
<NInputNumber <NInputNumber
v-model:value="model.executorTimeout" v-model:value="model.executorTimeout"
@ -337,7 +337,7 @@ watch(
/> />
</NFormItem> </NFormItem>
</NGi> </NGi>
<NGi span="0 m:1 l:12"> <NGi>
<NFormItem :label="$t('page.retryScene.deadlineRequest')" path="deadlineRequest"> <NFormItem :label="$t('page.retryScene.deadlineRequest')" path="deadlineRequest">
<NInputNumber <NInputNumber
v-model:value="model.deadlineRequest" v-model:value="model.deadlineRequest"