XH_Digital_Management/templates/add_modify_modal.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>