import_excel_modal.ejs 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!--导入清单Excel-->
  2. <div class="modal fade" id="import-excel" data-backdrop="static" enctype="multipart/form-data">
  3. <div class="modal-dialog" role="document">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <h5 class="modal-title">导入</h5>
  7. </div>
  8. <div class="modal-body">
  9. <p id="import-template">请上传符合 <b id="import-type-hint">0号台帐</b> 格式的 .xls和.xlsx 文件,<a id="download-template" href="/tender/<%- ctx.tender.id %>/ledger/download/导入分项清单EXCEL格式.xls">下载示例</a>。</p>
  10. <div class="form-group">
  11. <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>
  12. <input type="file" class="form-control-file" id="import-excel-file" accept="*.xls">
  13. </div>
  14. <div id="excel-sheets" style="display: none;">
  15. <hr></hr>
  16. <h6>选择导入的工作表</h6>
  17. </div>
  18. </div>
  19. <div class="modal-footer">
  20. <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
  21. <button type="button" class="btn btn-primary btn-sm" id="import-excel-ok">确认上传</button>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <script>
  27. const importExcel = (function () {
  28. // 选择excel文件后,加载全部sheet
  29. $('#import-excel-file').change(function () {
  30. if (this.files.length === 0) {
  31. $('#excel-sheets').html('').hide();
  32. return;
  33. }
  34. $('#excel-sheets').hide();
  35. try {
  36. $('#select-excel-loading').show();
  37. xlsxUtils.import(this.files[0], (excelData) => {
  38. if (excelData.SheetNames.length > 0) {
  39. const html = [];
  40. html.push('<hr></hr>');
  41. html.push('<h6>选择导入的工作表</h6>');
  42. for (const iName in excelData.SheetNames) {
  43. const name = excelData.SheetNames[iName];
  44. html.push('<div class="card p-2 mb-2">');
  45. html.push('<div class="form-check">');
  46. html.push('<input class="form-check-input" type="radio" name="sheetName" id="excel-sheet' + iName + '"', (iName == 0 ? ' checked=""' : ''), ' value="' + name + '"', '>');
  47. html.push('<label class="form-check-label" for="excel-sheet' + iName + '">', name, '</label>');
  48. html.push('</div>');
  49. html.push('</div>');
  50. }
  51. $('#excel-sheets').html(html.join('')).show();
  52. $('.mb-2.p-2').mouseenter(function () {
  53. $(this).addClass('border-primary');
  54. });
  55. $('.mb-2.p-2').mouseleave(function () {
  56. $(this).removeClass('border-primary');
  57. })
  58. } else {
  59. toastr.info('选择的Excel无有效数据,请重新选择');
  60. $('#excel-sheets').hide();
  61. }
  62. $('#select-excel-loading').hide();
  63. });
  64. } catch(err) {
  65. $('#select-excel-loading').hide();
  66. toastr.error('加载excel异常,请刷新当前页面');
  67. $('#excel-sheets').hide();
  68. }
  69. });
  70. // 清除上一次数据
  71. $('#upload-ledger').bind('hidden.bs.modal', function () {
  72. $('#import-excel-file').val('');
  73. $('#excel-sheets').html('');
  74. });
  75. const doImport = function (setting) {
  76. // 上传excel内容,并导入
  77. $('#import-excel-ok').click(function () {
  78. const sheetName = $('input[name=sheetName]:checked').val();
  79. if (sheetName) {
  80. const sheet = {
  81. rows: xlsxUtils.getSheetByName(sheetName, {header: 1}),
  82. merge: xlsxUtils._wb.Sheets[sheetName]["!merges"]
  83. };
  84. setting.callback(sheet);
  85. $('#import-excel').modal('hide');
  86. }
  87. });
  88. if (setting.template) {
  89. $('#import-template').show();
  90. $('#import-type-hint').html(setting.template.hint);
  91. $('#download-template').attr('href', setting.template.url);
  92. } else {
  93. $('#import-template').hide();
  94. }
  95. $('#import-excel').modal('show');
  96. }
  97. return { doImport };
  98. })();
  99. </script>