# 饲喂标准管理 — 前端技术方案 > 依据:`饲喂标准管理技术方案.md`(同目录,下称**总方案**)。本文描述 **Vue 管理端页面**、**接口封装**、**权限字**、**交互与校验**与总方案 **§2 / §3** 的对应关系;库表、状态机与知识库编排以后端总方案为准。 --- ## 1. 技术架构 | 项 | 说明 | | --- | --- | | **工程** | 若依 **RuoYi-Vue** 前端(Vue **2.x** + **Element UI** + **Vue Router** + **Vuex**) | | **页面路径** | `ruoyi-ui/src/views/breedingStandards/feeding/index.vue` | | **组件名** | `FeedingManageStandard` | | **布局参考** | `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/feeding/index.vue` | | API 模块 | `ruoyi-ui/src/api/breedingStandards/feedingManage.js` | **菜单(若依后台配置)** | 配置项 | 建议值 | | --- | --- | | 组件路径 | `breedingStandards/feeding/index`(与 `views` 下相对路径一致,无前缀 `@/`) | | 路由名 | 自定,不与现有路由冲突即可 | | 权限标识 | 与 **§5** 表一致,子菜单按钮 SQL 与总方案交付清单对齐 | --- ## 3. 页面结构 ### 3.1 查询区(首卡片) | UI | 绑定/说明 | | --- | --- | | 关键词 | `queryParams.keyword`,占位「名称或简介模糊查询」,回车触发搜索 | | 标准类型 | `queryParams.standardType`,下拉可清空;选项在 `created` 中调用 **§7.1** 接口动态加载 | | 搜索 / 重置 / 新增 | 与养殖标准页一致;新增权限 `feeding: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', 2)`,`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 /feeding/standard/{id}` 拉全量展示:标准名称、类型、简介、正文链接、封面、上架状态、知识库同步、发布时间、下架时间。 --- ## 4. 上传与鉴权 与养殖标准模块一致:`VUE_APP_BASE_API + '/common/upload'`,Header `Authorization: Bearer `;成功取 `url`、`fileName`、`originalFilename`。 **正文后缀(需求/服务端)**:`pdf`、`md`、`doc`、`docx`、`xls`、`xlsx`、`pptx`(`FeedingStandardRules`)。**说明**:当前页面 `contentFileExts` 暂未同步调整,**保存以服务端校验为准**。 --- ## 5. 操作按钮与权限 权限字与总方案 **§3** 一致;按钮同时受 **`v-hasPermi`** 与 **行状态方法** 控制。 | 按钮 | 权限标识 | 显示条件(与行数据) | | --- | --- | --- | | 查看 | `feeding:standard:query` | 有权限即显 | | 同步知识库 | `feeding:standard:syncKb` | `publishStatus === 0` 且 `kbSyncStatus === 0` | | 移出知识库 | `feeding:standard:removeKb` | `publishStatus === 0` 且 `kbSyncStatus === 1` | | 编辑 | `feeding:standard:edit` | `publishStatus === 0` 且 `kbSyncStatus === 0`(与总方案 **§3.4** 一致) | | 删除 | `feeding:standard:remove` | `publishStatus === 0` 且 `kbSyncStatus === 0` | | 发布 | `feeding:standard:publish` | `publishStatus === 0` 且 `kbSyncStatus === 1` | | 下架 | `feeding:standard:offline` | `publishStatus === 1` | 下架完成后业务稳态为 **未发布 + 已同步**,可再次发布;改内容须先移出。 --- ## 6. 枚举与展示映射 ### 6.1 `standardType`(标准类型) 页面维护 `standardTypeOptions: []`,`created` 调用 `loadStandardTypeOptions()`: ```javascript import { listInformationCategoryChildren } from '@/api/category/informationCategory' // listInformationCategoryChildren('001', 2) → data[],项字段 code、name ``` 列表/详情展示:`typeLabel(code)` 在 `standardTypeOptions` 中查找后取 `name`;找不到时回退 **存量迁移** 映射 `LEGACY_STANDARD_TYPE_LABELS`(`1`~`2` → 国际化 `breedingStd.feed.type1`~`type2`,对应总方案 **§2.2** 迁移脚本 `1`→`001005`,`2`→`001006`);仍无则回显编码。 | 编码(示例) | 界面文案 | | --- | --- | | `001005` | 饲料配方 | | `001006` | 牦牛投喂 | ### 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=2` | ### 7.2 饲喂标准 CRUD 文件:`ruoyi-ui/src/api/breedingStandards/feedingManage.js`。请求/响应字段采用 **小驼峰**。 | 方法(导出) | HTTP | URI | | --- | --- | --- | | `listFeedingStandard` | GET | `/feeding/standard/list` | | `getFeedingStandard` | GET | `/feeding/standard/{id}` | | `addFeedingStandard` | POST | `/feeding/standard` | | `updateFeedingStandard` | PUT | `/feeding/standard` | | `delFeedingStandard` | DELETE | `/feeding/standard/{ids}` | | `syncKbFeedingStandard` | POST | `/feeding/standard/syncKb/{id}` | | `removeKbFeedingStandard` | POST | `/feeding/standard/removeKb/{id}` | | `publishFeedingStandard` | POST | `/feeding/standard/publish/{id}` | | `offlineFeedingStandard` | POST | `/feeding/standard/offline/{id}` | **列表查询参数**:`pageNum`、`pageSize`、`keyword`、`standardType`。 --- ## 8. 错误与交互约定 | 场景 | 前端行为 | | --- | --- | | 列表/表单接口非 200 | 走全局 `request` 拦截器提示 | | 标准类型选项加载失败 | `msgError(errStdTypeLoad)`,下拉为空 | | 已同步记录点编辑 | `msgWarning(ruleSyncedNoEdit)`,不请求详情 | | 已发布记录点编辑 | `msgWarning(rulePublishedNoEdit)` | | 上传失败 | `msgError`,关闭 loading | --- ## 9. 交付与联调清单 - [x] 菜单路由指向 `breedingStandards/feeding/index`,按钮权限与 **§5** 一致 - [x] 标准类型下拉:`GET /category/informationCategory/children?parentCode=001&categoryType=2` - [ ] 后端 `/feeding/standard/**` 与总方案 **§3** 对齐 - [ ] 存量环境执行 `sql/biz_feeding_standard_alter_standard_type.sql` 后列表类型展示正常 - [ ] 联调:新增 → 同步 → 发布 → 下架 → 移出 → 删除 - [ ] 联调:已同步记录编辑被前端拦截;未同步修改成功 --- ## 10. 文档修订记录 | 版本 | 日期 | 说明 | | --- | --- | --- | | v1.0 | 2026-05-11 | 初稿,与 `feeding/index.vue`、`feedingManage.js` 及总方案 **§2~§3** 对齐 | | **v1.1** | **2026-06-01** | **标准类型改资讯类别编码**:动态加载 `parentCode=001&categoryType=2`;筛选/表单传 `code`;存量 `1`~`2` 回退展示;编辑/上传仅 **未发布+未同步**;补充类型加载失败与已同步编辑提示 | | **v1.2** | **2026-05-20** | 正文服务端白名单:`pdf`、`md`、`doc`、`docx`、`xls`、`xlsx`、`pptx`(移除 `ppt`);前端 `contentFileExts` 本次不改 |