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