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="target_id" name="target_id">

                    {% 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="{{ field }}" name="{{ field }}">
                            {% elif config.type == 'select' %}
                                <select class="form-control" id="{{ field }}" name="{{ field }}">
                                    {% for option in config.options %}
                                        <option value="{{ option }}">{{ option }}</option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                        </div>
                    </div>
                    {% if forloop.counter|divisibleby:"3" or forloop.last %}
                        </div>
                    {% endif %}
                    {% endfor %}
            </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');
            $('#target_id').val('');
        } else if (operationType === 'modify' && record) {
            $('#formModalTitle').text('修改');
            $('#target_id').val(record.target_id);
{#            {% for field in form_fields_config.fields.keys %}#}
{#                $('#{{ field }}').val(record['{{ field }}']);#}
{#                {% if config.type == 'select' %}#}
{#                    $('#{{ field }} option').each(function () {#}
{#                        if ($(this).val() === record['{{ field }}']) {#}
{#                            $(this).prop('selected', true);#}
{#                        }#}
{#                    });#}
{#                {% endif %}#}
{#            {% endfor %}#}

            {% for field, config in form_fields_config.fields.items %}
                var fieldType = '{{ config.type }}';
                $('#{{ field }}').val(record['{{ field }}']);
                if (fieldType === 'select') {
                    $('#{{ field }}').val(record['{{ field }}']);
                    $('#{{ field }} 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 = {
                target_id: $(this).data('target_id')
            };
            {% for field in form_fields_config.fields.keys %}
                record['{{ field }}'] = $(this).data('{{ field }}');
            {% endfor %}
            openFormModal('modify', record);
        });

        $('#submitForm').on('click', function () {
            var operationType = $('#operationType').val();
            var formData = $('#formModalForm').serialize();
            var url = operationType === 'modify' ? '{% url "modify_gbo_data" %}' : '{% url "add_gbo_data" %}';


            $.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>