# 栏目设置页面重构计划（对照老系统 /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 已实现）
- 老系统年级段"按校下发"的个性化字典：本期用全学段静态字典