bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
							<!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>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 导航栏 -->
  <nav class="bg-indigo-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">📊 中小企业 CRM 系统</h1>
        <div class="flex gap-4">
          <button onclick="showListView()" class="text-white hover:text-indigo-200">📋 客户列表</button>
          <button onclick="showAddModal()" class="bg-white text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-50 font-medium">
            ➕ 添加客户
          </button>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <div class="container mx-auto px-4 py-6">
    
    <!-- 列表视图 -->
    <div id="list-view">
      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white p-4 rounded-lg shadow">
          <div class="text-gray-500 text-sm">总客户数</div>
          <div class="text-3xl font-bold text-indigo-600" id="stat-total">-</div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <div class="text-gray-500 text-sm">潜在客户</div>
          <div class="text-3xl font-bold text-yellow-600" id="stat-potential">-</div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <div class="text-gray-500 text-sm">跟进中</div>
          <div class="text-3xl font-bold text-blue-600" id="stat-contacting">-</div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <div class="text-gray-500 text-sm">成交客户</div>
          <div class="text-3xl font-bold text-green-600" id="stat-customer">-</div>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white p-4 rounded-lg shadow mb-6">
        <div class="flex gap-4">
          <input type="text" id="search-keyword" placeholder="搜索客户名称、公司、电话..." 
            class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500">
          <select id="filter-status" class="border border-gray-300 rounded-lg px-4 py-2">
            <option value="">全部状态</option>
            <option value="potential">潜在客户</option>
            <option value="contacting">跟进中</option>
            <option value="customer">成交客户</option>
          </select>
          <button onclick="loadCustomers()" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">
            搜索
          </button>
        </div>
      </div>

      <!-- 客户列表 -->
      <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b">
          <h2 class="text-lg font-semibold">客户列表</h2>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">客户名称</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">公司</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">联系方式</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">来源</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
              </tr>
            </thead>
            <tbody id="customer-list" class="divide-y divide-gray-200">
              <tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">加载中...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 详情视图 -->
    <div id="detail-view" class="hidden">
      <button onclick="showListView()" class="mb-4 text-indigo-600 hover:text-indigo-800">← 返回列表</button>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 客户信息 -->
        <div class="md:col-span-1">
          <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-xl font-bold mb-4" id="detail-name">-</h3>
            <div class="space-y-3 text-sm">
              <div>
                <span class="text-gray-500">公司</span>
                <p id="detail-company" class="font-medium">-</p>
              </div>
              <div>
                <span class="text-gray-500">电话</span>
                <p id="detail-phone" class="font-medium">-</p>
              </div>
              <div>
                <span class="text-gray-500">邮箱</span>
                <p id="detail-email" class="font-medium">-</p>
              </div>
              <div>
                <span class="text-gray-500">来源</span>
                <p id="detail-source" class="font-medium">-</p>
              </div>
              <div>
                <span class="text-gray-500">状态</span>
                <span id="detail-status" class="ml-2 px-2 py-1 rounded-full text-xs">-</span>
              </div>
              <div>
                <span class="text-gray-500">创建时间</span>
                <p id="detail-created" class="font-medium">-</p>
              </div>
            </div>
            <div class="mt-6 flex gap-2">
              <button onclick="showEditModal()" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700">编辑</button>
              <button onclick="deleteCurrentCustomer()" class="flex-1 bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">删除</button>
            </div>
          </div>
        </div>

        <!-- 跟进记录 -->
        <div class="md:col-span-2">
          <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h3 class="text-lg font-bold mb-4">添加跟进记录</h3>
            <form id="followup-form" class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">跟进类型</label>
                <select name="type" class="w-full border border-gray-300 rounded-lg px-4 py-2">
                  <option value="电话">电话沟通</option>
                  <option value="微信">微信联系</option>
                  <option value="邮件">邮件往来</option>
                  <option value="拜访">上门拜访</option>
                  <option value="报价">发送报价</option>
                  <option value="成交">成交签约</option>
                  <option value="其他">其他</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">跟进内容</label>
                <textarea name="content" rows="3" required class="w-full border border-gray-300 rounded-lg px-4 py-2" placeholder="记录本次跟进的详细内容..."></textarea>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">下次跟进日期</label>
                <input type="date" name="nextFollowup" class="w-full border border-gray-300 rounded-lg px-4 py-2">
              </div>
              <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">添加记录</button>
            </form>
          </div>

          <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold mb-4">跟进记录</h3>
            <div id="followup-list" class="space-y-4">
              <p class="text-gray-500 text-center py-8">暂无跟进记录</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- 添加客户模态框 -->
  <div id="add-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
      <h3 class="text-xl font-bold mb-4">添加客户</h3>
      <form id="add-form" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">客户名称 *</label>
          <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
          <input type="text" name="company" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
          <input type="tel" name="phone" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
          <input type="email" name="email" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">来源</label>
          <select name="source" class="w-full border border-gray-300 rounded-lg px-4 py-2">
            <option value="">请选择</option>
            <option value="官网">官网</option>
            <option value="电话">电话</option>
            <option value="朋友介绍">朋友介绍</option>
            <option value="展会">展会</option>
            <option value="其他">其他</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
          <textarea name="notes" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2"></textarea>
        </div>
        <div class="flex gap-4 pt-4">
          <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700">保存</button>
          <button type="button" onclick="hideAddModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">取消</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 编辑客户模态框 -->
  <div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
      <h3 class="text-xl font-bold mb-4">编辑客户</h3>
      <form id="edit-form" class="space-y-4">
        <input type="hidden" id="edit-id">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">客户名称 *</label>
          <input type="text" id="edit-name" required class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
          <input type="text" id="edit-company" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
          <input type="tel" id="edit-phone" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
          <input type="email" id="edit-email" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">来源</label>
          <select id="edit-source" class="w-full border border-gray-300 rounded-lg px-4 py-2">
            <option value="">请选择</option>
            <option value="官网">官网</option>
            <option value="电话">电话</option>
            <option value="朋友介绍">朋友介绍</option>
            <option value="展会">展会</option>
            <option value="其他">其他</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
          <select id="edit-status" class="w-full border border-gray-300 rounded-lg px-4 py-2">
            <option value="potential">潜在客户</option>
            <option value="contacting">跟进中</option>
            <option value="customer">成交客户</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
          <textarea id="edit-notes" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2"></textarea>
        </div>
        <div class="flex gap-4 pt-4">
          <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700">保存</button>
          <button type="button" onclick="hideEditModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">取消</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:3002/api' : '/api';
    let currentCustomerId = null;

    // 加载统计数据
    async function loadStats() {
      try {
        const res = await fetch(`${API_BASE}/stats`);
        const data = await res.json();
        if (data.success) {
          document.getElementById('stat-total').textContent = data.data.total;
          document.getElementById('stat-potential').textContent = data.data.potential;
          document.getElementById('stat-contacting').textContent = data.data.contacting;
          document.getElementById('stat-customer').textContent = data.data.customer;
        }
      } catch (error) {
        console.error('加载统计失败:', error);
      }
    }

    // 加载客户列表
    async function loadCustomers() {
      const keyword = document.getElementById('search-keyword').value;
      const status = document.getElementById('filter-status').value;
      
      let url = `${API_BASE}/customers?`;
      if (keyword) url += `keyword=${encodeURIComponent(keyword)}&`;
      if (status) url += `status=${status}&`;
      
      try {
        const res = await fetch(url);
        const data = await res.json();
        const tbody = document.getElementById('customer-list');
        
        if (data.success && data.data.length > 0) {
          tbody.innerHTML = data.data.map(c => `
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 font-medium">${c.name}</td>
              <td class="px-6 py-4 text-gray-600">${c.company || '-'}</td>
              <td class="px-6 py-4">
                <div class="text-sm">${c.phone || '-'}</div>
                <div class="text-gray-500 text-xs">${c.email || ''}</div>
              </td>
              <td class="px-6 py-4 text-gray-600">${c.source || '-'}</td>
              <td class="px-6 py-4">
                <span class="px-2 py-1 rounded-full text-xs ${
                  c.status === 'customer' ? 'bg-green-100 text-green-800' :
                  c.status === 'contacting' ? 'bg-blue-100 text-blue-800' :
                  'bg-yellow-100 text-yellow-800'
                }">${
                  c.status === 'customer' ? '成交客户' :
                  c.status === 'contacting' ? '跟进中' : '潜在客户'
                }</span>
              </td>
              <td class="px-6 py-4">
                <button onclick="viewCustomer(${c.id})" class="text-indigo-600 hover:text-indigo-800 mr-3">详情</button>
                <button onclick="deleteCustomer(${c.id})" class="text-red-600 hover:text-red-800">删除</button>
              </td>
            </tr>
          `).join('');
        } else {
          tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">暂无客户数据，点击右上角添加客户</td></tr>';
        }
      } catch (error) {
        console.error('加载客户失败:', error);
      }
    }

    // 查看客户详情
    async function viewCustomer(id) {
      currentCustomerId = id;
      try {
        const res = await fetch(`${API_BASE}/customers/${id}`);
        const data = await res.json();
        
        if (data.success) {
          const c = data.data;
          document.getElementById('detail-name').textContent = c.name;
          document.getElementById('detail-company').textContent = c.company || '-';
          document.getElementById('detail-phone').textContent = c.phone || '-';
          document.getElementById('detail-email').textContent = c.email || '-';
          document.getElementById('detail-source').textContent = c.source || '-';
          document.getElementById('detail-created').textContent = new Date(c.created_at).toLocaleString('zh-CN');
          
          const statusEl = document.getElementById('detail-status');
          statusEl.textContent = c.status === 'customer' ? '成交客户' : c.status === 'contacting' ? '跟进中' : '潜在客户';
          statusEl.className = `ml-2 px-2 py-1 rounded-full text-xs ${
            c.status === 'customer' ? 'bg-green-100 text-green-800' :
            c.status === 'contacting' ? 'bg-blue-100 text-blue-800' :
            'bg-yellow-100 text-yellow-800'
          }`;
          
          // 加载跟进记录
          const followupList = document.getElementById('followup-list');
          if (c.followUps && c.followUps.length > 0) {
            followupList.innerHTML = c.followUps.map(f => `
              <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-gray-50 rounded">
                <div class="flex justify-between items-start">
                  <span class="font-medium text-indigo-600">${f.type || '跟进'}</span>
                  <span class="text-xs text-gray-500">${new Date(f.created_at).toLocaleString('zh-CN')}</span>
                </div>
                <p class="text-gray-700 mt-1">${f.content || '-'}</p>
                ${f.next_followup ? `<p class="text-sm text-orange-600 mt-2">📅 下次跟进：${f.next_followup}</p>` : ''}
              </div>
            `).join('');
          } else {
            followupList.innerHTML = '<p class="text-gray-500 text-center py-8">暂无跟进记录</p>';
          }
          
          // 切换视图
          document.getElementById('list-view').classList.add('hidden');
          document.getElementById('detail-view').classList.remove('hidden');
        }
      } catch (error) {
        alert('加载详情失败：' + error.message);
      }
    }

    // 显示列表视图
    function showListView() {
      document.getElementById('detail-view').classList.add('hidden');
      document.getElementById('list-view').classList.remove('hidden');
      loadCustomers();
      loadStats();
    }

    // 显示添加模态框
    function showAddModal() {
      document.getElementById('add-modal').classList.remove('hidden');
      document.getElementById('add-modal').classList.add('flex');
    }

    // 隐藏添加模态框
    function hideAddModal() {
      document.getElementById('add-modal').classList.add('hidden');
      document.getElementById('add-modal').classList.remove('flex');
      document.getElementById('add-form').reset();
    }

    // 显示编辑模态框
    function showEditModal() {
      document.getElementById('edit-id').value = currentCustomerId;
      document.getElementById('edit-modal').classList.remove('hidden');
      document.getElementById('edit-modal').classList.add('flex');
    }

    // 隐藏编辑模态框
    function hideEditModal() {
      document.getElementById('edit-modal').classList.add('hidden');
      document.getElementById('edit-modal').classList.remove('flex');
    }

    // 删除客户
    async function deleteCustomer(id) {
      if (!confirm('确定要删除这个客户吗？')) return;
      try {
        const res = await fetch(`${API_BASE}/customers/${id}`, { method: 'DELETE' });
        const data = await res.json();
        if (data.success) {
          alert('客户已删除');
          loadCustomers();
          loadStats();
        }
      } catch (error) {
        alert('删除失败：' + error.message);
      }
    }

    // 删除当前客户
    function deleteCurrentCustomer() {
      if (currentCustomerId) deleteCustomer(currentCustomerId);
    }

    // 添加客户
    document.getElementById('add-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/customers`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        
        if (result.success) {
          alert('客户添加成功！');
          hideAddModal();
          loadCustomers();
          loadStats();
        }
      } catch (error) {
        alert('添加失败：' + error.message);
      }
    });

    // 添加跟进记录
    document.getElementById('followup-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/customers/${currentCustomerId}/followups`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        
        if (result.success) {
          alert('跟进记录添加成功！');
          document.getElementById('followup-form').reset();
          viewCustomer(currentCustomerId); // 刷新详情
        }
      } catch (error) {
        alert('添加失败：' + error.message);
      }
    });

    // 初始化
    loadStats();
    loadCustomers();
  </script>
</body>
</html>