文档修改
This commit is contained in:
Shen Wei
@@ -35,10 +35,11 @@
|
||||
| 03 | P0-A | 房源管理（详情） | US-PROPERTY-003~008 | `UI_DESIGN/房源管理/房源详情_UI.md` | | `UI_DESIGN/房源详情_UI.html` | 待评审 | 你评审房源详情 UI.md + 静态页，给我反馈我再迭代 |
|
||||
| 04 | P0-B | 楼盘管理（列表） | US-COMPLEX-002 | `UI_DESIGN/楼盘管理/楼盘列表_UI.md` | | `UI_DESIGN/楼盘列表_UI.html` | 待评审 | 你评审楼盘列表 UI.md + 静态页，给我反馈我再迭代 |
|
||||
| 05 | P0-B | 楼盘管理（详情/维护） | US-COMPLEX-001 | `UI_DESIGN/楼盘管理/楼盘详情_UI.md` | `Project/fonrey/screenshots/楼盘管理/楼盘管理.png`<br>`Project/fonrey/screenshots/楼盘管理/楼栋管理.png`<br> | `UI_DESIGN/楼盘详情_UI.html` | 待评审 | 进入任务06（楼盘管理-区域管理） |
|
||||
| 06 | P0-B | 楼盘管理（区域） | US-COMPLEX-003 | `UI_DESIGN/楼盘管理/区域管理_UI.md` | `Project/fonrey/screenshots/楼盘管理/区域管理.png` | `UI_DESIGN/区域管理_UI.html` | 待设计 | 完成任务05后开始 |
|
||||
| 07 | P0-C | 组织人事 | US-ORG-001~003 | `UI_DESIGN/组织人事管理/组织人事_UI.md` | `Project/fonrey/screenshots/组织人事/组织结构/公司组织结构.png` | `UI_DESIGN/组织人事_UI.html` | 待设计 | 完成任务06后开始 |
|
||||
| 08 | P0-C | 权限管理 | US-PERMISSION-001~005 | `UI_DESIGN/权限管理/权限管理_UI.md`<br>`Project/fonrey/PRD/权限管理/房源-二手租赁.md`<br>`Project/fonrey/PRD/权限管理/客源.md` | `Project/fonrey/screenshots/权限管理/权限-客源-客源.png`<br>``<br>`Project/fonrey/screenshots/权限管理/权限-房源-二手租赁.jpg`<br>`` | `UI_DESIGN/权限管理_UI.html` | 待设计 | 完成任务07后开始 |
|
||||
| 09 | P0-C | 系统配置 | US-SETTING-001-A/B/C | `UI_DESIGN/系统配置/系统配置_UI.md` | | `UI_DESIGN/系统配置_UI.html` | 待设计 | 完成任务08后开始 |
|
||||
| 06 | P0-B | 楼盘管理（区域） | US-COMPLEX-003 | `UI_DESIGN/楼盘管理/区域管理_UI.md` | `Project/fonrey/screenshots/楼盘管理/区域管理.png` | `UI_DESIGN/区域管理_UI.html` | 待评审 | 你评审区域管理 UI.md + 静态页，给我反馈我再迭代 |
|
||||
| 07 | P0-C | 组织人事 | US-ORG-001~003 | `UI_DESIGN/组织人事管理/组织人事_UI.md` | `Project/fonrey/screenshots/组织人事/组织结构/公司组织结构.png` | `UI_DESIGN/组织人事_UI.html` | 待评审 | 你评审组织人事 UI.md + 静态页，给我反馈我再迭代 |
|
||||
| 08 | P0-C | 权限管理 | US-PERMISSION-001~005 | `UI_DESIGN/权限管理/权限管理_UI.md`<br>`Project/fonrey/PRD/权限管理/房源-二手租赁.md`<br>`Project/fonrey/PRD/权限管理/客源.md` | `Project/fonrey/screenshots/权限管理/权限-客源-客源.png`<br>``<br>`Project/fonrey/screenshots/权限管理/权限-房源-二手租赁.jpg`<br>`` | `UI_DESIGN/权限管理_UI.html` | 待评审 | 你评审权限管理 UI.md + 静态页，给我反馈我再迭代 |
|
||||
| 09 | P0-C | 系统配置 | US-SETTING-001-A/B/C | `UI_DESIGN/系统配置/系统配置_UI.md` | `Project/fonrey/screenshots/设置/客源设置-客源参数配置.png`<br>`Project/fonrey/screenshots/设置/房源设置-字段标签设置.png`<br>`Project/fonrey/screenshots/设置/房源设置-字段标签设置-修改字段必填要求.png`<br>`Project/fonrey/screenshots/设置/房源设置-字段标签设置-自定义预设参数.png`<br>`Project/fonrey/screenshots/设置/客源设置-基本配置.jpg` | `UI_DESIGN/系统配置_UI.html` | 待评审 | 你评审系统配置 UI.md + 静态页，给我反馈我再迭代 |
|
||||
| 10 | P1-C | 系统配置（首页设置） | US-SETTING-010 | `UI_DESIGN/系统配置/首页设置_UI.md` | `Project/fonrey/screenshots/设置/首页设置.png` | `UI_DESIGN/首页设置_UI.html` | 待评审 | 你评审首页设置 UI.md + 静态页，给我反馈我再迭代 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
1119
Project/fonrey/UI_DESIGN/区域管理_UI.html
Normal file
1119
Project/fonrey/UI_DESIGN/区域管理_UI.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -20,10 +20,10 @@
|
||||
400:'#94A3B8',500:'#64748B',600:'#475569',700:'#334155',
|
||||
800:'#1E293B',900:'#0F172A',
|
||||
},
|
||||
success:{50:'#F0FDF4',600:'#16A34A',700:'#15803D'},
|
||||
warning:{50:'#FFFBEB',600:'#D97706',700:'#B45309'},
|
||||
danger: {50:'#FEF2F2',600:'#DC2626',700:'#B91C1C'},
|
||||
info: {50:'#EFF6FF',600:'#2563EB',700:'#1D4ED8'},
|
||||
success:{50:'#F0FDF4',600:'#16A34A'},
|
||||
warning:{50:'#FFFBEB',600:'#D97706'},
|
||||
danger: {50:'#FEF2F2',600:'#DC2626'},
|
||||
info: {50:'#EFF6FF',600:'#2563EB'},
|
||||
},
|
||||
boxShadow: { xs:'0 1px 2px rgba(15,23,42,0.04)' },
|
||||
fontFamily: {
|
||||
@@ -174,7 +174,7 @@
|
||||
complex: '中远两湾城',
|
||||
block_no: '12', unit_no: '2', room_no: '802',
|
||||
district: '普陀', business_area: '长寿路',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-700',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-600',
|
||||
transaction_type: 'sale', transaction_label: '买卖', transaction_cls: 'bg-primary-200 text-primary-800',
|
||||
tags: [
|
||||
{ label: '满五', cls: 'bg-success-50 text-success-600' },
|
||||
@@ -192,7 +192,7 @@
|
||||
complex: '张江花园',
|
||||
block_no: '3', unit_no: '1', room_no: '1501',
|
||||
district: '浦东', business_area: '张江',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-700',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-600',
|
||||
transaction_type: 'sale', transaction_label: '买卖', transaction_cls: 'bg-primary-200 text-primary-800',
|
||||
tags: [
|
||||
{ label: '满五', cls: 'bg-success-50 text-success-600' },
|
||||
@@ -212,7 +212,7 @@
|
||||
status: 'for_sale_rent', status_label: '租售', status_cls: 'bg-primary-50 text-primary-700',
|
||||
transaction_type: 'sale_rent', transaction_label: '租售', transaction_cls: 'bg-neutral-300 text-neutral-800',
|
||||
tags: [
|
||||
{ label: '私', cls: 'bg-warning-50 text-warning-700' },
|
||||
{ label: '私', cls: 'bg-warning-50 text-warning-600' },
|
||||
{ label: '速销', cls: 'bg-danger-50 text-danger-600' }
|
||||
],
|
||||
sale_price: '850', sale_unit_price: '70,833',
|
||||
@@ -256,7 +256,7 @@
|
||||
complex: '泰晤士小镇',
|
||||
block_no: '8', unit_no: '4', room_no: '1102',
|
||||
district: '松江', business_area: '泰晤士小镇',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-700',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-600',
|
||||
transaction_type: 'sale', transaction_label: '买卖', transaction_cls: 'bg-primary-200 text-primary-800',
|
||||
tags: [
|
||||
{ label: '满五', cls: 'bg-success-50 text-success-600' },
|
||||
@@ -274,10 +274,10 @@
|
||||
complex: '陆家嘴滨江凯旋门',
|
||||
block_no: '2', unit_no: '1', room_no: '3801',
|
||||
district: '浦东', business_area: '陆家嘴',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-700',
|
||||
status: 'for_sale', status_label: '出售', status_cls: 'bg-success-50 text-success-600',
|
||||
transaction_type: 'sale', transaction_label: '买卖', transaction_cls: 'bg-primary-200 text-primary-800',
|
||||
tags: [
|
||||
{ label: '私', cls: 'bg-warning-50 text-warning-700' },
|
||||
{ label: '私', cls: 'bg-warning-50 text-warning-600' },
|
||||
{ label: '速销', cls: 'bg-danger-50 text-danger-600' },
|
||||
{ label: '视频', cls: 'bg-neutral-100 text-neutral-600' }
|
||||
],
|
||||
@@ -420,8 +420,8 @@
|
||||
<div x-data="{ show: true }" x-show="show"
|
||||
class="mt-2 flex items-center gap-2 px-3 py-2 bg-warning-50 border border-warning-200 rounded-lg text-sm">
|
||||
<svg class="w-4 h-4 text-warning-600 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
|
||||
<span class="text-warning-700">
|
||||
<a href="#" class="font-medium text-warning-700 hover:underline">配置关注小区</a>
|
||||
<span class="text-warning-600">
|
||||
<a href="#" class="font-medium text-warning-600 hover:underline">配置关注小区</a>
|
||||
（关注小区后，当该小区产生对应交易类型下的新上房源、降价房源时，系统将第一时间通知您，提升您的作业效率哦！）
|
||||
</span>
|
||||
<button @click="show = false" class="ml-auto text-neutral-400 hover:text-neutral-600 shrink-0">
|
||||
|
||||
@@ -24,20 +24,20 @@
|
||||
<style>
|
||||
:root {
|
||||
--bg-page:#F8FAFC; --bg-panel:#FFF; --bg-subtle:#F1F5F9; --text-main:#1E293B; --text-sub:#64748B;
|
||||
--border:#E2E8F0; --input-bg:#FFF; --input-text:#1E293B; --header-bg:#FFFFFFD9;
|
||||
--border:#E2E8F0; --input-bg:#FFF; --input-text:#1E293B; --header-bg:#FFF;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--bg-page:#0B1220; --bg-panel:#111A2E; --bg-subtle:#1A253C; --text-main:#E2E8F0; --text-sub:#94A3B8;
|
||||
--border:#334155; --input-bg:#0F172A; --input-text:#E2E8F0; --header-bg:#0F172AD9;
|
||||
--bg-page:#0F172A; --bg-panel:#1E293B; --bg-subtle:#334155; --text-main:#E2E8F0; --text-sub:#94A3B8;
|
||||
--border:#334155; --input-bg:#0F172A; --input-text:#E2E8F0; --header-bg:#0F172A;
|
||||
}
|
||||
[data-theme="system"] {
|
||||
--bg-page:#F8FAFC; --bg-panel:#FFF; --bg-subtle:#F1F5F9; --text-main:#1E293B; --text-sub:#64748B;
|
||||
--border:#E2E8F0; --input-bg:#FFF; --input-text:#1E293B; --header-bg:#FFFFFFD9;
|
||||
--border:#E2E8F0; --input-bg:#FFF; --input-text:#1E293B; --header-bg:#FFF;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-theme="system"] {
|
||||
--bg-page:#0B1220; --bg-panel:#111A2E; --bg-subtle:#1A253C; --text-main:#E2E8F0; --text-sub:#94A3B8;
|
||||
--border:#334155; --input-bg:#0F172A; --input-text:#E2E8F0; --header-bg:#0F172AD9;
|
||||
--bg-page:#0F172A; --bg-panel:#1E293B; --bg-subtle:#334155; --text-main:#E2E8F0; --text-sub:#94A3B8;
|
||||
--border:#334155; --input-bg:#0F172A; --input-text:#E2E8F0; --header-bg:#0F172A;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
223
Project/fonrey/UI_DESIGN/权限管理/权限管理_UI.md
Normal file
223
Project/fonrey/UI_DESIGN/权限管理/权限管理_UI.md
Normal file
@@ -0,0 +1,223 @@
|
||||
# 权限管理 UI 设计文档
|
||||
|
||||
> **任务编号**：08（P0-C）
|
||||
> **覆盖范围**：`US-PERMISSION-001 ~ US-PERMISSION-005`
|
||||
> **输出文件**：`UI_DESIGN/权限管理_UI.html`
|
||||
> **设计基线**：`UI_SYSTEM/UI_SYSTEM.md`（后台壳层、筛选区、表格、分页、Modal/Drawer）
|
||||
> **需求依据**：
|
||||
> - `PRD/TASK.md`（US-PERMISSION-001~005）
|
||||
> - `PRD/权限管理/权限管理模块PRD.md`
|
||||
> - `DATA_MODEL/DATA_MODEL_PERMISSION.md`
|
||||
> - `PRD/权限管理/首页.md`
|
||||
> - `PRD/权限管理/客源.md`
|
||||
> - `PRD/权限管理/房源-二手租赁.md`
|
||||
> **竞品截图参考**：
|
||||
> - `screenshots/权限管理/权限管理-人员列表.png`
|
||||
> - `screenshots/权限管理/权限管理-批量设置角色.png`
|
||||
> - `screenshots/权限管理/权限管理-人员编辑特定权限.png`
|
||||
> - `screenshots/权限管理/权限管理-修改个人权限-客源.png`
|
||||
> - `screenshots/权限管理/角色管理-角色列表.png`
|
||||
> - `screenshots/权限管理/角色管理-添加角色1.png`
|
||||
> - `screenshots/权限管理/角色管理-修改角色.png`
|
||||
|
||||
---
|
||||
|
||||
## 1. 目标与范围
|
||||
|
||||
### 1.1 页面目标
|
||||
|
||||
本页用于完成权限管理模块 MVP 主链路：
|
||||
|
||||
1. **角色配置（US-PERMISSION-001）**
|
||||
- 角色列表（预设 + 自定义）
|
||||
- 新增自定义角色
|
||||
- 预设角色不可删
|
||||
- 可进入角色权限配置抽屉
|
||||
2. **人员权限列表管理（US-PERMISSION-002）**
|
||||
- 按姓名/工号、部门、角色、职务检索
|
||||
- 列表展示角色、管理范围、不一致标记
|
||||
3. **批量设置角色（US-PERMISSION-003）**
|
||||
- 勾选员工后批量赋角色
|
||||
- 覆盖个人权限提醒
|
||||
4. **功能权限控制（US-PERMISSION-004）**
|
||||
- 人员权限编辑页支持模块级开关 + 权限项配置
|
||||
- 模块关闭时视为菜单隐藏
|
||||
5. **数据权限控制（US-PERMISSION-005）**
|
||||
- 范围型权限（本人/本组/本门店/本区域/本大区/全公司）
|
||||
- 管理范围详情弹窗
|
||||
|
||||
### 1.2 任务边界
|
||||
|
||||
- ✅ 包含：权限管理 Tab、角色管理 Tab、批量角色弹窗、个人权限抽屉、权限项详情抽屉、角色新增弹窗、角色配置抽屉、范围详情弹窗、分页/空态/Toast
|
||||
- ✅ 包含：必填校验、角色唯一性校验、预设角色删除限制、批量按钮禁用态
|
||||
- ⛔ 不包含：真实权限后端、真实 Redis 失效、真实 403 路由拦截、真实日志系统
|
||||
|
||||
---
|
||||
|
||||
## 2. 信息架构
|
||||
|
||||
### 2.1 页面骨架
|
||||
|
||||
- **Top Bar**：系统一级导航（人事主入口高亮）
|
||||
- **Sidebar**：组织人事二级菜单（权限管理高亮）
|
||||
- **Main Content**：
|
||||
1. 面包屑：`人事OA / 组织人事 / 权限管理`
|
||||
2. 主 Tab：`权限管理`（人员维度）/ `角色管理`（角色维度）
|
||||
|
||||
### 2.2 权限管理 Tab（人员维度）
|
||||
|
||||
1. 筛选区
|
||||
- 姓名/工号
|
||||
- 员工部门
|
||||
- 角色
|
||||
- 职务名称
|
||||
- 权限与角色权限不一致（快捷筛选）
|
||||
2. 操作区
|
||||
- 批量设置角色
|
||||
- 导出
|
||||
3. 人员表格
|
||||
- 复选框、员工姓名、工号、部门、职务、角色、管理范围（详情）、操作
|
||||
4. 行操作
|
||||
- 修改权限
|
||||
- 复制角色
|
||||
- 扩充范围
|
||||
- 范围
|
||||
5. 分页区
|
||||
|
||||
### 2.3 角色管理 Tab（角色维度）
|
||||
|
||||
1. 筛选区
|
||||
- 角色名称
|
||||
- 角色类别
|
||||
- 修改时间范围
|
||||
2. 操作区
|
||||
- 新增角色
|
||||
- 批量删除角色
|
||||
3. 角色表格
|
||||
- 复选框、角色名称、角色类别、应用人数（查看）、引用角色、创建时间、修改时间、操作
|
||||
4. 行操作
|
||||
- 编辑（进入角色权限配置）
|
||||
- 删除（预设角色禁删）
|
||||
- 修改日志
|
||||
|
||||
### 2.4 关键弹层
|
||||
|
||||
- 批量设置角色 Modal
|
||||
- 新增角色 Modal
|
||||
- 人员权限编辑 Drawer
|
||||
- 权限项详情 Drawer（显示角色应用人数及名单）
|
||||
- 管理范围详情 Modal
|
||||
- 角色权限配置 Drawer
|
||||
|
||||
---
|
||||
|
||||
## 3. 关键交互与校验
|
||||
|
||||
### 3.1 批量设置角色（US-PERMISSION-003）
|
||||
|
||||
- 未勾选员工时按钮禁用
|
||||
- 打开弹窗后 `角色` 为必填
|
||||
- 若选中员工存在个人覆盖权限，显示提示：
|
||||
- `该操作将覆盖所选员工的个人自定义权限，请确认`
|
||||
- 提交成功：
|
||||
- 批量更新角色
|
||||
- 清除个人不一致标记
|
||||
- Toast 成功提示
|
||||
|
||||
### 3.2 新增角色（US-PERMISSION-001）
|
||||
|
||||
- 必填字段：
|
||||
- 角色名称
|
||||
- 角色类别
|
||||
- 校验：
|
||||
- 角色名称同租户唯一
|
||||
- 成功后：
|
||||
- 角色入列表
|
||||
- 默认可进入权限配置抽屉
|
||||
|
||||
### 3.3 删除角色（US-PERMISSION-001）
|
||||
|
||||
- 预设角色 (`isBuiltin=true`) 禁止删除
|
||||
- 应用人数 > 0 时禁止删除
|
||||
- 删除成功后刷新列表并 Toast
|
||||
|
||||
### 3.4 人员权限编辑（US-PERMISSION-004）
|
||||
|
||||
- 左侧模块树切换，右侧权限项按分组展示
|
||||
- 模块总开关关闭后，该模块权限项置灰（模拟菜单隐藏）
|
||||
- 权限项支持三类控件：
|
||||
- 开关型（BOOLEAN）
|
||||
- 范围型（SCOPE）
|
||||
- 数值型（INTEGER）
|
||||
- 点击 `编辑` 打开单项详情抽屉
|
||||
- 保存后：
|
||||
- 标记该员工为“权限与角色不一致”
|
||||
- 人员列表可被快捷筛出
|
||||
|
||||
### 3.5 数据范围与管理范围（US-PERMISSION-005）
|
||||
|
||||
- 人员列表 `管理范围` 列展示范围摘要
|
||||
- 点击 `详情` 打开范围详情弹窗
|
||||
- 范围项支持：`无 / 本人 / 本组 / 本门店 / 本区域 / 本大区 / 全公司`
|
||||
|
||||
---
|
||||
|
||||
## 4. 状态矩阵
|
||||
|
||||
| 状态 | 触发 | 页面反馈 |
|
||||
|---|---|---|
|
||||
| 默认态 | 页面初次进入 | 权限管理 Tab 默认选中 |
|
||||
| 查询态 | 输入筛选后点击查询 | 列表按条件过滤 |
|
||||
| 空结果 | 条件无匹配 | 表格空态文案“暂无匹配人员/角色” |
|
||||
| 勾选态 | 勾选员工/角色 | 批量按钮启用 |
|
||||
| 批量角色校验失败 | 角色未选 | 字段下错误文案 |
|
||||
| 新增角色校验失败 | 名称/类别为空或重名 | 字段错误文案 |
|
||||
| 删除受限 | 内置角色/有应用人数 | Toast 错误提示 |
|
||||
| 权限保存成功 | 个人或角色权限保存 | 列表状态更新 + Toast |
|
||||
| 主题策略 | 后台统一浅色体系 | 页面内不包含 Light/Dark/System 控件 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 字段与数据模型映射（DATA_MODEL_PERMISSION）
|
||||
|
||||
| UI 字段 | 数据模型字段 |
|
||||
|---|---|
|
||||
| 角色名称 | `roles.name` |
|
||||
| 角色类别 | `roles.category` |
|
||||
| 角色来源模板 | `roles.template_role_id` |
|
||||
| 是否内置角色 | `roles.is_system_builtin` |
|
||||
| 员工角色关联 | `staff_roles.staff_id / role_id / is_primary` |
|
||||
| 个人权限覆盖 | `staff_permission_overrides.*` |
|
||||
| 权限定义 | `permission_defs.code / value_type / default_value` |
|
||||
| 角色权限值 | `role_permissions.value` |
|
||||
| 员工管理范围 | `staff_data_scopes.scope_type / org_unit_id` |
|
||||
| 权限变更日志入口 | `permission_change_logs`（本页仅展示入口） |
|
||||
|
||||
---
|
||||
|
||||
## 6. 可访问性与实现规范
|
||||
|
||||
- 表格头部使用 `<th scope="col">`
|
||||
- 弹窗可通过 `Esc` 关闭
|
||||
- 必填错误使用明确文本，不仅依赖颜色
|
||||
- 按钮禁用态提供 `disabled` + 视觉弱化
|
||||
- 行内链接均保留可点击区域（>= 28px 高）
|
||||
- 保持后台浅色设计，不加入主题切换组件
|
||||
|
||||
---
|
||||
|
||||
## 7. 验收清单（任务08）
|
||||
|
||||
- [x] 覆盖 US-PERMISSION-001：角色列表 + 新增角色 + 预设角色不可删
|
||||
- [x] 覆盖 US-PERMISSION-002：人员权限列表筛选、分页、操作入口
|
||||
- [x] 覆盖 US-PERMISSION-003：批量设置角色弹窗 + 覆盖提醒
|
||||
- [x] 覆盖 US-PERMISSION-004：模块级开关 + 权限项编辑 + 保存
|
||||
- [x] 覆盖 US-PERMISSION-005：范围型权限 + 管理范围详情
|
||||
- [ ] 控制台 0 报错（待本地预览验证）
|
||||
|
||||
---
|
||||
|
||||
## 8. 后续衔接
|
||||
|
||||
- 任务08评审后进入任务09（系统配置）
|
||||
- 权限管理结果将与组织人事（员工/部门）及后续业务模块菜单展示联动
|
||||
1193
Project/fonrey/UI_DESIGN/权限管理_UI.html
Normal file
1193
Project/fonrey/UI_DESIGN/权限管理_UI.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -87,8 +87,8 @@
|
||||
line-height: 1;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #FECACA;
|
||||
color: #B91C1C;
|
||||
border: 1px solid #DC2626;
|
||||
color: #DC2626;
|
||||
background: #FEF2F2;
|
||||
}
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
[x-cloak] { display: none !important; }
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
.captcha-track { background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 100%); }
|
||||
.captcha-success { background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%); }
|
||||
.captcha-success { background: linear-gradient(90deg, #F0FDF4 0%, #16A34A 100%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen bg-neutral-50 font-sans text-sm text-neutral-700 antialiased" x-data="loginPrototype()">
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
.captcha-track { background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 100%); }
|
||||
.captcha-success { background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%); }
|
||||
.captcha-success { background: linear-gradient(90deg, #F0FDF4 0%, #16A34A 100%); }
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
|
||||
179
Project/fonrey/UI_DESIGN/系统配置/系统配置_UI.md
Normal file
179
Project/fonrey/UI_DESIGN/系统配置/系统配置_UI.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# 系统配置 UI 设计文档
|
||||
|
||||
> **任务编号**：09（P0-C）
|
||||
> **覆盖范围**：`US-SETTING-001-A / US-SETTING-001-B / US-SETTING-001-C`
|
||||
> **输出文件**：`UI_DESIGN/系统配置_UI.html`
|
||||
> **设计基线**：`UI_SYSTEM/UI_SYSTEM.md`（后台壳层、筛选区、表格、Modal/Drawer、表单校验）
|
||||
> **需求依据**：
|
||||
> - `PRD/TASK.md`（系统配置章节，US-SETTING-001-A/B/C）
|
||||
> - `PRD/系统配置/系统配置模块PRD.md`
|
||||
> - `PRD/系统配置/系统配置参数数据.md`
|
||||
> - `DATA_MODEL/DATA_MODEL_SETTING.md`
|
||||
> - `DATA_MODEL/ENUMS.md`
|
||||
> **竞品截图参考**：
|
||||
> - `screenshots/设置/客源设置-客源参数配置.png`
|
||||
> - `screenshots/设置/客源设置-基本配置.jpg`
|
||||
> - `screenshots/设置/房源设置-字段标签设置.png`
|
||||
> - `screenshots/设置/房源设置-字段标签设置-修改字段必填要求.png`
|
||||
> - `screenshots/设置/房源设置-字段标签设置-自定义预设参数.png`
|
||||
|
||||
---
|
||||
|
||||
## 1. 目标与范围
|
||||
|
||||
### 1.1 页面目标
|
||||
|
||||
本页用于承载系统配置模块 MVP 的三条核心能力：
|
||||
|
||||
1. **参数配置（US-SETTING-001-A）**
|
||||
- 管理租户可配置枚举（`lookup_items`）：客源来源、跟进目的、房源来源
|
||||
- 支持新增项目值、调整排序、停用/启用
|
||||
- 系统预制项（`is_system=true`）不可删除
|
||||
2. **房源字段规则（US-SETTING-001-B）**
|
||||
- 以「用途 × 交易状态」查看规则矩阵
|
||||
- 支持字段三态：必填 / 选填 / 隐藏（`required/optional/hidden`）
|
||||
- MVP 字段范围：朝向、装修、楼层、建筑面积、套内面积、房型、产权年限、车位数
|
||||
3. **客源规则（US-SETTING-001-C）**
|
||||
- 配置新增私客查重范围：本人 / 本部门 / 全公司
|
||||
- 配置客源必填字段（等级、来源默认必填）
|
||||
- 保存后提示规则生效与缓存失效
|
||||
|
||||
### 1.2 任务边界
|
||||
|
||||
- ✅ 包含：系统设置壳层、三主 Tab、配置表格、参数编辑弹窗、字段规则编辑抽屉、规则保存反馈
|
||||
- ✅ 包含：新增项必填校验、重复值校验、系统项删除限制、客源必填字段保护校验
|
||||
- ⛔ 不包含：真实后端 API、真实 Redis 调用、真实跨页面即时联动
|
||||
|
||||
---
|
||||
|
||||
## 2. 信息架构
|
||||
|
||||
### 2.1 页面骨架
|
||||
|
||||
- **Top Bar**：一级导航（系统模块高亮）
|
||||
- **Sidebar**：设置目录（系统配置高亮）
|
||||
- **Main Content**：
|
||||
1. 面包屑：`系统 / 设置 / 系统配置`
|
||||
2. 主 Tab：`参数配置` / `房源字段规则` / `客源规则`
|
||||
|
||||
### 2.2 参数配置（US-SETTING-001-A）
|
||||
|
||||
1. 筛选区
|
||||
- 关键字（参数项/项目值）
|
||||
- 模块筛选（客源/房源）
|
||||
2. 参数分组卡片（3组）
|
||||
- 客源来源（`client.source`）
|
||||
- 跟进目的（`client.follow_purpose`）
|
||||
- 房源来源（`property.source`）
|
||||
3. 分组表格列
|
||||
- 项目值、排序、状态、来源（预制/自定义）、操作
|
||||
4. 编辑弹窗（分组级）
|
||||
- 项目值输入（可多行）
|
||||
- 上移/下移排序
|
||||
- 新增项目
|
||||
- 删除（系统预制项禁用）
|
||||
- 启用/停用切换
|
||||
|
||||
### 2.3 房源字段规则（US-SETTING-001-B）
|
||||
|
||||
1. 规则矩阵列表（组合级）
|
||||
- 住宅×出售、住宅×出租、商铺×出售、商铺×出租
|
||||
2. 组合列表列
|
||||
- 用途、交易状态、必填字段数、隐藏字段数、更新时间、操作
|
||||
3. 规则编辑抽屉
|
||||
- 字段名称
|
||||
- 必填/选填/隐藏（Radio）
|
||||
- 录入页展示（Switch，关闭即 hidden）
|
||||
|
||||
### 2.4 客源规则（US-SETTING-001-C）
|
||||
|
||||
1. 查重范围卡片
|
||||
- 单选：本人 / 本部门 / 全公司
|
||||
- 每个选项附说明文案
|
||||
2. 必填字段卡片
|
||||
- 等级、来源（锁定为必填）
|
||||
- 总价区间、居室需求、购房目的（可配置）
|
||||
3. 保存反馈卡片
|
||||
- 说明保存后缓存 key `{tenant_schema}:setting:client_rules` 失效
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心交互与校验
|
||||
|
||||
### 3.1 参数配置弹窗
|
||||
|
||||
- 新增空项目后点击保存：提示 `项目值不能为空`
|
||||
- 同一分组内重名：提示 `项目值不可重复`
|
||||
- 系统预制项删除：禁止，提示 `系统预制项不可删除，仅可停用`
|
||||
- 保存成功：
|
||||
- 回写分组列表
|
||||
- Toast：`参数已保存，缓存失效：{tenant_schema}:setting:lookup:{module}.{key}`
|
||||
|
||||
### 3.2 字段规则编辑抽屉
|
||||
|
||||
- 每个字段仅允许三态之一（required/optional/hidden）
|
||||
- 关闭“录入页展示”开关时自动设为 `hidden`
|
||||
- 开启“录入页展示”且当前为 hidden 时自动回退为 `optional`
|
||||
- 保存成功：
|
||||
- 更新矩阵统计（必填数/隐藏数）
|
||||
- Toast：`字段规则已保存，缓存失效：{tenant_schema}:setting:field_req:{module}.{entity_type}.{trade_status}`
|
||||
|
||||
### 3.3 客源规则保存
|
||||
|
||||
- `等级`、`来源`不得取消必填
|
||||
- 若取消则拦截并提示：`等级、来源为默认必填字段，不可取消`
|
||||
- 保存成功提示：
|
||||
- `客源规则已保存，缓存失效：{tenant_schema}:setting:client_rules`
|
||||
|
||||
---
|
||||
|
||||
## 4. 数据模型与配置映射
|
||||
|
||||
### 4.1 Lookup 映射（001-A）
|
||||
|
||||
- `lookup_groups.module + key`：参数分组
|
||||
- `lookup_items`：项目值列表
|
||||
- UI 字段映射：
|
||||
- 项目值 → `label_zh`
|
||||
- 排序 → `sort_order`
|
||||
- 状态 → `is_active`
|
||||
- 来源 → `is_system`
|
||||
|
||||
### 4.2 字段规则映射（001-B）
|
||||
|
||||
- 表：`field_requirement_rules`
|
||||
- 维度：`module + entity_type + trade_status + field_key`
|
||||
- 规则值：`requirement`（required/optional/hidden）
|
||||
|
||||
### 4.3 客源规则映射（001-C）
|
||||
|
||||
- 表：`tenant_settings`
|
||||
- `category=client, key=duplicate_check_scope`
|
||||
- 客源必填字段规则以规则快照形式保存（原型中以本地对象模拟）
|
||||
|
||||
---
|
||||
|
||||
## 5. 状态矩阵
|
||||
|
||||
| 区域 | 默认态 | 编辑态 | 保存成功 | 校验失败 |
|
||||
|---|---|---|---|---|
|
||||
| 参数配置 | 分组列表展示 | 弹窗内增删改排序 | 列表更新 + Toast | 错误文案红字 |
|
||||
| 字段规则 | 矩阵列表展示 | 抽屉内逐字段三态设置 | 统计更新 + Toast | 保持抽屉不关闭 |
|
||||
| 客源规则 | 查重范围 + 必填项配置 | 单选/勾选编辑 | Toast + 状态持久 | 顶部错误提示 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 验收清单（静态页）
|
||||
|
||||
1. 三主 Tab 切换后内容区替换且壳层不变
|
||||
2. 参数配置弹窗覆盖：空值校验、重复值校验、系统项删除限制
|
||||
3. 房源字段规则抽屉覆盖：三态切换、显示开关联动、保存回写统计
|
||||
4. 客源规则覆盖：查重范围切换、默认必填保护、保存提示
|
||||
5. 控制台 0 报错后方可进入待评审
|
||||
|
||||
---
|
||||
|
||||
## 7. 交付物
|
||||
|
||||
- `UI_DESIGN/系统配置/系统配置_UI.md`
|
||||
- `UI_DESIGN/系统配置_UI.html`
|
||||
186
Project/fonrey/UI_DESIGN/系统配置/首页设置_UI.md
Normal file
186
Project/fonrey/UI_DESIGN/系统配置/首页设置_UI.md
Normal file
@@ -0,0 +1,186 @@
|
||||
# 首页设置 UI 设计文档
|
||||
|
||||
> **任务编号**：10（P1-C）
|
||||
> **覆盖范围**：`US-SETTING-010`（管理员配置首页展示内容）
|
||||
> **输出文件**：`UI_DESIGN/首页设置_UI.html`
|
||||
> **设计基线**：`UI_SYSTEM/UI_SYSTEM.md`（后台壳层、卡片分组、开关控件、表单校验、保存反馈）
|
||||
> **需求依据**：
|
||||
> - `PRD/TASK.md`（US-SETTING-010）
|
||||
> - `PRD/系统配置/系统配置参数数据.md`（1. 首页设置）
|
||||
> - `PRD/系统配置/系统配置模块PRD.md`（配置模块交互规范）
|
||||
> - `DATA_MODEL/DATA_MODEL_PUBLIC.md`（任务引用）
|
||||
> **竞品截图参考**：
|
||||
> - `screenshots/设置/首页设置.png`
|
||||
|
||||
---
|
||||
|
||||
## 1. 目标与范围
|
||||
|
||||
### 1.1 页面目标
|
||||
|
||||
本页用于提供“系统配置 → 首页设置”能力，覆盖三个验收点：
|
||||
|
||||
1. **可配置首页展示统计卡片**
|
||||
- 支持勾选/取消卡片（如：今日新增房源、今日新增客源、今日新增带看等）
|
||||
- 支持卡片顺序调整（上移/下移）
|
||||
2. **配置变更后首页实时生效（原型态）**
|
||||
- 编辑区变更实时映射到右侧“首页预览”
|
||||
- 点击保存后固化为当前角色配置
|
||||
3. **不同角色可配置不同首页视图**
|
||||
- 提供角色切换（经纪人 / 店长 / 管理员）
|
||||
- 每个角色独立保存首页模块与卡片配置
|
||||
|
||||
### 1.2 任务边界
|
||||
|
||||
- ✅ 包含：页面壳层、配置分组、开关/单选/输入、角色维度、卡片排序、保存校验、实时预览
|
||||
- ✅ 包含：竞品截图中可见的首页设置分区（员工信息、行程指标、首页业绩、排行榜、成交战报）
|
||||
- ⛔ 不包含：真实后端 API、真实权限控制、真实首页页面联动
|
||||
|
||||
---
|
||||
|
||||
## 2. 信息架构
|
||||
|
||||
### 2.1 页面骨架
|
||||
|
||||
- **Top Bar**：系统一级导航
|
||||
- **Sidebar**：设置菜单（首页设置高亮）
|
||||
- **Main Content**：
|
||||
1. 面包屑：`系统 / 设置 / 首页设置`
|
||||
2. 页面标题：`系统配置-首页设置`
|
||||
3. 搜索框：`请输入设置项名称`
|
||||
4. 角色视图切换（经纪人/店长/管理员）
|
||||
|
||||
### 2.2 配置分区（按竞品还原）
|
||||
|
||||
1. **基本设置**
|
||||
- 编辑态切换（编辑 / 取消 / 保存）
|
||||
2. **员工信息模块**
|
||||
- 是否展示员工司龄（Switch）
|
||||
3. **行程模块显示指标**
|
||||
- 指标范围（买卖 / 租赁）
|
||||
4. **首页业绩显示设置**
|
||||
- 业绩统计口径（单选）
|
||||
5. **首页统计卡片配置（补齐任务验收）**
|
||||
- 卡片启用开关
|
||||
- 顺序上移/下移
|
||||
6. **排行榜设置**
|
||||
- 是否显示业绩和单数
|
||||
- 业绩计算方式
|
||||
- 默认按店或组排名
|
||||
- 默认展示全公司前10排名数据
|
||||
- 过滤账号/过滤部门
|
||||
7. **成交战报设置**
|
||||
- 成交时间范围、成交业绩范围
|
||||
- 是否显示业绩/房源/房源总价
|
||||
|
||||
### 2.3 首页预览区
|
||||
|
||||
- 实时展示当前角色的：
|
||||
- 已启用统计卡片（按配置顺序）
|
||||
- 模块开关结果（员工司龄、排行榜显示项、战报显示项）
|
||||
- 用于验证“配置变更后实时生效（原型级）”
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心交互与校验
|
||||
|
||||
### 3.1 编辑流转
|
||||
|
||||
- 默认只读态：显示“编辑”按钮
|
||||
- 点击“编辑”进入编辑态：
|
||||
- 启用所有表单控件
|
||||
- 出现“取消 / 保存配置”按钮
|
||||
- 点击“取消”恢复到编辑前状态
|
||||
|
||||
### 3.2 保存校验
|
||||
|
||||
1. 至少启用 1 个首页统计卡片
|
||||
- 失败文案：`至少保留 1 个首页统计卡片`
|
||||
2. 过滤账号输入长度 ≤ 100
|
||||
- 失败文案：`过滤账号输入过长，请控制在100字符以内`
|
||||
3. 过滤部门输入长度 ≤ 100
|
||||
- 失败文案：`过滤部门输入过长，请控制在100字符以内`
|
||||
|
||||
保存成功后：
|
||||
- 写入当前角色配置
|
||||
- 退出编辑态
|
||||
- Toast：`首页设置已保存，当前角色视图即时生效`
|
||||
|
||||
### 3.3 角色维度约束
|
||||
|
||||
- 角色切换仅允许在“非编辑态”执行
|
||||
- 编辑态切换角色时提示：`请先保存或取消当前角色编辑内容`
|
||||
|
||||
---
|
||||
|
||||
## 4. 数据映射（原型）
|
||||
|
||||
> 注：原始 TASK 引用 `DATA_MODEL_PUBLIC.md`，未提供首页设置专用字段明细。原型用前端配置对象模拟持久层。
|
||||
|
||||
### 4.1 角色配置结构（模拟）
|
||||
|
||||
```json
|
||||
{
|
||||
"role": "manager",
|
||||
"show_seniority": true,
|
||||
"itinerary_metrics": ["sale", "rent"],
|
||||
"kpi_mode": "pending_and_approved",
|
||||
"ranking": {
|
||||
"show_performance_and_deal": true,
|
||||
"calc_mode": "turn_order",
|
||||
"default_rank_level": "store",
|
||||
"show_company_top10": false,
|
||||
"filter_accounts": "",
|
||||
"filter_departments": ""
|
||||
},
|
||||
"battle_report": {
|
||||
"days_range": "",
|
||||
"amount_range": "",
|
||||
"show_performance": false,
|
||||
"show_property_name": true,
|
||||
"show_property_total_price": false
|
||||
},
|
||||
"home_cards": [
|
||||
{"key": "new_property_today", "enabled": true, "sort": 1},
|
||||
{"key": "new_client_today", "enabled": true, "sort": 2}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 统计卡片枚举（原型）
|
||||
|
||||
- 今日新增房源（`new_property_today`）
|
||||
- 今日新增客源（`new_client_today`）
|
||||
- 今日新增带看（`new_showing_today`）
|
||||
- 今日新增跟进（`new_followup_today`）
|
||||
- 今日签约单量（`signed_deals_today`）
|
||||
- 今日成交业绩（`deal_amount_today`）
|
||||
|
||||
---
|
||||
|
||||
## 5. 状态矩阵
|
||||
|
||||
| 区域 | 默认态 | 编辑态 | 保存成功 | 保存失败 |
|
||||
|---|---|---|---|---|
|
||||
| 基本设置 | 只读展示 | 表单可编辑 | 退出编辑 + Toast | 保持编辑态 + 顶部错误文案 |
|
||||
| 统计卡片 | 显示已启用卡片 | 可启停+排序 | 预览与配置一致 | 至少1项启用校验阻断 |
|
||||
| 角色切换 | 允许切换 | 禁止切换 | 切换后加载角色配置 | 提示先保存/取消 |
|
||||
| 首页预览 | 展示当前角色视图 | 实时反映草稿值 | 与已保存配置一致 | 无 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 验收清单（静态页）
|
||||
|
||||
1. 壳层结构完整（Top Bar + Sidebar + Main）
|
||||
2. 页面分区覆盖截图中的首页设置关键模块
|
||||
3. 角色切换可见不同配置结果
|
||||
4. 统计卡片支持启用/排序，且预览实时变化
|
||||
5. 保存时触发校验与反馈文案
|
||||
6. 本地 `file://` 打开控制台 0 报错
|
||||
|
||||
---
|
||||
|
||||
## 7. 交付物
|
||||
|
||||
- `UI_DESIGN/系统配置/首页设置_UI.md`
|
||||
- `UI_DESIGN/首页设置_UI.html`
|
||||
856
Project/fonrey/UI_DESIGN/系统配置_UI.html
Normal file
856
Project/fonrey/UI_DESIGN/系统配置_UI.html
Normal file
@@ -0,0 +1,856 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1366" />
|
||||
<title>Fonrey 系统配置 · 静态原型</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#F0FDFA',
|
||||
100: '#CCFBF1',
|
||||
200: '#99F6E4',
|
||||
500: '#14B8A6',
|
||||
600: '#0F766E',
|
||||
700: '#115E59',
|
||||
800: '#134E4A'
|
||||
},
|
||||
neutral: {
|
||||
50: '#F8FAFC',
|
||||
100: '#F1F5F9',
|
||||
200: '#E2E8F0',
|
||||
300: '#CBD5E1',
|
||||
400: '#94A3B8',
|
||||
500: '#64748B',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1E293B',
|
||||
900: '#0F172A'
|
||||
},
|
||||
success: { 50: '#F0FDF4', 600: '#16A34A' },
|
||||
warning: { 50: '#FFFBEB', 600: '#D97706' },
|
||||
danger: { 50: '#FEF2F2', 600: '#DC2626' },
|
||||
info: { 50: '#EFF6FF', 600: '#2563EB' }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #F8FAFC;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-subtle: #F1F5F9;
|
||||
--text-primary: #0F172A;
|
||||
--text-secondary: #64748B;
|
||||
--border: #E2E8F0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
.main-tab {
|
||||
color: #64748B;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main-tab.active {
|
||||
color: #115E59;
|
||||
border-bottom-color: #115E59;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-link {
|
||||
font-size: 12px;
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
.action-link:hover { text-decoration: underline; }
|
||||
|
||||
.tabular-nums { font-variant-numeric: tabular-nums; }
|
||||
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-sm antialiased" x-data="settingPage()" x-init="init()" @keydown.escape.window="closeAllPanels()">
|
||||
<!-- Top Bar -->
|
||||
<header class="fixed top-0 left-0 right-0 h-14 z-30 bg-primary-800 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 px-4 w-60 shrink-0">
|
||||
<div class="w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">F</div>
|
||||
<span class="text-base font-semibold text-white">Fonrey</span>
|
||||
</div>
|
||||
<nav class="flex items-center gap-1 flex-1 px-2" aria-label="主导航">
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">主页</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">房源</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">客源</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">营销</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">交易</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">数据</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">人事</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md bg-primary-600 text-white font-medium">系统</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">三网</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-1 px-4 shrink-0">
|
||||
<button class="p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label="消息">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
|
||||
</button>
|
||||
<div class="flex items-center gap-2 pl-3 ml-1 border-l border-primary-700">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-600 text-white flex items-center justify-center text-sm font-semibold">杜</div>
|
||||
<span class="text-sm font-medium text-primary-100">杜利强</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Side Bar -->
|
||||
<aside class="fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white overflow-y-auto">
|
||||
<nav class="p-3 space-y-0.5">
|
||||
<div class="px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">设置</div>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">首页设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">房源设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">客源设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">交易设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium">系统配置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">人事OA设置</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="ml-60 pt-[72px] min-h-screen px-6 py-5">
|
||||
<div class="mx-auto max-w-[1760px] space-y-4">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<nav class="flex items-center gap-1 text-xs text-neutral-500 mb-2" aria-label="面包屑">
|
||||
<a href="#" class="hover:text-neutral-700">系统</a>
|
||||
<span>/</span>
|
||||
<a href="#" class="hover:text-neutral-700">设置</a>
|
||||
<span>/</span>
|
||||
<span class="text-neutral-900">系统配置</span>
|
||||
</nav>
|
||||
<h1 class="text-xl font-semibold text-neutral-900">系统配置</h1>
|
||||
<p class="text-xs text-neutral-500 mt-1">覆盖参数配置（Lookup）、房源字段规则、客源录入规则</p>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 rounded-md border border-info-600 text-info-600 bg-white hover:bg-info-50" @click="notify('查看系统配置帮助（原型）')">配置说明</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-neutral-200 rounded-lg px-4">
|
||||
<nav class="flex items-center gap-6 overflow-x-auto" aria-label="系统配置主Tab">
|
||||
<button class="main-tab py-3" :class="{ 'active': mainTab === 'lookup' }" @click="mainTab = 'lookup'">参数配置</button>
|
||||
<button class="main-tab py-3" :class="{ 'active': mainTab === 'fieldRule' }" @click="mainTab = 'fieldRule'">房源字段规则</button>
|
||||
<button class="main-tab py-3" :class="{ 'active': mainTab === 'clientRule' }" @click="mainTab = 'clientRule'">客源规则</button>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- 参数配置 -->
|
||||
<template x-if="mainTab === 'lookup'">
|
||||
<section class="space-y-4">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4 space-y-3">
|
||||
<div class="grid grid-cols-5 gap-3">
|
||||
<input x-model.trim="lookupFilters.keyword" type="text" placeholder="请输入参数项/项目值" class="px-3 py-2 rounded-md border border-neutral-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/30" />
|
||||
<select x-model="lookupFilters.module" class="px-3 py-2 rounded-md border border-neutral-300 bg-white">
|
||||
<option value="">模块（全选）</option>
|
||||
<option value="client">客源</option>
|
||||
<option value="property">房源</option>
|
||||
</select>
|
||||
<div class="col-span-3 flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-2 rounded-md bg-primary-600 text-white hover:bg-primary-700">查询</button>
|
||||
<button class="px-3 py-2 rounded-md border border-neutral-300 hover:bg-neutral-50" @click="lookupFilters = { keyword: '', module: '' }">清空条件</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500">系统预制项不可删除，仅可停用；保存后触发 lookup 缓存失效。</div>
|
||||
</section>
|
||||
|
||||
<template x-if="filteredLookupGroups.length === 0">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-10 text-center text-neutral-400">暂无匹配参数组</section>
|
||||
</template>
|
||||
|
||||
<template x-for="group in filteredLookupGroups" :key="group.id">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-3 border-b border-neutral-200 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold" x-text="`${group.label}（${group.moduleLabel}）`"></h3>
|
||||
<p class="text-xs text-neutral-500 mt-1" x-text="`Key：${group.module}.${group.key}`"></p>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 rounded-md border border-primary-600 text-primary-600 hover:bg-primary-50" @click="openLookupEditor(group)">编辑参数</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-xs">
|
||||
<thead class="bg-neutral-50 border-b border-neutral-200 text-neutral-500">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left">项目值</th>
|
||||
<th class="px-3 py-2 text-left">排序</th>
|
||||
<th class="px-3 py-2 text-left">状态</th>
|
||||
<th class="px-3 py-2 text-left">来源</th>
|
||||
<th class="px-3 py-2 text-left">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-100 bg-white">
|
||||
<template x-if="group.items.length === 0">
|
||||
<tr><td colspan="5" class="px-3 py-8 text-center text-neutral-400">暂无项目值</td></tr>
|
||||
</template>
|
||||
<template x-for="item in group.items" :key="item.id">
|
||||
<tr>
|
||||
<td class="px-3 py-2" x-text="item.label"></td>
|
||||
<td class="px-3 py-2 tabular-nums" x-text="item.sortOrder"></td>
|
||||
<td class="px-3 py-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]" :class="item.active ? 'bg-success-50 text-success-600' : 'bg-neutral-100 text-neutral-500'" x-text="item.active ? '启用' : '停用'"></span>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]" :class="item.isSystem ? 'bg-info-50 text-info-600' : 'bg-warning-50 text-warning-600'" x-text="item.isSystem ? '系统预制' : '自定义'"></span>
|
||||
</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap">
|
||||
<button class="action-link" @click="toggleLookupItemActive(group.id, item.id)" x-text="item.active ? '停用' : '启用'"></button>
|
||||
<button class="action-link ml-2" :class="item.isSystem ? 'opacity-40 pointer-events-none' : ''" @click="deleteLookupItem(group.id, item.id)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- 房源字段规则 -->
|
||||
<template x-if="mainTab === 'fieldRule'">
|
||||
<section class="space-y-4">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4 space-y-3">
|
||||
<div class="grid grid-cols-5 gap-3">
|
||||
<input x-model.trim="fieldFilters.keyword" type="text" placeholder="请输入用途/交易状态" class="px-3 py-2 rounded-md border border-neutral-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/30" />
|
||||
<select x-model="fieldFilters.entityType" class="px-3 py-2 rounded-md border border-neutral-300 bg-white">
|
||||
<option value="">用途（全选）</option>
|
||||
<option value="residential">住宅</option>
|
||||
<option value="shop">商铺</option>
|
||||
</select>
|
||||
<select x-model="fieldFilters.tradeStatus" class="px-3 py-2 rounded-md border border-neutral-300 bg-white">
|
||||
<option value="">交易状态（全选）</option>
|
||||
<option value="sale">出售</option>
|
||||
<option value="rent">出租</option>
|
||||
</select>
|
||||
<div class="col-span-2 flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-2 rounded-md bg-primary-600 text-white hover:bg-primary-700">查询</button>
|
||||
<button class="px-3 py-2 rounded-md border border-neutral-300 hover:bg-neutral-50" @click="fieldFilters = { keyword: '', entityType: '', tradeStatus: '' }">清空条件</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-500">规则值映射：required=必填，optional=选填，hidden=隐藏。隐藏字段不在录入页渲染。</p>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-neutral-200 rounded-lg overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-xs">
|
||||
<thead class="bg-neutral-50 border-b border-neutral-200 text-neutral-500">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left">用途</th>
|
||||
<th class="px-3 py-2 text-left">交易状态</th>
|
||||
<th class="px-3 py-2 text-left">必填字段数</th>
|
||||
<th class="px-3 py-2 text-left">隐藏字段数</th>
|
||||
<th class="px-3 py-2 text-left">更新时间</th>
|
||||
<th class="px-3 py-2 text-left">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-100 bg-white">
|
||||
<template x-if="filteredFieldCombos.length === 0">
|
||||
<tr><td colspan="6" class="px-3 py-8 text-center text-neutral-400">暂无匹配规则</td></tr>
|
||||
</template>
|
||||
<template x-for="combo in filteredFieldCombos" :key="combo.id">
|
||||
<tr>
|
||||
<td class="px-3 py-2" x-text="combo.entityTypeLabel"></td>
|
||||
<td class="px-3 py-2" x-text="combo.tradeStatusLabel"></td>
|
||||
<td class="px-3 py-2 tabular-nums" x-text="countRequirement(combo, 'required')"></td>
|
||||
<td class="px-3 py-2 tabular-nums" x-text="countRequirement(combo, 'hidden')"></td>
|
||||
<td class="px-3 py-2 tabular-nums" x-text="combo.updatedAt"></td>
|
||||
<td class="px-3 py-2"><button class="action-link" @click="openRuleDrawer(combo)">编辑规则</button></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- 客源规则 -->
|
||||
<template x-if="mainTab === 'clientRule'">
|
||||
<section class="space-y-4">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4 space-y-3">
|
||||
<h3 class="text-base font-semibold">新增私客查重范围</h3>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<template x-for="scope in duplicateScopeOptions" :key="scope.value">
|
||||
<label class="border rounded-md p-3 cursor-pointer" :class="clientRules.duplicateScope === scope.value ? 'border-primary-600 bg-primary-50' : 'border-neutral-200 hover:border-neutral-300'">
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="radio" name="duplicateScope" :value="scope.value" x-model="clientRules.duplicateScope" class="text-primary-600 border-neutral-300" />
|
||||
<span class="font-medium text-sm" x-text="scope.label"></span>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-500 mt-2" x-text="scope.desc"></p>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold">客源必填字段配置</h3>
|
||||
<button class="px-3 py-1.5 rounded-md border border-neutral-300 hover:bg-neutral-50" @click="resetClientRules()">恢复默认</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<template x-for="field in clientRequiredFieldOptions" :key="field.key">
|
||||
<label class="flex items-center justify-between border border-neutral-200 rounded-md p-3">
|
||||
<div>
|
||||
<div class="text-sm font-medium" x-text="field.label"></div>
|
||||
<div class="text-xs text-neutral-500" x-text="field.desc"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs" :class="clientRules.requiredFields[field.key] ? 'text-success-600' : 'text-neutral-500'" x-text="clientRules.requiredFields[field.key] ? '必填' : '选填'"></span>
|
||||
<button type="button" class="relative inline-flex h-6 w-11 items-center rounded-full transition"
|
||||
:class="clientRules.requiredFields[field.key] ? 'bg-primary-600' : 'bg-neutral-300'"
|
||||
@click="toggleClientRequired(field)">
|
||||
<span class="inline-block h-5 w-5 transform rounded-full bg-white transition"
|
||||
:class="clientRules.requiredFields[field.key] ? 'translate-x-5' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="rounded-md bg-info-50 border border-info-600/20 px-3 py-2 text-xs text-info-600">
|
||||
保存后触发缓存失效：`{tenant_schema}:setting:client_rules`，经纪人下次打开录入页即读取新规则。
|
||||
</div>
|
||||
|
||||
<template x-if="clientRuleError">
|
||||
<div class="rounded-md bg-danger-50 border border-danger-600/20 px-3 py-2 text-xs text-danger-600" x-text="clientRuleError"></div>
|
||||
</template>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button class="px-4 py-2 rounded-md bg-primary-600 text-white hover:bg-primary-700" @click="saveClientRules()">保存客源规则</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 参数编辑弹窗 -->
|
||||
<div x-cloak x-show="lookupEditor.open" class="fixed inset-0 z-40">
|
||||
<div class="absolute inset-0 bg-neutral-900/40" @click="closeLookupEditor()"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<section class="w-full max-w-5xl bg-white rounded-xl shadow-xl border border-neutral-200 pointer-events-auto flex flex-col max-h-[90vh]">
|
||||
<header class="px-5 py-4 border-b border-neutral-200 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold" x-text="lookupEditor.title"></h3>
|
||||
<p class="text-xs text-neutral-500 mt-1">支持新增、排序、停用；系统预制项不可删除</p>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-md text-neutral-500 hover:bg-neutral-100" @click="closeLookupEditor()">✕</button>
|
||||
</header>
|
||||
|
||||
<div class="px-5 py-4 overflow-y-auto space-y-3">
|
||||
<template x-if="lookupEditor.error">
|
||||
<div class="rounded-md bg-danger-50 border border-danger-600/20 px-3 py-2 text-xs text-danger-600" x-text="lookupEditor.error"></div>
|
||||
</template>
|
||||
|
||||
<div class="border border-neutral-200 rounded-lg overflow-hidden">
|
||||
<table class="min-w-full text-xs">
|
||||
<thead class="bg-neutral-50 border-b border-neutral-200 text-neutral-500">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left">项目值</th>
|
||||
<th class="px-3 py-2 text-left">状态</th>
|
||||
<th class="px-3 py-2 text-left">来源</th>
|
||||
<th class="px-3 py-2 text-left">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-100 bg-white">
|
||||
<template x-for="(item, idx) in lookupEditor.items" :key="item.id">
|
||||
<tr>
|
||||
<td class="px-3 py-2">
|
||||
<input type="text" x-model.trim="item.label" class="w-full px-2 py-1.5 rounded border border-neutral-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/30" placeholder="请输入项目值" />
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<button type="button" class="relative inline-flex h-6 w-11 items-center rounded-full transition"
|
||||
:class="item.active ? 'bg-primary-600' : 'bg-neutral-300'"
|
||||
@click="item.active = !item.active">
|
||||
<span class="inline-block h-5 w-5 transform rounded-full bg-white transition" :class="item.active ? 'translate-x-5' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px]" :class="item.isSystem ? 'bg-info-50 text-info-600' : 'bg-warning-50 text-warning-600'" x-text="item.isSystem ? '系统预制' : '自定义'"></span>
|
||||
</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap">
|
||||
<button class="action-link" :class="idx===0 ? 'opacity-40 pointer-events-none' : ''" @click="moveLookupEditorItem(idx, -1)">上移</button>
|
||||
<button class="action-link ml-2" :class="idx===lookupEditor.items.length-1 ? 'opacity-40 pointer-events-none' : ''" @click="moveLookupEditorItem(idx, 1)">下移</button>
|
||||
<button class="action-link ml-2" :class="item.isSystem ? 'opacity-40 pointer-events-none' : ''" @click="removeLookupEditorItem(idx)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button class="px-3 py-1.5 rounded-md border border-primary-600 text-primary-600 hover:bg-primary-50" @click="addLookupEditorItem()">+ 添加项目</button>
|
||||
</div>
|
||||
|
||||
<footer class="px-5 py-3 border-t border-neutral-200 bg-neutral-50 flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 rounded-md border border-neutral-300 hover:bg-white" @click="closeLookupEditor()">取消</button>
|
||||
<button class="px-3 py-1.5 rounded-md bg-primary-600 text-white hover:bg-primary-700" @click="saveLookupEditor()">保存</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 字段规则编辑抽屉 -->
|
||||
<div x-cloak x-show="ruleDrawer.open" class="fixed inset-0 z-50">
|
||||
<div class="absolute inset-0 bg-neutral-900/40" @click="closeRuleDrawer()"></div>
|
||||
<aside class="absolute right-0 top-0 h-full w-[860px] bg-white border-l border-neutral-200 shadow-2xl flex flex-col">
|
||||
<header class="px-5 py-4 border-b border-neutral-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold" x-text="ruleDrawer.title"></h3>
|
||||
<p class="text-xs text-neutral-500 mt-1">三态规则：必填 / 选填 / 隐藏（隐藏=录入页不展示）</p>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-md text-neutral-500 hover:bg-neutral-100" @click="closeRuleDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<input x-model.trim="ruleDrawer.search" type="text" placeholder="搜索字段名称" class="w-full px-3 py-2 rounded-md border border-neutral-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/30" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-5 space-y-3">
|
||||
<template x-for="(rule, idx) in filteredRuleDrawerItems" :key="rule.fieldKey">
|
||||
<div class="border border-neutral-200 rounded-lg p-3 space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="font-medium text-sm" x-text="rule.fieldName"></div>
|
||||
<div class="text-xs text-neutral-500" x-text="rule.fieldKey"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 text-xs">
|
||||
<label class="inline-flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="radio" :name="`req-${rule.fieldKey}`" :checked="rule.requirement === 'required'" @change="setDrawerRequirement(rule.fieldKey, 'required')" />
|
||||
<span>必填</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="radio" :name="`req-${rule.fieldKey}`" :checked="rule.requirement === 'optional'" @change="setDrawerRequirement(rule.fieldKey, 'optional')" />
|
||||
<span>选填</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-1.5 cursor-pointer">
|
||||
<input type="radio" :name="`req-${rule.fieldKey}`" :checked="rule.requirement === 'hidden'" @change="setDrawerRequirement(rule.fieldKey, 'hidden')" />
|
||||
<span>隐藏</span>
|
||||
</label>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<span class="text-neutral-500">录入页展示</span>
|
||||
<button type="button" class="relative inline-flex h-6 w-11 items-center rounded-full transition"
|
||||
:class="rule.requirement === 'hidden' ? 'bg-neutral-300' : 'bg-primary-600'"
|
||||
@click="toggleDrawerFieldDisplay(rule.fieldKey)">
|
||||
<span class="inline-block h-5 w-5 transform rounded-full bg-white transition"
|
||||
:class="rule.requirement === 'hidden' ? 'translate-x-1' : 'translate-x-5'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="filteredRuleDrawerItems.length === 0">
|
||||
<div class="border border-dashed border-neutral-300 rounded-lg p-8 text-center text-neutral-400">暂无匹配字段</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<footer class="px-5 py-3 border-t border-neutral-200 bg-neutral-50 flex items-center justify-end gap-2">
|
||||
<button class="px-3 py-1.5 rounded-md border border-neutral-300 hover:bg-white" @click="closeRuleDrawer()">取消</button>
|
||||
<button class="px-3 py-1.5 rounded-md bg-primary-600 text-white hover:bg-primary-700" @click="saveRuleDrawer()">保存规则</button>
|
||||
</footer>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div x-cloak x-show="toast.show" x-transition class="fixed top-20 right-6 z-[60]">
|
||||
<div class="rounded-lg border px-4 py-2 shadow-lg text-sm"
|
||||
:class="toast.type === 'error' ? 'bg-danger-50 border-danger-600/30 text-danger-600' : 'bg-success-50 border-success-600/30 text-success-600'"
|
||||
x-text="toast.message"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function settingPage() {
|
||||
return {
|
||||
mainTab: 'lookup',
|
||||
toast: { show: false, type: 'success', message: '' },
|
||||
|
||||
lookupFilters: { keyword: '', module: '' },
|
||||
lookupGroups: [],
|
||||
lookupEditor: { open: false, groupId: null, title: '', items: [], error: '' },
|
||||
|
||||
fieldFilters: { keyword: '', entityType: '', tradeStatus: '' },
|
||||
fieldCombos: [],
|
||||
ruleDrawer: { open: false, comboId: null, title: '', items: [], search: '' },
|
||||
|
||||
duplicateScopeOptions: [
|
||||
{ value: 'self', label: '本人（默认）', desc: '同一经纪人不可重复录入同一手机号。' },
|
||||
{ value: 'dept', label: '本部门', desc: '同部门范围内不可重复录入同一手机号。' },
|
||||
{ value: 'company', label: '全公司', desc: '全公司范围内不可重复录入同一手机号。' }
|
||||
],
|
||||
clientRequiredFieldOptions: [
|
||||
{ key: 'grade', label: '等级', desc: '客源等级字段，默认必填且不可关闭。', locked: true },
|
||||
{ key: 'source', label: '来源', desc: '客源来源字段，默认必填且不可关闭。', locked: true },
|
||||
{ key: 'budget_range', label: '求购/求租总价区间', desc: '控制预算区间是否必填。', locked: false },
|
||||
{ key: 'room_requirement', label: '居室需求', desc: '控制户型需求是否必填。', locked: false },
|
||||
{ key: 'buying_purpose', label: '购房目的', desc: '控制购房目的是否必填。', locked: false }
|
||||
],
|
||||
clientRules: {
|
||||
duplicateScope: 'self',
|
||||
requiredFields: {
|
||||
grade: true,
|
||||
source: true,
|
||||
budget_range: false,
|
||||
room_requirement: false,
|
||||
buying_purpose: false
|
||||
}
|
||||
},
|
||||
clientRuleError: '',
|
||||
|
||||
init() {
|
||||
this.seedLookupGroups();
|
||||
this.seedFieldCombos();
|
||||
},
|
||||
|
||||
seedLookupGroups() {
|
||||
this.lookupGroups = [
|
||||
{
|
||||
id: 'g-client-source',
|
||||
module: 'client',
|
||||
moduleLabel: '客源',
|
||||
key: 'source',
|
||||
label: '客源来源',
|
||||
items: [
|
||||
{ id: 'c-src-1', label: '门店接待', sortOrder: 1, active: true, isSystem: true },
|
||||
{ id: 'c-src-2', label: '老客户转介绍', sortOrder: 2, active: true, isSystem: true },
|
||||
{ id: 'c-src-3', label: '驻守派单', sortOrder: 3, active: true, isSystem: true },
|
||||
{ id: 'c-src-4', label: '上门', sortOrder: 4, active: true, isSystem: true },
|
||||
{ id: 'c-src-5', label: '网络-58同城', sortOrder: 5, active: true, isSystem: true },
|
||||
{ id: 'c-src-6', label: '网络-安居客', sortOrder: 6, active: true, isSystem: true },
|
||||
{ id: 'c-src-7', label: '微信', sortOrder: 7, active: true, isSystem: true },
|
||||
{ id: 'c-src-8', label: '抖音线索', sortOrder: 8, active: false, isSystem: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'g-client-purpose',
|
||||
module: 'client',
|
||||
moduleLabel: '客源',
|
||||
key: 'follow_purpose',
|
||||
label: '跟进目的',
|
||||
items: [
|
||||
{ id: 'c-pur-1', label: '回拨', sortOrder: 1, active: true, isSystem: true },
|
||||
{ id: 'c-pur-2', label: '推房', sortOrder: 2, active: true, isSystem: true },
|
||||
{ id: 'c-pur-3', label: '带看', sortOrder: 3, active: true, isSystem: true },
|
||||
{ id: 'c-pur-4', label: '维护', sortOrder: 4, active: true, isSystem: true },
|
||||
{ id: 'c-pur-5', label: '其他', sortOrder: 5, active: true, isSystem: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'g-property-source',
|
||||
module: 'property',
|
||||
moduleLabel: '房源',
|
||||
key: 'source',
|
||||
label: '房源来源',
|
||||
items: [
|
||||
{ id: 'p-src-1', label: '主动开发', sortOrder: 1, active: true, isSystem: true },
|
||||
{ id: 'p-src-2', label: '业主上门', sortOrder: 2, active: true, isSystem: true },
|
||||
{ id: 'p-src-3', label: '老客户转介绍', sortOrder: 3, active: true, isSystem: true },
|
||||
{ id: 'p-src-4', label: '网络来电', sortOrder: 4, active: true, isSystem: true }
|
||||
]
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
seedFieldCombos() {
|
||||
const baseRules = [
|
||||
{ fieldKey: 'orientation', fieldName: '朝向', requirement: 'required' },
|
||||
{ fieldKey: 'decoration', fieldName: '装修情况', requirement: 'required' },
|
||||
{ fieldKey: 'floor', fieldName: '楼层', requirement: 'optional' },
|
||||
{ fieldKey: 'building_area', fieldName: '建筑面积', requirement: 'required' },
|
||||
{ fieldKey: 'inner_area', fieldName: '套内面积', requirement: 'optional' },
|
||||
{ fieldKey: 'room_layout', fieldName: '房型（室/厅/卫）', requirement: 'required' },
|
||||
{ fieldKey: 'ownership_years', fieldName: '产权年限', requirement: 'optional' },
|
||||
{ fieldKey: 'parking_count', fieldName: '车位数', requirement: 'hidden' }
|
||||
];
|
||||
|
||||
this.fieldCombos = [
|
||||
{
|
||||
id: 'res-sale',
|
||||
entityType: 'residential',
|
||||
entityTypeLabel: '住宅',
|
||||
tradeStatus: 'sale',
|
||||
tradeStatusLabel: '出售',
|
||||
updatedAt: '2026-04-29 09:10',
|
||||
rules: this.deepClone(baseRules)
|
||||
},
|
||||
{
|
||||
id: 'res-rent',
|
||||
entityType: 'residential',
|
||||
entityTypeLabel: '住宅',
|
||||
tradeStatus: 'rent',
|
||||
tradeStatusLabel: '出租',
|
||||
updatedAt: '2026-04-29 09:10',
|
||||
rules: this.deepClone(baseRules).map(r => r.fieldKey === 'parking_count' ? { ...r, requirement: 'optional' } : r)
|
||||
},
|
||||
{
|
||||
id: 'shop-sale',
|
||||
entityType: 'shop',
|
||||
entityTypeLabel: '商铺',
|
||||
tradeStatus: 'sale',
|
||||
tradeStatusLabel: '出售',
|
||||
updatedAt: '2026-04-29 09:10',
|
||||
rules: this.deepClone(baseRules).map(r => r.fieldKey === 'room_layout' ? { ...r, requirement: 'hidden' } : r)
|
||||
},
|
||||
{
|
||||
id: 'shop-rent',
|
||||
entityType: 'shop',
|
||||
entityTypeLabel: '商铺',
|
||||
tradeStatus: 'rent',
|
||||
tradeStatusLabel: '出租',
|
||||
updatedAt: '2026-04-29 09:10',
|
||||
rules: this.deepClone(baseRules).map(r => r.fieldKey === 'ownership_years' ? { ...r, requirement: 'hidden' } : r)
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
get filteredLookupGroups() {
|
||||
const keyword = this.lookupFilters.keyword.trim();
|
||||
const module = this.lookupFilters.module;
|
||||
|
||||
return this.lookupGroups
|
||||
.filter(group => !module || group.module === module)
|
||||
.map(group => {
|
||||
if (!keyword) return group;
|
||||
const matchedItems = group.items.filter(item => item.label.includes(keyword));
|
||||
const groupMatched = group.label.includes(keyword) || `${group.module}.${group.key}`.includes(keyword);
|
||||
return {
|
||||
...group,
|
||||
items: groupMatched ? group.items : matchedItems
|
||||
};
|
||||
})
|
||||
.filter(group => keyword ? (group.items.length > 0 || group.label.includes(keyword)) : true);
|
||||
},
|
||||
|
||||
openLookupEditor(group) {
|
||||
this.lookupEditor.open = true;
|
||||
this.lookupEditor.groupId = group.id;
|
||||
this.lookupEditor.title = `${group.label}（${group.module}.${group.key}）`;
|
||||
this.lookupEditor.error = '';
|
||||
this.lookupEditor.items = this.deepClone(group.items).sort((a, b) => a.sortOrder - b.sortOrder);
|
||||
},
|
||||
|
||||
closeLookupEditor() {
|
||||
this.lookupEditor = { open: false, groupId: null, title: '', items: [], error: '' };
|
||||
},
|
||||
|
||||
addLookupEditorItem() {
|
||||
this.lookupEditor.items.push({
|
||||
id: `tmp-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
|
||||
label: '',
|
||||
sortOrder: this.lookupEditor.items.length + 1,
|
||||
active: true,
|
||||
isSystem: false
|
||||
});
|
||||
},
|
||||
|
||||
moveLookupEditorItem(index, direction) {
|
||||
const target = index + direction;
|
||||
if (target < 0 || target >= this.lookupEditor.items.length) return;
|
||||
const cloned = this.lookupEditor.items;
|
||||
[cloned[index], cloned[target]] = [cloned[target], cloned[index]];
|
||||
this.lookupEditor.items = [...cloned];
|
||||
},
|
||||
|
||||
removeLookupEditorItem(index) {
|
||||
const item = this.lookupEditor.items[index];
|
||||
if (item.isSystem) {
|
||||
this.lookupEditor.error = '系统预制项不可删除，仅可停用';
|
||||
return;
|
||||
}
|
||||
this.lookupEditor.items.splice(index, 1);
|
||||
this.lookupEditor.items = [...this.lookupEditor.items];
|
||||
},
|
||||
|
||||
saveLookupEditor() {
|
||||
this.lookupEditor.error = '';
|
||||
const labels = this.lookupEditor.items.map(item => (item.label || '').trim());
|
||||
if (labels.some(v => !v)) {
|
||||
this.lookupEditor.error = '项目值不能为空';
|
||||
return;
|
||||
}
|
||||
const normalized = labels.map(v => v.toLowerCase());
|
||||
if (new Set(normalized).size !== normalized.length) {
|
||||
this.lookupEditor.error = '项目值不可重复';
|
||||
return;
|
||||
}
|
||||
|
||||
this.lookupEditor.items.forEach((item, idx) => {
|
||||
item.label = item.label.trim();
|
||||
item.sortOrder = idx + 1;
|
||||
});
|
||||
|
||||
this.lookupGroups = this.lookupGroups.map(group => {
|
||||
if (group.id !== this.lookupEditor.groupId) return group;
|
||||
return { ...group, items: this.deepClone(this.lookupEditor.items) };
|
||||
});
|
||||
|
||||
const group = this.lookupGroups.find(g => g.id === this.lookupEditor.groupId);
|
||||
this.closeLookupEditor();
|
||||
this.notify(`参数已保存，缓存失效：{tenant_schema}:setting:lookup:${group.module}.${group.key}`);
|
||||
},
|
||||
|
||||
toggleLookupItemActive(groupId, itemId) {
|
||||
this.lookupGroups = this.lookupGroups.map(group => {
|
||||
if (group.id !== groupId) return group;
|
||||
return {
|
||||
...group,
|
||||
items: group.items.map(item => item.id === itemId ? { ...item, active: !item.active } : item)
|
||||
};
|
||||
});
|
||||
this.notify('项目状态已更新');
|
||||
},
|
||||
|
||||
deleteLookupItem(groupId, itemId) {
|
||||
const group = this.lookupGroups.find(g => g.id === groupId);
|
||||
const item = group.items.find(i => i.id === itemId);
|
||||
if (!item || item.isSystem) {
|
||||
this.notify('系统预制项不可删除，仅可停用', 'error');
|
||||
return;
|
||||
}
|
||||
this.lookupGroups = this.lookupGroups.map(g => {
|
||||
if (g.id !== groupId) return g;
|
||||
const nextItems = g.items.filter(i => i.id !== itemId).map((i, idx) => ({ ...i, sortOrder: idx + 1 }));
|
||||
return { ...g, items: nextItems };
|
||||
});
|
||||
this.notify('项目已删除');
|
||||
},
|
||||
|
||||
get filteredFieldCombos() {
|
||||
const keyword = this.fieldFilters.keyword.trim();
|
||||
return this.fieldCombos.filter(combo => {
|
||||
const byEntity = !this.fieldFilters.entityType || combo.entityType === this.fieldFilters.entityType;
|
||||
const byTrade = !this.fieldFilters.tradeStatus || combo.tradeStatus === this.fieldFilters.tradeStatus;
|
||||
const byKeyword = !keyword || combo.entityTypeLabel.includes(keyword) || combo.tradeStatusLabel.includes(keyword);
|
||||
return byEntity && byTrade && byKeyword;
|
||||
});
|
||||
},
|
||||
|
||||
countRequirement(combo, requirement) {
|
||||
return combo.rules.filter(rule => rule.requirement === requirement).length;
|
||||
},
|
||||
|
||||
openRuleDrawer(combo) {
|
||||
this.ruleDrawer.open = true;
|
||||
this.ruleDrawer.comboId = combo.id;
|
||||
this.ruleDrawer.title = `${combo.entityTypeLabel} × ${combo.tradeStatusLabel} 字段规则`;
|
||||
this.ruleDrawer.items = this.deepClone(combo.rules);
|
||||
this.ruleDrawer.search = '';
|
||||
},
|
||||
|
||||
closeRuleDrawer() {
|
||||
this.ruleDrawer = { open: false, comboId: null, title: '', items: [], search: '' };
|
||||
},
|
||||
|
||||
get filteredRuleDrawerItems() {
|
||||
const q = this.ruleDrawer.search.trim();
|
||||
if (!q) return this.ruleDrawer.items;
|
||||
return this.ruleDrawer.items.filter(item => item.fieldName.includes(q) || item.fieldKey.includes(q));
|
||||
},
|
||||
|
||||
setDrawerRequirement(fieldKey, requirement) {
|
||||
this.ruleDrawer.items = this.ruleDrawer.items.map(item => item.fieldKey === fieldKey ? { ...item, requirement } : item);
|
||||
},
|
||||
|
||||
toggleDrawerFieldDisplay(fieldKey) {
|
||||
this.ruleDrawer.items = this.ruleDrawer.items.map(item => {
|
||||
if (item.fieldKey !== fieldKey) return item;
|
||||
if (item.requirement === 'hidden') return { ...item, requirement: 'optional' };
|
||||
return { ...item, requirement: 'hidden' };
|
||||
});
|
||||
},
|
||||
|
||||
saveRuleDrawer() {
|
||||
const now = this.formatNow();
|
||||
this.fieldCombos = this.fieldCombos.map(combo => {
|
||||
if (combo.id !== this.ruleDrawer.comboId) return combo;
|
||||
return { ...combo, rules: this.deepClone(this.ruleDrawer.items), updatedAt: now };
|
||||
});
|
||||
|
||||
const combo = this.fieldCombos.find(c => c.id === this.ruleDrawer.comboId);
|
||||
this.closeRuleDrawer();
|
||||
this.notify(`字段规则已保存，缓存失效：{tenant_schema}:setting:field_req:property.${combo.entityType}.${combo.tradeStatus}`);
|
||||
},
|
||||
|
||||
toggleClientRequired(field) {
|
||||
this.clientRuleError = '';
|
||||
if (field.locked) {
|
||||
this.clientRuleError = '等级、来源为默认必填字段，不可取消';
|
||||
return;
|
||||
}
|
||||
this.clientRules.requiredFields[field.key] = !this.clientRules.requiredFields[field.key];
|
||||
},
|
||||
|
||||
resetClientRules() {
|
||||
this.clientRuleError = '';
|
||||
this.clientRules = {
|
||||
duplicateScope: 'self',
|
||||
requiredFields: {
|
||||
grade: true,
|
||||
source: true,
|
||||
budget_range: false,
|
||||
room_requirement: false,
|
||||
buying_purpose: false
|
||||
}
|
||||
};
|
||||
this.notify('已恢复默认配置');
|
||||
},
|
||||
|
||||
saveClientRules() {
|
||||
this.clientRuleError = '';
|
||||
if (!this.clientRules.requiredFields.grade || !this.clientRules.requiredFields.source) {
|
||||
this.clientRuleError = '等级、来源为默认必填字段，不可取消';
|
||||
return;
|
||||
}
|
||||
this.notify('客源规则已保存，缓存失效：{tenant_schema}:setting:client_rules');
|
||||
},
|
||||
|
||||
closeAllPanels() {
|
||||
if (this.ruleDrawer.open) return this.closeRuleDrawer();
|
||||
if (this.lookupEditor.open) return this.closeLookupEditor();
|
||||
},
|
||||
|
||||
notify(message, type = 'success') {
|
||||
this.toast = { show: true, type, message };
|
||||
setTimeout(() => { this.toast.show = false; }, 2200);
|
||||
},
|
||||
|
||||
deepClone(v) {
|
||||
return JSON.parse(JSON.stringify(v));
|
||||
},
|
||||
|
||||
formatNow() {
|
||||
const now = new Date();
|
||||
const yy = now.getFullYear();
|
||||
const mm = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const dd = String(now.getDate()).padStart(2, '0');
|
||||
const hh = String(now.getHours()).padStart(2, '0');
|
||||
const mi = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${yy}-${mm}-${dd} ${hh}:${mi}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1935
Project/fonrey/UI_DESIGN/组织人事_UI.html
Normal file
1935
Project/fonrey/UI_DESIGN/组织人事_UI.html
Normal file
File diff suppressed because it is too large
Load Diff
219
Project/fonrey/UI_DESIGN/组织人事管理/组织人事_UI.md
Normal file
219
Project/fonrey/UI_DESIGN/组织人事管理/组织人事_UI.md
Normal file
@@ -0,0 +1,219 @@
|
||||
# 组织人事 UI 设计文档
|
||||
|
||||
> **任务编号**：07（P0-C）
|
||||
> **覆盖范围**：`US-ORG-001 ~ US-ORG-003`（组织结构维护 / 员工列表维护 / 员工入职账号创建）
|
||||
> **输出文件**：`UI_DESIGN/组织人事_UI.html`
|
||||
> **设计基线**：`UI_SYSTEM/UI_SYSTEM.md`（后台壳层、表格、分页、Modal/Drawer、树形选择器）
|
||||
> **需求依据**：
|
||||
> - `PRD/TASK.md`（US-ORG-001~003）
|
||||
> - `PRD/组织人事管理/组织人事管理模块PRD.md`
|
||||
> - `DATA_MODEL/DATA_MODEL_ORG.md`
|
||||
> **竞品截图参考**：
|
||||
> - `screenshots/组织人事/组织结构/公司组织结构.png`
|
||||
> - `screenshots/组织人事/组织结构/部门新增.png`
|
||||
> - `screenshots/组织人事/组织结构/部门编辑.png`
|
||||
> - `screenshots/组织人事/组织结构/部门详情.png`
|
||||
> - `screenshots/组织人事/组织结构/部门架构图.png`
|
||||
> - `screenshots/组织人事/组织结构/员工信息编辑.png`
|
||||
> - `screenshots/组织人事/组织结构/员工离职.png`
|
||||
> - `screenshots/组织人事/组织结构/员工调动.png`
|
||||
> - `screenshots/组织人事/组织结构/员工通讯录.png`
|
||||
> - `screenshots/组织人事/职务管理/职务管理.png`
|
||||
|
||||
---
|
||||
|
||||
## 1. 目标与范围
|
||||
|
||||
### 1.1 页面目标
|
||||
|
||||
组织人事页面用于承载 3 个 P0 核心能力：
|
||||
|
||||
1. **组织结构维护（US-ORG-001）**
|
||||
- 左侧组织树支持新增/编辑/删除部门
|
||||
- 删除有员工部门时阻断并提示
|
||||
2. **员工列表维护（US-ORG-002）**
|
||||
- 支持姓名/工号/手机号关键词检索
|
||||
- 支持部门/状态筛选
|
||||
- 员工姓名可进入员工详情
|
||||
3. **员工入职与账号创建（US-ORG-003）**
|
||||
- 入职表单必填校验（姓名/手机号/所属门店/职位）
|
||||
- 创建后自动生成初始密码并给出发送提示
|
||||
- 新员工立即进入组织数据并可用于后续选择器
|
||||
|
||||
### 1.2 本任务边界
|
||||
|
||||
- ✅ 包含：壳层、组织树、员工表格、架构图视图、通讯录视图、部门弹窗、入职抽屉、离职弹窗、调动抽屉、员工详情抽屉、异动记录弹窗
|
||||
- ✅ 包含：关键必填校验、批量操作启用态、分页演示、Toast 反馈
|
||||
- ⛔ 不包含：真实后端接口、真实地图服务、真实短信发送、真实权限系统
|
||||
|
||||
---
|
||||
|
||||
## 2. 信息架构
|
||||
|
||||
### 2.1 统一壳层
|
||||
|
||||
- **Top Bar（56px）**：品牌 + 一级导航 + 用户区
|
||||
- **Sidebar（240px）**：组织人事二级导航
|
||||
- **Main Content（`ml-60 pt-[72px]`）**：
|
||||
1. 面包屑 + 页面标题
|
||||
2. 主 Tab（组织结构 / 部门架构图 / 员工通讯录）
|
||||
3. 各视图内容
|
||||
|
||||
### 2.2 组织结构视图（默认）
|
||||
|
||||
#### 左栏：组织树
|
||||
- 新增部门按钮
|
||||
- 部门搜索
|
||||
- 显示已关闭部门复选
|
||||
- 树节点（名称 + 在职人数）
|
||||
- 行内操作：编辑 / 删除
|
||||
|
||||
#### 右栏：员工管理
|
||||
1. 顶部预警条（账号上限、证件不匹配）
|
||||
2. 筛选区（关键词、职务、状态、审批状态、入职时间、部门级别等）
|
||||
3. 操作区（新增员工、导出员工、批量调动、批量设置上级、更多、员工异动记录）
|
||||
4. 员工表格（姓名、工号、职务、部门、上级、电话、入职时间、审批状态、操作）
|
||||
5. 分页区
|
||||
|
||||
### 2.3 部门架构图视图
|
||||
|
||||
- 顶部筛选：部门下拉、显示已关闭部门
|
||||
- 说明文案：最多 8 层，支持拖拽缩放
|
||||
- 工具栏：放大、缩小、导出、适配、重置
|
||||
- 树状节点卡片：部门名、级别标签、负责人、人数、直属下级
|
||||
|
||||
### 2.4 员工通讯录视图
|
||||
|
||||
- 筛选：部门、职务、生日、关键字
|
||||
- 表格：部门、姓名、职务、性别、生日、电话、分机、邮箱
|
||||
- 电话操作：拨打 / 查看号码
|
||||
- 分页演示
|
||||
|
||||
---
|
||||
|
||||
## 3. 关键交互设计
|
||||
|
||||
### 3.1 组织树维护
|
||||
|
||||
- 点击节点切换右侧员工列表范围
|
||||
- 新增部门弹窗：保存后实时加入树
|
||||
- 编辑部门弹窗：字段预填并支持状态/属性调整
|
||||
- 删除部门：
|
||||
- 若该部门（含下级）仍有员工，阻断并提示
|
||||
- 无员工时删除成功
|
||||
- 组织树变更后，部门下拉/调动选择器实时更新（同页数据源）
|
||||
|
||||
### 3.2 员工列表筛选与批量
|
||||
|
||||
- 关键词支持：姓名 / 工号 / 手机号
|
||||
- 部门筛选 + “显示下属部门员工”开关
|
||||
- 状态筛选（正式/试用/冻结/离职）
|
||||
- 批量按钮在未勾选时禁用，勾选后启用
|
||||
|
||||
### 3.3 新增员工（入职）抽屉
|
||||
|
||||
#### 必填字段
|
||||
- 姓名
|
||||
- 手机号
|
||||
- 所属门店/店组
|
||||
- 职务
|
||||
|
||||
#### 联动逻辑
|
||||
- 选择职务后自动带出：职务类别、默认角色
|
||||
- 仅允许选择门店/店组作为所属部门
|
||||
|
||||
#### 提交结果
|
||||
- 自动生成初始密码
|
||||
- 弹窗展示账号与密码（模拟发送）
|
||||
- 新员工立即进入列表，审批状态置为“入职审”
|
||||
|
||||
### 3.4 员工离职弹窗
|
||||
|
||||
- 顶部展示业务统计（房源数/客源数/营销客数）
|
||||
- 必填：离职日期、离职类型
|
||||
- 可选：备注
|
||||
- 成功后：员工状态改为“离职”，并写入异动记录
|
||||
|
||||
### 3.5 员工调动抽屉
|
||||
|
||||
- “调动前 / 调动后”双列对照
|
||||
- 必填：调动日期、部门、职务、角色、直属上级（或勾选无直属上级）
|
||||
- 备注最多 30 字
|
||||
- 调动成功后更新员工归属并写入异动记录
|
||||
|
||||
### 3.6 员工详情抽屉
|
||||
|
||||
- 左侧：头像、姓名、部门、职务、工号
|
||||
- 右侧 Tab：员工基本信息 / 异动记录 / 账号信息
|
||||
- 列表点击姓名触发打开
|
||||
|
||||
---
|
||||
|
||||
## 4. 状态矩阵
|
||||
|
||||
| 状态 | 触发 | 页面反馈 |
|
||||
|---|---|---|
|
||||
| 默认态 | 首次进入 | 展示组织结构视图 + 默认部门员工 |
|
||||
| 树节点切换 | 点击部门节点 | 右侧员工列表按节点刷新 |
|
||||
| 查询态 | 输入条件并查询 | 列表过滤结果更新 |
|
||||
| 空结果态 | 条件过严 | 表格空状态“暂无匹配数据” |
|
||||
| 批量勾选态 | 勾选复选框 | 批量按钮启用 + 已选计数 |
|
||||
| 新增员工校验失败 | 缺失必填 | 字段红字错误提示，不提交 |
|
||||
| 部门删除拦截 | 部门有员工 | Toast 提示并阻断删除 |
|
||||
| 离职/调动成功 | 表单校验通过 | 更新列表 + 写异动日志 + Toast |
|
||||
| 主题策略 | 后台统一视觉 | 页面内不包含 Light/Dark/System 切换控件 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 字段与数据模型映射（DATA_MODEL_ORG）
|
||||
|
||||
| UI 字段 | 数据模型字段 |
|
||||
|---|---|
|
||||
| 部门名称 | `org_units.name` |
|
||||
| 部门级别 | `org_units.type` |
|
||||
| 上级部门 | `org_units.parent_id` |
|
||||
| 部门属性 | `org_units.attribute` |
|
||||
| 部门状态 | `org_units.is_active` |
|
||||
| 员工姓名 | `staff.name` |
|
||||
| 员工工号 | `staff.employee_no` |
|
||||
| 职务 | `staff.job_title` |
|
||||
| 职务类别 | `staff.job_category` |
|
||||
| 所属部门 | `staff.org_unit_id` |
|
||||
| 员工状态 | `staff.status` |
|
||||
| 手机号（脱敏显示） | `staff.phone_enc` + 展示脱敏规则 |
|
||||
| 入职日期 | `staff.first_joined_at` |
|
||||
| 离职日期 | `staff.resigned_at` |
|
||||
| 异动类型 | `staff_transfer_logs.transfer_type` |
|
||||
| 异动时间 | `staff_transfer_logs.transfer_date` |
|
||||
| 操作人 | `staff_transfer_logs.operator_id` |
|
||||
| 账号平台绑定 | `staff_accounts.platform / is_bound` |
|
||||
|
||||
---
|
||||
|
||||
## 6. 可访问性与实现规范
|
||||
|
||||
- 表格列头使用 `<th scope="col">`
|
||||
- 图标按钮补充 `aria-label`
|
||||
- Modal/Drawer 支持 `Esc` 关闭
|
||||
- 必填错误信息使用文本提示，不仅靠颜色
|
||||
- 焦点统一 `focus-visible:ring-2 focus-visible:ring-primary-600/40`
|
||||
- 所有关键操作给出 Toast 反馈
|
||||
- 页面遵循既有后台浅色视觉，不加入主题切换控件
|
||||
|
||||
---
|
||||
|
||||
## 7. 验收清单（本轮）
|
||||
|
||||
- [x] 覆盖 US-ORG-001：组织树增改删 + 删除拦截
|
||||
- [x] 覆盖 US-ORG-002：员工关键词/部门/状态筛选 + 姓名详情入口
|
||||
- [x] 覆盖 US-ORG-003：入职必填校验 + 自动密码 + 成功入列
|
||||
- [x] 竞品关键结构已映射：组织树、架构图、离职弹窗、调动抽屉、通讯录
|
||||
- [x] 页面不含 Light/Dark/System 切换控件
|
||||
- [ ] 控制台 0 报错（待本地预览验证）
|
||||
|
||||
---
|
||||
|
||||
## 8. 后续衔接
|
||||
|
||||
- 本任务评审通过后进入任务 08：权限管理（US-PERMISSION-001~005）
|
||||
- 组织结构与员工数据将作为权限人员列表、角色分配的数据基础
|
||||
536
Project/fonrey/UI_DESIGN/首页设置_UI.html
Normal file
536
Project/fonrey/UI_DESIGN/首页设置_UI.html
Normal file
@@ -0,0 +1,536 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1366" />
|
||||
<title>Fonrey 首页设置 · 静态原型</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#F0FDFA',
|
||||
100: '#CCFBF1',
|
||||
200: '#99F6E4',
|
||||
500: '#14B8A6',
|
||||
600: '#0F766E',
|
||||
700: '#115E59',
|
||||
800: '#134E4A'
|
||||
},
|
||||
neutral: {
|
||||
50: '#F8FAFC',
|
||||
100: '#F1F5F9',
|
||||
200: '#E2E8F0',
|
||||
300: '#CBD5E1',
|
||||
400: '#94A3B8',
|
||||
500: '#64748B',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1E293B',
|
||||
900: '#0F172A'
|
||||
},
|
||||
success: { 50: '#F0FDF4', 600: '#16A34A' },
|
||||
warning: { 50: '#FFFBEB', 600: '#D97706' },
|
||||
danger: { 50: '#FEF2F2', 600: '#DC2626' },
|
||||
info: { 50: '#EFF6FF', 600: '#2563EB' }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background: #F8FAFC; color: #0F172A; }
|
||||
[x-cloak] { display: none !important; }
|
||||
.role-tab { color: #64748B; border: 1px solid #E2E8F0; background: #fff; }
|
||||
.role-tab.active { color: #115E59; border-color: #115E59; background: #F0FDFA; font-weight: 600; }
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: #CBD5E1;
|
||||
transition: background .2s;
|
||||
}
|
||||
.switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background: #fff;
|
||||
transition: transform .2s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
.switch.on { background: #0F766E; }
|
||||
.switch.on::after { transform: translateX(16px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-sm antialiased" x-data="homeSettingPage()" x-init="init()">
|
||||
<header class="fixed top-0 left-0 right-0 h-14 z-30 bg-primary-800 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 px-4 w-60 shrink-0">
|
||||
<div class="w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">F</div>
|
||||
<span class="text-base font-semibold text-white">Fonrey</span>
|
||||
</div>
|
||||
<nav class="flex items-center gap-1 flex-1 px-2" aria-label="主导航">
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">主页</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">房源</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">客源</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">营销</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">交易</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">数据</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">人事</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md bg-primary-600 text-white font-medium">系统</a>
|
||||
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700">三网</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-1 px-4 shrink-0">
|
||||
<button class="p-1.5 text-primary-200 hover:bg-primary-700 rounded-md" aria-label="消息">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
|
||||
</button>
|
||||
<div class="flex items-center gap-2 pl-3 ml-1 border-l border-primary-700">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-600 text-white flex items-center justify-center text-sm font-semibold">杜</div>
|
||||
<span class="text-sm font-medium text-primary-100">杜利强</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside class="fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white overflow-y-auto">
|
||||
<nav class="p-3 space-y-0.5">
|
||||
<div class="px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">设置</div>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium">首页设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">房源设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">新房设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">客源设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">交易设置</a>
|
||||
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">人事OA设置</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="ml-60 pt-[72px] min-h-screen px-6 py-5">
|
||||
<div class="mx-auto max-w-[1760px] space-y-4">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<nav class="flex items-center gap-1 text-xs text-neutral-500 mb-2" aria-label="面包屑">
|
||||
<a href="#" class="hover:text-neutral-700">系统</a>
|
||||
<span>/</span>
|
||||
<a href="#" class="hover:text-neutral-700">设置</a>
|
||||
<span>/</span>
|
||||
<span class="text-neutral-900">首页设置</span>
|
||||
</nav>
|
||||
<h1 class="text-xl font-semibold text-neutral-900">系统配置-首页设置</h1>
|
||||
<p class="text-xs text-neutral-500 mt-1">管理员可按角色配置首页展示卡片、排行榜及成交战报视图</p>
|
||||
</div>
|
||||
<div class="w-[320px]">
|
||||
<input type="text" x-model.trim="searchKeyword" placeholder="请输入设置项名称" class="w-full px-3 py-2 rounded-md border border-neutral-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/30" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-12 gap-4 items-start">
|
||||
<section class="col-span-8 space-y-4">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4 space-y-4">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2" role="tablist" aria-label="角色视图切换">
|
||||
<template x-for="role in roleOptions" :key="role.key">
|
||||
<button
|
||||
class="role-tab px-3 py-1.5 rounded-md"
|
||||
:class="{ 'active': currentRole === role.key }"
|
||||
@click="switchRole(role.key)"
|
||||
x-text="role.label"
|
||||
></button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<template x-if="!editMode">
|
||||
<button class="px-3 py-1.5 rounded-md bg-primary-600 text-white hover:bg-primary-700" @click="startEdit">编辑</button>
|
||||
</template>
|
||||
<template x-if="editMode">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="px-3 py-1.5 rounded-md border border-neutral-300 hover:bg-neutral-50" @click="cancelEdit">取消</button>
|
||||
<button class="px-3 py-1.5 rounded-md bg-primary-600 text-white hover:bg-primary-700" @click="saveConfig">保存配置</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="formError" class="rounded-md border border-danger-600 bg-danger-50 text-danger-600 px-3 py-2 text-xs" x-text="formError"></div>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200" x-show="matchSection('员工信息')">
|
||||
<header class="px-4 py-3 border-b border-neutral-200 bg-neutral-50 font-semibold">员工信息模块</header>
|
||||
<div class="p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">是否展示员工司龄</p>
|
||||
<p class="text-xs text-neutral-500 mt-1">若开启则首页展示员工司龄</p>
|
||||
</div>
|
||||
<button class="switch" :class="draftConfig.show_seniority ? 'on' : ''" @click="toggleBoolean('show_seniority')" :disabled="!editMode"></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200" x-show="matchSection('行程')">
|
||||
<header class="px-4 py-3 border-b border-neutral-200 bg-neutral-50 font-semibold">行程模块显示指标</header>
|
||||
<div class="p-4 space-y-2">
|
||||
<label class="inline-flex items-center gap-2 mr-4">
|
||||
<input type="checkbox" class="rounded border-neutral-300" :checked="draftConfig.itinerary_metrics.includes('sale')" @change="toggleMetric('sale')" :disabled="!editMode" />
|
||||
<span>买卖</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-2">
|
||||
<input type="checkbox" class="rounded border-neutral-300" :checked="draftConfig.itinerary_metrics.includes('rent')" @change="toggleMetric('rent')" :disabled="!editMode" />
|
||||
<span>租赁</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200" x-show="matchSection('业绩')">
|
||||
<header class="px-4 py-3 border-b border-neutral-200 bg-neutral-50 font-semibold">首页业绩显示设置</header>
|
||||
<div class="p-4 space-y-3">
|
||||
<label class="flex items-start gap-2">
|
||||
<input type="radio" name="kpi_mode" value="pending_and_approved" :checked="draftConfig.kpi_mode==='pending_and_approved'" @change="draftConfig.kpi_mode='pending_and_approved'" :disabled="!editMode" class="mt-0.5" />
|
||||
<span class="text-xs leading-5">统计审批中和审批通过的转定业绩：录转定/认购后统计审批中、审批驳回和审批通过的业绩，若无转定/认购，直接签约则统计录签约后审批中、审批驳回和审批通过的分成后业绩</span>
|
||||
</label>
|
||||
<label class="flex items-start gap-2">
|
||||
<input type="radio" name="kpi_mode" value="approved_only" :checked="draftConfig.kpi_mode==='approved_only'" @change="draftConfig.kpi_mode='approved_only'" :disabled="!editMode" class="mt-0.5" />
|
||||
<span class="text-xs leading-5">仅统计审批通过业绩（严格口径）</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200" x-show="matchSection('统计卡片')">
|
||||
<header class="px-4 py-3 border-b border-neutral-200 bg-neutral-50 font-semibold">首页统计卡片配置</header>
|
||||
<div class="p-4 space-y-2">
|
||||
<template x-for="card in sortedCards" :key="card.key">
|
||||
<div class="border border-neutral-200 rounded-md px-3 py-2 flex items-center justify-between gap-3 bg-white">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="switch" :class="card.enabled ? 'on' : ''" @click="toggleCard(card.key)" :disabled="!editMode"></button>
|
||||
<div>
|
||||
<p class="font-medium" x-text="card.label"></p>
|
||||
<p class="text-xs text-neutral-500" x-text="card.desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="px-2 py-1 rounded border border-neutral-300 text-xs" @click="moveCard(card.key,-1)" :disabled="!editMode">上移</button>
|
||||
<button class="px-2 py-1 rounded border border-neutral-300 text-xs" @click="moveCard(card.key,1)" :disabled="!editMode">下移</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-xs text-neutral-500 mt-1">至少保留1个启用卡片；卡片顺序将影响首页展示顺序。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200" x-show="matchSection('排行榜')">
|
||||
<header class="px-4 py-3 border-b border-neutral-200 bg-neutral-50 font-semibold">排行榜设置</header>
|
||||
<div class="p-4 grid grid-cols-2 gap-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">是否显示业绩和单数</p>
|
||||
<p class="text-xs text-neutral-500">若开启则排行榜中显示业绩和单数</p>
|
||||
</div>
|
||||
<button class="switch" :class="draftConfig.ranking.show_performance_and_deal ? 'on' : ''" @click="toggleNested('ranking','show_performance_and_deal')" :disabled="!editMode"></button>
|
||||
</div>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-xs text-neutral-500">业绩计算方式</span>
|
||||
<select class="mt-1 w-full px-3 py-2 rounded-md border border-neutral-300 bg-white" x-model="draftConfig.ranking.calc_mode" :disabled="!editMode">
|
||||
<option value="turn_order">统计审批中和审批通过的转定单量和业绩</option>
|
||||
<option value="approved_only">仅统计审批通过单量和业绩</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-xs text-neutral-500">默认按店或组排名</span>
|
||||
<select class="mt-1 w-full px-3 py-2 rounded-md border border-neutral-300 bg-white" x-model="draftConfig.ranking.default_rank_level" :disabled="!editMode">
|
||||
<option value="store">门店</option>
|
||||
<option value="group">组别</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">默认展示全公司前10排名数据</p>
|
||||
<p class="text-xs text-neutral-500">权限为本人/无时仅展示默认排行</p>
|
||||
</div>
|
||||
<button class="switch" :class="draftConfig.ranking.show_company_top10 ? 'on' : ''" @click="toggleNested('ranking','show_company_top10')" :disabled="!editMode"></button>
|
||||
</div>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-xs text-neutral-500">过滤账号</span>
|
||||
<input type="text" class="mt-1 w-full px-3 py-2 rounded-md border border-neutral-300" placeholder="无限制" x-model="draftConfig.ranking.filter_accounts" :disabled="!editMode" />
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-xs text-neutral-500">过滤部门</span>
|
||||
<input type="text" class="mt-1 w-full px-3 py-2 rounded-md border border-neutral-300" placeholder="无限制" x-model="draftConfig.ranking.filter_departments" :disabled="!editMode" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-lg border border-neutral-200" x-show="matchSection('成交战报')">
|
||||
<header class="px-4 py-3 border-b border-neutral-200 bg-neutral-50 font-semibold">成交战报设置</header>
|
||||
<div class="p-4 grid grid-cols-2 gap-4">
|
||||
<div class="space-y-3">
|
||||
<label class="block">
|
||||
<span class="text-xs text-neutral-500">成交时间范围</span>
|
||||
<input type="text" class="mt-1 w-full px-3 py-2 rounded-md border border-neutral-300" placeholder="不限制" x-model="draftConfig.battle_report.days_range" :disabled="!editMode" />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-xs text-neutral-500">成交业绩范围</span>
|
||||
<input type="text" class="mt-1 w-full px-3 py-2 rounded-md border border-neutral-300" placeholder="不限制" x-model="draftConfig.battle_report.amount_range" :disabled="!editMode" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><p class="font-medium">是否显示业绩</p><p class="text-xs text-neutral-500">若开启则成交战报中显示业绩</p></div>
|
||||
<button class="switch" :class="draftConfig.battle_report.show_performance ? 'on' : ''" @click="toggleNested('battle_report','show_performance')" :disabled="!editMode"></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div><p class="font-medium">是否显示房源</p><p class="text-xs text-neutral-500">若开启则成交战报中显示房源名称</p></div>
|
||||
<button class="switch" :class="draftConfig.battle_report.show_property_name ? 'on' : ''" @click="toggleNested('battle_report','show_property_name')" :disabled="!editMode"></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div><p class="font-medium">是否显示房源总价</p><p class="text-xs text-neutral-500">若开启则成交战报中显示房源总价</p></div>
|
||||
<button class="switch" :class="draftConfig.battle_report.show_property_total_price ? 'on' : ''" @click="toggleNested('battle_report','show_property_total_price')" :disabled="!editMode"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside class="col-span-4 space-y-4 sticky top-[84px]">
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4">
|
||||
<h3 class="text-base font-semibold mb-3">首页预览（<span x-text="currentRoleLabel"></span>）</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<template x-for="card in enabledCards" :key="card.key">
|
||||
<div class="rounded-md border border-neutral-200 p-3 bg-neutral-50">
|
||||
<p class="text-xs text-neutral-500" x-text="card.label"></p>
|
||||
<p class="text-lg font-semibold mt-1" x-text="metricValue(card.key)"></p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-neutral-200 rounded-lg p-4 text-xs text-neutral-600 space-y-2">
|
||||
<p><span class="font-medium text-neutral-800">员工司龄：</span><span x-text="draftConfig.show_seniority ? '显示' : '隐藏'"></span></p>
|
||||
<p><span class="font-medium text-neutral-800">行程指标：</span><span x-text="draftConfig.itinerary_metrics.length ? draftConfig.itinerary_metrics.map(v => v==='sale'?'买卖':'租赁').join('、') : '无' "></span></p>
|
||||
<p><span class="font-medium text-neutral-800">排行榜显示业绩/单数：</span><span x-text="draftConfig.ranking.show_performance_and_deal ? '开启' : '关闭'"></span></p>
|
||||
<p><span class="font-medium text-neutral-800">成交战报展示房源：</span><span x-text="draftConfig.battle_report.show_property_name ? '开启' : '关闭'"></span></p>
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div x-cloak x-show="toast.open" x-transition class="fixed right-6 bottom-6 px-4 py-2 rounded-md shadow-lg text-sm bg-neutral-900 text-white" x-text="toast.message"></div>
|
||||
|
||||
<script>
|
||||
function homeSettingPage() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
editMode: false,
|
||||
formError: '',
|
||||
currentRole: 'agent',
|
||||
roleOptions: [
|
||||
{ key: 'agent', label: '经纪人视图' },
|
||||
{ key: 'manager', label: '店长视图' },
|
||||
{ key: 'admin', label: '管理员视图' }
|
||||
],
|
||||
roleConfigs: {},
|
||||
draftConfig: null,
|
||||
backupConfig: null,
|
||||
toast: { open: false, message: '' },
|
||||
|
||||
cardCatalog: {
|
||||
new_property_today: { label: '今日新增房源', desc: '统计今日新增房源数量' },
|
||||
new_client_today: { label: '今日新增客源', desc: '统计今日新增客源数量' },
|
||||
new_showing_today: { label: '今日新增带看', desc: '统计今日新增带看数量' },
|
||||
new_followup_today: { label: '今日新增跟进', desc: '统计今日新增跟进数量' },
|
||||
signed_deals_today: { label: '今日签约单量', desc: '统计今日签约套数' },
|
||||
deal_amount_today: { label: '今日成交业绩', desc: '统计今日成交业绩金额' }
|
||||
},
|
||||
|
||||
metricValues: {
|
||||
new_property_today: '18',
|
||||
new_client_today: '12',
|
||||
new_showing_today: '9',
|
||||
new_followup_today: '36',
|
||||
signed_deals_today: '4',
|
||||
deal_amount_today: '126.8万'
|
||||
},
|
||||
|
||||
init() {
|
||||
this.roleConfigs = {
|
||||
agent: this.defaultRoleConfig('agent'),
|
||||
manager: this.defaultRoleConfig('manager'),
|
||||
admin: this.defaultRoleConfig('admin')
|
||||
};
|
||||
this.loadRole('agent');
|
||||
},
|
||||
|
||||
defaultRoleConfig(role) {
|
||||
const baseCards = [
|
||||
{ key: 'new_property_today', enabled: true, sort: 1 },
|
||||
{ key: 'new_client_today', enabled: true, sort: 2 },
|
||||
{ key: 'new_followup_today', enabled: true, sort: 3 },
|
||||
{ key: 'new_showing_today', enabled: role !== 'agent', sort: 4 },
|
||||
{ key: 'signed_deals_today', enabled: role === 'admin' || role === 'manager', sort: 5 },
|
||||
{ key: 'deal_amount_today', enabled: role === 'admin', sort: 6 }
|
||||
];
|
||||
return {
|
||||
show_seniority: role !== 'agent',
|
||||
itinerary_metrics: ['sale', 'rent'],
|
||||
kpi_mode: 'pending_and_approved',
|
||||
home_cards: baseCards,
|
||||
ranking: {
|
||||
show_performance_and_deal: true,
|
||||
calc_mode: 'turn_order',
|
||||
default_rank_level: role === 'agent' ? 'group' : 'store',
|
||||
show_company_top10: role === 'admin',
|
||||
filter_accounts: '',
|
||||
filter_departments: ''
|
||||
},
|
||||
battle_report: {
|
||||
days_range: '',
|
||||
amount_range: '',
|
||||
show_performance: role === 'admin',
|
||||
show_property_name: true,
|
||||
show_property_total_price: role === 'admin'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
get currentRoleLabel() {
|
||||
return this.roleOptions.find(r => r.key === this.currentRole)?.label || '';
|
||||
},
|
||||
|
||||
get sortedCards() {
|
||||
if (!this.draftConfig) return [];
|
||||
return this.draftConfig.home_cards
|
||||
.slice()
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.map(c => ({ ...c, label: this.cardCatalog[c.key].label, desc: this.cardCatalog[c.key].desc }));
|
||||
},
|
||||
|
||||
get enabledCards() {
|
||||
return this.sortedCards.filter(c => c.enabled);
|
||||
},
|
||||
|
||||
metricValue(key) {
|
||||
return this.metricValues[key] || '-';
|
||||
},
|
||||
|
||||
matchSection(label) {
|
||||
if (!this.searchKeyword) return true;
|
||||
return label.includes(this.searchKeyword);
|
||||
},
|
||||
|
||||
loadRole(role) {
|
||||
this.currentRole = role;
|
||||
this.draftConfig = this.deepClone(this.roleConfigs[role]);
|
||||
this.backupConfig = this.deepClone(this.roleConfigs[role]);
|
||||
this.formError = '';
|
||||
this.editMode = false;
|
||||
},
|
||||
|
||||
switchRole(role) {
|
||||
if (this.editMode) {
|
||||
this.formError = '请先保存或取消当前角色编辑内容';
|
||||
return;
|
||||
}
|
||||
this.loadRole(role);
|
||||
},
|
||||
|
||||
startEdit() {
|
||||
this.editMode = true;
|
||||
this.formError = '';
|
||||
this.backupConfig = this.deepClone(this.draftConfig);
|
||||
},
|
||||
|
||||
cancelEdit() {
|
||||
this.draftConfig = this.deepClone(this.backupConfig);
|
||||
this.editMode = false;
|
||||
this.formError = '';
|
||||
this.notify('已取消编辑，恢复到上次保存状态');
|
||||
},
|
||||
|
||||
saveConfig() {
|
||||
this.formError = '';
|
||||
const enabledCount = this.draftConfig.home_cards.filter(c => c.enabled).length;
|
||||
if (enabledCount < 1) {
|
||||
this.formError = '至少保留 1 个首页统计卡片';
|
||||
return;
|
||||
}
|
||||
if ((this.draftConfig.ranking.filter_accounts || '').length > 100) {
|
||||
this.formError = '过滤账号输入过长，请控制在100字符以内';
|
||||
return;
|
||||
}
|
||||
if ((this.draftConfig.ranking.filter_departments || '').length > 100) {
|
||||
this.formError = '过滤部门输入过长，请控制在100字符以内';
|
||||
return;
|
||||
}
|
||||
|
||||
this.roleConfigs[this.currentRole] = this.deepClone(this.draftConfig);
|
||||
this.backupConfig = this.deepClone(this.draftConfig);
|
||||
this.editMode = false;
|
||||
this.notify('首页设置已保存，当前角色视图即时生效');
|
||||
},
|
||||
|
||||
toggleBoolean(field) {
|
||||
if (!this.editMode) return;
|
||||
this.draftConfig[field] = !this.draftConfig[field];
|
||||
},
|
||||
|
||||
toggleNested(group, field) {
|
||||
if (!this.editMode) return;
|
||||
this.draftConfig[group][field] = !this.draftConfig[group][field];
|
||||
},
|
||||
|
||||
toggleMetric(metric) {
|
||||
if (!this.editMode) return;
|
||||
const list = this.draftConfig.itinerary_metrics;
|
||||
const idx = list.indexOf(metric);
|
||||
if (idx >= 0) list.splice(idx, 1);
|
||||
else list.push(metric);
|
||||
},
|
||||
|
||||
toggleCard(key) {
|
||||
if (!this.editMode) return;
|
||||
const card = this.draftConfig.home_cards.find(c => c.key === key);
|
||||
if (!card) return;
|
||||
card.enabled = !card.enabled;
|
||||
},
|
||||
|
||||
moveCard(key, delta) {
|
||||
if (!this.editMode) return;
|
||||
const cards = this.draftConfig.home_cards.slice().sort((a,b) => a.sort-b.sort);
|
||||
const index = cards.findIndex(c => c.key === key);
|
||||
if (index < 0) return;
|
||||
const target = index + delta;
|
||||
if (target < 0 || target >= cards.length) return;
|
||||
const tmp = cards[index].sort;
|
||||
cards[index].sort = cards[target].sort;
|
||||
cards[target].sort = tmp;
|
||||
},
|
||||
|
||||
notify(message) {
|
||||
this.toast.message = message;
|
||||
this.toast.open = true;
|
||||
setTimeout(() => {
|
||||
this.toast.open = false;
|
||||
}, 1800);
|
||||
},
|
||||
|
||||
deepClone(v) { return JSON.parse(JSON.stringify(v)); }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user