饲喂标准管理前端技术方案.md 8.9KB
饲喂标准管理 — 前端技术方案
依据：
饲喂标准管理技术方案.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()：
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 对齐 |