feat: 增强工作流管理功能和动态表单支持

- 新增工作流节点的动态生成和管理功能,允许用户根据节点类型创建和更新表单项
- 优化界面展示,提升用户交互体验
- 更新相关接口和类型定义,确保功能完整性
This commit is contained in:
2026-05-06 19:46:12 +08:00
parent 63aa678ac0
commit 882d7bd2fb
5 changed files with 741 additions and 0 deletions

View File

@@ -0,0 +1,137 @@
import request from '/@/utils/request';
export interface ModelModuleListParams {
pageNum?: number;
pageSize?: number;
keyword?: string;
}
export interface ModelFormItem {
field: string;
label: string;
required: boolean;
type: 'input' | 'number' | 'textarea' | 'switch' | string;
}
export interface ModelModuleItem {
id: number | string;
tenantId?: number;
creator?: string;
createdAt?: string;
updater?: string;
updatedAt?: string;
deletedAt?: string | null;
isDeleted?: boolean;
modelName: string;
baseUrl: string;
route: string;
httpMethod: string;
apiKey?: string;
enabled: number;
maxConcurrency: number;
queueLimit: number;
timeoutMs: number;
retryTimes: number;
retryQueueMaxSeconds: number;
autoCleanSeconds: number;
remark?: string;
}
export interface ModelModuleListResponse {
code: number;
message: string;
data: {
list: ModelModuleItem[];
total: number;
};
}
export interface CreateModelParams {
modelName: string;
modelsType: number;
baseUrl: string;
route: string;
httpMethod: string;
headMsg?: string;
enabled: number;
maxConcurrency: number;
queueLimit: number;
timeoutSeconds: number;
expectedSeconds: number;
retryTimes: number;
retryQueueMaxSeconds: number;
autoCleanSeconds: number;
remark?: string;
}
export interface ModelConfigTypeItem {
id: number | string;
name: string;
form: ModelFormItem[];
}
export interface ModelConfigGroup {
typeId: number;
type: string;
items: ModelConfigTypeItem[];
}
export interface ModelConfigResponse {
code: number;
message: string;
data: ModelConfigGroup[];
}
/**
* 获取模型列表
*/
export function getModelModuleList(params?: ModelModuleListParams) {
return request({
url: '/model-gateway/model/listModel',
method: 'get',
params,
});
}
/**
* 新增模型配置
*/
export function addModelModule(data: CreateModelParams) {
return request({
url: '/model-gateway/model/createModel',
method: 'post',
data,
});
}
/**
* 修改模型配置
*/
export function updateModelModule(data: Partial<CreateModelParams> & { id: number | string }) {
return request({
url: '/model-gateway/model/updateModel',
method: 'post',
data,
});
}
/**
* 删除模型配置
*/
export function deleteModelModule(id: number | string) {
return request({
url: '/model-gateway/model/deleteModel',
method: 'post',
data: { id },
});
}
/**
* 获取模型配置(按类型分组)
*/
export function getModelConfig() {
return request({
url: '/model-gateway/model/getModel',
method: 'get',
});
}

View File

@@ -0,0 +1,79 @@
import request from '/@/utils/request';
export interface ModelTypeListParams {
pageNum: number;
pageSize: number;
keyword?: string;
}
export interface ModelTypeItem {
id: string;
typeName: string;
typeCode: string;
description?: string;
status: number;
createTime?: string;
updateTime?: string;
}
export interface ModelTypeListResponse {
code: number;
message: string;
data: {
list: ModelTypeItem[];
total: number;
};
}
/**
* 获取模型类型列表
*/
export function getModelTypeList(params: ModelTypeListParams) {
return request({
url: '/api/digital-human/model-config/model-type/list',
method: 'get',
params,
});
}
/**
* 新增模型类型
*/
export function addModelType(data: Partial<ModelTypeItem>) {
return request({
url: '/api/digital-human/model-config/model-type/add',
method: 'post',
data,
});
}
/**
* 修改模型类型
*/
export function updateModelType(data: Partial<ModelTypeItem>) {
return request({
url: '/api/digital-human/model-config/model-type/update',
method: 'put',
data,
});
}
/**
* 删除模型类型
*/
export function deleteModelType(id: string) {
return request({
url: `/api/digital-human/model-config/model-type/delete/${id}`,
method: 'delete',
});
}
/**
* 获取模型类型详情
*/
export function getModelTypeDetail(id: string) {
return request({
url: `/api/digital-human/model-config/model-type/detail/${id}`,
method: 'get',
});
}

View File

