2024-06-01 00:57:14 +08:00
|
|
|
<div id="uploadModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
|
|
|
|
<div class="modal-dialog" role="document">
|
|
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
|
|
<h5 class="modal-title" id="uploadModalLabel">上传文件</h5>
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<!-- 上传表单 -->
|
|
|
|
<form id="upload-form" enctype="multipart/form-data">
|
2024-06-01 05:05:29 +08:00
|
|
|
<input type="file" name="excel_file" class="form-control" id="inputFile" hidden accept=".xlsx">
|
|
|
|
<label class="btn btn-outline-primary" for="inputFile">选择文件</label>
|
2024-06-01 00:57:14 +08:00
|
|
|
<span id="file-chosen" style="font-size: 12px; margin-left: 10px;">未选择文件</span>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<a href="{{ download_template_url }}" class="btn btn-secondary">下载模板</a>
|
|
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
|
|
|
|
<button type="button" class="btn btn-primary" id="uploadBtn">上传</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2024-06-01 05:05:29 +08:00
|
|
|
<div id="excelPreviewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="excelPreviewModalTitle" aria-hidden="true">
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
|
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
|
|
<h5 class="modal-title" id="excelPreviewModalTitle">上传文件预览</h5>
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<div style="overflow-x: auto;">
|
|
|
|
<table id="form-input-table" class="table table-striped table-bordered nowrap">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>序号</th>
|
|
|
|
<!-- ... 其他标题列 ... -->
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<!-- 表格内容将通过JavaScript动态填充 -->
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
2024-06-01 06:30:19 +08:00
|
|
|
<div id="pagination" class="mt-3">
|
|
|
|
<button id="prevPage" class="btn btn-secondary">上一页</button>
|
|
|
|
<span id="pageInfo" class="mx-2"></span>
|
|
|
|
<button id="nextPage" class="btn btn-secondary">下一页</button>
|
|
|
|
</div>
|
2024-06-01 05:05:29 +08:00
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2024-06-01 00:57:14 +08:00
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
2024-06-01 05:05:29 +08:00
|
|
|
// 当模态框打开时清空文件输入和文件名显示
|
|
|
|
$('#uploadModal').on('show.bs.modal', function() {
|
|
|
|
$('#inputFile').val(''); // 清空文件输入
|
|
|
|
$('#file-chosen').text('未选择文件'); // 重置文件名显示
|
|
|
|
});
|
|
|
|
|
2024-06-01 00:57:14 +08:00
|
|
|
// 当选择文件变化时,更新文件名显示
|
2024-06-01 05:05:29 +08:00
|
|
|
$('#inputFile').on('change', function() {
|
2024-06-01 00:57:14 +08:00
|
|
|
var fileName = $(this).val().split('\\').pop();
|
|
|
|
$('#file-chosen').text(fileName || '未选择文件');
|
|
|
|
});
|
|
|
|
|
2024-06-01 06:30:19 +08:00
|
|
|
// 每页显示的行数
|
|
|
|
var rowsPerPage = 10;
|
|
|
|
var currentPage = 1;
|
|
|
|
var tableData = [];
|
|
|
|
|
2024-06-01 00:57:14 +08:00
|
|
|
// 处理上传按钮的点击事件
|
|
|
|
$('#uploadBtn').on('click', function() {
|
|
|
|
var formData = new FormData($('#upload-form')[0]);
|
2024-06-01 05:05:29 +08:00
|
|
|
if ($('#inputFile').get(0).files.length === 0) {
|
|
|
|
alert("没有文件选中");
|
|
|
|
return;
|
|
|
|
}
|
2024-06-01 00:57:14 +08:00
|
|
|
$.ajax({
|
2024-06-01 05:05:29 +08:00
|
|
|
url: '{{ parse_excel_url }}',
|
2024-06-01 00:57:14 +08:00
|
|
|
type: 'POST',
|
|
|
|
data: formData,
|
|
|
|
contentType: false,
|
|
|
|
processData: false,
|
|
|
|
success: function(response) {
|
2024-06-01 05:05:29 +08:00
|
|
|
// 隐藏上传模态框
|
2024-06-01 00:57:14 +08:00
|
|
|
$('#uploadModal').modal('hide');
|
2024-06-01 05:05:29 +08:00
|
|
|
|
|
|
|
// 获取表头和表体的jQuery对象
|
|
|
|
var tableHead = $('#form-input-table thead');
|
|
|
|
var tableBody = $('#form-input-table tbody');
|
|
|
|
|
|
|
|
// 清空现有的表头和表体内容
|
|
|
|
tableHead.empty();
|
|
|
|
tableBody.empty();
|
|
|
|
|
2024-06-01 06:30:19 +08:00
|
|
|
// 从Django模板上下文传递配置到JavaScript
|
|
|
|
var upload_excel_preview_config = {{ upload_excel_preview_config|safe }};
|
|
|
|
|
|
|
|
// 使用从服务器返回的数据来构造表头
|
2024-06-01 05:05:29 +08:00
|
|
|
var headerRow = $('<tr>'); // 创建表头行
|
|
|
|
headerRow.append($('<th>').text('序号')); // 添加序号标题
|
2024-06-01 06:30:19 +08:00
|
|
|
$.each(upload_excel_preview_config.columns, function(index, column) {
|
|
|
|
headerRow.append($('<th>').text(column.header)); // 添加其他标题列,设置宽度
|
2024-06-01 05:05:29 +08:00
|
|
|
});
|
|
|
|
tableHead.append(headerRow); // 将表头行添加到表头中
|
|
|
|
|
2024-06-01 06:37:31 +08:00
|
|
|
// 存储数据以进行分页
|
|
|
|
tableData = response;
|
2024-06-01 06:30:19 +08:00
|
|
|
|
2024-06-01 06:37:31 +08:00
|
|
|
// 初始化分页信息
|
|
|
|
currentPage = 1;
|
|
|
|
updateTable();
|
2024-06-01 05:05:29 +08:00
|
|
|
|
|
|
|
// 显示数据预览模态框
|
|
|
|
$('#excelPreviewModal').modal('show');
|
2024-06-01 00:57:14 +08:00
|
|
|
},
|
|
|
|
error: function(xhr, status, error) {
|
|
|
|
// 上传失败的回调函数
|
|
|
|
// 错误处理...
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2024-06-01 06:37:31 +08:00
|
|
|
|
2024-06-01 11:09:36 +08:00
|
|
|
// 更新表格内容,处理分页按钮的点击事件
|
|
|
|
function updateTable() {
|
|
|
|
var tableBody = $('#form-input-table tbody');
|
|
|
|
tableBody.empty(); // 清空表体内容
|
|
|
|
|
|
|
|
var upload_excel_preview_config = {{ upload_excel_preview_config|safe }};
|
|
|
|
|
|
|
|
var startIndex = (currentPage - 1) * rowsPerPage;
|
|
|
|
var endIndex = startIndex + rowsPerPage;
|
|
|
|
var pageData = tableData.slice(startIndex, endIndex);
|
|
|
|
|
|
|
|
// 遍历分页数据行
|
|
|
|
$.each(pageData, function(index, rowData) {
|
|
|
|
var row = $('<tr>'); // 创建新的行元素
|
|
|
|
row.append($('<td>').text(startIndex + index + 1)); // 添加序号列
|
|
|
|
|
|
|
|
var cellIndex = 0; // 初始化列索引
|
|
|
|
|
|
|
|
// 为每个单元格创建对应的输入框或下拉菜单
|
|
|
|
$.each(upload_excel_preview_config.rows, function(key, cell) {
|
|
|
|
var cellElement;
|
|
|
|
var cellValue = rowData[cellIndex] || ''; // 通过列索引获取值
|
|
|
|
|
|
|
|
if (cell.type === 'text') {
|
|
|
|
// 创建输入框
|
|
|
|
cellElement = $('<input>').attr({
|
|
|
|
style: "width: " + cell.width,
|
|
|
|
type: 'text',
|
|
|
|
class: 'form-control',
|
|
|
|
id: key,
|
|
|
|
name: key,
|
|
|
|
value: cellValue,
|
|
|
|
});
|
|
|
|
} else if(cell.type === 'select') {
|
|
|
|
// 创建下拉菜单
|
|
|
|
cellElement = $('<select>').attr({
|
|
|
|
style: "width: " + cell.width,
|
|
|
|
class: 'form-control',
|
|
|
|
id: key,
|
|
|
|
name: key,
|
|
|
|
});
|
|
|
|
// 添加选项
|
|
|
|
$.each(cell.options, function(optionIndex, optionValue) {
|
|
|
|
var optionElement = $('<option>').val(optionValue).text(optionValue);
|
|
|
|
if(cellValue === optionValue) {
|
|
|
|
optionElement.attr('selected', 'selected');
|
|
|
|
}
|
|
|
|
cellElement.append(optionElement);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 将输入框或下拉菜单添加到单元格中
|
|
|
|
var td = $('<td>').append(cellElement);
|
|
|
|
row.append(td);
|
|
|
|
|
|
|
|
cellIndex++; // 增加列索引
|
2024-06-01 06:37:31 +08:00
|
|
|
});
|
|
|
|
|
2024-06-01 11:09:36 +08:00
|
|
|
tableBody.append(row); // 将新的行元素添加到表体中
|
|
|
|
});
|
|
|
|
|
|
|
|
// 更新分页信息
|
|
|
|
$('#pageInfo').text('第 ' + currentPage + ' 页, 共 ' + Math.ceil(tableData.length / rowsPerPage) + ' 页');
|
|
|
|
}
|
2024-06-01 06:37:31 +08:00
|
|
|
|
|
|
|
$('#prevPage').on('click', function() {
|
|
|
|
if (currentPage > 1) {
|
|
|
|
currentPage--;
|
|
|
|
updateTable();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#nextPage').on('click', function() {
|
|
|
|
if (currentPage < Math.ceil(tableData.length / rowsPerPage)) {
|
|
|
|
currentPage++;
|
|
|
|
updateTable();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-06-01 00:57:14 +08:00
|
|
|
});
|
|
|
|
</script>
|