|
|
@@ -1,724 +0,0 @@
|
|
|
-# TBOSS OA 模块 — 原型规格补充说明书
|
|
|
-
|
|
|
-> 配合 `2026-05-30-tboss-oa-design.md`、`2026-05-30-tboss-oa-database.md`、`2026-05-30-tboss-oa-interactions.md` 使用,补齐高保真原型生成所需的布局标注、组件状态、Mock 数据、资源清单、权限矩阵和校验规则。
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 一、页面布局标注
|
|
|
-
|
|
|
-### 1.1 Appshell (`/`)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ [IndexedStack 主内容区] │
|
|
|
-│ │
|
|
|
-│ │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDTabBar (h=56px, bg=#FFFFFF) │
|
|
|
-│ [🔔消息] [📱工作台] [👤我的] │
|
|
|
-│ flex=1 flex=1 flex=1 │
|
|
|
-│ TDBadge 在图标右上角, offset(-4,-4) │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
-### 1.2 消息通知 (`/messages`)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ TDNavbar: "消息通知" [全部已读] │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDListView (padding-h=16px, gap=8px) │
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ [图标 24×24] 标题(14sp, bold) │ │
|
|
|
-│ │ 发送人(12sp) 时间(12sp) │ │
|
|
|
-│ │ 摘要(12sp, --text-sec) │ │
|
|
|
-│ │ [红点 8×8]│ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-│ (卡片 h=auto, bg=#FFF, r=8px, │
|
|
|
-│ padding=12px, 可左滑) │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
-### 1.3 工作台 (`/home`)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ TDNavbar: "TBOSS 工作台" │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDRotation (h=160px, 圆角8px) │
|
|
|
-│ [图片1] [图片2] [图片3] ··· ●○○ │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDGrid (4列, gap=12px, padding-h=16px) │
|
|
|
-│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
|
|
-│ │图标│ │图标│ │图标│ │图标│ │
|
|
|
-│ │事前│ │费用│ │用车│ │加班│ ← 发起行 │
|
|
|
-│ │申请│ │报销│ │申请│ │申请│ │
|
|
|
-│ └────┘ └────┘ └────┘ └────┘ │
|
|
|
-│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
|
|
-│ │图标│ │图标│ │图标│ │图标│ │
|
|
|
-│ │申请│ │报销│ │外勤│ │公司│ ← 记录行 │
|
|
|
-│ │记录│ │记录│ │日志│ │公告│ │
|
|
|
-│ └────┘ └────┘ └────┘ └────┘ │
|
|
|
-│ (每格 icon=32×32, text=12sp) │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ 【我的快捷看板】卡片 (h=120px) │
|
|
|
-│ ┌─45%─┐ ┌─25%─┐ ┌─30%─┐ │
|
|
|
-│ │¥12,350│ │ 8 │ │ 2 │ │
|
|
|
-│ │本月报销│ │已提单│ │待处理│ │
|
|
|
-│ └──────┘ └─────┘ └─────┘ │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
-### 1.4 个人中心 (`/profile`)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ TDNavbar: "我的" │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ [头像 64×64, r=32] │ │
|
|
|
-│ │ 张三 销售部 · 客户经理 │ │
|
|
|
-│ │ (padding=16px, bg=#FFF) │ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDListView (分组样式, gap=0, 分割线1px) │
|
|
|
-│ 我的审批历史 › │
|
|
|
-│ ─────────────────────────────── │
|
|
|
-│ 我的报表 › │
|
|
|
-│ ─────────────────────────────── │
|
|
|
-│ 关于 TBOSS OA › │
|
|
|
-│ (每行 h=48px, padding-h=16px) │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
-### 1.5 表单页布局(页面 4/5/10/13 通用)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ TDNavbar: "{表单名称}" │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ FormSection: 基本信息 (padding=16px) │
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ 申请人姓名 [只读] 所属部门 [只读]│ │
|
|
|
-│ │ (两列并排, 各 flex=1, gap=12px) │ │
|
|
|
-│ │ 申请日期 [只读] │ │
|
|
|
-│ │ 紧急程度 ○普通 ○紧急 ○特急 │ │
|
|
|
-│ │ 费用类型 [ 下拉选择 ▼ ] │ │
|
|
|
-│ │ 费用事由 [ ] │ │
|
|
|
-│ │ (多行, h=80px) │ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-│ │
|
|
|
-│ FormSection: 关联管控 │
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ 关联项目 [ 级联选择 ▼ ] │ │
|
|
|
-│ │ 预算科目 [ 级联选择 ▼ ] │ │
|
|
|
-│ │ 💰 当前可用预算余额:¥50,000.00 │ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-│ │
|
|
|
-│ 支撑材料上传区 │
|
|
|
-│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │
|
|
|
-│ │+ │ │ │ │ │ │ │ │ │ │ │ TDImageGrid│
|
|
|
-│ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘ 3列, gap=8│
|
|
|
-│ (每格 100×100, r=4px) │
|
|
|
-│ │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ [重置] [存为草稿] [ 提交审批 ] │
|
|
|
-│ (灰色) (浅蓝#E6F7FD) (主色#00ABF3) │
|
|
|
-│ 底部栏 h=56px, bg=#FFF, shadow-up │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
-### 1.6 详情页布局(页面 8/9 通用)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ TDNavbar: "{单据}详情" │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ 状态大色块横幅 (h=120px) │
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ ✅ (icon 48×48) │ │
|
|
|
-│ │ 已通过 │ │
|
|
|
-│ │ 当前审批人:王经理 │ │
|
|
|
-│ │ (bg=success时#E6F9F2, text=#00A870) │ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-│ 提交时间:2026-05-30 14:30 │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ 基础信息 (key-value 双栏, 左灰右黑) │
|
|
|
-│ 申请人 │ 张三 │
|
|
|
-│ 所属部门 │ 销售部 │
|
|
|
-│ 费用类型 │ 差旅费 │
|
|
|
-│ 预估金额 │ ¥12,350.00 │
|
|
|
-│ (左列 w=100px, 12sp, --text-secondary) │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ 费用明细表 (明细>5行折叠) │
|
|
|
-│ ┌──────┬──────┬──────┬──────┐ │
|
|
|
-│ │费用类型│预估金额│ 说明 │ │ │
|
|
|
-│ ├──────┼──────┼──────┼──────┤ │
|
|
|
-│ │ ... │ ... │ ... │ │ │
|
|
|
-│ └──────┴──────┴──────┴──────┘ │
|
|
|
-│ [ 展开全部 ▼ ] │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ 附件宫格 TDImageGrid (3列) │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDTimeline 审批流 │
|
|
|
-│ ● 发起人已提交 2026-05-30 14:30 │
|
|
|
-│ │ (左竖线 2px, --border) │
|
|
|
-│ ● 王经理已通过 2026-05-30 15:00 │
|
|
|
-│ │ │
|
|
|
-│ ○ 李会计审批中 (待处理) │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ [编辑] [ 提交审批 ] │
|
|
|
-│ 底部栏 h=56px, bg=#FFF │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
-### 1.7 列表页布局(页面 6/7/11/14 通用)
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────────┐
|
|
|
-│ TDNavbar: "{列表名称}" │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDChip 滚动条 (h=44px) │
|
|
|
-│ [全部] [草稿] [审批中] [已通过] [已拒绝] │
|
|
|
-│ (gap=8px, padding-h=16px, 可水平滚动) │
|
|
|
-├──────────────────────────────────────────┤
|
|
|
-│ TDListView (padding-h=16px, gap=12px) │
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ BXSQ-20260530-001 │ │
|
|
|
-│ │ 差旅费报销 — 深圳出差 │ │
|
|
|
-│ │ ¥12,350.00 2026-05-30 │ │
|
|
|
-│ │ [已通过] │ │
|
|
|
-│ │ (h=auto, bg=#FFF, r=8px, p=12px) │ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-│ ┌──────────────────────────────────────┐ │
|
|
|
-│ │ ... │ │
|
|
|
-│ └──────────────────────────────────────┘ │
|
|
|
-└──────────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 二、组件状态矩阵
|
|
|
-
|
|
|
-### 2.1 按钮状态
|
|
|
-
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 默认 | `bg=--primary(#00ABF3)`, `text=#FFF`, `fs=16sp`, `h=44px`, `r=22px` |
|
|
|
-| 按下 | `bg=--primary-active(#0089C4)`, 缩放 0.97 |
|
|
|
-| 禁用 | `bg=#E0E0E0`, `text=#BFBFBF`, 不可点击 |
|
|
|
-| Loading | 文本替换为 20×20 白色菊花 `TDLoading`, 按钮宽度不变 |
|
|
|
-
|
|
|
-**二级按钮(存为草稿/重置)**:
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 默认 | `bg=--primary-light(#E6F7FD)`, `text=--primary(#00ABF3)`, 边框 1px `--primary` |
|
|
|
-| 按下 | `bg=#CCEFFC` |
|
|
|
-
|
|
|
-**危险按钮(删除/拒绝/强制终止)**:
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 默认 | `bg=#FFF`, `text=--danger(#D54941)`, 边框 1px `--danger` |
|
|
|
-| 按下 | `bg=#FFF0EF` |
|
|
|
-
|
|
|
-### 2.2 输入框状态
|
|
|
-
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 默认 | `bg=#FFF`, `border=1px --border(#E7E7E7)`, `r=4px`, `h=44px`, `padding-h=12px` |
|
|
|
-| 聚焦 | `border=1.5px --primary(#00ABF3)`, 外阴影 `0 0 0 2px rgba(0,171,243,0.1)` |
|
|
|
-| 报错 | `border=1.5px --danger(#D54941)`, 下方红色提示文字 12sp |
|
|
|
-| 只读 | `bg=--bg-page(#F5F5F5)`, `text=--text-secondary(#666666)`, 无边框 |
|
|
|
-
|
|
|
-### 2.3 TDChip 状态
|
|
|
-
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 默认 | `bg=#F5F5F5`, `text=--text-secondary(#666666)`, `h=32px`, `r=16px`, `padding-h=12px` |
|
|
|
-| 选中 | `bg=--primary(#00ABF3)`, `text=#FFF` |
|
|
|
-
|
|
|
-### 2.4 卡片左滑
|
|
|
-
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 默认 | 正常位置, `offsetX=0` |
|
|
|
-| 左滑露出操作 | 卡片主体左移 120px, 右侧露出按钮区 `w=120px`, 弹簧动画 200ms |
|
|
|
-| 删除动画 | 卡片 `opacity 0→1 200ms` + `height→0 300ms`, 下方卡片上移 |
|
|
|
-
|
|
|
-### 2.5 TDBadge 状态
|
|
|
-
|
|
|
-| 变体 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 纯红点 | `w=8px, h=8px, r=4px, bg=--danger`, 无文字 |
|
|
|
-| 数字角标 | `h=18px, min-w=18px, r=9px, bg=--danger, text=#FFF, fs=10sp`, 数字>99 显示"99+" |
|
|
|
-| 消失动画 | `scale 1→0 + opacity 1→0, 200ms` |
|
|
|
-
|
|
|
-### 2.6 StatusTag 状态
|
|
|
-
|
|
|
-| 状态 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 草稿 (draft) | `bg=#F5F5F5, text=--status-gray(#999999)` |
|
|
|
-| 审批中 (pending) | `bg=#FFF3E8, text=--warning(#E37318)` |
|
|
|
-| 已通过 (approved) | `bg=#E6F9F2, text=--success(#00A870)` |
|
|
|
-| 已拒绝 (rejected) | `bg=#FFF0EF, text=--danger(#D54941)` |
|
|
|
-| 已撤回 (withdrawn) | `bg=#F5F5F5, text=--status-gray(#999999)` |
|
|
|
-| 已还车 (returned) | `bg=#EDF2FC, text=#5A8CDB` |
|
|
|
-| 已完成 (completed) | `bg=#E6F9F2, text=--success(#00A870)` |
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 三、数据 Mock 结构
|
|
|
-
|
|
|
-### 3.1 消息列表项
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "id": "msg-001",
|
|
|
- "msgType": "approval_notice",
|
|
|
- "bizType": "expense",
|
|
|
- "bizId": "exp-001",
|
|
|
- "title": "王经理提交了一笔费用报销",
|
|
|
- "sender": {
|
|
|
- "id": "user-002",
|
|
|
- "realName": "王经理",
|
|
|
- "avatarUrl": "/avatars/user-002.jpg"
|
|
|
- },
|
|
|
- "content": "差旅费报销 — 深圳出差",
|
|
|
- "isRead": false,
|
|
|
- "createTime": "2026-05-30T14:30:00Z"
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.2 列表卡片(事前申请)
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "applicationNo": "BXSQ-20260530-001",
|
|
|
- "purpose": "深圳客户拜访差旅费",
|
|
|
- "estimatedAmount": 12350.00,
|
|
|
- "expenseType": "travel",
|
|
|
- "status": "approved",
|
|
|
- "createTime": "2026-05-30T10:00:00Z"
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.3 详情页(事前申请)
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "id": "ea-001",
|
|
|
- "applicationNo": "BXSQ-20260530-001",
|
|
|
- "status": "approved",
|
|
|
- "createTime": "2026-05-30T10:00:00Z",
|
|
|
- "applicant": { "realName": "张三", "deptName": "销售部" },
|
|
|
- "urgency": "normal",
|
|
|
- "expenseType": "travel",
|
|
|
- "projectName": "2026华南市场拓展",
|
|
|
- "budgetSubjectName": "差旅费",
|
|
|
- "estimatedAmount": 12350.00,
|
|
|
- "purpose": "深圳客户拜访差旅费",
|
|
|
- "currentApprover": { "realName": "王经理", "deptName": "销售部", "position": "销售总监" },
|
|
|
- "details": [
|
|
|
- { "expenseCategory": "交通费", "estimatedAmount": 8000.00, "remark": "往返机票" },
|
|
|
- { "expenseCategory": "住宿费", "estimatedAmount": 3500.00, "remark": "三晚酒店" },
|
|
|
- { "expenseCategory": "餐饮费", "estimatedAmount": 850.00, "remark": "客户招待" }
|
|
|
- ],
|
|
|
- "attachments": [
|
|
|
- { "fileName": "出差申请单.pdf", "fileUrl": "/files/ea-001-1.pdf", "fileType": "pdf", "fileSize": 204800 },
|
|
|
- { "fileName": "报价单.jpg", "fileUrl": "/files/ea-001-2.jpg", "fileType": "image", "fileSize": 512000 }
|
|
|
- ],
|
|
|
- "approvalTimeline": [
|
|
|
- { "approvalLevel": 0, "action": "提交", "approver": { "realName": "张三" }, "createTime": "2026-05-30T10:00:00Z", "opinion": "" },
|
|
|
- { "approvalLevel": 1, "action": "approve", "approver": { "realName": "王经理" }, "createTime": "2026-05-30T14:00:00Z", "approvalTime": "2026-05-30T15:00:00Z", "opinion": "同意" }
|
|
|
- ],
|
|
|
- "availableBudget": 50000.00
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.4 待审批卡片(经理版)
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "pendingCount": 8,
|
|
|
- "recentItems": [
|
|
|
- { "applicantName": "张三", "bizTypeName": "费用报销", "amount": 12350.00, "createTime": "2026-05-30T10:00:00Z" },
|
|
|
- { "applicantName": "李四", "bizTypeName": "事前申请", "amount": 5000.00, "createTime": "2026-05-30T09:30:00Z" },
|
|
|
- { "applicantName": "赵五", "bizTypeName": "加班申请", "amount": null, "otHours": 4.5, "createTime": "2026-05-30T09:00:00Z" }
|
|
|
- ]
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.5 财务看盘卡片
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "monthPaidAmount": 285600.00,
|
|
|
- "pendingPaymentAmount": 152300.00,
|
|
|
- "weekAbnormalInvoices": 3
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.6 快捷看板
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "monthExpenseTotal": 12350.00,
|
|
|
- "monthApplicationCount": 8,
|
|
|
- "pendingProcessCount": 2
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.7 公告触达率
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "announcementId": "ann-001",
|
|
|
- "totalTargets": 50,
|
|
|
- "readCount": 45,
|
|
|
- "unreadCount": 5,
|
|
|
- "unreadUsers": [
|
|
|
- { "id": "user-010", "realName": "钱六", "deptName": "财务部", "avatarUrl": "/avatars/user-010.jpg" },
|
|
|
- { "id": "user-011", "realName": "孙七", "deptName": "行政部", "avatarUrl": "/avatars/user-011.jpg" }
|
|
|
- ]
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 3.8 权限管理列表项
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "id": "user-003",
|
|
|
- "userName": "0048",
|
|
|
- "realName": "张三",
|
|
|
- "deptName": "销售部",
|
|
|
- "avatarUrl": "/avatars/user-003.jpg",
|
|
|
- "isActive": true,
|
|
|
- "roles": ["employee"],
|
|
|
- "roleChangeLog": [
|
|
|
- {
|
|
|
- "operatorName": "管理员",
|
|
|
- "changeType": "assign_role",
|
|
|
- "beforeSnapshot": ["employee"],
|
|
|
- "afterSnapshot": ["employee", "finance"],
|
|
|
- "createTime": "2026-05-28T11:00:00Z"
|
|
|
- }
|
|
|
- ]
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 四、资源清单
|
|
|
-
|
|
|
-### 4.1 默认头像占位
|
|
|
-
|
|
|
-| 场景 | 样式 |
|
|
|
-|------|------|
|
|
|
-| 无头像用户 | 圆形,`bg=--primary(#00ABF3)`,居中白色姓名首字母(如"张"),`fs=18sp` |
|
|
|
-| 已离职/软删除用户 | 圆形,`bg=--status-gray(#999999)`,首字母,整体透明度 0.5 |
|
|
|
-
|
|
|
-### 4.2 空状态占位图
|
|
|
-
|
|
|
-| 场景 | 图标 | 尺寸 | 文案 |
|
|
|
-|------|------|------|------|
|
|
|
-| 消息为空 | 铃铛(`TDIcons.notification`) | 80×80, `color=--text-placeholder` | "暂无消息通知" |
|
|
|
-| 列表为空 | 文档(`TDIcons.task`) | 80×80 | "暂无记录" |
|
|
|
-| 待审批为空 | 对勾(`TDIcons.check-circle`) | 80×80 | "暂无待审批单据" |
|
|
|
-| 明细为空 | 票据(`TDIcons.receipt`) | 60×60 | "暂无报销明细" |
|
|
|
-| 附件为空 | 图片(`TDIcons.image`) | 60×60 | "暂无附件" |
|
|
|
-| 搜索为空 | 搜索(`TDIcons.search`) | 80×80 | "未找到匹配的员工" |
|
|
|
-| 公告为空 | 喇叭(`TDIcons.notification`) | 80×80 | "暂无行政公告" |
|
|
|
-| 报表为空 | 图表(`TDIcons.chart`) | 100×100 | "所选时间范围内暂无数据" |
|
|
|
-
|
|
|
-### 4.3 状态横幅图标
|
|
|
-
|
|
|
-| 状态 | 图标 | 尺寸 | 底色 |
|
|
|
-|------|------|------|------|
|
|
|
-| 审批中 | `TDIcons.time-filled` | 48×48, `color=--warning` | `bg=#FFF3E8` |
|
|
|
-| 已通过 | `TDIcons.check-circle-filled` | 48×48, `color=--success` | `bg=#E6F9F2` |
|
|
|
-| 已拒绝 | `TDIcons.close-circle-filled` | 48×48, `color=--danger` | `bg=#FFF0EF` |
|
|
|
-| 已撤回 | `TDIcons.rollback` | 48×48, `color=--status-gray` | `bg=#F5F5F5` |
|
|
|
-
|
|
|
-### 4.4 财务归档盖章
|
|
|
-
|
|
|
-| 元素 | 样式 |
|
|
|
-|------|------|
|
|
|
-| "已归档"盖章 | 红色椭圆边框(`border=3px --danger, r=50%`),旋转 -15°,文字`--danger 16sp bold`,透明度 0.7 |
|
|
|
-| 位置 | 详情页发票区右上角,绝对定位 offset(16,-16) |
|
|
|
-
|
|
|
-### 4.5 防伪水印
|
|
|
-
|
|
|
-| 属性 | 值 |
|
|
|
-|------|------|
|
|
|
-| 位置 | 照片右下角 |
|
|
|
-| 内容 | `{YYYY-MM-DD HH:mm:ss}` + `{纬度},{经度}` |
|
|
|
-| 样式 | 半透明白色(`rgba(255,255,255,0.6)`),`fs=10sp`,等宽字体,两行 |
|
|
|
-
|
|
|
-### 4.6 财务凭证表单
|
|
|
-
|
|
|
-```
|
|
|
-┌──────────────────────────────────────┐
|
|
|
-│ 财务凭证编号归档 │
|
|
|
-│ │
|
|
|
-│ 公司转账电汇流水号 * │
|
|
|
-│ ┌──────────────────────────────────┐ │
|
|
|
-│ │ BOF2026053000001234 │ │
|
|
|
-│ └──────────────────────────────────┘ │
|
|
|
-│ │
|
|
|
-│ 财务记账凭证号 * │
|
|
|
-│ ┌──────────────────────────────────┐ │
|
|
|
-│ │ JZ-2026-05-0032 │ │
|
|
|
-│ └──────────────────────────────────┘ │
|
|
|
-│ │
|
|
|
-│ [ 确认归档 ] │
|
|
|
-└──────────────────────────────────────┘
|
|
|
-```
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 五、角色权限矩阵
|
|
|
-
|
|
|
-### 5.1 页面可见性
|
|
|
-
|
|
|
-| 页面 | 员工 | 经理 | 财务 | 管理员 |
|
|
|
-|------|:--:|:--:|:--:|:--:|
|
|
|
-| `/` (Appshell) | ✅ | ✅ | ✅ | ✅ |
|
|
|
-| `/messages` | ✅ | ✅ | ✅ | ✅ |
|
|
|
-| `/home` | 员工版 | +待审批卡片 | +财务看盘 | +公告入口 |
|
|
|
-| `/profile` | ✅ | ✅ | ✅ | ✅ |
|
|
|
-| `/expense-apply/apply` | ✅ | ✅ | — | — |
|
|
|
-| `/expense/apply` | ✅ | ✅ | — | — |
|
|
|
-| `/expense-apply/list` | 我的 | +下属标签 | 全公司(只读) | — |
|
|
|
-| `/expense/list` | 我的 | +下属标签 | +待付款Chip | — |
|
|
|
-| `/expense-apply/detail/:id` | 员工版 | 经理版 | — | 管理员版 |
|
|
|
-| `/expense/detail/:id` | 员工版 | 经理版 | 财务版 | 管理员版 |
|
|
|
-| `/overtime/apply` | ✅ | ✅ | — | — |
|
|
|
-| `/overtime/list` | 我的 | +下属标签 | 全公司(只读) | — |
|
|
|
-| `/overtime/detail/:id` | 员工版 | 经理版 | — | 管理员版 |
|
|
|
-| `/vehicle/apply` | ✅ | ✅ | — | — |
|
|
|
-| `/vehicle/list` | 我的 | +下属标签 | 全公司(只读) | — |
|
|
|
-| `/vehicle/detail/:id` | 员工版 | 经理版 | — | 管理员版 |
|
|
|
-| `/outing-log/create` | ✅ | ✅ | — | — |
|
|
|
-| `/outing-log/list` | 我的 | +下属标签 | — | — |
|
|
|
-| `/outing-log/detail/:id` | 员工版 | +点评区 | — | — |
|
|
|
-| `/announcement/list` | ✅ | ✅ | ✅ | +我的草稿Chip |
|
|
|
-| `/announcement/detail/:id` | ✅ | ✅ | ✅ | +触达审计 |
|
|
|
-| `/report/*` | 个人 | 部门 | 全公司+导出 | — |
|
|
|
-| `/announcement/create` | — | — | — | ✅ |
|
|
|
-| `/admin/permissions` | — | — | — | ✅ |
|
|
|
-
|
|
|
-### 5.2 角色判定优先级
|
|
|
-
|
|
|
-```
|
|
|
-Admin > Finance > Approver > Employee
|
|
|
-```
|
|
|
-
|
|
|
-高优先级角色叠加低优先级角色的功能块。例如:用户同时拥有 Approver + Employee → 展示经理版工作台 + 员工版列表切换。
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 六、表单校验规则汇总
|
|
|
-
|
|
|
-### 6.1 事前申请表单
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 费用事由 | 必填,≤200字 | 提交时 | ScrollTo + 红框 + `TDMessage`"请填写费用事由" |
|
|
|
-| 关联项目 | 草稿可空,提交必填 | 提交时 | 同上"请选择关联项目" |
|
|
|
-| 预算科目 | 草稿可空,提交必填 | 提交时 | 同上"请选择预算科目" |
|
|
|
-| 预估金额合计 | 可超预算,仅警告 | 实时 | 金额变红 + 警告文本"已超支,将触发高管特批" |
|
|
|
-| 单张图片 | ≤10MB | 上传时 | `TDToast`"文件大小超过限制" |
|
|
|
-| 单份 PDF | ≤20MB | 上传时 | 同上 |
|
|
|
-
|
|
|
-### 6.2 费用报销表单
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 银行账号 | 16-19位数字 | 实时(前端) + 提交(后端) | 红色提示"请输入正确的银行账号" |
|
|
|
-| 发票金额 | 纯数字 | 输入时 | 键盘限制,不接受非数字 |
|
|
|
-| 关联项目 | 草稿可空,提交必填 | 提交时 | ScrollTo 报错 |
|
|
|
-| 预算科目 | 草稿可空,提交必填 | 提交时 | 同上 |
|
|
|
-| 单张发票图片 | ≤10MB | 上传时 | Toast 提示 |
|
|
|
-
|
|
|
-### 6.3 加班申请表单
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 净工时 | >0 | 实时 | 显示"0小时"+变红+提交按钮置灰 |
|
|
|
-| 开始时间 < 结束时间 | 不晚于 | 实时 | 边框变红+提示+提交按钮置灰 |
|
|
|
-| 混合比例 | 10%-90% | 滑块限制 | 滑块无法拖出范围 |
|
|
|
-
|
|
|
-### 6.4 用车申请表单
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 还车时间 > 出车时间 | 不晚于 | 实时 | 红色提示+提交按钮置灰 |
|
|
|
-| 车牌+时间排期冲突 | 无重叠预订 | 异步校验 | 红色文本"排期冲突"+提交按钮锁死 |
|
|
|
-| 同行人数输入0 | 自动调整 | 失焦 | 0→1 |
|
|
|
-
|
|
|
-### 6.5 还车核销
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 还车里程 ≥ 出车里程 | 不小于 | 实时 | 红色提示"还车里程不能小于出车里程"+提交按钮置灰 |
|
|
|
-
|
|
|
-### 6.6 外勤日志
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| GPS 定位 | 提交时必填 | 提交时 | 提交按钮置灰+"请先获取当前位置" |
|
|
|
-| 现场拍照 | ≥1张 | 提交时 | 提交按钮置灰+"请至少拍摄一张现场照片" |
|
|
|
-
|
|
|
-### 6.7 审批操作
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 拒绝理由 | ≥5字(汉字) | 弹窗内输入 | 确定按钮置灰+提示"请输入至少5个字" |
|
|
|
-
|
|
|
-### 6.8 财务核销
|
|
|
-
|
|
|
-| 字段 | 规则 | 触发时机 | 违反行为 |
|
|
|
-|------|------|---------|---------|
|
|
|
-| 合规复选框 ×3 | 全部勾选 | 页面加载 | 打款按钮置灰(视觉锁定) |
|
|
|
-| 电汇流水号 | 必填 | 提交时 | 红色边框+提示"请输入公司转账电汇流水号" |
|
|
|
-| 记账凭证号 | 必填 | 提交时 | 红色边框+提示"请输入财务记账凭证号" |
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 七、页面完整 Mock 数据示例
|
|
|
-
|
|
|
-### 7.1 工作台首页完整响应
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "banners": [
|
|
|
- { "imageUrl": "/banners/1.jpg", "title": "2026年Q2全员大会", "linkUrl": "/announcement/detail/ann-005" },
|
|
|
- { "imageUrl": "/banners/2.jpg", "title": "端午节放假通知", "linkUrl": null },
|
|
|
- { "imageUrl": "/banners/3.jpg", "title": "安全生产月活动", "linkUrl": "/announcement/detail/ann-006" }
|
|
|
- ],
|
|
|
- "quickStats": {
|
|
|
- "monthExpenseTotal": 12350.00,
|
|
|
- "monthApplicationCount": 8,
|
|
|
- "pendingProcessCount": 2
|
|
|
- },
|
|
|
- "managerPending": {
|
|
|
- "pendingCount": 8,
|
|
|
- "recentItems": [
|
|
|
- { "applicantName": "张三", "bizTypeName": "费用报销", "amount": 12350.00, "createTime": "2026-05-30T10:00:00Z" }
|
|
|
- ]
|
|
|
- },
|
|
|
- "financeDashboard": {
|
|
|
- "monthPaidAmount": 285600.00,
|
|
|
- "pendingPaymentAmount": 152300.00,
|
|
|
- "weekAbnormalInvoices": 3
|
|
|
- }
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
-### 7.2 消息列表完整响应
|
|
|
-
|
|
|
-```json
|
|
|
-{
|
|
|
- "total": 25,
|
|
|
- "page": 1,
|
|
|
- "unreadCount": 5,
|
|
|
- "items": [
|
|
|
- {
|
|
|
- "id": "msg-001",
|
|
|
- "msgType": "approval_notice",
|
|
|
- "bizType": "expense",
|
|
|
- "bizId": "exp-001",
|
|
|
- "title": "张三提交了一笔费用报销",
|
|
|
- "sender": { "realName": "张三", "avatarUrl": "/avatars/u-001.jpg" },
|
|
|
- "content": "差旅费报销 — 深圳出差 ¥12,350.00",
|
|
|
- "isRead": false,
|
|
|
- "createTime": "2026-05-30T14:30:00Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "msg-002",
|
|
|
- "msgType": "approval_result",
|
|
|
- "bizType": "expense_apply",
|
|
|
- "bizId": "ea-003",
|
|
|
- "title": "王经理拒绝了您的事前申请",
|
|
|
- "sender": { "realName": "王经理", "avatarUrl": "/avatars/u-002.jpg" },
|
|
|
- "content": "预算不足,请调整后重新提交",
|
|
|
- "isRead": true,
|
|
|
- "createTime": "2026-05-29T16:00:00Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "msg-003",
|
|
|
- "msgType": "announcement",
|
|
|
- "bizType": "announcement",
|
|
|
- "bizId": "ann-005",
|
|
|
- "title": "2026年Q2全员大会通知",
|
|
|
- "sender": { "realName": "系统管理员", "avatarUrl": "/avatars/u-admin.jpg" },
|
|
|
- "content": "定于6月5日下午3点在3楼会议室召开全员大会",
|
|
|
- "isRead": false,
|
|
|
- "createTime": "2026-05-30T08:00:00Z"
|
|
|
- }
|
|
|
- ]
|
|
|
-}
|
|
|
-```
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 八、导航关系图(带权限分支)
|
|
|
-
|
|
|
-```
|
|
|
-/ (Appshell)
|
|
|
-│
|
|
|
-├── /messages ─────────────────────────────────────────────────
|
|
|
-│ │ (审批待办) → /{bizType}/detail/:id (底部带审批操作栏)
|
|
|
-│ │ (审批结果) → /{bizType}/detail/:id
|
|
|
-│ │ (公告通知) → /announcement/detail/:id
|
|
|
-│ │ (纯通知) → TDDialog 弹窗
|
|
|
-│ │
|
|
|
-│ └── 全部已读: POST /api/messages/read-all
|
|
|
-│ 标记已读: PUT /api/messages/:id/read
|
|
|
-│ 删除消息: PUT /api/messages/:id/delete
|
|
|
-│
|
|
|
-├── /home ───────────────────────────────────────────────────
|
|
|
-│ │ [员工] 轮播图 + 金刚区(8格) + 快捷看板(3卡片)
|
|
|
-│ │ [经理] +待审批卡片区 (→ /messages?filter=approval_notice)
|
|
|
-│ │ [财务] +全公司财务看盘
|
|
|
-│ │
|
|
|
-│ ├── 金刚区-发起 → /expense-apply/apply | /expense/apply
|
|
|
-│ │ /vehicle/apply | /overtime/apply
|
|
|
-│ ├── 金刚区-记录 → /expense-apply/list | /expense/list
|
|
|
-│ │ /outing-log/list | /announcement/list
|
|
|
-│ ├── 看板-已提 → /expense-apply/list
|
|
|
-│ ├── 看板-报销 → /report/expense-detail
|
|
|
-│ └── 看板-待处理 → /messages
|
|
|
-│
|
|
|
-├── /profile ──────────────────────────────────────────────────
|
|
|
-│ ├── 我的审批历史 (子页面)
|
|
|
-│ │ └── 点击单据号 → /{bizType}/detail/:id
|
|
|
-│ ├── 我的报表 (子页面, 5 Tab)
|
|
|
-│ │ └── → /report/{bizType}-detail
|
|
|
-│ ├── 关于 (子页面)
|
|
|
-│ └── 头像上传: PUT /api/user/avatar
|
|
|
-│
|
|
|
-├── /expense-apply/apply ──(存草稿/提交)──→ /expense-apply/list
|
|
|
-├── /expense/apply ────────(存草稿/提交)──→ /expense/list
|
|
|
-├── /vehicle/apply ────────(存草稿/提交)──→ /vehicle/list
|
|
|
-├── /overtime/apply ───────(存草稿/提交)──→ /overtime/list
|
|
|
-├── /outing-log/create ────(存草稿/提交)──→ /outing-log/list
|
|
|
-│
|
|
|
-├── /announcement/create [仅管理员] ────→ /announcement/list
|
|
|
-├── /admin/permissions [仅管理员]
|
|
|
-│
|
|
|
-└── 报表 /report/{bizType}-detail [员工/经理/财务]
|
|
|
-```
|
|
|
-
|
|
|
-**表单→列表→详情 核心流转**:
|
|
|
-```
|
|
|
-apply ──存为草稿──→ list (激活"草稿"Chip) ──左滑编辑──→ apply?id=xxx
|
|
|
- │ │
|
|
|
- └──提交审批──→ list (激活"全部"Chip) └──点击卡片──→ detail/:id
|
|
|
- │
|
|
|
- rejected ←── 经理拒绝 │
|
|
|
- approved ←── 经理同意 │
|
|
|
- withdrawn ←── 员工撤回 │
|
|
|
- │
|
|
|
- └── rejected → 重新编辑 → apply?id=xxx (更新原记录)
|
|
|
-```
|