admin/000-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

2. 固定对话框高度，内部滚动，避免整体滚动体验差
This commit is contained in:
Admin
2026-01-28 17:55:55 +08:00
parent d57f812513
commit d91119af8a
1 changed files with 235 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/views/scheduled-tasks/index.vue
View File

@@ -561,8 +561,12 @@ onMounted(() => {
</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-tabs type="border-card">
<!-- Tab 1: 基本信息 -->
<el-tab-pane label="基本信息">
<div class="tab-content">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="任务名称" prop="task_name">
@@ -627,10 +631,15 @@ onMounted(() => {
<div class="form-tip">点击添加按钮增加执行时间点</div>
</el-form-item>
<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>
</el-form-item>
</div>
</el-tab-pane>
<!-- Tab 2: 执行配置 -->
<el-tab-pane :label="form.task_type === 'script' ? '脚本配置' : 'Webhook配置'">
<div class="tab-content">
<!-- Webhook 配置 -->
<template v-if="form.task_type === 'webhook'">
<el-form-item label="Webhook URL">
@@ -659,7 +668,7 @@ onMounted(() => {
<el-input
v-model="form.script_content"
type="textarea"
:rows="12"
:rows="14"
placeholder="Python 脚本"
class="script-textarea"
/>
@@ -682,38 +691,17 @@ onMounted(() => {
</div>
<div class="form-tip">脚本中使用 get_param('key') 获取</div>
</el-form-item>
</div>
</el-tab-pane>
<!-- 高级配置 -->
<el-divider>高级配置</el-divider>
<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>
<!-- 通知配置 -->
<el-divider>通知配置（脚本设置 result 变量后自动发送）</el-divider>
<!-- Tab 3: 通知与高级 -->
<el-tab-pane label="通知与高级">
<div class="tab-content">
<div class="section-title">通知配置</div>
<el-form-item label="通知渠道">
<div v-if="!form.tenant_id" class="form-tip" style="color: #e6a23c">
请先选择租户，再配置通知渠道
请先在「基本信息」选择租户，再配置通知渠道
</div>
<template v-else>
<el-select
@@ -758,6 +746,33 @@ onMounted(() => {
<div class="form-tip">发送到企微应用的全员消息</div>
</template>
</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>
<template #footer>
@@ -1041,6 +1056,33 @@ onMounted(() => {
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 {
cursor: pointer;