一、layUI+JQuery
@using AMes.Domain.Entity.SystemManage;
@{Layout = null;
}<!DOCTYPE html><html>
<head><meta name="viewport" content="width=device-width" /><title>不合格品处置申请</title><link href="~/Scripts/layui-v2.8.2/layui/css/layui.css" rel="stylesheet" /><style>body, html {height: 100%;margin: 10px;}/*弹窗右上角关闭按钮*/.layui-layer-setwin span {font-size: 30px;}.layui-form-label {width: 120px !important; /* 或者具体宽度如 120px */white-space: nowrap; /* 防止文本换行 */overflow: visible; /* 确保内容不会溢出被隐藏 */}/* 强制禁用样式 */.disabled-input {background-color: #f6f6f6 !important;border-color: #e6e6e6 !important;opacity: 0.7;cursor: not-allowed !important;}</style>
</head>
<body><from class="layui-form layui-form-pane">@*第一行*@<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">项目号</label><div class="layui-input-inline"><input id="PROJN" type="text" name="PROJN" autocomplete="off" class="layui-input disabled-input " disabled></div></div><div class="layui-inline"><label class="layui-form-label">订单号</label><div class="layui-input-inline"><input id="WorkOrderNumber" type="text" name="WorkOrderNumber" autocomplete="off" class="layui-input disabled-input" disabled></div></div><div class="layui-inline"><label class="layui-form-label">工位</label><div class="layui-input-inline"><input id="WorkUnit" type="text" name="WorkUnit" autocomplete="off" class="layui-input disabled-input" disabled></div></div><div class="layui-inline"><label class="layui-form-label">产品型号</label><div class="layui-input-inline"><input id="ProductModel" type="text" name="ProductModel" autocomplete="off" class="layui-input disabled-input" disabled></div></div></div>@*第二行*@<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">物料编码</label><div class="layui-input-inline"><input id="MaterialCode" type="text" name="MaterialCode" autocomplete="off" class="layui-input disabled-input" disabled></div></div><div class="layui-inline"><label class="layui-form-label">物料名称</label><div class="layui-input-inline"><input id="MaterialName" type="text" name="MaterialName" autocomplete="off" class="layui-input disabled-input" disabled></div></div><div class="layui-inline"><label class="layui-form-label">内码</label><div class="layui-input-inline"><input id="SerialNumberIn" type="text" name="SerialNumberIn" autocomplete="off" class="layui-input disabled-input" disabled></div></div><div class="layui-inline"><label class="layui-form-label">外码</label><div class="layui-input-inline"><input id="SerialNumberOut" type="text" name="SerialNumberOut" autocomplete="off" class="layui-input disabled-input" disabled></div></div></div>@*第三行*@<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">生产车间</label><div class="layui-input-inline"><input id="ProductArea" type="text" name="ProductArea" autocomplete="off" class="layui-input disabled-input" disabled>@*<select id="ProductArea" name="ProductArea" lay-filter="Industry-select-filter" lay-verify="required"><option value="" selected>请选择车间</option>@foreach (var item in (List<ItemsDetailEntity>)ViewData["Dis_Workshop"]){<option value="@item.F_Id">@item.F_ItemName</option>}</select>*@</div></div><div class="layui-inline"><label class="layui-form-label">产业</label><div class="layui-input-inline"><select id="Industry" name="Industry" lay-filter="Industry-select-filter" lay-verify="required"><option value="" selected>请选择产业</option>@foreach (var item in (List<ItemsDetailEntity>)ViewData["Industry"]){<option value="@item.F_Id">@item.F_ItemName</option>}</select></div></div><div class="layui-inline"><label class="layui-form-label">物料类别</label><div class="layui-input-inline"><select id="MaterialCategory" name="MaterialCategory" lay-filter="MaterialCategory-select-filter" lay-verify="required"><option value="" selected>请选择物料类别</option>@foreach (var item in (List<ItemsDetailEntity>)ViewData["MaterialCategory"]){<option value="@item.F_Id">@item.F_ItemName</option>}</select></div></div><div class="layui-inline"><label class="layui-form-label">不合格数</label><div class="layui-input-inline"><input id="NonConformanceQty" type="number" name="NonConformanceQty" lay-verify="required" autocomplete="off" class="layui-input"></div></div></div>@*第四行*@<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">产品归类</label><div class="layui-input-inline"><select id="ProductCategorization" name="ProductCategorization" lay-filter="ProductCategorization-select-filter"><option value="" selected>请选择产品归类</option>@foreach (var item in (List<ItemsDetailEntity>)ViewData["ProductCategorization"]){<option value="@item.F_Id">@item.F_ItemName</option>}</select></div></div><div class="layui-inline"><label class="layui-form-label">不合格类别</label><div class="layui-input-inline"><select id="NonConformanceCategory" name="NonConformanceCategory" lay-filter="NonConformanceCategory-select-filter"><option value="" selected>请选择不合格类别</option>@foreach (var item in (List<ItemsDetailEntity>)ViewData["NonConformanceCategory"]){<option value="@item.F_Id">@item.F_ItemName</option>}</select></div></div><div class="layui-inline"><label class="layui-form-label">不合格程度</label><div class="layui-input-inline"><select id="NonConformanceDegree" name="NonConformanceDegree" lay-filter="NonConformanceDegree-select-filter" lay-verify="required"><option value="" selected>请选择不合格程度</option>@foreach (var item in (List<ItemsDetailEntity>)ViewData["NonConformanceDegree"]){<option value="@item.F_Id">@item.F_ItemName</option>}</select></div></div></div>@*第五行*@<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">问题发生时间</label><div class="layui-input-inline"><input id="OccurrenceTime" type="text" name="OccurrenceTime" lay-filter="OccurrenceTime" lay-verify="required" autocomplete="off" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss"></div></div><div class="layui-inline"><label class="layui-form-label">一级物料分类</label><div class="layui-input-inline"><select id="OneMaterialCode" name="OneMaterialCode" lay-filter="OneMaterialCode"></select></div></div><div class="layui-inline"><label class="layui-form-label">二级物料分类</label><div class="layui-input-inline"><select id="TwoMaterialCode" name="TwoMaterialCode" lay-filter="TwoMaterialCode"></select></div></div></div>@*第六行*@<div class="layui-form-item"><div class="layui-upload"><div><table class="layui-hide" id="InspectionItems" lay-filter="InspectionItems"></table></div><div style="text-align:right;padding:10px;"><button class="layui-btn" lay-submit lay-filter="table-submit" style="background-color:#006487">提交 <i class="layui-icon layui-icon-ok layui-font-12"></i></button></div></div></div></from><script type="text/html" id="TPL-select-DefectType"><select name="DefectType" class="layui-border DefectType" data-rowid="{{d.Id}}" lay-ignore><option value="">请选择</option>@foreach (var item in (List<Base_DefectType_Entity>)ViewData["DefectType"]){<option value="@item.DefectTypeCode" {{ d.DefectType == '@item.DefectTypeCode' ? 'selected' : '' }}>@item.DefectTypeName</option>}</select></script><script type="text/html" id="TPL-select-DefectDes"><select name="DefectDes" class="layui-border DefectDes" data-rowid="{{d.Id}}" lay-ignore style="width:115px;"><option value="">请选择</option>{{# layui.each(d._defectDesOptions || [], function(index, item){ }}<option value="{{ item.DefectDesCode }}" {{ d.DefectDes == item.DefectDesCode ? 'selected' : '' }}>{{ item.DefectDesName }}</option>{{# }); }}</select></script><!-- 操作列模板 --><script type="text/html" id="actionTpl"><div class="action-cell"><button class="layui-btn layui-btn-sm upload-btn" lay-event="upload"><i class="layui-icon"></i> 上传文件</button></div></script><script src="~/Scripts/jquery-3.3.1.min.js"></script><script src="~/Scripts/layui-v2.11.4/layui/layui.js"></script><script>var form;var loginUserCode = "@ViewData["LoginUserCode"]";//当前登录人编号var loginUserName = "@ViewData["LoginUserName"]";//当前登录人名称var List_UploadFile = [];//文件结果列表中var workOrderOperationInfo = new Object();var edit = function (data) {workOrderOperationInfo = data;console.log("workOrderOperationInfo ===========================================", JSON.stringify(workOrderOperationInfo));$("#PROJN").val(workOrderOperationInfo.ProjectNo);//项目号$("#WorkOrderNumber").val(workOrderOperationInfo.OrderNo);//订单号$("#WorkUnit").val(workOrderOperationInfo.Ps_Ppr);//工位$("#ProductModel").val(workOrderOperationInfo.Model);//型号$("#MaterialCode").val(workOrderOperationInfo.ProductCode);//物料编码$("#MaterialName").val(workOrderOperationInfo.ProductDesc);//物料名称$("#SerialNumberIn").val(workOrderOperationInfo.ProductBarCode);//内码$("#SerialNumberOut").val(workOrderOperationInfo.outCode);//外码$("#ProductArea").val(workOrderOperationInfo.WorkshopCode);//车间名称}layui.use(function () {//得到各种内置组件var $ = layui.jquery;var layer = layui.layer //弹层, laypage = layui.laypage //分页, laydate = layui.laydate //日期, table = layui.table //表格, upload = layui.upload //上传element = layui.element;//元素操作form = layui.form;//时间控件laydate.render({elem: '#OccurrenceTime',type: 'datetime',fullPanel: true //});// 使用事件委托处理缺陷类型变更$(document).on('change', '.DefectType', function () {var value = this.value;var text = this.options[this.selectedIndex].text;var rowId = $(this).data('rowid');var tr = $(this).closest('tr');var index = tr.data('index');if (rowId) {var rowData = table.cache.InspectionItems[index];if (rowData) {rowData.DefectType = value;rowData.DefectTypeName = text; // 清空缺陷描述的值和选项rowData.DefectDes = '';rowData.DefectDesName = '';rowData._defectDesOptions = []; // 先清空，等加载完再设置GetDefectDes(value, rowId, function (defectDesList) {// 将缺陷描述列表保存到行数据的临时属性中rowData._defectDesOptions = defectDesList;// 更新行数据，以便重新渲染缺陷描述下拉框table.updateRow('InspectionItems', {index: index,data: rowData});});}}});// 使用事件委托处理缺陷描述变更$(document).on('change', '.DefectDes', function () {var value = this.value;var text = this.options[this.selectedIndex].text;var rowId = $(this).data('rowid');var tr = $(this).closest('tr');var index = tr.data('index');if (rowId) {var rowData = table.cache.InspectionItems[index];if (rowData) {rowData.DefectDes = value;rowData.DefectDesName = text;}}});setTimeout(() => {//不合格检验项列表table.render({elem: '#InspectionItems',id: 'InspectionItems'// 添加这行, url: '/ProcessInspectionManage/NonconformDispositionApplication/GetInspectionItemsTablePage'//数据接口, height: '400px', method: 'post', title: '不合格检验项列表'//, toolbar: '#toolbarDemo', cellMinWidth: 'auto', where: {QualityInspectionId: workOrderOperationInfo.F_Id}, page: true//开启分页, limit: 200//页面大小, limits: [30, 50, 100, 200, 500], cols: [[ //表头{ field: 'Id', title: 'ID', hide: true },{ field: 'CheckNo', title: '检验项编码', align: 'center', width: 150, hide: false }, { field: 'CheckName', title: '检验项名称', align: 'center', width: 150, hide: false }, { field: 'CheckContent', title: '检验内容', align: 'center', width: 150, hide: false }, { field: 'DefectType', title: '缺陷类型', align: 'center', width: 150, hide: false, templet: '#TPL-select-DefectType' }, { field: 'DefectDes', title: '缺陷描述', align: 'center', width: 150, hide: false, templet: '#TPL-select-DefectDes' }, { field: 'ProblemDes', title: '问题描述', align: 'center', width: 300, hide: false, edit: 'textarea' }, { field: 'FileName', title: '文件名称', align: 'center', width: 150, hide: false }, { field: 'FileType', title: '文件类型', align: 'center', width: 150, hide: true }, { field: 'FileUrl', title: '文件地址', align: 'center', width: 150, hide: true }, { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#actionTpl' }]], done: function (res, curr, count) {//初始化上传按钮// 在表格渲染完成后绑定上传按钮$('.upload-btn').each(function () {var elem = $(this);var tr = elem.closest('tr');var index = tr.data('index');if (!elem.data('upload-initialized')) {initUpload(elem, index);elem.data('upload-initialized', true);}});}});}, 500);//提交form.on('submit(table-submit)', function (data) {console.log("table-submit-----------------" + JSON.stringify(data.field));var field = data.field; // 获得表单字段field.ProductCategorizationName = $("#ProductCategorization option:selected").text();field.NonConformanceCategoryName = $("#NonConformanceCategory option:selected").text();field.NonConformanceDegreeName = $("#NonConformanceDegree option:selected").text();field.MaterialCategoryName = $("#MaterialCategory option:selected").text();field.IndustryName = $("#Industry option:selected").text();field.OneMaterialName = $("#OneMaterialCode option:selected").text();field.TwoMaterialName = $("#TwoMaterialCode option:selected").text();field.ReworkTaskNumber = workOrderOperationInfo.ReworkTaskNumber;field.ProductAreaName = $("#ProductArea option:selected").text();//field.List_UploadFile = List_UploadFile;var currentData = table.getData('InspectionItems');field.List_UploadFile = currentData;let postData = {createdUserCode: loginUserCode,createdUserName: loginUserName,F_Id: workOrderOperationInfo.F_Id,entity: JSON.stringify(field)}console.log("postData-----------------" + JSON.stringify(postData)); $.ajax({async: false, //true 异步 false为同步请求type: 'POST', url: '/ProcessInspectionManage/NonconformDispositionApplication/SaveNonconformDispositionOrder', data: postData, beforeSend: function () {//console.log("加载中...");},complete: function () {// console.log("加载更多");},success: function (data) {var res = data;if (res.code != 200) {layer.msg(res.msg, { icon: 5 });} else {layer.msg(res.msg, { icon: 1 });//当在iframe页面关闭自身时，在iframe页执行以下js脚本var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引//parent.layer.close(index); //再执行关闭setTimeout(function () { parent.layer.close(index) }, 1000);}}});});//监听一级物料分类下拉选择form.on('select(OneMaterialCode)', function (data) {console.log(data)GetTwoMaterialCode(data.value)});// 初始化上传函数function initUpload(elem, index) {var tr = elem.closest('tr');upload.render({elem: elem[0],url: '/ProcessInspectionManage/NonconformDispositionApplication/FileUpload',accept: 'file',size: 10 * 1024,auto: true, // 自动上传choose: function (obj) {// 仅修改文本，不替换整个DOMelem.addClass('layui-btn-disabled').html('<i class="layui-icon"></i> 上传中...');},before: function () {var progress = $('<div class="upload-status"></div>');progress.append('<div class="layui-progress progress" lay-filter="progress-' + index + '">' +'<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div></div>');tr.find('.file-info').html(progress);element.render('progress');},progress: function (n) {var percent = n + '%';element.progress('progress-' + index, percent);},done: function (res) {console.log("上传结果==========================", JSON.stringify(res));if (res.success) {//let tableId = 'InspectionItems';//var allData = table.cache.InspectionItems;var allData = table.cache.InspectionItems;console.log("allData ==========================", JSON.stringify(allData));console.log("index ==========================", JSON.stringify(index));// 确保索引有效if (allData && allData[index]) {// 更新数据allData[index].FileName = res.data.fileName;allData[index].FileType = res.data.fileType;allData[index].FileUrl = res.data.filePath;console.log("allData[index]._defectDesOptions ==========================", JSON.stringify(allData[index]._defectDesOptions));console.log("allData[index] ==========================", JSON.stringify(allData[index]));console.log("allData =====after=====================", JSON.stringify(allData));// 更新指定行数据table.updateRow("InspectionItems", {index: index,data: allData[index]});let DefectTypeValue = allData[index].DefectType;let rowId = allData[index].Id;// GetDefectDes(DefectTypeValue, rowId);GetDefectDes(DefectTypeValue, rowId, function (defectDesList) {// 将缺陷描述列表保存到行数据的临时属性中allData[index]._defectDesOptions = defectDesList;// 更新行数据，以便重新渲染缺陷描述下拉框table.updateRow('InspectionItems', {index: index,data: allData[index]});// 重新渲染表单// layui.form.render();});layer.msg('上传成功');}} else {layer.msg('上传失败');}elem.removeClass('layui-btn-disabled').html('<i class="layui-icon"></i> 上传文件');},error: function () {elem.removeClass('layui-btn-disabled').html('<i class="layui-icon"></i> 上传文件');layer.msg('上传失败');}});}});$(function () {GetOneMaterialCode();});//获取一级物料分类数据function GetOneMaterialCode() {$.post("/ProcessInspectionManage/NonconformDispositionApplication/GetMaterialClassA", "", function (res) {if (res.code == 1) {$("#OneMaterialCode").empty();var str = '<option value="">请选择一级物料分类</option>';$.each(res.data, function (index, item) {str += '<option value="' + item.MaterialCode + '" >' + item.MaterialName + '</option>';})$("#OneMaterialCode").append(str);//重新渲染下拉框layui.use('form', function () {form.render();form.render('select', 'OneMaterialCode'); //刷新select选择框渲染});}})}//获取二级物料分类数据function GetTwoMaterialCode(_MaterialCode) {$.post("/ProcessInspectionManage/NonconformDispositionApplication/GetMaterialClassB", "MaterialCode=" + _MaterialCode, function (res) {if (res.code == 1) {$("#TwoMaterialCode").empty();var str = '<option value="">请选择二级物料分类</option>';$.each(res.data, function (index, item) {str += '<option value="' + item.MaterialCode + '" >' + item.MaterialName + '</option>';})$("#TwoMaterialCode").append(str);//重新渲染下拉框layui.use('form', function () {form.render();form.render('select', 'TwoMaterialCode'); //刷新select选择框渲染});}});}// 获取缺陷描述数据（带回调）function GetDefectDes(defectTypeCode, rowId, callback) {$.post("/ProcessInspectionManage/NonconformDispositionApplication/GetDefectDes",{ DefectTypeCode: defectTypeCode },function (res) {if (res.code == 1) {if (callback) {callback(res.data);}}});}// 获取缺陷描述数据（使用行ID）function GetDefectDes2(defectTypeCode, rowId) {$.post("/ProcessInspectionManage/NonconformDispositionApplication/GetDefectDes",{ DefectTypeCode: defectTypeCode },function (res) {if (res.code == 1) {// 使用行ID查找对应的缺陷描述下拉框var $defectDes = $('select.DefectDes[data-rowid="' + rowId + '"]');$defectDes.empty();$defectDes.append('<option value="">请选择</option>');$.each(res.data, function (index, item) {$defectDes.append($('<option></option>').val(item.DefectDesCode).text(item.DefectDesName));});// 重新渲染下拉框layui.form.render($defectDes.parent());}});}</script>
</body>
</html>
二、C# MVC
// 文件上传API[HttpPost]public ActionResult FileUpload(){try{if (Request.Files.Count == 0)return Json(new { success = false, message = "没有接收到文件" });HttpPostedFileBase file = Request.Files[0];if (file.ContentLength == 0)return Json(new { success = false, message = "文件为空" });// 创建上传目录（如果不存在）string uploadPath = Server.MapPath("~/Uploads/");if (!Directory.Exists(uploadPath)){Directory.CreateDirectory(uploadPath);}// 生成唯一文件名string fileName = $"{Guid.NewGuid().ToString()}_{Path.GetFileName(file.FileName)}";string filePath = Path.Combine(uploadPath, fileName);// 保存文件file.SaveAs(filePath);// 返回文件信息return Json(new{success = true,data = new{fileName = file.FileName,fileType = Path.GetExtension(file.FileName).ToUpper().TrimStart('.'),filePath = $"/Uploads/{fileName}"}});}catch (Exception ex){return Json(new { success = false, message = ex.Message });}}
