1420 lines
54 KiB
HTML
1420 lines
54 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>CRM客户管理系统</title>
|
||
<link rel="stylesheet" href="/static/css/style.css?v=1.2" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||
/>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="logo">
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 50 43"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M30.8799 0.0634766C32.1561 0.191098 35.0914 0.25518 40.1953 3.12598C46.9838 7.51557 49.4463 14.7383 49.8291 17.8008C50.297 20.8846 50.084 28.5324 45.4902 34.4531C40.8966 40.3736 33.8362 42.194 30.8799 42.3643H9.95215V31.1357C4.45541 31.1354 0 26.6803 0 21.1836C2.62861e-05 15.6869 4.45542 11.2308 9.95215 11.2305V0H30.8799V0.0634766ZM30.8799 11.3564C28.7219 11.1986 15.882 11.302 11.4531 11.3428C16.2383 12.0662 19.9062 16.1966 19.9062 21.1836C19.9062 26.1365 16.288 30.2432 11.5508 31.0078H30.8799C33.2407 30.4973 39.1744 27.7535 38.6641 20.2891C38.2557 14.3174 33.3045 11.8457 30.8799 11.3564Z"
|
||
fill="currentColor"
|
||
></path>
|
||
</svg>
|
||
<span>CRM系统</span>
|
||
</div>
|
||
<button class="sidebar-toggle" id="sidebarToggle" title="收起侧边栏">
|
||
<i class="fas fa-chevron-left"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<!-- 数据概览分组 -->
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">
|
||
<i class="fas fa-chart-bar"></i>
|
||
<span>数据概览</span>
|
||
</div>
|
||
<a href="#" class="nav-item active" data-section="dashboard">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>数据仪表板</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 客户管理分组 -->
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">
|
||
<i class="fas fa-users"></i>
|
||
<span>客户管理</span>
|
||
</div>
|
||
<a href="#" class="nav-item" data-section="trialPeriods">
|
||
<i class="fas fa-clock"></i>
|
||
<span>客户信息</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-section="customer">
|
||
<i class="fas fa-user-plus"></i>
|
||
<span>每周进度</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-section="followup">
|
||
<i class="fas fa-tasks"></i>
|
||
<span>客户跟进</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="user-info">
|
||
<i class="fas fa-user-circle"></i>
|
||
<span>管理员</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<div class="main-content">
|
||
<!-- Top Header -->
|
||
<header class="top-header">
|
||
<div class="header-left">
|
||
<button class="menu-toggle" id="menuToggle">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<h1 id="pageTitle">数据仪表板</h1>
|
||
</div>
|
||
<div class="header-right">
|
||
<!-- Global Search Box -->
|
||
<div class="global-search-container">
|
||
<div class="search-box">
|
||
<i class="fas fa-search"></i>
|
||
<input
|
||
type="text"
|
||
id="globalSearchInput"
|
||
placeholder="搜索客户、进度、跟进..."
|
||
autocomplete="off"
|
||
/>
|
||
<kbd class="search-shortcut">⌘K</kbd>
|
||
</div>
|
||
<!-- Search Results Dropdown -->
|
||
<div
|
||
class="search-results-dropdown"
|
||
id="searchResultsDropdown"
|
||
style="display: none"
|
||
>
|
||
<div class="search-history" id="searchHistory">
|
||
<div class="search-section-title">
|
||
<i class="fas fa-history"></i> 搜索历史
|
||
</div>
|
||
<div
|
||
class="search-history-items"
|
||
id="searchHistoryItems"
|
||
></div>
|
||
</div>
|
||
<div class="search-results" id="searchResults">
|
||
<div class="search-section-title">
|
||
<i class="fas fa-search"></i> 搜索结果
|
||
</div>
|
||
<div class="search-results-items" id="searchResultsItems">
|
||
<div class="search-empty">输入关键词开始搜索...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Add Button -->
|
||
<div class="quick-add-dropdown-container">
|
||
<button class="btn-primary quick-add-btn" id="headerQuickAddBtn">
|
||
<i class="fas fa-plus"></i>
|
||
<span>快速添加</span>
|
||
<i class="fas fa-caret-down"></i>
|
||
</button>
|
||
<div
|
||
class="quick-add-dropdown"
|
||
id="headerQuickAddDropdown"
|
||
style="display: none"
|
||
>
|
||
<div class="quick-add-menu-item" data-action="trial">
|
||
<i class="fas fa-clock"></i>
|
||
<span>添加试用客户</span>
|
||
</div>
|
||
<div class="quick-add-menu-item" data-action="customer">
|
||
<i class="fas fa-user-plus"></i>
|
||
<span>添加客户进度</span>
|
||
</div>
|
||
<div class="quick-add-menu-item" data-action="followup">
|
||
<i class="fas fa-tasks"></i>
|
||
<span>添加跟进记录</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="icon-btn" id="logoutBtn" title="退出登录">
|
||
<i class="fas fa-sign-out-alt"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Content Area -->
|
||
<main class="content-area">
|
||
<!-- Customer Management Section -->
|
||
<section id="customerSection" class="content-section">
|
||
<div class="action-bar">
|
||
<button id="addCustomerBtn" class="btn-primary">
|
||
<i class="fas fa-plus"></i>
|
||
添加客户进度
|
||
</button>
|
||
<button id="importBtn" class="btn-secondary">
|
||
<i class="fas fa-file-import"></i>
|
||
导入CSV
|
||
</button>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<div class="filter-group">
|
||
<label for="customerFilter">筛选客户：</label>
|
||
<select id="customerFilter" class="filter-select">
|
||
<option value="">全部客户</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="typeFilter">筛选类型：</label>
|
||
<select id="typeFilter" class="filter-select">
|
||
<option value="">全部类型</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="statusProgressFilter">状态与进度：</label>
|
||
<select id="statusProgressFilter" class="filter-select">
|
||
<option value="">全部状态</option>
|
||
<option value="已完成">已完成</option>
|
||
<option value="进行中">进行中</option>
|
||
<option value="待排期">待排期</option>
|
||
<option value="已驳回">已驳回</option>
|
||
<option value="已上线">已上线</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="customerStartDate">开始日期：</label>
|
||
<input
|
||
type="date"
|
||
id="customerStartDate"
|
||
class="filter-input"
|
||
/>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="customerEndDate">结束日期：</label>
|
||
<input type="date" id="customerEndDate" class="filter-input" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Customer List -->
|
||
<div class="card table-card">
|
||
<div class="card-header">
|
||
<!-- Tab Navigation (Left Aligned) -->
|
||
<div class="customer-tabs">
|
||
<button
|
||
class="customer-tab active"
|
||
data-tab="progress-list"
|
||
id="progressListTab"
|
||
>
|
||
<i class="fas fa-table"></i> 客户进度
|
||
</button>
|
||
<button
|
||
class="customer-tab"
|
||
data-tab="weekly-summary"
|
||
id="weeklySummaryTab"
|
||
>
|
||
<i class="fas fa-file-alt"></i> 周报汇总
|
||
</button>
|
||
</div>
|
||
<div class="table-actions">
|
||
<button
|
||
id="refreshCustomersBtn"
|
||
class="icon-btn"
|
||
title="刷新"
|
||
>
|
||
<i class="fas fa-sync-alt"></i>
|
||
</button>
|
||
<button id="exportCustomersBtn" class="icon-btn" title="导出">
|
||
<i class="fas fa-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- Progress List View (Default) -->
|
||
<div id="progressListView" class="tab-content active">
|
||
<div class="table-responsive">
|
||
<table id="customerTable">
|
||
<thead>
|
||
<tr>
|
||
<th>客户</th>
|
||
<th>咨询时间</th>
|
||
<th>版本</th>
|
||
<th>描述</th>
|
||
<th>解决方案</th>
|
||
<th>类型</th>
|
||
<th>模块</th>
|
||
<th>状态与进度</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="customerTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="pagination">
|
||
<div class="pagination-info">
|
||
<span id="paginationInfo">显示 0-0 共 0 条</span>
|
||
</div>
|
||
<div class="pagination-controls">
|
||
<button id="firstPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-double-left"></i>
|
||
</button>
|
||
<button id="prevPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-left"></i>
|
||
</button>
|
||
<div id="pageNumbers" class="page-numbers"></div>
|
||
<button id="nextPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-right"></i>
|
||
</button>
|
||
<button id="lastPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-double-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="pagination-size">
|
||
<select id="pageSizeSelect">
|
||
<option value="10">10条/页</option>
|
||
<option value="20">20条/页</option>
|
||
<option value="50">50条/页</option>
|
||
<option value="100">100条/页</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Weekly Summary View -->
|
||
<div id="weeklySummaryView" class="tab-content">
|
||
<div class="weekly-summary-header">
|
||
<div class="week-info">
|
||
<i class="fas fa-calendar-week"></i>
|
||
<span id="currentWeekRange">本周</span>
|
||
</div>
|
||
<div class="week-navigation">
|
||
<button
|
||
id="prevWeekBtn"
|
||
class="week-nav-btn"
|
||
title="上一周"
|
||
>
|
||
<i class="fas fa-chevron-left"></i>
|
||
</button>
|
||
<button
|
||
id="currentWeekBtn"
|
||
class="week-nav-btn"
|
||
title="回到本周"
|
||
>
|
||
<i class="fas fa-home"></i> 本周
|
||
</button>
|
||
<button
|
||
id="nextWeekBtn"
|
||
class="week-nav-btn"
|
||
title="下一周"
|
||
>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<button
|
||
id="exportWeeklySummaryBtn"
|
||
class="btn-secondary"
|
||
title="导出周报"
|
||
>
|
||
<i class="fas fa-file-export"></i> 导出周报
|
||
</button>
|
||
</div>
|
||
<div
|
||
id="weeklySummaryContainer"
|
||
class="weekly-summary-container"
|
||
>
|
||
<!-- Weekly summary cards will be rendered here -->
|
||
<div class="weekly-summary-empty">
|
||
<i class="fas fa-inbox"></i>
|
||
<p>本周暂无客户进度数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Trial Periods Section -->
|
||
<section id="trialPeriodsSection" class="content-section">
|
||
<div class="section-title" style="justify-content: flex-end">
|
||
<button id="addTrialBtn" class="btn-primary">
|
||
<i class="fas fa-plus"></i>
|
||
添加客户
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Filter Bar for Trial Periods -->
|
||
<div class="filter-bar">
|
||
<div class="filter-group">
|
||
<label for="trialStartDateFilter">开始日期：</label>
|
||
<input
|
||
type="date"
|
||
id="trialStartDateFilter"
|
||
class="filter-input"
|
||
/>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="trialEndDateFilter">结束日期：</label>
|
||
<input
|
||
type="date"
|
||
id="trialEndDateFilter"
|
||
class="filter-input"
|
||
/>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label for="trialSortOrder">排序：</label>
|
||
<select id="trialSortOrder" class="filter-select">
|
||
<option value="desc">结束时间倒序</option>
|
||
<option value="asc">结束时间顺序</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card trial-periods-container">
|
||
<div class="card-body table-container">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>客户名称</th>
|
||
<th>来源</th>
|
||
<th>意向产品</th>
|
||
<th>状态</th>
|
||
<th>开始时间</th>
|
||
<th>结束时间</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="trialPeriodsBody">
|
||
<!-- Trial periods will be loaded here -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination for trial periods -->
|
||
<div class="pagination">
|
||
<div class="pagination-info">
|
||
<span id="trialPaginationInfo">显示 0-0 共 0 条</span>
|
||
</div>
|
||
<div class="pagination-controls">
|
||
<button id="trialFirstPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-double-left"></i>
|
||
</button>
|
||
<button id="trialPrevPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-left"></i>
|
||
</button>
|
||
<div id="trialPageNumbers" class="page-numbers"></div>
|
||
<button id="trialNextPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-right"></i>
|
||
</button>
|
||
<button id="trialLastPage" class="pagination-btn" disabled>
|
||
<i class="fas fa-angle-double-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="pagination-size">
|
||
<select id="trialPageSizeSelect">
|
||
<option value="10">10条/页</option>
|
||
<option value="20">20条/页</option>
|
||
<option value="50">50条/页</option>
|
||
<option value="100">100条/页</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Dashboard Section -->
|
||
<section id="dashboardSection" class="content-section active">
|
||
<div class="dashboard-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="totalCustomers">0</h3>
|
||
<p>总客户数</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-user-plus"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="newCustomers">0</h3>
|
||
<p>本月新增</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-check-circle"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="completedTasks">0</h3>
|
||
<p>已成交</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card stat-card-highlight">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-user-check"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="followUpCount">0</h3>
|
||
<p>跟进客户次数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-filters">
|
||
<div class="filter-group">
|
||
<label>日期范围:</label>
|
||
<input type="date" id="startDate" />
|
||
<span>至</span>
|
||
<input type="date" id="endDate" />
|
||
<button id="applyFilters" class="btn-primary">
|
||
<i class="fas fa-filter"></i>
|
||
应用筛选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-grid">
|
||
<div class="card chart-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-pie"></i> 数据分布</h3>
|
||
<div class="chart-controls">
|
||
<select id="chartFieldSelect" class="chart-field-select">
|
||
<option value="customerName">客户</option>
|
||
<option value="type">类型</option>
|
||
<option value="module">模块</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<canvas id="statusChart"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="card chart-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-doughnut"></i> 客户类型</h3>
|
||
<div class="chart-controls">
|
||
<select
|
||
id="typeChartFieldSelect"
|
||
class="chart-field-select"
|
||
>
|
||
<option value="customerName">客户</option>
|
||
<option value="type">类型</option>
|
||
<option value="module">模块</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<canvas id="typeChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trend Line Chart -->
|
||
<div class="dashboard-grid" style="margin-top: 20px">
|
||
<div class="card chart-card" style="grid-column: 1 / -1">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-chart-line"></i> 时间趋势分析</h3>
|
||
<div class="chart-controls">
|
||
<select id="trendTypeSelect" class="chart-field-select">
|
||
<option value="customer">客户</option>
|
||
<option value="demand">需求</option>
|
||
<option value="issue">问题</option>
|
||
<option value="all">全部</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<canvas id="trendChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Follow-up Section -->
|
||
<section id="followupSection" class="content-section">
|
||
<!-- Smart Reminder Banner -->
|
||
<div class="smart-reminder" id="followupReminder">
|
||
<div
|
||
class="reminder-item warning"
|
||
id="todayFollowupReminder"
|
||
style="display: none"
|
||
>
|
||
<i class="fas fa-exclamation-circle"></i>
|
||
<span
|
||
>今日待跟进：<strong id="todayFollowupCount">0</strong>
|
||
个客户</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="reminder-item urgent"
|
||
id="overdueReminder"
|
||
style="display: none"
|
||
>
|
||
<i class="fas fa-bell"></i>
|
||
<span
|
||
>逾期未跟进：<strong id="overdueCount">0</strong> 个客户</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-bar">
|
||
<button id="addFollowUpBtn" class="btn-primary">
|
||
<i class="fas fa-plus"></i>
|
||
添加跟进
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Follow-up Form -->
|
||
<div
|
||
class="card"
|
||
id="followupFormCard"
|
||
style="display: none; margin-bottom: 20px"
|
||
>
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-plus-circle"></i> 新增客户跟进</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="followupForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="followupCustomerName"
|
||
>客户名称 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="followupCustomerName"
|
||
name="customerName"
|
||
required
|
||
>
|
||
<option value="">请选择客户</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="followupDealStatus"
|
||
>成交状态 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="followupDealStatus"
|
||
name="dealStatus"
|
||
required
|
||
>
|
||
<option value="">请选择</option>
|
||
<option value="未成交">未成交</option>
|
||
<option value="已成交">已成交</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="followupCustomerLevel"
|
||
>客户级别 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="followupCustomerLevel"
|
||
name="customerLevel"
|
||
required
|
||
>
|
||
<option value="">请选择</option>
|
||
<option value="A">A级 (重点客户)</option>
|
||
<option value="B">B级 (潜在客户)</option>
|
||
<option value="C">C级 (一般客户)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="followupIndustry"
|
||
>客户行业 <span style="color: red">*</span></label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="followupIndustry"
|
||
name="industry"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="followupTime"
|
||
>跟进时间 <span style="color: red">*</span></label
|
||
>
|
||
<input
|
||
type="datetime-local"
|
||
id="followupTime"
|
||
name="followUpTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
确认
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="btn-secondary"
|
||
id="cancelFollowupBtn"
|
||
>
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Follow-up List -->
|
||
<div class="card table-card">
|
||
<div class="card-header">
|
||
<h3><i class="fas fa-list"></i> 客户跟进列表</h3>
|
||
<div class="table-actions">
|
||
<button
|
||
id="refreshFollowupsBtn"
|
||
class="icon-btn"
|
||
title="刷新"
|
||
>
|
||
<i class="fas fa-sync-alt"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table id="followupTable">
|
||
<thead>
|
||
<tr>
|
||
<th>客户名称</th>
|
||
<th>成交状态</th>
|
||
<th>客户级别</th>
|
||
<th>客户行业</th>
|
||
<th>跟进时间</th>
|
||
<th>通知状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="followupTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="pagination">
|
||
<div class="pagination-info">
|
||
<span id="followupPaginationInfo">显示 0-0 共 0 条</span>
|
||
</div>
|
||
<div class="pagination-controls">
|
||
<button
|
||
id="followupFirstPage"
|
||
class="pagination-btn"
|
||
disabled
|
||
>
|
||
<i class="fas fa-angle-double-left"></i>
|
||
</button>
|
||
<button
|
||
id="followupPrevPage"
|
||
class="pagination-btn"
|
||
disabled
|
||
>
|
||
<i class="fas fa-angle-left"></i>
|
||
</button>
|
||
<div id="followupPageNumbers" class="page-numbers"></div>
|
||
<button
|
||
id="followupNextPage"
|
||
class="pagination-btn"
|
||
disabled
|
||
>
|
||
<i class="fas fa-angle-right"></i>
|
||
</button>
|
||
<button
|
||
id="followupLastPage"
|
||
class="pagination-btn"
|
||
disabled
|
||
>
|
||
<i class="fas fa-angle-double-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="pagination-size">
|
||
<select id="followupPageSizeSelect">
|
||
<option value="10">10条/页</option>
|
||
<option value="20">20条/页</option>
|
||
<option value="50">50条/页</option>
|
||
<option value="100">100条/页</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for creating customer -->
|
||
<div id="createModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-user-plus"></i> 添加新客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="createCustomerForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="createIntendedProduct">咨询时间</label>
|
||
<input
|
||
type="date"
|
||
id="createIntendedProduct"
|
||
name="intendedProduct"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createCustomerName">客户名称</label>
|
||
<select id="createCustomerName" name="customerName" required>
|
||
<option value="">请选择客户</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="createVersion">版本</label>
|
||
<input type="text" id="createVersion" name="version" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createType">类型</label>
|
||
<input type="text" id="createType" name="type" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createDescription">描述</label>
|
||
<textarea
|
||
id="createDescription"
|
||
name="description"
|
||
rows="3"
|
||
></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createSolution">解决方案</label>
|
||
<textarea id="createSolution" name="solution" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="createModule">模块</label>
|
||
<select id="createModule" name="module">
|
||
<option value="">请选择模块</option>
|
||
<option value="数据生成">数据生成</option>
|
||
<option value="数据集">数据集</option>
|
||
<option value="数据空间">数据空间</option>
|
||
<option value="模型工坊">模型工坊</option>
|
||
<option value="模型广场">模型广场</option>
|
||
<option value="镜像管理">镜像管理</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
<input
|
||
type="text"
|
||
id="createModuleOther"
|
||
name="moduleOther"
|
||
placeholder="请输入其他模块名称"
|
||
style="display: none; margin-top: 8px"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="createStatusProgress">状态与进度</label>
|
||
<select id="createStatusProgress" name="statusProgress">
|
||
<option value="">请选择状态</option>
|
||
<option value="已完成">已完成</option>
|
||
<option value="进行中">进行中</option>
|
||
<option value="待排期">待排期</option>
|
||
<option value="已驳回">已驳回</option>
|
||
<option value="已上线">已上线</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
创建客户
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-create">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for importing customers -->
|
||
<div id="importModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-file-import"></i> 导入客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="importFileForm" enctype="multipart/form-data">
|
||
<div class="form-group">
|
||
<label for="importFile">选择文件（支持CSV和XLSX）</label>
|
||
<div class="file-upload">
|
||
<i class="fas fa-cloud-upload-alt"></i>
|
||
<input
|
||
type="file"
|
||
id="importFile"
|
||
name="file"
|
||
accept=".csv,.xlsx"
|
||
required
|
||
/>
|
||
<span id="fileName">选择文件...</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-upload"></i>
|
||
导入
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-import">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for editing customer -->
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-edit"></i> 编辑客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- Customer Form -->
|
||
<form id="editCustomerForm">
|
||
<input type="hidden" id="editCustomerId" />
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editIntendedProduct">咨询时间</label>
|
||
<input
|
||
type="date"
|
||
id="editIntendedProduct"
|
||
name="intendedProduct"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editCustomerName">客户名称</label>
|
||
<input type="text" id="editCustomerName" name="customerName" />
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editVersion">版本</label>
|
||
<input type="text" id="editVersion" name="version" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editType">类型</label>
|
||
<input type="text" id="editType" name="type" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editDescription">描述</label>
|
||
<textarea
|
||
id="editDescription"
|
||
name="description"
|
||
rows="3"
|
||
></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editSolution">解决方案</label>
|
||
<textarea id="editSolution" name="solution" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editModule">模块</label>
|
||
<select id="editModule" name="module">
|
||
<option value="">请选择模块</option>
|
||
<option value="数据生成">数据生成</option>
|
||
<option value="数据集">数据集</option>
|
||
<option value="数据空间">数据空间</option>
|
||
<option value="模型工坊">模型工坊</option>
|
||
<option value="模型广场">模型广场</option>
|
||
<option value="镜像管理">镜像管理</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
<input
|
||
type="text"
|
||
id="editModuleOther"
|
||
name="moduleOther"
|
||
placeholder="请输入其他模块名称"
|
||
style="display: none; margin-top: 8px"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editStatusProgress">状态与进度</label>
|
||
<select id="editStatusProgress" name="statusProgress">
|
||
<option value="">请选择状态</option>
|
||
<option value="已完成">已完成</option>
|
||
<option value="进行中">进行中</option>
|
||
<option value="待排期">待排期</option>
|
||
<option value="已驳回">已驳回</option>
|
||
<option value="已上线">已上线</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
更新客户
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-edit">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for adding trial period -->
|
||
<div id="addTrialPeriodModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-user-plus"></i> 添加客户</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="addTrialPeriodForm">
|
||
<div class="form-group">
|
||
<label for="trialCustomerInput">客户名称</label>
|
||
<input
|
||
type="text"
|
||
id="trialCustomerInput"
|
||
name="customerName"
|
||
placeholder="请输入客户名称"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="trialCustomerSource">客户来源</label>
|
||
<input
|
||
type="text"
|
||
id="trialCustomerSource"
|
||
name="source"
|
||
placeholder="请输入客户来源（如：官网、展会、推荐等）"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>意向产品（可多选）</label>
|
||
<div class="checkbox-group" id="trialIntendedProductGroup">
|
||
<label class="checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
name="intendedProduct"
|
||
value="数据闭环"
|
||
/>
|
||
<span>数据闭环</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
name="intendedProduct"
|
||
value="robogo"
|
||
/>
|
||
<span>robogo</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
name="intendedProduct"
|
||
value="其他"
|
||
id="trialIntendedProductOtherCheckbox"
|
||
/>
|
||
<span>其他</span>
|
||
</label>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
id="trialIntendedProductOther"
|
||
name="intendedProductOther"
|
||
placeholder="请输入其他意向产品"
|
||
style="display: none; margin-top: 8px"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>是否试用</label>
|
||
<div style="display: flex; gap: 20px; align-items: center">
|
||
<label
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
"
|
||
>
|
||
<input type="radio" name="isTrial" value="true" checked />
|
||
<span>是</span>
|
||
</label>
|
||
<label
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
"
|
||
>
|
||
<input type="radio" name="isTrial" value="false" />
|
||
<span>否</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="trialStartTime">开始时间</label>
|
||
<input
|
||
type="datetime-local"
|
||
id="trialStartTime"
|
||
name="startTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="trialEndTime">结束时间</label>
|
||
<input
|
||
type="datetime-local"
|
||
id="trialEndTime"
|
||
name="endTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
保存
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-trial">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for editing trial period -->
|
||
<div id="editTrialPeriodModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-clock"></i> 编辑试用时间</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="editTrialPeriodForm">
|
||
<input type="hidden" id="editTrialPeriodId" />
|
||
<div class="form-group">
|
||
<label for="editTrialCustomerSource">客户来源</label>
|
||
<input
|
||
type="text"
|
||
id="editTrialCustomerSource"
|
||
name="source"
|
||
placeholder="请输入客户来源：如社区、销售、推荐等"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>意向产品（可多选）</label>
|
||
<div class="checkbox-group" id="editTrialIntendedProductGroup">
|
||
<label class="checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
name="editIntendedProduct"
|
||
value="数据闭环"
|
||
/>
|
||
<span>数据闭环</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
name="editIntendedProduct"
|
||
value="robogo"
|
||
/>
|
||
<span>robogo</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input
|
||
type="checkbox"
|
||
name="editIntendedProduct"
|
||
value="其他"
|
||
id="editTrialIntendedProductOtherCheckbox"
|
||
/>
|
||
<span>其他</span>
|
||
</label>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
id="editTrialIntendedProductOther"
|
||
name="intendedProductOther"
|
||
placeholder="请输入其他意向产品"
|
||
style="display: none; margin-top: 8px"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>是否试用</label>
|
||
<div style="display: flex; gap: 20px; align-items: center">
|
||
<label
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
"
|
||
>
|
||
<input type="radio" name="editIsTrial" value="true" checked />
|
||
<span>是</span>
|
||
</label>
|
||
<label
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
"
|
||
>
|
||
<input type="radio" name="editIsTrial" value="false" />
|
||
<span>否</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editTrialStartTime">开始时间</label>
|
||
<input
|
||
type="datetime-local"
|
||
id="editTrialStartTime"
|
||
name="startTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editTrialEndTime">结束时间</label>
|
||
<input
|
||
type="datetime-local"
|
||
id="editTrialEndTime"
|
||
name="endTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
更新
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-edit-trial">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for adding follow-up -->
|
||
<div id="addFollowupModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-plus-circle"></i> 添加跟进记录</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="addFollowupModalForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="addFollowupCustomerName"
|
||
>客户名称 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="addFollowupCustomerName"
|
||
name="customerName"
|
||
required
|
||
>
|
||
<option value="">请选择客户</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addFollowupDealStatus"
|
||
>成交状态 <span style="color: red">*</span></label
|
||
>
|
||
<select id="addFollowupDealStatus" name="dealStatus" required>
|
||
<option value="">请选择</option>
|
||
<option value="未成交">未成交</option>
|
||
<option value="已成交">已成交</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="addFollowupCustomerLevel"
|
||
>客户级别 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="addFollowupCustomerLevel"
|
||
name="customerLevel"
|
||
required
|
||
>
|
||
<option value="">请选择</option>
|
||
<option value="A">A级 (重点客户)</option>
|
||
<option value="B">B级 (潜在客户)</option>
|
||
<option value="C">C级 (一般客户)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addFollowupIndustry"
|
||
>客户行业 <span style="color: red">*</span></label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="addFollowupIndustry"
|
||
name="industry"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addFollowupTime"
|
||
>跟进时间 <span style="color: red">*</span></label
|
||
>
|
||
<input
|
||
type="datetime-local"
|
||
id="addFollowupTime"
|
||
name="followUpTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
创建
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-add-followup">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal for editing follow-up -->
|
||
<div id="editFollowupModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-edit"></i> 编辑跟进记录</h3>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="editFollowupForm">
|
||
<input type="hidden" id="editFollowupId" />
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editFollowupCustomerName"
|
||
>客户名称 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="editFollowupCustomerName"
|
||
name="customerName"
|
||
required
|
||
>
|
||
<option value="">请选择客户</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editFollowupDealStatus"
|
||
>成交状态 <span style="color: red">*</span></label
|
||
>
|
||
<select id="editFollowupDealStatus" name="dealStatus" required>
|
||
<option value="">请选择</option>
|
||
<option value="未成交">未成交</option>
|
||
<option value="已成交">已成交</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editFollowupCustomerLevel"
|
||
>客户级别 <span style="color: red">*</span></label
|
||
>
|
||
<select
|
||
id="editFollowupCustomerLevel"
|
||
name="customerLevel"
|
||
required
|
||
>
|
||
<option value="">请选择</option>
|
||
<option value="A">A级 (重点客户)</option>
|
||
<option value="B">B级 (潜在客户)</option>
|
||
<option value="C">C级 (一般客户)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editFollowupIndustry"
|
||
>客户行业 <span style="color: red">*</span></label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="editFollowupIndustry"
|
||
name="industry"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editFollowupTime"
|
||
>跟进时间 <span style="color: red">*</span></label
|
||
>
|
||
<input
|
||
type="datetime-local"
|
||
id="editFollowupTime"
|
||
name="followUpTime"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-save"></i>
|
||
更新
|
||
</button>
|
||
<button type="button" class="btn-secondary cancel-edit-followup">
|
||
<i class="fas fa-times"></i>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/trial-periods.js?v=1.3"></script>
|
||
<script src="/static/js/trial-periods-page.js?v=1.3"></script>
|
||
<script src="/static/js/main.js?v=1.4"></script>
|
||
</body>
|
||
</html>
|