|
@@ -0,0 +1,632 @@
|
|
|
|
|
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>经销商管理</title>
|
|
|
|
|
+ <!-- 引入Bootstrap CSS -->
|
|
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
|
|
|
+ <!-- 引入Font Awesome图标 -->
|
|
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
+ <style>
|
|
|
|
|
+ .status-normal {
|
|
|
|
|
+ color: green;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+ .status-disabled {
|
|
|
|
|
+ color: red;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+ .action-link {
|
|
|
|
|
+ margin-right: 8px;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ .action-edit {
|
|
|
|
|
+ color: #0d6efd;
|
|
|
|
|
+ }
|
|
|
|
|
+ .action-delete {
|
|
|
|
|
+ color: #dc3545;
|
|
|
|
|
+ }
|
|
|
|
|
+ .pagination-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .pagination .page-item.active .page-link {
|
|
|
|
|
+ background-color: #0d6efd;
|
|
|
|
|
+ border-color: #0d6efd;
|
|
|
|
|
+ }
|
|
|
|
|
+ .dealer-name {
|
|
|
|
|
+ color: #0d6efd;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ text-decoration: underline;
|
|
|
|
|
+ }
|
|
|
|
|
+ .modal-body .form-group {
|
|
|
|
|
+ margin-bottom: 1rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ .selected-area {
|
|
|
|
|
+ background-color: #e9ecef;
|
|
|
|
|
+ padding: 0.5rem;
|
|
|
|
|
+ border-radius: 0.25rem;
|
|
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 0.5rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ .area-tag {
|
|
|
|
|
+ background-color: #0d6efd;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ padding: 0.25rem 0.5rem;
|
|
|
|
|
+ border-radius: 0.25rem;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .area-tag .remove-area {
|
|
|
|
|
+ margin-left: 0.5rem;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div class="container mt-4">
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div class="card-header bg-primary text-white">
|
|
|
|
|
+ <h4 class="mb-0">经销商管理</h4>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card-body">
|
|
|
|
|
+ <!-- 搜索区域 -->
|
|
|
|
|
+ <div class="search-area mb-4 d-flex flex-wrap gap-2">
|
|
|
|
|
+ <div class="flex-grow-1">
|
|
|
|
|
+ <input type="text" class="form-control" id="dealerCode" placeholder="请输入经销商编号">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="flex-grow-1">
|
|
|
|
|
+ <input type="text" class="form-control" id="dealerName" placeholder="请输入经销商名称">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button type="button" class="btn btn-primary" id="searchBtn">
|
|
|
|
|
+ <i class="fas fa-search me-1"></i> 查询
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button type="button" class="btn btn-secondary" id="resetBtn">
|
|
|
|
|
+ <i class="fas fa-sync-alt me-1"></i> 重置
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
|
|
+ <div class="action-buttons mb-4 d-flex justify-content-end gap-2">
|
|
|
|
|
+ <button type="button" class="btn btn-success" id="addBtn">
|
|
|
|
|
+ <i class="fas fa-plus me-1"></i> 新增
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button type="button" class="btn btn-info" id="importBtn">
|
|
|
|
|
+ <i class="fas fa-upload me-1"></i> 导入
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button type="button" class="btn btn-warning" id="exportBtn">
|
|
|
|
|
+ <i class="fas fa-download me-1"></i> 导出
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 数据表格 -->
|
|
|
|
|
+ <div class="table-responsive">
|
|
|
|
|
+ <table class="table table-striped table-hover">
|
|
|
|
|
+ <thead class="table-light">
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <th><input type="checkbox" id="selectAll"></th>
|
|
|
|
|
+ <th>经销商编号</th>
|
|
|
|
|
+ <th>经销商名称</th>
|
|
|
|
|
+ <th>联系人</th>
|
|
|
|
|
+ <th>联系方式</th>
|
|
|
|
|
+ <th>状态</th>
|
|
|
|
|
+ <th>操作</th>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </thead>
|
|
|
|
|
+ <tbody id="dealerTableBody">
|
|
|
|
|
+ <!-- 表格数据将通过JavaScript动态加载 -->
|
|
|
|
|
+ </tbody>
|
|
|
|
|
+ </table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 分页控件 -->
|
|
|
|
|
+ <div class="pagination-container mt-4">
|
|
|
|
|
+ <nav aria-label="Page navigation">
|
|
|
|
|
+ <ul class="pagination">
|
|
|
|
|
+ <li class="page-item">
|
|
|
|
|
+ <a class="page-link" href="#" aria-label="Previous">
|
|
|
|
|
+ <span aria-hidden="true"><</span>
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
|
|
|
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
|
|
|
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
|
|
|
+ <li class="page-item"><a class="page-link" href="#">4</a></li>
|
|
|
|
|
+ <li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
|
|
|
+ <li class="page-item disabled"><span class="page-link">...</span></li>
|
|
|
|
|
+ <li class="page-item"><a class="page-link" href="#">10</a></li>
|
|
|
|
|
+ <li class="page-item">
|
|
|
|
|
+ <a class="page-link" href="#" aria-label="Next">
|
|
|
|
|
+ <span aria-hidden="true">></span>
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </nav>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 详情模态框 -->
|
|
|
|
|
+ <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
|
|
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
|
+ <div class="modal-header bg-primary text-white">
|
|
|
|
|
+ <h5 class="modal-title" id="detailModalLabel">经销商详情</h5>
|
|
|
|
|
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-body" id="detailModalBody">
|
|
|
|
|
+ <!-- 详情内容将通过JavaScript动态加载 -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
|
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 新增/编辑模态框 -->
|
|
|
|
|
+ <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
|
|
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
|
+ <div class="modal-header bg-primary text-white">
|
|
|
|
|
+ <h5 class="modal-title" id="editModalLabel">新增经销商</h5>
|
|
|
|
|
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-body">
|
|
|
|
|
+ <form id="dealerForm">
|
|
|
|
|
+ <input type="hidden" id="dealerId" name="dealerId">
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label for="editDealerCode" class="required">经销商编号</label>
|
|
|
|
|
+ <input type="text" class="form-control" id="editDealerCode" name="editDealerCode" placeholder="请输入" required>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label for="editContactPerson" class="required">联系人</label>
|
|
|
|
|
+ <input type="text" class="form-control" id="editContactPerson" name="editContactPerson" placeholder="请输入" required>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label for="editDealerName" class="required">经销商名称</label>
|
|
|
|
|
+ <input type="text" class="form-control" id="editDealerName" name="editDealerName" placeholder="请输入" required>
|
|
|
|
|
+ <small class="form-text text-muted">名称:不超过50个字符</small>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label for="editContactInfo" class="required">联系方式</label>
|
|
|
|
|
+ <input type="text" class="form-control" id="editContactInfo" name="editContactInfo" placeholder="请输入" required>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label for="editSalesArea" class="required">销售地区</label>
|
|
|
|
|
+ <div class="selected-area" id="selectedArea">
|
|
|
|
|
+ <!-- 选中的地区将在这里显示 -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <select class="form-select" id="areaSelect">
|
|
|
|
|
+ <option value="">请选择销售地区</option>
|
|
|
|
|
+ <option value="湖南省/长沙市">湖南省/长沙市</option>
|
|
|
|
|
+ <option value="湖南省/益阳市">湖南省/益阳市</option>
|
|
|
|
|
+ <option value="湖南省/岳阳市">湖南省/岳阳市</option>
|
|
|
|
|
+ <option value="湖南省/株洲市">湖南省/株洲市</option>
|
|
|
|
|
+ <option value="湖南省/湘潭市">湖南省/湘潭市</option>
|
|
|
|
|
+ <option value="湖北省/武汉市">湖北省/武汉市</option>
|
|
|
|
|
+ <option value="东南/上海/普陀">东南/上海/普陀</option>
|
|
|
|
|
+ <option value="东南/上海/黄浦">东南/上海/黄浦</option>
|
|
|
|
|
+ </select>
|
|
|
|
|
+ <button type="button" class="btn btn-sm btn-primary mt-2" id="addAreaBtn">添加地区</button>
|
|
|
|
|
+ <small class="form-text text-muted">销售地区:省-市,可多选</small>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <label for="editStatus" class="required">状态</label>
|
|
|
|
|
+ <label class="toggle-switch">
|
|
|
|
|
+ <input type="checkbox" id="editStatus" name="editStatus" checked>
|
|
|
|
|
+ <span class="slider"></span>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <span id="statusText" class="ms-2">正常</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
|
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
|
|
|
+ <button type="button" class="btn btn-primary" id="saveBtn">确定</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 引入jQuery -->
|
|
|
|
|
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
|
+ <!-- 引入Bootstrap JS -->
|
|
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ $(document).ready(function() {
|
|
|
|
|
+ // 模拟经销商数据
|
|
|
|
|
+ const dealerData = [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 'E353',
|
|
|
|
|
+ name: '河北唐山常盛',
|
|
|
|
|
+ contactPerson: '张建新',
|
|
|
|
|
+ contactInfo: '-',
|
|
|
|
|
+ status: 'normal',
|
|
|
|
|
+ salesArea: ['湖南省/长沙市', '湖南省/益阳市', '湖南省/岳阳市'],
|
|
|
|
|
+ creator: '张媛媛',
|
|
|
|
|
+ createTime: '2025-03-12 12:00:00'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 'E352',
|
|
|
|
|
+ name: '云南大理常盛',
|
|
|
|
|
+ contactPerson: '欧阳未央',
|
|
|
|
|
+ contactInfo: '15988886666',
|
|
|
|
|
+ status: 'normal',
|
|
|
|
|
+ salesArea: ['云南省/大理市', '云南省/昆明市'],
|
|
|
|
|
+ creator: '李娜',
|
|
|
|
|
+ createTime: '2025-03-10 09:30:00'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 'E350',
|
|
|
|
|
+ name: '河北新乐张苗',
|
|
|
|
|
+ contactPerson: '欧阳未央',
|
|
|
|
|
+ contactInfo: '15988886666',
|
|
|
|
|
+ status: 'normal',
|
|
|
|
|
+ salesArea: ['河北省/石家庄市', '河北省/保定市'],
|
|
|
|
|
+ creator: '王强',
|
|
|
|
|
+ createTime: '2025-03-08 14:15:00'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 'E344',
|
|
|
|
|
+ name: '河南平原新区张苗',
|
|
|
|
|
+ contactPerson: '王语嫣',
|
|
|
|
|
+ contactInfo: '15988886666',
|
|
|
|
|
+ status: 'disabled',
|
|
|
|
|
+ salesArea: ['河南省/新乡市', '河南省/郑州市'],
|
|
|
|
|
+ creator: '赵伟',
|
|
|
|
|
+ createTime: '2025-03-05 16:45:00'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 'E351',
|
|
|
|
|
+ name: '河南平原新区张香苗',
|
|
|
|
|
+ contactPerson: '欧阳未央',
|
|
|
|
|
+ contactInfo: '15988886666',
|
|
|
|
|
+ status: 'normal',
|
|
|
|
|
+ salesArea: ['河南省/新乡市', '河南省/焦作市'],
|
|
|
|
|
+ creator: '张媛媛',
|
|
|
|
|
+ createTime: '2025-03-01 10:20:00'
|
|
|
|
|
+ }
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ // 当前选中的地区
|
|
|
|
|
+ let selectedAreas = [];
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化详情模态框
|
|
|
|
|
+ const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
|
|
|
|
|
+ // 初始化编辑模态框
|
|
|
|
|
+ const editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
|
|
|
|
+
|
|
|
|
|
+ // 全选/取消全选功能
|
|
|
|
|
+ $('#selectAll').on('change', function() {
|
|
|
|
|
+ $('.dealerCheckbox').prop('checked', this.checked);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 搜索按钮点击事件
|
|
|
|
|
+ $('#searchBtn').on('click', function() {
|
|
|
|
|
+ const dealerCode = $('#dealerCode').val().trim();
|
|
|
|
|
+ const dealerName = $('#dealerName').val().trim();
|
|
|
|
|
+ // 过滤数据
|
|
|
|
|
+ let filteredData = dealerData;
|
|
|
|
|
+ if (dealerCode) {
|
|
|
|
|
+ filteredData = filteredData.filter(dealer => dealer.id.includes(dealerCode));
|
|
|
|
|
+ }
|
|
|
|
|
+ if (dealerName) {
|
|
|
|
|
+ filteredData = filteredData.filter(dealer => dealer.name.includes(dealerName));
|
|
|
|
|
+ }
|
|
|
|
|
+ // 重新渲染表格
|
|
|
|
|
+ renderDealerTable(filteredData);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 重置按钮点击事件
|
|
|
|
|
+ $('#resetBtn').on('click', function() {
|
|
|
|
|
+ $('#dealerCode').val('');
|
|
|
|
|
+ $('#dealerName').val('');
|
|
|
|
|
+ $('.dealerCheckbox').prop('checked', false);
|
|
|
|
|
+ $('#selectAll').prop('checked', false);
|
|
|
|
|
+ // 重新渲染表格
|
|
|
|
|
+ renderDealerTable(dealerData);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 新增按钮点击事件
|
|
|
|
|
+ $('#addBtn').on('click', function() {
|
|
|
|
|
+ // 清空表单
|
|
|
|
|
+ $('#dealerForm')[0].reset();
|
|
|
|
|
+ $('#dealerId').val('');
|
|
|
|
|
+ $('#editModalLabel').text('新增经销商');
|
|
|
|
|
+ selectedAreas = [];
|
|
|
|
|
+ renderSelectedAreas();
|
|
|
|
|
+ // 显示模态框
|
|
|
|
|
+ editModal.show();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 导入按钮点击事件
|
|
|
|
|
+ $('#importBtn').on('click', function() {
|
|
|
|
|
+ alert('导入功能待实现');
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 导出按钮点击事件
|
|
|
|
|
+ $('#exportBtn').on('click', function() {
|
|
|
|
|
+ alert('导出功能待实现');
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 保存按钮点击事件
|
|
|
|
|
+ $('#saveBtn').on('click', function() {
|
|
|
|
|
+ // 表单验证
|
|
|
|
|
+ if (!validateForm()) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 获取表单数据
|
|
|
|
|
+ const dealerId = $('#dealerId').val();
|
|
|
|
|
+ const dealerCode = $('#editDealerCode').val().trim();
|
|
|
|
|
+ const dealerName = $('#editDealerName').val().trim();
|
|
|
|
|
+ const contactPerson = $('#editContactPerson').val().trim();
|
|
|
|
|
+ const contactInfo = $('#editContactInfo').val().trim();
|
|
|
|
|
+ const status = $('#editStatus').is(':checked') ? 'normal' : 'disabled';
|
|
|
|
|
+ const salesArea = [...selectedAreas];
|
|
|
|
|
+
|
|
|
|
|
+ if (dealerId) {
|
|
|
|
|
+ // 编辑现有经销商
|
|
|
|
|
+ const index = dealerData.findIndex(dealer => dealer.id === dealerId);
|
|
|
|
|
+ if (index !== -1) {
|
|
|
|
|
+ dealerData[index] = {
|
|
|
|
|
+ ...dealerData[index],
|
|
|
|
|
+ id: dealerCode,
|
|
|
|
|
+ name: dealerName,
|
|
|
|
|
+ contactPerson: contactPerson,
|
|
|
|
|
+ contactInfo: contactInfo,
|
|
|
|
|
+ status: status,
|
|
|
|
|
+ salesArea: salesArea
|
|
|
|
|
+ };
|
|
|
|
|
+ alert('编辑成功');
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 添加新经销商
|
|
|
|
|
+ const newDealer = {
|
|
|
|
|
+ id: dealerCode,
|
|
|
|
|
+ name: dealerName,
|
|
|
|
|
+ contactPerson: contactPerson,
|
|
|
|
|
+ contactInfo: contactInfo,
|
|
|
|
|
+ status: status,
|
|
|
|
|
+ salesArea: salesArea,
|
|
|
|
|
+ creator: '当前用户',
|
|
|
|
|
+ createTime: new Date().toLocaleString()
|
|
|
|
|
+ };
|
|
|
|
|
+ dealerData.unshift(newDealer);
|
|
|
|
|
+ alert('添加成功');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 关闭模态框
|
|
|
|
|
+ editModal.hide();
|
|
|
|
|
+ // 重新渲染表格
|
|
|
|
|
+ renderDealerTable(dealerData);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 添加地区按钮点击事件
|
|
|
|
|
+ $('#addAreaBtn').on('click', function() {
|
|
|
|
|
+ const area = $('#areaSelect').val();
|
|
|
|
|
+ if (area && !selectedAreas.includes(area)) {
|
|
|
|
|
+ selectedAreas.push(area);
|
|
|
|
|
+ renderSelectedAreas();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 状态切换按钮
|
|
|
|
|
+ const statusToggle = document.getElementById('editStatus');
|
|
|
|
|
+ const statusText = document.getElementById('statusText');
|
|
|
|
|
+
|
|
|
|
|
+ statusToggle.addEventListener('change', function() {
|
|
|
|
|
+ if (this.checked) {
|
|
|
|
|
+ statusText.textContent = '正常';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ statusText.textContent = '禁用';
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 渲染选中的地区
|
|
|
|
|
+ function renderSelectedAreas() {
|
|
|
|
|
+ const selectedAreaEl = document.getElementById('selectedArea');
|
|
|
|
|
+ selectedAreaEl.innerHTML = '';
|
|
|
|
|
+ selectedAreas.forEach(area => {
|
|
|
|
|
+ const areaTag = document.createElement('div');
|
|
|
|
|
+ areaTag.className = 'area-tag';
|
|
|
|
|
+ areaTag.innerHTML = `${area} <span class="remove-area"><i class="fas fa-times"></i></span>`;
|
|
|
|
|
+ areaTag.querySelector('.remove-area').addEventListener('click', function() {
|
|
|
|
|
+ selectedAreas = selectedAreas.filter(a => a !== area);
|
|
|
|
|
+ renderSelectedAreas();
|
|
|
|
|
+ });
|
|
|
|
|
+ selectedAreaEl.appendChild(areaTag);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 表单验证
|
|
|
|
|
+ function validateForm() {
|
|
|
|
|
+ let isValid = true;
|
|
|
|
|
+
|
|
|
|
|
+ // 经销商编号验证
|
|
|
|
|
+ const dealerCode = $('#editDealerCode').val().trim();
|
|
|
|
|
+ if (!dealerCode) {
|
|
|
|
|
+ alert('经销商编号不能为空');
|
|
|
|
|
+ isValid = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 经销商名称验证
|
|
|
|
|
+ const dealerName = $('#editDealerName').val().trim();
|
|
|
|
|
+ if (!dealerName) {
|
|
|
|
|
+ alert('经销商名称不能为空');
|
|
|
|
|
+ isValid = false;
|
|
|
|
|
+ } else if (dealerName.length > 50) {
|
|
|
|
|
+ alert('经销商名称不能超过50个字符');
|
|
|
|
|
+ isValid = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 联系人验证
|
|
|
|
|
+ const contactPerson = $('#editContactPerson').val().trim();
|
|
|
|
|
+ if (!contactPerson) {
|
|
|
|
|
+ alert('联系人不能为空');
|
|
|
|
|
+ isValid = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 联系方式验证
|
|
|
|
|
+ const contactInfo = $('#editContactInfo').val().trim();
|
|
|
|
|
+ if (!contactInfo) {
|
|
|
|
|
+ alert('联系方式不能为空');
|
|
|
|
|
+ isValid = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 销售地区验证
|
|
|
|
|
+ if (selectedAreas.length === 0) {
|
|
|
|
|
+ alert('请选择销售地区');
|
|
|
|
|
+ isValid = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return isValid;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 渲染经销商表格
|
|
|
|
|
+ function renderDealerTable(data) {
|
|
|
|
|
+ const tableBody = document.getElementById('dealerTableBody');
|
|
|
|
|
+ tableBody.innerHTML = '';
|
|
|
|
|
+
|
|
|
|
|
+ data.forEach(dealer => {
|
|
|
|
|
+ const row = document.createElement('tr');
|
|
|
|
|
+ row.innerHTML = `
|
|
|
|
|
+ <td><input type="checkbox" class="dealerCheckbox" value="${dealer.id}"></td>
|
|
|
|
|
+ <td>${dealer.id}</td>
|
|
|
|
|
+ <td><span class="dealer-name" data-id="${dealer.id}">${dealer.name}</span></td>
|
|
|
|
|
+ <td>${dealer.contactPerson}</td>
|
|
|
|
|
+ <td>${dealer.contactInfo}</td>
|
|
|
|
|
+ <td><span class="${dealer.status == 'normal' ? 'status-normal' : 'status-disabled'}">${dealer.status == 'normal' ? '正常' : '禁用'}</span></td>
|
|
|
|
|
+ <td>
|
|
|
|
|
+ <a href="#" class="action-link action-edit" data-id="${dealer.id}"><i class="fas fa-edit me-1"></i>编辑</a>
|
|
|
|
|
+ <a href="#" class="action-link action-delete" data-id="${dealer.id}"><i class="fas fa-trash-alt me-1"></i>删除</a>
|
|
|
|
|
+ </td>
|
|
|
|
|
+ `;
|
|
|
|
|
+ tableBody.appendChild(row);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 为经销商名称添加点击事件
|
|
|
|
|
+ $('.dealer-name').on('click', function() {
|
|
|
|
|
+ const dealerId = $(this).data('id');
|
|
|
|
|
+ showDealerDetail(dealerId);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 为编辑链接添加点击事件
|
|
|
|
|
+ $('.action-edit').on('click', function(e) {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ const dealerId = $(this).data('id');
|
|
|
|
|
+ editDealer(dealerId);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 为删除链接添加点击事件
|
|
|
|
|
+ $('.action-delete').on('click', function(e) {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ const dealerId = $(this).data('id');
|
|
|
|
|
+ if (confirm('确定要删除经销商 ' + dealerId + ' 吗?')) {
|
|
|
|
|
+ // 删除经销商
|
|
|
|
|
+ const index = dealerData.findIndex(dealer => dealer.id === dealerId);
|
|
|
|
|
+ if (index !== -1) {
|
|
|
|
|
+ dealerData.splice(index, 1);
|
|
|
|
|
+ // 重新渲染表格
|
|
|
|
|
+ renderDealerTable(dealerData);
|
|
|
|
|
+ alert('删除成功');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 显示经销商详情
|
|
|
|
|
+ function showDealerDetail(dealerId) {
|
|
|
|
|
+ const dealer = dealerData.find(d => d.id === dealerId);
|
|
|
|
|
+ if (dealer) {
|
|
|
|
|
+ const detailBody = document.getElementById('detailModalBody');
|
|
|
|
|
+ detailBody.innerHTML = `
|
|
|
|
|
+ <div class="row mb-3">
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>经销商编码:</strong>${dealer.id}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>经销商名称:</strong>${dealer.name}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row mb-3">
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>联系人:</strong>${dealer.contactPerson}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>联系方式:</strong>${dealer.contactInfo}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row mb-3">
|
|
|
|
|
+ <div class="col-md-12">
|
|
|
|
|
+ <p><strong>销售地区:</strong>${dealer.salesArea.join('、')}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row mb-3">
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>状态:</strong><span class="${dealer.status == 'normal' ? 'status-normal' : 'status-disabled'}">${dealer.status == 'normal' ? '正常' : '禁用'}</span></p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row mb-3">
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>创建人:</strong>${dealer.creator}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="col-md-6">
|
|
|
|
|
+ <p><strong>创建时间:</strong>${dealer.createTime}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ `;
|
|
|
|
|
+ // 显示模态框
|
|
|
|
|
+ detailModal.show();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 编辑经销商
|
|
|
|
|
+ function editDealer(dealerId) {
|
|
|
|
|
+ const dealer = dealerData.find(d => d.id === dealerId);
|
|
|
|
|
+ if (dealer) {
|
|
|
|
|
+ $('#dealerId').val(dealer.id);
|
|
|
|
|
+ $('#editDealerCode').val(dealer.id);
|
|
|
|
|
+ $('#editDealerName').val(dealer.name);
|
|
|
|
|
+ $('#editContactPerson').val(dealer.contactPerson);
|
|
|
|
|
+ $('#editContactInfo').val(dealer.contactInfo);
|
|
|
|
|
+ $('#editStatus').prop('checked', dealer.status === 'normal');
|
|
|
|
|
+ $('#statusText').text(dealer.status === 'normal' ? '正常' : '禁用');
|
|
|
|
|
+ selectedAreas = [...dealer.salesArea];
|
|
|
|
|
+ renderSelectedAreas();
|
|
|
|
|
+ $('#editModalLabel').text('编辑经销商');
|
|
|
|
|
+ // 显示模态框
|
|
|
|
|
+ editModal.show();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 分页按钮点击事件
|
|
|
|
|
+ $('.pagination .page-link').on('click', function(e) {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ if (!$(this).parent().hasClass('disabled') && !$(this).parent().hasClass('active')) {
|
|
|
|
|
+ const pageNum = $(this).text();
|
|
|
|
|
+ console.log('跳转到第 ' + pageNum + ' 页');
|
|
|
|
|
+ // 实际应用中,这里应该发送AJAX请求到后端获取对应页码的数据
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化加载数据
|
|
|
|
|
+ renderDealerTable(dealerData);
|
|
|
|
|
+ });
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|