mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-03 16:53:29 +00:00
feat: 重构前端项目结构并优化代码
refactor: 迁移前端资源文件至web目录 feat: 新增多种图标资源 style: 统一代码风格和格式化配置 docs: 更新README和文档说明 chore: 更新依赖和配置文件 fix: 修复部分类型定义和枚举 perf: 优化路由和组件加载逻辑
This commit is contained in:
zhangtao
@@ -0,0 +1,799 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<PageSearch
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
|
||||
<PageContent
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleOpenDialog('create')"
|
||||
>
|
||||
<template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
|
||||
<div class="data-table__content">
|
||||
<el-table
|
||||
:ref="tableRef as any"
|
||||
v-loading="loading"
|
||||
:data="data"
|
||||
height="100%"
|
||||
border
|
||||
stripe
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column type="selection" align="center" min-width="55" />
|
||||
<el-table-column type="index" fixed label="序号" min-width="60">
|
||||
<template #default="scope">
|
||||
{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="节点名称" prop="name" min-width="140" />
|
||||
<el-table-column label="节点编码" prop="code" min-width="120" />
|
||||
<el-table-column label="存储器" prop="jobstore" min-width="80" />
|
||||
<el-table-column label="执行器" prop="executor" min-width="80" />
|
||||
<el-table-column label="创建时间" prop="created_time" min-width="180" sortable />
|
||||
|
||||
<OperationColumn :list-data-length="data.length">
|
||||
<template #default="scope">
|
||||
<el-space class="flex">
|
||||
<el-button
|
||||
v-hasPerm="['module_task:cronjob:node:execute']"
|
||||
type="warning"
|
||||
size="small"
|
||||
link
|
||||
icon="VideoPlay"
|
||||
@click="handleOpenExecuteDialog(scope.row)"
|
||||
>
|
||||
调试
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_task:cronjob:node:update']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_task:cronjob:node:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="handleRowDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</el-space>
|
||||
</template>
|
||||
</OperationColumn>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</PageContent>
|
||||
|
||||
<EnhancedDialog
|
||||
v-model="dialogVisible.visible"
|
||||
:title="dialogVisible.title"
|
||||
width="1000px"
|
||||
@close="handleCloseDialog"
|
||||
@opened="handleDialogOpened"
|
||||
>
|
||||
<el-splitter direction="horizontal" style="height: 500px">
|
||||
<el-splitter-panel size="300px" :min="200" :max="400">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
label-width="auto"
|
||||
style="padding: 0 10px"
|
||||
>
|
||||
<el-form-item label="节点名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入节点名称" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="节点编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入节点编码" :maxlength="32" />
|
||||
</el-form-item>
|
||||
<el-form-item label="存储器" prop="jobstore">
|
||||
<el-select v-model="formData.jobstore" placeholder="请选择存储器">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictArray('sys_job_store')"
|
||||
:key="item.dict_value"
|
||||
:label="item.dict_label"
|
||||
:value="item.dict_value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行器" prop="executor">
|
||||
<el-select v-model="formData.executor" placeholder="请选择执行器">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictArray('sys_job_executor')"
|
||||
:key="item.dict_value"
|
||||
:label="item.dict_label"
|
||||
:value="item.dict_value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置参数" prop="args">
|
||||
<div class="dynamic-params">
|
||||
<div v-for="(_item, index) in argsList" :key="index" class="param-item">
|
||||
<el-input v-model="argsList[index]" placeholder="参数值" />
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
circle
|
||||
@click="argsList.splice(index, 1)"
|
||||
/>
|
||||
</div>
|
||||
<el-button type="primary" icon="Plus" @click="argsList.push('')">
|
||||
添加位置参数
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字参数" prop="kwargs">
|
||||
<div class="dynamic-params">
|
||||
<div v-for="(item, index) in kwargsList" :key="index" class="param-item">
|
||||
<el-input v-model="item.key" placeholder="键" />
|
||||
<el-input v-model="item.value" placeholder="值" />
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
circle
|
||||
@click="kwargsList.splice(index, 1)"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
@click="kwargsList.push({ key: '', value: '' })"
|
||||
>
|
||||
添加关键词参数
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="合并运行" prop="coalesce">
|
||||
<el-radio-group v-model="formData.coalesce">
|
||||
<el-radio :value="true">是</el-radio>
|
||||
<el-radio :value="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="最大实例数" prop="max_instances">
|
||||
<el-input-number
|
||||
v-model="formData.max_instances"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="10"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-splitter-panel>
|
||||
|
||||
<el-splitter-panel>
|
||||
<div class="code-editor-container">
|
||||
<div class="code-editor-header">
|
||||
<span class="code-editor-title">处理器</span>
|
||||
<span class="code-editor-tip">定义 handler(*args, **kwargs) 函数</span>
|
||||
</div>
|
||||
<Codemirror
|
||||
ref="codeEditorRef"
|
||||
v-model:value="formData.func"
|
||||
:options="codeEditorOptions"
|
||||
border
|
||||
height="calc(100% - 40px)"
|
||||
width="100%"
|
||||
/>
|
||||
</div>
|
||||
</el-splitter-panel>
|
||||
</el-splitter>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</EnhancedDialog>
|
||||
|
||||
<EnhancedDialog
|
||||
v-model="executeDialogVisible"
|
||||
title="调试节点"
|
||||
width="700px"
|
||||
@close="handleCloseExecuteDialog"
|
||||
>
|
||||
<el-form
|
||||
ref="executeFormRef"
|
||||
:model="executeFormData"
|
||||
:rules="executeRules"
|
||||
label-suffix=":"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item label="节点名称">
|
||||
<el-input :value="currentExecuteNode?.name" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行方式" prop="trigger">
|
||||
<el-radio-group v-model="executeFormData.trigger">
|
||||
<el-radio value="now">立即执行</el-radio>
|
||||
<el-radio value="cron">Cron表达式</el-radio>
|
||||
<el-radio value="interval">时间间隔</el-radio>
|
||||
<el-radio value="date">固定日期</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="executeFormData.trigger === 'cron'"
|
||||
label="Cron表达式"
|
||||
prop="trigger_args"
|
||||
>
|
||||
<el-popover
|
||||
:visible="openCron"
|
||||
width="700px"
|
||||
trigger="click"
|
||||
:persistent="false"
|
||||
placement="auto-end"
|
||||
popper-class="node-cron-popover-fix"
|
||||
>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="executeFormData.trigger_args"
|
||||
placeholder="请输入 * * * * * ? *"
|
||||
@click="openCron = true"
|
||||
/>
|
||||
</template>
|
||||
<vue3CronPlus i18n="cn" @change="handlechangeCron" @close="openCron = false" />
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-else-if="executeFormData.trigger === 'interval'"
|
||||
label="间隔时间"
|
||||
prop="trigger_args"
|
||||
>
|
||||
<el-popover
|
||||
:visible="openInterval"
|
||||
width="600px"
|
||||
trigger="click"
|
||||
:persistent="false"
|
||||
placement="auto-end"
|
||||
>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="executeFormData.trigger_args"
|
||||
placeholder="请点击设置间隔时间"
|
||||
@click="openInterval = true"
|
||||
/>
|
||||
</template>
|
||||
<IntervalTab
|
||||
:cron-value="executeFormData.trigger_args"
|
||||
@confirm="handleIntervalConfirm"
|
||||
@cancel="openInterval = false"
|
||||
/>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-else-if="executeFormData.trigger === 'date'"
|
||||
label="执行时间"
|
||||
prop="trigger_args"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="executeFormData.trigger_args"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择执行时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
executeFormData.trigger &&
|
||||
executeFormData.trigger !== 'now' &&
|
||||
executeFormData.trigger !== 'date'
|
||||
"
|
||||
>
|
||||
<el-form-item label="开始时间" prop="start_date">
|
||||
<el-date-picker
|
||||
v-model="executeFormData.start_date"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择开始时间（可选）"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="end_date">
|
||||
<el-date-picker
|
||||
v-model="executeFormData.end_date"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择结束时间（可选）"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleCloseExecuteDialog">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleExecuteNode">
|
||||
确认
|
||||
</el-button>
|
||||
</template>
|
||||
</EnhancedDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'Node',
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import NodeAPI, {
|
||||
NodeTable,
|
||||
NodeForm,
|
||||
NodePageQuery,
|
||||
TriggerType,
|
||||
} from '@/api/module_task/cronjob/node';
|
||||
import { useDictStore } from '@/store/index';
|
||||
import PageSearch from '@/components/CURD/PageSearch.vue';
|
||||
import PageContent from '@/components/CURD/PageContent.vue';
|
||||
import EnhancedDialog from '@/components/CURD/EnhancedDialog.vue';
|
||||
import type { IContentConfig, ISearchConfig } from '@/components/CURD/types';
|
||||
import { useCrudList } from '@/components/CURD/useCrudList';
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { vue3CronPlus } from 'vue3-cron-plus';
|
||||
import 'vue3-cron-plus/dist/index.css';
|
||||
import OperationColumn from '@/components/OperationColumn/index.vue';
|
||||
import IntervalTab from '@/components/IntervalTab/index.vue';
|
||||
import Codemirror, { CmComponentRef } from 'codemirror-editor-vue3';
|
||||
import type { EditorConfiguration } from 'codemirror';
|
||||
import 'codemirror/mode/python/python.js';
|
||||
import 'codemirror/theme/dracula.css';
|
||||
|
||||
const dictStore = useDictStore();
|
||||
|
||||
const codeEditorOptions: EditorConfiguration = {
|
||||
mode: 'python',
|
||||
lineNumbers: true,
|
||||
smartIndent: true,
|
||||
indentUnit: 4,
|
||||
tabSize: 4,
|
||||
theme: 'dracula',
|
||||
lineWrapping: true,
|
||||
autofocus: false,
|
||||
};
|
||||
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
const dataFormRef = ref();
|
||||
const executeFormRef = ref();
|
||||
const submitLoading = ref(false);
|
||||
const openCron = ref(false);
|
||||
const openInterval = ref(false);
|
||||
const codeEditorRef = ref<CmComponentRef>();
|
||||
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: 'module_task:cronjob:node',
|
||||
colon: true,
|
||||
isExpandable: false,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: 'auto' },
|
||||
formItems: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '节点名称',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '请输入节点名称', clearable: true },
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '节点编码',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '请输入节点编码', clearable: true },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const contentConfig = reactive<IContentConfig<NodePageQuery>>({
|
||||
permPrefix: 'module_task:cronjob:node',
|
||||
cols: [],
|
||||
hideColumnFilter: true,
|
||||
toolbar: ['add', 'delete'],
|
||||
defaultToolbar: ['refresh', 'filter'],
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
request: { page_no: 'page_no', page_size: 'page_size' },
|
||||
indexAction: async (params) => {
|
||||
const res = await NodeAPI.listNode(params as NodePageQuery);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
},
|
||||
deleteAction: (ids) =>
|
||||
NodeAPI.deleteNode(
|
||||
ids
|
||||
.split(',')
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n) && n > 0)
|
||||
),
|
||||
deleteConfirm: {
|
||||
title: '警告',
|
||||
message:
|
||||
'确认删除选中的节点吗？\n' +
|
||||
'此操作将同时删除节点定义并移除调度器中的相关任务。\n' +
|
||||
'正在运行的任务会被立即移除，待执行任务的日志将被标记为已取消。',
|
||||
type: 'warning',
|
||||
},
|
||||
});
|
||||
|
||||
const defaultCodeBlock = `def handler(*args, **kwargs):
|
||||
"""
|
||||
Demo: 调用工程中的方法处理数据
|
||||
|
||||
演示如何:
|
||||
1. 从工程中导入方法
|
||||
2. 调用处理器处理数据
|
||||
3. 返回处理结果
|
||||
"""
|
||||
|
||||
# 从工程中导入方法
|
||||
from app.plugin.module_task.cronjob.node.handlers.demo_handler import (
|
||||
demo_handler,
|
||||
process_data
|
||||
)
|
||||
|
||||
print("=" * 50)
|
||||
print("Demo 任务开始执行")
|
||||
print("=" * 50)
|
||||
|
||||
# 1. 调用 demo_handler
|
||||
print("1. 调用 demo_handler:")
|
||||
result1 = demo_handler("参数1", "参数2", key="value")
|
||||
print(f" 返回: {result1}")
|
||||
|
||||
# 2. 调用 process_data 计算平均值
|
||||
print("2. 数据处理 - 计算平均值:")
|
||||
numbers = [10, 20, 30, 40, 50]
|
||||
result2 = process_data(numbers, operation="avg")
|
||||
print(f" 输入: {numbers}")
|
||||
print(f" 结果: {result2}")
|
||||
|
||||
# 3. 调用 process_data 计算总和
|
||||
print("3. 数据处理 - 计算总和:")
|
||||
result3 = process_data(numbers, operation="sum")
|
||||
print(f" 输入: {numbers}")
|
||||
print(f" 结果: {result3}")
|
||||
|
||||
print("=" * 50)
|
||||
print("Demo 任务执行完成")
|
||||
print("=" * 50)
|
||||
|
||||
return {
|
||||
"status": "success",
|
||||
"demo_result": result1,
|
||||
"avg_result": result2,
|
||||
"sum_result": result3
|
||||
}
|
||||
`;
|
||||
|
||||
const formData = reactive<NodeForm>({
|
||||
id: undefined,
|
||||
name: '',
|
||||
code: undefined,
|
||||
jobstore: 'default',
|
||||
executor: 'default',
|
||||
func: defaultCodeBlock,
|
||||
args: undefined,
|
||||
kwargs: undefined,
|
||||
coalesce: false,
|
||||
max_instances: 1,
|
||||
start_date: undefined,
|
||||
end_date: undefined,
|
||||
});
|
||||
|
||||
const argsList = ref<string[]>([]);
|
||||
const kwargsList = ref<{ key: string; value: string }[]>([]);
|
||||
|
||||
const executeDialogVisible = ref(false);
|
||||
const currentExecuteNode = ref<NodeTable | null>(null);
|
||||
const executeFormData = reactive<{
|
||||
trigger: TriggerType;
|
||||
trigger_args?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
}>({
|
||||
trigger: 'now',
|
||||
trigger_args: undefined,
|
||||
start_date: undefined,
|
||||
end_date: undefined,
|
||||
});
|
||||
|
||||
const dialogVisible = reactive({
|
||||
title: '',
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入节点编码', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const executeRules = reactive({
|
||||
trigger: [{ required: true, message: '请选择执行方式', trigger: 'change' }],
|
||||
trigger_args: [{ required: true, message: '请设置执行参数', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
function handleRowDelete(id: number) {
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
|
||||
const initialFormData: Partial<NodeForm> = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
code: undefined,
|
||||
jobstore: 'sqlalchemy',
|
||||
executor: 'default',
|
||||
func: defaultCodeBlock,
|
||||
args: undefined,
|
||||
kwargs: undefined,
|
||||
coalesce: false,
|
||||
max_instances: 5,
|
||||
start_date: undefined,
|
||||
end_date: undefined,
|
||||
};
|
||||
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
Object.assign(formData, initialFormData);
|
||||
argsList.value = [];
|
||||
kwargsList.value = [];
|
||||
}
|
||||
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
async function handleOpenDialog(type: 'create' | 'update', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await NodeAPI.detailNode(id);
|
||||
dialogVisible.title = '修改节点';
|
||||
Object.assign(formData, response.data.data);
|
||||
const data = response.data.data;
|
||||
argsList.value = data.args ? data.args.split(',').map((v: string) => v.trim()) : [];
|
||||
kwargsList.value = data.kwargs
|
||||
? Object.entries(JSON.parse(data.kwargs)).map(([key, value]) => ({
|
||||
key,
|
||||
value: String(value),
|
||||
}))
|
||||
: [];
|
||||
} else {
|
||||
dialogVisible.title = '新增节点';
|
||||
formData.id = undefined;
|
||||
argsList.value = [];
|
||||
kwargsList.value = [];
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
function handleDialogOpened() {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
codeEditorRef.value?.refresh?.();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
const id = formData.id;
|
||||
try {
|
||||
const submitData = {
|
||||
...formData,
|
||||
args: argsList.value.filter((v) => v.trim()).join(',') || undefined,
|
||||
kwargs:
|
||||
kwargsList.value.filter((v) => v.key.trim()).length > 0
|
||||
? JSON.stringify(
|
||||
Object.fromEntries(
|
||||
kwargsList.value.filter((v) => v.key.trim()).map((v) => [v.key, v.value])
|
||||
)
|
||||
)
|
||||
: undefined,
|
||||
};
|
||||
if (id) {
|
||||
await NodeAPI.updateNode(id, submitData);
|
||||
} else {
|
||||
await NodeAPI.createNode(submitData);
|
||||
}
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
refreshList();
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handlechangeCron = (cronStr: string) => {
|
||||
if (typeof cronStr == 'string') {
|
||||
executeFormData.trigger_args = cronStr;
|
||||
}
|
||||
};
|
||||
|
||||
const handleIntervalConfirm = (value: string) => {
|
||||
executeFormData.trigger_args = value;
|
||||
openInterval.value = false;
|
||||
};
|
||||
|
||||
function handleOpenExecuteDialog(row: NodeTable) {
|
||||
currentExecuteNode.value = row;
|
||||
executeFormData.trigger = 'now';
|
||||
executeFormData.trigger_args = undefined;
|
||||
executeFormData.start_date = undefined;
|
||||
executeFormData.end_date = undefined;
|
||||
executeDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function handleCloseExecuteDialog() {
|
||||
executeDialogVisible.value = false;
|
||||
currentExecuteNode.value = null;
|
||||
if (executeFormRef.value) {
|
||||
executeFormRef.value.resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleExecuteNode() {
|
||||
if (executeFormData.trigger !== 'now') {
|
||||
const valid = await executeFormRef.value?.validate().catch(() => false);
|
||||
if (!valid) return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitLoading.value = true;
|
||||
const params: any = {
|
||||
trigger: executeFormData.trigger,
|
||||
};
|
||||
|
||||
if (executeFormData.trigger !== 'now') {
|
||||
params.trigger_args = executeFormData.trigger_args;
|
||||
params.start_date = executeFormData.start_date;
|
||||
params.end_date = executeFormData.end_date;
|
||||
}
|
||||
|
||||
await NodeAPI.executeNode(currentExecuteNode.value?.id as number, params);
|
||||
|
||||
handleCloseExecuteDialog();
|
||||
|
||||
refreshList();
|
||||
} catch (error: any) {
|
||||
ElMessage.error({
|
||||
message: error.response?.data?.msg || '调试失败',
|
||||
type: 'error',
|
||||
duration: 3000,
|
||||
});
|
||||
console.error(error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await dictStore.getDict(['sys_job_store', 'sys_job_executor']);
|
||||
refreshList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.code-editor-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.code-editor-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.code-editor-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-editor-tip {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dynamic-params {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-preview {
|
||||
max-height: 200px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.execution-log-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- popover 挂载到 body，需单独写；修复 vue3-cron-plus 全局 .el-tag--info { margin-left: -60px } 误伤多选下拉里 tag -->
|
||||
<style lang="scss">
|
||||
.node-cron-popover-fix {
|
||||
.vue3-cron-plus-container .el-select .el-tag {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* 具体秒数等多选行：避免文案与选择器挤在同一行错位 */
|
||||
.vue3-cron-plus-container .tabBody .el-radio.long {
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
|
||||
.el-radio__label {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 8px;
|
||||
align-items: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
flex: 1 1 200px;
|
||||
min-width: 180px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user