|
|
@@ -0,0 +1,979 @@
|
|
|
+<%@ 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">×</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="required control-label">联系人</label>
|
|
|
+ <input type="text" class="form-control" id="modalContactPerson"
|
|
|
+ name="modalContactPerson" placeholder="请输入" required>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <label for="modalContactPhone" class="required control-label">联系方式</label>
|
|
|
+ <input type="text" class="form-control" id="modalContactPhone" name="modalContactPhone"
|
|
|
+ placeholder="请输入" required>
|
|
|
+ </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="请选择销售地区" required>
|
|
|
+ <!-- 销售地区选项将通过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">×</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
|
|
|
+ },
|
|
|
+ modalContactPerson: {
|
|
|
+ required: true,
|
|
|
+ maxlength: 50
|
|
|
+ },
|
|
|
+ modalContactPhone: {
|
|
|
+ required: true,
|
|
|
+ maxlength: 20
|
|
|
+ },
|
|
|
+ modalSalesArea: {
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ messages: {
|
|
|
+ modalJxsCode: {
|
|
|
+ required: '请输入经销商编号',
|
|
|
+ maxlength: '经销商编号最多50个字符'
|
|
|
+ },
|
|
|
+ modalJxsName: {
|
|
|
+ required: '请输入经销商名称',
|
|
|
+ maxlength: '经销商名称最多100个字符'
|
|
|
+ },
|
|
|
+ modalContactPerson: {
|
|
|
+ required: '请输入联系人',
|
|
|
+ maxlength: '联系人最多50个字符'
|
|
|
+ },
|
|
|
+ modalContactPhone: {
|
|
|
+ required: '请输入联系方式',
|
|
|
+ maxlength: '联系方式最多20个字符'
|
|
|
+ },
|
|
|
+ modalSalesArea: {
|
|
|
+ required: '请选择销售地区'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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>
|