本次提交实现了完整的客户拜访业务系统: 1. 新增对象存储上传服务,支持S3兼容协议的RustFS存储 2. 完善客户拜访实体与数据库表结构,补充全业务字段 3. 开发拜访台账与记录的前后端接口,包含增删改查、批量创建、状态流转等能力 4. 新增拜访表单页面与路由,支持父级菜单补全面包屑 5. 新增勘察列表页预填客户ID跳转逻辑 6. 补充UI设计文档与页面截图 7. 调整日志中间件跳过上传路由,优化RBAC权限配置
687 lines
34 KiB
HTML
687 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>客户拜访管理台账 - 鑫潼智电 XT-POWER OS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@100..900&family=JetBrains+Mono:wght@400..700&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
@layer base {
|
|
html, body { margin: 0; padding: 0; }
|
|
body { overscroll-behavior: none; }
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#0054cd",
|
|
"primary-container": "#136bfb",
|
|
"on-primary": "#ffffff",
|
|
"surface": "#ffffff",
|
|
"bg-page": "#f4f7fb",
|
|
"on-surface": "#0d1c2c",
|
|
"on-surface-variant": "#424655",
|
|
"text-muted": "#5b6b7e",
|
|
"border-rule": "#e2e8f0",
|
|
"inverse-surface": "#1e293b",
|
|
"surface-container-low": "#f8fafc",
|
|
"surface-container": "#eef2f7",
|
|
"surface-container-high": "#e2e8f0",
|
|
"accent-subtle": "rgba(0,84,205,0.08)",
|
|
"tertiary": "#00685f",
|
|
"status-warn": "#d97706",
|
|
"error": "#dc2626"
|
|
},
|
|
fontFamily: {
|
|
"sans": ["hankenGrotesk", "sans-serif"],
|
|
"mono": ["JetBrains Mono", "monospace"]
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="bg-bg-page font-sans text-on-surface antialiased text-[13.5px]">
|
|
<!-- Global Industrial Sidebar -->
|
|
<aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface z-50 flex flex-col justify-between shadow-xl">
|
|
<div class="flex flex-col h-full">
|
|
<!-- Logo -->
|
|
<div class="h-16 flex items-center px-5 gap-3 border-b border-white/10">
|
|
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white font-bold shadow-md shadow-blue-500/30">
|
|
<span class="material-symbols-outlined text-[20px]">bolt</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white font-bold text-[15px] tracking-wide">鑫潼智电</span>
|
|
<span class="font-mono text-[11px] text-slate-400 tracking-wider">XT-POWER OS v3.8</span>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Links -->
|
|
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
|
<span>运营工作台</span>
|
|
</a>
|
|
<!-- Menu Group: Customer Management (Expanded & Active) -->
|
|
<div class="pt-1">
|
|
<div class="flex items-center justify-between px-3 py-2 text-white font-medium text-[13.5px]">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[20px] text-blue-400">corporate_fare</span>
|
|
<span>客户管理</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[16px] text-slate-400">expand_less</span>
|
|
</div>
|
|
<div class="pl-7 pr-2 space-y-1 mt-1 border-l border-white/10 ml-5">
|
|
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">客户档案列表</a>
|
|
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">空间拓扑与用电架构</a>
|
|
<a class="flex items-center py-2 px-3 rounded-lg bg-primary text-white font-semibold text-[13px] shadow-sm shadow-blue-900/40" href="#">客户拜访管理</a>
|
|
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">客户小程序账号</a>
|
|
</div>
|
|
</div>
|
|
<!-- Menu Group: Project Management (Collapsed) -->
|
|
<div class="pt-1">
|
|
<div class="flex items-center justify-between px-3 py-2 text-slate-300 hover:bg-white/10 hover:text-white rounded-lg transition-all cursor-pointer text-[13.5px]">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[20px]">schema</span>
|
|
<span>项目管理</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[16px] text-slate-400">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">send_time_extension</span>
|
|
<span>运营派单</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">sensors</span>
|
|
<span>设备监控</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">query_stats</span>
|
|
<span>统计报表</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
|
<span>系统管理</span>
|
|
</a>
|
|
</nav>
|
|
<!-- Bottom Status -->
|
|
<div class="p-4 border-t border-white/10 bg-slate-900/50">
|
|
<div class="flex items-center justify-between text-[12px] text-slate-400">
|
|
<span>华东区 · 枢纽调度</span>
|
|
<span class="flex items-center gap-1.5 text-emerald-400 font-mono text-[11px]">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> 系统稳定
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Shell Viewport -->
|
|
<div class="pl-64 flex flex-col min-h-screen">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 left-64 right-0 h-16 z-40 bg-surface/90 backdrop-blur-md border-b border-border-rule px-8 flex items-center justify-between shadow-sm">
|
|
<div class="flex items-center gap-5">
|
|
<div class="flex items-center gap-2 text-slate-500 text-[13px]">
|
|
<span class="hover:text-slate-700 cursor-pointer">客户管理</span>
|
|
<span class="text-slate-300">/</span>
|
|
<span class="text-on-surface font-semibold">客户拜访管理台账</span>
|
|
</div>
|
|
<div class="relative w-80">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px]">search</span>
|
|
<input class="w-full pl-9 pr-4 py-1.5 bg-slate-100/90 text-on-surface rounded-lg text-[13px] border border-transparent focus:border-primary focus:bg-white focus:outline-none transition-all" placeholder="检索客户名称、拜访流水号、业务员..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-[12px] font-medium">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span>ICC 联通正常</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 pr-3 border-r border-border-rule">
|
|
<button class="relative w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="消息通知">
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="使用帮助">
|
|
<span class="material-symbols-outlined text-[20px]">help</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 pl-1">
|
|
<div class="text-right">
|
|
<div class="font-semibold text-slate-800 text-[13px] flex items-center justify-end gap-1.5">
|
|
<span>张工</span>
|
|
<span class="text-[10.5px] px-1.5 py-0.2 rounded bg-blue-50 text-primary border border-blue-100 font-normal">调度席位</span>
|
|
</div>
|
|
<div class="text-[11px] text-slate-500 font-mono">XT-ENG-0842</div>
|
|
</div>
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-tr from-primary to-blue-500 text-white flex items-center justify-center font-bold text-[14px] shadow-sm">
|
|
张
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Workspace Ledger -->
|
|
<main class="w-full pt-20 flex-1 p-8 space-y-5">
|
|
<!-- Page Header: Title + Ledger Actions -->
|
|
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
<div>
|
|
<div class="flex items-center gap-2.5">
|
|
<h1 class="text-[22px] font-bold text-slate-900 tracking-tight">客户拜访管理台账</h1>
|
|
<span class="text-[12px] font-mono font-medium px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 border border-slate-200">CUSTOMER VISIT LEDGER</span>
|
|
</div>
|
|
<p class="text-[13px] text-slate-500 mt-1">
|
|
统筹全周期客户现场拜访任务、意向转化节点跟进、现场需求取证及拜访转立项派单全流程。
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<button class="px-3.5 py-2 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 hover:border-slate-300 text-slate-700 font-medium text-[13px] shadow-sm transition-all flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-slate-500">file_download</span>
|
|
<span>导出台账数据</span>
|
|
</button>
|
|
<button class="px-3.5 py-2 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 hover:border-slate-300 text-slate-700 font-medium text-[13px] shadow-sm transition-all flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-slate-500">calendar_month</span>
|
|
<span>批量安排拜访</span>
|
|
</button>
|
|
<button class="px-4 py-2 rounded-lg bg-primary hover:bg-blue-700 text-white font-semibold text-[13px] shadow-sm shadow-blue-500/25 transition-all flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
<span>+ 新增拜访计划</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Ledger Top Status Metric Cards (AntD style 5-column metric cards) -->
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
<!-- Card 1: All Visits -->
|
|
<div class="bg-surface rounded-xl p-3.5 border-2 border-primary/20 bg-gradient-to-b from-blue-50/50 to-surface shadow-sm cursor-pointer hover:border-primary transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[12.5px] font-semibold text-slate-700">全部拜访</span>
|
|
<span class="material-symbols-outlined text-[18px] text-primary">view_kanban</span>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-2">
|
|
<span class="text-[22px] font-bold text-slate-900 font-mono">128</span>
|
|
<span class="text-[11px] text-slate-400">总台账量</span>
|
|
</div>
|
|
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
|
<span>当月环比</span>
|
|
<span class="text-emerald-600 font-medium font-mono">+15.8%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Pending / Today Visits -->
|
|
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-amber-400 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
|
<span class="text-[12.5px] font-semibold text-slate-700">待执行 / 今日待访</span>
|
|
</div>
|
|
<span class="px-1.5 py-0.5 rounded text-[10.5px] bg-amber-50 text-amber-700 font-medium border border-amber-200">预警</span>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-2">
|
|
<span class="text-[22px] font-bold text-amber-600 font-mono">8</span>
|
|
<span class="text-[11px] text-slate-400">场任务排期</span>
|
|
</div>
|
|
<div class="mt-1 text-[11.5px] text-amber-600 font-medium flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[13px]">alarm</span>
|
|
<span>今日待拜访 3 场 · 特急响应 1 场</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Conversion Rate -->
|
|
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-emerald-400 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span class="text-[12.5px] font-semibold text-slate-700">意向勘察转化率</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[18px] text-emerald-600">transform</span>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-2">
|
|
<span class="text-[22px] font-bold text-emerald-600 font-mono">68.4%</span>
|
|
<span class="text-[11px] text-emerald-700 font-mono font-medium">+5.2%</span>
|
|
</div>
|
|
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
|
<span>已转立项</span>
|
|
<span class="text-emerald-700 font-medium font-mono">36 家</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card 4: Under Review -->
|
|
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-purple-400 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
|
|
<span class="text-[12.5px] font-semibold text-slate-700">取证待技术复核</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[18px] text-purple-600">fact_check</span>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-2">
|
|
<span class="text-[22px] font-bold text-purple-600 font-mono">7</span>
|
|
<span class="text-[11px] text-slate-400">场待核验</span>
|
|
</div>
|
|
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
|
<span>平均复核时效</span>
|
|
<span class="text-purple-600 font-medium font-mono">1.8 小时</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card 5: Completed / Archived -->
|
|
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-blue-400 cursor-pointer transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
|
|
<span class="text-[12.5px] font-semibold text-slate-700">拜访完成 / 已归档</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[18px] text-emerald-600">check_circle</span>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-2">
|
|
<span class="text-[22px] font-bold text-slate-800 font-mono">113</span>
|
|
<span class="text-[11px] text-slate-400">场已归档</span>
|
|
</div>
|
|
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
|
<span>满意度</span>
|
|
<span class="text-amber-600 font-mono font-medium">4.95分</span>
|
|
<span class="text-slate-300">·</span>
|
|
<span>方案率</span>
|
|
<span class="text-emerald-600 font-mono font-medium">100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Filter Bar: Search, Filters & Action buttons -->
|
|
<div class="bg-surface rounded-xl p-4 border border-border-rule shadow-sm space-y-3">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-center">
|
|
<!-- Search Query -->
|
|
<div class="md:col-span-4">
|
|
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">模糊搜索</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px]">search</span>
|
|
<input class="w-full pl-9 pr-3 py-1.5 text-[13px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 placeholder-slate-400 focus:bg-white focus:border-primary focus:outline-none transition-colors" placeholder="输入客户名称、拜访流水号、跟进业务员..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- Visit Type Filter -->
|
|
<div class="md:col-span-2">
|
|
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">拜访类型</label>
|
|
<select class="w-full py-1.5 px-3 text-[13px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 focus:bg-white focus:border-primary focus:outline-none">
|
|
<option value="all">全部类型 (128)</option>
|
|
<option value="1">首访摸排</option>
|
|
<option value="2">方案沟通</option>
|
|
<option value="3">商务二访</option>
|
|
<option value="4">维保回访</option>
|
|
<option value="5">应急巡检</option>
|
|
</select>
|
|
</div>
|
|
<!-- Sales Representative Filter -->
|
|
<div class="md:col-span-2">
|
|
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">跟进业务员</label>
|
|
<select class="w-full py-1.5 px-3 text-[13px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 focus:bg-white focus:border-primary focus:outline-none">
|
|
<option value="all">全部业务员 (全员)</option>
|
|
<option value="1">李志敏 (高级工勘顾问)</option>
|
|
<option value="2">王建国 (资深电力架构师)</option>
|
|
<option value="3">周慧 (大客户总监)</option>
|
|
</select>
|
|
</div>
|
|
<!-- Date Picker -->
|
|
<div class="md:col-span-2">
|
|
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">计划拜访日期窗口</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[16px]">calendar_today</span>
|
|
<input class="w-full pl-8 pr-2.5 py-1.5 text-[12.5px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 focus:bg-white focus:border-primary focus:outline-none font-mono" placeholder="2026-03-01 ~ 03-31" type="text" value="2026-03-01 ~ 03-31"/>
|
|
</div>
|
|
</div>
|
|
<!-- Buttons -->
|
|
<div class="md:col-span-2 flex items-center gap-2 pt-5">
|
|
<button class="flex-1 py-1.5 bg-primary hover:bg-blue-700 text-white font-medium rounded-lg text-[13px] shadow-sm transition-colors flex items-center justify-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]">search</span>
|
|
<span>查询</span>
|
|
</button>
|
|
<button class="px-3 py-1.5 bg-white border border-slate-200 hover:bg-slate-50 text-slate-600 rounded-lg text-[13px] transition-colors">
|
|
重置
|
|
</button>
|
|
<button class="text-primary hover:text-blue-700 text-[12px] flex items-center gap-0.5 whitespace-nowrap pl-1" title="展开高级筛选">
|
|
<span>高级</span>
|
|
<span class="material-symbols-outlined text-[15px]">tune</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Data Table Container (Ant Design Pro Table Style) -->
|
|
<div class="bg-surface rounded-xl border border-border-rule shadow-sm overflow-hidden">
|
|
<!-- Table Subheader -->
|
|
<div class="px-5 py-3.5 border-b border-border-rule bg-slate-50/60 flex items-center justify-between">
|
|
<div class="flex items-center gap-3 text-[13px]">
|
|
<span class="font-semibold text-slate-800">拜访数据台账</span>
|
|
<span class="text-slate-400">|</span>
|
|
<span class="text-slate-500 text-[12px]">显示第 <span class="font-mono text-slate-700 font-semibold">1</span> 到 <span class="font-mono text-slate-700 font-semibold">5</span> 笔,共 <span class="font-mono text-primary font-bold">128</span> 笔拜访记录</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-[12px] text-slate-500">
|
|
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-500"></span>特急 2</span>
|
|
<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-amber-500"></span>加急 6</span>
|
|
<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-slate-400"></span>常规 120</span>
|
|
<button class="ml-3 text-slate-400 hover:text-slate-700 p-1" title="刷新表格">
|
|
<span class="material-symbols-outlined text-[18px]">refresh</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Actual Table -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse text-[13px]">
|
|
<thead>
|
|
<tr class="bg-slate-50/90 text-slate-600 text-[12px] border-b border-slate-200 uppercase tracking-wider font-semibold">
|
|
<th class="py-3 px-4 w-10 text-center">
|
|
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
|
</th>
|
|
<th class="py-3 px-3 min-w-[150px]">拜访流水 / 优先级</th>
|
|
<th class="py-3 px-3 min-w-[210px]">关联客户与空间性质</th>
|
|
<th class="py-3 px-3 min-w-[160px]">拜访类型与目的</th>
|
|
<th class="py-3 px-3 min-w-[140px]">跟进业务员</th>
|
|
<th class="py-3 px-3 min-w-[180px]">计划与到场时间 / GPS签到</th>
|
|
<th class="py-3 px-3 min-w-[150px]">现场意向与成果评级</th>
|
|
<th class="py-3 px-3 min-w-[120px] text-center">当前状态</th>
|
|
<th class="py-3 px-4 min-w-[180px] text-center sticky right-0 bg-slate-50">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 text-slate-700">
|
|
<!-- Row 1: VST-2026-0312 特急/高优 -->
|
|
<tr class="hover:bg-blue-50/40 transition-colors bg-amber-50/20">
|
|
<td class="py-3.5 px-4 text-center">
|
|
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">VST-2026-0312</span>
|
|
</div>
|
|
<div class="mt-1">
|
|
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-red-100 text-red-700 font-semibold border border-red-200">特急 · P1高优</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">华中师范大学南湖校区</div>
|
|
<div class="text-[11.5px] text-slate-500 mt-0.5 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px] text-slate-400">domain</span>
|
|
<span>后勤基建处 · 10kV南湖开闭所</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-medium text-slate-800">配电物联网与微断改造</div>
|
|
<div class="text-[11.5px] text-slate-500">首访摸排 · 技改升级</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-[11px]">李</div>
|
|
<div>
|
|
<div class="font-medium text-slate-800">李志敏</div>
|
|
<div class="font-mono text-[11.5px] text-slate-400">139****8821</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-mono text-[12.5px] text-slate-800">2026-03-10 14:15</div>
|
|
<div class="text-[11px] text-emerald-600 flex items-center gap-0.5 mt-0.5">
|
|
<span class="material-symbols-outlined text-[13px]">verified</span>
|
|
<span>已签到 (ICC 防伪偏差<15m)</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-emerald-50 text-emerald-700 border border-emerald-200 font-semibold text-[11.5px]">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span>A级 · 极高意向 (预算充足)</span>
|
|
</div>
|
|
<div class="text-[11px] text-slate-400 mt-0.5">需求: 40回路智能微断边缘计算</div>
|
|
</td>
|
|
<td class="py-3.5 px-3 text-center">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>已立项转勘察
|
|
</span>
|
|
</td>
|
|
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="px-2 py-1 rounded bg-primary text-white font-semibold text-[12px] hover:bg-blue-700 shadow-sm transition-colors">一键发起勘察派单</button>
|
|
<span class="text-slate-200">|</span>
|
|
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">查看详情</button>
|
|
<span class="text-slate-200">|</span>
|
|
<button class="text-slate-400 hover:text-slate-700 text-[12.5px]">编辑</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2: VST-2026-0315 加急 -->
|
|
<tr class="hover:bg-blue-50/40 transition-colors">
|
|
<td class="py-3.5 px-4 text-center">
|
|
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">VST-2026-0315</span>
|
|
</div>
|
|
<div class="mt-1">
|
|
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-800 font-semibold border border-amber-200">加急 · P2高优</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">武汉软件工程职业学院</div>
|
|
<div class="text-[11.5px] text-slate-500 mt-0.5 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px] text-slate-400">domain</span>
|
|
<span>实训设备保障处 · 智能制造产教园</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-medium text-slate-800">高能耗负荷测绘拓扑方案</div>
|
|
<div class="text-[11.5px] text-slate-500">方案沟通 · 商务二访</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-secondary/20 text-purple-700 flex items-center justify-center font-bold text-[11px]">王</div>
|
|
<div>
|
|
<div class="font-medium text-slate-800">王建国</div>
|
|
<div class="font-mono text-[11.5px] text-slate-400">135****4829</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-mono text-[12.5px] text-amber-600 font-semibold">今日 15:30 待访</div>
|
|
<div class="text-[11px] text-slate-400 flex items-center gap-0.5 mt-0.5">
|
|
<span class="material-symbols-outlined text-[13px]">alarm</span>
|
|
<span>距离拜访还剩 1.5 小时</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-50 text-amber-800 border border-amber-200 font-medium text-[11.5px]">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
|
|
<span>B+级 · 方案研讨阶段</span>
|
|
</div>
|
|
<div class="text-[11px] text-slate-400 mt-0.5">待递交拓扑图纸草案</div>
|
|
</td>
|
|
<td class="py-3.5 px-3 text-center">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-amber-50 text-amber-700 border border-amber-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>待执行 · 今日待办
|
|
</span>
|
|
</td>
|
|
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="text-primary hover:text-blue-700 font-semibold text-[12.5px]">执行跟进</button>
|
|
<span class="text-slate-200">|</span>
|
|
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">改派</button>
|
|
<span class="text-slate-200">|</span>
|
|
<button class="text-slate-400 hover:text-red-600 text-[12.5px]">取消</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3: VST-2026-0309 常规 -->
|
|
<tr class="hover:bg-blue-50/40 transition-colors">
|
|
<td class="py-3.5 px-4 text-center">
|
|
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">VST-2026-0309</span>
|
|
</div>
|
|
<div class="mt-1">
|
|
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 font-medium border border-slate-200">常规 · P3回访</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">汉口新华医院</div>
|
|
<div class="text-[11.5px] text-slate-500 mt-0.5 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px] text-slate-400">domain</span>
|
|
<span>总务科 · 急救中心低压配电室</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-medium text-slate-800">春季应急电巡检与改造沟通</div>
|
|
<div class="text-[11.5px] text-slate-500">维保回访 · 备自投测试</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 flex items-center justify-center font-bold text-[11px]">李</div>
|
|
<div>
|
|
<div class="font-medium text-slate-800">李志敏</div>
|
|
<div class="font-mono text-[11.5px] text-slate-400">139****8821</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-mono text-[12.5px] text-slate-800">2026-03-08 10:00</div>
|
|
<div class="text-[11px] text-slate-400 flex items-center gap-0.5 mt-0.5">
|
|
<span class="material-symbols-outlined text-[13px] text-emerald-600">check_circle</span>
|
|
<span>已完工 (历时 2.5 小时)</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-purple-50 text-purple-700 border border-purple-200 font-medium text-[11.5px]">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span>
|
|
<span>取证待审核 (含3张防伪照片)</span>
|
|
</div>
|
|
<div class="text-[11px] text-slate-500 mt-0.5">意向 B级 · 方案比选中</div>
|
|
</td>
|
|
<td class="py-3.5 px-3 text-center">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-purple-50 text-purple-700 border border-purple-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span>成果待技术复核
|
|
</span>
|
|
</td>
|
|
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="text-purple-600 hover:text-purple-800 font-bold text-[12.5px]">审核现场取证</button>
|
|
<span class="text-slate-200">|</span>
|
|
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">导出简报</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4: VST-2026-0304 常规 -->
|
|
<tr class="hover:bg-blue-50/40 transition-colors">
|
|
<td class="py-3.5 px-4 text-center">
|
|
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">VST-2026-0304</span>
|
|
</div>
|
|
<div class="mt-1">
|
|
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 font-medium border border-slate-200">常规 · 方案研讨</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">东湖高新智造产业园</div>
|
|
<div class="text-[11.5px] text-slate-500 mt-0.5 flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px] text-slate-400">domain</span>
|
|
<span>工程运维中心 · 2号地块配电站</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-medium text-slate-800">智慧微电网与储能并网可行性</div>
|
|
<div class="text-[11.5px] text-slate-500">方案沟通 · 商务研讨</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-blue-100 text-primary flex items-center justify-center font-bold text-[11px]">周</div>
|
|
<div>
|
|
<div class="font-medium text-slate-800">周慧</div>
|
|
<div class="font-mono text-[11.5px] text-slate-400">137****6632</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="font-mono text-[12.5px] text-slate-800">2026-03-05 16:40</div>
|
|
<div class="text-[11px] text-slate-400 flex items-center gap-0.5 mt-0.5">
|
|
<span class="material-symbols-outlined text-[13px] text-emerald-600">done_all</span>
|
|
<span>客户已确认纪要</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3.5 px-3">
|
|
<div class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-50 text-primary border border-blue-200 font-semibold text-[11.5px]">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
|
|
<span>A级 · 已立项勘察 (PRJ-2026-041)</span>
|
|
</div>
|
|
<div class="text-[11px] text-slate-400 mt-0.5">方案已同步至项目库</div>
|
|
</td>
|
|
<td class="py-3.5 px-3 text-center">
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>已立项转勘察
|
|
</span>
|
|
</td>
|
|
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<button class="text-primary hover:text-blue-700 font-medium text-[12.5px]">查看关联工程</button>
|
|
<span class="text-slate-200">|</span>
|
|
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">报告归档</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Table Footer & Ant Design Pagination -->
|
|
<div class="px-5 py-4 border-t border-border-rule bg-surface flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<!-- Batch Actions -->
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[12.5px] text-slate-500">
|
|
已选中 <strong class="text-primary font-mono font-bold">0</strong> 项
|
|
</span>
|
|
<button class="px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-600 text-[12px] font-medium transition-colors disabled:opacity-50" disabled="">
|
|
批量转勘察派单
|
|
</button>
|
|
<button class="px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-600 text-[12px] font-medium transition-colors disabled:opacity-50" disabled="">
|
|
批量导出拜访记录
|
|
</button>
|
|
</div>
|
|
<!-- Pagination Controls -->
|
|
<div class="flex items-center gap-2 text-[13px]">
|
|
<span class="text-slate-500 text-[12.5px]">共 128 条</span>
|
|
<!-- Page Size Selector -->
|
|
<select class="py-1 px-2.5 border border-slate-200 rounded-lg text-[12px] text-slate-700 bg-slate-50 focus:outline-none focus:border-primary">
|
|
<option value="10">10 条/页</option>
|
|
<option value="20">20 条/页</option>
|
|
<option value="50">50 条/页</option>
|
|
</select>
|
|
<!-- Page Buttons -->
|
|
<div class="flex items-center gap-1 ml-2">
|
|
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled="">
|
|
<span class="material-symbols-outlined text-[16px]">chevron_left</span>
|
|
</button>
|
|
<button class="w-8 h-8 rounded-lg bg-primary text-white font-bold flex items-center justify-center text-[12.5px] shadow-sm">
|
|
1
|
|
</button>
|
|
<button class="w-8 h-8 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 flex items-center justify-center text-[12.5px]">
|
|
2
|
|
</button>
|
|
<button class="w-8 h-8 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 flex items-center justify-center text-[12.5px]">
|
|
3
|
|
</button>
|
|
<span class="text-slate-400 px-1 font-mono text-[12px]">...</span>
|
|
<button class="w-8 h-8 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 flex items-center justify-center text-[12.5px]">
|
|
13
|
|
</button>
|
|
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
|
|
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
<!-- Quick Jumper -->
|
|
<div class="flex items-center gap-1.5 ml-2 text-slate-500 text-[12.5px]">
|
|
<span>跳至</span>
|
|
<input class="w-12 py-1 px-1 text-center font-mono border border-slate-200 rounded-lg text-[12px] focus:outline-none focus:border-primary" type="text" value="1"/>
|
|
<span>页</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |