profession/profession-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
profession-web/栏目设置页面重构计划.md
T

11 KiB
Raw Permalink Blame History

栏目设置页面重构计划（对照老系统 /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 保持数字稳定（16 小学、7 预备、810 初中、1113 高中）；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 已实现）
  • 老系统年级段"按校下发"的个性化字典：本期用全学段静态字典
Reference in New Issue View Git Blame Copy Permalink