feat(xumu): 添加认证审核功能

- 新增 AppAuthManage组件作为认证审核的路由组件- 添加 authAdd 和 authList两个子组件分别用于添加认证和认证列表
- 实现了认证列表的展示、搜索和分页功能
- 添加了认证材料的查看和上传功能
- 优化了表单布局,增加了 row 类样式
This commit is contained in:
aixianling
2024-12-18 18:03:35 +08:00
parent a4233d5f2c
commit 0b6bc910c4
4 changed files with 157 additions and 2 deletions

View 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>

View File

@@ -0,0 +1,16 @@
<script>
export default {
name: "authAdd"
}
</script>
<template>
<section class="authAdd">
</section>
</template>
<style scoped lang="scss">
.authAdd {
}
</style>

View 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>

View File

@@ -89,12 +89,15 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
.t-center {
text-align: center;
}
.t-bold{
.t-bold {
font-weight: bold;
}
.t-right{
.t-right {
text-align: right;
}
/**
表头式样
*/
@@ -362,6 +365,10 @@ div[flex], .flex {
grid-template-columns: repeat($i, 1fr);
}
}
.row {
grid-column: 1/-1;
}
}
// 2.0公共样式