tmzn
/
jinzaifoodadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957
							<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经销商管理</title>
    <meta name="keywords" content="经销商管理">
    <meta name="description" content="经销商信息管理页面">
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .required::before {
            content: '*';
            color: red;
            margin-right: 5px;
        }

        .row.mb-4 {
            margin-bottom: 1.5rem; /* 或者使用 20px 等其他值 */
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .form-container {
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        .form-inline-flex {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
        }

        @media (max-width: 768px) {
            .form-inline-flex {
                flex-direction: column;
                align-items: stretch;
            }

            .form-inline-flex .form-control,
            .form-inline-flex .btn,
            .form-inline-flex .selectpicker {
                width: 100% !important;
                margin-right: 0 !important;
            }
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <div class="row">
                        <div class="col-sm-10">
                            <h3>经销商管理</h3>
                        </div>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="row row-lg mb-4">
                        <div class="col-lg-12">
                            <div class="form-inline-flex">
                                <input id="jxsCode" class="form-control"
                                       style="width: 180px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;"
                                       placeholder="请输入经销商编号"/>
                                <input id="jxsName" class="form-control"
                                       style="width: 180px; flex-shrink: 0; margin-right: 10px; margin-bottom: 5px;"
                                       placeholder="请输入经销商名称"/>
                                <button type="button" id="searchBtn" class="btn btn-success"
                                        onclick="search();return false;" style="margin-right: 5px; margin-bottom: 5px;">
                                    查询
                                </button>
                                <button type="button" id="resetBtn" class="btn btn-default"
                                        style="margin-right: 5px; margin-bottom: 5px;">重置
                                </button>
                                <button type="button" class="btn btn-primary" onclick="showAddModal();"
                                        style="margin-right: 5px; margin-bottom: 5px;">新增
                                </button>
                                <button type="button" class="btn btn-info" onclick="exportData();"
                                        style="margin-right: 5px; margin-bottom: 5px;">导出
                                </button>
                                <button type="button" class="btn btn-info" onclick="importData();"
                                        style="margin-bottom: 5px;">导入
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row row-lg mt-3">
                        <div class="col-sm-12">
                            <table id="table" data-toggle="table" data-mobile-responsive="true"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新增/编辑经销商模态框 -->
<div class="modal fade" id="jxsModal" tabindex="-1" role="dialog" aria-labelledby="jxsModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="jxsModalLabel">新增经销商</h4>
            </div>
            <div class="modal-body">
                <div class="form-container">
                    <form id="jxsForm">
                        <input type="hidden" id="jxsId" name="jxsId">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="modalJxsCode" class="required control-label">经销商编号</label>
                                <input type="text" class="form-control" id="modalJxsCode" name="modalJxsCode"
                                       placeholder="请输入" required>
                            </div>
                            <div class="col-md-6">
                                <label for="modalJxsName" class="required control-label">经销商名称</label>
                                <input type="text" class="form-control" id="modalJxsName" name="modalJxsName"
                                       placeholder="请输入" required>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="modalContactPerson" class="control-label">联系人</label>
                                <input type="text" class="form-control" id="modalContactPerson"
                                       name="modalContactPerson" placeholder="请输入">
                            </div>
                            <div class="col-md-6">
                                <label for="modalContactPhone" class="control-label">联系方式</label>
                                <input type="text" class="form-control" id="modalContactPhone" name="modalContactPhone"
                                       placeholder="请输入">
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label for="modalSalesArea" class="required control-label">销售地区</label>
                                <select id="modalSalesArea" class="form-control selectpicker" multiple="multiple"
                                        data-live-search="true" title="请选择销售地区">
                                    <!-- 销售地区选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="required control-label">状态</label>
                                <div class="d-flex align-items-center gap-2">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="modalStatus" name="modalStatus" checked>
                                        <span class="slider"></span>
                                    </label>
                                    <span id="statusText">启用</span>
                                    <div class="text-muted">状态：启用、禁用，默认启用</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- 预留一列 -->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveJxs();">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="jxsDetailModal" tabindex="-1" role="dialog" aria-labelledby="jxsDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="productDetailModalLabel">经销商详情</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <tbody>
                                <tr>
                                    <td class="text-right" width="30%"><strong>经销商编码：</strong></td>
                                    <td id="detailJxsCode"></td>
                                </tr>
                                <tr>
                                    <td class="text-right"><strong>联系人：</strong></td>
                                    <td id="detailContactName"></td>
                                </tr>
                                <tr>
                                    <td class="text-right"><strong>联系方式：</strong></td>
                                    <td id="detailContactPhone"></td>
                                </tr>
                                <tr>
                                    <td class="text-right"><strong>销售地区：</strong></td>
                                    <td id="detailAreas"></td>
                                </tr>
                                <tr>
                                    <td class="text-right"><strong>状态：</strong></td>
                                    <td id="detailStatus"></td>
                                </tr>
                                <tr>
                                    <td class="text-right"><strong>创建人：</strong></td>
                                    <td id="detailCreateUser"></td>
                                </tr>
                                <tr>
                                    <td class="text-right"><strong>创建时间：</strong></td>
                                    <td id="detailCreateTime"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/bootstrap-select.min.js"></script>
<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>
<!-- jQuery Validation plugin javascript-->
<script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx}/js/common.js"></script>
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
<script src="${ctx}/js/Math.uuid.js"></script>
</body>
<script>
    var table = null;
    var salesAreas = []; // 存储销售地区数据

    $(document).ready(function () {
        $('.selectpicker').selectpicker({
            liveSearch: true,
            size: 5,
            actionsBox: true,
            selectedTextFormat: 'count > 2'
        });

        // 初始化表格
        table = $('#table').bootstrapTable("destroy");
        initTable();
        initValidation();

        // 绑定重置按钮点击事件
        $('#resetBtn').on('click', function () {
            reset();
        });

        // 状态切换按钮
        const statusToggle = document.getElementById('modalStatus');
        const statusText = document.getElementById('statusText');

        statusToggle.addEventListener('change', function () {
            if (this.checked) {
                statusText.textContent = '启用';
            } else {
                statusText.textContent = '禁用';
            }
        });
    });

    // 加载销售地区数据
    function loadSalesAreas() {
        // 显示加载中提示
        var loadingIndex = layer.load(1, {
            shade: [0.2, '#000']
        });

        // 从JSON文件加载地区数据
        $.ajax({
            url: '${ctx}/common/area.json',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 关闭加载提示
                layer.close(loadingIndex);

                // 清空选择框
                $('#modalSalesArea').empty();

                // 遍历数据，只取省市两级，格式为"湖南省-长沙市"
                for (var province in data) {
                    if (data.hasOwnProperty(province)) {
                        var cities = data[province];
                        for (var city in cities) {
                            if (cities.hasOwnProperty(city)) {
                                // 构建省市组合，如"湖南省-长沙市"
                                var areaText = province + '-' + city;
                                $('#modalSalesArea').append('<option value="' + areaText + '">' + areaText + '</option>');
                            }
                        }
                    }
                }

                // 刷新selectpicker
                $('#modalSalesArea').selectpicker('refresh');
            },
            error: function () {
                // 关闭加载提示
                layer.close(loadingIndex);
                layer.msg('加载销售地区数据失败', {icon: 5});
            }
        });
    }

    function queryParams(param) {
        let jxsCode = $.trim($("#jxsCode").val());
        let jxsName = $.trim($("#jxsName").val());

        if (jxsCode) {
            param['jxsCode'] = jxsCode;
        }
        if (jxsName) {
            param['jxsName'] = jxsName;
        }

        return param;
    }

    function search() {
        table = $('#table').bootstrapTable("destroy");
        initTable();
    }

    function reset() {
        $("#jxsCode").val('');
        $("#jxsName").val('');
        table = $('#table').bootstrapTable("destroy");
        initTable();
    }

    function showAddModal() {
        loadSalesAreas();
        // 清空表单
        $('#jxsForm')[0].reset();
        $('#jxsId').val('');
        $('#modalStatus').prop('checked', true);
        $('#statusText').text('启用');
        $('#jxsModalLabel').text('新增经销商');

        // 重置表单验证状态
        if ($('#jxsForm').data('validator')) {
            $('#jxsForm').data('validator').resetForm();
        }

        // 清除所有错误类
        $('#jxsForm .error').removeClass('error');
        $('#jxsForm label.error').remove();

        // 显示模态框
        $('#jxsModal').modal('show');
    }

    function showEditModal(id) {
        // 清空表单
        $('#jxsForm')[0].reset();
        // 加载经销商数据
        loadJxsData(id);
        $('#jxsModalLabel').text('编辑经销商');

        // 重置表单验证状态
        if ($('#jxsForm').data('validator')) {
            $('#jxsForm').data('validator').resetForm();
        }

        // 清除所有错误类
        $('#jxsForm .error').removeClass('error');
        $('#jxsForm label.error').remove();

        // 显示模态框
        $('#jxsModal').modal('show');
    }

    function loadJxsData(id) {
        loadSalesAreas();
        $.ajax({
            url: '${ctx}/jxsNew/getById?id=' + id,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if (data.code === 0) {
                    const jxs = data.data;
                    // 填充表单数据
                    $('#jxsId').val(jxs.id);
                    $('#modalJxsCode').val(jxs.code);
                    $('#modalJxsName').val(jxs.jxs);
                    $('#modalContactPerson').val(jxs.contactName);
                    $('#modalContactPhone').val(jxs.contactPhone);

                    // 设置销售地区，需要等待selectpicker初始化完成后再设置
                    setTimeout(function () {
                        if (jxs.dealerAreas) {
                            // 假设salesArea是逗号分隔的字符串
                            var areas = jxs.dealerAreas.split(',');
                            $('#modalSalesArea').val(areas);
                            $('#modalSalesArea').selectpicker('refresh');
                        }
                    }, 500);

                    // 设置状态开关
                    if (jxs.status === 1) {
                        $('#modalStatus').prop('checked', true);
                        $('#statusText').text('启用');
                    } else {
                        $('#modalStatus').prop('checked', false);
                        $('#statusText').text('禁用');
                    }
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function () {
                layer.msg('加载经销商数据失败', {icon: 5});
            }
        });
    }

    function saveJxs() {
        if (!$('#jxsForm').valid()) {
            return;
        }

        // 获取表单数据
        const id = $('#jxsId').val();
        // 获取选中的销售地区（数组）
        const selectedAreas = $('#modalSalesArea').val() || [];

        const formData = {
            id: id,
            code: $('#modalJxsCode').val(),
            jxs: $('#modalJxsName').val(),
            contactName: $('#modalContactPerson').val(),
            contactPhone: $('#modalContactPhone').val(),
            dealerAreas: selectedAreas.join(','), // 将数组转换为逗号分隔的字符串
            status: $('#modalStatus').is(':checked') ? 1 : 0
        };

        $.ajax({
            url: id ? '${ctx}/jxsNew/update' : '${ctx}/jxsNew/save',
            type: 'POST',
            data: JSON.stringify(formData),
            contentType: 'application/json',
            success: function (data) {
                if (data.code === 0) {
                    layer.msg('保存成功', {icon: 6});
                    // 关闭模态框
                    $('#jxsModal').modal('hide');
                    // 刷新表格
                    search();
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function () {
                layer.msg('保存失败', {icon: 5});
            }
        });
    }

    function deleteJxs(id) {
        layer.confirm('确定要删除该经销商吗？此操作不可撤销！', {
            btn: ['确定', '取消']
        }, function () {
            $.ajax({
                url: '${ctx}/jxsNew/delete',
                type: 'post',
                data: {
                    id: id
                },
                success: function (result) {
                    if (result.code === 0) {
                        layer.msg(result.msg, {icon: 1});
                        search(); // 刷新表格
                    } else {
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function () {
                    layer.msg('删除失败', {icon: 2});
                }
            });
        });
    }

    function initValidation() {
        $('#jxsForm').validate({
            rules: {
                modalJxsCode: {
                    required: true,
                    maxlength: 50
                },
                modalJxsName: {
                    required: true,
                    maxlength: 100
                }
            },
            messages: {
                modalJxsCode: {
                    required: '请输入经销商编号',
                    maxlength: '经销商编号最多50个字符'
                },
                modalJxsName: {
                    required: '请输入经销商名称',
                    maxlength: '经销商名称最多100个字符'
                }
            },
            errorElement: 'label',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                if (element.is(':checkbox') || element.is(':radio')) {
                    error.appendTo(element.parent().parent());
                } else if (element.hasClass('selectpicker')) {
                    // 为selectpicker特殊处理错误信息位置
                    error.insertAfter(element.next('.bootstrap-select'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element, errorClass, validClass) {
                if ($(element).hasClass('selectpicker')) {
                    $(element).next('.bootstrap-select').find('.btn').addClass('error').removeClass('valid');
                } else {
                    $(element).addClass('error').removeClass('valid');
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                if ($(element).hasClass('selectpicker')) {
                    $(element).next('.bootstrap-select').find('.btn').removeClass('error').addClass('valid');
                } else {
                    $(element).removeClass('error').addClass('valid');
                }
            }
        });
    }

    function initTable() {
        table = $('#table').bootstrapTable({
            method: 'get',
            sortable: true,
            toolbar: '#toolbar',    //工具按钮用哪个容器
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,     //是否显示分页（*）
            pageNumber: 1,      //初始化加载第一页，默认第一页
            pageSize: 10,      //每页的记录行数（*）
            pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
            url: '${ctx}/jxsNew/list',//这个接口需要处理bootstrap table传递的固定参数
            queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
            // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber

            queryParams: queryParams,//前端调用服务时，会默认传递上边所述的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            strictSearch: false,
            minimumCountColumns: 2,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            idField: "id",
            responseHandler: function (res) {
                // 这里假设接口返回的data就是我们需要的表格数据
                return {
                    total: res.total,  // 总记录数
                    rows: res.records  // 数据列表
                };
            },
            columns: [
                {
                    field: 'id',
                    title: '序号',
                    formatter: function (value, row, index) {
                        // 使用this关键字访问表格实例
                        var pageNumber = this.pageNumber || 1;
                        var pageSize = this.pageSize || 10;
                        return (pageNumber - 1) * pageSize + index + 1;
                    },
                    align: 'center',
                },
                {
                    field: 'code',
                    title: '经销商编号',
                    align: 'center'
                },
                {
                    field: 'jxs',
                    title: '经销商名称',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:void(0);" onclick="showJxsDetail(' + row.id + ')">' + value + '</a>';
                    }
                },
                {
                    field: 'contactName',
                    title: '联系人',
                    align: 'center'
                },
                {
                    field: 'contactPhone',
                    title: '联系方式',
                    align: 'center'
                },
                {
                    field: 'status',
                    title: '状态',
                    align: 'center',
                    formatter: function (value) {
                        return value === 1 ? '<span class="label label-primary">启用</span>' : '<span class="label label-default">禁用</span>';
                    }
                },
                {
                    field: 'id',
                    title: '操作',
                    align: 'center',
                    formatter: function (value) {
                        return '<button type="button" class="btn btn-primary btn-sm" onclick="showEditModal(' + value + ')">编辑</button> ' +
                            '<button type="button" class="btn btn-danger btn-sm" onclick="deleteJxs(' + value + ')">删除</button>';
                    },
                    width: '150px'
                }
            ]
        });
    }

    // 在initTable()函数之后添加以下代码

    // 导出数据功能实现
    function exportData() {
        // 显示加载中提示
        var loadingIndex = layer.load(1, {
            shade: [0.2, '#000']
        });

        // 获取查询条件
        const jxsCode = $.trim($("#jxsCode").val());
        const jxsName = $.trim($("#jxsName").val());

        // 构建查询参数
        const params = {
            jxsCode: jxsCode,
            jxsName: jxsName
        };

        // 发送导出请求
        $.ajax({
            url: '${ctx}/jxsNew/exportJxsList',
            type: 'POST',
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (res) {
                // 关闭加载提示
                layer.close(loadingIndex);

                if (res.code === 0) {
                    // 获取导出URL并打开
                    let exportUrl = res.data;
                    if (exportUrl) {
                        // 使用新窗口打开URL进行下载
                        window.open(exportUrl, '_blank');
                        layer.msg('导出成功，请在新窗口中查看下载文件', {icon: 1});
                    } else {
                        layer.msg('未获取到有效的导出URL', {icon: 5});
                    }
                } else {
                    layer.msg(res.msg || '导出失败', {icon: 5});
                }
            },
            error: function () {
                // 关闭加载提示
                layer.close(loadingIndex);
                layer.msg('导出请求失败', {icon: 5});
            }
        });
    }

    // 导入功能实现
    function importData() {
        const importHtml = `
        <div style="padding: 20px;">
            <div class="upload-area" style="border: 2px dashed #e0e0e0; padding: 30px; text-align: center; margin-bottom: 20px;">
                <div style="margin-bottom: 15px;">
                    <i class="fa fa-cloud-upload" style="font-size: 50px; color: #ccc;"></i>
                </div>
                <p style="margin-bottom: 10px;">将文件拖到此处，或 <span style="color: #0066cc; cursor: pointer;" id="clickUpload">点击上传</span></p>
                <p style="font-size: 12px; color: #999;">仅允许导入xls、xlsx格式文件。<a href="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jinzaiimport/%E7%BB%8F%E9%94%80%E5%95%86%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx" style="color: #0066cc;">下载模板</a></p>
                <div id="selectedFileName" style="margin-top: 15px; font-size: 12px; color: #333; display: none; justify-content: center; align-items: center;"></div>
                <input type="file" id="fileUpload" accept=".xlsx, .xls" style="display: none;">
            </div>
            <div style="text-align: center;">
                <button type="button" class="btn btn-warning" style="margin-right: 10px;" onclick="uploadJxsFile()">确定</button>
                <button type="button" class="btn btn-default" onclick="layer.closeAll()">取消</button>
            </div>
        </div>
    `;

        layer.open({
            type: 1,
            title: '导入经销商数据',
            area: ['500px', '350px'],
            content: importHtml
        });

        // 绑定点击上传事件
        setTimeout(function () {
            document.getElementById('clickUpload').addEventListener('click', function () {
                document.getElementById('fileUpload').click();
            });

            // 监听文件选择事件
            document.getElementById('fileUpload').addEventListener('change', function () {
                const fileName = this.files[0]?.name;
                const fileNameElement = document.getElementById('selectedFileName');
                if (fileName) {
                    // 创建包含文件名和关闭按钮的HTML
                    fileNameElement.innerHTML =
                        '<span>已选择文件: ' + fileName + '</span>' +
                        '<span style="margin-left: 8px; cursor: pointer; color: #ff4444;" id="clearFileSelection">×</span>';
                    fileNameElement.style.display = 'flex';

                    // 绑定清除按钮事件
                    document.getElementById('clearFileSelection').addEventListener('click', function () {
                        // 清除文件选择
                        const fileInput = document.getElementById('fileUpload');
                        fileInput.value = '';

                        // 隐藏文件名显示
                        fileNameElement.textContent = '';
                        fileNameElement.style.display = 'none';
                    });
                } else {
                    fileNameElement.textContent = '';
                    fileNameElement.style.display = 'none';
                }
            });

            // 实现拖拽上传效果
            const uploadArea = document.querySelector('.upload-area');
            uploadArea.addEventListener('dragover', function (e) {
                e.preventDefault();
                this.style.borderColor = '#0066cc';
                this.style.backgroundColor = '#f5f9ff';
            });

            uploadArea.addEventListener('dragleave', function () {
                this.style.borderColor = '#e0e0e0';
                this.style.backgroundColor = 'transparent';
            });

            uploadArea.addEventListener('drop', function (e) {
                e.preventDefault();
                this.style.borderColor = '#e0e0e0';
                this.style.backgroundColor = 'transparent';

                if (e.dataTransfer.files.length) {
                    document.getElementById('fileUpload').files = e.dataTransfer.files;
                    // 触发change事件以更新文件名显示
                    const event = new Event('change');
                    document.getElementById('fileUpload').dispatchEvent(event);
                }
            });
        }, 100);
    }

    function uploadJxsFile() {
        const fileInput = document.getElementById('fileUpload');
        if (!fileInput.files || fileInput.files.length === 0) {
            layer.msg('请选择要上传的文件', {icon: 2});
            return;
        }

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        $.ajax({
            url: '${ctx}/jxsNew/importJxs',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                layer.load(1); // 显示加载动画
            },
            success: function (result) {
                layer.closeAll('loading'); // 关闭加载动画
                if (result.code === 0) {
                    let successCount = result.data.successCount;
                    let errorCount = result.data.errorCount;
                    let errorFileUrl = result.data.errorFileUrl;

                    // 检查是否有错误数据
                    if (errorCount > 0) {
                        // 创建错误信息HTML
                        const errorHtml =
                            '<div style="padding: 20px;">' +
                            '<p style="text-align: center; margin-bottom: 15px;">导入结果：成功 ' + successCount + ' 条，失败 ' + errorCount + ' 条</p>' +
                            '<div style="text-align: center; margin-bottom: 15px;">' +
                            '<a href="' + errorFileUrl + '" class="btn btn-warning" target="_blank">下载错误数据</a>' +
                            '</div>' +
                            '</div>';

                        layer.open({
                            type: 1,
                            title: '导入结果',
                            area: ['400px', '250px'],
                            content: errorHtml
                        });
                    } else {
                        layer.msg('导入成功，共 ' + successCount + ' 条数据', {icon: 1});
                    }

                    // 刷新表格数据
                    search();
                } else {
                    layer.msg(result.msg, {icon: 2});
                }
            },
            error: function () {
                layer.closeAll('loading'); // 关闭加载动画
                layer.msg('导入失败，请重试', {icon: 2});
            }
        });
    }

    /**
     * 显示产品详情
     */
    function showJxsDetail(jxsId) {
        // 显示加载中提示
        var loadingIndex = layer.load(1, {
            shade: [0.2, '#000']
        });

        // 发送请求获取产品详情
        $.ajax({
            url: '${ctx}/jxsNew/getById',
            type: 'GET',
            data: {id: jxsId},
            dataType: 'json',
            success: function (data) {
                // 关闭加载提示
                layer.close(loadingIndex);

                if (data.code === 0) {
                    var jxs = data.data;

                    // 填充详情数据
                    $('#detailJxsCode').text(jxs.code || '');
                    $('#detailJxsName').text(jxs.jxs || '');
                    $('#detailContactName').text(jxs.contactName || '');
                    $('#detailContactPhone').text(jxs.contactPhone || '');
                    $('#detailAreas').text(jxs.dealerAreas || '');
                    $('#detailCreateUser').text(jxs.createUser || '');
                    $('#detailCreateTime').text(jxs.createTime || '');

                    // 状态转换
                    if (jxs.status === 1) {
                        $('#detailStatus').html('<span class="label label-success">正常</span>');
                    } else if (jxs.status === 0) {
                        $('#detailStatus').html('<span class="label label-default">禁用</span>');
                    } else {
                        $('#detailStatus').text('');
                    }
                    // 显示模态框
                    $('#jxsDetailModal').modal('show');
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function () {
                // 关闭加载提示
                layer.close(loadingIndex);
                layer.msg('获取产品详情失败', {icon: 5});
            }
        });
    }
</script>
</html>