mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-26 22:31:21 +00:00
fix(web): 修复代码格式和文件清理问题
清理无用文件和资源，调整代码格式统一双引号，修复部分组件路径引用问题 删除大量无用图片资源和组件文件，统一代码风格使用双引号，修复国际化文件路径引用，调整部分组件逻辑，优化项目结构
This commit is contained in:
zhangtao
File diff suppressed because it is too large
Load Diff
@@ -336,113 +336,113 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'Node',
|
||||
inheritAttrs: false,
|
||||
});
|
||||
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';
|
||||
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 dictStore = useDictStore();
|
||||
|
||||
const codeEditorOptions: EditorConfiguration = {
|
||||
mode: 'python',
|
||||
lineNumbers: true,
|
||||
smartIndent: true,
|
||||
indentUnit: 4,
|
||||
tabSize: 4,
|
||||
theme: 'dracula',
|
||||
lineWrapping: true,
|
||||
autofocus: false,
|
||||
};
|
||||
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 { 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],
|
||||
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 },
|
||||
},
|
||||
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,
|
||||
};
|
||||
{
|
||||
prop: "code",
|
||||
label: "节点编码",
|
||||
type: "input",
|
||||
attrs: { placeholder: "请输入节点编码", clearable: true },
|
||||
},
|
||||
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):
|
||||
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: 调用工程中的方法处理数据
|
||||
|
||||
@@ -492,308 +492,308 @@
|
||||
}
|
||||
`;
|
||||
|
||||
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 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 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 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 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 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' }],
|
||||
});
|
||||
const executeRules = reactive({
|
||||
trigger: [{ required: true, message: "请选择执行方式", trigger: "change" }],
|
||||
trigger_args: [{ required: true, message: "请设置执行参数", trigger: "blur" }],
|
||||
});
|
||||
|
||||
function handleRowDelete(id: number) {
|
||||
contentRef.value?.handleDelete(id);
|
||||
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 = [];
|
||||
}
|
||||
|
||||
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 handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
Object.assign(formData, initialFormData);
|
||||
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;
|
||||
}
|
||||
|
||||
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();
|
||||
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-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-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.code-editor-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.code-editor-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-editor-tip {
|
||||
font-size: 12px;
|
||||
}
|
||||
.code-editor-tip {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dynamic-params {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.dynamic-params {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.execution-log-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 具体秒数等多选行：避免文案与选择器挤在同一行错位 */
|
||||
.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%;
|
||||
}
|
||||
.el-select {
|
||||
flex: 1 1 200px;
|
||||
min-width: 180px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -47,128 +47,128 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { Handle } from '@vue-flow/core';
|
||||
import { ref, computed } from "vue";
|
||||
import { Handle } from "@vue-flow/core";
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
data: Object,
|
||||
nodeStatus: String,
|
||||
});
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
data: Object,
|
||||
nodeStatus: String,
|
||||
});
|
||||
|
||||
const showHandles = ref(false);
|
||||
const showHandles = ref(false);
|
||||
|
||||
const nodeType = computed(() => {
|
||||
return {
|
||||
code: props.data?.type || 'custom',
|
||||
name: props.data?.label || '自定义节点',
|
||||
color: getCategoryColor(props.data?.category),
|
||||
};
|
||||
});
|
||||
const nodeType = computed(() => {
|
||||
return {
|
||||
code: props.data?.type || "custom",
|
||||
name: props.data?.label || "自定义节点",
|
||||
color: getCategoryColor(props.data?.category),
|
||||
};
|
||||
});
|
||||
|
||||
function getCategoryColor(category) {
|
||||
const colorMap = {
|
||||
trigger: '#e6a23c',
|
||||
action: '#409eff',
|
||||
condition: '#67c23a',
|
||||
control: '#909399',
|
||||
};
|
||||
return colorMap[category] || '#409eff';
|
||||
function getCategoryColor(category) {
|
||||
const colorMap = {
|
||||
trigger: "#e6a23c",
|
||||
action: "#409eff",
|
||||
condition: "#67c23a",
|
||||
control: "#909399",
|
||||
};
|
||||
return colorMap[category] || "#409eff";
|
||||
}
|
||||
|
||||
const nodeClass = computed(() => {
|
||||
if (props.data?.type === "input") {
|
||||
return "start-node";
|
||||
}
|
||||
|
||||
const nodeClass = computed(() => {
|
||||
if (props.data?.type === 'input') {
|
||||
return 'start-node';
|
||||
}
|
||||
if (props.data?.type === 'output') {
|
||||
return 'end-node';
|
||||
}
|
||||
return 'custom-node';
|
||||
});
|
||||
if (props.data?.type === "output") {
|
||||
return "end-node";
|
||||
}
|
||||
return "custom-node";
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.vue-flow__node-input {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
padding: 0 !important;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer !important;
|
||||
background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%) !important;
|
||||
border: 3px solid #5daf34 !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow:
|
||||
0 6px 12px rgba(103, 194, 58, 0.4),
|
||||
0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
.vue-flow__node-input {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
padding: 0 !important;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer !important;
|
||||
background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%) !important;
|
||||
border: 3px solid #5daf34 !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow:
|
||||
0 6px 12px rgba(103, 194, 58, 0.4),
|
||||
0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.vue-flow__node-output {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
padding: 0 !important;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer !important;
|
||||
background: linear-gradient(135deg, #f56c6c 0%, #e04e4e 100%) !important;
|
||||
border: 3px solid #e04e4e !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow:
|
||||
0 6px 12px rgba(245, 108, 108, 0.4),
|
||||
0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
.vue-flow__node-output {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
padding: 0 !important;
|
||||
color: #ffffff !important;
|
||||
cursor: pointer !important;
|
||||
background: linear-gradient(135deg, #f56c6c 0%, #e04e4e 100%) !important;
|
||||
border: 3px solid #e04e4e !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow:
|
||||
0 6px 12px rgba(245, 108, 108, 0.4),
|
||||
0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.dynamic-node {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #409eff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
.dynamic-node {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #409eff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.vue-flow__node-input .dynamic-node,
|
||||
.vue-flow__node-output .dynamic-node {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.vue-flow__node-input .dynamic-node,
|
||||
.vue-flow__node-output .dynamic-node {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.node-content {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.node-content {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.node-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.node-badge {
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: #409eff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.node-badge {
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: #409eff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.vue-flow__handle {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.vue-flow__handle {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.vue-flow__handle.handle-visible,
|
||||
.vue-flow__handle.vue-flow__handle-connecting,
|
||||
.vue-flow__handle.vue-flow__handle-valid {
|
||||
opacity: 1;
|
||||
}
|
||||
.vue-flow__handle.handle-visible,
|
||||
.vue-flow__handle.vue-flow__handle-connecting,
|
||||
.vue-flow__handle.vue-flow__handle-valid {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -61,107 +61,107 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElInputNumber,
|
||||
ElSwitch,
|
||||
ElColorPicker,
|
||||
ElMessage,
|
||||
ElIcon,
|
||||
} from 'element-plus';
|
||||
import { Close } from '@element-plus/icons-vue';
|
||||
import { ref, watch } from "vue";
|
||||
import {
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElInputNumber,
|
||||
ElSwitch,
|
||||
ElColorPicker,
|
||||
ElMessage,
|
||||
ElIcon,
|
||||
} from "element-plus";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps({
|
||||
edge: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
edge: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'save', 'delete']);
|
||||
const emit = defineEmits(["close", "save", "delete"]);
|
||||
|
||||
const formData = ref({
|
||||
label: props.edge?.label || '',
|
||||
type: props.edge?.type || 'smoothstep',
|
||||
color: props.edge?.style?.stroke || '#000000',
|
||||
strokeWidth: props.edge?.style?.strokeWidth || 2,
|
||||
animated: props.edge?.animated || false,
|
||||
condition: props.edge?.data?.condition || '',
|
||||
description: props.edge?.data?.description || '',
|
||||
});
|
||||
const formData = ref({
|
||||
label: props.edge?.label || "",
|
||||
type: props.edge?.type || "smoothstep",
|
||||
color: props.edge?.style?.stroke || "#000000",
|
||||
strokeWidth: props.edge?.style?.strokeWidth || 2,
|
||||
animated: props.edge?.animated || false,
|
||||
condition: props.edge?.data?.condition || "",
|
||||
description: props.edge?.data?.description || "",
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.edge,
|
||||
(newEdge) => {
|
||||
if (newEdge) {
|
||||
formData.value = {
|
||||
label: newEdge.label || '',
|
||||
type: newEdge.type || 'smoothstep',
|
||||
color: newEdge.style?.stroke || '#000000',
|
||||
strokeWidth: newEdge.style?.strokeWidth || 2,
|
||||
animated: newEdge.animated || false,
|
||||
condition: newEdge.data?.condition || '',
|
||||
description: newEdge.data?.description || '',
|
||||
};
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
watch(
|
||||
() => props.edge,
|
||||
(newEdge) => {
|
||||
if (newEdge) {
|
||||
formData.value = {
|
||||
label: newEdge.label || "",
|
||||
type: newEdge.type || "smoothstep",
|
||||
color: newEdge.style?.stroke || "#000000",
|
||||
strokeWidth: newEdge.style?.strokeWidth || 2,
|
||||
animated: newEdge.animated || false,
|
||||
condition: newEdge.data?.condition || "",
|
||||
description: newEdge.data?.description || "",
|
||||
};
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
function handleClose() {
|
||||
emit('close');
|
||||
}
|
||||
function handleClose() {
|
||||
emit("close");
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
emit('save', formData.value);
|
||||
ElMessage.success('保存成功');
|
||||
}
|
||||
function handleSave() {
|
||||
emit("save", formData.value);
|
||||
ElMessage.success("保存成功");
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
emit('delete');
|
||||
}
|
||||
function handleDelete() {
|
||||
emit("delete");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edge-config-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.edge-config-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
padding: 4px;
|
||||
}
|
||||
.close-btn {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.panel-actions .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
.panel-actions .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -58,162 +58,162 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElMessage,
|
||||
ElIcon,
|
||||
} from 'element-plus';
|
||||
import { Close } from '@element-plus/icons-vue';
|
||||
import WorkflowNodeTypeAPI, {
|
||||
type WorkflowNodeTypeOption,
|
||||
} from '@/api/module_task/workflow/node-type';
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import {
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElMessage,
|
||||
ElIcon,
|
||||
} from "element-plus";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import WorkflowNodeTypeAPI, {
|
||||
type WorkflowNodeTypeOption,
|
||||
} from "@/api/module_task/workflow/node-type";
|
||||
|
||||
const props = defineProps({
|
||||
node: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
node: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'save', 'delete']);
|
||||
const emit = defineEmits(["close", "save", "delete"]);
|
||||
|
||||
const nodeTypes = ref<WorkflowNodeTypeOption[]>([]);
|
||||
const nodeTypes = ref<WorkflowNodeTypeOption[]>([]);
|
||||
|
||||
const formData = ref({
|
||||
type: props.node?.type || '',
|
||||
label: props.node?.data?.label || '',
|
||||
args: props.node?.data?.args || '',
|
||||
kwargsStr: props.node?.data?.kwargsStr || '{}',
|
||||
description: props.node?.data?.description || '',
|
||||
});
|
||||
const formData = ref({
|
||||
type: props.node?.type || "",
|
||||
label: props.node?.data?.label || "",
|
||||
args: props.node?.data?.args || "",
|
||||
kwargsStr: props.node?.data?.kwargsStr || "{}",
|
||||
description: props.node?.data?.description || "",
|
||||
});
|
||||
|
||||
const loadNodeTypes = async () => {
|
||||
try {
|
||||
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeOptions();
|
||||
if (res.data) {
|
||||
nodeTypes.value = res.data.data || [];
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error('加载节点类型失败');
|
||||
const loadNodeTypes = async () => {
|
||||
try {
|
||||
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeOptions();
|
||||
if (res.data) {
|
||||
nodeTypes.value = res.data.data || [];
|
||||
}
|
||||
};
|
||||
} catch {
|
||||
ElMessage.error("加载节点类型失败");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTypeChange = async (typeCode: string) => {
|
||||
const nodeType = nodeTypes.value.find((t) => t.code === typeCode);
|
||||
if (nodeType) {
|
||||
formData.value.args = nodeType.args || '';
|
||||
formData.value.kwargsStr = nodeType.kwargs || '{}';
|
||||
}
|
||||
};
|
||||
const handleTypeChange = async (typeCode: string) => {
|
||||
const nodeType = nodeTypes.value.find((t) => t.code === typeCode);
|
||||
if (nodeType) {
|
||||
formData.value.args = nodeType.args || "";
|
||||
formData.value.kwargsStr = nodeType.kwargs || "{}";
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.node,
|
||||
(newNode) => {
|
||||
if (newNode) {
|
||||
const kwargsData = newNode.data?.kwargs;
|
||||
let kwargsStr = '{}';
|
||||
if (kwargsData) {
|
||||
if (typeof kwargsData === 'string') {
|
||||
kwargsStr = kwargsData;
|
||||
} else if (typeof kwargsData === 'object') {
|
||||
kwargsStr = JSON.stringify(kwargsData, null, 2);
|
||||
}
|
||||
watch(
|
||||
() => props.node,
|
||||
(newNode) => {
|
||||
if (newNode) {
|
||||
const kwargsData = newNode.data?.kwargs;
|
||||
let kwargsStr = "{}";
|
||||
if (kwargsData) {
|
||||
if (typeof kwargsData === "string") {
|
||||
kwargsStr = kwargsData;
|
||||
} else if (typeof kwargsData === "object") {
|
||||
kwargsStr = JSON.stringify(kwargsData, null, 2);
|
||||
}
|
||||
|
||||
formData.value = {
|
||||
type: newNode.type || '',
|
||||
label: newNode.data?.label || '',
|
||||
args: newNode.data?.args || '',
|
||||
kwargsStr,
|
||||
description: newNode.data?.description || '',
|
||||
};
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
function handleClose() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
try {
|
||||
if (formData.value.kwargsStr && formData.value.kwargsStr.trim()) {
|
||||
JSON.parse(formData.value.kwargsStr);
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error('关键字参数 JSON 格式错误');
|
||||
return;
|
||||
formData.value = {
|
||||
type: newNode.type || "",
|
||||
label: newNode.data?.label || "",
|
||||
args: newNode.data?.args || "",
|
||||
kwargsStr,
|
||||
description: newNode.data?.description || "",
|
||||
};
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
emit('save', {
|
||||
type: formData.value.type,
|
||||
label: formData.value.label,
|
||||
args: formData.value.args,
|
||||
kwargs: formData.value.kwargsStr,
|
||||
description: formData.value.description,
|
||||
});
|
||||
ElMessage.success('保存成功');
|
||||
}
|
||||
function handleClose() {
|
||||
emit("close");
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
emit('delete');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadNodeTypes();
|
||||
if (props.node?.type) {
|
||||
handleTypeChange(props.node.type);
|
||||
function handleSave() {
|
||||
try {
|
||||
if (formData.value.kwargsStr && formData.value.kwargsStr.trim()) {
|
||||
JSON.parse(formData.value.kwargsStr);
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error("关键字参数 JSON 格式错误");
|
||||
return;
|
||||
}
|
||||
|
||||
emit("save", {
|
||||
type: formData.value.type,
|
||||
label: formData.value.label,
|
||||
args: formData.value.args,
|
||||
kwargs: formData.value.kwargsStr,
|
||||
description: formData.value.description,
|
||||
});
|
||||
ElMessage.success("保存成功");
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
emit("delete");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadNodeTypes();
|
||||
if (props.node?.type) {
|
||||
handleTypeChange(props.node.type);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.node-config-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.node-config-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
padding: 4px;
|
||||
}
|
||||
.close-btn {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
.field-hint {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.panel-actions .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
.panel-actions .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -112,196 +112,196 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'WorkflowDefinition',
|
||||
inheritAttrs: false,
|
||||
});
|
||||
defineOptions({
|
||||
name: "WorkflowDefinition",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import PageSearch from '@/components/CURD/PageSearch.vue';
|
||||
import PageContent from '@/components/CURD/PageContent.vue';
|
||||
import type { IContentConfig, ISearchConfig } from '@/components/CURD/types';
|
||||
import { useCrudList } from '@/components/CURD/useCrudList';
|
||||
import OperationColumn from '@/components/OperationColumn/index.vue';
|
||||
import WorkflowDefinitionAPI, {
|
||||
type WorkflowTable,
|
||||
type WorkflowPageQuery,
|
||||
} from '@/api/module_task/workflow/definition';
|
||||
import WorkflowDesignDrawer from '../components/WorkflowDesignDrawer.vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ArrowDown } from "@element-plus/icons-vue";
|
||||
import PageSearch from "@/components/CURD/PageSearch.vue";
|
||||
import PageContent from "@/components/CURD/PageContent.vue";
|
||||
import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
|
||||
import { useCrudList } from "@/components/CURD/useCrudList";
|
||||
import OperationColumn from "@/components/OperationColumn/index.vue";
|
||||
import WorkflowDefinitionAPI, {
|
||||
type WorkflowTable,
|
||||
type WorkflowPageQuery,
|
||||
} from "@/api/module_task/workflow/definition";
|
||||
import WorkflowDesignDrawer from "../components/WorkflowDesignDrawer.vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
|
||||
const selectedWorkflow = ref<WorkflowTable>();
|
||||
const createVisible = ref(false);
|
||||
const selectedWorkflow = ref<WorkflowTable>();
|
||||
const createVisible = ref(false);
|
||||
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: 'module_task:workflow:definition',
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: 'auto' },
|
||||
formItems: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '流程名称',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '请输入流程名称', clearable: true },
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '流程编码',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '请输入流程编码', clearable: true },
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '草稿', value: 'draft' },
|
||||
{ label: '已发布', value: 'published' },
|
||||
{ label: '已归档', value: 'archived' },
|
||||
],
|
||||
attrs: { placeholder: '请选择状态', clearable: true, style: { width: '170px' } },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function normalizeWorkflowQuery(params: Record<string, unknown>): WorkflowPageQuery {
|
||||
const p = { ...params } as Record<string, unknown>;
|
||||
if (p.status === '' || p.status === null) p.status = undefined;
|
||||
return p as unknown as WorkflowPageQuery;
|
||||
}
|
||||
|
||||
const contentConfig = reactive<IContentConfig<WorkflowPageQuery>>({
|
||||
permPrefix: 'module_task:workflow:definition',
|
||||
title: '工作流管理',
|
||||
tooltip: '流程编排列表，支持发布与执行',
|
||||
cols: [],
|
||||
hideColumnFilter: true,
|
||||
toolbar: [
|
||||
{ name: 'add', text: '新增', attrs: { icon: 'plus', type: 'success' }, perm: 'create' },
|
||||
'delete',
|
||||
],
|
||||
defaultToolbar: ['refresh'],
|
||||
initialFetch: false,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: "module_task:workflow:definition",
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: "auto" },
|
||||
formItems: [
|
||||
{
|
||||
prop: "name",
|
||||
label: "流程名称",
|
||||
type: "input",
|
||||
attrs: { placeholder: "请输入流程名称", clearable: true },
|
||||
},
|
||||
request: { page_no: 'page_no', page_size: 'page_size' },
|
||||
indexAction: async (params) => {
|
||||
const res = await WorkflowDefinitionAPI.getWorkflowList(
|
||||
normalizeWorkflowQuery(params as unknown as Record<string, unknown>)
|
||||
);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
{
|
||||
prop: "code",
|
||||
label: "流程编码",
|
||||
type: "input",
|
||||
attrs: { placeholder: "请输入流程编码", clearable: true },
|
||||
},
|
||||
deleteAction: (ids) =>
|
||||
WorkflowDefinitionAPI.deleteWorkflow(
|
||||
ids
|
||||
.split(',')
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n) && n > 0)
|
||||
),
|
||||
deleteConfirm: {
|
||||
title: '警告',
|
||||
message: '确认删除选中的工作流吗？',
|
||||
type: 'warning',
|
||||
{
|
||||
prop: "status",
|
||||
label: "状态",
|
||||
type: "select",
|
||||
options: [
|
||||
{ label: "草稿", value: "draft" },
|
||||
{ label: "已发布", value: "published" },
|
||||
{ label: "已归档", value: "archived" },
|
||||
],
|
||||
attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
|
||||
},
|
||||
});
|
||||
],
|
||||
});
|
||||
|
||||
function handleRowDelete(id?: number) {
|
||||
if (id == null) return;
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
function normalizeWorkflowQuery(params: Record<string, unknown>): WorkflowPageQuery {
|
||||
const p = { ...params } as Record<string, unknown>;
|
||||
if (p.status === "" || p.status === null) p.status = undefined;
|
||||
return p as unknown as WorkflowPageQuery;
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
selectedWorkflow.value = undefined;
|
||||
createVisible.value = true;
|
||||
}
|
||||
|
||||
function handleEdit(record: WorkflowTable) {
|
||||
selectedWorkflow.value = record;
|
||||
createVisible.value = true;
|
||||
}
|
||||
|
||||
function getStatusType(status: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
draft: 'info',
|
||||
published: 'success',
|
||||
archived: 'warning',
|
||||
const contentConfig = reactive<IContentConfig<WorkflowPageQuery>>({
|
||||
permPrefix: "module_task:workflow:definition",
|
||||
title: "工作流管理",
|
||||
tooltip: "流程编排列表，支持发布与执行",
|
||||
cols: [],
|
||||
hideColumnFilter: true,
|
||||
toolbar: [
|
||||
{ name: "add", text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
|
||||
"delete",
|
||||
],
|
||||
defaultToolbar: ["refresh"],
|
||||
initialFetch: false,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
request: { page_no: "page_no", page_size: "page_size" },
|
||||
indexAction: async (params) => {
|
||||
const res = await WorkflowDefinitionAPI.getWorkflowList(
|
||||
normalizeWorkflowQuery(params as unknown as Record<string, unknown>)
|
||||
);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
return typeMap[status] || '';
|
||||
}
|
||||
},
|
||||
deleteAction: (ids) =>
|
||||
WorkflowDefinitionAPI.deleteWorkflow(
|
||||
ids
|
||||
.split(",")
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n) && n > 0)
|
||||
),
|
||||
deleteConfirm: {
|
||||
title: "警告",
|
||||
message: "确认删除选中的工作流吗？",
|
||||
type: "warning",
|
||||
},
|
||||
});
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const textMap: Record<string, string> = {
|
||||
draft: '草稿',
|
||||
published: '已发布',
|
||||
archived: '已归档',
|
||||
};
|
||||
return textMap[status] || status;
|
||||
}
|
||||
function handleRowDelete(id?: number) {
|
||||
if (id == null) return;
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
|
||||
function handlePublish(record: WorkflowTable) {
|
||||
ElMessageBox.confirm('确定要发布此工作流吗？发布后可执行。', '确认发布', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
if (!record.id) {
|
||||
ElMessage.error('工作流ID不存在');
|
||||
return;
|
||||
}
|
||||
await WorkflowDefinitionAPI.publishWorkflow(record.id, {});
|
||||
ElMessage.success('发布成功');
|
||||
refreshList();
|
||||
} catch {
|
||||
ElMessage.error('发布失败');
|
||||
function handleCreate() {
|
||||
selectedWorkflow.value = undefined;
|
||||
createVisible.value = true;
|
||||
}
|
||||
|
||||
function handleEdit(record: WorkflowTable) {
|
||||
selectedWorkflow.value = record;
|
||||
createVisible.value = true;
|
||||
}
|
||||
|
||||
function getStatusType(status: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
draft: "info",
|
||||
published: "success",
|
||||
archived: "warning",
|
||||
};
|
||||
return typeMap[status] || "";
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const textMap: Record<string, string> = {
|
||||
draft: "草稿",
|
||||
published: "已发布",
|
||||
archived: "已归档",
|
||||
};
|
||||
return textMap[status] || status;
|
||||
}
|
||||
|
||||
function handlePublish(record: WorkflowTable) {
|
||||
ElMessageBox.confirm("确定要发布此工作流吗？发布后可执行。", "确认发布", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
if (!record.id) {
|
||||
ElMessage.error("工作流ID不存在");
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
function handleExecute(action: string, record: WorkflowTable) {
|
||||
if (action !== 'execute') return;
|
||||
ElMessageBox.confirm('确定要立即执行此工作流吗？', '确认执行', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
await WorkflowDefinitionAPI.publishWorkflow(record.id, {});
|
||||
ElMessage.success("发布成功");
|
||||
refreshList();
|
||||
} catch {
|
||||
ElMessage.error("发布失败");
|
||||
}
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
if (!record.id) {
|
||||
ElMessage.error('工作流ID不存在');
|
||||
return;
|
||||
}
|
||||
const res = await WorkflowDefinitionAPI.executeWorkflow({
|
||||
workflow_id: record.id,
|
||||
variables: {},
|
||||
});
|
||||
if (res.data?.data) {
|
||||
const result = res.data.data;
|
||||
ElMessage.success(`工作流执行${result.status === 'completed' ? '成功' : '失败'}`);
|
||||
}
|
||||
refreshList();
|
||||
} catch {
|
||||
ElMessage.error('执行失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshList();
|
||||
});
|
||||
function handleExecute(action: string, record: WorkflowTable) {
|
||||
if (action !== "execute") return;
|
||||
ElMessageBox.confirm("确定要立即执行此工作流吗？", "确认执行", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
if (!record.id) {
|
||||
ElMessage.error("工作流ID不存在");
|
||||
return;
|
||||
}
|
||||
const res = await WorkflowDefinitionAPI.executeWorkflow({
|
||||
workflow_id: record.id,
|
||||
variables: {},
|
||||
});
|
||||
if (res.data?.data) {
|
||||
const result = res.data.data;
|
||||
ElMessage.success(`工作流执行${result.status === "completed" ? "成功" : "失败"}`);
|
||||
}
|
||||
refreshList();
|
||||
} catch {
|
||||
ElMessage.error("执行失败");
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<el-table-column label="启用" prop="is_active" min-width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.is_active ? 'success' : 'info'">
|
||||
{{ scope.row.is_active ? '是' : '否' }}
|
||||
{{ scope.row.is_active ? "是" : "否" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -134,214 +134,214 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'WorkflowNodeType',
|
||||
inheritAttrs: false,
|
||||
});
|
||||
defineOptions({
|
||||
name: "WorkflowNodeType",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
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 OperationColumn from '@/components/OperationColumn/index.vue';
|
||||
import WorkflowNodeTypeAPI, {
|
||||
type WorkflowNodeTypeForm,
|
||||
type WorkflowNodeTypePageQuery,
|
||||
type WorkflowNodeTypeTable,
|
||||
} from '@/api/module_task/workflow/node-type';
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||
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 OperationColumn from "@/components/OperationColumn/index.vue";
|
||||
import WorkflowNodeTypeAPI, {
|
||||
type WorkflowNodeTypeForm,
|
||||
type WorkflowNodeTypePageQuery,
|
||||
type WorkflowNodeTypeTable,
|
||||
} from "@/api/module_task/workflow/node-type";
|
||||
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref('新增节点类型');
|
||||
const editingId = ref<number | null>(null);
|
||||
const submitting = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref("新增节点类型");
|
||||
const editingId = ref<number | null>(null);
|
||||
const submitting = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: 'module_task:workflow:node-type',
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: 'auto' },
|
||||
formItems: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '名称', clearable: true },
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '编码',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '编码', clearable: true },
|
||||
},
|
||||
{
|
||||
prop: 'category',
|
||||
label: '分类',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '触发器', value: 'trigger' },
|
||||
{ label: '动作', value: 'action' },
|
||||
{ label: '条件', value: 'condition' },
|
||||
{ label: '控制', value: 'control' },
|
||||
],
|
||||
attrs: { placeholder: '全部', clearable: true, style: { width: '170px' } },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function normalizeNodeTypeQuery(params: Record<string, unknown>): WorkflowNodeTypePageQuery {
|
||||
const p = { ...params } as Record<string, unknown>;
|
||||
if (p.category === '' || p.category === null) p.category = undefined;
|
||||
return p as unknown as WorkflowNodeTypePageQuery;
|
||||
}
|
||||
|
||||
const contentConfig = reactive<IContentConfig<WorkflowNodeTypePageQuery>>({
|
||||
permPrefix: 'module_task:workflow:node-type',
|
||||
cols: [],
|
||||
hideColumnFilter: true,
|
||||
toolbar: [
|
||||
{ name: 'add', text: '新增', attrs: { icon: 'plus', type: 'success' }, perm: 'create' },
|
||||
'delete',
|
||||
],
|
||||
defaultToolbar: ['refresh'],
|
||||
initialFetch: false,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: "module_task:workflow:node-type",
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: "auto" },
|
||||
formItems: [
|
||||
{
|
||||
prop: "name",
|
||||
label: "名称",
|
||||
type: "input",
|
||||
attrs: { placeholder: "名称", clearable: true },
|
||||
},
|
||||
request: { page_no: 'page_no', page_size: 'page_size' },
|
||||
indexAction: async (params) => {
|
||||
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeList(
|
||||
normalizeNodeTypeQuery(params as unknown as Record<string, unknown>)
|
||||
);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
{
|
||||
prop: "code",
|
||||
label: "编码",
|
||||
type: "input",
|
||||
attrs: { placeholder: "编码", clearable: true },
|
||||
},
|
||||
deleteAction: (ids) =>
|
||||
WorkflowNodeTypeAPI.deleteWorkflowNodeType(
|
||||
ids
|
||||
.split(',')
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n) && n > 0)
|
||||
),
|
||||
deleteConfirm: {
|
||||
title: '警告',
|
||||
message: '确认删除选中的编排节点类型吗？',
|
||||
type: 'warning',
|
||||
{
|
||||
prop: "category",
|
||||
label: "分类",
|
||||
type: "select",
|
||||
options: [
|
||||
{ label: "触发器", value: "trigger" },
|
||||
{ label: "动作", value: "action" },
|
||||
{ label: "条件", value: "condition" },
|
||||
{ label: "控制", value: "control" },
|
||||
],
|
||||
attrs: { placeholder: "全部", clearable: true, style: { width: "170px" } },
|
||||
},
|
||||
});
|
||||
],
|
||||
});
|
||||
|
||||
function handleRowDelete(id?: number) {
|
||||
if (id == null) return;
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
function normalizeNodeTypeQuery(params: Record<string, unknown>): WorkflowNodeTypePageQuery {
|
||||
const p = { ...params } as Record<string, unknown>;
|
||||
if (p.category === "" || p.category === null) p.category = undefined;
|
||||
return p as unknown as WorkflowNodeTypePageQuery;
|
||||
}
|
||||
|
||||
function categoryLabel(c?: string) {
|
||||
const m: Record<string, string> = {
|
||||
trigger: '触发器',
|
||||
action: '动作',
|
||||
condition: '条件',
|
||||
control: '控制',
|
||||
const contentConfig = reactive<IContentConfig<WorkflowNodeTypePageQuery>>({
|
||||
permPrefix: "module_task:workflow:node-type",
|
||||
cols: [],
|
||||
hideColumnFilter: true,
|
||||
toolbar: [
|
||||
{ name: "add", text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
|
||||
"delete",
|
||||
],
|
||||
defaultToolbar: ["refresh"],
|
||||
initialFetch: false,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
request: { page_no: "page_no", page_size: "page_size" },
|
||||
indexAction: async (params) => {
|
||||
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeList(
|
||||
normalizeNodeTypeQuery(params as unknown as Record<string, unknown>)
|
||||
);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
return c ? m[c] || c : '-';
|
||||
}
|
||||
},
|
||||
deleteAction: (ids) =>
|
||||
WorkflowNodeTypeAPI.deleteWorkflowNodeType(
|
||||
ids
|
||||
.split(",")
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n) && n > 0)
|
||||
),
|
||||
deleteConfirm: {
|
||||
title: "警告",
|
||||
message: "确认删除选中的编排节点类型吗？",
|
||||
type: "warning",
|
||||
},
|
||||
});
|
||||
|
||||
const defaultForm = (): WorkflowNodeTypeForm => ({
|
||||
name: '',
|
||||
code: '',
|
||||
category: 'action',
|
||||
func: '',
|
||||
args: '',
|
||||
kwargs: '{}',
|
||||
sort_order: 0,
|
||||
is_active: true,
|
||||
});
|
||||
function handleRowDelete(id?: number) {
|
||||
if (id == null) return;
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
|
||||
const form = reactive<WorkflowNodeTypeForm>(defaultForm());
|
||||
|
||||
const rules: FormRules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
|
||||
category: [{ required: true, message: '请选择分类', trigger: 'change' }],
|
||||
func: [{ required: true, message: '请输入代码块', trigger: 'blur' }],
|
||||
function categoryLabel(c?: string) {
|
||||
const m: Record<string, string> = {
|
||||
trigger: "触发器",
|
||||
action: "动作",
|
||||
condition: "条件",
|
||||
control: "控制",
|
||||
};
|
||||
return c ? m[c] || c : "-";
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
Object.assign(form, defaultForm());
|
||||
editingId.value = null;
|
||||
formRef.value?.resetFields();
|
||||
}
|
||||
const defaultForm = (): WorkflowNodeTypeForm => ({
|
||||
name: "",
|
||||
code: "",
|
||||
category: "action",
|
||||
func: "",
|
||||
args: "",
|
||||
kwargs: "{}",
|
||||
sort_order: 0,
|
||||
is_active: true,
|
||||
});
|
||||
|
||||
function handleCloseDialog() {
|
||||
resetForm();
|
||||
}
|
||||
const form = reactive<WorkflowNodeTypeForm>(defaultForm());
|
||||
|
||||
async function openDialog(id?: number) {
|
||||
resetForm();
|
||||
dialogTitle.value = id ? '编辑节点类型' : '新增节点类型';
|
||||
editingId.value = id ?? null;
|
||||
if (id) {
|
||||
try {
|
||||
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeDetail(id);
|
||||
const d = res.data?.data as WorkflowNodeTypeTable | undefined;
|
||||
if (d) {
|
||||
form.name = d.name || '';
|
||||
form.code = d.code || '';
|
||||
form.category = (d.category as WorkflowNodeTypeForm['category']) || 'action';
|
||||
form.func = d.func || '';
|
||||
form.args = d.args || '';
|
||||
form.kwargs = d.kwargs || '{}';
|
||||
form.sort_order = d.sort_order ?? 0;
|
||||
form.is_active = d.is_active ?? true;
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error('加载详情失败');
|
||||
return;
|
||||
}
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
const rules: FormRules = {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入编码", trigger: "blur" }],
|
||||
category: [{ required: true, message: "请选择分类", trigger: "change" }],
|
||||
func: [{ required: true, message: "请输入代码块", trigger: "blur" }],
|
||||
};
|
||||
|
||||
async function submitForm() {
|
||||
if (!formRef.value) return;
|
||||
await formRef.value.validate();
|
||||
if (form.kwargs?.trim()) {
|
||||
try {
|
||||
JSON.parse(form.kwargs);
|
||||
} catch {
|
||||
ElMessage.error('关键字参数须为合法 JSON');
|
||||
return;
|
||||
}
|
||||
}
|
||||
submitting.value = true;
|
||||
function resetForm() {
|
||||
Object.assign(form, defaultForm());
|
||||
editingId.value = null;
|
||||
formRef.value?.resetFields();
|
||||
}
|
||||
|
||||
function handleCloseDialog() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
async function openDialog(id?: number) {
|
||||
resetForm();
|
||||
dialogTitle.value = id ? "编辑节点类型" : "新增节点类型";
|
||||
editingId.value = id ?? null;
|
||||
if (id) {
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, form);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await WorkflowNodeTypeAPI.createWorkflowNodeType(form);
|
||||
ElMessage.success('创建成功');
|
||||
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeDetail(id);
|
||||
const d = res.data?.data as WorkflowNodeTypeTable | undefined;
|
||||
if (d) {
|
||||
form.name = d.name || "";
|
||||
form.code = d.code || "";
|
||||
form.category = (d.category as WorkflowNodeTypeForm["category"]) || "action";
|
||||
form.func = d.func || "";
|
||||
form.args = d.args || "";
|
||||
form.kwargs = d.kwargs || "{}";
|
||||
form.sort_order = d.sort_order ?? 0;
|
||||
form.is_active = d.is_active ?? true;
|
||||
}
|
||||
dialogVisible.value = false;
|
||||
refreshList();
|
||||
} catch {
|
||||
ElMessage.error(editingId.value ? '更新失败' : '创建失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
ElMessage.error("加载详情失败");
|
||||
return;
|
||||
}
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
async function submitForm() {
|
||||
if (!formRef.value) return;
|
||||
await formRef.value.validate();
|
||||
if (form.kwargs?.trim()) {
|
||||
try {
|
||||
JSON.parse(form.kwargs);
|
||||
} catch {
|
||||
ElMessage.error("关键字参数须为合法 JSON");
|
||||
return;
|
||||
}
|
||||
}
|
||||
submitting.value = true;
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, form);
|
||||
ElMessage.success("更新成功");
|
||||
} else {
|
||||
await WorkflowNodeTypeAPI.createWorkflowNodeType(form);
|
||||
ElMessage.success("创建成功");
|
||||
}
|
||||
dialogVisible.value = false;
|
||||
refreshList();
|
||||
});
|
||||
} catch {
|
||||
ElMessage.error(editingId.value ? "更新失败" : "创建失败");
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import type { CSSProperties } from 'vue';
|
||||
import type { CSSProperties } from "vue";
|
||||
|
||||
export type NodeType =
|
||||
| 'input'
|
||||
| 'output'
|
||||
| 'trigger'
|
||||
| 'action'
|
||||
| 'condition'
|
||||
| 'control'
|
||||
| 'integration'
|
||||
| 'custom';
|
||||
| "input"
|
||||
| "output"
|
||||
| "trigger"
|
||||
| "action"
|
||||
| "condition"
|
||||
| "control"
|
||||
| "integration"
|
||||
| "custom";
|
||||
|
||||
export type EdgeType = 'default' | 'straight' | 'step' | 'smoothstep' | 'bezier';
|
||||
export type EdgeType = "default" | "straight" | "step" | "smoothstep" | "bezier";
|
||||
|
||||
export type HandlePosition = 'left' | 'right' | 'top' | 'bottom';
|
||||
export type HandlePosition = "left" | "right" | "top" | "bottom";
|
||||
|
||||
export interface NodeConfigSchema {
|
||||
type: string;
|
||||
@@ -20,7 +20,7 @@ export interface NodeConfigSchema {
|
||||
}
|
||||
|
||||
export interface PropertySchema {
|
||||
type: 'string' | 'number' | 'boolean' | 'select' | 'textarea' | 'json' | 'code';
|
||||
type: "string" | "number" | "boolean" | "select" | "textarea" | "json" | "code";
|
||||
label: string;
|
||||
description?: string;
|
||||
default?: any;
|
||||
@@ -59,7 +59,7 @@ export interface Node {
|
||||
selectable?: boolean;
|
||||
focusable?: boolean;
|
||||
dragHandle?: string;
|
||||
extent?: 'parent' | [number, number] | [[number, number], [number, number]];
|
||||
extent?: "parent" | [number, number] | [[number, number], [number, number]];
|
||||
parentNode?: string;
|
||||
expandParent?: boolean;
|
||||
zIndex?: number;
|
||||
@@ -86,7 +86,7 @@ export interface Edge {
|
||||
deletable?: boolean;
|
||||
selectable?: boolean;
|
||||
focusable?: boolean;
|
||||
updatable?: boolean | 'source' | 'target';
|
||||
updatable?: boolean | "source" | "target";
|
||||
markerStart?: Marker | string;
|
||||
markerEnd?: Marker | string;
|
||||
pathOptions?: {
|
||||
@@ -98,11 +98,11 @@ export interface Edge {
|
||||
}
|
||||
|
||||
export interface Marker {
|
||||
type: 'arrow' | 'arrowclosed';
|
||||
type: "arrow" | "arrowclosed";
|
||||
color?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
orient?: 'auto' | 'auto-start-reverse';
|
||||
orient?: "auto" | "auto-start-reverse";
|
||||
}
|
||||
|
||||
export interface WorkflowTemplate {
|
||||
@@ -137,7 +137,7 @@ export interface EdgeConfig {
|
||||
export interface NodeTypeDefinition {
|
||||
code: string;
|
||||
name: string;
|
||||
category: 'trigger' | 'action' | 'condition' | 'control' | 'integration' | 'custom';
|
||||
category: "trigger" | "action" | "condition" | "control" | "integration" | "custom";
|
||||
description?: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
|
||||
Reference in New Issue
Block a user