一、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 });}}
)
