feat(xumu): 新增耳标 组件作为耳标登记的主登记功能
- 添加 AppEarTag入口 - 实现 etAdd组件用于耳标添加和编辑- 创建 etList 组件用于显示耳标列表 - 集成搜索栏、表格和分页组件 - 添加用户认证状态和耳标信息的获取及展示- 实现耳标添加、编辑
This commit is contained in:
		
							
								
								
									
										36
									
								
								project/xumu/AppEarTag/AppEarTag.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										36
									
								
								project/xumu/AppEarTag/AppEarTag.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,36 @@ | ||||
| <script> | ||||
| import add from "./etAdd.vue"; | ||||
| import list from "./etList.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppEarTag", | ||||
|   label: "耳标登记", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     currentPage() { | ||||
|       let {hash} = this.$route | ||||
|       return hash == "#add" ? add : list | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <section class="AppEarTag"> | ||||
|     <component :is="currentPage" v-bind="$props"/> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .AppEarTag { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										85
									
								
								project/xumu/AppEarTag/etAdd.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										85
									
								
								project/xumu/AppEarTag/etAdd.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,85 @@ | ||||
| <script> | ||||
|  | ||||
| export default { | ||||
|   name: "etAdd", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     permissions: Function, | ||||
|     dict: Object | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       detail: {}, | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     isAuditing: v => v.detail.auditStatus == 1 | ||||
|   }, | ||||
|   methods: { | ||||
|     back(params = {}) { | ||||
|       this.$router.push(params) | ||||
|     }, | ||||
|     getDetail() { | ||||
|       const {id} = this.$route.query | ||||
|       this.instance.post("/api/user/auth/page", null, {params: {id}}).then(res => { | ||||
|         if (res?.data?.records) { | ||||
|           const detail = res.data.records[0] || {} | ||||
|           let {picture = "{}"} = detail | ||||
|           picture = JSON.parse(picture) | ||||
|           this.detail = {...detail, ...picture} | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     getNeedCerts(type) { | ||||
|       return this.$parent.certificates.filter(e => !e.permit || e.permit.includes(type)) | ||||
|     }, | ||||
|     handleAudit(auditStatus) { | ||||
|       const auditLabels = { | ||||
|         2: "同意通过", 3: "驳回" | ||||
|       } | ||||
|       this.$confirm(`是否要${auditLabels[auditStatus]}认证?`).then(() => { | ||||
|         this.instance.post("/api/user/audit", null, {params:{ | ||||
|             id: this.detail.id, auditStatus | ||||
|           }}).then(res => { | ||||
|           if (res?.code == 0) { | ||||
|             this.$confirm("是否要返回列表?","提交成功").then(() => this.back()) | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.dict.load("auditStatus") | ||||
|     this.getDetail() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <ai-page title="认证材料" class="etAdd" showBack content-string="detail"> | ||||
|     <el-form size="small" label-position="top" :model="detail" ref="detail"> | ||||
|       <ai-card title="认证材料"> | ||||
|         <div class="grid"> | ||||
|           <el-form-item v-for="(op,i) in getNeedCerts(detail.type)" :key="i" v-bind="op" :rules="{required:true,message:`请上传${op.label}`,trigger:'change'}"> | ||||
|             <el-image :src="detail[op.prop]" :preview-src-list="[detail[op.prop]]"/> | ||||
|           </el-form-item> | ||||
|         </div> | ||||
|       </ai-card> | ||||
|       <ai-card title="备注说明"> | ||||
|         <div v-text="detail.remark"/> | ||||
|       </ai-card> | ||||
|     </el-form> | ||||
|     <div slot="footer"> | ||||
|       <template v-if="isAuditing"> | ||||
|         <el-button type="primary" @click="handleAudit(2)">同意</el-button> | ||||
|         <el-button type="danger" @click="handleAudit(3)">拒绝</el-button> | ||||
|       </template> | ||||
|       <el-button @click="back">关闭</el-button> | ||||
|     </div> | ||||
|   </ai-page> | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .etAdd { | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										112
									
								
								project/xumu/AppEarTag/etList.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										112
									
								
								project/xumu/AppEarTag/etList.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,112 @@ | ||||
| <script> | ||||
| import AiSearchBar from "dui/packages/layout/AiSearchBar.vue"; | ||||
|  | ||||
| const columns = [ | ||||
|   {label: "序号", type: "index"}, | ||||
|   {label: "养殖场", prop: "userName", format: (v, row) => `${[row.farmName, row.houseName, row.penName].join("-")}`}, | ||||
|   {label: "生物芯片耳标号", prop: "biochipEarNumber"}, | ||||
|   {label: "登记时间", prop: "createTime"}, | ||||
|   {label: "日龄/天", prop: "age", width: 120, align: 'right'}, | ||||
|   {label: "登记体重", prop: "weight", width: 120, align: 'right'}, | ||||
|   {label: "戴标员", prop: "userName", width: 120, align: 'center'}, | ||||
| ] | ||||
| export default { | ||||
|   name: "etList", | ||||
|   components: {AiSearchBar}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       columns, | ||||
|       tableData: [], | ||||
|       page: {pageNum: 1, pageSize: 10, total: 0}, | ||||
|       search: {}, | ||||
|       dialog: false, | ||||
|       form: {} | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     getTableData() { | ||||
|       this.instance.post("/api/breed/earTag/page", {...this.page, ...this.search}).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.tableData = res.data?.records | ||||
|           this.page.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handleDelete(id) { | ||||
|       this.$confirm("确定删除该条数据?").then(() => { | ||||
|         this.instance.delete("/api/breed/earTag/del", null, {params: {id}}).then(res => { | ||||
|           if (res?.code == '0' && res?.data != 1) { | ||||
|             this.$message.success("删除成功") | ||||
|             this.getTableData() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.dict.load("auditStatus") | ||||
|     this.getTableData() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <ai-page class="etList" title="耳标登记"> | ||||
|     <ai-search-bar> | ||||
|       <template #left> | ||||
|         <ai-select placeholder="所属机构" v-model="search.userId" dict="authStatus"/> | ||||
|         <ai-select placeholder="养殖场" v-model="search.farmId" dict="authStatus"/> | ||||
|         <ai-select placeholder="养殖舍" v-model="search.houseId" dict="authStatus"/> | ||||
|         <ai-select placeholder="养殖栏" v-model="search.penId" dict="authStatus"/> | ||||
|         <el-input placeholder="戴标员" v-model="search.userName" dict="authStatus" size="small" clearable/> | ||||
|         <el-input placeholder="生物芯片耳标号" v-model="search.biochipEarNumber" dict="authStatus" size="small" clearable/> | ||||
|         <ai-select placeholder="类别" v-model="search.category" dict="authStatus"/> | ||||
|         <ai-select placeholder="品种" v-model="search.variety" dict="authStatus"/> | ||||
|         <ai-search label="登记日期"> | ||||
|           <el-date-picker v-model="search.beginDate" type="datetime" placeholder="开始日期" size="small"/> | ||||
|           <el-date-picker v-model="search.endDate" type="datetime" placeholder="结束日期" size="small"/> | ||||
|         </ai-search> | ||||
|         <ai-search label="日龄"> | ||||
|           <el-input placeholder="最小日龄" v-model="search.beginAge" size="small" clearable/> | ||||
|           <el-input placeholder="最大日龄" v-model="search.endAge" size="small" clearable/> | ||||
|         </ai-search> | ||||
|       </template> | ||||
|       <template #right> | ||||
|         <el-input size="small" placeholder="搜索账号" v-model="search.name" clearable | ||||
|                   @change="page.pageNum=1, getTableData()" @getList="getTableData"/> | ||||
|       </template> | ||||
|     </ai-search-bar> | ||||
|     <ai-search-bar> | ||||
|       <template #left> | ||||
|         <el-button type="primary" icon="iconfont iconAdd" @clicl="$router.push({hash:'#add'})">新增</el-button> | ||||
|       </template> | ||||
|     </ai-search-bar> | ||||
|     <ai-table :tableData="tableData" :colConfigs="columns" :dict="dict" @getList="getTableData" | ||||
|               :total="page.total" :current.sync="page.pageNum" :size.sync="page.pageSize"> | ||||
|       <el-table-column slot="options" label="操作" fixed="right" align="center"> | ||||
|         <template slot-scope="{row}"> | ||||
|           <div class="table-options"> | ||||
|             <el-button type="text">查看</el-button> | ||||
|             <el-button type="text">编辑</el-button> | ||||
|             <el-button type="text" class="deleteBtn" @click="handleDelete(row.id)">删除</el-button> | ||||
|           </div> | ||||
|         </template> | ||||
|       </el-table-column> | ||||
|     </ai-table> | ||||
|   </ai-page> | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .etList { | ||||
|   height: 100%; | ||||
|  | ||||
|   .deleteBtn { | ||||
|     color: $errorColor; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user