swiftadmin/app/admin/view/pdm_partlist/index.html

<include file="/public/header" />

<!-- // 重定位Style -->
<style>
    .layui-card-header.layadmin-card-header-auto {
        border-bottom: 0px;
        padding-bottom: 0px;
    }

    .layui-card-header h5 {
        font-size: 16px;
    }

    #layui-dic_group {
        padding-bottom: 25px;
    }

    #layui-dic_group .layui-table-view .layui-table {
        width: 100%;
    }

    #layui-dic_group table thead tr:first-child i {
        display: none;
    }

    @media screen and (max-width: 1200px) {
        .layui-table-tool-temp .layui-btn {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
        }

        .layui-table-tool-temp .layui-btn:nth-last-child(3) {
            display: none;
        }
    }
</style>

<div class="layui-col-md4">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layadmin-card-header-auto" style="padding-bottom: 5px">
                <div class="layui-inline layui-hide" id="toolbar">
                    <!-- // 打开添加页面 -->
                    <button class="layui-btn icon-btn" lay-open="add" data-title="{:__('添加BOM')}" data-area="600px"
                        data-url="#editforms_bom" callback="edit">
                        <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                    </button>
                    <!-- // 修改页面 -->
                    <button class="layui-btn icon-btn" lay-open="edit" data-title="{:__('修改BOM')}" data-area="600px"
                        data-url="#editforms_bom" callback="edit">
                        <i class="layui-icon layui-icon-edit"></i>{:__('修改')}
                    </button>
                    <!-- // 删除所有 -->
                    <button class="layui-btn icon-btn layui-btn-danger" lay-batch="" data-table="lay-tableGroup"
                        data-url="{:url('/PdmPartlist/del')}">
                        <i class="layui-icon layui-icon-delete"></i>{:__('删除')}
                    </button>
                </div>
            </div>
            <div class="layui-card-body" id="layui-dic_group">
                <!-- // 创建字典组实例 -->
                <table id="lay-tableGroup" lay-filter="lay-tableGroup"></table>
            </div>
        </div>
    </div>
</div>

<div class="layui-col-md8" >
    <!-- // 展示数据 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <!-- // 默认操作按钮 -->
            <div class="layui-card-header layadmin-card-header-auto ">
                <div class="layui-form">
                    <!-- // 自定义搜索参数 -->
                    <div id="laytable-search" class="layui-form-item">

                        <div class="layui-inline">
                            <div class="layui-form-label">{:__('Partnumber')}</div>
                            <div class="layui-input-inline ">
                                <input name="partnumber" class="layui-input" type="text" placeholder="{:__('Partnumber')}" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">{:__('Purchasecode')}</label>
                            <div class="layui-input-inline ">
                                <input name="purchasecode" class="layui-input" type="text" placeholder="{:__('Purchasecode')}" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">{:__('Value')}</label>
                            <div class="layui-input-inline ">
                                <input name="value" class="layui-input" type="text" placeholder="{:__('Value')}" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">{:__('MPN')}</label>
                            <div class="layui-input-inline ">
                                <input name="mpn" class="layui-input" type="text" placeholder="{:__('MPN')}" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">{:__('Reference')}</label>
                            <div class="layui-input-inline ">
                                <input name="reference" class="layui-input" type="text" placeholder="{:__('Reference')}" />
                            </div>
                        </div>

                    </div>   
                    <div class="layui-form-item">
                        <!-- <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">{:__('按状态查询')}</option>
                                    <option value="2" >{:__('正常')}</option>                                 
                                    <option value="1" >{:__('关闭')}</option>                             
                                </select>
                            </div>  
                        </div> -->

                        <div class="layui-inline">
                            <div class="layui-input-inline ">
                                <input name="keyword" class="layui-input" type="text" placeholder="{:__('关键字搜索')}" />
                            </div>
                        </div>

                        <div class="layui-inline">
                            <!-- // 默认搜索 -->
                            <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i
                                    class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                            <!-- // 打开添加页面 -->
                            <button class="layui-btn icon-btn" lay-open="" data-title="{:__('添加BOM项')}"
                                data-area="600px" data-url="#editforms">
                                <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                            </button>
                            <!-- // 删除所有 -->
                            <button class="layui-btn icon-btn layui-btn-danger" lay-batch data-table="lay-tableList"
                                data-url="{:url('/PdmPartlist/del')}">
                                <i class="layui-icon layui-icon-delete"></i>{:__('删除')}
                            </button>

                            <!-- 自定义导出按钮 -->
                            <button id="exportExcel" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-export"></i> 导出 Excel
                            </button>

                        </div>
                    </div>
                </div>
            </div>

            <!-- // 创建数据实例 -->
            <table id="lay-tableList" lay-filter="lay-tableList"></table>
        </div>
    </div>
