生长与出栏标准管理前端技术方案.md 9.4KB
生长与出栏标准管理 — 前端技术方案
依据：
生长与出栏标准管理技术方案.md（同目录，下称总方案）。本文描述 Vue 管理端页面、接口封装、权限字、交互与校验与总方案 §2 / §3 的对应关系；库表、状态机与知识库编排以后端总方案为准。
1. 技术架构
| 项 | 说明 |
|---|---|
| 工程 | 若依 RuoYi-Vue 前端（Vue 2.x + Element UI + Vue Router + Vuex） |
| 页面路径 | ruoyi-ui/src/views/breedingStandards/growthOutbound/index.vue |
| 组件名 | GrowthOutboundStandard |
| 布局参考 | ruoyi-ui/src/views/breedingStandards/breedingManage/index.vue（双 el-card：查询区 + 表格区；新增/编辑弹窗 + 查看弹窗） |
| HTTP | @/utils/request 封装 Axios，自动拼接 VUE_APP_BASE_API、携带 Authorization |
| 时间格式化 | 全局 parseTime（若依 utils/ruoyi 注入） |
| 分页 | 公共组件 pagination，与列表 TableDataInfo 的 total、rows 对齐 |
与总方案关系：列表/详情/写操作均调用总方案 §3 所列 REST；行内操作显隐与 publish_status、kb_sync_status 合法组合一致（总方案 §2.1 合法组合）。
2. 源码与路由
| 类型 | 路径 |
|---|---|
| 页面 | ruoyi-ui/src/views/breedingStandards/growthOutbound/index.vue |
| API 模块 | ruoyi-ui/src/api/breedingStandards/growthSlaughter.js |
菜单（若依后台配置）
| 配置项 | 建议值 |
|---|---|
| 组件路径 | breedingStandards/growthOutbound/index（与 views 下相对路径一致，无前缀 @/） |
| 路由名 | 自定，不与现有路由冲突即可 |
| 权限标识 | 与 §5 表一致，子菜单按钮 SQL 与总方案交付清单对齐 |
3. 页面结构
3.1 查询区（首卡片）
| UI | 绑定/说明 |
|---|---|
| 关键词 | queryParams.keyword，占位「标准名称或简介」，回车触发搜索 |
| 标准类型 | queryParams.standardType，下拉可清空；选项在 created 中调用 §7.1 接口动态加载 |
| 搜索 / 重置 / 新增 | 与设备实施作业标准页一致；新增权限 growthSlaughter:standard:add |
3.2 列表区（次卡片）
| 列 | 数据来源 | 备注 |
|---|---|---|
| 标准名称 | standardName |
show-overflow-tooltip |
| 标准类型 | standardType |
typeLabel(code)：由 standardTypeOptions（§6.1）按编码映射名称 |
| 简介 | introduction |
— |
| 正文附件 | contentFileUrl / contentFileName |
el-link 新窗口打开 |
| 上架状态 | publishStatus |
publishStatusText |
| 知识库同步 | kbSyncStatus |
kbSyncStatusText |
| 发布日期 | publishTime |
parseTime(..., '{y}-{m}-{d}')，空为「—」 |
| 创建时间 | createTime |
parseTime 完整格式 |
| 操作 | 多个 el-button type="text" |
权限 + 行状态双条件，见 §5 |
分页：pageNum、pageSize 默认 1 / 20，与总方案 §3.1 一致。
3.3 新增 / 编辑弹窗
| 字段 | 表单控件 | 校验（前端） |
|---|---|---|
standardName |
输入框，maxlength=20 |
必填；长度 1～20 |
standardType |
下拉 | 必填；选项来自 listInformationCategoryChildren('001', 4)，value=code，label=name |
introduction |
多行文本，maxlength=50 |
选填；最多 50 字 |
| 正文附件 | el-upload → /common/upload |
必填；后缀白名单、≤30MB、文件名不含英文逗号 |
| 封面 | picture-card 上传，最多 1 张 |
选填；jpg/jpeg/png、≤10MB |
编辑态：仅当详情返回 publishStatus === 0 且 kbSyncStatus === 0 时允许修改表单字段及替换/删除正文与封面（canEditFormRow）；与总方案 §3.4 一致。已同步记录点击编辑时提示 ruleSyncedNoEdit，不打开弹窗。
弹窗标题：[新增]生长与出栏标准 / [编辑]生长与出栏标准。
3.4 查看弹窗
调 GET /growthSlaughter/standard/{id} 拉全量展示：标准名称、类型、简介、正文链接、封面、上架状态、知识库同步、发布时间、下架时间。
4. 上传与鉴权
与设备实施作业标准页一致：VUE_APP_BASE_API + '/common/upload'，Header Authorization: Bearer <token>；成功取 url、fileName、originalFilename。
正文后缀（需求/服务端）：pdf、md、doc、docx、xls、xlsx、pptx（GrowthSlaughterStandardRules）。说明：当前页面 contentFileExts 暂未同步调整，保存以服务端校验为准。
5. 操作按钮与权限
权限字与总方案 §3 一致；按钮同时受 v-hasPermi 与 行状态方法 控制。
| 按钮 | 权限标识 | 显示条件（与行数据） |
|---|---|---|
| 查看 | growthSlaughter:standard:query |
有权限即显 |
| 同步知识库 | growthSlaughter:standard:syncKb |
publishStatus === 0 且 kbSyncStatus === 0 |
| 移出知识库 | growthSlaughter:standard:removeKb |
publishStatus === 0 且 kbSyncStatus === 1 |
| 编辑 | growthSlaughter:standard:edit |
publishStatus === 0 且 kbSyncStatus === 0（与总方案 §3.4 一致） |
| 删除 | growthSlaughter:standard:remove |
publishStatus === 0 且 kbSyncStatus === 0 |
| 发布 | growthSlaughter:standard:publish |
publishStatus === 0 且 kbSyncStatus === 1 |
| 下架 | growthSlaughter:standard:offline |
publishStatus === 1 |
下架完成后业务稳态为 未发布 + 已同步，可再次发布；改内容须先移出（与功能需求一致）。
6. 枚举与展示映射
6.1 standardType（标准类型）
页面维护 standardTypeOptions: []，created 调用 loadStandardTypeOptions()：
import { listInformationCategoryChildren } from '@/api/category/informationCategory'
// listInformationCategoryChildren('001', 4) → data[]，项字段 code、name
列表/详情展示：typeLabel(code) 在 standardTypeOptions 中查找后取 name；找不到时回退 存量迁移 映射 LEGACY_STANDARD_TYPE_LABELS（1～2 → 国际化 breedingStd.growth.type1～type2，对应总方案 §2.2 迁移脚本 1→001011，2→001012）；仍无则回显编码。
| 编码（示例） | 界面文案 |
|---|---|
001011 |
牦牛生长 |
001012 |
牦牛出栏 |
6.2 publishStatus / kbSyncStatus
与养殖标准模块一致：0 未发布/未同步，1 已发布/已同步。
7. API 模块与后端 URI 对应
7.1 标准类型选项（资讯类别）
文件：ruoyi-ui/src/api/category/informationCategory.js
| 方法 | HTTP | URI | 参数 |
|---|---|---|---|
listInformationCategoryChildren |
GET | /category/informationCategory/children |
parentCode=001，categoryType=4 |
7.2 生长与出栏标准 CRUD
文件：ruoyi-ui/src/api/breedingStandards/growthSlaughter.js。请求/响应字段采用 小驼峰。
| 方法（导出） | HTTP | URI |
|---|---|---|
listGrowthSlaughterStandard |
GET | /growthSlaughter/standard/list |
getGrowthSlaughterStandard |
GET | /growthSlaughter/standard/{id} |
addGrowthSlaughterStandard |
POST | /growthSlaughter/standard |
updateGrowthSlaughterStandard |
PUT | /growthSlaughter/standard |
delGrowthSlaughterStandard |
DELETE | /growthSlaughter/standard/{ids} |
syncKbGrowthSlaughterStandard |
POST | /growthSlaughter/standard/syncKb/{id} |
removeKbGrowthSlaughterStandard |
POST | /growthSlaughter/standard/removeKb/{id} |
publishGrowthSlaughterStandard |
POST | /growthSlaughter/standard/publish/{id} |
offlineGrowthSlaughterStandard |
POST | /growthSlaughter/standard/offline/{id} |
列表查询参数：pageNum、pageSize、keyword、standardType。
8. 错误与交互约定
| 场景 | 前端行为 |
|---|---|
| 列表/表单接口非 200 | 走全局 request 拦截器提示 |
| 标准类型选项加载失败 | msgError(errStdTypeLoad)，下拉为空 |
| 已同步记录点编辑 | msgWarning(ruleSyncedNoEdit)，不请求详情 |
| 已发布记录点编辑 | msgWarning(rulePublishedNoEdit) |
| 上传失败 | msgError，关闭 loading |
9. 交付与联调清单
- 菜单路由指向
breedingStandards/growthOutbound/index，按钮权限与 §5 一致 - 标准类型下拉：
GET /category/informationCategory/children?parentCode=001&categoryType=4 - 后端
/growthSlaughter/standard/**与总方案 §3 对齐 - 存量环境执行
sql/biz_growth_slaughter_standard_alter_standard_type.sql后列表类型展示正常 - 联调：新增 → 同步 → 发布 → 下架 → 移出 → 删除
- 联调：已同步记录编辑被前端拦截；未同步修改成功
10. 文档修订记录
| 版本 | 日期 | 说明 |
|---|---|---|
| v1.0 | 2026-05-13 | 初稿：页面、API、权限与后端 Controller 对齐 |
| v1.1 | 2026-06-01 | 标准类型改资讯类别编码：动态加载 parentCode=001&categoryType=4；筛选/表单传 code；存量 1～2 回退展示；编辑/上传仅 未发布+未同步；补充类型加载失败与已同步编辑提示 |
| v1.2 | 2026-05-20 | 正文服务端白名单：pdf、md、doc、docx、xls、xlsx、pptx（移除 ppt）；前端 contentFileExts 本次不改 |