534 lines
32 KiB
HTML
534 lines
32 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static tags %}
|
|
|
|
{% block content %}
|
|
|
|
{% block table_list_content %}
|
|
<section class="pcoded-main-container">
|
|
<div class="pcoded-wrapper">
|
|
<div class="pcoded-content">
|
|
<div class="pcoded-inner-content">
|
|
<div class="main-body">
|
|
<div class="page-wrapper">
|
|
{% include 'breadcrumb.html' %}
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<form action="{{ form_action_url }}" method="get">
|
|
{% csrf_token %}
|
|
<div class="row">
|
|
{% for filter in filters %}
|
|
{% if filter.type == 'text' %}
|
|
<div class="col">
|
|
<label for="{{ filter.id }}"
|
|
class="form-label">{{ filter.label }}</label>
|
|
<input type="text" class="form-control"
|
|
id="{{ filter.id }}"
|
|
name="{{ filter.name }}"
|
|
placeholder="{{ filter.placeholder }}"
|
|
value="{{ request.GET|get_value:filter.name|default:'' }}">
|
|
</div>
|
|
{% elif filter.type == 'select' %}
|
|
<div class="col">
|
|
<label class="form-label"
|
|
for="{{ filter.id }}">{{ filter.label }}</label>
|
|
<select class="form-control"
|
|
id="{{ filter.id }}"
|
|
name="{{ filter.name }}">
|
|
<option value="">请选择</option>
|
|
{% for option in filter.options %}
|
|
<option value="{{ option.value }}"
|
|
{% if request.GET|get_value:filter.name == option.value %}selected{% endif %}>
|
|
{{ option.display }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% elif filter.type == 'year' %}
|
|
<div class="col">
|
|
<label for="{{ filter.id }}"
|
|
class="form-label">{{ filter.label }}</label>
|
|
<input type="text" class="form-control"
|
|
id="{{ filter.id }}"
|
|
name="{{ filter.name }}"
|
|
>
|
|
</div>
|
|
{% elif filter.type == 'date' %}
|
|
<div class="col">
|
|
<label for="{{ filter.id }}"
|
|
class="form-label">{{ filter.label }}</label>
|
|
<input type="date" class="form-control"
|
|
id="{{ filter.id }}"
|
|
name="{{ filter.name }}"
|
|
value="{{ request.GET|get_value:filter.name }}">
|
|
</div>
|
|
{% elif filter.type == 'month' %}
|
|
<div class="col">
|
|
<label for="{{ filter.id }}"
|
|
class="form-label">{{ filter.label }}</label>
|
|
<input type="month" class="form-control"
|
|
id="{{ filter.id }}"
|
|
name="{{ filter.name }}"
|
|
value="{{ request.GET|get_value:filter.name }}">
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if filters %}
|
|
<div class="col mt-4 d-flex align-items-center">
|
|
<button type="submit" class="btn btn-primary">
|
|
查询
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-4 mt-4 text-end">
|
|
{% render_button 'modify_records_button' %}
|
|
{% render_button 'add_button' %}
|
|
{% render_button 'report_excel_button' %}
|
|
{% render_button 'import_excel_button' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% block fields_list_content %}
|
|
<div class="row mb-3">
|
|
<div class="col-sm-12">
|
|
<div class="card">
|
|
<div class="card-body table-border-style">
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
{% get_verbose_field_names_from_model model_config table_exclude_field_name as columns %}
|
|
<thead>
|
|
<tr>
|
|
{% for column in columns %}
|
|
<th class="text-center">{{ column }}</th>
|
|
{% endfor %}
|
|
<th class="text-center">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="result" style="color: white;">
|
|
{% for item in items %}
|
|
<tr>
|
|
{% for field in item|get_fields:table_exclude_field_name %}
|
|
{% if '（元）' in field.verbose_name %}
|
|
<td class="text-center">{{ field.value|default_if_none:'-'|thousands_separator }}</td>
|
|
{% elif field.verbose_name == '年月' %}
|
|
<td class="text-center">{{ field.value|default_if_none:'-'|date:"Y-m" }}</td>
|
|
{% elif field.verbose_name == '税率' %}
|
|
<td class="text-center">{{ field.value|default_if_none:'-'|format_tax_rate }}</td>
|
|
{% elif field.verbose_name == '密码' %}
|
|
<td class="text-center">{{ field.value|default_if_none:'-'|mask_password }}</td>
|
|
{% else %}
|
|
<td class="text-center">{{ field.value|default_if_none:'-' }}</td>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<td class="text-center">
|
|
<a href="#"
|
|
id="editBtn"
|
|
class="edit-btn"
|
|
data-id="{{ item|get_pk_value }}"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#addEditModal">编辑</a>
|
|
<a href="#"
|
|
id="deleteBtn"
|
|
class="delete-btn"
|
|
style="color: red"
|
|
data-id="{{ item|get_pk_value }}"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#deleteModal">删除</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td class="text-center"
|
|
colspan="{{ table_columns|length }}">暂无数据
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% include 'pagination_ps.html' with page_obj=items query_params=query_params %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
<div id="addEditModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
|
|
aria-labelledby="formModalCenterTitle" 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="formModalTitle">{{ form_title }}</h5>
|
|
<a href="" id="hiddenActionLink" style="display: none;"></a>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteModalLabel">提示</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<p>此操作会删除当前数据，是否继续？</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<form id="upload-form" method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<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">
|
|
<input id="inputFile" type="file" name="excel_file" class="form-control" hidden accept=".xlsx">
|
|
<label class="btn btn-outline-primary" for="inputFile">选择文件</label>
|
|
<span id="file-chosen" style="font-size: 12px; margin-left: 10px;">未选择文件</span>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="downloadExcelBtn" type="button" class="btn btn-secondary" onclick="#!">
|
|
下载填报模板
|
|
</button>
|
|
<button id="uploadBtn" type="button" class="btn btn-primary">上传Excel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="exportModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<form id="export-form" method="get" action="{{ export_url }}">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exportModalLabel">导出数据</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" name="model_config" value="{{ model_config }}">
|
|
{% if include %}
|
|
{% for filter in filters %}
|
|
{% if forloop.counter0 in include %}
|
|
<div class="mb-3">
|
|
<label for="{{ filter.id }}" class="form-label">{{ filter.label }}</label>
|
|
{% if filter.type == 'select' %}
|
|
<select class="form-control" id="{{ filter.id }}" name="{{ filter.name }}">
|
|
<option value="">请选择</option>
|
|
{% for option in filter.options %}
|
|
<option value="{{ option.value }}">{{ option.display }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% elif filter.type == 'date' or filter.type == 'month' %}
|
|
<input type="{{ filter.type }}" class="form-control" id="{{ filter.id }}"
|
|
name="{{ filter.name }}">
|
|
{% elif filter.type == 'year' %}
|
|
<input type="text" class="form-control" id="{{ filter.id }}_download"
|
|
name="{{ filter.name }}" placeholder="请选择">
|
|
{% else %}
|
|
<input type="text" class="form-control" id="{{ filter.id }}"
|
|
name="{{ filter.name }}">
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% elif exclude %}
|
|
<div>是否导出所有数据？</div>
|
|
{% else %}
|
|
{% if filters %}
|
|
{% for filter in filters %}
|
|
<div class="mb-3">
|
|
<label for="{{ filter.id }}" class="form-label">{{ filter.label }}</label>
|
|
{% if filter.type == 'select' %}
|
|
<select class="form-control" id="{{ filter.id }}" name="{{ filter.name }}">
|
|
<option value="">请选择</option>
|
|
{% for option in filter.options %}
|
|
<option value="{{ option.value }}">{{ option.display }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% elif filter.type == 'date' or filter.type == 'month' %}
|
|
<input type="{{ filter.type }}" class="form-control" id="{{ filter.id }}"
|
|
name="{{ filter.name }}">
|
|
{% elif filter.type == 'year' %}
|
|
<input type="text" class="form-control" id="{{ filter.id }}_download"
|
|
name="{{ filter.name }}" placeholder="请选择">
|
|
{% else %}
|
|
<input type="text" class="form-control" id="{{ filter.id }}"
|
|
name="{{ filter.name }}">
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div>是否导出所有数据？</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="submit" class="btn btn-primary">导出</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% include 'modify_record_modal.html' with modify_records_url=modify_records_url %}
|
|
|
|
{% block item_list_custom_content %}
|
|
{% endblock %}
|
|
|
|
<script>
|
|
const excel_upload_config = {{ excel_upload_config|safe }};
|
|
const add_url = "{{ add_url }}";
|
|
const modify_url = "{{ modify_url }}";
|
|
const deleteUrl = "{{ delete_url }}";
|
|
let save_url = null;
|
|
let targetIdToDelete = null;
|
|
var templateName = "{{ excel_upload_config.template_name }}";
|
|
var modelConfig = "{{ model_config }}";
|
|
var list_url = "{{ form_action_url }}"
|
|
|
|
$(document).ready(function () {
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
const csrftoken = getCookie('csrftoken');
|
|
|
|
// 处理添加按钮点击事件
|
|
$('#addItemBtn').click(function () {
|
|
$.ajax({
|
|
url: add_url,
|
|
type: 'get',
|
|
success: function (response) {
|
|
// 将新的表单 HTML 插入到模态框中
|
|
$('#addEditModal .modal-body').html(response.form_html);
|
|
// 动态设置模态框标题
|
|
$('#formModalTitle').text('新增');
|
|
// 动态设置表单提交URL
|
|
$('#addEditForm').attr('action', add_url);
|
|
$('#hiddenActionLink').attr('href', add_url);
|
|
// 显示模态框
|
|
$('#addEditModal').modal('show');
|
|
|
|
// 绑定表单提交事件
|
|
bindFormSubmit();
|
|
},
|
|
error: function () {
|
|
$('#addEditModal').modal('hide');
|
|
showAlert('danger', '获取表单请求出错');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 处理编辑按钮点击事件
|
|
$('.edit-btn').click(function () {
|
|
var itemId = $(this).data('id');
|
|
$.ajax({
|
|
url: modify_url,
|
|
type: 'get',
|
|
data: {id: itemId},
|
|
success: function (response) {
|
|
// 将表单 HTML 插入到模态框中
|
|
$('#addEditModal .modal-body').html(response.form_html);
|
|
$('#formModalTitle').text('编辑');
|
|
// 动态设置表单提交URL
|
|
$('#addEditForm').attr('action', modify_url);
|
|
$('#hiddenActionLink').attr('href', modify_url);
|
|
// 显示模态框
|
|
$('#addEditModal').modal('show');
|
|
|
|
// 触发自定义事件
|
|
$('#addEditModal').trigger('contentLoaded');
|
|
|
|
// 绑定表单提交事件
|
|
bindFormSubmit();
|
|
},
|
|
error: function () {
|
|
$('#addEditModal').modal('hide');
|
|
showAlert('danger', '获取表单请求出错');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 保存
|
|
function bindFormSubmit() {
|
|
$('#addEditForm').submit(function (e) {
|
|
e.preventDefault();
|
|
$.ajax({
|
|
url: $(this).attr('action'),
|
|
type: 'post',
|
|
data: $(this).serialize(),
|
|
success: function (response) {
|
|
// 关闭模态框并显示成功消息
|
|
$('#addEditModal').modal('hide');
|
|
showAlert('success', response.message);
|
|
location.reload();
|
|
},
|
|
error: function (xhr) {
|
|
// 处理表单错误并显示详细错误消息
|
|
var response = xhr.responseJSON;
|
|
if (response && response.errors) {
|
|
var errorMessages = Object.values(response.errors).flat().join('<br>');
|
|
showAlert('danger', errorMessages);
|
|
} else {
|
|
showAlert('danger', '保存失败');
|
|
}
|
|
var actionUrl = $('#hiddenActionLink').attr('href');
|
|
$('#addEditModal .modal-body').html(response.form_html);
|
|
$('#addEditForm').attr('action', actionUrl);
|
|
bindFormSubmit();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 删除和确认删除
|
|
$(document).on('click', '.delete-btn, #confirmDeleteBtn', function (event) {
|
|
if (event.target.id === 'deleteBtn') {
|
|
// 打开删除模态框
|
|
targetIdToDelete = $(this).data('id');
|
|
$('#deleteModal').modal('show');
|
|
} else if (event.target.id === 'confirmDeleteBtn') {
|
|
// 确认删除
|
|
if (targetIdToDelete !== null) {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: deleteUrl,
|
|
data: {
|
|
'id': targetIdToDelete,
|
|
'csrfmiddlewaretoken': csrftoken
|
|
},
|
|
success: function (response) {
|
|
showAlert('success', "删除成功");
|
|
location.reload();
|
|
},
|
|
error: function (response) {
|
|
showAlert('danger', "删除失败");
|
|
}
|
|
});
|
|
}
|
|
$('#deleteModal').modal('hide');
|
|
}
|
|
});
|
|
|
|
// 点击下载Excel模板按钮
|
|
$('#downloadExcelBtn').on('click', function () {
|
|
window.location.href = excel_upload_config.template_url;
|
|
});
|
|
|
|
// 当上传模态框显示时，清空文件输入框和文件名显示
|
|
$('#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 || '未选择文件');
|
|
});
|
|
|
|
// 处理上传按钮的点击事件
|
|
$('#uploadBtn').on('click', function () {
|
|
var inputFile = $('#inputFile').get(0).files[0];
|
|
if (!inputFile) {
|
|
showAlert('danger', '未选择文件');
|
|
$('#uploadModal').modal('show');
|
|
return;
|
|
}
|
|
|
|
var formData = new FormData();
|
|
formData.append('file', inputFile); // 将文件添加到 FormData 中
|
|
formData.append('template_name', templateName);
|
|
formData.append('excel_valid_model', modelConfig);
|
|
formData.append('list_url', list_url)
|
|
|
|
$.ajax({
|
|
url: '{{ excel_upload_config.parse_url }}',
|
|
type: 'POST',
|
|
data: formData,
|
|
headers: {'X-CSRFToken': csrftoken},
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (response) {
|
|
window.location.href = response.redirect_url;
|
|
},
|
|
error: function (xhr, status, error) {
|
|
var errorMsg = "解析Excel文件失败。";
|
|
if (xhr.responseJSON && xhr.responseJSON.error) {
|
|
errorMsg = xhr.responseJSON.error;
|
|
}
|
|
showAlert('danger', errorMsg);
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#year').datepicker({
|
|
format: "yyyy",
|
|
viewMode: "years",
|
|
minViewMode: "years",
|
|
autoclose: true
|
|
});
|
|
|
|
$('#year_download').datepicker({
|
|
format: "yyyy",
|
|
viewMode: "years",
|
|
minViewMode: "years",
|
|
autoclose: true
|
|
});
|
|
});
|
|
</script>
|
|
{% block js_content %}
|
|
{% endblock %}
|
|
|
|
|
|
{% endblock %}
|