nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试项目阶段自动导航</title>
  <script src="https://unpkg.com/parse@4.2.0/dist/parse.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .container {
      background: white;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      padding: 40px;
      max-width: 800px;
      width: 100%;
    }

    h1 {
      font-size: 28px;
      color: #1a202c;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .subtitle {
      color: #718096;
      font-size: 14px;
      margin-bottom: 32px;
    }

    .section {
      margin-bottom: 32px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #4a5568;
      margin-bottom: 8px;
    }

    input, select {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s;
    }

    input:focus, select:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 14px 28px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

    .btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .project-card {
      background: #f7fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .project-card:hover {
      border-color: #667eea;
      background: #edf2f7;
      transform: translateX(4px);
    }

    .project-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 8px;
    }

    .project-meta {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: #718096;
    }

    .stage-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .stage-order {
      background: #fee;
      color: #c53030;
    }

    .stage-requirements {
      background: #fef5e7;
      color: #d68910;
    }

    .stage-delivery {
      background: #ebf8ff;
      color: #2c5282;
    }

    .stage-aftercare {
      background: #f0fff4;
      color: #276749;
    }

    .log {
      background: #1a202c;
      color: #48bb78;
      font-family: 'Courier New', monospace;
      font-size: 13px;
      padding: 16px;
      border-radius: 8px;
      max-height: 300px;
      overflow-y: auto;
      line-height: 1.6;
    }

    .log-item {
      margin-bottom: 4px;
    }

    .log-success { color: #48bb78; }
    .log-error { color: #f56565; }
    .log-info { color: #63b3ed; }
    .log-warning { color: #ed8936; }

    .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>
      <span>🧪</span>
      项目阶段自动导航测试
    </h1>
    <p class="subtitle">测试从不同阶段进入项目时是否自动跳转到对应阶段</p>

    <div class="section">
      <div class="section-title">
        <span>📋</span>
        选择测试项目
      </div>
      <div class="form-group">
        <label>公司 ID (cid)</label>
        <input type="text" id="cid" value="cDL6R1hgSi" placeholder="输入公司ID">
      </div>
      <button class="btn" onclick="loadProjects()">
        <span>🔍</span>
        <span id="loadBtnText">加载项目列表</span>
      </button>
    </div>

    <div class="section" id="projectsSection" style="display: none;">
      <div class="section-title">
        <span>📂</span>
        项目列表
      </div>
      <div id="projectsList"></div>
    </div>

    <div class="section">
      <div class="section-title">
        <span>📝</span>
        测试日志
      </div>
      <div class="log" id="log"></div>
    </div>
  </div>

  <script>
    // 初始化 Parse
    Parse.initialize("nova");
    Parse.serverURL = 'https://parse.fmode.cn';

    const cid = 'cDL6R1hgSi';

    function log(message, type = 'info') {
      const logEl = document.getElementById('log');
      const time = new Date().toLocaleTimeString();
      const className = `log-${type}`;
      logEl.innerHTML += `<div class="log-item ${className}">[${time}] ${message}</div>`;
      logEl.scrollTop = logEl.scrollHeight;
    }

    function clearLog() {
      document.getElementById('log').innerHTML = '';
    }

    async function loadProjects() {
      const cidInput = document.getElementById('cid').value;
      if (!cidInput) {
        log('❌ 请输入公司ID', 'error');
        return;
      }

      clearLog();
      log('🔄 开始加载项目列表...', 'info');

      const btn = document.querySelector('.btn');
      const btnText = document.getElementById('loadBtnText');
      btn.disabled = true;
      btnText.innerHTML = '<span class="loading"></span> 加载中...';

      try {
        const query = new Parse.Query('Project');
        query.equalTo('company', cidInput);
        query.notEqualTo('isDeleted', true);
        query.include('contact', 'assignee');
        query.descending('updatedAt');
        query.limit(20);

        const projects = await query.find();
        log(`✅ 成功加载 ${projects.length} 个项目`, 'success');

        const projectsList = document.getElementById('projectsList');
        projectsList.innerHTML = '';

        if (projects.length === 0) {
          projectsList.innerHTML = '<p style="text-align:center;color:#718096;">没有找到项目</p>';
        } else {
          projects.forEach(project => {
            const title = project.get('title') || '未命名项目';
            const currentStage = project.get('currentStage') || '订单分配';
            const customer = project.get('contact')?.get('realname') || project.get('contact')?.get('name') || '未知客户';
            
            let stageClass = 'stage-order';
            if (currentStage.includes('需求')) stageClass = 'stage-requirements';
            else if (currentStage.includes('交付') || currentStage.includes('执行')) stageClass = 'stage-delivery';
            else if (currentStage.includes('售后') || currentStage.includes('归档')) stageClass = 'stage-aftercare';

            const card = document.createElement('div');
            card.className = 'project-card';
            card.onclick = () => testNavigation(project.id, currentStage, cidInput);
            card.innerHTML = `
              <div class="project-title">${title}</div>
              <div class="project-meta">
                <span><strong>阶段:</strong> <span class="stage-badge ${stageClass}">${currentStage}</span></span>
                <span><strong>客户:</strong> ${customer}</span>
                <span><strong>ID:</strong> ${project.id}</span>
              </div>
            `;
            projectsList.appendChild(card);
          });
        }

        document.getElementById('projectsSection').style.display = 'block';
      } catch (error) {
        log(`❌ 加载失败: ${error.message}`, 'error');
        console.error(error);
      } finally {
        btn.disabled = false;
        btnText.textContent = '重新加载项目列表';
      }
    }

    function testNavigation(projectId, currentStage, cidValue) {
      log(`\n🚀 测试项目: ${projectId}`, 'info');
      log(`📍 当前阶段: ${currentStage}`, 'info');

      // 阶段映射
      const stageMap = {
        '订单分配': 'order',
        '确认需求': 'requirements',
        '方案确认': 'requirements',
        '方案深化': 'requirements',
        '交付执行': 'delivery',
        '建模': 'delivery',
        '软装': 'delivery',
        '渲染': 'delivery',
        '后期': 'delivery',
        '尾款结算': 'aftercare',
        '客户评价': 'aftercare',
        '投诉处理': 'aftercare',
        '售后归档': 'aftercare'
      };

      const targetStage = stageMap[currentStage] || 'order';
      log(`🎯 预期跳转: ${targetStage}`, 'warning');

      const baseUrl = `http://localhost:4200/wxwork/${cidValue}/project/${projectId}`;
      const targetUrl = `${baseUrl}/${targetStage}`;

      log(`📋 基础URL: ${baseUrl}`, 'info');
      log(`✅ 目标URL: ${targetUrl}`, 'success');
      log(`⏰ 3秒后在新标签页打开...`, 'warning');

      setTimeout(() => {
        window.open(targetUrl, '_blank');
        log(`✅ 已在新标签页打开项目`, 'success');
        log(`💡 请在新标签页中检查:`, 'info');
        log(`   1. URL 是否包含 /${targetStage}`, 'info');
        log(`   2. 页面是否显示 "${currentStage}" 阶段内容`, 'info');
        log(`   3. 控制台是否有 "📍 项目当前阶段" 日志`, 'info');
      }, 3000);
    }

    // 页面加载时自动加载项目
    window.onload = () => {
      log('🎉 测试页面已加载', 'success');
      log('💡 点击"加载项目列表"开始测试', 'info');
    };
  </script>
</body>
</html>