You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1206 lines
50 KiB
1206 lines
50 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>客户管理系统</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
}
|
|
|
|
.header {
|
|
background-color: #1890ff;
|
|
color: white;
|
|
padding: 15px 30px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-info {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.user-info span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.logout-btn {
|
|
background: transparent;
|
|
color: white;
|
|
border: 1px solid white;
|
|
padding: 5px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
background-color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 30px auto;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
.user-details {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.user-details h2 {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.data-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section-header {
|
|
background-color: #f0f2f5;
|
|
padding: 0;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.tab-container {
|
|
display: flex;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.tab-button {
|
|
flex: 1;
|
|
padding: 15px 20px;
|
|
background-color: #fafafa;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tab-button.active {
|
|
background-color: white;
|
|
color: #1890ff;
|
|
border-bottom-color: #1890ff;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.section-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.filter-bar {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-bar button {
|
|
padding: 8px 12px;
|
|
background-color: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-bar button:hover {
|
|
background-color: #40a9ff;
|
|
}
|
|
|
|
.filter-bar select {
|
|
padding: 8px 16px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background-color: white;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 12px center;
|
|
background-size: 12px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
.filter-bar select:hover {
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
.filter-bar select:focus {
|
|
outline: none;
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
/* 弹窗下拉框样式优化 */
|
|
#returnType {
|
|
padding: 10px 16px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background-color: white;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 12px center;
|
|
background-size: 12px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
th:nth-child(1), td:nth-child(1) {
|
|
max-width: 120px;
|
|
width: 120px;
|
|
}
|
|
|
|
th:nth-child(2), td:nth-child(2) {
|
|
max-width: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
th:nth-child(3), td:nth-child(3) {
|
|
max-width: 80px;
|
|
width: 80px;
|
|
}
|
|
|
|
th:nth-child(4), td:nth-child(4) {
|
|
max-width: 130px;
|
|
width: 130px;
|
|
}
|
|
|
|
th:nth-child(5), td:nth-child(5) {
|
|
max-width: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
th:nth-child(6), td:nth-child(6) {
|
|
max-width: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
th:nth-child(7), td:nth-child(7) {
|
|
max-width: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
th:nth-child(8), td:nth-child(8) {
|
|
max-width: 120px;
|
|
width: 120px;
|
|
}
|
|
|
|
th {
|
|
background-color: #fafafa;
|
|
padding: 12px;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
color: #333;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
color: #666;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.pagination button {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pagination button.active {
|
|
background-color: #1890ff;
|
|
color: white;
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
.pagination button:disabled {
|
|
color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.user-info {
|
|
position: static;
|
|
margin-top: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
|
|
/* 动画效果 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
/* 弹窗输入框和下拉框样式优化 */
|
|
#followupContent:focus {
|
|
outline: none;
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
#returnType:hover {
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
#returnType:focus {
|
|
outline: none;
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
/* 弹窗按钮样式优化 */
|
|
#followupModal button:hover,
|
|
#returnModal button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
#followupModal button:active,
|
|
#returnModal button:active {
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>客户管理系统</h1>
|
|
<div class="user-info">
|
|
<span id="userRole"></span>
|
|
<span id="userName"></span>
|
|
<button class="logout-btn" onclick="logout()">退出登录</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="user-details">
|
|
<h2>用户信息</h2>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label">职位名称</div>
|
|
<div class="detail-value" id="projectName"></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">用户名</div>
|
|
<div class="detail-value" id="userNameDetail"></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">负责公司</div>
|
|
<div class="detail-value" id="managerCompany"></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">负责部门</div>
|
|
<div class="detail-value" id="managerDepartment"></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">负责小组</div>
|
|
<div class="detail-value" id="organization"></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">角色</div>
|
|
<div class="detail-value" id="role"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-section">
|
|
<div class="section-header">
|
|
<div class="tab-container">
|
|
<button class="tab-button active" onclick="switchTab('personal', this)">个人数据</button>
|
|
<button class="tab-button" onclick="switchTab('public', this)">公海池数据</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人数据标签页 -->
|
|
<div class="section-content">
|
|
<div id="personal" class="tab-content active">
|
|
<div class="filter-bar">
|
|
<button onclick="loadPersonalData()">刷新数据</button>
|
|
<button onclick="filterPersonalData('all')" style="background-color: #52c41a;">全部</button>
|
|
<button onclick="filterPersonalData('followed')" style="background-color: #faad14;">已跟进</button>
|
|
<button onclick="filterPersonalData('unfollowed')" style="background-color: #ff4d4f;">未跟进</button>
|
|
<select id="personalPageSize" onchange="changePersonalPageSize()">
|
|
<option value="10">10条/页</option>
|
|
<option value="50">50条/页</option>
|
|
<option value="100">100条/页</option>
|
|
</select>
|
|
</div>
|
|
<table id="personalTable">
|
|
<thead>
|
|
<tr>
|
|
<th>昵称</th>
|
|
<th>手机号</th>
|
|
<th>类型</th>
|
|
<th>创建时间</th>
|
|
<th>跟进内容</th>
|
|
<th>响应时间</th>
|
|
<th id="managerHeader">负责人</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="personalBody">
|
|
</tbody>
|
|
</table>
|
|
<div id="personalEmpty" class="empty-state">暂无个人数据</div>
|
|
<div class="pagination" id="personalPagination">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公海池数据标签页 -->
|
|
<div id="public" class="tab-content">
|
|
<div class="filter-bar">
|
|
<button onclick="loadPublicData()">刷新数据</button>
|
|
<select id="publicPageSize" onchange="changePublicPageSize()">
|
|
<option value="10">10条/页</option>
|
|
<option value="50">50条/页</option>
|
|
<option value="100">100条/页</option>
|
|
</select>
|
|
</div>
|
|
<table id="publicTable">
|
|
<thead>
|
|
<tr>
|
|
<th>昵称</th>
|
|
<th>手机号</th>
|
|
<th>类型</th>
|
|
<th>创建时间</th>
|
|
<th>跟进内容</th>
|
|
<th>响应时间</th>
|
|
<th id="publicManagerHeader">负责人</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="publicBody">
|
|
</tbody>
|
|
</table>
|
|
<div id="publicEmpty" class="empty-state">暂无公海池数据</div>
|
|
<div class="pagination" id="publicPagination">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var userInfo = null;
|
|
var personalPage = 1;
|
|
var publicPage = 1;
|
|
var personalPageSize = 10;
|
|
var publicPageSize = 10;
|
|
var personalFilter = 'all'; // all, followed, unfollowed
|
|
|
|
function init() {
|
|
var savedUserInfo = localStorage.getItem('userInfo');
|
|
if (!savedUserInfo) {
|
|
window.location.href = 'login.html';
|
|
return;
|
|
}
|
|
userInfo = JSON.parse(savedUserInfo);
|
|
displayUserInfo();
|
|
loadPersonalData();
|
|
}
|
|
|
|
function displayUserInfo() {
|
|
var loginInfo = userInfo.loginInfo;
|
|
var personnel = userInfo.personnel;
|
|
var usersManagements = userInfo.usersManagements;
|
|
|
|
document.getElementById('userRole').innerHTML = loginInfo.projectName;
|
|
document.getElementById('userName').innerHTML = loginInfo.userName;
|
|
document.getElementById('projectName').innerHTML = loginInfo.projectName;
|
|
document.getElementById('userNameDetail').innerHTML = loginInfo.userName;
|
|
document.getElementById('managerCompany').innerHTML = personnel ? personnel.managercompany : '-';
|
|
document.getElementById('managerDepartment').innerHTML = personnel ? personnel.managerdepartment : '-';
|
|
document.getElementById('organization').innerHTML = personnel ? personnel.organization : '-';
|
|
document.getElementById('role').innerHTML = usersManagements ? usersManagements.role : '-';
|
|
}
|
|
|
|
function switchTab(tabName, button) {
|
|
// 切换标签按钮状态
|
|
try {
|
|
var tabButtons = document.getElementsByClassName('tab-button');
|
|
for (var i = 0; i < tabButtons.length; i++) {
|
|
tabButtons[i].classList.remove('active');
|
|
}
|
|
if (button) {
|
|
button.classList.add('active');
|
|
} else {
|
|
// 如果没有传入按钮，手动激活对应标签
|
|
var tabButtons = document.getElementsByClassName('tab-button');
|
|
for (var i = 0; i < tabButtons.length; i++) {
|
|
if (tabButtons[i].onclick.toString().indexOf("'" + tabName + "'") > -1) {
|
|
tabButtons[i].classList.add('active');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('切换标签按钮状态失败:', e);
|
|
}
|
|
|
|
// 切换内容显示
|
|
try {
|
|
var tabContents = document.getElementsByClassName('tab-content');
|
|
for (var i = 0; i < tabContents.length; i++) {
|
|
tabContents[i].classList.remove('active');
|
|
}
|
|
var tabContent = document.getElementById(tabName);
|
|
if (tabContent) {
|
|
tabContent.classList.add('active');
|
|
}
|
|
} catch (e) {
|
|
console.error('切换内容显示失败:', e);
|
|
}
|
|
|
|
// 加载对应数据
|
|
try {
|
|
if (tabName === 'personal') {
|
|
loadPersonalData();
|
|
} else if (tabName === 'public') {
|
|
loadPublicData();
|
|
}
|
|
} catch (e) {
|
|
console.error('加载数据失败:', e);
|
|
}
|
|
}
|
|
|
|
function loadPersonalData() {
|
|
var userRole = userInfo.loginInfo.projectName;
|
|
var userName = userInfo.loginInfo.userName;
|
|
var usersManagements = userInfo.usersManagements;
|
|
|
|
// 构建查询参数
|
|
var params = {
|
|
page: personalPage,
|
|
size: personalPageSize,
|
|
userRole: userRole,
|
|
followup: userName,
|
|
userName: userName,
|
|
managercompany: usersManagements.managercompany || '',
|
|
managerdepartment: usersManagements.managerdepartment || '',
|
|
organization: usersManagements.organization || '',
|
|
role: usersManagements.role || ''
|
|
};
|
|
|
|
var url = 'http://8.137.125.67:8083/KH/api/users?' + objectToQueryString(params);
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
displayPersonalData(data);
|
|
renderPersonalPagination(data.page, data.pages);
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function filterPersonalData(filter) {
|
|
personalFilter = filter;
|
|
personalPage = 1; // 重置为第一页
|
|
loadPersonalData();
|
|
}
|
|
|
|
function loadPublicData() {
|
|
var userRole = userInfo.loginInfo.projectName;
|
|
var usersManagements = userInfo.usersManagements;
|
|
|
|
// 构建查询参数
|
|
var params = {
|
|
page: publicPage,
|
|
size: publicPageSize,
|
|
userRole: userRole,
|
|
userName: usersManagements.userName || '',
|
|
managercompany: usersManagements.managercompany || '',
|
|
managerdepartment: usersManagements.managerdepartment || '',
|
|
organization: usersManagements.organization || '',
|
|
role: usersManagements.role || ''
|
|
};
|
|
|
|
var url = 'http://8.137.125.67:8083/KH/api/users/public?' + objectToQueryString(params);
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
displayPublicData(data);
|
|
renderPublicPagination(data.page, data.pages);
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function objectToQueryString(obj) {
|
|
return Object.keys(obj)
|
|
.map(key => key + '=' + encodeURIComponent(obj[key]))
|
|
.join('&');
|
|
}
|
|
|
|
// 跟进弹窗HTML
|
|
var followupModalHTML = `
|
|
<div id="followupModal" 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: 450px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease;">
|
|
<h3 style="margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #333; text-align: center;">跟进客户</h3>
|
|
<input type="hidden" id="followupUserId">
|
|
<div style="margin-bottom: 20px;">
|
|
<label style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #666;">客户名称</label>
|
|
<input type="text" id="followupUserName" disabled style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; background-color: #f5f5f5;">
|
|
</div>
|
|
<div style="margin-bottom: 20px;">
|
|
<label style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #666;">电话号码</label>
|
|
<input type="text" id="followupPhone" disabled style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; background-color: #f5f5f5;">
|
|
</div>
|
|
<div style="margin-bottom: 24px;">
|
|
<label style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #666;">跟进内容</label>
|
|
<textarea id="followupContent" rows="4" style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; resize: vertical; transition: all 0.3s ease;"></textarea>
|
|
</div>
|
|
<div style="text-align: right; margin-top: 24px;">
|
|
<button onclick="closeFollowupModal()" style="padding: 10px 16px; margin-right: 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; color: #666; background-color: white; cursor: pointer; transition: all 0.3s ease;">取消</button>
|
|
<button onclick="saveFollowup()" style="padding: 10px 16px; 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 returnModalHTML = `
|
|
<div id="returnModal" 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: 450px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease;">
|
|
<h3 style="margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #333; text-align: center;">归还客户</h3>
|
|
<input type="hidden" id="returnUserId">
|
|
<div style="margin-bottom: 20px;">
|
|
<label style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #666;">客户名称</label>
|
|
<input type="text" id="returnUserName" disabled style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; background-color: #f5f5f5;">
|
|
</div>
|
|
<div style="margin-bottom: 20px;">
|
|
<label style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #666;">电话号码</label>
|
|
<input type="text" id="returnPhone" disabled style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; background-color: #f5f5f5;">
|
|
</div>
|
|
<div style="margin-bottom: 24px;">
|
|
<label style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #666;">客户类型</label>
|
|
<select id="returnType" style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.3s ease;">
|
|
<option value="buyer">大贸易客户</option>
|
|
<option value="seller">供应商</option>
|
|
<option value="both">两者都是</option>
|
|
<option value="smalls">小品种客户</option>
|
|
</select>
|
|
</div>
|
|
<div style="text-align: right; margin-top: 24px;">
|
|
<button onclick="closeReturnModal()" style="padding: 10px 16px; margin-right: 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; color: #666; background-color: white; cursor: pointer; transition: all 0.3s ease;">取消</button>
|
|
<button onclick="saveReturn()" style="padding: 10px 16px; border: none; border-radius: 4px; font-size: 14px; color: white; background-color: #faad14; cursor: pointer; transition: all 0.3s ease;">归还</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 简道云弹窗HTML
|
|
var jianDaoYunModalHTML = `
|
|
<div id="jianDaoYunModal" 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: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease;">
|
|
<h3 style="margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #333; text-align: center;">简道云</h3>
|
|
<input type="hidden" id="jianDaoYunUserId">
|
|
<div style="margin-bottom: 24px; text-align: center;">
|
|
<p style="font-size: 14px; color: #666;">是否将客户拉入你的简道云？</p>
|
|
</div>
|
|
<div style="text-align: right; margin-top: 24px;">
|
|
<button onclick="closeJianDaoYunModal()" style="padding: 10px 16px; margin-right: 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; color: #666; background-color: white; cursor: pointer; transition: all 0.3s ease;">取消</button>
|
|
<button onclick="saveJianDaoYun()" style="padding: 10px 16px; border: none; border-radius: 4px; font-size: 14px; color: white; background-color: #52c41a; cursor: pointer; transition: all 0.3s ease;">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 添加弹窗到页面
|
|
document.body.insertAdjacentHTML('beforeend', followupModalHTML);
|
|
document.body.insertAdjacentHTML('beforeend', returnModalHTML);
|
|
document.body.insertAdjacentHTML('beforeend', jianDaoYunModalHTML);
|
|
|
|
function formatDateTime(dateTimeString) {
|
|
if (!dateTimeString) return '-';
|
|
var date = new Date(dateTimeString);
|
|
var year = date.getFullYear();
|
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
var day = date.getDate().toString().padStart(2, '0');
|
|
var hours = date.getHours().toString().padStart(2, '0');
|
|
var minutes = date.getMinutes().toString().padStart(2, '0');
|
|
var seconds = date.getSeconds().toString().padStart(2, '0');
|
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
|
}
|
|
|
|
function mapUserType(type) {
|
|
var typeMap = {
|
|
'buyer': '大贸易客户',
|
|
'seller': '供应商',
|
|
'both': '两者都是',
|
|
'smalls': '小品种客户'
|
|
};
|
|
return typeMap[type] || type;
|
|
}
|
|
|
|
function calculateResponseTime(createdAt, followupAt) {
|
|
if (!createdAt || !followupAt) return '-';
|
|
var createTime = new Date(createdAt);
|
|
var followupTime = new Date(followupAt);
|
|
var diffMs = followupTime - createTime;
|
|
var diffMins = Math.floor(diffMs / 60000);
|
|
var diffHours = Math.floor(diffMins / 60);
|
|
var diffDays = Math.floor(diffHours / 24);
|
|
|
|
if (diffDays > 0) {
|
|
return diffDays + '天' + (diffHours % 24) + '小时';
|
|
} else if (diffHours > 0) {
|
|
return diffHours + '小时' + (diffMins % 60) + '分钟';
|
|
} else if (diffMins > 0) {
|
|
return diffMins + '分钟';
|
|
} else {
|
|
return '少于1分钟';
|
|
}
|
|
}
|
|
|
|
function displayPersonalData(data) {
|
|
var personalBody = document.getElementById('personalBody');
|
|
var personalEmpty = document.getElementById('personalEmpty');
|
|
var managerHeader = document.getElementById('managerHeader');
|
|
var personalPagination = document.getElementById('personalPagination');
|
|
personalBody.innerHTML = '';
|
|
|
|
// 检查用户角色，只对管理员显示负责人列
|
|
var userRole = userInfo.loginInfo.projectName;
|
|
if (userRole === '管理员') {
|
|
managerHeader.style.display = 'table-cell';
|
|
} else {
|
|
managerHeader.style.display = 'none';
|
|
}
|
|
|
|
console.log('后端返回的数据量:', data.users ? data.users.length : 0);
|
|
console.log('总记录数:', data.total);
|
|
console.log('当前页码:', data.page);
|
|
console.log('每页大小:', data.size);
|
|
console.log('总页数:', data.pages);
|
|
|
|
if (data.users && data.users.length > 0) {
|
|
personalEmpty.style.display = 'none';
|
|
var filteredUsers = data.users.filter(function(user) {
|
|
// 过滤掉同事类型
|
|
if (user.type === 'Colleague') {
|
|
return false;
|
|
}
|
|
|
|
// 根据筛选条件过滤
|
|
if (personalFilter === 'followed') {
|
|
return user.followup && user.followup !== '';
|
|
} else if (personalFilter === 'unfollowed') {
|
|
return !user.followup || user.followup === '';
|
|
}
|
|
// 'all' 或其他情况，不过滤
|
|
return true;
|
|
});
|
|
|
|
console.log('过滤后的数据量:', filteredUsers.length);
|
|
|
|
if (filteredUsers.length > 0) {
|
|
for (var i = 0; i < filteredUsers.length; i++) {
|
|
var user = filteredUsers[i];
|
|
var responseTime = calculateResponseTime(user.created_at, user.followup_at);
|
|
var managerCell = '';
|
|
|
|
// 只对管理员显示负责人信息
|
|
if (userRole === '管理员') {
|
|
managerCell = '<td>' + (user.managerName || user.followup || '-') + '</td>';
|
|
} else {
|
|
managerCell = '<td style="display: none;"></td>';
|
|
}
|
|
|
|
// 生成简道云按钮，根据sync_statuss字段决定状态
|
|
var jianDaoYunButton = '';
|
|
if (user.sync_statuss === 0 || user.sync_statuss === 1) {
|
|
// 已写入简道云，显示灰色不可点击按钮
|
|
jianDaoYunButton = '<button style="padding: 4px 8px; background-color: #ccc; color: #666; border: none; border-radius: 4px; font-size: 12px; cursor: not-allowed;" disabled>已写入简道云</button>';
|
|
} else {
|
|
// 未写入简道云，显示正常按钮
|
|
jianDaoYunButton = '<button onclick="openJianDaoYunModal(\'' + (user.userId || '') + '\', \'' + (user.nickName || '') + '\')" style="padding: 4px 8px; background-color: #52c41a; color: white; border: none; border-radius: 4px; font-size: 12px;">简道云</button>';
|
|
}
|
|
|
|
var row = '<tr>' +
|
|
'<td>' + (user.nickName || '-') + '</td>' +
|
|
'<td>' + (user.phoneNumber || '-') + '</td>' +
|
|
'<td>' + mapUserType(user.type) + '</td>' +
|
|
'<td>' + formatDateTime(user.created_at) + '</td>' +
|
|
'<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>' +
|
|
'</tr>';
|
|
personalBody.innerHTML += row;
|
|
|
|
// 有数据时显示分页控件
|
|
personalPagination.style.display = 'flex';
|
|
}
|
|
} else {
|
|
personalEmpty.style.display = 'block';
|
|
// 没有数据时隐藏分页控件
|
|
personalPagination.style.display = 'none';
|
|
}
|
|
} else {
|
|
personalEmpty.style.display = 'block';
|
|
// 没有数据时隐藏分页控件
|
|
personalPagination.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function displayPublicData(data) {
|
|
var publicBody = document.getElementById('publicBody');
|
|
var publicEmpty = document.getElementById('publicEmpty');
|
|
var publicManagerHeader = document.getElementById('publicManagerHeader');
|
|
var publicPagination = document.getElementById('publicPagination'); // New: Get pagination element
|
|
publicBody.innerHTML = '';
|
|
|
|
// 检查用户角色，只对管理员显示负责人列
|
|
var userRole = userInfo.loginInfo.projectName;
|
|
if (userRole === '管理员') {
|
|
publicManagerHeader.style.display = 'table-cell';
|
|
} else {
|
|
publicManagerHeader.style.display = 'none';
|
|
}
|
|
|
|
if (data.users && data.users.length > 0) {
|
|
publicEmpty.style.display = 'none';
|
|
var filteredUsers = data.users.filter(function(user) {
|
|
return user.type !== 'Colleague';
|
|
});
|
|
|
|
if (filteredUsers.length > 0) {
|
|
for (var i = 0; i < filteredUsers.length; i++) {
|
|
var user = filteredUsers[i];
|
|
var responseTime = calculateResponseTime(user.created_at, user.followup_at);
|
|
var managerCell = '';
|
|
|
|
// 只对管理员显示负责人信息
|
|
if (userRole === '管理员') {
|
|
managerCell = '<td>' + (user.managerName || '-') + '</td>';
|
|
} else {
|
|
managerCell = '<td style="display: none;"></td>';
|
|
}
|
|
|
|
var row = '<tr>' +
|
|
'<td>' + (user.nickName || '-') + '</td>' +
|
|
'<td>' + (user.phoneNumber || '-') + '</td>' +
|
|
'<td>' + mapUserType(user.type) + '</td>' +
|
|
'<td>' + formatDateTime(user.created_at) + '</td>' +
|
|
'<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>' +
|
|
'</tr>';
|
|
publicBody.innerHTML += row;
|
|
|
|
// 有数据时显示分页控件
|
|
publicPagination.style.display = 'flex';
|
|
}
|
|
} else {
|
|
publicEmpty.style.display = 'block';
|
|
// 没有数据时隐藏分页控件
|
|
publicPagination.style.display = 'none';
|
|
}
|
|
} else {
|
|
publicEmpty.style.display = 'block';
|
|
// 没有数据时隐藏分页控件
|
|
publicPagination.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function claimCustomer(userId, userName, phone) {
|
|
var usersManagements = userInfo.usersManagements;
|
|
|
|
var params = {
|
|
userId: userId,
|
|
userName: usersManagements.userName || '',
|
|
managercompany: usersManagements.managercompany || '',
|
|
managerdepartment: usersManagements.managerdepartment || '',
|
|
organization: usersManagements.organization || '',
|
|
role: usersManagements.role || ''
|
|
};
|
|
|
|
var url = 'http://8.137.125.67:8083/KH/api/users/claim';
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', url, true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
if (data.success) {
|
|
alert('认领成功');
|
|
// 重新加载数据
|
|
loadPublicData();
|
|
loadPersonalData();
|
|
} else {
|
|
alert('认领失败: ' + data.message);
|
|
}
|
|
}
|
|
};
|
|
xhr.send(JSON.stringify(params));
|
|
}
|
|
|
|
function openFollowupModal(userId, userName, phone) {
|
|
document.getElementById('followupUserId').value = userId;
|
|
document.getElementById('followupUserName').value = userName;
|
|
document.getElementById('followupPhone').value = phone;
|
|
document.getElementById('followupContent').value = '';
|
|
document.getElementById('followupModal').style.display = 'block';
|
|
}
|
|
|
|
function closeFollowupModal() {
|
|
document.getElementById('followupModal').style.display = 'none';
|
|
}
|
|
|
|
function saveFollowup() {
|
|
var userId = document.getElementById('followupUserId').value;
|
|
var content = document.getElementById('followupContent').value;
|
|
var usersManagements = userInfo.usersManagements;
|
|
|
|
if (!content) {
|
|
alert('请填写跟进内容');
|
|
return;
|
|
}
|
|
|
|
var params = {
|
|
userId: userId,
|
|
followup: content,
|
|
userName: usersManagements.userName || '',
|
|
managercompany: usersManagements.managercompany || '',
|
|
managerdepartment: usersManagements.managerdepartment || '',
|
|
organization: usersManagements.organization || '',
|
|
role: usersManagements.role || ''
|
|
};
|
|
|
|
var url = 'http://8.137.125.67:8083/KH/api/users/followup';
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', url, true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
if (data.success) {
|
|
alert('跟进成功');
|
|
closeFollowupModal();
|
|
// 重新加载数据
|
|
if (document.getElementById('personal').classList.contains('active')) {
|
|
loadPersonalData();
|
|
} else {
|
|
loadPublicData();
|
|
}
|
|
} else {
|
|
alert('跟进失败: ' + data.message);
|
|
}
|
|
}
|
|
};
|
|
xhr.send(JSON.stringify(params));
|
|
}
|
|
|
|
function openReturnModal(userId, userName, phone, type) {
|
|
document.getElementById('returnUserId').value = userId;
|
|
document.getElementById('returnUserName').value = userName;
|
|
document.getElementById('returnPhone').value = phone;
|
|
document.getElementById('returnType').value = type || '采购员';
|
|
document.getElementById('returnModal').style.display = 'block';
|
|
}
|
|
|
|
function closeReturnModal() {
|
|
document.getElementById('returnModal').style.display = 'none';
|
|
}
|
|
|
|
function openJianDaoYunModal(userId, userName) {
|
|
document.getElementById('jianDaoYunUserId').value = userId;
|
|
document.getElementById('jianDaoYunModal').style.display = 'block';
|
|
}
|
|
|
|
function closeJianDaoYunModal() {
|
|
document.getElementById('jianDaoYunModal').style.display = 'none';
|
|
}
|
|
|
|
function saveJianDaoYun() {
|
|
var userId = document.getElementById('jianDaoYunUserId').value;
|
|
|
|
var params = {
|
|
userId: userId
|
|
};
|
|
|
|
var url = 'http://8.137.125.67:8083/KH/api/users/jianDaoYun';
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', url, true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
if (data.success) {
|
|
alert('操作成功');
|
|
closeJianDaoYunModal();
|
|
// 重新加载数据
|
|
loadPersonalData();
|
|
} else {
|
|
alert('操作失败: ' + data.message);
|
|
}
|
|
}
|
|
};
|
|
xhr.send(JSON.stringify(params));
|
|
}
|
|
|
|
function saveReturn() {
|
|
var userId = document.getElementById('returnUserId').value;
|
|
var type = document.getElementById('returnType').value;
|
|
|
|
var params = {
|
|
userId: userId,
|
|
type: type
|
|
};
|
|
|
|
var url = 'http://8.137.125.67:8083/KH/api/users/return';
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', url, true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
if (data.success) {
|
|
alert('归还成功');
|
|
closeReturnModal();
|
|
// 重新加载数据
|
|
loadPersonalData();
|
|
loadPublicData();
|
|
} else {
|
|
alert('归还失败: ' + data.message);
|
|
}
|
|
}
|
|
};
|
|
xhr.send(JSON.stringify(params));
|
|
}
|
|
|
|
function renderPersonalPagination(current, total) {
|
|
var pagination = document.getElementById('personalPagination');
|
|
pagination.innerHTML = '';
|
|
|
|
var prevBtn = document.createElement('button');
|
|
prevBtn.innerHTML = '上一页';
|
|
prevBtn.disabled = current == 1;
|
|
prevBtn.onclick = function() {
|
|
if (current > 1) {
|
|
personalPage = current - 1;
|
|
loadPersonalData();
|
|
}
|
|
};
|
|
pagination.appendChild(prevBtn);
|
|
|
|
for (var i = 1; i <= total; i++) {
|
|
var pageBtn = document.createElement('button');
|
|
pageBtn.innerHTML = i;
|
|
pageBtn.className = i == current ? 'active' : '';
|
|
pageBtn.onclick = function() {
|
|
personalPage = parseInt(this.innerHTML);
|
|
loadPersonalData();
|
|
};
|
|
pagination.appendChild(pageBtn);
|
|
}
|
|
|
|
var nextBtn = document.createElement('button');
|
|
nextBtn.innerHTML = '下一页';
|
|
nextBtn.disabled = current == total;
|
|
nextBtn.onclick = function() {
|
|
if (current < total) {
|
|
personalPage = current + 1;
|
|
loadPersonalData();
|
|
}
|
|
};
|
|
pagination.appendChild(nextBtn);
|
|
}
|
|
|
|
function renderPublicPagination(current, total) {
|
|
var pagination = document.getElementById('publicPagination');
|
|
pagination.innerHTML = '';
|
|
|
|
var prevBtn = document.createElement('button');
|
|
prevBtn.innerHTML = '上一页';
|
|
prevBtn.disabled = current == 1;
|
|
prevBtn.onclick = function() {
|
|
if (current > 1) {
|
|
publicPage = current - 1;
|
|
loadPublicData();
|
|
}
|
|
};
|
|
pagination.appendChild(prevBtn);
|
|
|
|
for (var i = 1; i <= total; i++) {
|
|
var pageBtn = document.createElement('button');
|
|
pageBtn.innerHTML = i;
|
|
pageBtn.className = i == current ? 'active' : '';
|
|
pageBtn.onclick = function() {
|
|
publicPage = parseInt(this.innerHTML);
|
|
loadPublicData();
|
|
};
|
|
pagination.appendChild(pageBtn);
|
|
}
|
|
|
|
var nextBtn = document.createElement('button');
|
|
nextBtn.innerHTML = '下一页';
|
|
nextBtn.disabled = current == total;
|
|
nextBtn.onclick = function() {
|
|
if (current < total) {
|
|
publicPage = current + 1;
|
|
loadPublicData();
|
|
}
|
|
};
|
|
pagination.appendChild(nextBtn);
|
|
}
|
|
|
|
function changePersonalPageSize() {
|
|
var select = document.getElementById('personalPageSize');
|
|
personalPageSize = parseInt(select.value);
|
|
personalPage = 1; // 重置为第一页
|
|
loadPersonalData();
|
|
}
|
|
|
|
function changePublicPageSize() {
|
|
var select = document.getElementById('publicPageSize');
|
|
publicPageSize = parseInt(select.value);
|
|
publicPage = 1; // 重置为第一页
|
|
loadPublicData();
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem('userInfo');
|
|
window.location.href = 'login.html';
|
|
}
|
|
|
|
window.onload = init;
|
|
</script>
|
|
</body>
|
|
</html>
|