feat(xumu): 添加认证审核功能
- 新增 AppAuthManage组件作为认证审核的路由组件- 添加 authAdd 和 authList两个子组件分别用于添加认证和认证列表 - 实现了认证列表的展示、搜索和分页功能 - 添加了认证材料的查看和上传功能 - 优化了表单布局,增加了 row 类样式
This commit is contained in:
		
							
								
								
									
										32
									
								
								project/xumu/AppAuthManage/AppAuthManage.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								project/xumu/AppAuthManage/AppAuthManage.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,32 @@ | ||||
| <script> | ||||
| import authAdd from "./authAdd.vue"; | ||||
| import authList from "./authList.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppAuthManage", | ||||
|   label: "认证审核", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     currentPage() { | ||||
|       let {hash} = this.$route | ||||
|       return hash == "#add" ? authAdd : authList | ||||
|     } | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <section class="AppAuthManage"> | ||||
|     <component :is="currentPage" v-bind="$props"/> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .AppAuthManage { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										16
									
								
								project/xumu/AppAuthManage/authAdd.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										16
									
								
								project/xumu/AppAuthManage/authAdd.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,16 @@ | ||||
| <script> | ||||
| export default { | ||||
|   name: "authAdd" | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <section class="authAdd"> | ||||
|   </section> | ||||
|  | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .authAdd { | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										100
									
								
								project/xumu/AppAuthManage/authList.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										100
									
								
								project/xumu/AppAuthManage/authList.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,100 @@ | ||||
| <script> | ||||
| import AiUploader from "dui/packages/basic/AiUploader.vue"; | ||||
|  | ||||
| const columns = [ | ||||
|   {label: "序号", type: "index"}, | ||||
|   {label: "账号", prop: "userName"}, | ||||
|   {label: "姓名", prop: "name"}, | ||||
|   {label: "角色", prop: "roleName"}, | ||||
|   {label: "所属端", prop: "type", dict: "roleType", width: 120, align: 'center'}, | ||||
|   {label: "状态", prop: "authStatus", dict: "authStatus", width: 120, align: 'center'}, | ||||
|   {label: "审核状态", prop: "auditStatus", dict: "auditStatus", width: 120, align: 'center'}, | ||||
| ] | ||||
| const certificates = [ | ||||
|   {label: "身份证(正面)", prop: "frontCard"}, | ||||
|   {label: "身份证(反面)", prop: "reverseCard"}, | ||||
|   {label: "营业执照", prop: "businessPic", permit: []}, | ||||
|   {label: "畜禽经营许可证", prop: "breedPic", permit: []}, | ||||
|   {label: "动物防疫条件许可证", prop: "prevention", permit: []}, | ||||
|   {label: "组织机构证明", prop: "orgPic", permit: []}, | ||||
| ] | ||||
| export default { | ||||
|   name: "authList", | ||||
|   components: {AiUploader}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       columns, | ||||
|       tableData: [], | ||||
|       page: {pageNum: 1, pageSize: 10, total: 0}, | ||||
|       search: {name: ""}, | ||||
|       dialog: false, | ||||
|       form: {} | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     getTableData() { | ||||
|       this.instance.post("/user/auth/page", null, { | ||||
|         params: {...this.page, ...this.search} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.tableData = res.data?.records | ||||
|           this.page.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     getNeedCerts(type) { | ||||
|       return certificates.filter(e => !e.permit || e.permit.includes(type)) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.dict.load("roleType", "authStatus", "auditStatus") | ||||
|     this.getTableData() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <ai-page class="authList" title="认证审核"> | ||||
|     <ai-search-bar> | ||||
|       <template #left> | ||||
|         <el-button type="primary" icon="iconfont iconAdd" @click="$router.push({hash:'#add'})">添加</el-button> | ||||
|       </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-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" @click="dialog=true,form=row">查看</el-button> | ||||
|             <el-button type="text" @click="$router.push({query:{id:row.id},hash:'#add'})">认证材料</el-button> | ||||
|           </div> | ||||
|         </template> | ||||
|       </el-table-column> | ||||
|     </ai-table> | ||||
|     <ai-dialog v-model="dialog" title="认证材料" width="60%" @close="form=[]"> | ||||
|       <el-form class="grid c-3" :model="form" ref="form" label-width="160px"> | ||||
|         <el-form-item v-for="(op,i) in getNeedCerts(form.type)" :key="i" v-bind="op" :rules="{required:true,message:`请上传${op.label}`,trigger:'change'}"> | ||||
|           <ai-uploader v-model="form[op.prop]" valueIsUrl :limit="1"/> | ||||
|         </el-form-item> | ||||
|         <el-form-item class="row" label="备注说明" prop="orgPic" :rules="{required:true,message:'请上传身份证(正面)',trigger:'change'}"> | ||||
|           <el-input type="textarea" :rows="3" v-model="form.remark"/> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
|   </ai-page> | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .authList { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user