379 lines
14 KiB
Vue
379 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="date"
|
||
label="图片"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-image v-if="scope.row.license_original_img" :src="scope.row.license_original_img "
|
||
style="width: 80px; height: 60px;border: 1px solid #ccc;border-radius: 6px;"
|
||
:preview-src-list="[scope.row.license_original_img]"
|
||
fit="cover" :initial-index="0" preview-teleported :z-index="3000">
|
||
</el-image>
|
||
<span v-else>/</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="contact_name"
|
||
label="联系人"
|
||
min-width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="mobile_phone"
|
||
label="联系电话"
|
||
min-width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="email"
|
||
label="邮箱"
|
||
min-width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="telephone"
|
||
label="公共电话"
|
||
min-width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="audit_status"
|
||
label="审核状态"
|
||
min-width="180">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="getStatusType(scope.row.audit_status)">
|
||
{{ getStatusText(scope.row.audit_status) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column
|
||
prop="address"
|
||
label="操作"
|
||
fixed="right"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="handleAudit(scope.row)" size="small">审核</el-button>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 预览对话框 -->
|
||
<el-dialog title="审批信息预览" :visible.sync="previewVisible" top="3vh" width="60%"
|
||
:before-close="handlePreviewClose">
|
||
<div class="preview-content">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="账号类型">
|
||
{{ getAccountTypeText(approveForm.account_type) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="公司名称">
|
||
{{ approveForm.company_name }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="执照号码">
|
||
{{ approveForm.license_number }}
|
||
</el-descriptions-item>
|
||
<!-- <el-descriptions-item label="审核状态1">
|
||
<el-tag :type="getStatusType(approveForm.audit_status)">
|
||
{{ getStatusText(approveForm.audit_status) }}
|
||
</el-tag>
|
||
</el-descriptions-item> -->
|
||
<el-descriptions-item label="办公地址">
|
||
{{ approveForm.office_address }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="注册地址">
|
||
{{ approveForm.registered_address }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="联系人">
|
||
{{ approveForm.contact_name }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="联系电话">
|
||
{{ approveForm.mobile_phone }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="邮箱地址">
|
||
{{ approveForm.email }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<div class="preview-images">
|
||
<div class="preview-image" >
|
||
<h4>营业执照正本</h4>
|
||
<el-image :src="approveForm.license_original_img "
|
||
class="preview-license-img"
|
||
|
||
:preview-src-list="[approveForm.license_original_img]"
|
||
fit="cover" :initial-index="0" preview-teleported :z-index="3000">
|
||
</el-image>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button size="mini" @click="previewVisible = false">关 闭</el-button>
|
||
<el-button size="mini" type="danger" @click="handleReject">审核不通过</el-button>
|
||
<el-button size="mini" type="success" @click="handleApprove">审核通过</el-button>
|
||
|
||
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 驳回理由输入弹窗 -->
|
||
<el-dialog title="审核退回" :visible.sync="rejectDialogVisible" width="40%" @close="handleRejectDialogClose">
|
||
<el-form :model="rejectForm" :rules="rejectRules" ref="rejectForm">
|
||
<el-form-item label="驳回原因" prop="reject_reason" :label-width="formLabelWidth">
|
||
<el-input
|
||
v-model="rejectForm.reject_reason"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请输入驳回原因"
|
||
maxlength="500"
|
||
show-word-limit>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="rejectDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="confirmReject" :loading="rejectLoading">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { reqEnterpriseUpdate,reqApproveUserSearch } from '@/api/ncmatch';
|
||
export default {
|
||
name: 'qualificationBox',
|
||
data() {
|
||
return {
|
||
current_page:1,
|
||
page_size:10,
|
||
total:0,
|
||
approveForm:{},
|
||
previewVisible: false,
|
||
rejectDialogVisible: false,
|
||
rejectLoading: false,
|
||
formLabelWidth: '120px',
|
||
rejectForm: {
|
||
reject_reason: ''
|
||
},
|
||
rejectRules: {
|
||
reject_reason: [
|
||
{ required: true, message: '请输入驳回原因', trigger: 'blur' },
|
||
{ min: 5, max: 500, message: '驳回原因长度在 5 到 500 个字符', trigger: 'blur' }
|
||
]
|
||
},
|
||
tableData: []
|
||
}
|
||
},
|
||
props:{
|
||
approveInfo:{
|
||
type:Object,
|
||
default:()=>{}
|
||
}
|
||
},
|
||
created(){
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
initData(){
|
||
let ploay = {
|
||
current_page:this.current_page,
|
||
page_size:this.page_size,
|
||
audit_status:this.approveInfo.audit_status,
|
||
url_link:window.location.href,
|
||
}
|
||
reqApproveUserSearch(ploay).then(res=>{
|
||
if(res.status){
|
||
this.tableData = res.data
|
||
this.total = res.data.total_count
|
||
this.tableData = res.data.data
|
||
}else{
|
||
this.$message.error(res.msg || '加载失败，请重试');
|
||
}
|
||
})
|
||
|
||
},
|
||
handleAudit(row) {
|
||
console.log(row)
|
||
this.previewVisible = true
|
||
this.approveForm = row
|
||
},
|
||
// 审核通过
|
||
handleApprove() {
|
||
this.$confirm('确认审核通过该资格申请吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.approveQualification();
|
||
}).catch(() => {
|
||
this.$message.info('已取消操作');
|
||
});
|
||
},
|
||
// 审核不通过
|
||
handleReject() {
|
||
this.rejectDialogVisible = true;
|
||
// 回显已有的驳回理由，如果没有则显示空字符串
|
||
this.rejectForm.reject_reason = this.approveForm.reject_reason || '';
|
||
// 重置表单验证
|
||
this.$nextTick(() => {
|
||
if (this.$refs.rejectForm) {
|
||
this.$refs.rejectForm.clearValidate();
|
||
}
|
||
});
|
||
},
|
||
// 确认驳回
|
||
confirmReject() {
|
||
this.$refs.rejectForm.validate((valid) => {
|
||
if (valid) {
|
||
this.rejectQualification();
|
||
}
|
||
});
|
||
},
|
||
// 执行审核通过
|
||
approveQualification() {
|
||
// 这里调用审核通过的API
|
||
const params = {
|
||
id: this.approveForm.id,
|
||
audit_status: 'approved'
|
||
};
|
||
console.log("审核通过",params)
|
||
reqEnterpriseUpdate(params).then(res=>{
|
||
if(res.status){
|
||
this.$message.success('审核通过成功');
|
||
this.initData()
|
||
this.previewVisible = false;
|
||
this.refreshTable();
|
||
this.initData();
|
||
}else{
|
||
this.$message.error(res.msg || '审核失败，请重试');
|
||
}
|
||
}).catch(err=>{
|
||
this.$message.error('审核失败，请重试');
|
||
})
|
||
// 模拟API调用，实际使用时替换为真实的API
|
||
|
||
|
||
// 实际API调用示例：
|
||
// this.$api.qualification.approve(params).then(res => {
|
||
// if (res.status) {
|
||
// this.$message.success('审核通过成功');
|
||
// this.previewVisible = false;
|
||
// this.refreshTable();
|
||
// } else {
|
||
// this.$message.error(res.msg || '审核失败，请重试');
|
||
// }
|
||
// }).catch(err => {
|
||
// this.$message.error('审核失败，请重试');
|
||
// });
|
||
},
|
||
// 执行审核驳回
|
||
rejectQualification() {
|
||
this.rejectLoading = true;
|
||
|
||
const params = {
|
||
id: this.approveForm.id,
|
||
audit_status: 'rejected',
|
||
reject_reason: this.rejectForm.reject_reason
|
||
};
|
||
console.log("审核驳回",params)
|
||
reqEnterpriseUpdate(params).then(res=>{
|
||
if(res.status){
|
||
this.rejectLoading = false;
|
||
this.$message.success('审核驳回成功');
|
||
this.rejectDialogVisible = false;
|
||
this.previewVisible = false;
|
||
this.initData();
|
||
}else{
|
||
this.$message.error(res.msg || '审核失败，请重试');
|
||
}
|
||
}).catch(err=>{
|
||
this.$message.error('审核失败，请重试');
|
||
})
|
||
|
||
// 实际API调用示例：
|
||
// this.$api.qualification.reject(params).then(res => {
|
||
// this.rejectLoading = false;
|
||
// if (res.status) {
|
||
// this.$message.success('审核驳回成功');
|
||
// this.rejectDialogVisible = false;
|
||
// this.previewVisible = false;
|
||
// this.refreshTable();
|
||
// } else {
|
||
// this.$message.error(res.msg || '审核失败，请重试');
|
||
// }
|
||
// }).catch(err => {
|
||
// this.rejectLoading = false;
|
||
// this.$message.error('审核失败，请重试');
|
||
// });
|
||
},
|
||
// 刷新表格数据
|
||
refreshTable() {
|
||
// 这里添加刷新表格的逻辑
|
||
console.log('刷新表格数据');
|
||
},
|
||
// 驳回弹窗关闭处理
|
||
handleRejectDialogClose() {
|
||
this.rejectDialogVisible = false;
|
||
this.rejectForm.reject_reason = '';
|
||
// 重置表单验证
|
||
this.$nextTick(() => {
|
||
if (this.$refs.rejectForm) {
|
||
this.$refs.rejectForm.clearValidate();
|
||
}
|
||
});
|
||
},
|
||
// 关闭预览弹窗
|
||
handlePreviewClose() {
|
||
this.previewVisible = false;
|
||
},
|
||
// 获取账号类型文本
|
||
getAccountTypeText(type) {
|
||
const typeMap = {
|
||
'enterprise': '企业账号',
|
||
'personal': '个人账号',
|
||
'government': '政府机构'
|
||
};
|
||
return typeMap[type] || '未知';
|
||
},
|
||
|
||
// 获取状态类型
|
||
getStatusType(status) {
|
||
const statusMap = {
|
||
'pending': 'warning',
|
||
'approved': 'success',
|
||
'rejected': 'danger',
|
||
'processing': 'info'
|
||
};
|
||
return statusMap[status] || 'info';
|
||
},
|
||
|
||
// 获取状态文本
|
||
getStatusText(status) {
|
||
const statusMap = {
|
||
'pending': '待审核',
|
||
'approved': '已通过',
|
||
'rejected': '已拒绝',
|
||
'processing': '审核中'
|
||
};
|
||
return statusMap[status] || '未知';
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
.preview-license-img{
|
||
width: 300px;
|
||
height: 200px;
|
||
border-radius: 16px;
|
||
border: 1px solid #ccc;
|
||
transition: transform 0.3s ease;
|
||
&:hover{
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-3px);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
}
|
||
</style> |