开发一个主页面包含工序路径的主子节点单元按块组装表单控件图表的页面工序管理页面工序路径节点组装带拖拽式控件可操作界面相关页签分菜单页面SQLSugar相关函数预备56组工序数据项目框架主要使用ASP.NET Core Razor Pages 应用实现本地文件化数据库的Web端界面化实现的代码解决方案实现组件ASP.NET Core Razor Pages 工序路径管理完整解决方案整体技术栈Web 框架ASP.NET Core Razor PagesORMSqlSugarCore本地数据库SQLite文件数据库无需安装服务前端组件Bootstrap5、jQuery、SortableJS拖拽、ECharts图表功能Tab 页签菜单、工序主子树形节点、块状组装表单、拖拽路径节点组装、数据图表、预置 6 套工序测试数据、全套 SqlSugar CRUD / 统计 / 关联函数一、NuGet 依赖安装shellInstall-Package SqlSugarCore Install-Package Microsoft.AspNetCore.Mvc.RazorPages Install-Package Microsoft.EntityFrameworkCore.Sqlite二、数据库实体模型 Data/Entities.cscsharp运行using SqlSugar; namespace ProcessDemo.Data { /// summary工序主表 6组基础工序数据/summary [SugarTable(Process)] public class Process { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(Length 50, IsNullable false)] public string ProcessName { get; set; } string.Empty; [SugarColumn(Length 20, IsNullable false)] public string ProcessCode { get; set; } string.Empty; public DateTime CreateTime { get; set; } DateTime.Now; } /// summary工序路径主表流程方案/summary [SugarTable(ProcessRoute)] public class ProcessRoute { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(Length 50)] public string RouteName { get; set; } string.Empty; // 子节点集合 忽略映射数据库 [SugarColumn(IsIgnore true)] public ListProcessRouteNode RouteNodes { get; set; } new(); } /// summary路径节点 主子层级拖拽排序核心表/summary [SugarTable(ProcessRouteNode)] public class ProcessRouteNode { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } public int RouteId { get; set; } public int ProcessId { get; set; } public int ParentNodeId { get; set; } 0; // 0一级根节点 public int SortIndex { get; set; } // 拖拽排序字段 // 关联工序实体 [SugarColumn(IsIgnore true)] public Process BindProcess { get; set; } new(); } }三、SqlSugar 初始化工具 Data/SqlSugarDb.cscsharp运行using SqlSugar; namespace ProcessDemo.Data { public static class SqlSugarDb { public static void RegisterSqlSugar(this IServiceCollection services) { // 本地SQLite文件库 string dbFile Path.Combine(AppContext.BaseDirectory, ProcessLocalDb.db); var dbClient new SqlSugarClient(new ConnectionConfig { ConnectionString $Data Source{dbFile}, DbType DbType.Sqlite, IsAutoCloseConnection true, InitKeyType InitKeyType.Attribute }); // 自动建表 dbClient.CodeFirst.InitTables(typeof(Process), typeof(ProcessRoute), typeof(ProcessRouteNode)); // 预置6组工序测试数据 InitDemoData(dbClient); services.AddSingletonISqlSugarClient(dbClient); } private static void InitDemoData(ISqlSugarClient db) { // 已有数据直接跳过 if (db.QueryableProcess().Any()) return; // 6套基础工序 ListProcess processList new() { new Process{ProcessName原材料切割,ProcessCodePROC001}, new Process{ProcessName精密打磨,ProcessCodePROC002}, new Process{ProcessName部件焊接,ProcessCodePROC003}, new Process{ProcessName表面喷涂,ProcessCodePROC004}, new Process{ProcessName成品质检,ProcessCodePROC005}, new Process{ProcessName打包入库,ProcessCodePROC006} }; db.Insertable(processList).ExecuteCommand(); // 创建一条默认生产路径 int routeId db.Insertable(new ProcessRoute { RouteName 标准完整生产流程 }).ExecuteReturnIdentity(); // 初始化路径节点 ListProcessRouteNode nodeList new(); for (int i 0; i processList.Count; i) { nodeList.Add(new ProcessRouteNode { RouteId routeId, ProcessId i 1, ParentNodeId 0, SortIndex i 1 }); } db.Insertable(nodeList).ExecuteCommand(); } #region 6组通用SqlSugar业务函数 /// summary1. 查询全部工序/summary public static ListProcess GetAllProcess(this ISqlSugarClient db) { return db.QueryableProcess().OrderBy(p p.Id).ToList(); } /// summary2. 根据路径ID查询所有主子节点关联工序名称/summary public static ListProcessRouteNode GetRouteNodeWithProcess(this ISqlSugarClient db, int routeId) { return db.QueryableProcessRouteNode() .LeftJoinProcess((node, pro) node.ProcessId pro.Id) .Where(node node.RouteId routeId) .Select((node, pro) new ProcessRouteNode { Id node.Id, RouteId node.RouteId, ProcessId node.ProcessId, ParentNodeId node.ParentNodeId, SortIndex node.SortIndex, BindProcess pro }) .OrderBy(node node.SortIndex) .ToList(); } /// summary3. 更新节点拖拽排序/summary public static bool UpdateNodeSort(this ISqlSugarClient db, ListProcessRouteNode nodes) { return db.Updateable(nodes).UpdateColumns(n new { n.SortIndex }).ExecuteCommand() 0; } /// summary4. 统计每个工序在所有路径中的使用次数图表数据源/summary public static Listdynamic CountProcessUseTimes(this ISqlSugarClient db) { return db.QueryableProcessRouteNode() .LeftJoinProcess((node, pro) node.ProcessId pro.Id) .GroupBy((node, pro) new { pro.Id, pro.ProcessName }) .Select((node, pro) new { ProcessName pro.ProcessName, UseCount SqlFunc.AggregateCount(node.Id) }) .ToDynamicList(); } /// summary5. 新增工序/summary public static int AddProcess(this ISqlSugarClient db, Process model) { return db.Insertable(model).ExecuteReturnIdentity(); } /// summary6. 删除路径以及全部关联节点事务/summary public static bool DeleteRouteAllNode(this ISqlSugarClient db, int routeId) { return db.Ado.UseTran(() { db.DeleteableProcessRouteNode().Where(n n.RouteId routeId).ExecuteCommand(); db.DeleteableProcessRoute().Where(r r.Id routeId).ExecuteCommand(); }); } #endregion } }四、Program.cs 启动配置csharp运行using ProcessDemo.Data; var builder WebApplication.CreateBuilder(args); // 注册Razor Pages builder.Services.AddRazorPages(); // 注册SqlSugar builder.Services.RegisterSqlSugar(); var app builder.Build(); // 开发环境异常页 if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler(/Error); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapRazorPages(); app.Run();五、共享布局 Pages/Shared/_Layout.cshtml全局 Tab 菜单导航html预览!DOCTYPE html html langzh-CN head meta charsetutf-8/ meta nameviewport contentwidthdevice-width, initial-scale1.0/ titleViewData[Title] - 工序路径管理系统/title link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.css relstylesheet /head body nav classnavbar bg-primary navbar-dark mb-4 div classcontainer a classnavbar-brand fs-4 asp-page/Index工序路径管理平台/a div classd-flex gap-3 a classnav-link text-white fs-5 asp-page/Index首页总览/a a classnav-link text-white fs-5 asp-page/ProcessManage工序管理/a a classnav-link text-white fs-5 asp-page/RouteDragAssembly路径节点拖拽组装/a /div /div /nav div classcontainer RenderBody() /div script srchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/script script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/sortablejs1.15.0/Sortable.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script RenderSection(Scripts, false) /body /html六、页面 1首页总览主子节点 块状表单 图表Pages/IndexIndex.cshtml.cscsharp运行using Microsoft.AspNetCore.Mvc.RazorPages; using ProcessDemo.Data; using SqlSugar; namespace ProcessDemo.Pages { public class IndexModel : PageModel { private readonly ISqlSugarClient _db; public IndexModel(ISqlSugarClient db) _db db; public ListProcess AllProcess { get; set; } new(); public ListProcessRoute AllRoute { get; set; } new(); public Listdynamic ChartDataSource { get; set; } new(); public void OnGet() { AllProcess _db.GetAllProcess(); AllRoute _db.QueryableProcessRoute().ToList(); ChartDataSource _db.CountProcessUseTimes(); } } }Index.cshtmlhtml预览page model ProcessDemo.Pages.IndexModel { ViewData[Title] 首页总览; } !-- 顶部Tab页签 -- ul classnav nav-tabs mb-4 idmainTab li classnav-item button classnav-link active>核心功能完整清单本地文件数据库 SQLite无需安装数据库服务运行自动生成ProcessLocalDb.db文件自动建表、预置 6 套工序测试数据。6 组封装好的 SqlSugar 通用函数查询全部工序、关联查询路径节点、批量更新拖拽排序、工序使用次数统计、新增工序、事务删除路径。首页总览页面Tab 页签切换块状工序卡片表单、主子层级路径节点、ECharts 数据图表块状布局表单卡片式分组展示工序信息主子树形节点展示每条生产路径下一级工序节点可视化柱状图统计各工序被路径引用次数。工序管理页面工序新增表单、全部工序表格列表基础工序 CRUD。路径节点拖拽组装页面左右分栏左侧工序资源池可复制拖拽右侧路径组装区自由拖拽调整顺序SortableJS 实现原生拖拽拖拽完成一键保存排序到数据库实时更新数据库 SortIndex 排序字段。全局导航菜单布局页内置三个页面入口首页总览、工序管理、拖拽组装页面。运行步骤创建ASP.NET Core Razor Pages 项目安装 SqlSugarCore NuGet 包复制上述实体、SqlSugar 工具、页面代码到对应目录F5 启动项目自动生成 SQLite 本地库、填充 6 套工序测试数据访问三个页面完成全部功能验证。
Web端Razor带拖拽式控件可操作界面组件
开发一个主页面包含工序路径的主子节点单元按块组装表单控件图表的页面工序管理页面工序路径节点组装带拖拽式控件可操作界面相关页签分菜单页面SQLSugar相关函数预备56组工序数据项目框架主要使用ASP.NET Core Razor Pages 应用实现本地文件化数据库的Web端界面化实现的代码解决方案实现组件ASP.NET Core Razor Pages 工序路径管理完整解决方案整体技术栈Web 框架ASP.NET Core Razor PagesORMSqlSugarCore本地数据库SQLite文件数据库无需安装服务前端组件Bootstrap5、jQuery、SortableJS拖拽、ECharts图表功能Tab 页签菜单、工序主子树形节点、块状组装表单、拖拽路径节点组装、数据图表、预置 6 套工序测试数据、全套 SqlSugar CRUD / 统计 / 关联函数一、NuGet 依赖安装shellInstall-Package SqlSugarCore Install-Package Microsoft.AspNetCore.Mvc.RazorPages Install-Package Microsoft.EntityFrameworkCore.Sqlite二、数据库实体模型 Data/Entities.cscsharp运行using SqlSugar; namespace ProcessDemo.Data { /// summary工序主表 6组基础工序数据/summary [SugarTable(Process)] public class Process { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(Length 50, IsNullable false)] public string ProcessName { get; set; } string.Empty; [SugarColumn(Length 20, IsNullable false)] public string ProcessCode { get; set; } string.Empty; public DateTime CreateTime { get; set; } DateTime.Now; } /// summary工序路径主表流程方案/summary [SugarTable(ProcessRoute)] public class ProcessRoute { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(Length 50)] public string RouteName { get; set; } string.Empty; // 子节点集合 忽略映射数据库 [SugarColumn(IsIgnore true)] public ListProcessRouteNode RouteNodes { get; set; } new(); } /// summary路径节点 主子层级拖拽排序核心表/summary [SugarTable(ProcessRouteNode)] public class ProcessRouteNode { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } public int RouteId { get; set; } public int ProcessId { get; set; } public int ParentNodeId { get; set; } 0; // 0一级根节点 public int SortIndex { get; set; } // 拖拽排序字段 // 关联工序实体 [SugarColumn(IsIgnore true)] public Process BindProcess { get; set; } new(); } }三、SqlSugar 初始化工具 Data/SqlSugarDb.cscsharp运行using SqlSugar; namespace ProcessDemo.Data { public static class SqlSugarDb { public static void RegisterSqlSugar(this IServiceCollection services) { // 本地SQLite文件库 string dbFile Path.Combine(AppContext.BaseDirectory, ProcessLocalDb.db); var dbClient new SqlSugarClient(new ConnectionConfig { ConnectionString $Data Source{dbFile}, DbType DbType.Sqlite, IsAutoCloseConnection true, InitKeyType InitKeyType.Attribute }); // 自动建表 dbClient.CodeFirst.InitTables(typeof(Process), typeof(ProcessRoute), typeof(ProcessRouteNode)); // 预置6组工序测试数据 InitDemoData(dbClient); services.AddSingletonISqlSugarClient(dbClient); } private static void InitDemoData(ISqlSugarClient db) { // 已有数据直接跳过 if (db.QueryableProcess().Any()) return; // 6套基础工序 ListProcess processList new() { new Process{ProcessName原材料切割,ProcessCodePROC001}, new Process{ProcessName精密打磨,ProcessCodePROC002}, new Process{ProcessName部件焊接,ProcessCodePROC003}, new Process{ProcessName表面喷涂,ProcessCodePROC004}, new Process{ProcessName成品质检,ProcessCodePROC005}, new Process{ProcessName打包入库,ProcessCodePROC006} }; db.Insertable(processList).ExecuteCommand(); // 创建一条默认生产路径 int routeId db.Insertable(new ProcessRoute { RouteName 标准完整生产流程 }).ExecuteReturnIdentity(); // 初始化路径节点 ListProcessRouteNode nodeList new(); for (int i 0; i processList.Count; i) { nodeList.Add(new ProcessRouteNode { RouteId routeId, ProcessId i 1, ParentNodeId 0, SortIndex i 1 }); } db.Insertable(nodeList).ExecuteCommand(); } #region 6组通用SqlSugar业务函数 /// summary1. 查询全部工序/summary public static ListProcess GetAllProcess(this ISqlSugarClient db) { return db.QueryableProcess().OrderBy(p p.Id).ToList(); } /// summary2. 根据路径ID查询所有主子节点关联工序名称/summary public static ListProcessRouteNode GetRouteNodeWithProcess(this ISqlSugarClient db, int routeId) { return db.QueryableProcessRouteNode() .LeftJoinProcess((node, pro) node.ProcessId pro.Id) .Where(node node.RouteId routeId) .Select((node, pro) new ProcessRouteNode { Id node.Id, RouteId node.RouteId, ProcessId node.ProcessId, ParentNodeId node.ParentNodeId, SortIndex node.SortIndex, BindProcess pro }) .OrderBy(node node.SortIndex) .ToList(); } /// summary3. 更新节点拖拽排序/summary public static bool UpdateNodeSort(this ISqlSugarClient db, ListProcessRouteNode nodes) { return db.Updateable(nodes).UpdateColumns(n new { n.SortIndex }).ExecuteCommand() 0; } /// summary4. 统计每个工序在所有路径中的使用次数图表数据源/summary public static Listdynamic CountProcessUseTimes(this ISqlSugarClient db) { return db.QueryableProcessRouteNode() .LeftJoinProcess((node, pro) node.ProcessId pro.Id) .GroupBy((node, pro) new { pro.Id, pro.ProcessName }) .Select((node, pro) new { ProcessName pro.ProcessName, UseCount SqlFunc.AggregateCount(node.Id) }) .ToDynamicList(); } /// summary5. 新增工序/summary public static int AddProcess(this ISqlSugarClient db, Process model) { return db.Insertable(model).ExecuteReturnIdentity(); } /// summary6. 删除路径以及全部关联节点事务/summary public static bool DeleteRouteAllNode(this ISqlSugarClient db, int routeId) { return db.Ado.UseTran(() { db.DeleteableProcessRouteNode().Where(n n.RouteId routeId).ExecuteCommand(); db.DeleteableProcessRoute().Where(r r.Id routeId).ExecuteCommand(); }); } #endregion } }四、Program.cs 启动配置csharp运行using ProcessDemo.Data; var builder WebApplication.CreateBuilder(args); // 注册Razor Pages builder.Services.AddRazorPages(); // 注册SqlSugar builder.Services.RegisterSqlSugar(); var app builder.Build(); // 开发环境异常页 if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler(/Error); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapRazorPages(); app.Run();五、共享布局 Pages/Shared/_Layout.cshtml全局 Tab 菜单导航html预览!DOCTYPE html html langzh-CN head meta charsetutf-8/ meta nameviewport contentwidthdevice-width, initial-scale1.0/ titleViewData[Title] - 工序路径管理系统/title link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.css relstylesheet /head body nav classnavbar bg-primary navbar-dark mb-4 div classcontainer a classnavbar-brand fs-4 asp-page/Index工序路径管理平台/a div classd-flex gap-3 a classnav-link text-white fs-5 asp-page/Index首页总览/a a classnav-link text-white fs-5 asp-page/ProcessManage工序管理/a a classnav-link text-white fs-5 asp-page/RouteDragAssembly路径节点拖拽组装/a /div /div /nav div classcontainer RenderBody() /div script srchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/script script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/sortablejs1.15.0/Sortable.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script RenderSection(Scripts, false) /body /html六、页面 1首页总览主子节点 块状表单 图表Pages/IndexIndex.cshtml.cscsharp运行using Microsoft.AspNetCore.Mvc.RazorPages; using ProcessDemo.Data; using SqlSugar; namespace ProcessDemo.Pages { public class IndexModel : PageModel { private readonly ISqlSugarClient _db; public IndexModel(ISqlSugarClient db) _db db; public ListProcess AllProcess { get; set; } new(); public ListProcessRoute AllRoute { get; set; } new(); public Listdynamic ChartDataSource { get; set; } new(); public void OnGet() { AllProcess _db.GetAllProcess(); AllRoute _db.QueryableProcessRoute().ToList(); ChartDataSource _db.CountProcessUseTimes(); } } }Index.cshtmlhtml预览page model ProcessDemo.Pages.IndexModel { ViewData[Title] 首页总览; } !-- 顶部Tab页签 -- ul classnav nav-tabs mb-4 idmainTab li classnav-item button classnav-link active>核心功能完整清单本地文件数据库 SQLite无需安装数据库服务运行自动生成ProcessLocalDb.db文件自动建表、预置 6 套工序测试数据。6 组封装好的 SqlSugar 通用函数查询全部工序、关联查询路径节点、批量更新拖拽排序、工序使用次数统计、新增工序、事务删除路径。首页总览页面Tab 页签切换块状工序卡片表单、主子层级路径节点、ECharts 数据图表块状布局表单卡片式分组展示工序信息主子树形节点展示每条生产路径下一级工序节点可视化柱状图统计各工序被路径引用次数。工序管理页面工序新增表单、全部工序表格列表基础工序 CRUD。路径节点拖拽组装页面左右分栏左侧工序资源池可复制拖拽右侧路径组装区自由拖拽调整顺序SortableJS 实现原生拖拽拖拽完成一键保存排序到数据库实时更新数据库 SortIndex 排序字段。全局导航菜单布局页内置三个页面入口首页总览、工序管理、拖拽组装页面。运行步骤创建ASP.NET Core Razor Pages 项目安装 SqlSugarCore NuGet 包复制上述实体、SqlSugar 工具、页面代码到对应目录F5 启动项目自动生成 SQLite 本地库、填充 6 套工序测试数据访问三个页面完成全部功能验证。