@@ -0,0 +1,241 @@
<template>
<div class="system-edit-module-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
<el-form ref="editModuleFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="140px">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="模型名称" prop="modelName">
<el-input v-model="state.ruleForm.modelName" placeholder="请输入模型名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="模型类型" prop="modelsType">
<el-select v-model="state.ruleForm.modelsType" placeholder="请选择模型类型" clearable style="width: 100%">
<el-option label="图片模型" :value="1"></el-option>
<el-option label="语音模型" :value="2"></el-option>
<el-option label="推理模型" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="模型地址" prop="baseUrl">
<el-input v-model="state.ruleForm.baseUrl" placeholder="请输入模型地址" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由" prop="route">
<el-input v-model="state.ruleForm.route" placeholder="请输入路由" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求方式" prop="httpMethod">
<el-select v-model="state.ruleForm.httpMethod" placeholder="请选择请求方式" clearable style="width: 100%">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option>
<el-option label="DELETE" value="DELETE"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求头绑定" prop="headMsg">
<el-input v-model="state.ruleForm.headMsg" placeholder="格式: key:value,key:value" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否启用" prop="enabled">
<el-radio-group v-model="state.ruleForm.enabled">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="最大并发数" prop="maxConcurrency">
<el-input-number v-model="state.ruleForm.maxConcurrency" :min="1" :max="1000" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排队队列上限" prop="queueLimit">
<el-input-number v-model="state.ruleForm.queueLimit" :min="1" :max="10000" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求超时时间(秒)" prop="timeoutSeconds">
<el-input-number v-model="state.ruleForm.timeoutSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="预计执行时间(秒)" prop="expectedSeconds">
<el-input-number v-model="state.ruleForm.expectedSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="失败重试次数" prop="retryTimes">
<el-input-number v-model="state.ruleForm.retryTimes" :min="0" :max="10" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="重试最大排队时间" prop="retryQueueMaxSeconds">
<el-input-number v-model="state.ruleForm.retryQueueMaxSeconds" :min="0" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="自动清理间隔(秒)" prop="autoCleanSeconds">
<el-input-number v-model="state.ruleForm.autoCleanSeconds" :min="0" :max="86400" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="备注说明" prop="remark">
<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注说明" :rows="3" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default"> </el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="state.dialog.loading">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="systemEditModule">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { addModelModule, updateModelModule } from '/@/api/digitalHuman/modelConfig/modelModule/index';
const editModuleFormRef = ref();
const emit = defineEmits(['refresh']);
const state = reactive({
ruleForm: {
id: '',
modelName: '',
modelsType: 1,
baseUrl: '',
route: '',
httpMethod: 'POST',
headMsg: '',
enabled: 1,
maxConcurrency: 10,
queueLimit: 100,
timeoutSeconds: 30,
expectedSeconds: 15,
retryTimes: 3,
retryQueueMaxSeconds: 60,
autoCleanSeconds: 300,
remark: '',
},
rules: {
modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
modelsType: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
baseUrl: [{ required: true, message: '请输入模型地址', trigger: 'blur' }],
route: [{ required: true, message: '请输入路由', trigger: 'blur' }],
httpMethod: [{ required: true, message: '请选择请求方式', trigger: 'change' }],
maxConcurrency: [{ required: true, message: '请输入最大并发数', trigger: 'blur' }],
queueLimit: [{ required: true, message: '请输入排队队列上限', trigger: 'blur' }],
timeoutSeconds: [{ required: true, message: '请输入请求超时时间', trigger: 'blur' }],
expectedSeconds: [{ required: true, message: '请输入预计执行时间', trigger: 'blur' }],
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
loading: false,
},
});
// 打开弹窗
const openDialog = (type: string, row?: any) => {
if (type === 'edit') {
// 编辑时需要转换字段
state.ruleForm = {
id: row.id,
modelName: row.modelName,
modelsType: row.modelsType || 1,
baseUrl: row.baseUrl,
route: row.route,
httpMethod: row.httpMethod,
headMsg: row.headMsg || '',
enabled: row.enabled,
maxConcurrency: row.maxConcurrency,
queueLimit: row.queueLimit,
timeoutSeconds: Math.floor(row.timeoutMs / 1000), // 毫秒转秒
expectedSeconds: row.expectedSeconds || 15,
retryTimes: row.retryTimes,
retryQueueMaxSeconds: row.retryQueueMaxSeconds,
autoCleanSeconds: row.autoCleanSeconds,
remark: row.remark || '',
};
state.dialog.title = '修改模型配置';
state.dialog.submitTxt = '修 改';
} else {
state.ruleForm = {
id: '',
modelName: '',
modelsType: 1,
baseUrl: '',
route: '',
httpMethod: 'POST',
headMsg: '',
enabled: 1,
maxConcurrency: 10,
queueLimit: 100,
timeoutSeconds: 30,
expectedSeconds: 15,
retryTimes: 3,
retryQueueMaxSeconds: 60,
autoCleanSeconds: 300,
remark: '',
};
state.dialog.title = '新增模型配置';
state.dialog.submitTxt = '新 增';
}
state.dialog.type = type;
state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.dialog.isShowDialog = false;
editModuleFormRef.value?.resetFields();
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
editModuleFormRef.value.validate(async (valid: boolean) => {
if (!valid) return;
state.dialog.loading = true;
try {
if (state.dialog.type === 'edit') {
await updateModelModule(state.ruleForm);
ElMessage.success('修改成功');
} else {
await addModelModule(state.ruleForm);
ElMessage.success('新增成功');
}
closeDialog();
emit('refresh');
} catch (error) {
console.error('保存失败:', error);
} finally {
state.dialog.loading = false;
}
});
};
// 暴露变量
defineExpose({
openDialog,
});
</script>

