245 lines
15 KiB
HTML
245 lines
15 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static tags %}
|
|
|
|
{% block 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="{% url 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 }}">
|
|
</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 == '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 %}
|
|
<div class="col mt-4 d-flex align-items-center">
|
|
<button type="submit" class="btn btn-primary">查询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- 筛选表单 结束 -->
|
|
</div>
|
|
<!-- 按钮组 开始 -->
|
|
<div class="col-md-4 mt-4 text-end">
|
|
{% show_modify_records_button model_config %}
|
|
<button id="addItemBtn" class="btn btn-outline-secondary"
|
|
data-bs-toggle="modal" data-bs-target="#addEditModal">添加
|
|
</button>
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal"
|
|
data-bs-target="#downloadModal">导出
|
|
</button>
|
|
<button class="btn btn-outline-primary" data-bs-toggle="modal"
|
|
data-bs-target="#uploadModal">上传Excel
|
|
</button>
|
|
</div>
|
|
<!-- 按钮组 结束 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 %}
|
|
<td class="text-center">{{ field.value }}</td>
|
|
{% endfor %}
|
|
<td class="text-center">
|
|
<a href="#" class="edit-btn"
|
|
data-id="{{ item|get_pk_value }}"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#addEditModal">编辑</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td class="text-center"
|
|
colspan="{{ table_columns|length }}">暂无数据
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<!-- 表格 结束 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include 'pagination_ps.html' with page_obj=items query_params=query_params %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<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>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'modify_record_modal.html' with modify_records_url=modify_records_url %}
|
|
{% include 'delete_modal.html' with delete_url=delete_url %}
|
|
{% include 'upload_excel_modal_v2.html' with excel_upload_config=excel_upload_config %}
|
|
|
|
<script>
|
|
const add_url = "{{ add_url }}";
|
|
const modify_url = "{{ modify_url }}";
|
|
|
|
$(document).ready(function () {
|
|
// 处理添加按钮点击事件
|
|
$('#addItemBtn').click(function () {
|
|
$.ajax({
|
|
url: add_url,
|
|
type: 'get',
|
|
success: function (response) {
|
|
// 将新的表单 HTML 插入到模态框中
|
|
$('#addEditModal .modal-body').html(response.form_html);
|
|
// 动态设置模态框标题
|
|
$('#formModalTitle').text('新增');
|
|
// 显示模态框
|
|
$('#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('编辑');
|
|
// 显示模态框
|
|
$('#addEditModal').modal('show');
|
|
|
|
// 绑定表单提交事件
|
|
bindFormSubmit();
|
|
},
|
|
error: function () {
|
|
$('#addEditModal').modal('hide');
|
|
showAlert('danger', '获取表单请求出错');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 保存
|
|
function bindFormSubmit() {
|
|
$('#addEditForm').submit(function (e) {
|
|
e.preventDefault();
|
|
$.ajax({
|
|
url: modify_url, // 确保URL正确
|
|
type: 'post', // 使用 POST 请求来提交表单
|
|
data: $(this).serialize(),
|
|
success: function (response) {
|
|
// 关闭模态框并显示成功消息
|
|
$('#addEditModal').modal('hide');
|
|
showAlert('success', response.message);
|
|
// 你可以在这里刷新表格或更新页面内容
|
|
location.reload();
|
|
},
|
|
error: function (xhr) {
|
|
// 处理表单错误并显示错误消息
|
|
var response = xhr.responseJSON;
|
|
$('#addEditModal .modal-body').html(response.form_html);
|
|
bindFormSubmit();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|