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,9 +281,13 @@ watch(visible, () => {
:placeholder="$t('page.jobTask.form.jobName')" :placeholder="$t('page.jobTask.form.jobName')"
/> />
</NFormItem> </NFormItem>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.groupName')" path="groupName"> <NFormItem :label="$t('page.jobTask.groupName')" path="groupName">
<SelectGroup v-model:value="model.groupName" /> <SelectGroup v-model:value="model.groupName" />
</NFormItem> </NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.jobStatus')" path="jobStatus"> <NFormItem :label="$t('page.jobTask.jobStatus')" path="jobStatus">
<NRadioGroup v-model:value="model.jobStatus" name="jobStatus"> <NRadioGroup v-model:value="model.jobStatus" name="jobStatus">
<NSpace> <NSpace>
@ -296,12 +300,20 @@ watch(visible, () => {
</NSpace> </NSpace>
</NRadioGroup> </NRadioGroup>
</NFormItem> </NFormItem>
</NGi>
</NGrid>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.executorType')" path="executorType"> <NFormItem :label="$t('page.jobTask.executorType')" path="executorType">
<ExecutorType v-model:value="model.executorType" /> <ExecutorType v-model:value="model.executorType" />
</NFormItem> </NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.executorInfo')" path="executorInfo"> <NFormItem :label="$t('page.jobTask.executorInfo')" path="executorInfo">
<NInput v-model:value="model.executorInfo" :placeholder="$t('page.jobTask.form.executorInfo')" /> <NInput v-model:value="model.executorInfo" :placeholder="$t('page.jobTask.form.executorInfo')" />
</NFormItem> </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,12 +348,20 @@ 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>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.routeKey')" path="routeKey"> <NFormItem :label="$t('page.jobTask.routeKey')" path="routeKey">
<RouteKey v-model:value="model.routeKey" :task-type="model.taskType" /> <RouteKey v-model:value="model.routeKey" :task-type="model.taskType" />
</NFormItem> </NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.blockStrategy')" path="blockStrategy"> <NFormItem :label="$t('page.jobTask.blockStrategy')" path="blockStrategy">
<BlockStrategy v-model:value="model.blockStrategy" /> <BlockStrategy v-model:value="model.blockStrategy" />
</NFormItem> </NFormItem>
</NGi>
</NGrid>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.triggerType')" path="triggerType"> <NFormItem :label="$t('page.jobTask.triggerType')" path="triggerType">
<TriggerType <TriggerType
v-model:value="model.triggerType" v-model:value="model.triggerType"
@ -349,10 +369,17 @@ watch(visible, () => {
@update:value="model.triggerInterval = ''" @update:value="model.triggerInterval = ''"
/> />
</NFormItem> </NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.triggerInterval')" path="triggerInterval"> <NFormItem :label="$t('page.jobTask.triggerInterval')" path="triggerInterval">
<JobTriggerInterval v-model="model.triggerInterval" :trigger-type="model.triggerType" /> <JobTriggerInterval v-model="model.triggerInterval" :trigger-type="model.triggerType" />
</NFormItem> </NFormItem>
</NGi>
</NGrid>
<NGrid cols="2 s:1 m:2" responsive="screen" x-gap="20">
<NGi>
<NFormItem :label="$t('page.jobTask.executorTimeout')" path="executorTimeout"> <NFormItem :label="$t('page.jobTask.executorTimeout')" path="executorTimeout">
<NInputGroup>
<NInputNumber <NInputNumber
v-model:value="model.executorTimeout" v-model:value="model.executorTimeout"
:min="1" :min="1"
@ -360,7 +387,10 @@ watch(visible, () => {
:placeholder="$t('page.jobTask.form.executorTimeout')" :placeholder="$t('page.jobTask.form.executorTimeout')"
clearable clearable
/> />
</NInputGroup>
</NFormItem> </NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.maxRetryTimes')" path="maxRetryTimes"> <NFormItem :label="$t('page.jobTask.maxRetryTimes')" path="maxRetryTimes">
<NInputNumber <NInputNumber
v-model:value="model.maxRetryTimes" v-model:value="model.maxRetryTimes"
@ -370,6 +400,10 @@ watch(visible, () => {
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"> <NFormItem :label="$t('page.jobTask.retryInterval')" path="retryInterval">
<NInputNumber <NInputNumber
v-model:value="model.retryInterval" v-model:value="model.retryInterval"
@ -379,6 +413,8 @@ watch(visible, () => {
clearable clearable
/> />
</NFormItem> </NFormItem>
</NGi>
<NGi>
<NFormItem :label="$t('page.jobTask.parallelNum')" path="parallelNum"> <NFormItem :label="$t('page.jobTask.parallelNum')" path="parallelNum">
<NInputNumber <NInputNumber
v-model:value="model.parallelNum" v-model:value="model.parallelNum"
@ -388,6 +424,8 @@ watch(visible, () => {
clearable clearable
/> />
</NFormItem> </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"