# 饲喂标准管理 — 前端技术方案



> 依据：`饲喂标准管理技术方案.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` 合法组合一致（见 **§4**）。



---



## 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`，下拉可清空；选项见 **§6** |

| 搜索 | `handleQuery`：`pageNum = 1` 后 `getList` |

| 重置 | `resetQuery`：清空 `keyword`、`standardType`，`resetForm('queryForm')` 后再查询 |

| 新增 | `v-hasPermi="['feeding:standard:add']"` → `handleAdd` |



### 3.2 列表区（次卡片）



| 列 | 数据来源 | 备注 |

| --- | --- | --- |

| 标准名称 | `standardName` | `show-overflow-tooltip` |

| 标准类型 | `standardType` | `typeLabel`：由 `standardTypeOptions` 按编码映射名称 |

| 简介 | `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** 一致；`v-show="total > 0"`。



### 3.3 新增 / 编辑弹窗



| 字段 | 表单控件 | 校验（前端） |

| --- | --- | --- |

| `standardName` | 输入框，`maxlength=20`，字数统计 | 必填；长度 **1～20**（与总方案校验摘要一致） |

| `standardType` | 下拉 | 必填 |

| `introduction` | 多行文本，`maxlength=50` | 选填；最多 **50** 字 |

| 正文附件 | `el-upload` → `/common/upload` | 必填（以 `contentFilePath` 为校验 prop）；后缀白名单、≤**30MB**、文件名不含英文逗号 |

| 封面 | `picture-card` 上传，最多 1 张 | 选填；`jpg/jpeg/png`、≤**10MB** |



**编辑态附件**：仅当详情返回 `publishStatus === 0`（未发布）时允许替换/删除正文与封面（`canEditUploadRow`）；与总方案「仅未发布可改」一致。



**提交 Body（小驼峰）**



| 键 | 说明 |

| --- | --- |

| `standardName` / `standardType` / `introduction` | 与总方案 **§3.3 / §3.4** 一致；`introduction` 可省略或 `undefined` |

| `contentFileUrl` / `contentFilePath` / `contentFileName` | 上传成功回写 |

| `coverFileUrl` / `coverFilePath` | 可选 |

| `id` | 仅修改时携带 |



### 3.4 查看弹窗



调 `GET /feeding/standard/{id}` 拉全量展示：标准名称、类型、简介、正文链接、封面（`image-preview`）、上架状态、知识库同步、发布时间、下架时间。



---



## 4. 上传与鉴权



| 项 | 说明 |

| --- | --- |

| 上传地址 | `VUE_APP_BASE_API + '/common/upload'` |

| 请求头 | `Authorization: Bearer <token>`（`@/utils/auth` `getToken`） |

| 成功回调 | `code === 200` 时取 `url`、`fileName`、`originalFilename`（正文名优先 `originalFilename`，否则取本地 `file.name`） |

| 失败 | `on-error` 关闭 loading 并 `msgError` |



物理文件删除、知识库联动由**后端**在修改/删除等接口内完成（总方案 **§4**），前端不直接调用知识库 HTTP。



---



## 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` |

| 删除 | `feeding:standard:remove` | `publishStatus === 0` 且 `kbSyncStatus === 0` |

| 发布 | `feeding:standard:publish` | `publishStatus === 0` 且 `kbSyncStatus === 1` |

| 下架 | `feeding:standard:offline` | `publishStatus === 1` |



**说明**：`publishStatus === 1` 且 `kbSyncStatus === 0` 为非法组合，前端不单独分支；若后端脏数据，以接口报错为准。



**二次确认文案**：同步、移出、删除、发布、下架均使用 `this.$modal.confirm`，下架说明与总方案「下架 vs 移出」语义一致。



---



## 6. 枚举与展示映射



### 6.1 `standardType`（标准类型）

页面维护 `standardTypeOptions: []`，`created` 调用 `loadStandardTypeOptions()`：

```javascript
import { listInformationCategoryChildren } from '@/api/category/informationCategory'
// listInformationCategoryChildren('001', '2') → data[]，项字段 code、name
```

| 编码（示例） | 界面文案 |
| --- | --- |
| `001005` | 饲料配方 |
| `001006` | 牦牛投喂 |



### 6.2 `publishStatus`（上架状态）



| 值 | 界面文案 |

| --- | --- |

| `0` | 未发布 |

| `1` | 已发布 |



### 6.3 `kbSyncStatus`（知识库同步）



| 值 | 界面文案 |

| --- | --- |

| `0` | 未同步 |

| `1` | 已同步 |



---



## 7. API 模块与后端 URI 对应



文件：`ruoyi-ui/src/api/breedingStandards/feedingManage.js`。请求/响应字段采用 **小驼峰**（与若依 JSON 惯例及总方案示例一致）。



| 方法（导出） | 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`（与页面 `queryParams` 一致）。

**标准类型选项**：`ruoyi-ui/src/api/category/informationCategory.js` — `listInformationCategoryChildren('001', '2')`。



---



## 8. 错误与交互约定



| 场景 | 前端行为 |

| --- | --- |

| 列表/表单接口非 200 | 走全局 `request` 拦截器提示（若依默认） |

| 上传失败 | `msgError`，关闭 loading |

| 删除 | 单行传 `id` 至 `delFeedingStandard`（与总方案 `{ids}` 兼容） |



不在前端重复实现知识库重试；失败以后端 `msg` 为准。



---



## 9. 交付与联调清单



- [ ] 菜单路由指向 `breedingStandards/feeding/index`，按钮权限 SQL 与 **§5** 一致  

- [ ] 后端 `/feeding/standard/**` 与总方案 **§3** 对齐，分页字段 `rows` / `total`  

- [ ] `/common/upload` 可访问且返回 `url`、`fileName`、`originalFilename`  

- [ ] 联调：新增 → 同步知识库 → 发布 → 下架 → 移出 → 删除（及未发布仅本地删除）  



---



## 10. 文档修订记录



| 版本 | 日期 | 说明 |

| --- | --- | --- |

| v1.0 | 2026-05-11 | 初稿，与 `feeding/index.vue`、`feedingManage.js` 及总方案 **§2～§3** 对齐 |


