XH_Digital_Management/templates/items_list.html

{% extends 'base.html' %}
{% load static tags %}

{% block content %}

    {% block table_list_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="{{ form_action_url }}" method="get">
                                                            {% csrf_token %}
                                                            <div class="row">
                                                                {% with filter_count=filters|length %}
                                                                    {% for filter in filters %}
                                                                        {% if forloop.counter0|divisibleby:6 and not forloop.first %}
                                                                            </div>
                                                                            <div class="row mt-3">
                                                                        {% endif %}
                                                                        <div class="col-md-2 mb-3">
                                                                            {% if filter.type == 'text' %}
                                                                                <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 }}"
                                                                                       value="{{ request.GET|get_value:filter.name|default:'' }}">
                                                                            {% elif filter.type == 'select' %}
                                                                                <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>
                                                                            {% elif filter.type == 'year' %}
                                                                                <label for="{{ filter.id }}"
                                                                                       class="form-label">{{ filter.label }}</label>
                                                                                <input type="text" class="form-control"
                                                                                       id="{{ filter.id }}"
                                                                                       name="{{ filter.name }}" placeholder="请选择">
                                                                            {% elif filter.type == 'date' %}
                                                                                <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 }}">
                                                                            {% elif filter.type == 'month' %}
                                                                                <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 }}">
                                                                            {% endif %}
                                                                        </div>
                                                                        {% if forloop.last and filters %}
                                                                            <div class="col-md-2 mb-3 d-flex align-items-end">
                                                                                <button type="submit"
                                                                                        class="btn btn-primary">查询
                                                                                </button>
                                                                            </div>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                {% endwith %}
                                                                </div>
                                                        </form>
                                                    </div>
                                                    <div class="col-md-4 mt-4 text-end">
                                                        {% render_button 'modify_records_button' %}
                                                        {% render_button 'add_button' %}
                                                        {% render_button 'report_excel_button' %}
                                                        {% render_button 'import_excel_button' %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% block fields_list_content %}
                                    <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 %}
                                                                        {% if '（元）' in field.verbose_name %}
                                                                            <td class="text-center">{{ field.value|default_if_none:'-'|thousands_separator }}</td>
                                                                        {% elif field.verbose_name == '年月' %}
                                                                            <td class="text-center">{{ field.value|default_if_none:'-'|date:"Y-m" }}</td>
                                                                        {% elif field.verbose_name == '税率' %}
                                                                            <td class="text-center">{{ field.value|default_if_none:'-'|format_tax_rate }}</td>
                                                                        {% elif field.verbose_name == '密码' %}
                                                                            <td class="text-center">{{ field.value|default_if_none:'-'|mask_password }}</td>
                                                                        {% else %}
                                                                            <td class="text-center">{{ field.value|default_if_none:'-' }}</td>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                    <td class="text-center">
                                                                        <a href="#"
                                                                           id="editBtn"
                                                                           class="edit-btn"
                                                                           data-id="{{ item|get_pk_value }}"
                                                                           data-bs-toggle="modal"
                                                                           data-bs-target="#addEditModal">编辑</a>
                                                                        <a href="#"
                                                                           id="deleteBtn"
                                                                           class="delete-btn"
                                                                           style="color: red"
                                                                           data-id="{{ item|get_pk_value }}"
                                                                           data-bs-toggle="modal"
                                                                           data-bs-target="#deleteModal">删除</a>
                                                                    </td>
                                                                </tr>
                                                            {% empty %}
                                                                <tr>
                                                                    <td class="text-center"
                                                                        colspan="{{ table_columns|length }}">暂无数据
                                                                    </td>
                                                                </tr>
                                                            {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endblock %}
                                {% include 'pagination_ps.html' with page_obj=items query_params=query_params %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {% endblock %}

    <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>
                    <a href="" id="hiddenActionLink" style="display: none;"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>

    <div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <p>此操作会删除当前数据，是否继续？</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
                </div>

            </div>
        </div>
    </div>

    <div id="uploadModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="upload-form" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="modal-header">
                        <h5 class="modal-title" id="uploadModalLabel">上传Excel文件</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input id="inputFile" type="file" name="excel_file" class="form-control" hidden accept=".xlsx">
                        <label class="btn btn-outline-primary" for="inputFile">选择文件</label>
                        <span id="file-chosen" style="font-size: 12px; margin-left: 10px;">未选择文件</span>
                    </div>
                    <div class="modal-footer">
                        <button id="downloadExcelBtn" type="button" class="btn btn-secondary" onclick="#!">
                            下载填报模板
                        </button>
                        <button id="uploadBtn" type="button" class="btn btn-primary">上传Excel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="exportModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="export-form" method="get" action="{{ export_url }}">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exportModalLabel">导出数据</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="model_config" value="{{ model_config }}">
                        {% if include %}
                            {% for filter in filters %}
                                {% if forloop.counter0 in include %}
                                    <div class="mb-3">
                                        <label for="{{ filter.id }}_exp" class="form-label">{{ filter.label }}</label>
                                        {% if filter.type == 'select' %}
                                            <select class="form-control" id="{{ filter.id }}_exp"
                                                    name="{{ filter.name }}">
                                                <option value="">请选择</option>
                                                {% for option in filter.options %}
                                                    <option value="{{ option.value }}">{{ option.display }}</option>
                                                {% endfor %}
                                            </select>
                                        {% elif filter.type == 'date' or filter.type == 'month' %}
                                            <input type="{{ filter.type }}" class="form-control"
                                                   id="{{ filter.id }}_exp"
                                                   name="{{ filter.name }}">
                                        {% elif filter.type == 'year' %}
                                            <input type="text" class="form-control" id="{{ filter.id }}_exp_download"
                                                   name="{{ filter.name }}" placeholder="请选择">
                                        {% else %}
                                            <input type="text" class="form-control" id="{{ filter.id }}_exp"
                                                   name="{{ filter.name }}">
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% elif exclude %}
                            <div>是否导出所有数据？</div>
                        {% else %}
                            {% if filters %}
                                {% for filter in filters %}
                                    <div class="mb-3">
                                        <label for="{{ filter.id }}_exp" class="form-label">{{ filter.label }}</label>
                                        {% if filter.type == 'select' %}
                                            <select class="form-control" id="{{ filter.id }}_exp"
                                                    name="{{ filter.name }}">
                                                <option value="">请选择</option>
                                                {% for option in filter.options %}
                                                    <option value="{{ option.value }}">{{ option.display }}</option>
                                                {% endfor %}
                                            </select>
                                        {% elif filter.type == 'date' or filter.type == 'month' %}
                                            <input type="{{ filter.type }}" class="form-control"
                                                   id="{{ filter.id }}_exp"
                                                   name="{{ filter.name }}">
                                        {% elif filter.type == 'year' %}
                                            <input type="text" class="form-control" id="{{ filter.id }}_exp_download"
                                                   name="{{ filter.name }}" placeholder="请选择">
                                        {% else %}
                                            <input type="text" class="form-control" id="{{ filter.id }}_exp"
                                                   name="{{ filter.name }}">
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div>是否导出所有数据？</div>
                            {% endif %}
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">导出</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    {% include 'modify_record_modal.html' with modify_records_url=modify_records_url %}

    {% block item_list_custom_content %}
    {% endblock %}

    <script>
        const excel_upload_config = {{ excel_upload_config|safe }};
        const add_url = "{{ add_url }}";
        const modify_url = "{{ modify_url }}";
        const deleteUrl = "{{ delete_url }}";
        let save_url = null;
        let targetIdToDelete = null;
        var templateName = "{{ excel_upload_config.template_name }}";
        var modelConfig = "{{ model_config }}";
        var list_url = "{{ form_action_url }}"


        $(document).ready(function () {
            // 初始化省市县选择器
            function initSelectors() {
                var provinceSelect = $('#province');
                var citySelect = $('#city');
                var districtSelect = $('#district');

                // 初始化省份
                province.forEach(function (prov) {
                    provinceSelect.append($('<option>', {
                        value: prov.name,
                        text: prov.name
                    }));
                });

                // 当省份选择变化时更新城市
                provinceSelect.change(function () {
                    var selectedProvince = $(this).val();
                    citySelect.empty().append($('<option>', {value: "", text: "请选择市"}));
                    districtSelect.empty().append($('<option>', {value: "", text: "请选择区县"}));
                    if (selectedProvince) {
                        var cities = province.find(p => p.name === selectedProvince).city;
                        cities.forEach(function (city) {
                            citySelect.append($('<option>', {
                                value: city.name,
                                text: city.name
                            }));
                        });
                    }
                });

                // 当城市选择变化时更新区县
                citySelect.change(function () {
                    var selectedCity = $(this).val();
                    districtSelect.empty().append($('<option>', {value: "", text: "请选择区县"}));
                    if (selectedCity) {
                        var selectedProvince = province.find(p => p.name === provinceSelect.val());
                        var selectedCityObject = selectedProvince.city.find(c => c.name === selectedCity);
                        selectedCityObject.districtAndCounty.forEach(function (district) {
                            districtSelect.append($('<option>', {
                                value: district,
                                text: district
                            }));
                        });
                    }
                });
            }

            function initSelectors_exp() {
                var provinceSelect = $('#province_exp');
                var citySelect = $('#city_exp');
                var districtSelect = $('#district_exp');

                // 初始化省份
                province.forEach(function (prov) {
                    provinceSelect.append($('<option>', {
                        value: prov.name,
                        text: prov.name
                    }));
                });

                // 当省份选择变化时更新城市
                provinceSelect.change(function () {
                    var selectedProvince = $(this).val();
                    citySelect.empty().append($('<option>', {value: "", text: "请选择市"}));
                    districtSelect.empty().append($('<option>', {value: "", text: "请选择区县"}));
                    if (selectedProvince) {
                        var cities = province.find(p => p.name === selectedProvince).city;
                        cities.forEach(function (city) {
                            citySelect.append($('<option>', {
                                value: city.name,
                                text: city.name
                            }));
                        });
                    }
                });

                // 当城市选择变化时更新区县
                citySelect.change(function () {
                    var selectedCity = $(this).val();
                    districtSelect.empty().append($('<option>', {value: "", text: "请选择区县"}));
                    if (selectedCity) {
                        var selectedProvince = province.find(p => p.name === provinceSelect.val());
                        var selectedCityObject = selectedProvince.city.find(c => c.name === selectedCity);
                        selectedCityObject.districtAndCounty.forEach(function (district) {
                            districtSelect.append($('<option>', {
                                value: district,
                                text: district
                            }));
                        });
                    }
                });
            }

            // 调用初始化函数
            initSelectors();
            initSelectors_exp();


            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            const csrftoken = getCookie('csrftoken');

            // 处理添加按钮点击事件
            $('#addItemBtn').click(function () {
                $.ajax({
                    url: add_url,
                    type: 'get',
                    success: function (response) {
                        // 将新的表单 HTML 插入到模态框中
                        $('#addEditModal .modal-body').html(response.form_html);
                        // 动态设置模态框标题
                        $('#formModalTitle').text('新增');
                        // 动态设置表单提交URL
                        $('#addEditForm').attr('action', add_url);
                        $('#hiddenActionLink').attr('href', add_url);
                        // 显示模态框
                        $('#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('编辑');
                        // 动态设置表单提交URL
                        $('#addEditForm').attr('action', modify_url);
                        $('#hiddenActionLink').attr('href', modify_url);
                        // 显示模态框
                        $('#addEditModal').modal('show');

                        // 触发自定义事件
                        $('#addEditModal').trigger('contentLoaded');

                        // 绑定表单提交事件
                        bindFormSubmit();
                    },
                    error: function () {
                        $('#addEditModal').modal('hide');
                        showAlert('danger', '获取表单请求出错');
                    }
                });
            });

            // 保存
            function bindFormSubmit() {
                $('#addEditForm').submit(function (e) {
                    e.preventDefault();

                    var policyFileInput = document.getElementById('id_policy_file');
                    var hasFile = policyFileInput && policyFileInput.files.length > 0; // 检查是否存在文件输入框且选择了文件
                    if (hasFile) {
                        var formData = new FormData(this); // 使用 FormData 对象

                        $.ajax({
                            url: $(this).attr('action'),
                            type: 'post',
                            data: formData,
                            processData: false, // 告诉 jQuery 不要处理发送的数据
                            contentType: false, // 告诉 jQuery 不要设置内容类型
                            success: function (response) {
                                // 关闭模态框并显示成功消息
                                $('#addEditModal').modal('hide');
                                showAlert('success', response.message);
                                location.reload();
                            },
                            error: function (xhr) {
                                // 处理表单错误并显示详细错误消息
                                var response = xhr.responseJSON;
                                if (response && response.errors) {
                                    var errorMessages = Object.values(response.errors).flat().join('<br>');
                                    showAlert('danger', errorMessages);
                                } else {
                                    showAlert('danger', '保存失败');
                                }
                                var actionUrl = $('#hiddenActionLink').attr('href');
                                $('#addEditModal .modal-body').html(response.form_html);
                                $('#addEditForm').attr('action', actionUrl);
                                bindFormSubmit();
                            }
                        });
                    } else {
                        $.ajax({
                            url: $(this).attr('action'),
                            type: 'post',
                            data: $(this).serialize(),
                            success: function (response) {
                                // 关闭模态框并显示成功消息
                                $('#addEditModal').modal('hide');
                                showAlert('success', response.message);
                                location.reload();
                            },
                            error: function (xhr) {
                                // 处理表单错误并显示详细错误消息
                                var response = xhr.responseJSON;
                                if (response && response.errors) {
                                    var errorMessages = Object.values(response.errors).flat().join('<br>');
                                    showAlert('danger', errorMessages);
                                } else {
                                    showAlert('danger', '保存失败');
                                }
                                var actionUrl = $('#hiddenActionLink').attr('href');
                                $('#addEditModal .modal-body').html(response.form_html);
                                $('#addEditForm').attr('action', actionUrl);
                                bindFormSubmit();
                            }
                        });
                    }
                });
            }


            // 删除和确认删除
            $(document).on('click', '.delete-btn, #confirmDeleteBtn', function (event) {
                if (event.target.id === 'deleteBtn') {
                    // 打开删除模态框
                    targetIdToDelete = $(this).data('id');
                    $('#deleteModal').modal('show');
                } else if (event.target.id === 'confirmDeleteBtn') {
                    // 确认删除
                    if (targetIdToDelete !== null) {
                        $.ajax({
                            type: 'POST',
                            url: deleteUrl,
                            data: {
                                'id': targetIdToDelete,
                                'csrfmiddlewaretoken': csrftoken
                            },
                            success: function (response) {
                                showAlert('success', "删除成功");
                                location.reload();
                            },
                            error: function (response) {
                                showAlert('danger', "删除失败");
                            }
                        });
                    }
                    $('#deleteModal').modal('hide');
                }
            });

            // 点击下载Excel模板按钮
            $('#downloadExcelBtn').on('click', function () {
                window.location.href = excel_upload_config.template_url;
            });

            // 当上传模态框显示时，清空文件输入框和文件名显示
            $('#uploadModal').on('show.bs.modal', function () {
                $('#inputFile').val('');
                $('#file-chosen').text('未选择文件');
            });

            // 当选择文件变化时，更新文件名显示
            $('#inputFile').on('change', function () {
                var fileName = $(this).val().split('\\').pop();
                $('#file-chosen').text(fileName || '未选择文件');
            });

            // 处理上传按钮的点击事件
            $('#uploadBtn').on('click', function () {
                var inputFile = $('#inputFile').get(0).files[0];
                if (!inputFile) {
                    showAlert('danger', '未选择文件');
                    $('#uploadModal').modal('show');
                    return;
                }

                var formData = new FormData();
                formData.append('file', inputFile);  // 将文件添加到 FormData 中
                formData.append('template_name', templateName);
                formData.append('excel_valid_model', modelConfig);
                formData.append('list_url', list_url)

                $.ajax({
                    url: '{{ excel_upload_config.parse_url }}',
                    type: 'POST',
                    data: formData,
                    headers: {'X-CSRFToken': csrftoken},
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        window.location.href = response.redirect_url;
                    },
                    error: function (xhr, status, error) {
                        var errorMsg = "解析Excel文件失败。";
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        showAlert('danger', errorMsg);
                    }
                });
            });

            $('#year').datepicker({
                format: "yyyy",
                viewMode: "years",
                minViewMode: "years",
                autoclose: true
            });

            $('#year_download').datepicker({
                format: "yyyy",
                viewMode: "years",
                minViewMode: "years",
                autoclose: true
            });

        });
    </script>
    {% block js_content %}
    {% endblock %}


{% endblock %}