Razor Pages工序管理Web端界面化实现方案

Razor Pages工序管理Web端界面化实现方案 开发一个主页面包含工序路径的主子表单控件GridView表格图表的页面工序管理带拖拽式控件相关分菜单页面SQLSugar相关函数预备56组工序数据项目框架主要使用ASP.NET Core Razor Pages 应用实现本地文件化数据库的Web端界面化实现的代码解决方案实现组件ASP.NET Core Razor Pages 工序管理系统实现方案一、项目基础架构1. 项目创建与依赖创建ASP.NET Core Razor Pages 项目.NET 8安装以下 NuGet 包powershellInstall-Package SQLSugarCore Install-Package Microsoft.EntityFrameworkCore.Sqlite Install-Package Bootstrap Install-Package jQuery Install-Package SortableJS Install-Package Chart.js2. 数据库配置SQLite 本地文件数据库(1) SQLSugar 配置类csharp运行// Services/SqlSugarSetup.cs using SqlSugar; namespace ProcessManagement.Services { public static class SqlSugarSetup { public static void AddSqlSugar(this IServiceCollection services) { var db new SqlSugarClient(new ConnectionConfig() { ConnectionString Data SourceProcessManagement.db, // 本地SQLite文件 DbType DbType.Sqlite, IsAutoCloseConnection true, InitKeyType InitKeyType.Attribute }); // 初始化数据库和表 db.CodeFirst.InitTablesProcess, ProcessPath, ProcessStep(); // 预插入测试数据 InitTestData(db); services.AddSingletonISqlSugarClient(db); } /// summary /// 初始化5-6组工序测试数据 /// /summary private static void InitTestData(ISqlSugarClient db) { if (!db.QueryableProcess().Any()) { var processes new ListProcess { new Process { Id 1, ProcessName 机械加工工序, CreateTime DateTime.Now, Status 1 }, new Process { Id 2, ProcessName 表面处理工序, CreateTime DateTime.Now, Status 1 }, new Process { Id 3, ProcessName 装配工序, CreateTime DateTime.Now, Status 1 }, new Process { Id 4, ProcessName 检测工序, CreateTime DateTime.Now, Status 1 }, new Process { Id 5, ProcessName 包装工序, CreateTime DateTime.Now, Status 1 }, new Process { Id 6, ProcessName 热处理工序, CreateTime DateTime.Now, Status 0 } }; db.Insertable(processes).ExecuteCommand(); // 工序路径数据 var paths new ListProcessPath { new ProcessPath { Id 1, ProcessId 1, PathName 主轴加工路径, PathCode PATH001 }, new ProcessPath { Id 2, ProcessId 1, PathName 外壳加工路径, PathCode PATH002 }, new ProcessPath { Id 3, ProcessId 2, PathName 镀锌处理路径, PathCode PATH003 }, new ProcessPath { Id 4, ProcessId 3, PathName 总装路径, PathCode PATH004 }, new ProcessPath { Id 5, ProcessId 4, PathName 精度检测路径, PathCode PATH005 }, new ProcessPath { Id 6, ProcessId 5, PathName 成品包装路径, PathCode PATH006 } }; db.Insertable(paths).ExecuteCommand(); // 工序步骤用于拖拽排序 var steps new ListProcessStep { new ProcessStep { Id 1, PathId 1, StepName 粗加工, Sort 1 }, new ProcessStep { Id 2, PathId 1, StepName 半精加工, Sort 2 }, new ProcessStep { Id 3, PathId 1, StepName 精加工, Sort 3 }, new ProcessStep { Id 4, PathId 2, StepName 打磨, Sort 1 }, new ProcessStep { Id 5, PathId 2, StepName 抛光, Sort 2 }, new ProcessStep { Id 6, PathId 3, StepName 脱脂, Sort 1 }, new ProcessStep { Id 7, PathId 3, StepName 酸洗, Sort 2 }, new ProcessStep { Id 8, PathId 3, StepName 镀锌, Sort 3 }, new ProcessStep { Id 9, PathId 3, StepName 钝化, Sort 4 } }; db.Insertable(steps).ExecuteCommand(); } } } }(2) 实体类定义csharp运行// Models/Process.cs using SqlSugar; namespace ProcessManagement.Models { /// summary /// 工序主表 /// /summary [SugarTable(Process)] public class Process { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(ColumnName ProcessName, Length 100, IsNullable false)] public string ProcessName { get; set; } string.Empty; [SugarColumn(ColumnName CreateTime)] public DateTime CreateTime { get; set; } [SugarColumn(ColumnName Status)] // 1-启用 0-禁用 public int Status { get; set; } } /// summary /// 工序路径表子表 /// /summary [SugarTable(ProcessPath)] public class ProcessPath { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(ColumnName ProcessId)] public int ProcessId { get; set; } [SugarColumn(ColumnName PathName, Length 100, IsNullable false)] public string PathName { get; set; } string.Empty; [SugarColumn(ColumnName PathCode, Length 50, IsNullable false)] public string PathCode { get; set; } string.Empty; // 导航属性 [SugarColumn(IsIgnore true)] public ListProcessStep Steps { get; set; } new ListProcessStep(); } /// summary /// 工序步骤表用于拖拽排序 /// /summary [SugarTable(ProcessStep)] public class ProcessStep { [SugarColumn(IsPrimaryKey true, IsIdentity true)] public int Id { get; set; } [SugarColumn(ColumnName PathId)] public int PathId { get; set; } [SugarColumn(ColumnName StepName, Length 100, IsNullable false)] public string StepName { get; set; } string.Empty; [SugarColumn(ColumnName Sort)] // 排序字段 public int Sort { get; set; } } }(3) Program.cs 注册服务csharp运行using ProcessManagement.Services; var builder WebApplication.CreateBuilder(args); // 添加Razor Pages支持 builder.Services.AddRazorPages(); // 注册SQLSugar builder.Services.AddSqlSugar(); 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();二、核心页面实现1. 主页面Index.cshtml- 包含 GridView、图表、主子表单(1) Index.cshtml.cs 后台逻辑csharp运行// Pages/Index.cshtml.cs using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using ProcessManagement.Models; using SqlSugar; using System.Data; namespace ProcessManagement.Pages { public class IndexModel : PageModel { private readonly ISqlSugarClient _db; public IndexModel(ISqlSugarClient db) { _db db; } /// summary /// 工序列表主表 /// /summary public ListProcess ProcessList { get; set; } new ListProcess(); /// summary /// 选中工序的路径列表子表 /// /summary public ListProcessPath SelectedPathList { get; set; } new ListProcessPath(); /// summary /// 图表数据 /// /summary public string ChartData { get; set; } string.Empty; public void OnGet(int? processId 1) { // 获取所有工序 ProcessList _db.QueryableProcess().ToList(); // 获取选中工序的路径含步骤 SelectedPathList _db.QueryableProcessPath() .Where(p p.ProcessId processId) .LeftJoinProcessStep((p, s) p.Id s.PathId) .Select((p, s) new ProcessPath { Id p.Id, ProcessId p.ProcessId, PathName p.PathName, PathCode p.PathCode, Steps SqlFunc.GroupBySelectProcessStep(s, it it).OrderBy(it it.Sort).ToList() }) .GroupBy(p p.Id) .ToList(); // 构建图表数据工序数量统计 var chartData _db.QueryableProcess() .GroupBy(p p.Status) .Select(p new { Name SqlFunc.Case().When(p.Status 1).Then(启用).Else(禁用).End(), Count SqlFunc.Count(p.Id) }).ToList(); ChartData System.Text.Json.JsonSerializer.Serialize(chartData); } /// summary /// 切换工序 /// /summary public IActionResult OnGetSwitchProcess(int processId) { SelectedPathList _db.QueryableProcessPath() .Where(p p.ProcessId processId) .LeftJoinProcessStep((p, s) p.Id s.PathId) .Select((p, s) new ProcessPath { Id p.Id, ProcessId p.ProcessId, PathName p.PathName, PathCode p.PathCode, Steps SqlFunc.GroupBySelectProcessStep(s, it it).OrderBy(it it.Sort).ToList() }) .GroupBy(p p.Id) .ToList(); return new JsonResult(new { success true, data SelectedPathList }); } } }(2) Index.cshtml 前端页面html预览page model ProcessManagement.Pages.IndexModel { ViewData[Title] 工序管理主页面; } !-- 引入静态资源 -- link href~/lib/bootstrap/css/bootstrap.min.css relstylesheet / script src~/lib/jquery/jquery.min.js/script script src~/lib/bootstrap/js/bootstrap.bundle.min.js/script script src~/lib/chart.js/chart.umd.js/script script src~/lib/sortablejs/Sortable.min.js/script div classcontainer mt-4 h2 classmb-4工序管理系统/h2 !-- 1. 工序统计图表 -- div classrow mb-4 div classcol-md-6 div classcard div classcard-header工序状态统计/div div classcard-body canvas idprocessChart/canvas /div /div /div !-- 2. 工序主表GridView -- div classcol-md-6 div classcard div classcard-header工序列表/div div classcard-body table classtable table-bordered table-hover thead tr thID/th th工序名称/th th创建时间/th th状态/th th操作/th /tr /thead tbody foreach (var process in Model.ProcessList) { tr (process.Id 1 ? classtable-primary : ) tdprocess.Id/td tdprocess.ProcessName/td tdprocess.CreateTime.ToString(yyyy-MM-dd)/td td(process.Status 1 ? 启用 : 禁用)/td td button classbtn btn-sm btn-primary switch-process >2. 工序步骤排序保存页面ProcessStep/SaveSort.cshtml.cscsharp运行// Pages/ProcessStep/SaveSort.cshtml.cs using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using ProcessManagement.Models; using SqlSugar; namespace ProcessManagement.Pages.ProcessStep { public class SaveSortModel : PageModel { private readonly ISqlSugarClient _db; public SaveSortModel(ISqlSugarClient db) { _db db; } public async TaskIActionResult OnPostAsync(int pathId, [FromBody] ListStepSortDto sortData) { try { // 批量更新排序 foreach (var item in sortData) { await _db.UpdateableProcessStep() .SetColumns(s s.Sort item.Sort) .Where(s s.Id item.StepId) .ExecuteCommandAsync(); } return new JsonResult(new { success true }); } catch (Exception ex) { return new JsonResult(new { success false, message ex.Message }); } } public class StepSortDto { public int StepId { get; set; } public int Sort { get; set; } } } }3. 分菜单页面示例ProcessManage.cshtmlhtml预览page /ProcessManage model ProcessManagement.Pages.ProcessManageModel { ViewData[Title] 工序管理; } link href~/lib/bootstrap/css/bootstrap.min.css relstylesheet / script src~/lib/jquery/jquery.min.js/script div classcontainer mt-4 h2工序基础管理/h2 !-- 工序新增/编辑表单 -- div classcard mb-4 div classcard-header工序信息维护/div div classcard-body form idprocessForm div classrow mb-3 div classcol-md-6 label classform-label工序名称/label input typetext classform-control idprocessName required / /div div classcol-md-6 label classform-label状态/label select classform-select idprocessStatus option value1启用/option option value0禁用/option /select /div /div button typesubmit classbtn btn-primary保存/button /form /div /div !-- 工序列表 -- div classcard div classcard-header工序列表/div div classcard-body table classtable table-bordered idprocessTable thead tr thID/th th工序名称/th th创建时间/th th状态/th th操作/th /tr /thead tbody foreach (var process in Model.ProcessList) { tr tdprocess.Id/td tdprocess.ProcessName/td tdprocess.CreateTime.ToString(yyyy-MM-dd)/td td(process.Status 1 ? 启用 : 禁用)/td td button classbtn btn-sm btn-warning edit-process>1. 拖拽排序实现使用 SortableJS 实现工序步骤的拖拽排序通过data-step-id绑定步骤 ID拖拽后获取新的排序序号提交到后台批量更新Sort字段。2. 主子表单联动通过点击主表工序的 “选择” 按钮异步加载对应子表工序路径数据更新页面展示。3. 本地文件数据库使用 SQLite 作为本地文件数据库无需额外安装数据库服务数据存储在ProcessManagement.db文件中。4. SQLSugar 核心函数示例csharp运行// 1. 关联查询分组 var pathWithSteps _db.QueryableProcessPath() .LeftJoinProcessStep((p, s) p.Id s.PathId) .Select((p, s) new ProcessPath { Id p.Id, PathName p.PathName, Steps SqlFunc.GroupBySelectProcessStep(s, it it).OrderBy(it it.Sort).ToList() }) .GroupBy(p p.Id) .ToList(); // 2. 批量插入 _db.Insertable(processList).ExecuteCommand(); // 3. 条件更新 _db.UpdateableProcessStep() .SetColumns(s s.Sort newSort) .Where(s s.Id stepId) .ExecuteCommand(); // 4. 分组统计 var stat _db.QueryableProcess() .GroupBy(p p.Status) .Select(p new { Count SqlFunc.Count(p.Id) }) .ToList(); // 5. 左连接查询 var joinData _db.QueryableProcess() .LeftJoinProcessPath((p, pp) p.Id pp.ProcessId) .Select((p, pp) new { p.ProcessName, pp.PathName }) .ToList();四、部署与运行将项目发布为本地文件或直接在 VS 中运行首次运行会自动创建ProcessManagement.dbSQLite 数据库文件并插入测试数据访问https://localhost:5001即可进入主页面支持工序选择、路径步骤拖拽排序、图表展示、基础工序管理等功能五、扩展建议添加分页功能对工序列表实现分页查询优化大数据量展示增加数据验证在表单提交时添加前端 后端双重验证完善权限控制添加用户登录、角色权限管理导出功能支持将工序数据导出为 Excel/CSV 格式日志记录添加操作日志记录工序修改、排序变更等操作