增加在“联系人信息”这里，可以多选的js代码，并增加一个清空多选的按钮。

fzjgact/huodong/templates/contact_list.html

@@ -7,9 +7,9 @@
     <!-- 新增筛选表单 -->
     <form method="GET" class="mb-4 p-4 bg-gray-100 rounded-lg" id="filterForm">
         <div class="flex flex-wrap gap-4">
-            <!-- 分支机构筛选（带搜索的下拉框） -->
+            <!-- 分支机构筛选（带搜索的多选下拉框） -->
-            <div class="flex flex-col w-full md:w-1/3">
+            <div class="flex flex-col w-full md:w-1/2">
-                <label class="text-sm font-medium">分支机构</label>
+                <label class="text-sm font-medium">分支机构（可多选）</label>
                 <div class="relative" id="branchSelectContainer">
                     <!-- 选择框主体 -->
                     <div class="relative">
@@ -17,15 +17,19 @@
                             type="text" 
                             id="branchSearchInput" 
                             class="w-full pl-4 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
-                            placeholder="输入分支机构名称搜索..."
+                            placeholder="点击选择分支机构（可多选）..."
                             readonly
                             onclick="toggleBranchDropdown()"
                         >
                         <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="branchArrowIcon">
                             <i class="fa fa-chevron-down"></i>
                         </span>
-                        <!-- 隐藏的分支机构ID输入框（用于表单提交） -->
+                        <!-- 选中的机构显示 -->
-                        <input type="hidden" name="branch" id="selectedBranchId">
+                        <div id="selectedBranches" class="absolute z-5 mt-1 w-full bg-white rounded-lg shadow-md hidden max-h-32 overflow-y-auto">
+                            <div class="p-2">
+                                <div class="flex flex-wrap gap-1" id="branchTags"></div>
+                            </div>
+                        </div>
                     </div>
                     
                     <!-- 下拉内容 -->
@@ -46,15 +50,29 @@
                         <div id="branchOptionsList" class="max-h-60 overflow-y-auto">
                             <ul>
                                 {% for branch in branches %}
-                                <li class="branch-option px-4 py-2.5 hover:bg-gray-100 cursor-pointer text-sm transition-colors" 
+                                <li class="branch-option px-4 py-2.5 hover:bg-gray-100 cursor-pointer text-sm transition-colors flex items-center" 
                                     data-id="{{ branch.id }}" 
                                     data-name="{{ branch.name }}">
+                                    <input type="checkbox" class="mr-2 branch-checkbox" value="{{ branch.id }}">
                                     {{ branch.name }}
                                 </li>
                                 {% endfor %}
                             </ul>
                         </div>
                         
+                        <!-- 操作按钮 -->
+                        <div class="p-2 border-t border-gray-100 flex gap-2">
+                            <button type="button" class="flex-1 px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600" onclick="selectAllBranches()">全选</button>
+                            <button type="button" class="flex-1 px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600" onclick="clearAllBranches()">清空</button>
+                        </div>
+                        
+                        <!-- 独立的清空全部选择按钮 -->
+                        <div class="p-2 border-t border-gray-100">
+                            <button type="button" class="w-full px-3 py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 font-medium" onclick="clearAllBranches()" title="清空所有机构选择">
+                                <i class="fa fa-refresh mr-1"></i>清空全部选择
+                            </button>
+                        </div>
+                        
                         <!-- 无结果提示 -->
                         <div id="branchNoResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
                             没有找到匹配的分支机构
@@ -63,54 +81,10 @@
                 </div>
             </div>
 
-            <!-- 联系人类别筛选（改为带搜索的下拉框） -->
+            <!-- 联系人类别筛选（保持原结构） -->
             <div class="flex flex-col w-full md:w-1/3">
                 <label class="text-sm font-medium">联系人类别</label>
