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

添加类型筛选功能，优化筛选栏布局和创建时间换行显示

pull/9/head
徐飞洋 1 month ago
parent
fb3a97b7d5
commit
791122985b
1 changed files with 139 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 155
      web/src/main/resources/static/index.html

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

@ -159,7 +159,7 @@
display: flex;
gap: 10px;
align-items: center;
white-space: nowrap;
flex-wrap: wrap;
}
.filter-bar span {
@ -464,6 +464,13 @@
white-space: nowrap;
}
/* 允许创建时间列换行 */
.table-container th:nth-child(5),
.table-container td:nth-child(5) {
white-space: normal;
min-width: 120px;
}
/* 筛选容器样式，添加横向滚动 */
.filter-container {
width: 100%;
@ -495,7 +502,7 @@
.filter-container .filter-bar {
width: auto;
min-width: 100%;
flex-wrap: nowrap;
flex-wrap: wrap;
padding: 10px 0;
}
@ -597,9 +604,18 @@
<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>
<select id="personalManagerFilter" onchange="filterPersonalByManager()" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<option value="">全部</option>
<option value="">全部联系人</option>
</select>
<span style="margin-left: 20px; font-size: 14px;">类型:</span>
<select id="personalTypeFilter" onchange="filterPersonalByType()" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<option value="">全部类型</option>
<option value="wholesale">批发贸易类</option>
<option value="e-commerce">电商平台类</option>
<option value="delivery_retail">配送零售类</option>
<option value="defective_egg">次品蛋专项类</option>
<option value="other">其他类型</option>
</select>
<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;">
@ -607,12 +623,14 @@
<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>
<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;">
<option value="10">10条/页</option>
<option value="50">50条/页</option>
<option value="100">100条/页</option>
</select>
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px;">
<span style="font-size: 14px; color: #666;">总数: <span id="personalTotalCount">0</span> 条</span>
<select id="personalPageSize" onchange="changePersonalPageSize()" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<option value="10">10条/页</option>
<option value="50">50条/页</option>
<option value="100">100条/页</option>
</select>
</div>
</div>
</div>
@ -653,7 +671,16 @@
<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>
<select id="publicManagerFilter" onchange="filterPublicByManager()" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<option value="">全部</option>
<option value="">全部联系人</option>
</select>
<span style="margin-left: 20px; font-size: 14px;">类型:</span>
<select id="publicTypeFilter" onchange="filterPublicByType()" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<option value="">全部类型</option>
<option value="wholesale">批发贸易类</option>
<option value="e-commerce">电商平台类</option>
<option value="delivery_retail">配送零售类</option>
<option value="defective_egg">次品蛋专项类</option>
<option value="other">其他类型</option>
</select>
<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;">
@ -661,11 +688,13 @@
<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>
<select id="publicPageSize" onchange="changePublicPageSize()" style="margin-left: auto;">
<option value="10">10条/页</option>
<option value="50">50条/页</option>
<option value="100">100条/页</option>
</select>
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px;">
<select id="publicPageSize" onchange="changePublicPageSize()" style="padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
<option value="10">10条/页</option>
<option value="50">50条/页</option>
<option value="100">100条/页</option>
</select>
</div>
</div>
</div>
@ -715,6 +744,7 @@
var currentPhoneSearch = null;
var currentStartDate = null;
var currentEndDate = null;
var currentTypeFilter = null;
function init() {
var savedUserInfo = localStorage.getItem('userInfo');
@ -931,6 +961,13 @@
}
}
// 按类型筛选
if (currentTypeFilter) {
if (user.type !== currentTypeFilter) {
return false;
}
}
// 其他情况，不过滤
return true;
});
@ -1367,6 +1404,63 @@
tagsContainer.appendChild(tag);
}
// 显示类型筛选标签
if (currentTypeFilter) {
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 typeText = '';
switch(currentTypeFilter) {
case 'wholesale': typeText = '批发贸易类'; break;
case 'e-commerce': typeText = '电商平台类'; break;
case 'delivery_retail': typeText = '配送零售类'; break;
case 'defective_egg': typeText = '次品蛋专项类'; break;
case 'other': typeText = '其他类型'; break;
default: typeText = currentTypeFilter;
}
var tagText = document.createTextNode('类型: ' + typeText);
tag.appendChild(tagText);
var closeButton = document.createElement('span');
closeButton.textContent = ' ×';
closeButton.style.cssText = `
margin-left: 8px;
cursor: pointer;
font-weight: bold;
`;
closeButton.onclick = function() {
currentTypeFilter = null;
document.getElementById(tableType + 'TypeFilter').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');
@ -1553,6 +1647,30 @@
updateFilterTags('public');
}
// 筛选个人数据类型
function filterPersonalByType() {
var type = document.getElementById('personalTypeFilter').value;
currentTypeFilter = type || null;
personalPage = 1; // 重置为第一页
// 总是加载所有数据以便筛选
loadAllPersonalData();
// 更新筛选标签
updateFilterTags('personal');
}
// 筛选公海池数据类型
function filterPublicByType() {
var type = document.getElementById('publicTypeFilter').value;
currentTypeFilter = type || null;
publicPage = 1; // 重置为第一页
loadPublicData(); // 重新加载公海池数据
// 更新筛选标签
updateFilterTags('public');
}
function loadPublicData() {
var userRole = userInfo.loginInfo.projectName;
var usersManagements = userInfo.usersManagements;
@ -1587,6 +1705,11 @@
params.endDate = currentEndDate;
}
// 添加类型筛选参数
if (currentTypeFilter) {
params.type = currentTypeFilter;
}
var url = '/KH/api/users/public?' + objectToQueryString(params);
var xhr = new XMLHttpRequest();

Write Preview
Loading…
Cancel
Save