# 畜牧科技资源管理 — 前端技术方案 > 依据:`畜牧科技资源管理功能需求.md`、`畜牧科技资源管理技术方案.md`;布局对齐 `diseaseTreatment/medicalResource/index.vue`(双 `el-card`、Tab 分库、发布/下架);字段 **小驼峰**。 --- ## 1. 页面与路由 | 项 | 说明 | | --- | --- | | **Vue 路径** | `ruoyi-ui/src/views/techService/techResource/index.vue` | | **组件名** | `TechServiceTechResource` | | **菜单配置** | 组件路径:`techService/techResource/index`(「牧业养殖科技服务」目录下,手工配置) | | **权限前缀** | `techService:techResource:list\|query\|add\|edit\|remove\|publish\|offline\|assignAccount` | --- ## 2. API 模块 | 项 | 说明 | | --- | --- | | **文件** | `ruoyi-ui/src/api/techService/techResource.js` | | **Base** | `/techService/techResource` | | 方法 | HTTP | 说明 | | --- | --- | --- | | `listTechResource` | GET | `/list`,Query:`pageNum`、`pageSize`(默认 20)、`resourceType`(必填)、`resourceName`、`publishStatus`(0/1/2) | | `getTechResource` | GET | `/{id}` | | `addTechResource` | POST | `/` | | `updateTechResource` | PUT | `/` | | `delTechResource` | DELETE | `/{ids}` | | `publishTechResource` | POST | `/publish/{id}` | | `offlineTechResource` | POST | `/offline/{id}` | | `assignAccountTechResource` | POST | `/assignAccount/{id}` | --- ## 3. 页面结构 1. **Tab 区**:专家库 / 技术成果库 / 共享仪器库 / 视频课程库,切换即改 `resourceType` 并刷新列表。 2. **筛选区**:资源类型下拉(与 Tab 联动)、资源名称模糊、发布状态三态;搜索、重置、新增。 3. **列表区**:按 Tab 差异化列;发布状态用 `displayPublishStatus`;操作列用后端 `canEdit` / `canPublish` / `canOffline` / `canDelete` / `canAssignAccount`。 4. **新增/编辑弹窗**:资源类型编辑时禁用;按类型 `v-if` 动态字段;照片/封面走 `/common/upload`;视频课程 mp4 ≤30MB。 5. **查看弹窗**:只读全字段;未发布/已下架且 `canEdit` 时可进入编辑。 --- ## 4. 业务规则(前端) | 规则 | 实现 | | --- | --- | | Tab ↔ 类型 | `expert→004005`、`achievement→004006`、`instrument→004007`、`video→004008` | | 资源类型选项 | `listInformationCategoryChildren('004','7')` → `value=code`、`label=name` | | 列表筛选 `publishStatus` | `0` 未发布 / `1` 已发布 / `2` 已下架 | | 展示名称长度 | 专家/仪器 1~10;成果/课程 1~20 | | 照片 | 专家、共享仪器必填;jpg/jpeg/png ≤10MB | | 封面 | 技术成果、视频课程选填 | | 视频 | 视频课程必填;mp4 ≤30MB | | 服务时段/周日 | 专家、共享仪器;`serviceWeekdaysList` 数组提交 | | 分配账号 | 仅专家 Tab;`canAssignAccount`(`accountAssigned !== 1` 且草稿可改);确认文案说明拼音首字母+id、`exp` 角色、仅一次;`assignAccountTechResource` | | 研究方向 | `el-select` `filterable` + `allow-create` | | 课程主题 | `el-select` `filterable`;`listInformationCategoryChildren('005','8')`,`value=code`、`label=name` | --- ## 5. 国际化 | 项 | 说明 | | --- | --- | | **语言包** | `techService.techResource`(`lang/zh/techService.js`、`lang/bo/techService.js`) | | **Mixin** | `techServiceLocaleMixin`,`tsNs = 'techResource'`,方法 `tsT` / `tsCommon` | --- ## 6. 文件清单 | 路径 | 说明 | | --- | --- | | `src/views/techService/techResource/index.vue` | 主页面 | | `src/api/techService/techResource.js` | API | | `src/api/category/informationCategory.js` | 资讯类别 children | | `src/mixins/techServiceLocaleMixin.js` | 文案与 `displayPublishStatusText` | | `src/lang/zh/techService.js` | 汉语 | | `src/lang/bo/techService.js` | 藏语 | --- ## 7. 联调说明 - 列表 `resourceType` 与当前 Tab 一致,否则后端返回「资源类型不能为空」。 - 发布状态筛选参数名为 `publishStatus`,与医疗资源模块一致。 - 地图标点本期不做,页面无相关入口。 --- ## 8. 修订记录 | 版本 | 说明 | | --- | --- | | 1.2 | 专家分配账号:列表「账号分配」列;`canAssignAccount`;确认文案与后端 `exp`/拼音首字母+id 一致 |