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

优化客户详情功能，添加客户等级映射和公海池数据支持

pull/5/head
Default User 1 month ago
parent
0a139f92ed
commit
3769aa0ac1
1 changed files with 192 additions and 3 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. 195
      web/src/main/resources/static/index.html

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

@ -700,6 +700,7 @@
var managersList = [];
var allPersonalData = [];
var allPublicData = [];
var isLoadingAllData = false;
var currentManagerFilter = null;
var currentFilterTable = 'personal';
@ -976,7 +977,7 @@
'<td>' + (user.followup || '-') + '</td>' +
'<td>' + responseTime + '</td>' +
managerCell +
'<td><button onclick="openFollowupModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\')" style="padding: 4px 8px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 12px;">跟进</button> <button onclick="openReturnModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\', \'' + (user.type || '') + '\')" style="padding: 4px 8px; background-color: #faad14; color: white; border: none; border-radius: 4px; font-size: 12px;">归还</button> ' + jianDaoYunButton + '</td>' +
'<td><button onclick="openDetailModal(\'' + (user.userId || '') + '\')" style="padding: 4px 8px; background-color: #13c2c2; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">详情</button><button onclick="openFollowupModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\')" style="padding: 4px 8px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">跟进</button> <button onclick="openReturnModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\', \'' + (user.type || '') + '\')" style="padding: 4px 8px; background-color: #faad14; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">归还</button> ' + jianDaoYunButton + '</td>' +
'</tr>';
personalBody.innerHTML += row;
@ -1550,6 +1551,10 @@
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
// 保存公海池数据到全局变量
if (data.users) {
allPublicData = data.users;
}
displayPublicData(data);
renderPublicPagination(data.page, data.pages);
}
@ -1947,6 +1952,104 @@
</div>
`;
// 详情弹窗HTML
var detailModalHTML = `
<div id="detailModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; z-index: 1000; animation: fadeIn 0.3s ease;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 24px; border-radius: 8px; width: 600px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease; max-height: 90vh; overflow-y: auto;">
<h3 style="margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #333; text-align: center;">客户详情</h3>
<div style="margin-bottom: 24px;">
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户ID：</span>
<span id="detailUserId" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户名称：</span>
<span id="detailUserName" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">电话号码：</span>
<span id="detailPhone" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户类型：</span>
<span id="detailType" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">创建时间：</span>
<span id="detailCreatedAt" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">跟进内容：</span>
<span id="detailFollowup" style="font-size: 14px; color: #333; max-width: 400px; text-align: right;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">响应时间：</span>
<span id="detailResponseTime" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">负责人：</span>
<span id="detailManagerName" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">简道云状态：</span>
<span id="detailSyncStatus" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户等级：</span>
<span id="detailLevel" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户地区：</span>
<span id="detailRegion" style="font-size: 14px; color: #333;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">详细地址：</span>
<span id="detailDetailedAddress" style="font-size: 14px; color: #333; max-width: 400px; text-align: right;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户公司：</span>
<span id="detailCompany" style="font-size: 14px; color: #333; max-width: 400px; text-align: right;"></span>
</div>
</div>
<div style="margin-bottom: 16px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span style="font-size: 14px; font-weight: 500; color: #666;">客户需求：</span>
<span id="detailDemand" style="font-size: 14px; color: #333;"></span>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 24px;">
<button onclick="closeDetailModal()" style="padding: 10px 24px; border: none; border-radius: 4px; font-size: 14px; color: white; background-color: #1890ff; cursor: pointer; transition: all 0.3s ease;">关闭</button>
</div>
</div>
</div>
`;
// 分配弹窗HTML
var assignModalHTML = `
<div id="assignModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; z-index: 1000; animation: fadeIn 0.3s ease;">
@ -2026,6 +2129,7 @@
document.body.insertAdjacentHTML('beforeend', followupModalHTML);
document.body.insertAdjacentHTML('beforeend', returnModalHTML);
document.body.insertAdjacentHTML('beforeend', jianDaoYunModalHTML);
document.body.insertAdjacentHTML('beforeend', detailModalHTML);
document.body.insertAdjacentHTML('beforeend', assignModalHTML);
document.body.insertAdjacentHTML('beforeend', alertModalHTML);
document.body.insertAdjacentHTML('beforeend', typeHelpModalHTML);
@ -2050,6 +2154,8 @@
closeAssignModal();
} else if (modalId === 'typeHelpModal') {
closeTypeHelpModal();
} else if (modalId === 'detailModal') {
closeDetailModal();
}
}
});
@ -2063,6 +2169,7 @@
addModalOutsideClose('alertModal');
addModalOutsideClose('assignModal');
addModalOutsideClose('typeHelpModal');
addModalOutsideClose('detailModal');
function showTypeHelp() {
document.getElementById('typeHelpModal').style.display = 'block';
@ -2187,6 +2294,17 @@
return typeMap[type] || type;
}
function mapUserLevel(level) {
var levelMap = {
'important': 'A-重要客户',
'ordinary': 'B-普通客户',
'low_value': 'C-低价值客户',
'logistics': 'D-物流自提客户',
'unclassified': '-'
};
return levelMap[level] || level;
}
function calculateResponseTime(createdAt, followupAt) {
if (!createdAt || !followupAt) return '-';
var createTime = new Date(createdAt);
@ -2325,7 +2443,7 @@
'<td>' + (user.followup || '-') + '</td>' +
'<td>' + responseTime + '</td>' +
managerCell +
'<td><button onclick="openFollowupModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\')" style="padding: 4px 8px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 12px;">跟进</button> <button onclick="openReturnModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\', \'' + (user.type || '') + '\')" style="padding: 4px 8px; background-color: #faad14; color: white; border: none; border-radius: 4px; font-size: 12px;">归还</button> ' + jianDaoYunButton + '</td>' +
'<td><button onclick="openDetailModal(\'' + (user.userId || '') + '\')" style="padding: 4px 8px; background-color: #13c2c2; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">详情</button><button onclick="openFollowupModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\')" style="padding: 4px 8px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">跟进</button> <button onclick="openReturnModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\', \'' + (user.type || '') + '\')" style="padding: 4px 8px; background-color: #faad14; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">归还</button> ' + jianDaoYunButton + '</td>' +
'</tr>';
personalBody.innerHTML += row;
@ -2408,7 +2526,7 @@
'<td>' + (user.followup || '-') + '</td>' +
'<td>' + responseTime + '</td>' +
managerCell +
'<td><button onclick="claimCustomer(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\')" style="padding: 4px 8px; background-color: #52c41a; color: white; border: none; border-radius: 4px; font-size: 12px;">认领</button></td>' +
'<td><button onclick="openDetailModal(\'' + (user.userId || '') + '\')" style="padding: 4px 8px; background-color: #13c2c2; color: white; border: none; border-radius: 4px; font-size: 12px; margin-right: 4px;">详情</button><button onclick="claimCustomer(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\', \'' + (user.phoneNumber || '') + '\')" style="padding: 4px 8px; background-color: #52c41a; color: white; border: none; border-radius: 4px; font-size: 12px;">认领</button></td>' +
'</tr>';
publicBody.innerHTML += row;
@ -2605,6 +2723,77 @@
document.body.style.overflow = 'auto';
}
function openDetailModal(userId) {
// 根据userId查找用户数据
var user = null;
// 首先在个人数据中查找
if (allPersonalData.length > 0) {
for (var i = 0; i < allPersonalData.length; i++) {
if (allPersonalData[i].userId === userId) {
user = allPersonalData[i];
break;
}
}
}
// 如果在个人数据中找不到，尝试在公海池数据中查找
if (!user && allPublicData.length > 0) {
for (var i = 0; i < allPublicData.length; i++) {
if (allPublicData[i].userId === userId) {
user = allPublicData[i];
break;
}
}
}
if (!user) {
// 如果在所有数据源中都找不到
showAlert('未找到该客户数据');
return;
}
// 填充客户详情数据
document.getElementById('detailUserId').textContent = user.userId || '-';
document.getElementById('detailUserName').textContent = user.nickName || '-';
document.getElementById('detailPhone').textContent = user.phoneNumber || '-';
document.getElementById('detailType').textContent = mapUserType(user.type) || '-';
document.getElementById('detailCreatedAt').textContent = formatDateTime(user.created_at) || '-';
document.getElementById('detailFollowup').textContent = user.followup || '-';
var responseTime = calculateResponseTime(user.created_at, user.followup_at);
document.getElementById('detailResponseTime').textContent = responseTime;
document.getElementById('detailManagerName').textContent = user.managerName || '-';
// 显示简道云状态
var syncStatus = '';
if (user.sync_statuss === 0 || user.sync_statuss === 1) {
syncStatus = '已写入简道云';
} else {
syncStatus = '未写入简道云';
}
document.getElementById('detailSyncStatus').textContent = syncStatus;
// 显示其他可能的字段
document.getElementById('detailLevel').textContent = mapUserLevel(user.level) || '-';
document.getElementById('detailRegion').textContent = user.region || '-';
document.getElementById('detailDetailedAddress').textContent = user.detailedaddress || '-';
document.getElementById('detailCompany').textContent = user.company || '-';
document.getElementById('detailDemand').textContent = user.demand || '-';
// 显示弹窗
document.getElementById('detailModal').style.display = 'block';
// 防止背景滚动
document.body.style.overflow = 'hidden';
}
function closeDetailModal() {
document.getElementById('detailModal').style.display = 'none';
// 恢复背景滚动
document.body.style.overflow = 'auto';
}
function saveJianDaoYun() {
var userId = document.getElementById('jianDaoYunUserId').value;
var usersManagements = userInfo.usersManagements;

Write Preview
Loading…
Cancel
Save