</div>


<!-- // 添加编辑数据 -->
<section id="editforms_bom" class="layui-hide">
    <div class="layui-fluid layui-bg-white">
        <form class="layui-form layui-form-fixed" lay-filter="editforms_bom">
            <input type="text" name="id" hidden="">
            <input type="text" class="pid" name="pid" value="{$pid}" hidden="">

            <!-- <div class="layui-form-item">
                <label class="layui-form-label">{:__('Item')}</label>
                <div class="layui-input-block">
                    <input name="item" placeholder="{:__('请输入item')}" type="text" class="layui-input"  lay-verify="" />
                </div>
            </div> -->
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red; ">* </span>{:__('BOM编码')}</label>
                <div class="layui-input-block">
                    <input name="partnumber" placeholder="{:__('请输入BOM编码')}" type="text" class="layui-input"  lay-verify="required" />
                </div>
            </div>

            <!-- <div class="layui-form-item">
                <label class="layui-form-label">{:__('位号')}</label>
                <div class="layui-input-block">
                    <input name="reference" placeholder="{:__('请输入位号')}" class="layui-input" lay-verify="" />
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('用量')}</label>
                <div class="layui-input-block">
                    <input name="quantity" placeholder="{:__('请输入用量')}" class="layui-input" lay-verify="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('单位')}</label>
                <div class="layui-input-block">
                    <input name="unit" placeholder="{:__('请输入单位')}" class="layui-input" lay-verify="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('排序号')}</label>
                <div class="layui-input-block">
                    <input name="sort" placeholder="{:__('默认自动生成')}" type="number" class="layui-input" />
                </div>
            </div> -->

            <div class="layui-form-item">
                <label class="layui-form-label">{:__('BOM备注')}</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content" style="min-height: 80px;" placeholder="{:__('请输入BOM备注')}"
                        class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-footer layui-form-item layui-center">
                <button class="layui-btn layui-btn-primary" type="button"
                    sa-event="closePageDialog">{:__('取消')}</button>
                <button class="layui-btn" lay-add="{:url('/PdmPartlist/add')}" lay-edit="{:url('/PdmPartlist/edit')}"
                    lay-filter="submitPage" lay-submit>{:__('提交')}</button>
            </div>
        </form>
    </div>
</section>




<!-- // 添加编辑数据 -->
<section id="editforms" class="layui-hide">
    <div class="layui-fluid layui-bg-white">
        <form class="layui-form layui-form-fixed" lay-filter="editforms">
            <input type="text" name="id" hidden="">
            <input type="text" class="pid" name="pid" value="{$pid}" hidden="">

            <div class="layui-form-item">
                <label class="layui-form-label">{:__('Item')}</label>
                <div class="layui-input-block">
                    <input name="item" placeholder="{:__('请输入item')}" type="text" class="layui-input"
                        lay-verify="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red; ">* </span>{:__('BOM编码')}</label>
                <div class="layui-input-block">
                    <input name="partnumber" placeholder="{:__('请输入BOM编码')}" type="text" class="layui-input"
                        lay-verify="required" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">{:__('位号')}</label>
                <div class="layui-input-block">
                    <input name="reference" placeholder="{:__('请输入位号')}" class="layui-input" lay-verify="" />
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('用量')}</label>
                <div class="layui-input-block">
                    <input name="quantity" placeholder="{:__('请输入用量')}" class="layui-input" lay-verify="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('单位')}</label>
                <div class="layui-input-block">
                    <input name="unit" placeholder="{:__('请输入单位')}" class="layui-input" lay-verify="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('排序号')}</label>
                <div class="layui-input-block">
                    <input name="sort" placeholder="{:__('默认自动生成')}" type="number" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">{:__('BOM备注')}</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content" style="min-height: 80px;" placeholder="{:__('请输入BOM备注')}"
                        class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-footer layui-form-item layui-center">
                <button class="layui-btn layui-btn-primary" type="button"
                    sa-event="closePageDialog">{:__('取消')}</button>
                <button class="layui-btn" lay-add="{:url('/PdmPartlist/add')}" lay-edit="{:url('/PdmPartlist/edit')}"
                    lay-filter="submitPage" lay-submit>{:__('提交')}</button>
            </div>
        </form>
    </div>
