SwtTt29
/
web-follow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加筛选功能和筛选标签

pull/2/head
徐飞洋 2 months ago
parent
c5850a36b2
commit
8cfcdebb40
1 changed files with 351 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 376
      web/src/main/resources/static/index.html

376
web/src/main/resources/static/index.html
View File

@ -482,6 +482,16 @@
<button onclick="filterPersonalData('followed')" style="background-color: #faad14;">已跟进</button> <button onclick="filterPersonalData('followed')" style="background-color: #faad14;">已跟进</button>
<button onclick="filterPersonalData('unfollowed')" style="background-color: #ff4d4f;">未跟进</button> <button onclick="filterPersonalData('unfollowed')" style="background-color: #ff4d4f;">未跟进</button>
<button id="assignButton" onclick="openAssignModal()" style="background-color: #722ed1;">分配</button> <button id="assignButton" onclick="openAssignModal()" style="background-color: #722ed1;">分配</button>
<input type="text" id="personalPhoneSearch" placeholder="搜索手机号" style="margin-left: 20px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<button onclick="searchPersonalByPhone()" style="margin-left: 8px; padding: 4px 12px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px;">搜索</button>
<button onclick="resetPersonalPhoneSearch()" style="margin-left: 8px; padding: 4px 12px; background-color: #666; color: white; border: none; border-radius: 4px; font-size: 14px;">重置</button>
<span style="margin-left: 20px; font-size: 14px;">创建时间:</span>
<input type="date" id="personalStartDate" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<span style="margin: 0 8px; font-size: 14px;">至</span>
<input type="date" id="personalEndDate" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<button onclick="filterPersonalByDate()" style="margin-left: 8px; padding: 4px 12px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px;">筛选</button>
<button onclick="resetPersonalDateFilter()" style="margin-left: 8px; padding: 4px 12px; background-color: #666; color: white; border: none; border-radius: 4px; font-size: 14px;">重置</button>
<div id="personalFilterTags" style="margin-left: 20px; display: inline-block;"></div>
<span style="margin-left: 20px; font-size: 14px; color: #666;">总数: <span id="personalTotalCount">0</span> 条</span> <span style="margin-left: 20px; font-size: 14px; color: #666;">总数: <span id="personalTotalCount">0</span> 条</span>
<select id="personalPageSize" onchange="changePersonalPageSize()" style="margin-left: auto;"> <select id="personalPageSize" onchange="changePersonalPageSize()" style="margin-left: auto;">
<option value="10">10条/页</option> <option value="10">10条/页</option>
@ -499,7 +509,7 @@
<th>创建时间</th> <th>创建时间</th>
<th>跟进内容</th> <th>跟进内容</th>
<th>响应时间</th> <th>响应时间</th>
<th id="managerHeader" onclick="toggleManagerFilter()">负责人</th> <th id="managerHeader" onclick="toggleManagerFilter()" style="cursor: pointer;">负责人</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
@ -516,7 +526,17 @@
<div class="filter-bar"> <div class="filter-bar">
<button onclick="loadPublicData()">刷新数据</button> <button onclick="loadPublicData()">刷新数据</button>
<button id="publicAssignButton" onclick="openAssignModal()" style="background-color: #722ed1;">分配</button> <button id="publicAssignButton" onclick="openAssignModal()" style="background-color: #722ed1;">分配</button>
<select id="publicPageSize" onchange="changePublicPageSize()"> <input type="text" id="publicPhoneSearch" placeholder="搜索手机号" style="margin-left: 20px; padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<button onclick="searchPublicByPhone()" style="margin-left: 8px; padding: 4px 12px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px;">搜索</button>
<button onclick="resetPublicPhoneSearch()" style="margin-left: 8px; padding: 4px 12px; background-color: #666; color: white; border: none; border-radius: 4px; font-size: 14px;">重置</button>
<span style="margin-left: 20px; font-size: 14px;">创建时间:</span>
<input type="date" id="publicStartDate" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<span style="margin: 0 8px; font-size: 14px;">至</span>
<input type="date" id="publicEndDate" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<button onclick="filterPublicByDate()" style="margin-left: 8px; padding: 4px 12px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px;">筛选</button>
<button onclick="resetPublicDateFilter()" style="margin-left: 8px; padding: 4px 12px; background-color: #666; color: white; border: none; border-radius: 4px; font-size: 14px;">重置</button>
<div id="publicFilterTags" style="margin-left: 20px; display: inline-block;"></div>
<select id="publicPageSize" onchange="changePublicPageSize()" style="margin-left: auto;">
<option value="10">10条/页</option> <option value="10">10条/页</option>
<option value="50">50条/页</option> <option value="50">50条/页</option>
<option value="100">100条/页</option> <option value="100">100条/页</option>
@ -532,7 +552,7 @@
<th>创建时间</th> <th>创建时间</th>
<th>跟进内容</th> <th>跟进内容</th>
<th>响应时间</th> <th>响应时间</th>
<th id="publicManagerHeader" onclick="toggleManagerFilter('public')">负责人</th> <th id="publicManagerHeader" onclick="toggleManagerFilter('public')" style="cursor: pointer;">负责人</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
@ -560,6 +580,9 @@
var isLoadingAllData = false; var isLoadingAllData = false;
var currentManagerFilter = null; var currentManagerFilter = null;
var currentFilterTable = 'personal'; var currentFilterTable = 'personal';
var currentPhoneSearch = null;
var currentStartDate = null;
var currentEndDate = null;
function init() { function init() {
var savedUserInfo = localStorage.getItem('userInfo'); var savedUserInfo = localStorage.getItem('userInfo');
@ -677,6 +700,19 @@
params.managerName = currentManagerFilter; params.managerName = currentManagerFilter;
} }
// 添加手机号搜索参数
if (currentPhoneSearch) {
params.phoneNumber = currentPhoneSearch;
}
// 添加日期范围搜索参数
if (currentStartDate) {
params.startDate = currentStartDate;
}
if (currentEndDate) {
params.endDate = currentEndDate;
}
var url = '/KH/api/users?' + objectToQueryString(params); var url = '/KH/api/users?' + objectToQueryString(params);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
@ -784,7 +820,37 @@
// 按负责人筛选 // 按负责人筛选
if (currentManagerFilter) { if (currentManagerFilter) {
return user.managerName === currentManagerFilter; if (user.managerName !== currentManagerFilter) {
return false;
}
}
// 按手机号搜索
if (currentPhoneSearch) {
if (!user.phoneNumber || !user.phoneNumber.includes(currentPhoneSearch)) {
return false;
}
}
// 按创建时间范围筛选
if (currentStartDate || currentEndDate) {
var userCreatedAt = new Date(user.created_at);
if (currentStartDate) {
var startDate = new Date(currentStartDate);
if (userCreatedAt < startDate) {
return false;
}
}
if (currentEndDate) {
var endDate = new Date(currentEndDate);
// 设置结束日期为当天的23:59:59
endDate.setHours(23, 59, 59, 999);
if (userCreatedAt > endDate) {
return false;
}
}
} }
// 其他情况，不过滤 // 其他情况，不过滤
@ -814,7 +880,7 @@
// 只对管理员显示负责人信息 // 只对管理员显示负责人信息
if (userRole === '管理员') { if (userRole === '管理员') {
managerCell = '<td>' + (user.managerName || '-') + '</td>'; managerCell = '<td style="cursor: pointer;">' + (user.managerName || '-') + '</td>';
} else { } else {
managerCell = '<td style="display: none;"></td>'; managerCell = '<td style="display: none;"></td>';
} }
@ -1006,16 +1072,281 @@
} else { } else {
loadAllPersonalData(); // 加载所有数据以便筛选 loadAllPersonalData(); // 加载所有数据以便筛选
} }
// 更新个人表格筛选标签
updateFilterTags('personal');
} else { } else {
// 公海池表格筛选 // 公海池表格筛选
// 公海池数据需要重新加载，因为它可能有分页 // 公海池数据需要重新加载，因为它可能有分页
loadPublicData(); loadPublicData();
// 更新公海池表格筛选标签
updateFilterTags('public');
} }
// 更新表头样式 // 更新表头样式
updateManagerHeaderStyle(); updateManagerHeaderStyle();
} }
// 更新筛选标签
function updateFilterTags(tableType) {
var tagsContainer = document.getElementById(tableType + 'FilterTags');
tagsContainer.innerHTML = '';
// 显示负责人筛选标签
if (currentManagerFilter) {
var tag = document.createElement('span');
tag.style.cssText = `
display: inline-block;
padding: 4px 12px;
background-color: #e6f7ff;
color: #1890ff;
border: 1px solid #91d5ff;
border-radius: 10px;
font-size: 12px;
margin-right: 8px;
position: relative;
`;
var tagText = document.createTextNode('负责人: ' + currentManagerFilter);
tag.appendChild(tagText);
var closeButton = document.createElement('span');
closeButton.textContent = ' ×';
closeButton.style.cssText = `
margin-left: 8px;
cursor: pointer;
font-weight: bold;
`;
closeButton.onclick = function() {
currentManagerFilter = null;
applyManagerFilter();
};
tag.appendChild(closeButton);
tagsContainer.appendChild(tag);
}
// 显示手机号搜索标签
if (currentPhoneSearch) {
var tag = document.createElement('span');
tag.style.cssText = `
display: inline-block;
padding: 4px 12px;
background-color: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
border-radius: 10px;
font-size: 12px;
margin-right: 8px;
position: relative;
`;
var tagText = document.createTextNode('手机号: ' + currentPhoneSearch);
tag.appendChild(tagText);
var closeButton = document.createElement('span');
closeButton.textContent = ' ×';
closeButton.style.cssText = `
margin-left: 8px;
cursor: pointer;
font-weight: bold;
`;
closeButton.onclick = function() {
currentPhoneSearch = null;
document.getElementById(tableType + 'PhoneSearch').value = '';
if (tableType === 'personal') {
personalPage = 1;
if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
displayFilteredPersonalData();
} else {
loadAllPersonalData();
}
} else {
publicPage = 1;
loadPublicData();
}
updateFilterTags(tableType);
};
tag.appendChild(closeButton);
tagsContainer.appendChild(tag);
}
// 显示日期范围筛选标签
if (currentStartDate || currentEndDate) {
var tag = document.createElement('span');
tag.style.cssText = `
display: inline-block;
padding: 4px 12px;
background-color: #fff7e6;
color: #fa8c16;
border: 1px solid #ffd591;
border-radius: 10px;
font-size: 12px;
margin-right: 8px;
position: relative;
`;
var dateText = '';
if (currentStartDate && currentEndDate) {
dateText = '创建时间: ' + currentStartDate + ' 至 ' + currentEndDate;
} else if (currentStartDate) {
dateText = '创建时间: 从 ' + currentStartDate;
} else {
dateText = '创建时间: 至 ' + currentEndDate;
}
var tagText = document.createTextNode(dateText);
tag.appendChild(tagText);
var closeButton = document.createElement('span');
closeButton.textContent = ' ×';
closeButton.style.cssText = `
margin-left: 8px;
cursor: pointer;
font-weight: bold;
`;
closeButton.onclick = function() {
currentStartDate = null;
currentEndDate = null;
document.getElementById(tableType + 'StartDate').value = '';
document.getElementById(tableType + 'EndDate').value = '';
if (tableType === 'personal') {
personalPage = 1;
if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
displayFilteredPersonalData();
} else {
loadAllPersonalData();
}
} else {
publicPage = 1;
loadPublicData();
}
updateFilterTags(tableType);
};
tag.appendChild(closeButton);
tagsContainer.appendChild(tag);
}
}
// 搜索个人数据手机号
function searchPersonalByPhone() {
var searchValue = document.getElementById('personalPhoneSearch').value.trim();
currentPhoneSearch = searchValue || null;
personalPage = 1; // 重置为第一页
if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
displayFilteredPersonalData();
} else {
loadAllPersonalData(); // 加载所有数据以便筛选
}
// 更新筛选标签
updateFilterTags('personal');
}
// 搜索公海池数据手机号
function searchPublicByPhone() {
var searchValue = document.getElementById('publicPhoneSearch').value.trim();
currentPhoneSearch = searchValue || null;
publicPage = 1; // 重置为第一页
loadPublicData(); // 重新加载公海池数据
// 更新筛选标签
updateFilterTags('public');
}
// 重置个人数据手机号搜索
function resetPersonalPhoneSearch() {
document.getElementById('personalPhoneSearch').value = '';
currentPhoneSearch = null;
personalPage = 1; // 重置为第一页
if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
displayFilteredPersonalData();
} else {
loadAllPersonalData(); // 加载所有数据以便筛选
}
// 更新筛选标签
updateFilterTags('personal');
}
// 重置公海池数据手机号搜索
function resetPublicPhoneSearch() {
document.getElementById('publicPhoneSearch').value = '';
currentPhoneSearch = null;
publicPage = 1; // 重置为第一页
loadPublicData(); // 重新加载公海池数据
// 更新筛选标签
updateFilterTags('public');
}
// 筛选个人数据创建时间
function filterPersonalByDate() {
var startDate = document.getElementById('personalStartDate').value;
var endDate = document.getElementById('personalEndDate').value;
currentStartDate = startDate || null;
currentEndDate = endDate || null;
personalPage = 1; // 重置为第一页
if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
displayFilteredPersonalData();
} else {
loadAllPersonalData(); // 加载所有数据以便筛选
}
// 更新筛选标签
updateFilterTags('personal');
}
// 重置个人数据创建时间筛选
function resetPersonalDateFilter() {
document.getElementById('personalStartDate').value = '';
document.getElementById('personalEndDate').value = '';
currentStartDate = null;
currentEndDate = null;
personalPage = 1; // 重置为第一页
if (personalFilter === 'followed' || personalFilter === 'unfollowed') {
displayFilteredPersonalData();
} else {
loadAllPersonalData(); // 加载所有数据以便筛选
}
// 更新筛选标签
updateFilterTags('personal');
}
// 筛选公海池数据创建时间
function filterPublicByDate() {
var startDate = document.getElementById('publicStartDate').value;
var endDate = document.getElementById('publicEndDate').value;
currentStartDate = startDate || null;
currentEndDate = endDate || null;
publicPage = 1; // 重置为第一页
loadPublicData(); // 重新加载公海池数据
// 更新筛选标签
updateFilterTags('public');
}
// 重置公海池数据创建时间筛选
function resetPublicDateFilter() {
document.getElementById('publicStartDate').value = '';
document.getElementById('publicEndDate').value = '';
currentStartDate = null;
currentEndDate = null;
publicPage = 1; // 重置为第一页
loadPublicData(); // 重新加载公海池数据
// 更新筛选标签
updateFilterTags('public');
}
function loadPublicData() { function loadPublicData() {
var userRole = userInfo.loginInfo.projectName; var userRole = userInfo.loginInfo.projectName;
var usersManagements = userInfo.usersManagements; var usersManagements = userInfo.usersManagements;
@ -1037,6 +1368,19 @@
params.managerName = currentManagerFilter; params.managerName = currentManagerFilter;
} }
// 添加手机号搜索参数
if (currentPhoneSearch) {
params.phoneNumber = currentPhoneSearch;
}
// 添加日期范围搜索参数
if (currentStartDate) {
params.startDate = currentStartDate;
}
if (currentEndDate) {
params.endDate = currentEndDate;
}
var url = '/KH/api/users/public?' + objectToQueryString(params); var url = '/KH/api/users/public?' + objectToQueryString(params);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
@ -1792,7 +2136,7 @@
// 只对管理员显示负责人信息 // 只对管理员显示负责人信息
if (userRole === '管理员') { if (userRole === '管理员') {
managerCell = '<td>' + (user.managerName || '-') + '</td>'; managerCell = '<td style="cursor: pointer;">' + (user.managerName || '-') + '</td>';
} else { } else {
managerCell = '<td style="display: none;"></td>'; managerCell = '<td style="display: none;"></td>';
} }
@ -2090,25 +2434,7 @@
} }
function updateManagerHeaderStyle() { function updateManagerHeaderStyle() {
// 更新个人表格表头样式 // 移除表头样式更新，保持默认样式
var managerHeader = document.getElementById('managerHeader');
if (currentFilterTable === 'personal' && currentManagerFilter) {
managerHeader.style.backgroundColor = '#e6f7ff';
managerHeader.style.color = '#1890ff';
} else {
managerHeader.style.backgroundColor = '';
managerHeader.style.color = '';
}
// 更新公海池表格表头样式
var publicManagerHeader = document.getElementById('publicManagerHeader');
if (currentFilterTable === 'public' && currentManagerFilter) {
publicManagerHeader.style.backgroundColor = '#e6f7ff';
publicManagerHeader.style.color = '#1890ff';
} else {
publicManagerHeader.style.backgroundColor = '';
publicManagerHeader.style.color = '';
}
} }
function closeAlertModal() { function closeAlertModal() {

Write Preview
Loading…
Cancel
Save