View File

@@ -0,0 +1,157 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input v-model="state.tableData.param.keyword" size="default" placeholder="请输入模型名称" style="max-width: 180px" clearable> </el-input>
<el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddModule('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增模型配置
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="modelName" label="模型名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="baseUrl" label="模型地址" show-overflow-tooltip width="200"></el-table-column>
<el-table-column prop="route" label="路由" show-overflow-tooltip></el-table-column>
<el-table-column prop="httpMethod" label="请求方式" width="100"></el-table-column>
<el-table-column prop="enabled" label="状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.enabled === 1 ? 'success' : 'danger'">{{ scope.row.enabled === 1 ? '启用' : '禁用' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="maxConcurrency" label="最大并发" width="100"></el-table-column>
<el-table-column prop="queueLimit" label="队列上限" width="100"></el-table-column>
<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip width="160"></el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditModule('edit', scope.row)">修改</el-button>
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30, 50]"
v-model:current-page="state.tableData.param.pageNum"
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
<EditModule ref="editModuleRef" @refresh="getTableData()" />
</div>
</template>
<script setup lang="ts" name="digitalHumanModelModule">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getModelModuleList, deleteModelModule } from '/@/api/digitalHuman/modelConfig/modelModule/index';
const EditModule = defineAsyncComponent(() => import('/@/views/digitalHuman/modelConfig/modelModule/component/editModule.vue'));
const editModuleRef = ref();
const state = reactive({
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
keyword: '',
},
},
});
// 初始化表格数据
const getTableData = async () => {
state.tableData.loading = true;
try {
const res: any = await getModelModuleList(state.tableData.param);
if (res.code === 0) {
state.tableData.data = res.data.list || [];
state.tableData.total = res.data.total || 0;
}
} catch (error) {
console.error('获取模型列表失败:', error);
ElMessage.error('获取模型列表失败');
} finally {
state.tableData.loading = false;
}
};
// 打开新增模型模块弹窗
const onOpenAddModule = (type: string) => {
editModuleRef.value.openDialog(type);
};
// 打开修改模型模块弹窗
const onOpenEditModule = (type: string, row: any) => {
editModuleRef.value.openDialog(type, row);
};
// 删除模型模块
const onRowDel = (row: any) => {
ElMessageBox.confirm(`确定要删除模型配置:${row.modelName}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
try {
await deleteModelModule(row.id);
ElMessage.success('删除成功');
getTableData();
} catch (error) {
console.error('删除失败:', error);
ElMessage.error('删除失败');
}
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
getTableData();
};
// 页面加载时
onMounted(() => {
getTableData();
});
</script>
<style scoped lang="scss">
.system-user-container {
:deep(.el-card__body) {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
.el-table {
flex: 1;
}
}
}
</style>

View File

@@ -0,0 +1,127 @@
<template>
<div class="system-model-type-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-model-type-search mb15">
<el-input v-model="state.tableData.param.keyword" size="default" placeholder="请输入模型类型名称" style="max-width: 180px" clearable> </el-input>
<el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddType('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增模型类型
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="typeName" label="类型名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="typeCode" label="类型编码" show-overflow-tooltip></el-table-column>
<el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditType('edit', scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
v-model:current-page="state.tableData.param.pageNum"
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-card>
</div>
</template>
<script setup lang="ts" name="digitalHumanModelType">
import { reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
const state = reactive({
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
keyword: '',
},
},
});
// 初始化表格数据
const getTableData = () => {
state.tableData.loading = true;
// TODO: 调用API获取数据
setTimeout(() => {
state.tableData.data = [];
state.tableData.total = 0;
state.tableData.loading = false;
}, 500);
};
// 打开新增模型类型弹窗
const onOpenAddType = (type: string) => {
ElMessage.info('功能开发中...');
};
// 打开修改模型类型弹窗
const onOpenEditType = (type: string, row: any) => {
ElMessage.info('功能开发中...');
};
// 删除模型类型
const onRowDel = (row: any) => {
ElMessage.info('功能开发中...');
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
getTableData();
};
// 页面加载时
onMounted(() => {
getTableData();
});
</script>
<style scoped lang="scss">
.system-model-type-container {
:deep(.el-card__body) {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
.el-table {
flex: 1;
}
}
}
</style>