148 lines
6.8 KiB
HTML
148 lines
6.8 KiB
HTML
{% load static %}
|
|
|
|
<div id="addModifyModal" 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"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="formModalForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="operationType" name="operation_type">
|
|
<input type="hidden" id="{{ list_key }}" name="{{ list_key }}">
|
|
|
|
{% for field, config in form_fields_config.fields.items %}
|
|
{% if forloop.first or forloop.counter|add:"-1"|divisibleby:"3" %}
|
|
<div class="row mb-3">
|
|
{% endif %}
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="form-label" for="{{ field }}">{{ config.label }}</label>
|
|
{% if config.type == 'text' %}
|
|
<input type="text" class="form-control" id="{{ config.id }}" name="{{ field }}">
|
|
{% elif config.type == 'select' %}
|
|
<select class="form-control" id="{{ config.id }}" name="{{ field }}">
|
|
{% for option in config.options %}
|
|
<option value="{{ option }}">{{ option }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% elif config.type == 'date' %}
|
|
<input type="date" class="form-control" id="{{ config.id }}" name="{{ field }}">
|
|
{% elif config.type == 'textarea' %}
|
|
<textarea class="form-control" id="{{ config.id }}" name="{{ field }}"></textarea>
|
|
{% elif config.type == 'month' %}
|
|
<input type="month" class="form-control" id="{{ config.id }}" name="{{ field }}">
|
|
{% elif config.type == 'number' %}
|
|
<input type="number" class="form-control" id="{{ config.id }}" name="{{ field }}">
|
|
{% elif config.type == 'email' %}
|
|
<input type="email" class="form-control" id="{{ config.id }}" name="{{ field }}">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if forloop.counter|divisibleby:"3" or forloop.last %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" id="submitForm">提交</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openFormModal(operationType, record = null) {
|
|
$('#operationType').val(operationType);
|
|
if (operationType === 'add') {
|
|
$('#formModalTitle').text('添加');
|
|
$('#formModalForm').trigger('reset');
|
|
debugger;
|
|
$('#{{ list_key }}').val('');
|
|
} else if (operationType === 'modify' && record) {
|
|
$('#formModalTitle').text('修改');
|
|
$('#{{ list_key }}').val(record.{{ list_key }});
|
|
{% for field, config in form_fields_config.fields.items %}
|
|
var fieldType = '{{ config.type }}';
|
|
$('#{{ config.id }}').val(record['{{ field }}']);
|
|
if (fieldType === 'date') {
|
|
var recordBirthday = record['{{ field }}'];
|
|
var dateParts = recordBirthday.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);
|
|
if (dateParts) {
|
|
var year = dateParts[1];
|
|
var month = dateParts[2].padStart(2, '0'); // 确保两位数格式
|
|
var day = dateParts[3].padStart(2, '0'); // 确保两位数格式
|
|
var formattedDate = `${year}-${month}-${day}`;
|
|
$('#{{ config.id }}').val(formattedDate);
|
|
}
|
|
}
|
|
if (fieldType === 'select') {
|
|
$('#{{ config.id }}').val(record['{{ field }}']);
|
|
$('#{{ config.id }} option').each(function () {
|
|
if ($(this).val() === record['{{ field }}']) {
|
|
$(this).prop('selected', true);
|
|
}
|
|
});
|
|
}
|
|
{% endfor %}
|
|
}
|
|
$('#addModifyModal').modal('show');
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('.edit-btn').on('click', function () {
|
|
const record = {
|
|
"{{ list_key }}": $(this).data("target_id")
|
|
};
|
|
{% for field in form_fields_config.fields.keys %}
|
|
record['{{ field }}'] = $(this).data('{{ field }}');
|
|
{% endfor %}
|
|
openFormModal('modify', record);
|
|
});
|
|
|
|
var modifyUrl = "{{ modify_records_url }}";
|
|
var addUrl = "{{ add_records_url }}";
|
|
|
|
|
|
$('#submitForm').on('click', function () {
|
|
var operationType = $('#operationType').val();
|
|
var formData = $('#formModalForm').serialize();
|
|
var url = operationType === 'modify' ? modifyUrl : addUrl;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: url,
|
|
data: formData,
|
|
success: function (response) {
|
|
$('#addModifyModal').modal('hide');
|
|
if (operationType === 'modify') {
|
|
alert('修改成功');
|
|
} else {
|
|
alert('添加成功');
|
|
}
|
|
location.reload(); // 刷新页面
|
|
},
|
|
error: function (response) {
|
|
alert('操作失败,请重试。');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 当模态框关闭时,重置表单
|
|
$('#addModifyModal').on('hidden.bs.modal', function () {
|
|
$('#formModalForm').trigger('reset');
|
|
$('#formModalTitle').text('');
|
|
$('#target_id').val('');
|
|
$('#operationType').val('');
|
|
{% for field in form_fields_config.fields.keys %}
|
|
$('#{{ field }}').val('');
|
|
{% endfor %}
|
|
});
|
|
});
|
|
</script>
|