小程序 | app

MrShi

2026-04-30 0fc9c0d48dccf86855a1210d97649dde38422a92

 admin/src/components/business/OperaDriverEditWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,353 @@
<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>
          <div class="approval-status">
            <el-tag v-if="detailInfo.auditStatus === 0" type="warning" 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"  v-if="detailInfo.auditStatus === 3 || detailInfo.auditStatus === 1" >
            <span class="label">评级：</span>
            <span class="value" v-if="detailInfo.driverLevel ==5">S</span>
            <span class="value" v-else-if="detailInfo.driverLevel ==4">A</span>
            <span class="value" v-else-if="detailInfo.driverLevel ==3">B</span>
            <span class="value" v-else-if="detailInfo.driverLevel ==2">C</span>
            <span class="value" v-else-if="detailInfo.driverLevel ==1">D</span>
            <span class="value" v-else>-</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="approvalForm.auditStatus ===0?approvalRules:approvalRules1">
          <el-form-item label="审批结果" prop="auditStatus">
            <el-radio-group v-model="approvalForm.auditStatus" @change="changeRadio">
              <el-radio :label="0">通过</el-radio>
              <el-radio :label="1">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="司机评级" prop="driverLevel" v-if="approvalForm.auditStatus ===0">
            <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' }]
      },
      approvalRules1: {
        auditStatus: [{ required: true, message: '请选择审批结果', trigger: 'change' }],
        auditRemark: [{ required: true, message: '请输入审批意见', trigger: 'blur' }]
      }
    }
  },
  methods: {
    changeRadio(){
      this.$refs.approvalForm.clearValidate()
    },
    open (title, row) {
      this.title = title
      this.approvalForm = {
        id: row.id,
        auditStatus: 0,
        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;
}
.checkinfo {
  align-items:start   !important;
  display: flex !important;
  flex-direction: column   !important;
  background-color: rgb(254 242 242);
  min-height: 100px;
  margin-bottom: 30px;
  padding: 20px;
}
.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>