301 lines
12 KiB
HTML
301 lines
12 KiB
HTML
<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">上传Excel文件</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">
|
|
<input type="file" name="excel_file" class="form-control" id="inputFile" hidden accept=".xlsx">
|
|
<label class="btn btn-outline-primary" for="inputFile">选择文件</label>
|
|
<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-primary" id="uploadBtn">上传Excel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div id="pagination">
|
|
<span id="totalData" class="mx-2"></span>
|
|
<span id="pageInfo" class="mx-2"></span>
|
|
<button id="prevPage" class="btn btn-secondary">上一页</button>
|
|
<button id="nextPage" class="btn btn-secondary">下一页</button>
|
|
</div>
|
|
<div id="actions">
|
|
<button id="saveButton" type="button" class="btn btn-primary" data-bs-dismiss="modal">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
// 当模态框打开时清空文件输入和文件名显示
|
|
$('#uploadModal').on('show.bs.modal', function () {
|
|
$('#inputFile').val(''); // 清空文件输入
|
|
$('#file-chosen').text('未选择文件'); // 重置文件名显示
|
|
});
|
|
|
|
// 当选择文件变化时，更新文件名显示
|
|
$('#inputFile').on('change', function () {
|
|
var fileName = $(this).val().split('\\').pop();
|
|
$('#file-chosen').text(fileName || '未选择文件');
|
|
});
|
|
|
|
// 每页显示的行数
|
|
var rowsPerPage = 10;
|
|
var currentPage = 1;
|
|
var tableData = [];
|
|
|
|
// 处理上传按钮的点击事件
|
|
$('#uploadBtn').on('click', function () {
|
|
var formData = new FormData($('#upload-form')[0]);
|
|
if ($('#inputFile').get(0).files.length === 0) {
|
|
alert("没有文件选中");
|
|
return;
|
|
}
|
|
$.ajax({
|
|
url: '{{ parse_excel_url }}',
|
|
type: 'POST',
|
|
data: formData,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (response) {
|
|
// 隐藏上传模态框
|
|
$('#uploadModal').modal('hide');
|
|
|
|
// 获取表头和表体的jQuery对象
|
|
var tableHead = $('#form-input-table thead');
|
|
var tableBody = $('#form-input-table tbody');
|
|
|
|
// 清空现有的表头和表体内容
|
|
tableHead.empty();
|
|
tableBody.empty();
|
|
|
|
// 从Django模板上下文传递配置到JavaScript
|
|
var upload_excel_preview_config = {{ upload_excel_preview_config|safe }};
|
|
|
|
// 使用从服务器返回的数据来构造表头
|
|
var headerRow = $('<tr>'); // 创建表头行
|
|
headerRow.append($('<th>').text('序号')); // 添加序号标题
|
|
$.each(upload_excel_preview_config.columns, function (index, column) {
|
|
headerRow.append($('<th>').text(column.header)); // 添加其他标题列，设置宽度
|
|
});
|
|
tableHead.append(headerRow); // 将表头行添加到表头中
|
|
|
|
// 存储数据以进行分页
|
|
tableData = response;
|
|
|
|
// 初始化分页信息
|
|
currentPage = 1;
|
|
updateTable();
|
|
|
|
// 显示数据预览模态框
|
|
$('#excelPreviewModal').modal('show');
|
|
},
|
|
error: function (xhr, status, error) {
|
|
// 上传失败的回调函数
|
|
// 错误处理...
|
|
}
|
|
});
|
|
});
|
|
|
|
// 更新表格内容，处理分页按钮的点击事件
|
|
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);
|
|
});
|
|
} else if (cell.type === 'date') {
|
|
// 创建日期选择框
|
|
cellElement = $('<input>').attr({
|
|
style: "width: " + cell.width,
|
|
type: 'date',
|
|
class: 'form-control',
|
|
id: key,
|
|
name: key,
|
|
value: cellValue,
|
|
});
|
|
} else if (cell.type === 'month') {
|
|
// 创建月份选择框
|
|
cellElement = $('<input>').attr({
|
|
style: "width: " + cell.width,
|
|
type: 'month',
|
|
class: 'form-control',
|
|
id: key,
|
|
name: key,
|
|
value: cellValue,
|
|
});
|
|
} else if (cell.type === 'number') {
|
|
// 创建数字输入框
|
|
cellElement = $('<input>').attr({
|
|
style: "width: " + cell.width,
|
|
type: 'number',
|
|
class: 'form-control',
|
|
id: key,
|
|
name: key,
|
|
value: cellValue,
|
|
});
|
|
}
|
|
|
|
// 将输入框或下拉菜单添加到单元格中
|
|
var td = $('<td>').append(cellElement);
|
|
row.append(td);
|
|
|
|
cellIndex++; // 增加列索引
|
|
});
|
|
|
|
tableBody.append(row); // 将新的行元素添加到表体中
|
|
});
|
|
|
|
// 初始化// 更新数据总数
|
|
$('#totalData').text('数据总数: ' + tableData.length);
|
|
// 更新分页信息
|
|
$('#pageInfo').text('第 ' + currentPage + ' 页, 共 ' + Math.ceil(tableData.length / rowsPerPage) + ' 页');
|
|
}
|
|
|
|
$('#prevPage').on('click', function () {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
updateTable();
|
|
}
|
|
});
|
|
|
|
$('#nextPage').on('click', function () {
|
|
if (currentPage < Math.ceil(tableData.length / rowsPerPage)) {
|
|
currentPage++;
|
|
updateTable();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// 从Django模板获取model_info和save_data_url
|
|
var modelInfo = JSON.parse('{{ model_info|safe }}');
|
|
var saveDataUrl = '{{ save_data_url }}';
|
|
|
|
$(document).ready(function() {
|
|
$('#saveButton').on('click', function() {
|
|
var tableData = [];
|
|
|
|
// 遍历表格每一行
|
|
$('#excelPreviewModal table tbody tr').each(function() {
|
|
var rowData = {};
|
|
|
|
// 遍历当前行的每个单元格
|
|
$(this).find('td').each(function() {
|
|
var input = $(this).find('input');
|
|
var select = $(this).find('select');
|
|
// 检查单元格内是否有 input 或 select 元素，并使用它们的 name 属性作为键
|
|
if (input.length) {
|
|
var inputName = input.attr('name');
|
|
rowData[inputName] = input.val();
|
|
} else if (select.length) {
|
|
var selectName = select.attr('name');
|
|
rowData[selectName] = select.val();
|
|
}
|
|
});
|
|
|
|
tableData.push(rowData);
|
|
});
|
|
|
|
// 构建发送到后端的数据对象
|
|
var postData = {
|
|
app_label: modelInfo.app_label,
|
|
model_name: modelInfo.model_name,
|
|
unique_together_fields: modelInfo.unique_together_fields,
|
|
table_data: tableData
|
|
};
|
|
|
|
// 发送AJAX请求到后端保存数据
|
|
$.ajax({
|
|
url: saveDataUrl, // 使用从Django模板中获取的URL
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(postData),
|
|
success: function(response) {
|
|
console.log('数据保存成功', response);
|
|
// 处理成功响应
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('保存数据时出错', error);
|
|
// 处理错误响应
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script> |