feat(BUG 534 533): 添加身份证远程查询功能
- 在 AppInsuranceAudit 和 AppLoanAudit 组件中集成 AiIdcardRemote 组件 - 实现身份证信息查询和自动填充功能 - 优化用户信息获取逻辑,提高用户体验
This commit is contained in:
		| @@ -1,6 +1,7 @@ | ||||
| <script> | ||||
| import {mapState} from "vuex" | ||||
| import AiEartagPicker from "@project/xumu/components/AiEartagPicker.vue"; | ||||
| import AiIdcardRemote from "@project/xumu/components/AiIdcardRemote.vue"; | ||||
|  | ||||
| const columns = [ | ||||
|   {label: "序号", type: "index"}, | ||||
| @@ -10,7 +11,7 @@ const columns = [ | ||||
| ] | ||||
| export default { | ||||
|   name: "iaAdd", | ||||
|   components: {AiEartagPicker}, | ||||
|   components: {AiIdcardRemote, AiEartagPicker}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     permissions: Function, | ||||
| @@ -47,7 +48,7 @@ export default { | ||||
|     }, | ||||
|     getDetail() { | ||||
|       const {id} = this.$route.query | ||||
|       return id && this.instance.post("/api/insurance/apply/getInfo", null, {params: {id}}).then(res => { | ||||
|       return id ? this.instance.post("/api/insurance/apply/getInfo", null, {params: {id}}).then(res => { | ||||
|         if (res?.data) { | ||||
|           const detail = res.data | ||||
|           detail.detailList = detail.detailList || [] | ||||
| @@ -55,12 +56,13 @@ export default { | ||||
|           picture = JSON.parse(picture) | ||||
|           return this.detail = {...detail, ...picture} | ||||
|         } | ||||
|       }) | ||||
|       }) : Promise.resolve() | ||||
|     }, | ||||
|     getCompanies() { | ||||
|       this.instance.post("/api/insurance/apply/getCompany").then(res => { | ||||
|         if (res?.data) { | ||||
|           this.companyList = res.data | ||||
|           this.$set(this.detail, "companyId", res.data?.[0]?.id) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
| @@ -96,11 +98,19 @@ export default { | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|     getRemoteInfo(userId) { | ||||
|       userId && this.instance.post("/api/siteUser/querySiteByUserId", null, { | ||||
|         params: {userId} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.$set(this.detail, "farmId", res.data?.[0]?.id) | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.getCompanies() | ||||
|     this.getDetail() | ||||
|     this.getDetail().finally(() => this.getCompanies()) | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| @@ -110,12 +120,15 @@ export default { | ||||
|     <el-form size="small" label-width="120px" :model="detail" ref="detail"> | ||||
|       <ai-card title="基础信息"> | ||||
|         <div class="grid"> | ||||
|           <el-form-item label="养殖户" class="row"> | ||||
|             <ai-idcard-remote :instance="instance" @enter="getRemoteInfo"/> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="养殖场" prop="farmId" :rules="{required:isAdd||isEdit,message:'请选择 养殖场'}"> | ||||
|             <ai-select v-if="isAdd||isEdit" v-model="detail.farmId" :instance="instance" :action="`/api/siteUser/querySiteByUserId?userId=${userinfo.id}`" :prop="{label:'name'}"/> | ||||
|             <b v-else v-text="detail.farmName"/> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="承保公司" prop="companyId" :rules="{required:isAdd||isEdit,message:'请选择 承保公司'}"> | ||||
|             <ai-select v-if="isAdd||isEdit" v-model="detail.companyId" :select-list="companyList" :prop="{label:'name'}"/> | ||||
|             <ai-select v-if="isAdd||isEdit" v-model="detail.companyId" :select-list="companyList" :prop="{label:'name'}" readonly/> | ||||
|             <b v-else v-text="detail.companyName"/> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="保险产品" prop="productType" :rules="{required:isAdd||isEdit,message:'请选择 保险产品'}"> | ||||
|   | ||||
| @@ -1,6 +1,7 @@ | ||||
| <script> | ||||
| import {mapState} from "vuex" | ||||
| import AiEartagPicker from "@project/xumu/components/AiEartagPicker.vue"; | ||||
| import AiIdcardRemote from "@project/xumu/components/AiIdcardRemote.vue"; | ||||
|  | ||||
| const records = [ | ||||
|   {label: "序号", type: "index"}, | ||||
| @@ -11,7 +12,7 @@ const records = [ | ||||
| ] | ||||
| export default { | ||||
|   name: "loanAdd", | ||||
|   components: {AiEartagPicker}, | ||||
|   components: {AiIdcardRemote, AiEartagPicker}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     permissions: Function, | ||||
| @@ -56,7 +57,7 @@ export default { | ||||
|     }, | ||||
|     getDetail() { | ||||
|       const {id} = this.$route.query | ||||
|       return id && this.instance.post("/api/loan/apply/getInfo", null, {params: {id}}).then(res => { | ||||
|       return id ? this.instance.post("/api/loan/apply/getInfo", null, {params: {id}}).then(res => { | ||||
|         if (res?.data) { | ||||
|           const detail = res.data | ||||
|           detail.detailList = detail.detailList || [] | ||||
| @@ -64,7 +65,7 @@ export default { | ||||
|           picture = JSON.parse(picture || "{}") | ||||
|           return this.detail = {...detail, ...picture} | ||||
|         } | ||||
|       }) | ||||
|       }) : Promise.resolve() | ||||
|     }, | ||||
|     submit() { | ||||
|       this.$refs.detail.validate().then(() => { | ||||
| @@ -99,6 +100,7 @@ export default { | ||||
|       this.instance.post("/api/loan/apply/getBank").then(res => { | ||||
|         if (res?.data) { | ||||
|           this.bankList = res.data | ||||
|           this.$set(this.detail, "bankId", res.data?.[0]?.id) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
| @@ -106,10 +108,18 @@ export default { | ||||
|       const item = this.bankList.find(e => e.id == id) | ||||
|       return item?.children || [] | ||||
|     }, | ||||
|     getRemoteInfo(userId) { | ||||
|       userId && this.instance.post("/api/siteUser/querySiteByUserId", null, { | ||||
|         params: {userId} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.$set(this.detail, "farmId", res.data?.[0]?.id) | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.getBanks() | ||||
|     this.getDetail() | ||||
|     this.getDetail().finally(() => this.getBanks()) | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| @@ -119,12 +129,15 @@ export default { | ||||
|     <el-form size="small" label-width="120px" :model="detail" ref="detail"> | ||||
|       <ai-card title="基础信息"> | ||||
|         <div class="grid"> | ||||
|           <el-form-item label="养殖户" class="row"> | ||||
|             <ai-idcard-remote :instance="instance" @enter="getRemoteInfo"/> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="养殖场" prop="farmId" :rules="{required: isAdd,message:'请选择 养殖场'}"> | ||||
|             <ai-select v-if="isAdd" v-model="detail.farmId" :instance="instance" :action="`/api/siteUser/querySiteByUserId?userId=${userinfo.id}`" :prop="{label:'name'}"/> | ||||
|             <b v-else v-text="detail.farmName"/> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="贷款银行" prop="bankId" :rules="{required: isAdd,message:'请选择 贷款银行'}"> | ||||
|             <ai-select v-if="isAdd" v-model="detail.bankId" :select-list="bankList" :prop="{label:'name'}"/> | ||||
|             <ai-select v-if="isAdd" v-model="detail.bankId" :select-list="bankList" :prop="{label:'name'}" readonly/> | ||||
|             <b v-else v-text="detail.bankName"/> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="贷款产品" prop="productType" :rules="{required: isAdd,message:'请选择 贷款产品'}"> | ||||
|   | ||||
							
								
								
									
										48
									
								
								project/xumu/components/AiIdcardRemote.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										48
									
								
								project/xumu/components/AiIdcardRemote.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,48 @@ | ||||
| <script> | ||||
|  | ||||
| export default { | ||||
|   name: "AiIdcardRemote", | ||||
|   props: { | ||||
|     instance: Function | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       value: "", | ||||
|       info: {} | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     infoText: v => [v.info.name, v.info.idCard].filter(Boolean)?.join('  ')?.trim() | ||||
|   }, | ||||
|   methods: { | ||||
|     getText(idCard) { | ||||
|       this.info = {} | ||||
|       if (!this.ID.check(idCard)) return this.$message.error("请输入正确的身份证号") | ||||
|       return this.instance.post("/api/user/getUserByIdCard", null, {params: {idCard}}).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.info = res.data | ||||
|           this.$emit('enter', this.info.id) | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <section class="AiIdcardRemote flex"> | ||||
|     <ai-input v-model="value" @keyup.enter.native="getText(value)"/> | ||||
|     <b class="text" v-text="infoText"/> | ||||
|   </section> | ||||
|  | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .AiIdcardRemote { | ||||
|   gap: 8px; | ||||
|  | ||||
|   .AiInput { | ||||
|     min-width: 300px; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user