-                <div class="relative" id="categorySelectContainer">
+                <input type="text" name="category" class="mt-1 p-2 border rounded" placeholder="输入类别名称筛选" value="{{ selected_category|default:'' }}">
-                    <div class="relative">
-                        <input 
-                            type="text"
-                            id="categorySearchInput"
-                            class="w-full pl-4 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
-                            placeholder="输入类别名称搜索..."
-                            readonly
-                            onclick="toggleCategoryDropdown()"
-                            value="{{ selected_category|default:'' }}"
-                        >
-                        <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="categoryArrowIcon">
-                            <i class="fa fa-chevron-down"></i>
-                        </span>
-                        <input type="hidden" name="category" id="selectedCategory">
-                    </div>
-                    
-                    <div id="categoryDropdownContent" class="absolute z-10 mt-1 w-full bg-white rounded-lg shadow-md overflow-hidden hidden">
-                        <div class="p-2 border-b border-gray-100">
-                            <input 
-                                type="text"
-                                id="categoryFilterInput"
-                                class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-blue-300 focus:border-blue-500 outline-none text-sm"
-                                placeholder="搜索联系人类别..."
-                                oninput="filterCategoryOptions()"
-                                autofocus
-                            >
-                        </div>
-                        
-                        <div id="categoryOptionsList" class="max-h-60 overflow-y-auto">
-                            <ul>
-                                {% for cat in categories %}
-                                <li class="category-option px-4 py-2.5 hover:bg-gray-100 cursor-pointer text-sm transition-colors" 
-                                    data-value="{{ cat }}">
-                                    {{ cat }}
-                                </li>
-                                {% endfor %}
-                            </ul>
-                        </div>
-                        
-                        <div id="categoryNoResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
-                            没有找到匹配的类别
-                        </div>
-                    </div>
-                </div>
             </div>
 
             <!-- 联系人姓名筛选（保持原结构） -->
@@ -119,10 +93,16 @@
                 <input type="text" name="contact_name" class="mt-1 p-2 border rounded" placeholder="输入联系人姓名筛选" value="{{ selected_contact_name|default:'' }}">
             </div>
             
-            <div class="flex items-end">
+            <div class="flex items-end gap-2">
                 <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">筛选</button>
+                <button type="button" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors duration-200 font-medium" onclick="clearFilters()">
+                    <i class="fa fa-times mr-1"></i>清空筛选
+                </button>
             </div>
         </div>
+        
+        <!-- 隐藏的分支机构ID输入框（用于表单提交） -->
+        <input type="hidden" name="branches" id="selectedBranchesInput">
     </form>
 
     <table class="min-w-full border-collapse border border-gray-300">
@@ -154,6 +134,133 @@
 </div>
 
 <script>