</section>

<!-- // 列表编辑框 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" data-title="{:__('编辑BOM项')}" data-url="#editforms" data-area="600px" lay-event="edit" >{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/PdmPartlist/del')}?id={{d.id}}" lay-event="del" >{:__('删除')}</a>
</script>


<script type="text/html" id="tableButton"></script>


<!-- 在页面底部（通常在 </body> 标签之前）引入 SheetJS 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<include file="/public/footer" />
<script>
    layui.use(['admin', 'jquery', 'table', 'form'], function () {

        let admin = layui.admin;
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;
        let count = {$count|default=300};

        // 定义表格URL
        let tableURL = "{:url('/PdmPartlist/index')}";

        // 字典类表格
        let isClass = table.render({
            elem: "#lay-tableGroup"
            , url: tableURL + "?pid=0"
            , toolbar: '#toolbar'
            , defaultToolbar: []
            , page: true
            , limit: 18
            , cols: [[
                { type: 'radio', align: 'left', title: '{:__("ID")}' },
                { field: 'partnumber', align: 'center', title: '{:__("BOM编码")}' },
                // { field: 'reference', align: 'center', title: '{:__("位号")}' },
                { field: 'content', align: 'center', title: '{:__("备注")}' },
            ]]
        })

        // 基础表格
        let isTable = table.render({
            elem: "#lay-tableList"
            , url: tableURL
            ,toolbar: '#tableButton'
            // ,defaultToolbar: ['filter', 'exports', 'print', 'search']
            ,defaultToolbar: ['filter',  'print', 'search']
            , page: true
            //, page: false
            , limit: 18
            , cols: [[
                {type: 'checkbox'},
                // {field: 'id', align: 'center',sort: true,width: 80,  title: 'ID'},
                { field: 'item', align: 'center', width: 40,title: '{:__("Item")}' },
                { field: 'partnumber', align: 'left', width: 180,title: '{:__("Partnumber")}' },

                { field: 'parttype', align: 'left', width: 100,title: '{:__("Parttype")}' },
                { field: 'purchasecode', align: 'left', width: 160,title: '{:__("Purchasecode")}' },
                { field: 'value', align: 'left', width: 100,title: '{:__("Value")}' },
                { field: 'description', align: 'left', width: 200,title: '{:__("Description")}' },
                { field: 'mpn', align: 'left', width: 150,title: '{:__("MPN")}' },
                { field: 'mfgname', align: 'left', width: 150,title: '{:__("MFG")}' },
                { field: 'footprint', align: 'left', width: 150,title: '{:__("Footprint")}' },
                { field: 'manufacture', align: 'left', width: 120,title: '{:__("Manufacture")}' },
                

                { field: 'reference', align: 'left',width: 250, title: '{:__("位号")}' },
                // {field: 'sort', align: 'center',  width: 135, title: '{:__("排序号")}'},
                { field: 'quantity', align: 'center', width: 100, title: '{:__("Quantity")}' },
                { field: 'unit', align: 'center', width: 80, title: '{:__("Unit")}' },
                { field: 'content', align: 'left',  title: '{:__("备注")}' },
                // {field: 'create_time', align: 'center', width: 180,title: '{:__("创建时间")}'},
                { align: 'center', toolbar: '#tableBar', width: 135, fixed:'right', title: '{:__("操作")}' },
            ]]
        })
        // 表格选择行事件
        table.on('radio(lay-tableGroup)', function (obj) {
            let data = table.checkStatus('lay-tableGroup').data;
            let ids = [];
            if (data.length) {
                for (const key in data) {
                    ids.push(data[key].id);
                }

                let url = tableURL + '?pid=' + ids.join(',');
                table.reloadData('lay-tableList', {
                    url: url
                });

                // 获取最后点击
                if (obj.checked === true) {
                    $('#editforms').find('.pid').attr('value', obj.data.id);
                    $('#editforms_bom').find('.pid').attr('value', obj.data.id);                    
                }
            }
        });

        // 自定义导出按钮点击事件
        document.getElementById('exportExcel').addEventListener('click', function () {
            // 确认用户希望导出全部数据
            layer.confirm('确定导出所有数据到 Excel 吗？', { icon: 3, title: '导出确认' }, function(index){
                layer.close(index);
                exportAllDataToExcel();
            });
        });

        // 自定义导出功能
        function exportAllDataToExcel(){
            // 获取当前的过滤条件（例如，pid）
            let selectedData = table.checkStatus('lay-tableGroup').data;
            let pid = selectedData.length ? selectedData[0].id : 0;
            // 异步获取所有数据（不分页）
            layer.msg('异步获取所有数据（不分页），超时限制：30s');
            $.ajax({
                url: tableURL + "?pid=" + pid + "&export=1&limit=" +count ,// 后端需要根据 'export=1' 返回所有数据
                // method: 'GET',
                type: 'POST',
                dataType: 'json',
                timeout: 30000,
                success: function(res){
                    if(res.code === 200){
                        layer.msg('获取数据总数:'+ res.data.length);
                        let data = res.data;
                        if(data.length === 0){
                            layer.msg('没有数据可导出');
                            return;
                        }
                        // 转换数据为 SheetJS 格式
                        layer.msg('转换数据为 SheetJS 格式');
                        // let worksheetData = data.map(row => {
                        let worksheetData = data.map(row => {
                            return {
                                'Item': row.item,
                                'Partnumber': row.partnumber,
                                'Parttype': row.parttype,
                                'Purchasecode': row.purchasecode,
                                'Value': row.value,
                                'Description': row.description,
                                'MPN': row.mpn,
                                'MFG': row.mfgname,
                                'Footprint': row.footprint,
                                'Manufacture': row.manufacture,
                                'Reference': row.reference,
                                'Quantity': row.quantity,
                                'Unit': row.unit,
                                '备注': row.content,
                                // 添加其他需要导出的字段
                            };
                        });
                        // 创建工作簿和工作表
                        layer.msg('创建工作簿和工作表');
                        let worksheet = XLSX.utils.json_to_sheet(worksheetData);
                        let workbook = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(workbook, worksheet, "BOM数据");
                        // 生成 Excel 文件并下载，设置自定义文件名
                        
                        const filename = "BOM_Export_" + new Date().toISOString().slice(0,10) + ".xlsx"; // 自定义文件名
                        layer.msg('生成 Excel 文件并下载，设置自定义文件名：'+filename);
                        XLSX.writeFile(workbook, filename);
                        layer.msg('生成 Excel 文件并下载，文件名：'+filename);
                    }                    

                },
                error: function(res){
                    layer.msg('数据获取失败，请稍后重试:'+res.msg);
                }
            });
        }

        // 全局回调函数
        admin.callback.edit = function (clickthis, colletction, config) {

            let status = true;
            let action = clickthis.attr('lay-open');
            let data = table.checkStatus('lay-tableGroup').data;
            if (action === 'edit') {
                status = false;
                form.val('editforms', data[0]);
                form.val('editforms_bom', data[0]);
            }

            form.on("submit(submitPage)", function (post) {
                let pageThat = $(this),
                    _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                post.field.pid = 0;
                // 开始POST提交数据
                $.post(_pageUrl,
                    post.field, function (res) {
                        if (res.code === 200) {
                            table.reloadData('lay-tableGroup');
                            table.reloadData('lay-tableList');
                            // 关闭当前窗口
                            layer.msg(res.msg);
                            layer.close(colletction.index);
                            pageThat.attr("disabled", true);
                        }
                        else {
                            layui.show.error(res.msg);
                        }

                    }, 'json');

                return false;
            })
        }
    });
</script>