137 lines
11 KiB
Markdown
137 lines
11 KiB
Markdown
# 栏目设置页面重构计划（对照老系统 /Profession/Moudule）
|
||
|
||
> 创建日期：2026-09-26
|
||
> **执行状态（2026-09-26）：任务 1~5 全部完成，并已用 lijing 账号完成 CAS 登录全流程走查。**
|
||
> 走查通过项：菜单加载（GetUserMod → 字段管理/上级栏目/栏目设置/统计/局端统计）；添加组（名称+上级+字段绑定一步创建"教学设计"）；
|
||
> 发布表单预览（固定 6 字段+已绑定"获奖名称"）；备注说明；积分设置（发布2/评论1）；修改 tab 绑定切换与改名；
|
||
> 编辑组/组排序批量弹窗；左侧勾选启停；保存双请求（OrderBy→EditMoudule→MouduleList）；刷新后持久化；
|
||
> 数据库直查确认（sort_order/is_check/field_ids/remark/send_points/comm_points 全部正确）；审计日志 sys_operation_log 落库。
|
||
> 后端 OrderBy 已支持 TopModuleTypes（mvn compile 通过，8107 已重启生效）；
|
||
> 年级段字典扩充为全学段 13 项；`npm run build` 通过。
|
||
> 待办：开放用户选人组件接入（现为 ID 文本框）；前台 ProfessionView 的发布/列表页与此配置联动走查。
|
||
> 参考页面：https://oa.bestsch.com/Profession/Moudule（账号 lwj，已实测登录并逐区研究 + 对照 ProfessionOld/src/page/Profession_Moudule2.vue 源码确认保存流程）
|
||
> 目标文件：`E:\YHXT\view\ProfessionConsole\src\views\profession\ModuleSetting.vue`（重写）
|
||
> 配套：`src/api/module/profession.ts`（微调）、后端 `MouduleService.orderModules`（补 TopModuleTypes）
|
||
|
||
---
|
||
|
||
## 一、老页面逻辑实录（2026-09-26 实测）
|
||
|
||
### 1.1 整体布局
|
||
```
|
||
┌─────────────┬──────────────────────────────────────┐
|
||
│ 左：栏目组 │ 右：选中栏目配置 │
|
||
│ [➕][✏][⇅][🗑] │ ┌ 栏目名：111 │
|
||
│ ☑ 111 ←选中 │ │ 发布表单预览： │
|
||
│ ☑ 222 │ │ 标题(必填input) 年级段(下拉) │
|
||
│ ☑ 33 │ │ 学科(下拉) 是否公开(必填单选) │
|
||
│ ☑ 123 │ │ 内容(富文本) 添加附件(≤200MB) │
|
||
│ ☑ 369 │ │ …已绑定自定义字段(按类型渲染) │
|
||
│ (可拖拽排序) │ ├ Tabs: [备注|修改|积分设置] │
|
||
│ │ │ 备注: 备注说明 textarea │
|
||
│ │ │ 修改: 字段拖拽绑定/排序列表 │
|
||
│ │ │ 积分设置: 发布积分数/评论积分数 │
|
||
├─────────────┴──────────────────────────────────────┤
|
||
│ [保存] ← 整页唯一 │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 1.2 左侧栏目组列表
|
||
- **4 个图标按钮**（Tooltip）：`添加组` / `编辑组` / `组排序` / `删除组`
|
||
- **拖拽列表**（vuedraggable）：每项 = 复选框（勾选=启用 IsCheck）+ 栏目名
|
||
- 勾选/取消、拖拽排序：**只改本地状态，不发请求**；由底部「保存」统一提交（实测确认）
|
||
- 点击栏目名：选中该栏目（高亮），右侧加载其配置（`Getdatelist?SerID=`）
|
||
- 区局下发栏目（SchSerID≠userSchSerID）：不可编辑/删除（老代码约束）
|
||
|
||
### 1.3 右侧面板
|
||
1. **发布表单实时预览**（所见即所得，教师端发布页就长这样）：
|
||
- 固定字段：标题（必填 input）/ 年级段（下拉）/ 学科（下拉）/ 是否公开（必填单选 是/否）/ 内容（富文本）/ 添加附件（提示 ≤200MB）
|
||
- **已绑定**的自定义字段按字段类型渲染对应控件（input/select/radio/checkbox/date）
|
||
2. **Tabs 三页签**：
|
||
- `备注`：备注说明 textarea（rows=6）
|
||
- `修改`：自定义字段**绑定/排序**列表（draglist）：
|
||
- 固定 6 字段（标题/年级段/学科/是否公开/内容/附件）置灰禁用、始终绑定
|
||
- 自定义字段：高亮=已绑定，**点击切换绑定**，**拖拽排序**
|
||
- 末尾「添加」按钮（引导去字段管理新增字段）
|
||
- `积分设置`：发布积分数 / 评论积分数（InputNumber，栏目级覆盖，0=全局默认）
|
||
|
||
### 1.4 四个弹窗（实测 DOM）
|
||
| 弹窗 | 内容 | 提交 |
|
||
|---|---|---|
|
||
| 添加组（自定义模块添加） | 模块名称(必填) + 上级栏目下拉(默认"无") + 自定义字段绑定拖拽列表(固定字段置灰) | `CreateMoudule`：MoudleName/TopModuleType/Pid/MoudleSort/OpenStrid/remark/ModuleAuthority —— **创建时一步带字段绑定** |
|
||
| 编辑组（自定义模块编辑） | 提示"排序号为正整数，1 最靠前" + 表格：序号/组名/上级栏目(行内下拉)/排序号(行内输入)，批量编辑 | 随「保存」的 OrderBy 提交（TopModuleTypes 列） |
|
||
| 组排序 | 提示 + 表格：序号/组名/排序号，批量编辑 | 同上（StrSort 列） |
|
||
| 删除组 | 确认后删除选中/勾选的栏目 | `DeleteMoudule`（ids） |
|
||
|
||
### 1.5 「保存」按钮 = 双请求（源码 doAddsave() 确认）
|
||
1. `GET OrderBy`：`StrID`(列表顺序的栏目id串) / `StrSort` / `TopModuleTypes`(上级栏目串) / `namestr`(名称串) / `Checkstrs`(启用串) —— 一次提交左侧列表的**顺序+名称+勾选+上级栏目**
|
||
2. `POST doAddsave`：`SerID`(当前选中栏目) / `Remark` / `Pid`(发布积分) / `MoudleSort`(评论积分) / `OpenStrid`('all'→空) / `ModuleAuthority`(绑定字段SerID CSV) —— 保存右侧当前栏目的**字段绑定+备注+积分+开放用户**
|
||
|
||
### 1.6 老页面接口清单
|
||
| 接口 | 用途 |
|
||
|---|---|
|
||
| Profession_list/MouduleList | 栏目列表（含 SchSerID/userSchSerID 判只读、IsCheck、sort） |
|
||
| Profession_list/BindFieldList | 字段库全集（绑定候选） |
|
||
| Profession_list/TopMouduleList?IsUsing=1 | 上级栏目下拉（仅启用） |
|
||
| Profession_list/Getdatelist?SerID= | 选中栏目详情：SerID/MoudleName/SendpointsNum/CommpointsNum/OpenStrid/Remark/itemlist[字段(含 ischeck 绑定态)] |
|
||
| Common/reviewprocess/GetGradeList | 年级段（该校实测：高一/高二/高三/预备/初一/初二/初三） |
|
||
| Common/reviewprocess/GetSubList | 学科（语文/数学/英语/物理/化学/生物/信息技术/…） |
|
||
| CreateMoudule / OrderBy / doAddsave / DeleteMoudule / EditMoudule | 写操作 |
|
||
|
||
---
|
||
|
||
## 二、新版现状 vs 老页面差距
|
||
|
||
| 方面 | 老页面 | 新版现状 | 结论 |
|
||
|---|---|---|---|
|
||
| 布局 | 左右两栏 + 底部统一保存 | 单栏表格 | **重写布局** |
|
||
| 栏目列表 | 复选框(启用)+拖拽排序+点选 | 表格行 | **改为拖拽列表** |
|
||
| 增删改 | 左侧 4 按钮 + 3 种弹窗（添加组一步带字段绑定；编辑组/组排序为批量表格） | 行内按钮 + 单条弹窗 | **改为 4 按钮 + 弹窗** |
|
||
| 字段绑定 | 右侧「修改」tab：点击绑定/解绑 + 拖拽排序；固定字段置灰 | 弹窗 CheckboxGroup | **改为 draglist 交互** |
|
||
| 表单预览 | 右侧实时渲染发布表单 | 无 | **新增** |
|
||
| 备注/积分 | 右侧 Tabs（备注/积分设置） | 弹窗字段 | **移入 Tabs** |
|
||
| 开放用户 | OpenStrid（'all'=不限） | openUserIds 文本框 | 保留文本框（选人组件后续接） |
|
||
| 上级栏目 | 列表平铺不显示，仅在添加/编辑弹窗设置 | 表格列显示 | 移入弹窗（列表可省） |
|
||
| 保存 | 底部一个按钮 = OrderBy + doAddsave 双请求 | 行内即时提交 | **改为底部保存双请求** |
|
||
| 年级段字典 | 按校返回（初高中 7 项） | 后端静态 小学/初中/高中 | 预览展示用，后端字典**扩充为全学段** |
|
||
| modId | 120 | 已对齐 | 不变 |
|
||
|
||
---
|
||
|
||
## 三、修改任务
|
||
|
||
### 任务 1：后端 OrderBy 支持 TopModuleTypes（小改）
|
||
`ProfessionService` → `MouduleService.orderModules`：新增可选参数 `topModuleTypes`（与 StrID 同序的上级栏目 id 串，0=无），逐条更新 `topModuleId`；Controller `OrderBy` 增加对应 @RequestParam。
|
||
验收：`mvn compile` 通过；批量修改上级栏目后 MouduleList 返回新值。
|
||
|
||
### 任务 2：后端年级段字典扩充（小改）
|
||
`ProfessionDicts.gradeList()`：小学（一年级~六年级）/ 预备 / 初一 / 初二 / 初三 / 高一 / 高二 / 高三，value 保持数字稳定（1~6 小学、7 预备、8~10 初中、11~13 高中）；`gradeName()` 同步。旧数据 value（1/2/3）兼容映射。
|
||
|
||
### 任务 3：API 模块微调
|
||
`profession.ts`：`orderBy` 增加 `TopModuleTypes` 透传；其余复用现有端点（CreateMoudule/EditMoudule/DeleteMoudule/ModuleFields/FieldAll/TopList/MouduleList）。
|
||
|
||
### 任务 4：ModuleSetting.vue 重写（核心）
|
||
按老页面布局重写：
|
||
1. **左右两栏**（左 7 右 17，对齐老页面比例）：
|
||
- 左：`添加/编辑/排序/删除` 4 个图标按钮（Tooltip）+ vuedraggable 列表（复选框=启用，点名称=选中加载右侧）
|
||
- 右：栏目名标题条 + **发布表单预览**（固定字段 + 已绑定字段按类型渲染，禁用态）+ Tabs（备注 / 字段绑定 / 积分设置）+ 底部「保存」
|
||
2. **字段绑定 tab**：draglist 风格——固定 6 字段置灰；自定义字段点击切换绑定（高亮）、拖拽排序；「添加」按钮跳转字段管理页
|
||
3. **三个弹窗**：
|
||
- 添加组：名称 + 上级栏目下拉 + 字段绑定列表（复用右侧绑定组件逻辑）→ CreateMoudule
|
||
- 编辑组：批量表格（组名只读 / 上级栏目行内下拉 / 排序号行内输入）→ 并入待保存状态（由底部保存统一提交 OrderBy）
|
||
- 组排序：批量表格（组名 / 排序号）→ 同上
|
||
- 删除组：确认弹窗 → DeleteMoudule
|
||
4. **底部保存**：一次点击 = `orderBy`(StrID/StrSort/TopModuleTypes/namestr/Checkstrs) + `edit`(当前选中栏目 fieldIds/remark/sendPoints/commPoints/openUserIds) 双请求；成功后刷新列表
|
||
5. 区局下发（`readonly=true`）行：复选框/拖拽/编辑/删除禁用
|
||
6. 交互细节对齐：未选中栏目时右侧空态提示；切换栏目未保存的绑定/排序本地保留提示；`Message` 反馈文案沿用老版风格
|
||
|
||
### 任务 5：验证
|
||
- `npm run build`（Console）通过
|
||
- 后端 `mvn compile` 通过
|
||
- dev server 热更新后走查：添加组→绑定字段→拖拽排序→勾选启停→保存→列表与右侧状态一致
|
||
|
||
## 四、不做 / 后续
|
||
- 开放用户选人组件（UserCheckModal 接 GetSchoolAll）：本期保留文本框，联调阶段接入
|
||
- 附件预览里的上传为禁用展示（预览态），真实上传在教师发布页（RecordEdit 已实现）
|
||
- 老系统年级段"按校下发"的个性化字典：本期用全学段静态字典
|