order-management.page.ts 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108
  1. import { Page, Locator } from '@playwright/test';
  2. import { selectRadixOption } from '@d8d/e2e-test-utils';
  3. /**
  4. * 订单状态常量
  5. */
  6. export const ORDER_STATUS = {
  7. DRAFT: 'draft',
  8. CONFIRMED: 'confirmed',
  9. IN_PROGRESS: 'in_progress',
  10. COMPLETED: 'completed',
  11. } as const;
  12. /**
  13. * 订单状态类型
  14. */
  15. export type OrderStatus = typeof ORDER_STATUS[keyof typeof ORDER_STATUS];
  16. /**
  17. * 订单状态显示名称映射
  18. */
  19. export const ORDER_STATUS_LABELS: Record<OrderStatus, string> = {
  20. draft: '草稿',
  21. confirmed: '已确认',
  22. in_progress: '进行中',
  23. completed: '已完成',
  24. } as const;
  25. /**
  26. * 工作状态常量
  27. */
  28. export const WORK_STATUS = {
  29. NOT_EMPLOYED: 'not_employed',
  30. PENDING: 'pending',
  31. EMPLOYED: 'employed',
  32. RESIGNED: 'resigned',
  33. } as const;
  34. /**
  35. * 工作状态类型
  36. */
  37. export type WorkStatus = typeof WORK_STATUS[keyof typeof WORK_STATUS];
  38. /**
  39. * 工作状态显示名称映射
  40. */
  41. export const WORK_STATUS_LABELS: Record<WorkStatus, string> = {
  42. not_employed: '未就业',
  43. pending: '待就业',
  44. employed: '已就业',
  45. resigned: '已离职',
  46. } as const;
  47. /**
  48. * 订单数据接口
  49. */
  50. export interface OrderData {
  51. /** 订单名称 */
  52. name: string;
  53. /** 预计开始日期 */
  54. expectedStartDate?: string;
  55. /** 平台ID */
  56. platformId?: number;
  57. /** 平台名称 */
  58. platformName?: string;
  59. /** 公司ID */
  60. companyId?: number;
  61. /** 公司名称 */
  62. companyName?: string;
  63. /** 渠道ID */
  64. channelId?: number;
  65. /** 渠道名称 */
  66. channelName?: string;
  67. /** 订单状态 */
  68. status?: OrderStatus;
  69. /** 工作状态 */
  70. workStatus?: WorkStatus;
  71. }
  72. /**
  73. * 订单人员数据接口
  74. */
  75. export interface OrderPersonData {
  76. /** 残疾人ID */
  77. disabledPersonId: number;
  78. /** 残疾人姓名 */
  79. disabledPersonName?: string;
  80. /** 入职日期 */
  81. hireDate?: string;
  82. /** 薪资 */
  83. salary?: number;
  84. /** 工作状态 */
  85. workStatus?: WorkStatus;
  86. /** 实际入职日期 */
  87. actualHireDate?: string;
  88. /** 离职日期 */
  89. resignDate?: string;
  90. }
  91. /**
  92. * 网络响应数据接口
  93. */
  94. export interface NetworkResponse {
  95. /** 请求URL */
  96. url: string;
  97. /** 请求方法 */
  98. method: string;
  99. /** 响应状态码 */
  100. status: number;
  101. /** 是否成功 */
  102. ok: boolean;
  103. /** 响应头 */
  104. responseHeaders: Record<string, string>;
  105. /** 响应体 */
  106. responseBody: unknown;
  107. }
  108. /**
  109. * 表单提交结果接口
  110. */
  111. export interface FormSubmitResult {
  112. /** 提交是否成功 */
  113. success: boolean;
  114. /** 是否有错误 */
  115. hasError: boolean;
  116. /** 是否有成功消息 */
  117. hasSuccess: boolean;
  118. /** 错误消息 */
  119. errorMessage?: string;
  120. /** 成功消息 */
  121. successMessage?: string;
  122. /** 网络响应列表 */
  123. responses?: NetworkResponse[];
  124. }
  125. /**
  126. * 订单管理 Page Object
  127. *
  128. * 用于订单管理功能的 E2E 测试
  129. * 页面路径: /admin/orders(待确认)
  130. *
  131. * @example
  132. * ```typescript
  133. * const orderPage = new OrderManagementPage(page);
  134. * await orderPage.goto();
  135. * await orderPage.createOrder({ name: '测试订单' });
  136. * ```
  137. */
  138. export class OrderManagementPage {
  139. readonly page: Page;
  140. // ===== 页面级选择器 =====
  141. /** 页面标题 */
  142. readonly pageTitle: Locator;
  143. /** 新增订单按钮 */
  144. readonly addOrderButton: Locator;
  145. /** 订单列表表格 */
  146. readonly orderTable: Locator;
  147. /** 搜索输入框 */
  148. readonly searchInput: Locator;
  149. /** 搜索按钮 */
  150. readonly searchButton: Locator;
  151. constructor(page: Page) {
  152. this.page = page;
  153. // 初始化页面级选择器
  154. // 使用更精确的选择器来定位页面标题(避免与侧边栏按钮冲突)
  155. this.pageTitle = page.locator('[data-slot="card-title"]').getByText('订单管理', { exact: true });
  156. // 使用 data-testid 定位创建订单按钮(按钮文本是"创建订单"不是"新增订单")
  157. this.addOrderButton = page.getByTestId('create-order-button');
  158. this.orderTable = page.locator('table');
  159. // 使用 data-testid 定位搜索输入框
  160. this.searchInput = page.getByTestId('search-order-name-input');
  161. // 使用 data-testid 定位搜索按钮
  162. this.searchButton = page.getByTestId('search-button');
  163. }
  164. // ===== 导航和基础验证 =====
  165. /**
  166. * 导航到订单管理页面
  167. */
  168. async goto() {
  169. await this.page.goto('/admin/orders');
  170. await this.page.waitForLoadState('domcontentloaded');
  171. // 等待页面标题出现
  172. await this.pageTitle.waitFor({ state: 'visible', timeout: 15000 });
  173. // 等待表格数据加载
  174. await this.page.waitForSelector('table tbody tr', { state: 'visible', timeout: 20000 });
  175. await this.expectToBeVisible();
  176. }
  177. /**
  178. * 验证页面关键元素可见
  179. */
  180. async expectToBeVisible() {
  181. await this.pageTitle.waitFor({ state: 'visible', timeout: 15000 });
  182. await this.addOrderButton.waitFor({ state: 'visible', timeout: 10000 });
  183. }
  184. // ===== 搜索和筛选功能 =====
  185. /**
  186. * 按订单名称搜索
  187. * @param name 订单名称
  188. */
  189. async searchByName(name: string) {
  190. await this.searchInput.fill(name);
  191. await this.searchButton.click();
  192. await this.page.waitForLoadState('networkidle');
  193. await this.page.waitForTimeout(1000);
  194. }
  195. /**
  196. * 打开高级筛选对话框
  197. */
  198. async openFilterDialog() {
  199. const filterButton = this.page.getByRole('button', { name: /筛选|高级筛选/ });
  200. await filterButton.click();
  201. await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  202. }
  203. /**
  204. * 设置筛选条件
  205. * @param filters 筛选条件
  206. */
  207. async setFilters(filters: {
  208. status?: OrderStatus;
  209. workStatus?: WorkStatus;
  210. platformId?: number;
  211. platformName?: string;
  212. companyId?: number;
  213. companyName?: string;
  214. channelId?: number;
  215. channelName?: string;
  216. dateRange?: { start?: string; end?: string };
  217. }) {
  218. // 订单状态筛选
  219. if (filters.status) {
  220. const statusFilter = this.page.getByLabel(/订单状态/);
  221. await statusFilter.click();
  222. const statusLabel = ORDER_STATUS_LABELS[filters.status];
  223. await this.page.getByRole('option', { name: statusLabel }).click();
  224. }
  225. // 工作状态筛选
  226. if (filters.workStatus) {
  227. const workStatusFilter = this.page.getByLabel(/工作状态/);
  228. await workStatusFilter.click();
  229. const workStatusLabel = WORK_STATUS_LABELS[filters.workStatus];
  230. await this.page.getByRole('option', { name: workStatusLabel }).click();
  231. }
  232. // 平台筛选
  233. if (filters.platformName) {
  234. await selectRadixOption(this.page, '平台', filters.platformName);
  235. }
  236. // 公司筛选
  237. if (filters.companyName) {
  238. await selectRadixOption(this.page, '公司', filters.companyName);
  239. }
  240. // 渠道筛选
  241. if (filters.channelName) {
  242. await selectRadixOption(this.page, '渠道', filters.channelName);
  243. }
  244. // 日期范围筛选
  245. if (filters.dateRange) {
  246. if (filters.dateRange.start) {
  247. const startDateInput = this.page.getByLabel(/开始日期|起始日期/);
  248. await startDateInput.fill(filters.dateRange.start);
  249. }
  250. if (filters.dateRange.end) {
  251. const endDateInput = this.page.getByLabel(/结束日期|截止日期/);
  252. await endDateInput.fill(filters.dateRange.end);
  253. }
  254. }
  255. }
  256. /**
  257. * 应用筛选条件
  258. */
  259. async applyFilters() {
  260. const applyButton = this.page.getByRole('button', { name: /应用|确定|筛选/ });
  261. await applyButton.click();
  262. await this.page.waitForLoadState('networkidle');
  263. await this.page.waitForTimeout(1000);
  264. }
  265. /**
  266. * 清空筛选条件
  267. */
  268. async clearFilters() {
  269. const clearButton = this.page.getByRole('button', { name: /重置|清空/ });
  270. await clearButton.click();
  271. await this.page.waitForTimeout(500);
  272. }
  273. // ===== 订单 CRUD 操作 =====
  274. /**
  275. * 打开创建订单对话框
  276. */
  277. async openCreateDialog() {
  278. await this.addOrderButton.click();
  279. await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  280. }
  281. /**
  282. * 打开编辑订单对话框
  283. * @param orderName 订单名称
  284. */
  285. async openEditDialog(orderName: string) {
  286. // 找到订单行并点击"打开菜单"按钮
  287. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  288. const menuButton = orderRow.getByRole('button', { name: '打开菜单' });
  289. await menuButton.click();
  290. // 等待菜单出现并点击"编辑"选项
  291. // 使用 data-testid 或 role 定位编辑选项
  292. const editOption = this.page.getByRole('menuitem', { name: '编辑' });
  293. await editOption.waitFor({ state: 'visible', timeout: 3000 });
  294. await editOption.click();
  295. // 等待编辑对话框出现
  296. await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  297. }
  298. /**
  299. * 打开删除确认对话框
  300. * @param orderName 订单名称
  301. */
  302. async openDeleteDialog(orderName: string) {
  303. // 找到订单行并点击"打开菜单"按钮(与编辑操作相同的模式)
  304. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  305. const menuButton = orderRow.getByRole('button', { name: '打开菜单' });
  306. await menuButton.click();
  307. // 等待菜单出现并点击"删除"选项
  308. const deleteOption = this.page.getByRole('menuitem', { name: '删除' });
  309. await deleteOption.waitFor({ state: 'visible', timeout: 3000 });
  310. await deleteOption.click();
  311. // 等待删除确认对话框出现
  312. await this.page.waitForSelector('[role="alertdialog"]', { state: 'visible', timeout: 5000 });
  313. }
  314. /**
  315. * 填写订单表单
  316. * @param data 订单数据
  317. */
  318. async fillOrderForm(data: OrderData) {
  319. // 等待表单出现
  320. await this.page.waitForSelector('form', { state: 'visible', timeout: 5000 });
  321. // 填写订单名称
  322. if (data.name) {
  323. await this.page.getByLabel(/订单名称|名称/).fill(data.name);
  324. }
  325. // 填写预计开始日期
  326. if (data.expectedStartDate) {
  327. const dateInput = this.page.getByLabel(/预计开始日期|开始日期/);
  328. await dateInput.fill(data.expectedStartDate);
  329. }
  330. // 选择平台
  331. if (data.platformName) {
  332. await selectRadixOption(this.page, '平台', data.platformName);
  333. }
  334. // 选择公司
  335. if (data.companyName) {
  336. await selectRadixOption(this.page, '公司', data.companyName);
  337. }
  338. // 选择渠道
  339. if (data.channelName) {
  340. await selectRadixOption(this.page, '渠道', data.channelName);
  341. }
  342. // 选择订单状态(如果是编辑模式)
  343. if (data.status) {
  344. const statusLabel = ORDER_STATUS_LABELS[data.status];
  345. await selectRadixOption(this.page, '订单状态', statusLabel);
  346. }
  347. // 选择工作状态(如果是编辑模式)
  348. if (data.workStatus) {
  349. const workStatusLabel = WORK_STATUS_LABELS[data.workStatus];
  350. await selectRadixOption(this.page, '工作状态', workStatusLabel);
  351. }
  352. }
  353. /**
  354. * 提交表单
  355. * @returns 表单提交结果
  356. */
  357. async submitForm(): Promise<FormSubmitResult> {
  358. // 收集网络响应
  359. const responses: NetworkResponse[] = [];
  360. // 监听所有网络请求
  361. const responseHandler = async (response: Response) => {
  362. const url = response.url();
  363. // 监听订单管理相关的 API 请求
  364. if (url.includes('/orders') || url.includes('order')) {
  365. const requestBody = response.request()?.postData();
  366. const responseBody = await response.text().catch(() => '');
  367. let jsonBody = null;
  368. try {
  369. jsonBody = JSON.parse(responseBody);
  370. } catch {
  371. // 不是 JSON 响应
  372. }
  373. responses.push({
  374. url,
  375. method: response.request()?.method() ?? 'UNKNOWN',
  376. status: response.status(),
  377. ok: response.ok(),
  378. responseHeaders: await response.allHeaders().catch(() => ({})),
  379. responseBody: jsonBody || responseBody,
  380. });
  381. }
  382. };
  383. this.page.on('response', responseHandler);
  384. try {
  385. // 点击提交按钮(创建或更新)
  386. const submitButton = this.page.getByRole('button', { name: /^(创建|更新|保存)$/ });
  387. await submitButton.click();
  388. // 等待网络请求完成(使用较宽松的超时,因为有些操作可能不触发网络请求)
  389. try {
  390. await this.page.waitForLoadState('networkidle', { timeout: 5000 });
  391. } catch {
  392. // networkidle 超时不是致命错误,继续检查 Toast 消息
  393. console.debug('networkidle 超时,继续检查 Toast 消息');
  394. }
  395. } finally {
  396. // 确保监听器总是被移除,防止内存泄漏
  397. this.page.off('response', responseHandler);
  398. }
  399. // 等待 Toast 消息显示
  400. await this.page.waitForTimeout(2000);
  401. // 检查 Toast 消息
  402. const errorToast = this.page.locator('[data-sonner-toast][data-type="error"]');
  403. const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');
  404. const hasError = await errorToast.count() > 0;
  405. const hasSuccess = await successToast.count() > 0;
  406. let errorMessage: string | null = null;
  407. let successMessage: string | null = null;
  408. if (hasError) {
  409. errorMessage = await errorToast.first().textContent();
  410. }
  411. if (hasSuccess) {
  412. successMessage = await successToast.first().textContent();
  413. }
  414. return {
  415. success: hasSuccess || (!hasError && !hasSuccess),
  416. hasError,
  417. hasSuccess,
  418. errorMessage: errorMessage ?? undefined,
  419. successMessage: successMessage ?? undefined,
  420. responses,
  421. };
  422. }
  423. /**
  424. * 取消对话框
  425. */
  426. async cancelDialog() {
  427. const cancelButton = this.page.getByRole('button', { name: '取消' });
  428. await cancelButton.click();
  429. await this.waitForDialogClosed();
  430. }
  431. /**
  432. * 等待对话框关闭
  433. */
  434. async waitForDialogClosed() {
  435. const dialog = this.page.locator('[role="dialog"]');
  436. await dialog.waitFor({ state: 'hidden', timeout: 5000 })
  437. .catch(() => console.debug('对话框关闭超时,可能已经关闭'));
  438. await this.page.waitForTimeout(500);
  439. }
  440. /**
  441. * 确认删除操作
  442. */
  443. async confirmDelete() {
  444. // 尝试多种可能的按钮名称
  445. const confirmButton = this.page.locator('[role="alertdialog"]').getByRole('button', {
  446. name: /^(确认删除|删除|确定|确认)$/
  447. });
  448. await confirmButton.click();
  449. // 等待确认对话框关闭和网络请求完成
  450. await this.page.waitForSelector('[role="alertdialog"]', { state: 'hidden', timeout: 5000 })
  451. .catch(() => console.debug('删除确认对话框关闭超时'));
  452. await this.page.waitForLoadState('networkidle', { timeout: 10000 });
  453. await this.page.waitForTimeout(1000);
  454. }
  455. /**
  456. * 取消删除操作
  457. */
  458. async cancelDelete() {
  459. const cancelButton = this.page.getByRole('button', { name: '取消' }).and(
  460. this.page.locator('[role="alertdialog"]')
  461. );
  462. await cancelButton.click();
  463. await this.page.waitForSelector('[role="alertdialog"]', { state: 'hidden', timeout: 5000 })
  464. .catch(() => console.debug('删除确认对话框关闭超时(取消操作)'));
  465. }
  466. /**
  467. * 验证订单是否存在
  468. * @param orderName 订单名称
  469. * @returns 订单是否存在
  470. */
  471. async orderExists(orderName: string): Promise<boolean> {
  472. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  473. return (await orderRow.count()) > 0;
  474. }
  475. // ===== 订单详情 =====
  476. /**
  477. * 打开订单详情对话框
  478. * @param orderName 订单名称
  479. */
  480. async openDetailDialog(orderName: string) {
  481. // 找到订单行并点击查看详情按钮
  482. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  483. const detailButton = orderRow.getByRole('button', { name: /详情|查看/ });
  484. await detailButton.click();
  485. await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  486. }
  487. /**
  488. * 获取订单详情中的基本信息
  489. * @returns 订单基本信息
  490. */
  491. async getOrderDetailInfo(): Promise<{
  492. name?: string;
  493. status?: string;
  494. workStatus?: string;
  495. expectedStartDate?: string;
  496. platform?: string;
  497. company?: string;
  498. channel?: string;
  499. }> {
  500. const dialog = this.page.locator('[role="dialog"]');
  501. const result: Record<string, string | undefined> = {};
  502. // 订单名称 - 查找"订单名称"标签后的值
  503. const nameElement = dialog.locator('.text-muted-foreground').filter({ hasText: '订单名称' })
  504. .locator('..').locator('p,span,div').nth(1);
  505. if (await nameElement.count() > 0) {
  506. const text = await nameElement.textContent();
  507. result.name = text || undefined;
  508. }
  509. // 订单状态
  510. const statusElement = dialog.locator('.text-muted-foreground').filter({ hasText: '订单状态' })
  511. .locator('..').locator('p,span,div').nth(1);
  512. if (await statusElement.count() > 0) {
  513. const text = await statusElement.textContent();
  514. result.status = text || undefined;
  515. }
  516. // 工作状态
  517. const workStatusElement = dialog.locator('.text-muted-foreground').filter({ hasText: '工作状态' })
  518. .locator('..').locator('p,span,div').nth(1);
  519. if (await workStatusElement.count() > 0) {
  520. const text = await workStatusElement.textContent();
  521. result.workStatus = text || undefined;
  522. }
  523. // 预计开始日期
  524. const startDateElement = dialog.locator('.text-muted-foreground').filter({ hasText: /预计开始日期|开始日期/ })
  525. .locator('..').locator('p,span,div').nth(1);
  526. if (await startDateElement.count() > 0) {
  527. const text = await startDateElement.textContent();
  528. result.expectedStartDate = text || undefined;
  529. }
  530. // 平台
  531. const platformElement = dialog.locator('.text-muted-foreground').filter({ hasText: '平台' })
  532. .locator('..').locator('p,span,div').nth(1);
  533. if (await platformElement.count() > 0) {
  534. const text = await platformElement.textContent();
  535. result.platform = text || undefined;
  536. }
  537. // 公司
  538. const companyElement = dialog.locator('.text-muted-foreground').filter({ hasText: '公司' })
  539. .locator('..').locator('p,span,div').nth(1);
  540. if (await companyElement.count() > 0) {
  541. const text = await companyElement.textContent();
  542. result.company = text || undefined;
  543. }
  544. // 渠道
  545. const channelElement = dialog.locator('.text-muted-foreground').filter({ hasText: '渠道' })
  546. .locator('..').locator('p,span,div').nth(1);
  547. if (await channelElement.count() > 0) {
  548. const text = await channelElement.textContent();
  549. result.channel = text || undefined;
  550. }
  551. return result;
  552. }
  553. // ===== 人员关联管理 =====
  554. /**
  555. * 打开人员管理对话框
  556. *
  557. * **使用场景:**
  558. * - **从订单列表页打开**: 传入 `orderName` 参数,方法会先找到对应订单行,再点击人员管理按钮
  559. * - **从订单详情页打开**: 不传参数,方法会直接点击页面中的人员管理按钮
  560. *
  561. * @param orderName 订单名称(可选)。从列表页打开时需要传入,从详情页打开时不传
  562. *
  563. * @example
  564. * ```typescript
  565. * // 从订单列表页打开
  566. * await orderPage.openPersonManagementDialog('测试订单');
  567. *
  568. * // 从订单详情页打开
  569. * await orderPage.openDetailDialog('测试订单');
  570. * await orderPage.openPersonManagementDialog();
  571. * ```
  572. */
  573. async openPersonManagementDialog(orderName?: string) {
  574. // 如果提供了订单名称,先找到对应的订单行
  575. if (orderName) {
  576. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  577. const personButton = orderRow.getByRole('button', { name: /人员|员工/ });
  578. await personButton.click();
  579. } else {
  580. // 如果在详情页,直接点击人员管理按钮
  581. const personButton = this.page.getByRole('button', { name: /人员管理|添加人员/ });
  582. await personButton.click();
  583. }
  584. await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  585. }
  586. /**
  587. * 添加人员到订单
  588. * @param personData 人员数据
  589. */
  590. async addPersonToOrder(personData: OrderPersonData) {
  591. // 点击添加人员按钮
  592. const addButton = this.page.getByRole('button', { name: /添加人员|新增人员/ });
  593. await addButton.click();
  594. await this.page.waitForTimeout(300);
  595. // 选择残疾人(支持通过名称选择)
  596. if (personData.disabledPersonName) {
  597. await selectRadixOption(this.page, '残疾人|选择残疾人', personData.disabledPersonName);
  598. } else if (personData.disabledPersonId) {
  599. // 如果只提供了 ID,尝试在对话框中选择第一个残疾人
  600. const firstCheckbox = this.page.locator('[role="dialog"]').locator('table tbody tr').first().locator('input[type="checkbox"]').first();
  601. try {
  602. await firstCheckbox.waitFor({ state: 'visible', timeout: 3000 });
  603. await firstCheckbox.check();
  604. } catch {
  605. console.debug('没有可用的残疾人数据');
  606. }
  607. }
  608. // 填写入职日期
  609. if (personData.hireDate) {
  610. const hireDateInput = this.page.getByLabel(/入职日期/);
  611. await hireDateInput.fill(personData.hireDate);
  612. }
  613. // 填写薪资
  614. if (personData.salary !== undefined) {
  615. const salaryInput = this.page.getByLabel(/薪资|工资/);
  616. await salaryInput.fill(String(personData.salary));
  617. }
  618. // 选择工作状态
  619. if (personData.workStatus) {
  620. const workStatusLabel = WORK_STATUS_LABELS[personData.workStatus];
  621. await selectRadixOption(this.page, '工作状态', workStatusLabel);
  622. }
  623. // 提交
  624. const submitButton = this.page.getByRole('button', { name: /^(添加|确定|保存)$/ });
  625. await submitButton.click();
  626. await this.page.waitForLoadState('networkidle');
  627. await this.page.waitForTimeout(1000);
  628. }
  629. /**
  630. * 修改人员工作状态
  631. * @param personName 人员姓名
  632. * @param newStatus 新的工作状态
  633. */
  634. async updatePersonWorkStatus(personName: string, newStatus: WorkStatus) {
  635. // 找到人员行
  636. const personRow = this.page.locator('[role="dialog"]').locator('table tbody tr').filter({ hasText: personName });
  637. // 点击编辑工作状态按钮
  638. const editButton = personRow.getByRole('button', { name: /编辑|修改/ });
  639. await editButton.click();
  640. await this.page.waitForTimeout(300);
  641. // 选择新的工作状态
  642. const workStatusLabel = WORK_STATUS_LABELS[newStatus];
  643. await selectRadixOption(this.page, '工作状态', workStatusLabel);
  644. // 提交
  645. const submitButton = this.page.getByRole('button', { name: /^(更新|保存|确定)$/ });
  646. await submitButton.click();
  647. await this.page.waitForLoadState('networkidle');
  648. await this.page.waitForTimeout(1000);
  649. }
  650. // ===== 附件管理 =====
  651. /**
  652. * 打开添加附件对话框
  653. */
  654. async openAddAttachmentDialog() {
  655. const attachmentButton = this.page.getByRole('button', { name: /添加附件|上传附件/ });
  656. await attachmentButton.click();
  657. await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  658. }
  659. /**
  660. * 上传附件
  661. * @param personName 人员姓名
  662. * @param fileName 文件名
  663. * @param mimeType 文件类型(默认为 image/jpeg)
  664. */
  665. async uploadAttachment(personName: string, fileName: string, mimeType: string = 'image/jpeg') {
  666. // 选择订单人员
  667. const personSelect = this.page.getByLabel(/选择人员|订单人员/);
  668. await personSelect.click();
  669. await this.page.getByRole('option', { name: personName }).click();
  670. // 查找文件上传输入框
  671. const fileInput = this.page.locator('input[type="file"]');
  672. await fileInput.setInputFiles({
  673. name: fileName,
  674. mimeType,
  675. buffer: Buffer.from(`fake ${fileName} content`),
  676. });
  677. // 等待上传处理
  678. await this.page.waitForTimeout(500);
  679. // 提交
  680. const submitButton = this.page.getByRole('button', { name: /^(上传|确定|保存)$/ });
  681. await submitButton.click();
  682. await this.page.waitForLoadState('networkidle');
  683. await this.page.waitForTimeout(1000);
  684. }
  685. // ===== 高级操作 =====
  686. /**
  687. * 创建订单(完整流程)
  688. * @param data 订单数据
  689. * @returns 表单提交结果
  690. */
  691. async createOrder(data: OrderData): Promise<FormSubmitResult> {
  692. await this.openCreateDialog();
  693. await this.fillOrderForm(data);
  694. const result = await this.submitForm();
  695. await this.waitForDialogClosed();
  696. return result;
  697. }
  698. /**
  699. * 编辑订单(完整流程)
  700. * @param orderName 订单名称
  701. * @param data 更新的订单数据
  702. * @returns 表单提交结果
  703. */
  704. async editOrder(orderName: string, data: OrderData): Promise<FormSubmitResult> {
  705. await this.openEditDialog(orderName);
  706. await this.fillOrderForm(data);
  707. const result = await this.submitForm();
  708. await this.waitForDialogClosed();
  709. return result;
  710. }
  711. /**
  712. * 删除订单(完整流程)
  713. * @param orderName 订单名称
  714. * @returns 是否成功删除
  715. */
  716. async deleteOrder(orderName: string): Promise<boolean> {
  717. await this.openDeleteDialog(orderName);
  718. await this.confirmDelete();
  719. // 等待并检查 Toast 消息
  720. await this.page.waitForTimeout(1000);
  721. const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');
  722. const hasSuccess = await successToast.count() > 0;
  723. return hasSuccess;
  724. }
  725. // ===== 订单状态流转操作 =====
  726. /**
  727. * 打开激活订单确认对话框
  728. * @param orderName 订单名称
  729. */
  730. async openActivateDialog(orderName: string): Promise<void> {
  731. // 找到订单行并点击"打开菜单"按钮(与编辑/删除操作相同的模式)
  732. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  733. const menuButton = orderRow.getByRole('button', { name: '打开菜单' });
  734. await menuButton.click();
  735. // 等待菜单出现并点击"激活"选项
  736. const activateOption = this.page.getByRole('menuitem', { name: /激活|激活订单/ });
  737. await activateOption.waitFor({ state: 'visible', timeout: 3000 });
  738. await activateOption.click();
  739. // 等待确认对话框出现
  740. await this.page.waitForSelector('[role="alertdialog"]', { state: 'visible', timeout: 5000 });
  741. }
  742. /**
  743. * 确认激活订单
  744. */
  745. async confirmActivate(): Promise<void> {
  746. // 尝试多种可能的按钮名称
  747. const confirmButton = this.page.locator('[role="alertdialog"]').getByRole('button', {
  748. name: /^(确认激活|激活|确定|确认)$/
  749. });
  750. await confirmButton.click();
  751. // 等待确认对话框关闭和网络请求完成
  752. await this.page.waitForSelector('[role="alertdialog"]', { state: 'hidden', timeout: 5000 })
  753. .catch(() => console.debug('激活确认对话框关闭超时'));
  754. await this.page.waitForLoadState('networkidle', { timeout: 10000 });
  755. await this.page.waitForTimeout(1000);
  756. }
  757. /**
  758. * 激活订单(完整流程)
  759. * @param orderName 订单名称
  760. * @returns 是否成功激活
  761. */
  762. async activateOrder(orderName: string): Promise<boolean> {
  763. await this.openActivateDialog(orderName);
  764. await this.confirmActivate();
  765. // 等待并检查 Toast 消息
  766. await this.page.waitForTimeout(1000);
  767. const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');
  768. const hasSuccess = await successToast.count() > 0;
  769. return hasSuccess;
  770. }
  771. /**
  772. * 打开关闭订单确认对话框
  773. * @param orderName 订单名称
  774. */
  775. async openCloseDialog(orderName: string): Promise<void> {
  776. // 找到订单行并点击"打开菜单"按钮
  777. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  778. const menuButton = orderRow.getByRole('button', { name: '打开菜单' });
  779. await menuButton.click();
  780. // 等待菜单出现并点击"关闭"选项
  781. const closeOption = this.page.getByRole('menuitem', { name: /关闭|关闭订单|完成/ });
  782. await closeOption.waitFor({ state: 'visible', timeout: 3000 });
  783. await closeOption.click();
  784. // 等待确认对话框出现
  785. await this.page.waitForSelector('[role="alertdialog"]', { state: 'visible', timeout: 5000 });
  786. }
  787. /**
  788. * 确认关闭订单
  789. */
  790. async confirmClose(): Promise<void> {
  791. // 尝试多种可能的按钮名称
  792. const confirmButton = this.page.locator('[role="alertdialog"]').getByRole('button', {
  793. name: /^(确认关闭|关闭|确定|确认)$/
  794. });
  795. await confirmButton.click();
  796. // 等待确认对话框关闭和网络请求完成
  797. await this.page.waitForSelector('[role="alertdialog"]', { state: 'hidden', timeout: 5000 })
  798. .catch(() => console.debug('关闭确认对话框关闭超时'));
  799. await this.page.waitForLoadState('networkidle', { timeout: 10000 });
  800. await this.page.waitForTimeout(1000);
  801. }
  802. /**
  803. * 关闭订单(完整流程)
  804. * @param orderName 订单名称
  805. * @returns 是否成功关闭
  806. */
  807. async closeOrder(orderName: string): Promise<boolean> {
  808. await this.openCloseDialog(orderName);
  809. await this.confirmClose();
  810. // 等待并检查 Toast 消息
  811. await this.page.waitForTimeout(1000);
  812. const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');
  813. const hasSuccess = await successToast.count() > 0;
  814. return hasSuccess;
  815. }
  816. /**
  817. * 获取订单的当前状态(从列表页面)
  818. * @param orderName 订单名称
  819. * @returns 订单状态值或 null
  820. */
  821. async getOrderStatus(orderName: string): Promise<OrderStatus | null> {
  822. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  823. // 等待行可见
  824. await orderRow.waitFor({ state: 'visible', timeout: 3000 }).catch(() => {
  825. console.debug(`订单 "${orderName}" 行不可见`);
  826. });
  827. const rowCount = await orderRow.count();
  828. if (rowCount === 0) {
  829. console.debug(`订单 "${orderName}" 不存在`);
  830. return null;
  831. }
  832. // 尝试多种策略定位状态列
  833. // 策略1: 查找包含状态文本的单元格(但排除订单名称列)
  834. const allCells = orderRow.locator('td');
  835. const cellCount = await allCells.count();
  836. for (let i = 1; i < cellCount; i++) { // 跳过第一列(通常是订单名称)
  837. const cell = allCells.nth(i);
  838. const cellText = await cell.textContent();
  839. if (cellText) {
  840. // 检查是否包含完整的状态标签(避免部分匹配)
  841. for (const [statusValue, statusLabel] of Object.entries(ORDER_STATUS_LABELS)) {
  842. // 使用更严格的匹配:必须是状态标签本身或包含完整标签
  843. const trimmedText = cellText.trim();
  844. if (trimmedText === statusLabel || trimmedText.includes(`${statusLabel}`)) {
  845. // 验证不是订单名称列(额外检查)
  846. const firstCellText = await allCells.nth(0).textContent();
  847. if (firstCellText && !firstCellText.includes(orderName.substring(0, 3))) {
  848. // 第一列不包含订单名称开头,说明列结构可能不同
  849. return statusValue as OrderStatus;
  850. }
  851. // 跳过第一列后找到的状态标签才返回
  852. return statusValue as OrderStatus;
  853. }
  854. }
  855. }
  856. }
  857. // 策略2: 如果上述方法失败,尝试查找状态徽章/标签元素
  858. // 查找具有状态样式特征的元素
  859. const statusBadge = orderRow.locator('[class*="status"], [class*="badge"], span').filter({
  860. hasText: Object.values(ORDER_STATUS_LABELS)
  861. });
  862. if (await statusBadge.count() > 0) {
  863. const badgeText = await statusBadge.first().textContent();
  864. if (badgeText) {
  865. for (const [statusValue, statusLabel] of Object.entries(ORDER_STATUS_LABELS)) {
  866. if (badgeText.includes(statusLabel)) {
  867. return statusValue as OrderStatus;
  868. }
  869. }
  870. }
  871. }
  872. console.debug(`无法从订单 "${orderName}" 中解析状态`);
  873. return null;
  874. }
  875. /**
  876. * 验证订单状态
  877. * @param orderName 订单名称
  878. * @param expectedStatus 期望的状态
  879. */
  880. async expectOrderStatus(orderName: string, expectedStatus: OrderStatus): Promise<void> {
  881. const actualStatus = await this.getOrderStatus(orderName);
  882. if (actualStatus === null) {
  883. throw new Error(`订单 "${orderName}" 未找到或状态列无法识别`);
  884. }
  885. if (actualStatus !== expectedStatus) {
  886. throw new Error(
  887. `订单 "${orderName}" 状态不匹配: 期望 "${ORDER_STATUS_LABELS[expectedStatus]}", 实际 "${ORDER_STATUS_LABELS[actualStatus]}"`
  888. );
  889. }
  890. }
  891. /**
  892. * 检查激活按钮是否可用
  893. *
  894. * **注意**: 此方法会打开和关闭菜单,属于有副作用的操作
  895. *
  896. * @param orderName 订单名称
  897. * @returns 按钮是否可用
  898. */
  899. async checkActivateButtonEnabled(orderName: string): Promise<boolean> {
  900. // 找到订单行并打开菜单
  901. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  902. // 检查订单是否存在
  903. const orderCount = await orderRow.count();
  904. if (orderCount === 0) {
  905. console.debug(`订单 "${orderName}" 不存在`);
  906. return false;
  907. }
  908. const menuButton = orderRow.getByRole('button', { name: '打开菜单' });
  909. try {
  910. await menuButton.click();
  911. } catch (error) {
  912. console.debug(`无法打开订单 "${orderName}" 的菜单:`, error);
  913. return false;
  914. }
  915. // 检查激活菜单项是否可点击
  916. const activateOption = this.page.getByRole('menuitem', { name: /激活|激活订单/ });
  917. const isVisible = await activateOption.isVisible().catch(() => false);
  918. let isEnabled = false;
  919. if (isVisible) {
  920. // 检查是否有禁用属性或样式
  921. const isDisabled = await activateOption.isDisabled().catch(() => false);
  922. isEnabled = !isDisabled;
  923. }
  924. // 关闭菜单以便后续操作
  925. await this.page.keyboard.press('Escape');
  926. await this.page.waitForTimeout(300);
  927. return isEnabled;
  928. }
  929. /**
  930. * 检查关闭按钮是否可用
  931. *
  932. * **注意**: 此方法会打开和关闭菜单,属于有副作用的操作
  933. *
  934. * @param orderName 订单名称
  935. * @returns 按钮是否可用
  936. */
  937. async checkCloseButtonEnabled(orderName: string): Promise<boolean> {
  938. // 找到订单行并打开菜单
  939. const orderRow = this.orderTable.locator('tbody tr').filter({ hasText: orderName });
  940. // 检查订单是否存在
  941. const orderCount = await orderRow.count();
  942. if (orderCount === 0) {
  943. console.debug(`订单 "${orderName}" 不存在`);
  944. return false;
  945. }
  946. const menuButton = orderRow.getByRole('button', { name: '打开菜单' });
  947. try {
  948. await menuButton.click();
  949. } catch (error) {
  950. console.debug(`无法打开订单 "${orderName}" 的菜单:`, error);
  951. return false;
  952. }
  953. // 检查关闭菜单项是否可点击
  954. const closeOption = this.page.getByRole('menuitem', { name: /关闭|关闭订单|完成/ });
  955. const isVisible = await closeOption.isVisible().catch(() => false);
  956. let isEnabled = false;
  957. if (isVisible) {
  958. // 检查是否有禁用属性或样式
  959. const isDisabled = await closeOption.isDisabled().catch(() => false);
  960. isEnabled = !isDisabled;
  961. }
  962. // 关闭菜单以便后续操作
  963. await this.page.keyboard.press('Escape');
  964. await this.page.waitForTimeout(300);
  965. return isEnabled;
  966. }
  967. }