西藏巴青项目

检疫站管理前端技术方案.md 3.6KB

检疫站管理 — 前端技术方案

依据:检疫站管理功能需求.md检疫站管理技术方案.md;布局对齐 dataModel/pasture/index.vue 照片上传与 tradeMarket/marketStall/index.vueel-card 结构;字段 小驼峰


1. 页面与路由

说明
Vue 路径 ruoyi-ui/src/views/livestock/quarantineStation/index.vue
组件名 LivestockQuarantineStation
菜单配置 组件路径:livestock/quarantineStation/index(「畜牧流通资源管理」目录下,手工配置)
权限前缀 livestock:quarantineStation:list\|query\|add\|edit\|remove

2. API 模块

说明
文件 ruoyi-ui/src/api/livestock/quarantineStation.js
Base /livestock/quarantineStation
方法 HTTP URI
listQuarantineStation GET /list
getQuarantineStation GET /{id}
addQuarantineStation POST /
updateQuarantineStation PUT /
delQuarantineStation DELETE /{ids}

3. 页面结构

  1. 筛选区:检疫站名称(模糊 stationName)、运营状态(精确 operateStatus);搜索、重置、新增(批量删除、导出、地图标点)。
  2. 列表区:名称、详细地址、负责人、联系方式(脱敏)、运营状态、操作(查看/编辑/删除)。
  3. 新增/编辑弹窗:名称 1~10、地址 textarea 1~200、负责人 1~10、手机号、运营状态(默认 1 正常)、单图上传。
  4. 查看弹窗:全部字段只读、照片 el-image 预览、审计信息;可跳转编辑/删除。

4. 业务规则(前端)

规则 实现
名称/地址/负责人 trim 后校验长度;提交 payload 为去空白字符串
手机号 PHONE_REG^1[3-9]\d{9}$
运营状态 operateStatus1 正常 2 停业 3 注销;新增默认 1
照片 POST /common/uploadjpg/jpeg/png、≤10MB、单张;字段 photoFileUrl / photoFilePath
列表筛选 queryParams.stationNameoperateStatus 原样提交
名称唯一 / 关联删除 由后端返回错误信息,前端不重复实现
地图标点 不实现(需求 §5.6)

5. 国际化

说明
语言包 livestock.quarantineStationlang/zh/livestock.jslang/bo/livestock.js
Mixin livestockLocaleMixinlsNs = 'quarantineStation'
公共文案 livestock.common.*livestock.status.dash
入口注册 lang/zh-CN.jslang/bo.js 增加 livestock 模块

6. 联调说明

  1. 部署 QuarantineStationControllerbiz_quarantine_station 表(见后端技术方案)。
  2. 菜单组件路径 livestock/quarantineStation/index,权限与后端 livestock:quarantineStation:* 一致。
  3. 验证:CRUD、名称模糊与状态精确筛选、照片上传回显、列表手机号脱敏、详情不含地图入口。

7. 文件清单

类型 路径
页面 ruoyi-ui/src/views/livestock/quarantineStation/index.vue
API ruoyi-ui/src/api/livestock/quarantineStation.js
Mixin ruoyi-ui/src/mixins/livestockLocaleMixin.js
i18n ruoyi-ui/src/lang/zh/livestock.jslang/bo/livestock.js
文档 doc/畜牧流通资源管理/检疫站管理/检疫站管理前端技术方案.md

8. 修订记录

版本 说明
1.0 初版:双卡片 CRUD;对齐牧场照片上传;小驼峰字段;不含地图标点