crm-backend-matt/.scratch/opp-customer-dependency/issues/04-demo-frontend-acceptance.md

04 — 前端 demo 客户信息联调验收

What to build: 在既有商机 E2E demo（.scratch/opportunity-e2e/demo/index.html）上补齐"客户信息区"联调界面，让用户能在浏览器里点着验收前面三张票的成果。demo 需真实调用后端接口，把本次最小联调范围端到端串起来：新增/添加关联客户流程中——"客户类型"与"客户角色"两个下拉从字典接口取真值、关联客户搜索走候选池接口、选中客户后"客户联系人"下拉调 stub 端点级联刷新（空/mock 也要能看出级联在动）、最终提交新增/关联成功。demo 的 dict 预加载已含 customer_role，本票补 customer_type 分组并把客户信息区控件接上真接口。

Blocked by: 01, 02, 03

Status: resolved

• demo 的 DICT_GROUPS 预加载补上 customer_type，"客户类型"下拉出 6 项真值
• "客户角色"下拉从 customer_role 字典出 6 项真值
• 关联客户搜索框调 POST /api/opportunity/customer/search，输入关键字能出候选客户
• 选中关联客户后"客户联系人"下拉调 stub 端点级联刷新（切换客户会重新拉取、可见级联行为），空/mock 返回不报错
• 走通"搜客户→选客户→选角色→联系人级联→提交"整条链路，无 404/500，结果可在 demo 上看到
• 用户在浏览器打开 demo 完成人工验收

Answer

在既有 demo .scratch/opportunity-e2e/demo/index.html 上完成客户信息区联调改造：

• DICT_GROUPS 增补 customer_type，demo 启动预加载。
• 关联客户 subtab 新增「+ 添加关联客户」按钮 → dlgAddCustomer() 弹窗：客户类型筛选（customer_type 字典）/ 关联客户搜索（POST /customer/search）/ 选客户后客户联系人级联（GET /customer/{id}/contacts stub）/ 客户角色（customer_role 字典）/ 是否主要 → 提交 POST /customer/add。

Playwright 无头回归全绿（drive-demo04.py，连线上后端 :8080 verify profile）：

校验点	结果
字典预加载	customer_type=6, customer_role=6
弹窗下拉渲染	customerType 7 项(全部+6)、customerRole 7 项(必选+6)
客户搜索	返回 10 条候选
选客户 + 联系人级联	选中「华东设计院（E2E第二客户）」，联系人下拉级联刷新（stub 空 → 显示「已触发」提示项）
提交关联	成功，客户列表 +1
控制台错误	无

截图证据：.scratch/opp-customer-dependency/demo04-1..5-*.png（客户subtab / 弹窗 / 搜索结果 / 选中级联 / 关联后）。

待用户人工验收：起服务 SPRING_PROFILES_ACTIVE=verify java -jar crm-app/target/crm-app-1.0.0-SNAPSHOT.jar，浏览器打开 demo index.html → 选人登录 → 打开任一商机详情 → 关联客户 Tab → +添加关联客户，走一遍搜索/级联/提交。