|
|
@@ -0,0 +1,234 @@
|
|
|
+<!-- @locate: designer-operations -->
|
|
|
+
|
|
|
+## 设计师端功能操作路径(操作步骤)
|
|
|
+
|
|
|
+### 1. 设计师工作台(Dashboard) → 任务与项目
|
|
|
+
|
|
|
+- **入口路径**
|
|
|
+ - 网页端(不带公司ID,通常仅内部调试):`/designer/dashboard`
|
|
|
+ - 企微端(正式使用):`/wxwork/:cid/designer/dashboard`
|
|
|
+- **身份认证与角色校验**
|
|
|
+ - 通过 URL 或 `localStorage` 获取 `cid`(公司ID)。
|
|
|
+ - 初始化企微授权 `WxworkAuth({ cid, appId: 'crm' })` 并调用 `authenticateAndLoadData()`。
|
|
|
+ - 从认证结果中获取 `user` 与 `profile`,并验证角色:
|
|
|
+ - 若 `profile.roleName !== '组员'`,则弹出提示「您不是设计师(组员),无权访问此页面」并跳转首页。
|
|
|
+- **数据加载与视图切换**
|
|
|
+ - 初始化成功后,调用 `loadDashboardData()`:
|
|
|
+ - `loadRealTasks()`:加载当前设计师的任务列表(来自 `DesignerTaskService.getMyTasks(profile.id)`)。
|
|
|
+ - `loadShiftTasks()`:加载代班任务。
|
|
|
+ - `calculateWorkloadPercentage()`:计算个人项目饱和度(工作量百分比)。
|
|
|
+ - `loadProjectTimeline()`:加载项目时间轴信息。
|
|
|
+ - `loadDesignerProjects()`:加载与当前设计师相关的项目负载数据。
|
|
|
+ - 顶部或侧边切换视图:
|
|
|
+ - `activeDashboard`: `'main' | 'skills' | 'personal'`,在主工作台 / 技能雷达 / 个人看板之间切换。
|
|
|
+ - `viewMode`: `'card' | 'list'` 让任务视图在卡片/列表模式之间切换。
|
|
|
+- **任务层面的操作**
|
|
|
+ - 在任务列表中查看:
|
|
|
+ - 超期任务 `overdueTasks`(`isOverdue === true`)。
|
|
|
+ - 紧急任务 `urgentTasks`(例如距截止时间 3 小时内且属于渲染阶段的任务)。
|
|
|
+ - 常规操作路径:
|
|
|
+ - 点击某条任务 → 展开查看详细信息(所属项目、阶段、客户名、截止时间等)。
|
|
|
+ - 通过链接/按钮跳转到项目详情页(通常为 `/wxwork/:cid/project/:projectId` 或设计师端项目详情)。
|
|
|
+
|
|
|
+### 2. 设计师项目详情页(Designer Project Detail)
|
|
|
+
|
|
|
+- **入口路径**
|
|
|
+ - 网页端:`/designer/project-detail/:id`
|
|
|
+ - 企微端:`/wxwork/:cid/designer/project-detail/:id`
|
|
|
+ - 组长/客服端也会复用该组件,并通过 `roleName` 或路径识别视图角色。
|
|
|
+- **角色视图与权限控制**
|
|
|
+ - 角色上下文字段:
|
|
|
+ - `roleContext: 'customer-service' | 'designer' | 'team-leader' | 'technical' = 'designer'`
|
|
|
+ - 通过 URL 查询参数与路径检测角色:
|
|
|
+ - 优先从 `?roleName=` 获取:
|
|
|
+ - `customer-service` → 客服视角
|
|
|
+ - `technical` → 技术视角
|
|
|
+ - `team-leader` → 组长视角
|
|
|
+ - 若查询参数不存在,则根据 URL 路径判断是否包含 `/customer-service/`、`/team-leader/`、`/technical/`。
|
|
|
+ - 若路径也没标识,则根据当前用户角色字段(`currentUser.roleName`)进行判断:
|
|
|
+ - 含「组长」或 `team-leader` → 组长视角
|
|
|
+ - 含「客服」 → 客服视角
|
|
|
+ - 否则默认视为 `designer`。
|
|
|
+ - 常用视图判定方法:
|
|
|
+ - `isDesignerView()` / `isTeamLeaderView()` / `isCustomerServiceView()` / `isTechnicalView()`
|
|
|
+ - `isReadOnly()`:当为客服视角时返回 `true`,限制编辑能力。
|
|
|
+ - 板块与阶段编辑权限控制:
|
|
|
+ - `canEditSection(sectionKey)`:
|
|
|
+ - 客服视角仅可编辑:`order`(订单分配)、`requirements`(确认需求)、`aftercare`(售后)板块;
|
|
|
+ - 设计师与组长视角可以编辑所有板块。
|
|
|
+ - `canEditStage(stage: ProjectStage)`:
|
|
|
+ - 客服仅能编辑阶段:
|
|
|
+ - `订单分配`、`需求沟通`、`方案确认`(订单分配与确认需求板块)
|
|
|
+ - `尾款结算`、`客户评价`、`投诉处理`(售后板块)
|
|
|
+ - 设计师与组长可以编辑全部阶段。
|
|
|
+
|
|
|
+- **交付执行相关操作(设计师核心日常)**
|
|
|
+ - 阶段图片上传字段:
|
|
|
+ - `whiteModelImages`:白模阶段图片数组。
|
|
|
+ - `softDecorImages`:软装阶段图片数组。
|
|
|
+ - `renderLargeImages`:大图渲染阶段图片数组。
|
|
|
+ - `postProcessImages`:后期阶段图片数组。
|
|
|
+ - 每个图片结构中包含:
|
|
|
+ - `id: string`
|
|
|
+ - `name: string`
|
|
|
+ - `url: string`
|
|
|
+ - `size?: string`
|
|
|
+ - `reviewStatus?: 'pending' | 'approved' | 'rejected'`(审核状态,主要由组长操作)
|
|
|
+ - `synced?: boolean`(是否已与后台/组长端同步)
|
|
|
+ - 上传过程:
|
|
|
+ - 通过上传按钮或拖拽上传图片文件(受 `allowedImageTypes='.jpg,.jpeg,.png'` 限制)。
|
|
|
+ - 上传完成后,图片会被加入对应阶段的数组(如 `renderLargeImages`),并在 UI 中展示缩略图和状态。
|
|
|
+ - `showRenderUploadModal` 控制渲染大图上传弹窗;`pendingRenderLargeItems` 暂存待确认大图。
|
|
|
+ - 交付流程结构(对空间与工序的组合管理):
|
|
|
+ - `deliveryProcesses: DeliveryProcess[]`:
|
|
|
+ - 每个流程包括:
|
|
|
+ - `id: 'modeling' | 'softDecor' | 'rendering' | 'postProcess'`
|
|
|
+ - `name: '建模' | '软装' | '渲染' | '后期'`
|
|
|
+ - `isExpanded: boolean`:在 UI 中是否展开。
|
|
|
+ - `spaces`: 空间列表(如卧室/客厅/厨房),包含 `id`, `name`, `order`, `isExpanded`。
|
|
|
+ - `content`: 以空间 ID 为键的状态对象:
|
|
|
+ - `images: any[]`:该空间在该流程下的图片或交付物;
|
|
|
+ - `progress: number`:该流程在该空间下的完成进度;
|
|
|
+ - `status: 'pending' | 'in_progress' | 'completed' | ...`:状态;
|
|
|
+ - `notes: string`:备注;
|
|
|
+ - `lastUpdated: Date`:最后更新时间。
|
|
|
+ - 设计师可在 UI 中:
|
|
|
+ - 针对每一流程(建模/软装/渲染/后期)和空间(卧室/客厅/厨房)分配与查看交付物;
|
|
|
+ - 记录进度与备注,以便组长和客服了解交付状态。
|
|
|
+
|
|
|
+- **质量自查与模型检查**
|
|
|
+ - `modelCheckItems: ModelCheckItem[]`:
|
|
|
+ - 例如:户型匹配度检查、尺寸精度验证、材质贴图检查、光影效果验证、细节完整性检查。
|
|
|
+ - 字段:
|
|
|
+ - `id: string`
|
|
|
+ - `name: string`
|
|
|
+ - `isPassed: boolean`
|
|
|
+ - `notes?: string`
|
|
|
+ - 操作路径:
|
|
|
+ - 在页面中勾选/取消勾选每一项检查 `isPassed`。
|
|
|
+ - 填写备注 `notes` 说明问题或经过。
|
|
|
+
|
|
|
+- **组长视角下的同步与审核(设计师端可见,但只在组长视角可操作)**
|
|
|
+ - 组长视角(在同一组件中)有以下操作,用于审核设计师上传的图片:
|
|
|
+ - `syncUploadedImages(phase)`:
|
|
|
+ - 仅在 `isTeamLeaderView()` 为 true 时生效;
|
|
|
+ - 将指定阶段的图片标记为 `synced=true`,并在未设置 `reviewStatus` 时初始化为 `pending`;
|
|
|
+ - 用提示告知「已同步该阶段的图片信息」。
|
|
|
+ - `reviewImage(imageId, phase, status)`(代码略):
|
|
|
+ - 组长针对单张图片标记为 `approved` 或 `rejected`,同时记录审核结果以便后续统计。
|
|
|
+
|
|
|
+### 3. 个人看板(Personal Board) → 能力与绩效
|
|
|
+
|
|
|
+- **入口路径**
|
|
|
+ - 网页端:`/designer/personal-board`
|
|
|
+ - 企微端:`/wxwork/:cid/designer/personal-board`
|
|
|
+ - 组长端也会通过 `/team-leader/...` 复用该组件查看设计师个人表现。
|
|
|
+- **数据来源与展示内容**
|
|
|
+ - 使用 `ProjectService` 加载以下数据:
|
|
|
+ - `skillTags: SkillTag[]`:技能标签及熟练度与项目数量。
|
|
|
+ - `performanceData: PerformanceData[]`:按月统计的绩效数据:
|
|
|
+ - `month: string`:月份(如 `2024-01`)
|
|
|
+ - `projectCompletionRate: number`:项目完成率
|
|
|
+ - `customerSatisfaction: number`:客户满意度
|
|
|
+ - `deliveryOnTimeRate: number`:交付准时率
|
|
|
+ - `matchingOrders: MatchingOrder[]`:匹配度较高的推荐订单:
|
|
|
+ - `projectName`、`requiredSkills[]`、`matchRate`、`customerLevel` 等。
|
|
|
+ - `settlements: Settlement[]`:结算记录列表:
|
|
|
+ - 结算金额、阶段、状态(待结算/已结算/逾期)、时间等。
|
|
|
+ - 聚合字段:
|
|
|
+ - `totalSettlementAmount`:已结算总金额。
|
|
|
+ - `pendingSettlementAmount`:待结算总金额。
|
|
|
+ - 是否为初级设计师标记:
|
|
|
+ - `isJuniorDesigner: boolean` 用于控制部分功能权限(例如某些高级数据或操作仅限资深设计师)。
|
|
|
+- **图表展示操作**
|
|
|
+ - 在 `ngAfterViewInit` 中,当 `performanceData` 加载完毕后:
|
|
|
+ - 调用 `initCustomChart()` 使用原生 DOM 构建自定义柱状图。
|
|
|
+ - 图表以三个指标为维度:项目完成率、客户满意度、交付准时率。
|
|
|
+ - 用户在 UI 中可以:
|
|
|
+ - 查看不同月份的三项指标对比;
|
|
|
+ - 结合技能标签和匹配订单列表,规划个人能力提升方向。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 设计师端项目与任务字段(数据视角)
|
|
|
+
|
|
|
+> 设计师端沿用 `src/app/models/project.model.ts` 中的通用 `Project`、`Task`、`SkillTag`、`PerformanceData` 等接口,并在各自页面(Dashboard、Project Detail、Personal Board)上做视图层的再封装。
|
|
|
+
|
|
|
+### 1. 通用 Task 模型(设计师任务)
|
|
|
+
|
|
|
+- **字段(参考 `Task` 接口)**
|
|
|
+ - `id: string`:任务 ID。
|
|
|
+ - `projectId: string`:所属项目 ID。
|
|
|
+ - `projectName: string`:所属项目名称。
|
|
|
+ - `title: string`:任务标题,一般会使用项目名称。
|
|
|
+ - `stage: ProjectStage`:任务所在项目阶段(如 `建模`、`渲染`、`后期` 等)。
|
|
|
+ - `deadline: Date`:任务截止时间。
|
|
|
+ - `priority: any`:任务优先级(高/中/低)。
|
|
|
+ - `isOverdue: boolean`:是否逾期。
|
|
|
+ - `isCompleted: boolean`:是否完成。
|
|
|
+ - `assignee: any`:任务负责人(设计师)。
|
|
|
+ - `description: any`:任务描述(例如「渲染阶段 - 客户姓名」)。
|
|
|
+
|
|
|
+### 2. 设计师 Dashboard 内部任务与时间轴数据
|
|
|
+
|
|
|
+- **ShiftTask(代班任务)**
|
|
|
+ - `id: string`
|
|
|
+ - `projectId: string`
|
|
|
+ - `projectName: string`
|
|
|
+ - `taskDescription: string`
|
|
|
+ - `priority: '高' | '中' | '低'`
|
|
|
+ - `shiftDate: string`
|
|
|
+ - `status: '待处理' | '处理中' | '已完成'`
|
|
|
+
|
|
|
+- **ProjectTimelineItem(个人项目时间轴)**
|
|
|
+ - `id: string`
|
|
|
+ - `name: string`:项目名称或阶段名称。
|
|
|
+ - `deadline: string`:截止时间(字符串形式)。
|
|
|
+ - `status: string`:当前状态(进行中/已完成/逾期等)。
|
|
|
+
|
|
|
+- **CurrentUser(顶部用户信息)**
|
|
|
+ - `userid: string`:企微用户ID。
|
|
|
+ - `name: string`:姓名。
|
|
|
+ - `avatar: string`:头像 URL。
|
|
|
+ - `roleName: string`:角色名称(一般为「组员」)。
|
|
|
+ - `department?: string`:部门名称。
|
|
|
+ - `position?: string`:职位。
|
|
|
+
|
|
|
+### 3. 技能标签与绩效数据(个人看板)
|
|
|
+
|
|
|
+- **SkillTag**
|
|
|
+ - `id: string`
|
|
|
+ - `name: string`:技能名称(如风格、软件等)。
|
|
|
+ - `level: number`:技能等级(1–5)。
|
|
|
+ - `count: number`:该技能相关的完成项目数量。
|
|
|
+
|
|
|
+- **PerformanceData**
|
|
|
+ - `month: string`:月份。
|
|
|
+ - `projectCompletionRate: number`:项目完成率。
|
|
|
+ - `customerSatisfaction: number`:客户满意度。
|
|
|
+ - `deliveryOnTimeRate: number`:交付准时率。
|
|
|
+
|
|
|
+- **MatchingOrder**
|
|
|
+ - `id: string`
|
|
|
+ - `projectName: string`:推荐项目名称。
|
|
|
+ - `requiredSkills: string[]`:所需技能。
|
|
|
+ - `matchRate: number`:匹配度(百分比)。
|
|
|
+ - `customerLevel: '优质' | '普通'`:客户等级。
|
|
|
+
|
|
|
+- **Settlement(结算记录)**
|
|
|
+ - `id: string`
|
|
|
+ - `projectId: string`
|
|
|
+ - `stage?: ProjectStage`
|
|
|
+ - `type?: 'deposit' | 'progress' | 'final_payment'`
|
|
|
+ - `amount: number`:金额。
|
|
|
+ - `status: '待结算' | '已结算' | '逾期' | '已取消' | 'pending' | 'completed'`
|
|
|
+ - `createdAt: Date`:创建时间。
|
|
|
+ - 其他字段(如 `settledAt`、`paidDate`、`dueDate` 等)用于详细的财务追踪。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+如需,我可以再为设计师端补充:
|
|
|
+- 每个页面的「典型操作场景」(例如:收到新任务 → 打开项目 → 上传渲染图 → 填写自查项 → 通知组长审核);
|
|
|
+- 或者画一份文字版「从任务到交付完成」的完整流程,用于培训文档。
|
|
|
+
|
|
|
+
|