xiaji/fzjg_local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
XIAJI-NEW\qax
2025-11-11 13:12:38 +08:00
parent f0cbf2c2ec
commit 40be56a31b
3 changed files with 185 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
fzjgact/huodong/__pycache__/views.cpython-311.pyc
View File

Binary file not shown.

328
fzjgact/huodong/templates/contact_list.html
View File

@@ -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">
<label class="text-sm font-medium">分支机构</label>
<!-- 分支机构筛选（带搜索的多选下拉框） -->
<div class="flex flex-col w-full md:w-1/2">
<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">
<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>
<input type="text" name="category" class="mt-1 p-2 border rounded" placeholder="输入类别名称筛选" value="{{ selected_category|default:'' }}">
</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 (firstMatch) {
firstMatch.scrollIntoView({block: 'nearest'});
firstMatch.classList.add('bg-blue-50');
setTimeout(() => firstMatch.classList.remove('bg-blue-50'), 1000);
}
}
// 选择分支机构选项
document.querySelectorAll('.branch-option').forEach(option => {
option.addEventListener('click', function() {
const name = this.dataset.name;
const id = this.dataset.id;
document.getElementById('branchSearchInput').value = name;
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);
// 显示或隐藏无结果提示
if (searchText && !hasMatch) {
noResult.classList.remove('hidden');
} else {
closeCategoryDropdown();
noResult.classList.add('hidden');
}
}
function closeCategoryDropdown() {
const dropdown = document.getElementById('categoryDropdownContent');
const arrow = document.getElementById('categoryArrowIcon');
dropdown.classList.add('hidden');
arrow.classList.remove('rotate-180');
document.removeEventListener('click', handleCategoryOutsideClick);
}
function handleCategoryOutsideClick(event) {
const container = document.getElementById('categorySelectContainer');
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 = '';
// 选择分支机构选项（保留原有功能以兼容单选操作）
document.querySelectorAll('.branch-option').forEach(option => {
option.addEventListener('click', function(e) {
// 如果点击的是复选框，不重复处理
if (e.target.type === 'checkbox') {
return;
}
});
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();
const checkbox = this.querySelector('.branch-checkbox');
checkbox.checked = !checkbox.checked;
// 触发复选框的change事件
checkbox.dispatchEvent(new Event('change'));
});
});
</script>

13
fzjgact/huodong/views.py
View File

@@ -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:
filters &= Q(branch_id=branch_id)
# 分支机构筛选（支持多选）
if branches_param:
# 将逗号分隔的字符串转换为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
}