199 lines
10 KiB
HTML
199 lines
10 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="{{ id_name }}" name="{{ id_name }}">
|
|
{% if table_columns|length <= 4 %}
|
|
<div class="row">
|
|
{% for item in table_columns %}
|
|
{% if item.is_add %}
|
|
<div class="col">
|
|
<div class="form-group">
|
|
<label class="form-label" for="{{ item.field }}">{{ item.label }}</label>
|
|
{% if item.type == 'text' %}
|
|
<input type="text" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'select' %}
|
|
<select class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% for option in item.options %}
|
|
<option value="{{ option }}">{{ option }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% elif item.type == 'date' %}
|
|
<input type="date" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'textarea' %}
|
|
<textarea class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}"></textarea>
|
|
{% elif item.type == 'month' %}
|
|
<input type="month" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'number' %}
|
|
<input type="number" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'email' %}
|
|
<input type="email" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{% for item in table_columns|slice:"1:" %}
|
|
{% if forloop.counter0|divisibleby:"3" %}
|
|
<div class="row mb-3">
|
|
{% endif %}
|
|
{% if item.is_add %}
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="form-label" for="{{ item.field }}">{{ item.label }}</label>
|
|
{% if item.type == 'text' %}
|
|
<input type="text" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'select' %}
|
|
<select class="form-control" id="{{ item.id }}" name="{{ item.field }}">
|
|
{% for option in item.options %}
|
|
<option value="{{ option }}">{{ option }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% elif item.type == 'date' %}
|
|
<input type="date" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'textarea' %}
|
|
<textarea class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}"></textarea>
|
|
{% elif item.type == 'month' %}
|
|
<input type="month" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'number' %}
|
|
<input type="number" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% elif item.type == 'email' %}
|
|
<input type="email" class="form-control" id="{{ item.id }}"
|
|
name="{{ item.field }}">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if forloop.counter|divisibleby:"3" or forloop.last %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
{% endif %}
|
|
</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');
|
|
$('#{{ list_key }}').val('');
|
|
} else if (operationType === 'modify' && record) {
|
|
$('#formModalTitle').text('修改');
|
|
$('#{{ id_name }}').val(record.{{ id_name }});
|
|
{% for item in table_columns %}
|
|
{% if item.is_add %}
|
|
var fieldType = '{{ item.type }}';
|
|
$('#{{ item.id }}').val(record['{{ item.field }}']);
|
|
if (fieldType === 'date') {
|
|
var recordBirthday = record['{{ item.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}`;
|
|
$('#{{ item.id }}').val(formattedDate);
|
|
}
|
|
}
|
|
if (fieldType === 'select') {
|
|
$('#{{ item.id }}').val(record['{{ item.field }}']);
|
|
$('#{{ item.id }} option').each(function () {
|
|
if ($(this).val() === record['{{ item.field }}']) {
|
|
$(this).prop('selected', true);
|
|
}
|
|
});
|
|
}
|
|
{% endif %}
|
|
{% endfor %}
|
|
}
|
|
$('#addModifyModal').modal('show');
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('.edit-btn').on('click', function () {
|
|
const record = {
|
|
"{{ id_name }}": $(this).data("target_id")
|
|
};
|
|
{% for item in table_columns %}
|
|
{% if item.is_add %}
|
|
record['{{ item.field }}'] = $(this).data('{{ item.field }}');
|
|
{% endif %}
|
|
{% endfor %}
|
|
openFormModal('modify', record);
|
|
});
|
|
|
|
var modifyUrl = "{{ url.modify }}";
|
|
var addUrl = "{{ url.add }}";
|
|
|
|
|
|
$('#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 item in table_columns %}
|
|
$('#{{ item.field }}').val('');
|
|
{% endfor %}
|
|
});
|
|
});
|
|
</script>
|