Calculation/app/view/shares/import_excel_modal.ejs

<!--依赖xlsx/jQuery-->
<!--导入清单Excel-->
<div class="modal fade" id="import-excel" data-backdrop="static" enctype="multipart/form-data">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">导入</h5>
            </div>
            <div class="modal-body">
                <p id="import-template">请上传符合 <b id="import-type-hint">0号台账</b> 格式的 .xls和.xlsx 文件，<a id="download-template">下载示例</a>。</p>
                <div class="form-group">
                    <label for="exampleFormControlFile1">选择文件</label><i class="fa fa-spinner fa-pulse fa-lg fa-fw text-primary" id="select-excel-loading" style="display: none;"></i>
                    <input type="file" class="form-control-file" id="import-excel-file" accept="*.xls">
                </div>
                <div id="excel-sheets" style="display: none;">
                    <h6>选择导入的工作表</h6>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <div>
                    <div class="custom-control custom-checkbox custom-control-inline" id="filter-excel">
                        <input type="checkbox" class="custom-control-input" name="customRadioInline1" id="filter-qty-price" checked="">
                        <label class="custom-control-label" for="filter-qty-price">过滤清单数量和单价为0项</label>
                    </div>
                </div>
                <div>
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-sm" id="import-excel-ok">确认上传</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const importExcel = (function () {
        const uploadType = {
            file: 1,
            data: 2
        }
        let callback, u_type;
        // 选择excel文件后，加载全部sheet
        $('#import-excel-file').change(function () {
            if (this.files.length === 0) {
                $('#excel-sheets').html('').hide();
                return;
            }
            $('#excel-sheets').hide();
            try {
                $('#select-excel-loading').show();
                xlsxUtils.import(this.files[0], (excelData) => {
                    if (excelData.SheetNames.length > 0) {
                        const html = [];
                        html.push('<hr></hr>');
                        html.push('<h6>选择导入的工作表</h6>');
                        for (const iName in excelData.SheetNames) {
                            const name = excelData.SheetNames[iName];
                            html.push('<div class="card p-2 mb-2">');
                            html.push('<div class="form-check">');
                            html.push('<input class="form-check-input" type="radio" name="sheetName" id="excel-sheet' + iName + '"', (iName == 0 ? ' checked=""' : ''), ' value="' + name + '"',  '>');
                            html.push('<label class="form-check-label" for="excel-sheet' + iName + '">', name, '</label>');
                            html.push('</div>');
                            html.push('</div>');
                        }
                        $('#excel-sheets').html(html.join('')).show();
                        $('.mb-2.p-2').mouseenter(function () {
                            $(this).addClass('border-primary');
                        });
                        $('.mb-2.p-2').mouseleave(function () {
                            $(this).removeClass('border-primary');
                        })
                    } else {
                        toastr.info('选择的Excel无有效数据，请重新选择');
                        $('#excel-sheets').hide();
                    }
                    $('#select-excel-loading').hide();
                });
            } catch(err) {
                console.log(err);
                $('#select-excel-loading').hide();
                toastr.error('加载excel异常，请刷新当前页面');
                $('#excel-sheets').hide();
            }
        });
        // 清除上一次数据
        $('#import-excel').bind('hidden.bs.modal', function () {
            $('#import-excel-file').val('');
            $('#excel-sheets').html('');
        });

        // 上传excel内容，并导入
        $('#import-excel-ok').click(function () {
            const sheetName = $('input[name=sheetName]:checked').val();
            if (sheetName) {
                if (u_type === uploadType.file) {
                    if (callback) callback($('#import-excel-file')[0], sheetName);
                } else if (u_type === uploadType.data) {
                    const sheet = {
                        rows: xlsxUtils.getSheetByName(sheetName, {header: 1}),
                        merge: xlsxUtils._wb.Sheets[sheetName]["!merges"]
                    };
                    if (callback) callback(sheet, $('#filter-qty-price')[0].checked);
                }
                $('#import-excel').modal('hide');
            }
        });
        const doImport = function (setting) {
            if (setting.template) {
                $('#import-template').show();
                $('#import-type-hint').html(setting.template.hint);
                $('#download-template').attr('href', setting.template.url);
            } else {
                $('#import-template').hide();
            }
            if (setting.filter) {
                $('#filter-excel').show();
            } else {
                $('#filter-excel').hide();
            }
            $('#import-excel').modal('show');
            callback = setting.callback;
            u_type = setting.u_type ? setting.u_type : uploadType.data;
        }
        return { doImport, uploadType };
    })();
</script>