+    // 选中的分支机构
+    let selectedBranches = new Set();
+    
+    // 初始化页面
+    document.addEventListener('DOMContentLoaded', function() {
+        // 初始化选中的机构
+        initializeSelectedBranches();
+        
+        // 绑定复选框事件
+        bindCheckboxEvents();
+    });
+    
+    // 初始化选中的机构（从表单参数中读取）
+    function initializeSelectedBranches() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const branchesParam = urlParams.get('branches');
+        if (branchesParam) {
+            const branchIds = branchesParam.split(',');
+            branchIds.forEach(id => {
+                selectedBranches.add(id);
+                const checkbox = document.querySelector(`input[value="${id}"]`);
+                if (checkbox) {
+                    checkbox.checked = true;
+                }
+            });
+        }
+        updateBranchSelectionUI();
+    }
+    
+    // 绑定复选框事件
+    function bindCheckboxEvents() {
+        document.querySelectorAll('.branch-checkbox').forEach(checkbox => {
+            checkbox.addEventListener('change', function() {
+                const branchId = this.value;
+                const branchName = this.closest('.branch-option').dataset.name;
+                
+                if (this.checked) {
+                    selectedBranches.add(branchId);
+                } else {
+                    selectedBranches.delete(branchId);
+                }
+                
+                updateBranchSelectionUI();
+            });
+        });
+    }
+    
+    // 更新机构选择UI
+    function updateBranchSelectionUI() {
+        const selectedBranchesInput = document.getElementById('selectedBranchesInput');
+        const branchSearchInput = document.getElementById('branchSearchInput');
+        const selectedBranchesDiv = document.getElementById('selectedBranches');
+        const branchTags = document.getElementById('branchTags');
+        
+        // 更新隐藏输入框
+        if (selectedBranches.size > 0) {
+            selectedBranchesInput.value = Array.from(selectedBranches).join(',');
+            branchSearchInput.placeholder = `已选择 ${selectedBranches.size} 个机构`;
+        } else {
+            selectedBranchesInput.value = '';
+            branchSearchInput.placeholder = '点击选择分支机构（可多选）...';
+        }
+        
+        // 更新显示的标签
+        branchTags.innerHTML = '';
+        selectedBranches.forEach(branchId => {
+            const branchName = document.querySelector(`input[value="${branchId}"]`).closest('.branch-option').dataset.name;
+            const tag = document.createElement('span');
+            tag.className = 'inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800';
+            tag.innerHTML = `
+                ${branchName}
+                <button type="button" class="ml-1 text-blue-600 hover:text-blue-800" onclick="removeBranch('${branchId}')">
+                    <i class="fa fa-times"></i>
+                </button>
+            `;
+            branchTags.appendChild(tag);
+        });
+        
+        // 控制选中机构显示区域
+        if (selectedBranches.size > 0) {
+            selectedBranchesDiv.classList.remove('hidden');
+        } else {
+            selectedBranchesDiv.classList.add('hidden');
+        }
+    }
+    
+    // 移除机构
+    function removeBranch(branchId) {
+        selectedBranches.delete(branchId);
+        const checkbox = document.querySelector(`input[value="${branchId}"]`);
+        if (checkbox) {
+            checkbox.checked = false;
+        }
+        updateBranchSelectionUI();
+    }
+    
+    // 全选分支机构
+    function selectAllBranches() {
+        selectedBranches.clear();
+        document.querySelectorAll('.branch-checkbox').forEach(checkbox => {
+            checkbox.checked = true;
+            selectedBranches.add(checkbox.value);
+        });
+        updateBranchSelectionUI();
+    }
+    
+    // 清空所有分支机构选择
+    function clearAllBranches() {
+        selectedBranches.clear();
+        document.querySelectorAll('.branch-checkbox').forEach(checkbox => {
+            checkbox.checked = false;
+        });
+        updateBranchSelectionUI();
+    }
+    
+    // 清空所有筛选
+    function clearFilters() {
+        // 清空所有表单字段
+        document.getElementById('filterForm').reset();
+        
+        // 清空机构选择
+        clearAllBranches();
+        
+        // 提交清空后的表单
+        window.location.href = window.location.pathname;
+    }
+    
     // 控制分支机构下拉框显示/隐藏
     function toggleBranchDropdown() {
         const dropdown = document.getElementById('branchDropdownContent');
@@ -192,118 +299,37 @@
         const noResult = document.getElementById('branchNoResult');
         let hasMatch = false;
 
-        let firstMatch = null;
         options.forEach(option => {
             const name = option.dataset.name.toLowerCase();
             if (name.includes(searchText)) {
                 option.style.display = 'block';
                 hasMatch = true;
-                if (!firstMatch) firstMatch = option;
             } else {
                 option.style.display = 'none';
             }
         });
 
-        noResult.classList.toggle('hidden', hasMatch);
+        // 显示或隐藏无结果提示
-        // 自动滚动到第一个匹配项
+        if (searchText && !hasMatch) {
-        if (firstMatch) {
+            noResult.classList.remove('hidden');
-            firstMatch.scrollIntoView({block: 'nearest'});
+        } else {
-            firstMatch.classList.add('bg-blue-50');
+            noResult.classList.add('hidden');
-            setTimeout(() => firstMatch.classList.remove('bg-blue-50'), 1000);
         }
     }
 
-    // 选择分支机构选项
+    // 选择分支机构选项（保留原有功能以兼容单选操作）
     document.querySelectorAll('.branch-option').forEach(option => {
-        option.addEventListener('click', function() {
+        option.addEventListener('click', function(e) {
-            const name = this.dataset.name;
+            // 如果点击的是复选框，不重复处理
-            const id = this.dataset.id;
+            if (e.target.type === 'checkbox') {
-            document.getElementById('branchSearchInput').value = name;
+                return;
-            document.getElementById('selectedBranchId').value = id;
-            closeBranchDropdown();
-        });
-    });
-
-    // 键盘导航（可选）
-    document.getElementById('branchFilterInput').addEventListener('keydown', function(e) {
-        const options = document.querySelectorAll('.branch-option:not([style*="display: "])');
-        const active = document.querySelector('.branch-option.bg-gray-100');
-        let index = -1;
-
-        if (active) index = Array.from(options).indexOf(active);
-
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            if (active) active.classList.remove('bg-gray-100');
-            const next = (index + 1) % options.length;
-            options[next]?.classList.add('bg-gray-100');
-            options[next]?.scrollIntoView({ block: 'nearest' });
-        } else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            if (active) active.classList.remove('bg-gray-100');
-            const prev = index > 0 ? index - 1 : options.length - 1;
-            options[prev]?.classList.add('bg-gray-100');
-            options[prev]?.scrollIntoView({ block: 'nearest' });
-        } else if (e.key === 'Enter') {
-            e.preventDefault();
-            active?.click();
-        }
-    });
-
-    // 新增联系人类别下拉框控制函数
-    function toggleCategoryDropdown() {
-        const dropdown = document.getElementById('categoryDropdownContent');
-        const arrow = document.getElementById('categoryArrowIcon');
-        if (dropdown.classList.contains('hidden')) {
-            dropdown.classList.remove('hidden');
-            arrow.classList.add('rotate-180');
-            document.getElementById('categoryFilterInput').focus();
-            document.addEventListener('click', handleCategoryOutsideClick);
-        } else {
-            closeCategoryDropdown();
-        }
             }
             
-    function closeCategoryDropdown() {
+            const checkbox = this.querySelector('.branch-checkbox');
-        const dropdown = document.getElementById('categoryDropdownContent');
+            checkbox.checked = !checkbox.checked;
-        const arrow = document.getElementById('categoryArrowIcon');
-        dropdown.classList.add('hidden');
-        arrow.classList.remove('rotate-180');
-        document.removeEventListener('click', handleCategoryOutsideClick);
-    }
             
-    function handleCategoryOutsideClick(event) {
+            // 触发复选框的change事件
-        const container = document.getElementById('categorySelectContainer');
+            checkbox.dispatchEvent(new Event('change'));
-        if (!container.contains(event.target)) {
-            closeCategoryDropdown();
-        }
-    }
-
-    function filterCategoryOptions() {
-        const searchText = document.getElementById('categoryFilterInput').value.toLowerCase();
-        const options = document.querySelectorAll('.category-option');
-        const noResult = document.getElementById('categoryNoResult');
-        let hasMatch = false;
-
-        options.forEach(option => {
-            const value = option.dataset.value.toLowerCase();
-            if (value.includes(searchText)) {
-                option.style.display = 'block';
-                hasMatch = true;
-            } else {
-                option.style.display = '';
-            }
-        });
-
-        noResult.classList.toggle('hidden', hasMatch || !searchText);
-    }
-
-    document.querySelectorAll('.category-option').forEach(option => {
-        option.addEventListener('click', function() {
-            const value = this.dataset.value;
-            document.getElementById('categorySearchInput').value = value;
-            document.getElementById('selectedCategory').value = value;
-            closeCategoryDropdown();
         });
     });
 </script>

fzjgact/huodong/views.py

@@ -356,16 +356,19 @@ def equipment_images(request):
 
 def contact_list(request):
     # 获取筛选参数
-    branch_id = request.GET.get('branch')
+    branches_param = request.GET.get('branches')  # 支持多机构选择，使用逗号分隔的ID字符串
     category = request.GET.get('category')
     contact_name = request.GET.get('contact_name')
     
     # 构建查询条件
     filters = Q()
     
-    # 分支机构筛选
+    # 分支机构筛选（支持多选）
-    if branch_id:
+    if branches_param:
-        filters &= Q(branch_id=branch_id)
+        # 将逗号分隔的字符串转换为ID列表
+        branch_ids = [bid.strip() for bid in branches_param.split(',') if bid.strip().isdigit()]
+        if branch_ids:
+            filters &= Q(branch_id__in=branch_ids)
     
     # 联系人类别筛选
     if category:
@@ -386,7 +389,7 @@ def contact_list(request):
         'contacts': contacts,
         'branches': branches,
         'categories': categories,
-        'selected_branch': branch_id,
+        'selected_branches': branches_param,  # 传递选中的机构ID字符串
         'selected_category': category,
         'selected_contact_name': contact_name
     }