feat: 为跟进记录和试用期容器新增动画效果、刷新按钮和分页功能，并调整了跟进记录表格结构及客户进度模态框的字段。
This commit is contained in:
parent
db7646dbb1
commit
3de6cfd48d
@ -2362,6 +2362,10 @@ tr:hover .action-cell {
|
||||
}
|
||||
}
|
||||
|
||||
.animate-up {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* ==================== Weekly Summary Styles ==================== */
|
||||
.weekly-summary-header {
|
||||
display: flex;
|
||||
|
||||
@ -322,7 +322,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card trial-periods-container">
|
||||
<div class="card trial-periods-container animate-up">
|
||||
<!-- 客户列表标头 -->
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
@ -512,6 +512,10 @@
|
||||
<i class="fas fa-plus"></i>
|
||||
添加跟进
|
||||
</button>
|
||||
<button id="refreshFollowupsBtn" class="btn-secondary">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Follow-up Form -->
|
||||
@ -564,7 +568,7 @@
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-save"></i> 保存跟进记录
|
||||
</button>
|
||||
<button type="button" id="cancelFollowUpBtn" class="btn-secondary">
|
||||
<button type="button" id="cancelFollowupBtn" class="btn-secondary">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
@ -572,7 +576,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card table-card">
|
||||
<div class="card table-card animate-up">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-history"></i> 跟进记录</h3>
|
||||
</div>
|
||||
@ -582,17 +586,39 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>客户名称</th>
|
||||
<th>跟进时间</th>
|
||||
<th>跟进内容</th>
|
||||
<th>客户级别</th>
|
||||
<th>成交状态</th>
|
||||
<th>下次跟进</th>
|
||||
<th>客户级别</th>
|
||||
<th>行业</th>
|
||||
<th>跟进时间</th>
|
||||
<th>通知状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="followupTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination for follow-ups -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -600,58 +626,62 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal for adding customer -->
|
||||
<div id="customerModal" class="modal">
|
||||
<!-- Modal for adding customer progress -->
|
||||
<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="customerForm">
|
||||
<input type="hidden" id="customerId" />
|
||||
<form id="createCustomerForm">
|
||||
<input type="hidden" id="createCustomerId" />
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="customerName">客户名称 <span style="color: red">*</span></label>
|
||||
<input type="text" id="customerName" name="customerName" placeholder="请输入客户名称" required />
|
||||
<label for="createCustomerName">客户名称 <span style="color: red">*</span></label>
|
||||
<select id="createCustomerName" name="customerName" required>
|
||||
<option value="">请选择客户</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="consultationTime">咨询时间 <span style="color: red">*</span></label>
|
||||
<input type="date" id="consultationTime" name="consultationTime" required />
|
||||
<label for="createIntendedProduct">咨询时间 <span style="color: red">*</span></label>
|
||||
<input type="date" id="createIntendedProduct" name="intendedProduct" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="version">版本</label>
|
||||
<input type="text" id="version" name="version" placeholder="如：v1.0" />
|
||||
<label for="createVersion">版本</label>
|
||||
<input type="text" id="createVersion" name="version" placeholder="如：v1.0" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="type">类型 <span style="color: red">*</span></label>
|
||||
<select id="type" name="type" required>
|
||||
<label for="createType">类型 <span style="color: red">*</span></label>
|
||||
<select id="createType" name="type" required>
|
||||
<option value="">请选择类型</option>
|
||||
<option value="私有化">私有化</option>
|
||||
<option value="公有云">公有云</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
<input type="text" id="typeOther" name="typeOther" placeholder="请输入其他类型"
|
||||
style="display: none; margin-top: 8px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="module">模块</label>
|
||||
<select id="module" name="module">
|
||||
<label for="createModule">模块</label>
|
||||
<select id="createModule" name="module">
|
||||
<option value="">请选择模块</option>
|
||||
<option value="数据闭环">数据闭环</option>
|
||||
<option value="robogo">robogo</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="moduleOther" name="moduleOther" placeholder="请填写模块名称"
|
||||
<input type="text" id="createModuleOther" name="moduleOther" placeholder="请填写模块名称"
|
||||
style="display: none; margin-top: 8px" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="statusProgress">状态与进度 <span style="color: red">*</span></label>
|
||||
<select id="statusProgress" name="statusProgress" required>
|
||||
<label for="createStatusProgress">状态与进度 <span style="color: red">*</span></label>
|
||||
<select id="createStatusProgress" name="statusProgress" required>
|
||||
<option value="">请选择状态</option>
|
||||
<option value="已完成">已完成</option>
|
||||
<option value="进行中">进行中</option>
|
||||
@ -662,19 +692,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="description">描述</label>
|
||||
<textarea id="description" name="description" rows="3" placeholder="请输入问题描述..."></textarea>
|
||||
<label for="createDescription">描述</label>
|
||||
<textarea id="createDescription" name="description" rows="3" placeholder="请输入问题描述..."></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="solution">解决方案</label>
|
||||
<textarea id="solution" name="solution" rows="3" placeholder="请输入拟采取的解决方案..."></textarea>
|
||||
<label for="createSolution">解决方案</label>
|
||||
<textarea id="createSolution" name="solution" rows="3" placeholder="请输入拟采取的解决方案..."></textarea>
|
||||
</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">
|
||||
<button type="button" class="btn-secondary cancel-create">
|
||||
<i class="fas fa-times"></i>
|
||||
取消
|
||||
</button>
|
||||
@ -684,6 +714,225 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal for editing customer progress -->
|
||||
<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">
|
||||
<form id="editCustomerForm">
|
||||
<input type="hidden" id="editCustomerId" />
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="editCustomerName">客户名称 <span style="color: red">*</span></label>
|
||||
<input type="text" id="editCustomerName" name="customerName" readonly />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editIntendedProduct">咨询时间 <span style="color: red">*</span></label>
|
||||
<input type="date" id="editIntendedProduct" name="intendedProduct" required />
|
||||
</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">类型 <span style="color: red">*</span></label>
|
||||
<select id="editType" name="type" required>
|
||||
<option value="">请选择类型</option>
|
||||
<option value="私有化">私有化</option>
|
||||
<option value="公有云">公有云</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
</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">状态与进度 <span style="color: red">*</span></label>
|
||||
<select id="editStatusProgress" name="statusProgress" required>
|
||||
<option value="">请选择状态</option>
|
||||
<option value="已完成">已完成</option>
|
||||
<option value="进行中">进行中</option>
|
||||
<option value="待排期">待排期</option>
|
||||
<option value="已驳回">已驳回</option>
|
||||
<option value="已上线">已上线</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<!-- Trial period details (Read-only reference) -->
|
||||
<div class="trial-details-section" style="margin-top: 15px; padding-top: 15px; border-top: 1px dashed #eee;">
|
||||
<h4><i class="fas fa-clock"></i> 试用时间参考</h4>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="editTrialStart">开始时间</label>
|
||||
<input type="datetime-local" id="editTrialStart" readonly />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editTrialEnd">结束时间</label>
|
||||
<input type="datetime-local" id="editTrialEnd" readonly />
|
||||
</div>
|
||||
</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 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">行业</label>
|
||||
<input type="text" id="addFollowupIndustry" name="industry" placeholder="请输入行业" />
|
||||
</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">
|
||||
取消
|
||||
</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">行业</label>
|
||||
<input type="text" id="editFollowupIndustry" name="industry" />
|
||||
</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">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal for CSV Import -->
|
||||
<div id="importModal" class="modal">
|
||||
<div class="modal-content">
|
||||
@ -692,28 +941,30 @@
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="import-instructions">
|
||||
<p>请选择包含以下列的CSV文件：</p>
|
||||
<ul>
|
||||
<li>客户, 咨询时间, 版本, 描述, 解决方案, 类型, 模块, 状态与进度</li>
|
||||
</ul>
|
||||
<p><small>* 第一行为表头，数据将从第二行开始导入。</small></p>
|
||||
</div>
|
||||
<div class="file-upload">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
<p>点击或拖拽文件到此处</p>
|
||||
<input type="file" id="csvFileInput" accept=".csv" />
|
||||
</div>
|
||||
<div id="importStatus" style="margin-top: 15px"></div>
|
||||
<div class="form-actions">
|
||||
<button id="confirmImportBtn" class="btn-primary" disabled>
|
||||
<i class="fas fa-check"></i>
|
||||
开始导入
|
||||
</button>
|
||||
<button type="button" class="btn-secondary cancel-import">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
<form id="importFileForm">
|
||||
<div class="import-instructions">
|
||||
<p>请选择包含以下列的CSV文件：</p>
|
||||
<ul>
|
||||
<li>客户, 咨询时间, 版本, 描述, 解决方案, 类型, 模块, 状态与进度</li>
|
||||
</ul>
|
||||
<p><small>* 第一行为表头，数据将从第二行开始导入。</small></p>
|
||||
</div>
|
||||
<div class="file-upload">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
<p id="fileName">选择文件...</p>
|
||||
<input type="file" id="importFile" accept=".csv" />
|
||||
</div>
|
||||
<div id="importStatus" style="margin-top: 15px"></div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" id="confirmImportBtn" class="btn-primary">
|
||||
<i class="fas fa-check"></i>
|
||||
开始导入
|
||||
</button>
|
||||
<button type="button" class="btn-secondary cancel-import">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user