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,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>