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

@{
    ViewData["Title"] = "完工入庫";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<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;
    }
</style>

<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">內部序號:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="barcodeNo" name="barcodeNo" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">工單號碼:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="wipNo" name="wipNo" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">包裝箱號:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="boxNo" name="boxNo" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">RecordNumber:</label>
                            <div class="layui-input-inline">
                                <input id="inhouseNo" name="inhouseNo" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <div class="layui-inline">
                            <label class="layui-form-label">入庫日期:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateStr" name="date_str" autocomplete="off" class="layui-input" readonly="">
                            </div>
                            <div class="layui-form-mid">～</div>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateEnd" name="date_end" autocomplete="off" class="layui-input" readonly="">
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">是否入庫:</label>
                            <div class="layui-input-inline">
                                <select name="Status" id="Status" class="custom-select col-sm-2">
                                    <option value="ALL">全部</option>
                                    <option value="Y">已入庫</option>
                                    <option value="N">待入庫</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm5">
                        <div class="layui-inline">
                            <label class="layui-form-label">廠別:</label>
                            <div class="layui-input-inline">
                                <select name="Status" id="FactoryID" class="custom-select col-sm-2">
                                    <option value="1">安勤</option>
                                    <option value="2">昶亨</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <button id="querysubmit" class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="querysubmit">
                                <i class="layui-icon layui-icon-sm">&#xe615;</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="white-space: normal; word-wrap: break-word; width:82px; margin-top: -10px;">RecordNumber 輸入:</label>
                            <div class="layui-input-inline">
                                <input id="inhouseNo1" name="inhouseNo1" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="white-space: normal; word-wrap: break-word; width:78px; margin-top: -10px;">RecordDate 輸入:</label>
                            <div class="layui-input-inline">
                                <input id="recordDate" name="date_str" autocomplete="off" value="@System.DateTime.Now.ToString("yyyy-MM-dd")" class="layui-input" readonly="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-code-ol">
                        <label id="rowCount" class="layui-inline layui-form-label" style="color: red; text-align: left;">數量合計: 0</label>
                    </div>
                </div>
            </div>
        </div>
        <table class="layui-hide" id="query" lay-filter="query"></table>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        layui.use(['form', 'layer', 'laydate', 'table'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;

            $('#querysubmit').click(function () {
                console.log("查詢")
                renderTable();
            });

            laydate.render({
                elem: '#dateStr',
                trigger: 'click',
                format: 'yyyy/MM/dd',
                theme: 'grid'
            });

            laydate.render({
                elem: '#dateEnd',
                trigger: 'click',
                format: 'yyyy/MM/dd',
                theme: 'grid'
            });
            laydate.render({
                elem: '#recordDate',
                trigger: 'click',
                format: 'yyyy-MM-dd',
                theme: 'grid'
            });

            $('#inhouseNo1').on('keypress', function (event) {
                if (event.keyCode == 13) {
                    var data = $("#inhouseNo1").val();
                    if (data == '') {
                        alert("請輸入recordNumber")
                    } else {
                        $('#recordNumber2 ').each(function () {
                            $(this).val(data);
                        });
                    }
                }
            });

            $('#querysubmitTmp').click(function () {
                var data = $("#inhouseNo1").val();
                if (data == '') {
                    alert("請輸入recordNumber")
                } else {
                    $('#recordNumber2 ').each(function () {
                        $(this).val(data);
                    });
                }
            });

            var tableCols = [[
                { type: 'checkbox' },
                { field: 'serialNo', title: '箱號', sort: true, totalRowText: '合計' },
                { field: 'boxQty', title: '數量', sort: true, totalRow: true },
                { field: 'inhouseNo', title: '送驗單號', sort: true },
                { field: 'seqID', title: '順序', sort: true },
                { field: 'wipNo', title: '工單號碼', sort: true },
                { field: 'itemNo', title: '料號', sort: true },
                { field: 'createDate', title: 'FQC時間', sort: true, templet: '<div>{{ layui.util.toDateString(d.createDate, "yyyy/MM/dd") }}</div>' },
                { field: 'statusName', title: '檢驗狀態', sort: true, templet: '#statusName' },
                { field: 'endTime', title: '抽驗結束時間', sort: true, templet: '<div>{{ layui.util.toDateString(d.endTime, "yyyy/MM/dd") }}</div>' },
                {
                    field: 'locationNo', title: '庫別', fixed: 'right', edit: 'text', templet: function (d) {
                        var txt = '<div class="layui-input-inline" style="width:130px"><input id="locationNo" name="locationNo" autocomplete="off" class="layui-input" placeholder="請輸入庫別"></div>';
                        if (d.locationNo != null)
                            txt = '<div class="layui-input-inline" style="width:130px"><input id="locationNo" name="locationNo" autocomplete="off" class="layui-input" value="' + d.locationNo + '" ></div>';
                        if (d.recordNumber != null) {
                            if (d.locationNo != null)
                                txt = d.locationNo
                            else
                                txt = "";
                        }
                        return txt;
                    }
                },
                {
                    field: 'right', title: '操作', fixed: 'right', templet: function (d) {
                        var btn = '<a class="layui-btn layui-btn-warm layui-icon layui-icon-list layui-btn-xs" lay-event="detail">檢視</a>';
                        if (d.recordNumber == null)
                            btn = btn + '<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">入庫</a>';
                        else
                            btn = btn + '<a> 已入庫</a>';
                        return btn;
                    }
                }
            ]];

            // 箱號資料檢視
            function detail(obj) {
                hg.open('箱號資料查詢', '/PCS/PCS031V?QuotName=' + $("#FactoryID").val() + '&InhouseNo=' + obj.data.inhouseNo + '&SeqID=' + obj.data.seqID, '', '', true);
            }

            // 箱號資料編輯
            function edit(obj) {
                var recordnumber = $("#inhouseNo1").val();
                var recordDate = $("#recordDate").val();
                var Factority_ID = $("#FactoryID").val();

                if (recordnumber == '') {
                    hg.msg('請輸入recordnumber！');
                } else {
                    hg.confirm("送驗單號_箱號：【" + obj.data.inhouseNo + "_" + obj.data.serialNo + "】，確定要入庫嗎？", function () {
                        $.ajax({
                            url: '/PCS/PCS031inhouse',
                            data: { InhouseNo: obj.data.inhouseNo, boxNo: obj.data.serialNo, seq: obj.data.seqID, recordNumber: recordnumber, locationNo: obj.data.locationNo, recordDate: recordDate, factorityID: Factority_ID, itemNo: obj.data.itemNo },
                            type: 'POST',
                            success: function (data) {
                                if (data.success) {
                                    hg.msg("success" + data.msg);
                                    renderTable();
                                } else {
                                    hg.msg(data.msg);
                                }
                            },
                            error: function (xhr, status, error) {
                                var err = eval("(" + xhr.responseText + ")");
                                hg.msg(err.Message);
                            }
                        });
                    });
                }
            }

            //批次入庫
            function batchInhouse(obj){
                console.log("批次入庫", obj)
                var index = layer.load(1, {
                    shade: [0.4, '#000'],
                    content: '批次入庫中......',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '60px',
                            'width': '200px'
                        })
                    }
                });
                if (obj && obj.length > 0) {
                    var recordnumber = $("#inhouseNo1").val();
                    var recorddate = $("#recordDate").val();
                    var Factority_ID = $("#FactoryID").val();

                        if (recordnumber == '' && recordnumber != null) {
                            hg.msg('請輸入recordnumber！');
                            layer.close(index);
                            return;
                        } else {
                            hg.confirm("批量入庫所有勾選項目，確定要入庫吗？", function () {
                                $.ajax({
                                    url: '/PCS/PCS031inhouse_all',
                                    data: { ids: obj.map(function (x) { return x.inhouseNo + "," + x.serialNo + "," + x.seqID + "," + recordnumber + "," + x.locationNo + "," + recorddate + "," + Factority_ID + "," + x.itemNo }) },
                                    type: 'POST',
                                    success: function (data) {
                                        if (data.success) {
                                            hg.msg(data.msg);
                                            renderTable();
                                        } else {
                                            hg.msg('批量入庫失败！');
                                        }
                                    },
                                    error: function (xhr) {
                                         try {
                                            var err = JSON.parse(xhr.responseText);
                                            hg.msg(err.Message || "發生錯誤");
                                        } catch (e) {
                                            hg.msg("無法解析錯誤訊息");
                                        }
                                    },
                                    complete: function () {
                                        layer.close(index);
                                    }
                                });
                            });
                        }
                    } else {
                    hg.msg('請選中一個或多個複選框，再操作！');
                }
            }

            //勾選數量合計
            function sumSelected(obj) {
                console.log("勾選數量合計", obj);
                if (obj && obj.length > 0) {
                    var totalQty = obj.reduce(function (sum, item) {
                        return sum + (item.boxQty || 0);
                    }, 0);

                    // 顯示合計數量
                    layer.msg('已選數量合計: ' + totalQty);
                } else {
                    layer.msg('請選中一個或多個複選框，再操作！');
                }
            }

            //渲染數據表格
            function renderTable() {
            var limitSelect = 50;
            table.render({
                elem: '#query',
                url: '/PCS/PCS031Query',
                where: {
                    factority: $("#FactoryID").val(),
                    barcodeNo: $("#barcodeNo").val(),
                    wipNo: $("#wipNo").val(),
                    boxNo: $("#boxNo").val(),
                    inhouseNo: $("#inhouseNo").val(),
                    date_str: $("#dateStr").val(),
                    date_end: $("#dateEnd").val(),
                    status: $("#Status").val()
                },
                cols: tableCols,
                page: {
                    limit: limitSelect,
                    limits:[50,100,150,200,250,300,350,400,450,500]
                },
                toolbar:'#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                loading: true,
                done: function (res, curr, count) {
                    table.resize();
                    limitSelect =$(this)[0].limit;
                    // 计算合计数值
                    var totalBoxQty = 0;
                    if (res.data && res.data.length > 0) {
                        for (var i = 0; i < res.data.length; i++) {
                            totalBoxQty += res.data[i].boxQty || 0; // 确保 boxQty 存在并累加
                        }
                    }

                    var rowCountElement = document.getElementById('rowCount');
                    if (rowCountElement) {
                        rowCountElement.innerHTML = `合計: ${totalBoxQty}`;
                    }
                }
            });
        }


            // 監聽工具列事件
            table.on('toolbar(query)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                var event = obj.event;
                if (event === 'batchInhouse') {
                    batchInhouse(data);
                } else if (event === 'sumSelected') {
                    sumSelected(data);
                }
            });

            // 監聽行工具事件
            table.on('tool(query)', function (obj) {
                var event = obj.event;
                if (event === 'edit') {
                    edit(obj);
                } else if (event === 'detail') {
                    detail(obj);
                }
            });

            renderTable(); // 初始化表格
        });
    </script>

    <script type="text/html" id="statusName">
        {{#  if(d.statusName === '允收'){ }}
        <span style="color: #07ab2a;">{{ d.statusName }}</span>
        {{#  } else if(d.statusName === '批退'){ }}
        <span style="color: #d70841;">{{ d.statusName }}</span>
        {{#  } else { }}
        {{ d.statusName }}
        {{#  } }}
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="batchInhouse">批次入庫</button>
            <button class="layui-btn layui-btn-sm" lay-event="sumSelected">查詢勾選數量合計</button>
        </div>
    </script>
}