feat: 编辑任务对话框使用 Tab 分类重构
All checks were successful
continuous-integration/drone/push Build is passing

1. 使用 Tabs 分类组织内容:
   - 基本信息:名称、租户、类型、调度
   - 脚本配置:脚本内容、参数
   - 通知与高级:通知渠道、重试、告警

2. 固定对话框高度,内部滚动,避免整体滚动体验差
This commit is contained in:
2026-01-28 17:55:55 +08:00
parent d57f812513
commit d91119af8a

View File

@@ -561,8 +561,12 @@ onMounted(() => {
</div> </div>
<!-- 编辑对话框 --> <!-- 编辑对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" top="5vh"> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" top="5vh" class="task-dialog">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-tabs type="border-card">
<!-- Tab 1: 基本信息 -->
<el-tab-pane label="基本信息">
<div class="tab-content">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="任务名称" prop="task_name"> <el-form-item label="任务名称" prop="task_name">
@@ -627,10 +631,15 @@ onMounted(() => {
<div class="form-tip">点击添加按钮增加执行时间点</div> <div class="form-tip">点击添加按钮增加执行时间点</div>
</el-form-item> </el-form-item>
<el-form-item v-else label="CRON表达式"> <el-form-item v-else label="CRON表达式">
<el-input v-model="form.cron_expression" placeholder="0 9 * * *" /> <el-input v-model="form.cron_expression" placeholder="0 9 * * *" style="width: 300px" />
<div class="form-tip">格式: : 0 9 * * * (每天9点)</div> <div class="form-tip">格式: : 0 9 * * * (每天9点)</div>
</el-form-item> </el-form-item>
</div>
</el-tab-pane>
<!-- Tab 2: 执行配置 -->
<el-tab-pane :label="form.task_type === 'script' ? '脚本配置' : 'Webhook配置'">
<div class="tab-content">
<!-- Webhook 配置 --> <!-- Webhook 配置 -->
<template v-if="form.task_type === 'webhook'"> <template v-if="form.task_type === 'webhook'">
<el-form-item label="Webhook URL"> <el-form-item label="Webhook URL">
@@ -659,7 +668,7 @@ onMounted(() => {
<el-input <el-input
v-model="form.script_content" v-model="form.script_content"
type="textarea" type="textarea"
:rows="12" :rows="14"
placeholder="Python 脚本" placeholder="Python 脚本"
class="script-textarea" class="script-textarea"
/> />
@@ -682,38 +691,17 @@ onMounted(() => {
</div> </div>
<div class="form-tip">脚本中使用 get_param('key') 获取</div> <div class="form-tip">脚本中使用 get_param('key') 获取</div>
</el-form-item> </el-form-item>
</div>
</el-tab-pane>
<!-- 高级配置 --> <!-- Tab 3: 通知与高级 -->
<el-divider>高级配置</el-divider> <el-tab-pane label="通知与高级">
<div class="tab-content">
<el-row :gutter="20"> <div class="section-title">通知配置</div>
<el-col :span="12">
<el-form-item label="失败重试">
<el-input-number v-model="form.retry_count" :min="0" :max="10" />
<span style="margin-left: 8px; color: #999"></span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重试间隔">
<el-input-number v-model="form.retry_interval" :min="10" :max="3600" />
<span style="margin-left: 8px; color: #999"></span>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="失败告警">
<el-switch v-model="form.alert_on_failure" />
</el-form-item>
<el-form-item v-if="form.alert_on_failure" label="告警地址">
<el-input v-model="form.alert_webhook" placeholder="钉钉/企微机器人 Webhook 地址" />
</el-form-item>
<!-- 通知配置 -->
<el-divider>通知配置脚本设置 result 变量后自动发送</el-divider>
<el-form-item label="通知渠道"> <el-form-item label="通知渠道">
<div v-if="!form.tenant_id" class="form-tip" style="color: #e6a23c"> <div v-if="!form.tenant_id" class="form-tip" style="color: #e6a23c">
请先选择租户再配置通知渠道 请先在基本信息选择租户再配置通知渠道
</div> </div>
<template v-else> <template v-else>
<el-select <el-select
@@ -758,6 +746,33 @@ onMounted(() => {
<div class="form-tip">发送到企微应用的全员消息</div> <div class="form-tip">发送到企微应用的全员消息</div>
</template> </template>
</el-form-item> </el-form-item>
<div class="section-title" style="margin-top: 24px">高级配置</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="失败重试">
<el-input-number v-model="form.retry_count" :min="0" :max="10" />
<span style="margin-left: 8px; color: #999"></span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重试间隔">
<el-input-number v-model="form.retry_interval" :min="10" :max="3600" />
<span style="margin-left: 8px; color: #999"></span>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="失败告警">
<el-switch v-model="form.alert_on_failure" />
</el-form-item>
<el-form-item v-if="form.alert_on_failure" label="告警地址">
<el-input v-model="form.alert_webhook" placeholder="钉钉/企微机器人 Webhook 地址" />
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form> </el-form>
<template #footer> <template #footer>
@@ -1041,6 +1056,33 @@ onMounted(() => {
min-height: 200px; min-height: 200px;
} }
/* 编辑对话框样式 */
.task-dialog :deep(.el-dialog__body) {
padding: 10px 20px;
max-height: 65vh;
overflow: hidden;
}
.task-dialog :deep(.el-tabs__content) {
height: calc(65vh - 100px);
overflow: hidden;
}
.tab-content {
height: 100%;
overflow-y: auto;
padding-right: 10px;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #ebeef5;
}
.output-preview, .error-preview { .output-preview, .error-preview {
cursor: pointer; cursor: pointer;