AMES/AMESCoreStudio.Web/Views/PCS/PCS021_2025.cshtml

@model AMESCoreStudio.Web.ViewModels.PCS.PCS021ViewModel
@{
    ViewData["Title"] = "過站作業";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<script src="~/js/sweetalert2.all.min.js"></script>
<style type="text/css">
    .layui-table-main .layui-table-cell {
        /*height: auto !important;*/
        white-space: normal;
    }

    .layui-table img {
        max-width: 60px;
        max-height: 28px;
    }

    .layui-tree-main {
        cursor: pointer;
        padding-right: 10px;
        float: left;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        margin: 10px 0;
    }

    .layui-form > iframe {
        height: 100%;
        width: 100%;
        border: none;
    }

    .element {
        float: left;
    }

    .layui-field-title {
        margin: auto;
    }

    .layui-form-item {
        margin-bottom: auto;
    }

    .barcodeInput {
        border: 2px solid #090;
        color: blue;
    }

        .barcodeInput:focus {
            border: 3px solid #0026ff;
            color: blue;
        }

    .td-Input {
        white-space: pre;
    }
</style>

<div class="layui-card" style="height:auto;">
    <form id="PCS021_2025_Form" method="post" asp-action="PCS021_2025" class="layui-form">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md5 element">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">過站資料</li>
                            <li>治具資料</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">製程：</label>
                                            <div class="layui-input-inline" style="width:100px">
                                                <select id="unit" lay-filter="unit" lay-verify="required" asp-for="UnitNO" style="width:100px" lay-submit asp-items="@ViewBag.FactoryUnitList">
                                                </select>
                                            </div>
                                            <label class="layui-form-label">線別：</label>
                                            <div class="layui-input-inline" style="width:100px">
                                                <select id="line" lay-filter="line" lay-verify="required" asp-for="LineID" lay-submit>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">工單號碼：</label>
                                            <div class="layui-input-inline" style="width:100px">
                                                <input type="text" onkeydown="SearchNo(event);" asp-for="WipNO" asp-action="PCS021_2025_GetWip" class="layui-input" autocomplete="off" />
                                                <input type="hidden" asp-for="WipID" value="@Model.WipID" />
                                                <input type="hidden" asp-for="FlowRuleID" value="@Model.FlowRuleID" />
                                                <input type="hidden" asp-for="StationTypeNo" value="@Model.StationTypeNo" />
                                                <input type="submit" id="GetWipData" asp-action="PCS021_2025_GetWip" style="display:none;" />
                                            </div>
                                            <label class="layui-form-label">作業站：</label>
                                            <div class="layui-input-inline" style="width:100px">
                                                <select id="stations" lay-filter="stations" lay-verify="required" asp-for="Station" asp-items="@ViewBag.GetRuleStationByFlowRuleIDList" lay-submit>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <div class="layui-inline" style="height:25px;">
                                            <label class="layui-form-label">料號：</label>
                                            <label class="layui-form-label" style="text-align: left; width: 200px;">@Model.ItemNO</label>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline" style="height:25px;">
                                            <label class="layui-form-label">開始時間：</label>
                                            <label class="layui-form-label" id="startTime" name="startTime" style="text-align: left; width: 200px;color:red"></label>
                                            <input type="hidden" id="hiddenStartTime" name="startTime" />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline" style="height:25px;">
                                            <label class="layui-form-label" style="width:100px;text-align:left; padding: 9px 10px">已刷數/工單數：</label>
                                            <label class="layui-form-label" style="width:150px;text-align:left"><span id="InputQty">@Model.InputQTY</span>/@Model.PlanQTY</label>
                                        </div>
                                    </div>
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend style="color: #e18917">刷讀條碼</legend>
                                    </fieldset>
                                    <div class="layui-form-item" style="background-color: #acdbe36b">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">刷讀條碼：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" onkeypress="if( event.keyCode == 13 ) {  $(':input:visible:enabled:eq(' + ($(':input:visible:enabled').index(this) + 1) + ')').focus();
                                                    event.preventDefault(); return false; }" asp-for="InputNo" id="inputNo" style="width:100px" class="layui-input" autocomplete="off" placeholder="可輸入異常位置" />
                                            </div>
                                            <div class="layui-input-inline">
                                                <input type="text" onkeydown="input(event);" id="inputtxt" asp-for="Input" class="layui-input barcodeInput" autocomplete="off" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend style="color: #e18917">刷入資料</legend>
                                    <table id="tblCustomers" class="layui-table" cellpadding="0" cellspacing="0">
                                        <tbody id="tblCustomersBody">
                                        </tbody>
                                    </table>
                                </fieldset>
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend style="color: #e18917">檢查項目</legend>
                                    <table id="MydataTable" class="layui-table">
                                        @{
                                            int i = 0;
                                        }
                                        <thead>
                                            <tr>
                                                <th>
                                                    工項順序
                                                </th>
                                                <th>
                                                    工項名稱
                                                </th>
                                                <th>
                                                    工項描述
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var index in Model.MaterialStationsItems)
                                            {
                                                <tr>
                                                    <td>
                                                        @index.StationsItemSeq
                                                    </td>
                                                    <td>
                                                        @index.StationsItemNo
                                                    </td>
                                                    <td>
                                                        <input asp-for="@index.StationsItemDesc" name="MaterialStationsItems[@i].StationsItemDesc" readonly="readonly" />
                                                    </td>
                                                </tr>
                                                i++;
                                            }
                                        </tbody>
                                    </table>
                                </fieldset>
                                <fieldset id="KpItemDiv" class="layui-elem-field layui-field-title">
                                    <legend style="color: #e18917">指定KeyPart</legend>
                                    <input type="text" class="layui-input" asp-for="KpItemName" />
                                </fieldset>
                                <fieldset id="Memo" class="layui-elem-field layui-field-title">
                                    <legend style="color: #e18917">工程備註</legend>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width:auto; text-align: left; color: blue;">@Model.SystemMemo</label>
                                    </div>
                                </fieldset>
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend style="color: #e18917">KeyParts</legend>
                                </fieldset>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <table id="MydataTable" class="layui-table">
                                            @{
                                                int j = 0;
                                            }
                                            <thead>
                                                <tr>
                                                    <th>
                                                        KP料號名稱
                                                    </th>
                                                    <th>
                                                        KP料號NO
                                                    </th>
                                                    <th>
                                                        順序
                                                    </th>
                                                    <th>
                                                        前置碼
                                                    </th>
                                                    <th>
                                                        長度
                                                    </th>
                                                    <th>
                                                        生產單位
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var index in Model.WipKps)
                                                {
                                                    <tr>
                                                        <td>
                                                            <input type="text" class="layui-input" value="@index.KpName" name="WipKps[@j].KpName" style="width:100px" readonly="readonly">
                                                            <input type="hidden" name="WipKps[@j].KpNoName" value="@index.KpNoName">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="layui-input" value="@index.KpNoName" name="WipKps[@j].KpNoName" style="width:100px" readonly="readonly">
                                                            <input type="hidden" value="@index.KpNo" name="WipKps[@j].KpNo" />
                                                        </td>
                                                        <td>
                                                            <input type="text" class="layui-input" value="@index.KpSeq" name="WipKps[@j].KpSeq" style="width:40px" readonly="readonly">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="layui-input" value="@index.Title" name="WipKps[@j].Title" style="width:40px" readonly="readonly">
                                                        </td>
                                                        <td>
                                                            <input value="@index.Length" class="layui-input" name="WipKps[@j].Length" style="width:40px" readonly="readonly">
                                                        </td>
                                                        <td>
                                                            @index.UnitNoName
                                                        </td>
                                                    </tr>
                                                    j++;
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <table id="MydataTable" class="layui-table">
                                    @{
                                        int k = 0;
                                    }
                                    <thead>
                                        <tr>
                                            <th>
                                                治具種類
                                            </th>
                                            <th>
                                                生產單位
                                            </th>
                                            <th>
                                                作業站
                                            </th>
                                            <th>
                                                刷入治具條碼
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var index in Model.wipOutfits)
                                        {
                                            <tr>
                                                <td>
                                                    <input type="text" class="layui-input" asp-for="@index.PartNoName" name="wipOutfits[@k].PartNoName" readonly="readonly" />
                                                    <input type="hidden" asp-for="@index.PartNo" value="@index.PartNo" name="wipOutfits[@k].PartNo" />
                                                </td>
                                                <td>
                                                    <input type="text" class="layui-input" asp-for="@index.UnitNoName" name="wipOutfits[@k].UnitNoName" readonly="readonly" />
                                                </td>
                                                <td>
                                                    <input type="text" class="layui-input" asp-for="@index.StationName" name="wipOutfits[@k].StationName" readonly="readonly" />
                                                </td>
                                                <td>
                                                    <input onkeypress="if( event.keyCode == 13 ) { checkOutfit(this); return false; }" onchange="checkOutfit(this);" asp-for="@index.Inputs" name="wipOutfits[@k].Inputs" class="layui-input" />
                                                </td>
                                            </tr>
                                            k++;
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md7 element" style="height:100%">
                    @if (Model.Sops.Count != 0)
                    {
                        bool sopfirst = true;
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title ">
                                @foreach (var index in Model.Sops)
                                {
                                    if (sopfirst)
                                    {
                                        <li class="layui-this">@index.SopName</li>
                                        sopfirst = false;
                                    }
                                    else
                                    {
                                        <li>@index.SopName</li>
                                    }
                                }
                            </ul>

                            <div class="layui-tab-content">
                                @foreach (var index in Model.Sops)
                                {
                                    if (!sopfirst)
                                    {
                                        <div class="layui-tab-item layui-show" style="height:90vh">
                                            <iframe frameborder="0" style="width:100%;height:100%;" src='@index.SopPath'></iframe>
                                        </div>
                                        sopfirst = true;
                                    }
                                    else
                                    {
                                        <div class="layui-tab-item" style="height:90vh">
                                            <iframe frameborder="0" style="width:100%;height:100%;" src='@index.SopPath'></iframe>
                                        </div>
                                    }
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </form>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
        await Html.RenderPartialAsync("_FileinputScriptsPartial");
    }
    <script type="text/javascript" src="~/js/grids.min.js"></script>
    <script type="text/javascript">

        // Jquery 將兩邊DIV設定同高度
        jQuery(function ($) {
            $('.element').responsiveEqualHeightGrid();
            getUnitLineList($("#unit").val());
        });

        $(document).ready(function () {
            var error = '@Html.ValidationMessage("error")';
            if ($(error).text() != '') {
                ShowInputError(error);
            }

            if ($("#StationTypeNo").val() == "U" || $("#StationTypeNo").val() == "A") {
                $("#inputNo").show();
            }
            else {
                $("#inputNo").hide();
            }

        @if (!string.IsNullOrWhiteSpace(Model.SystemMemo))
        {
            <text>$("#Memo").show(); </text>
        }
        else
        {
            <text>$("#Memo").hide(); </text>
        }

            });

        function getUnitLineList(data) {
            $.ajax(
                {
                    url: "@Url.Action("GetUnitLineJson", "BAS")",
                    dataType: 'json',
                    data: { "unit_no": $("#unit").val() },
                    type: 'post',
                    success: function (result) {
                        $("#line").empty();//清空下拉框的值
                        $.each(result.data, function (index, item) {
                            $("#line").append($("<option>").text(item.text).val(item.value))
                        });
                        $("#line").val(@Model.LineID);
                        layui.form.render("select");//重新渲染 固定写法
                    },
                    error: function (result) {
                        alert(result);
                    }
                });
        };

        function SearchNo(e) {
            if (e.keyCode == 13) {
                $("#GetWipData").click();
                $("#KpItemName").val('');
            }
        };

        function input(e) {
            if (e.keyCode == 13) {

                // 先判斷過站刷入時間
                if (!checkInputStart()) {
                    event.preventDefault();
                    return false;
                }

                var Inputs = GetAllEmpData();
                var data = $("#PCS021_2025_Form").serialize();
                var InputsTotal = Inputs.length;
                for (i = 0; i < InputsTotal; i++) {
                    data += "&Inputs[" + i + "].Input=" + Inputs[i].Input;
                    data += "&Inputs[" + i + "].InputNo=" + Inputs[i].InputNo;
                }

                $.ajax({
                    url: "@Url.Action("PCS021_2025_Input", "PCS")",
                    type: "POST",
                    data: data,
                    success: function (result) {
                        $("#inputtxt").val('');
                        $("#inputNo").val('');
                        // 錯誤訊息
                        if (!result.success) {
                            ShowInputError(result.msg);
                        }
                        else {
                            if (result.msg.length != 0) {
                                ShowInputOK(result.msg);
                            }

                            // 指定KP 順序
                            if (result.data1.length != 0) {
                                var value = $("#KpItemName").val();
                                if (value != '')
                                    $("#KpItemName").val(value + "," + result.data1);
                                else
                                    $("#KpItemName").val(result.data1);
                            }
                            // 回傳有值
                            else if (result.data.length != 0) {
                                // 新增資料
                                TableAddRow(result.data);
                            }
                            else {
                                $("#startTime").text('');
                                $("#hiddenStartTime").val('');
                                $("#tblCustomersBody").empty();
                                InputQty();
                            }
                        }
                    }
                });
                event.preventDefault();
                return false;
            }
        };

        layui.use(['form', 'layer'], function () {
            form = layui.form;

            form.on('select(unit)', function (data) {
                getUnitLineList(data.value);
                $("#stations").empty();//清空下拉框的值
                $("#KpItemName").val('');
            });

            form.on('select(line)', function (data) {
                $("#stations").empty();//清空下拉框的值
                $("#KpItemName").val('');
                layui.form.render("select");//重新渲染 固定写法
            });

            form.on('select(stations)', function (data) {
                $("#KpItemName").val('');
                $("#GetWipData").click();
            });
        });

        // 已過站數與工單數量
        function InputQty() {
            $.ajax({
                url: "@Url.Action("getBarcodeStationByInputQty", "PCS")",
                type: "POST",
                data: { "wipNo": $("#WipNO").val(), "unitNo": $("#unit").val(), "ststionID": $("#stations").val() },
                success: function (result) {
                    $("#InputQty").text(result.data);
                }
            });
        };

        // 新增trRow
        function TableAddRow(e) {
            console.log(e);
            var strAry = e.split('＠');
            var InputNo = strAry[1];//異常代碼
            if (InputNo == undefined)
                InputNo = '';

            var contactdiv = '<tr class="data-contact-person">' +
                '<td style="width:10%;"><input style="width:80px" readonly="readonly" onkeypress="if( event.keyCode == 13 ) { return false; }" type="text" name="f-name" class="form-control td-InputNo" value=' + InputNo + '/></td>' +
                `<td style="width:90%;"><input readonly="readonly" style="width:100%;" onkeypress="if( event.keyCode == 13 ) { return false; }" type="text" name="f-name" class="td-Input" value="${strAry[0]}"/></td>` +
                '<td><a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" onclick="Remove(this);">刪除</a></td>' +
                '</tr>';
            $('#tblCustomers').append(contactdiv);
            AutoWindowSize();
        };

        // Table 刪除
        function Remove(button) {
            var row = $(button).closest("TR");
            var table = $("#tblCustomers")[0];
            table.deleteRow(row[0].rowIndex);
        };

        // 紀錄表格欄位
        function GetAllEmpData() {
            var data = [];
            $('tr.data-contact-person').each(function () {
                var Input = $(this).find('.td-Input').val();
                var InputNo = $(this).find('.td-InputNo').val();
                data.push({ Input: Input, InputNo: InputNo });
            });
            return data;
        }

        function AutoWindowSize() {
            $(window).on('resize', function () {
            }).resize();
        }

        // 顯示過站(OK)訊息
        function ShowInputOK(Msg) {
            Swal.fire({
                icon: 'success',
                title: Msg,
                showConfirmButton: false,
                timer: 2000
            })
        }

        // 顯示過站(NG)訊息
        function ShowInputError(Msg) {
            Swal.fire({
                color: '#716add',
                icon: 'warning',
                title: "<h3 style='color:#FFFFFF'>" + Msg + "</h3>",
                background: '#db4444',
            })
        }

        // 確認治具
        function checkOutfit(val) {
            console.log(val.value);
            var partNo = $(val).closest('tr').find('input:hidden[id*=PartNo]').val();
            if (val.value.length != 0) {
                $.ajax(
                    {
                        url: "@Url.Action("CheckOutfitInfoPartNo", "PCS")",
                        dataType: 'json',
                        data: { "outfitNo": val.value, "partNo": partNo },
                        type: 'post',
                        success: function (result) {
                            if (result.data.length != 0) {
                                ShowInputError(result.data);
                            }
                        },
                        error: function (result) {
                            alert(result);
                        }
                    });
            }
        }

        // 確認有刷入時間
        function checkInputStart(event) {
            const inputElement = document.querySelector("#inputtxt");
            const inputVal = inputElement ? inputElement.value.trim().toUpperCase() : "";
            const startTime = document.querySelector("#startTime");
            if (inputVal === "START") {
                $.ajax({
                    url: "@Url.Action("UpdateStartTime", "PCS")",
                    dataType: 'json',
                    type: 'get',
                    success: function (result) {
                        $("#startTime").text(result.data);
                        $("#hiddenStartTime").val(result.data);
                        $("#inputtxt").val('');
                    },
                    error: function (result) {
                        ShowInputError(result);
                    }
                });
                return false;
            }
            else if (!startTime || startTime.textContent.trim() === "") {
                $("#inputtxt").val('');
                ShowInputError('請先刷入START 開始刷入時間');
                return false;
            }

            return true;
        }

    </script>
}