西藏巴青项目

牦牛出栏数据填报前端技术方案.md 6.4KB

牦牛出栏数据填报 — 前端技术方案

依据:同目录 牦牛出栏数据填报功能需求.md牦牛出栏数据填报技术方案.md;布局对齐 dataModel/yakHerdInventory/index.vue(双 el-card + 分页表格);字段 小驼峰


1. 页面与路由

说明
Vue 路径 ruoyi-ui/src/views/dataModel/yakOutboundReport/index.vue
组件名 YakOutboundReport
菜单配置 组件路径:dataModel/yakOutboundReport/index(「产业数据模型及服务」目录下)
权限前缀 dataModel:yakOutboundReport:list\|query\|add\|edit\|remove\|import\|export

2. API 模块

说明
文件 ruoyi-ui/src/api/dataModel/yakOutboundReport.js
Base /dataModel/yakOutboundReport
方法 HTTP 说明
listYakOutboundReport GET /list 分页列表
getYakOutboundReport GET /{id} 详情
addYakOutboundReport POST / 新增
updateYakOutboundReport PUT / 修改
delYakOutboundReport DELETE /{ids} 删除
listYakOutboundReportYearOptions GET /yearOptions 可选年份
listYakOutboundReportMonthOptions GET /monthOptions 可选月份(1~12)
listYakOutboundReportTownOptions GET /townOptions 乡镇下拉
importYakOutboundReport POST /importDatamultipart/form-datafile + statYear + statMonth
downloadYakOutboundReportTemplate GET /importTemplate 空白模板(responseType: 'blob'
exportYakOutboundReport GET /export?statYear=&statMonth= 按年月导出(responseType: 'blob'

模板下载、按年月导出均使用 GET + responseType: 'blob',勿用若依全局 this.download()(固定 POST)。


3. 页面结构

  1. 筛选区:所属年份、所属月份、所属乡镇(均可清空);搜索重置新增导入导出
  2. 列表区:所属年份、所属月份、所属乡镇、农牧户户数、农牧户人数、牦牛出栏数、自食情况(牛);空值展示
  3. 操作列:查看、修改、删除。
  4. 新增/编辑弹窗:年份、月份、乡镇必填;出栏及自食指标选填,el-input-number:min="0" :precision="0");备注选填;新增时默认当前年月。表单分四块:基本信息、农牧户情况、出栏情况、自食情况。
  5. 查看弹窗:只读展示需求 §5.5 七字段(年份、月份、乡镇、农牧户户数、农牧户人数、牦牛出栏数、自食牛头数);可跳转编辑。
  6. 导入弹窗:选「填报年份」「填报月份」(默认当前年月)→ 上传 .xlsx → 展示 insert/update/fail 及 fail/warn 明细。
  7. 导出弹窗:选「所属年份」「所属月份」(默认当前年月)→ GET /export 下载 {年}年{月}月牦牛出栏数据.xlsx

4. 业务规则(前端)

规则 实现
年份范围 /yearOptions 动态加载(当前年起向前 5 年,共 6 年)
月份范围 页面 monthOptions 固定 1~12;展示 {month}月(i18n statMonthLabel
乡镇下拉 /townOptions 返回 deptId / deptName
列表筛选 statYearstatMonthtownDeptId 精确匹配;进入页面不默认年月
重置 清空年份、月份、乡镇后重新查询
数量字段 选填;填写时须为 ≥ 0 的整数
单位后缀 户、人、头、只、匹(见 i18n unit*
唯一性 同年同月同乡镇重复新增由后端拦截,前端展示 msg
导入 FormDatastatYearstatMonth;全局 loading;成功后 $alert 展示摘要与明细
导出 弹框选年月;年月须在合法范围内
删除 $modal.confirmdelYakOutboundReport(id),物理删除

5. 字段映射(表单 / 接口 Body)

前端 prop 说明 单位
statYear 所属年份
statMonth 所属月份(1~12)
townDeptId 所属乡镇
farmerHouseholdCount 农牧户户数
farmerPopulationCount 农牧户人数
yakOutboundCount 牦牛出栏数
cattleOutboundCount 黄牛/奶牛/犏牛出栏数
sheepOutboundCount 绵羊出栏数
goatOutboundCount 山羊出栏数
horseMuleOutboundCount 马骡出栏数
donkeyOutboundCount 驴出栏数
selfConsumptionCattleCount 自食牛头数
selfConsumptionSheepCount 自食绵羊只数
selfConsumptionGoatCount 自食山羊只数
remark 备注

6. 国际化

说明
语言包 dataModel.yakOutboundReportdataModel.common
文件 lang/zh/dataModel.jslang/bo/dataModel.js
Mixin dataModelLocaleMixindmNs = 'yakOutboundReport'dmT / dmCommon
注册 已随 dataModel 模块在 lang/zh-CN.jslang/bo.js 引入
月份文案 queryStatMonthcolStatMonthformStatMonthimportStatMonthexportStatMonthstatMonthLabel

7. 联调说明

  1. 部署后端 BizYakOutboundReportControllerbiz_yak_outbound_report 表(含 stat_month)。
  2. 已有库自 v1.1 按年表升级时执行迁移 SQL(历史 stat_month 默认 12)。
  3. 菜单组件 dataModel/yakOutboundReport/index,权限与后端 §5 一致。
  4. 验证:年月/乡镇筛选、CRUD、导入模板下载、导入结果反馈、按年月导出、双语切换。
  5. 导入联调:选填报年月 → 上传 牲畜数据.xlsx 第 6 Sheet 格式文件;对照 failMessages / warnMessages

8. 文件清单

类型 路径
页面 ruoyi-ui/src/views/dataModel/yakOutboundReport/index.vue
API ruoyi-ui/src/api/dataModel/yakOutboundReport.js
Mixin ruoyi-ui/src/mixins/dataModelLocaleMixin.js
i18n ruoyi-ui/src/lang/zh/dataModel.jslang/bo/dataModel.js

9. 修订记录

版本 说明
1.0 初版:列表/CRUD/详情/导入/模板下载/按年导出;汉藏 i18n;对齐功能需求 v1.1
1.1 按年月填报:列表月份列与筛选;导入/导出/新增默认当前年月;列表不默认年月;/monthOptions;导出文件名含月份