<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="900px"
|
:withFooter="false"
|
>
|
<div class="driver-approval">
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">司机信息</span>
|
<el-tag type="success" v-if="detailInfo.auditStatus">已授权手机号</el-tag>
|
<el-tag type="warning" v-else>未授权手机号</el-tag>
|
<div class="approval-status">
|
<el-tag v-if="detailInfo.auditStatus === 0" type="warning" class="status-tag">待审核</el-tag>
|
<el-tag v-else-if="detailInfo.auditStatus === 1" type="success" class="status-tag">审批通过</el-tag>
|
<el-tag v-else-if="detailInfo.auditStatus === 2" type="danger" class="status-tag">审批驳回</el-tag>
|
</div>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">司机姓名：</span>
|
<span class="value">{{ detailInfo.name || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">授权手机号：</span>
|
<span class="value">{{ detailInfo.telephone || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">身份证号：</span>
|
<span class="value">{{ detailInfo.idcard || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">婚姻情况：</span>
|
<span class="value" v-if="detailInfo.maritalStatus === 3">丧偶</span>
|
<span class="value" v-else-if="detailInfo.maritalStatus === 2">离异</span>
|
<span class="value" v-else-if="detailInfo.maritalStatus === 1">已婚</span>
|
<span class="value" v-else-if="detailInfo.maritalStatus === 0">未婚</span>
|
<span class="value" v-else>-</span>
|
</div>
|
<div class="info-item">
|
<span class="label">性别：</span>
|
<span class="value">{{ detailInfo.gender === 1 ? '男' : detailInfo.gender === 2 ? '女' : '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">现居住地址：</span>
|
<span class="value">{{ detailInfo.livePlace || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">评级：</span>
|
<span class="value">{{ detailInfo.driverLevel || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">状态：</span>
|
<span class="value">{{ detailInfo.status === 0 ? '启用' : '禁用' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">车辆信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">车牌号：</span>
|
<span class="value">{{ detailInfo.carCode || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">车辆类型：</span>
|
<span class="value">{{ detailInfo.carTypeName || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">车辆颜色：</span>
|
<span class="value">{{ detailInfo.carColor || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">驾驶证有效期：</span>
|
<span class="value">{{ detailInfo.cardStartDate || '-' }} 至 {{ detailInfo.cardEndDate || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">附件材料</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">身份证正面：</span>
|
<el-image
|
v-if="detailInfo.idcardImg"
|
style="width: 80px; height: 80px"
|
:src="detailInfo.imgPrefix + detailInfo.idcardImg"
|
:preview-src-list="[detailInfo.imgPrefix + detailInfo.idcardImg]"
|
fit="cover"
|
></el-image>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item">
|
<span class="label">身份证反面：</span>
|
<el-image
|
v-if="detailInfo.idcardImgBack"
|
style="width: 80px; height: 80px"
|
:src="detailInfo.imgPrefix + detailInfo.idcardImgBack"
|
:preview-src-list="[detailInfo.imgPrefix + detailInfo.idcardImgBack]"
|
fit="cover"
|
></el-image>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">车辆照片：</span>
|
<span v-if="!detailInfo.carImgList">-</span>
|
<div v-else class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.carImgList"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img.fileurlFull"
|
:preview-src-list="detailInfo.carImgList.map(item => item.fileurlFull)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">驾驶证照片：</span>
|
<span v-if="!detailInfo.licenseImgList">-</span>
|
<div v-else class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.licenseImgList"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img.fileurlFull"
|
:preview-src-list="detailInfo.licenseImgList.map(item => item.fileurlFull)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">其它材料：</span>
|
<span v-if="!detailInfo.otherImgList">-</span>
|
<div v-else class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.otherImgList"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img.fileurlFull"
|
:preview-src-list="detailInfo.otherImgList.map(item => item.fileurlFull)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="approval-form" v-if="detailInfo.auditStatus === 0">
|
<el-form ref="approvalForm" :model="approvalForm" :rules="approvalRules">
|
<el-form-item label="审批结果" prop="auditStatus">
|
<el-radio-group v-model="approvalForm.auditStatus">
|
<el-radio :label="0">通过</el-radio>
|
<el-radio :label="1">拒绝</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="司机评级" prop="driverLevel">
|
<el-select v-model="approvalForm.driverLevel" placeholder="请选择司机评级" style="width: 300px">
|
<el-option label="S" :value="5"></el-option>
|
<el-option label="A" :value="4"></el-option>
|
<el-option label="B" :value="3"></el-option>
|
<el-option label="C" :value="2"></el-option>
|
<el-option label="D" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="审批意见" prop="auditRemark">
|
<el-input
|
type="textarea"
|
v-model="approvalForm.auditRemark"
|
placeholder="请输入审批意见"
|
:rows="3"
|
style="width: 400px"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="approval-buttons">
|
<el-button @click="close">取消</el-button>
|
<el-button type="primary" @click="handleConfirm" :loading="isWorking">确定</el-button>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById, audit } from '@/api/business/driver'
|
|
export default {
|
name: 'OperaDriverApproval',
|
components: { GlobalWindow },
|
data () {
|
return {
|
title: '司机审核',
|
visible: false,
|
isWorking: false,
|
detailInfo: {},
|
approvalForm: {
|
id: null,
|
auditStatus: 0,
|
driverLevel: '',
|
auditRemark: ''
|
},
|
approvalRules: {
|
auditStatus: [{ required: true, message: '请选择审批结果', trigger: 'change' }],
|
driverLevel: [{ required: true, message: '请选择司机评级', trigger: 'change' }],
|
auditRemark: [{ required: true, message: '请输入审批意见', trigger: 'blur' }]
|
}
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.approvalForm = {
|
id: row.id,
|
auditStatus: 1,
|
driverLevel: '',
|
auditRemark: ''
|
}
|
this.$nextTick(() => {
|
this.$refs.approvalForm && this.$refs.approvalForm.clearValidate()
|
})
|
getById(row.id).then(res => {
|
this.detailInfo = res
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
close () {
|
this.visible = false
|
},
|
handleConfirm () {
|
this.$refs.approvalForm.validate(valid => {
|
if (!valid) return
|
if (this.approvalForm.status === 2 && !this.approvalForm.remark) {
|
this.$message.warning('请输入审批意见')
|
return
|
}
|
this.isWorking = true
|
audit({
|
id: this.approvalForm.id,
|
auditStatus: this.approvalForm.auditStatus,
|
driverLevel: this.approvalForm.driverLevel,
|
auditRemark: this.approvalForm.auditRemark
|
}).then(res => {
|
this.$tip.apiSuccess(res || '审核成功')
|
this.$emit('success', this.approvalForm)
|
this.visible = false
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
}).finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.driver-approval {
|
|
}
|
.section {
|
margin-bottom: 25px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 15px;
|
flex-wrap: wrap;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.approval-status {
|
margin-left: auto;
|
}
|
.status-tag {
|
font-size: 14px;
|
padding: 4px 12px;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
padding: 0 10px;
|
}
|
.info-item {
|
display: flex;
|
font-size: 14px;
|
}
|
.info-item.full-width {
|
grid-column: span 2;
|
}
|
.info-item .label {
|
color: #909399;
|
min-width: 110px;
|
}
|
.info-item .value {
|
color: #606266;
|
word-break: break-all;
|
}
|
.image-list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.approval-form {
|
padding: 20px;
|
background: #f5f7fa;
|
border-top: 1px solid #eee;
|
}
|
.approval-form /deep/ .el-form-item {
|
margin-bottom: 15px;
|
}
|
.approval-form /deep/ .el-form-item:last-child {
|
margin-bottom: 0;
|
}
|
.approval-buttons {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
margin-top: 15px;
|
}
|
</style>
|
