feat(xumu): 完善认证材料页面并优化相关功能
- 新增认证材料页面,支持查看和审核用户提交的认证信息- 优化 axios 配置,修复 URL 替换逻辑 - 更新表格操作按钮,根据认证状态显示不同选项 - 重构页面布局组件,增加返回按钮和内容字符串属性
This commit is contained in:
		| @@ -11,7 +11,7 @@ instance.interceptors.request.use(config => { | ||||
|     config.url = "/ns" + config.url | ||||
|   } | ||||
|   if (process.env.VUE_APP_IS_SIMPLE_SERVER == 1) { | ||||
|     config.url = config.url.replace(/\/(app|auth|admin)\//, "/api/") | ||||
|     config.url = config.url.replace(/^\/(app|auth|admin)\//, "/api/") | ||||
|     if (['xumu'].includes(process.env.VUE_APP_SCOPE)) { | ||||
|       config.url = config.url.replace("/api/", "/") | ||||
|     } | ||||
|   | ||||
| @@ -1,13 +1,59 @@ | ||||
| <script> | ||||
| import AiUploader from "dui/packages/basic/AiUploader.vue"; | ||||
|  | ||||
| const certificates = [ | ||||
|   {label: "身份证(正面)", prop: "frontCard"}, | ||||
|   {label: "身份证(反面)", prop: "reverseCard"}, | ||||
|   {label: "营业执照", prop: "businessPic", permit: ["breed"]}, | ||||
|   {label: "畜禽经营许可证", prop: "breedPic", permit: ["breed"]}, | ||||
|   {label: "动物防疫条件许可证", prop: "prevention", permit: ["breed"]}, | ||||
|   {label: "组织机构证明", prop: "orgPic", permit: ["bank", "insurance"]}, | ||||
| ] | ||||
| export default { | ||||
|   name: "authAdd" | ||||
|   name: "authAdd", | ||||
|   components: {AiUploader}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       certificates, | ||||
|       detail: {}, | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     getDetail() { | ||||
|       const {id} = this.$route.query | ||||
|       this.instance.post("/user/auth/page", null, {params: {id}}).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.detail = res.data|| {} | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     getNeedCerts(type) { | ||||
|       return certificates.filter(e => !e.permit || e.permit.includes(type)) | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.getDetail() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|   <section class="authAdd"> | ||||
|   </section> | ||||
|  | ||||
|   <ai-page title="认证材料" class="authAdd" showBack content-string="detail"> | ||||
|     <el-form size="small"> | ||||
|       <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 v-model="detail[op.prop]" :preview-src-list="[detail[op.prop]]"/> | ||||
|           </el-form-item> | ||||
|         </div> | ||||
|       </ai-card> | ||||
|       <ai-card title="审核意见"></ai-card> | ||||
|     </el-form> | ||||
|   </ai-page> | ||||
| </template> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   | ||||
| @@ -1,5 +1,4 @@ | ||||
| <script> | ||||
| import AiUploader from "dui/packages/basic/AiUploader.vue"; | ||||
|  | ||||
| const columns = [ | ||||
|   {label: "序号", type: "index"}, | ||||
| @@ -13,14 +12,13 @@ const columns = [ | ||||
| const certificates = [ | ||||
|   {label: "身份证(正面)", prop: "frontCard"}, | ||||
|   {label: "身份证(反面)", prop: "reverseCard"}, | ||||
|   {label: "营业执照", prop: "businessPic", permit: []}, | ||||
|   {label: "畜禽经营许可证", prop: "breedPic", permit: []}, | ||||
|   {label: "动物防疫条件许可证", prop: "prevention", permit: []}, | ||||
|   {label: "组织机构证明", prop: "orgPic", permit: []}, | ||||
|   {label: "营业执照", prop: "businessPic", permit: ["breed"]}, | ||||
|   {label: "畜禽经营许可证", prop: "breedPic", permit: ["breed"]}, | ||||
|   {label: "动物防疫条件许可证", prop: "prevention", permit: ["breed"]}, | ||||
|   {label: "组织机构证明", prop: "orgPic", permit: ["bank", "insurance"]}, | ||||
| ] | ||||
| export default { | ||||
|   name: "authList", | ||||
|   components: {AiUploader}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
| @@ -42,13 +40,24 @@ export default { | ||||
|         params: {...this.page, ...this.search} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.tableData = res.data?.records | ||||
|           this.tableData = res.data?.records.map(e => ({...e, permit: `${e.authStatus}` + e.auditStatus})) | ||||
|           this.page.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     getNeedCerts(type) { | ||||
|       return certificates.filter(e => !e.permit || e.permit.includes(type)) | ||||
|     }, | ||||
|     handleConfirm() { | ||||
|       this.$refs.form.validate().then(() => { | ||||
|         this.instance.post("/user/auth/update", this.form).then(res => { | ||||
|           if (res?.code == '0' && res?.data != 1) { | ||||
|             this.dialog = false | ||||
|             this.$message.success("提交成功!") | ||||
|             this.getTableData() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
| @@ -74,19 +83,26 @@ export default { | ||||
|       <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> | ||||
|             <el-button type="text" v-if="'12'.includes(row.permit)" | ||||
|                        @click="$router.push({query:{id:row.id},hash:'#add'})">查看 | ||||
|             </el-button> | ||||
|             <el-button class="deleteBtn" type="text" v-if="'11'.includes(row.permit)" | ||||
|                        @click="$router.push({query:{id:row.id},hash:'#add'})">审核 | ||||
|             </el-button> | ||||
|             <el-button type="text" v-if="'00|13'.includes(row.permit)" | ||||
|                        @click="dialog=true,form=row">认证材料 | ||||
|             </el-button> | ||||
|           </div> | ||||
|         </template> | ||||
|       </el-table-column> | ||||
|     </ai-table> | ||||
|     <ai-dialog v-model="dialog" title="认证材料" width="60%" @close="form=[]"> | ||||
|     <ai-dialog v-model="dialog" title="认证材料" width="60%" @close="form=[]" @confirm="handleConfirm"> | ||||
|       <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 class="row" label="备注说明" prop="remark"> | ||||
|           <el-input type="textarea" :rows="2" v-model="form.remark" placeholder="备注说明具体情况"/> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
| @@ -96,5 +112,9 @@ export default { | ||||
| <style scoped lang="scss"> | ||||
| .authList { | ||||
|   height: 100%; | ||||
|  | ||||
|   .deleteBtn { | ||||
|     color: $errorColor; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -11,7 +11,7 @@ instance.defaults.baseURL = baseURLs[process.env.NODE_ENV] | ||||
| instance.interceptors.request.use(config => { | ||||
|   config.timeout = 300000 | ||||
|   if (extra?.isSingleService) { | ||||
|     config.url = config.url.replace(/\/(app|auth|admin)\//, "/api/") | ||||
|     config.url = config.url.replace(/^\/(app|auth|admin)\//, "/api/") | ||||
|   } | ||||
|   if (config.url.startsWith("/node")) { | ||||
|     config.baseURL = "/ns" | ||||
|   | ||||
| @@ -1,11 +1,12 @@ | ||||
| <script> | ||||
| import AiTitle from "dui/packages/basic/AiTitle.vue"; | ||||
| import AiTitle from "../basic/AiTitle.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "AiPage", | ||||
|   components: {AiTitle}, | ||||
|   props: { | ||||
|     contentString: {default: "card"} | ||||
|     contentString: {default: "card"}, | ||||
|     showBack: Boolean | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| @@ -13,7 +14,7 @@ export default { | ||||
| <template> | ||||
|   <section class="AiPage"> | ||||
|     <slot v-if="$slots.title" name="title"/> | ||||
|     <ai-title v-else-if="$attrs.title" :title="$attrs.title" isShowBottomBorder/> | ||||
|     <ai-title v-else-if="$attrs.title" :title="$attrs.title" isShowBottomBorder :isShowBack="showBack" @onBackClick="$router.push({})"/> | ||||
|     <div class="fill main"> | ||||
|       <div v-if="$slots.left" class="left"> | ||||
|         <slot name="left"/> | ||||
| @@ -41,13 +42,21 @@ export default { | ||||
|     gap: 10px; | ||||
|     overflow: hidden; | ||||
|     height: 100%; | ||||
|   } | ||||
|  | ||||
|   .card { | ||||
|     padding: 12px 16px 12px; | ||||
|     background: #FFFFFF; | ||||
|     border-radius: 2px; | ||||
|     box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15); | ||||
|     & > .fill { | ||||
|       &.card { | ||||
|         padding: 12px 16px 12px; | ||||
|         background: #FFFFFF; | ||||
|         border-radius: 2px; | ||||
|         box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15); | ||||
|       } | ||||
|  | ||||
|       &.detail { | ||||
|         margin-left: 50%; | ||||
|         transform: translateX(-50%); | ||||
|         max-width: 1200px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .left { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user