MrShi
昨天 108019e27e8958dbf474b8b9bea3fb5fbf7198d9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<template>
  <TableLayout :permissions="['business:driverInfo:query']">
    <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
      <el-form-item label="司机信息" prop="keyword">
        <el-input v-model="searchForm.keyword" clearable placeholder="请输入司机姓名/手机号" @keypress.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="carNo">
        <el-input v-model="searchForm.carNo" clearable placeholder="请输入车牌号" @keypress.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="searchForm.auditStatus" clearable placeholder="请选择状态" @change="search">
          <el-option label="待审批" :value="0"></el-option>
          <el-option label="审批通过" :value="1"></el-option>
          <el-option label="审批驳回" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker type="daterange" v-model="searchForm.createTime" clearable value-format="yyyy-MM-dd"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange" />
      </el-form-item>
      <section>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button :loading="isWorking.export" @click="exportExcel">导出</el-button>
      </section>
    </el-form>
    <template v-slot:table-wrap>
      <el-table
        :height="tableHeightNew"
        v-loading="isWorking.search"
        :data="tableData.list"
        stripe
      >
        <el-table-column prop="name" label="司机姓名" min-width="100px"></el-table-column>
        <el-table-column label="性别" min-width="60px">
          <template slot-scope="{row}">{{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '-' }}</template>
        </el-table-column>
        <el-table-column prop="telephone" label="注册手机号" min-width="120px"></el-table-column>
        <el-table-column prop="idcard" label="身份证号" min-width="160px"></el-table-column>
        <el-table-column label="婚姻状况" min-width="100px">
          <template slot-scope="{row}">{{ row.maritalStatus === 0 ? '未婚' : row.maritalStatus === 1 ? '已婚' : row.maritalStatus === 2 ? '离异' : '丧偶' }}</template>
        </el-table-column>
        <el-table-column prop="carCode" label="车牌号" min-width="100px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160px"></el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="{row}">
            <span style="color: #e6a23c;" v-if="row.auditStatus === 0">待审批</span>
            <span style="color: #13ce66;" v-else-if="row.auditStatus === 1">审批通过</span>
            <span style="color: #ff4949;" v-else>审批驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80px">
          <template slot-scope="{row}">
            <el-switch
              @change="handleStatusChange($event, row)"
              v-model="row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :pagination="tableData.pagination"
      ></pagination>
    </template>
    <OperaDriverApproval ref="operaDriverApproval" @success="handleApprovalSuccess" />
  </TableLayout>
</template>
 
<script>
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import OperaDriverApproval from '@/components/business/OperaDriverApproval'
import { updateStatus, exportExcel } from '@/api/business/driver'
 
export default {
  name: 'DriverVerification',
  extends: BaseTable,
  components: { TableLayout, Pagination, OperaDriverApproval },
  data () {
    return {
      searchForm: {
        keyword: '',
        carNo: '',
        auditStatus: '',
        sex: '',
        createTime: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  created () {
    this.config({
      api: '/business/driver',
      'field.id': 'id'
    })
    this.search()
  },
  methods: {
    handleDateChange (val) {
      this.searchForm.startTime = val ? val[0] : ''
      this.searchForm.endTime = val ? val[1] : ''
      this.search()
    },
    reset () {
      this.searchForm = {
        keyword: '',
        carNo: '',
        status: '',
        sex: '',
        createTime: '',
        startTime: '',
        endTime: ''
      }
      this.search()
    },
    handleDetail (row) {
      this.$refs.operaDriverApproval.open('司机审核', row)
    },
    handleApprovalSuccess (data) {
      this.$tip.apiSuccess('审核提交成功')
      this.search()
    },
    handleStatusChange (val, row) {
      updateStatus({ id: row.id, status: val }).then(res => {
        this.$tip.apiSuccess(res || '修改成功')
      }).catch(e => {
        row.status = val === 1 ? 0 : 1
        this.$tip.apiFailed(e)
      })
    },
    handleExport () {
      this.isWorking.export = true
      exportExcel(this.getTableParams())
        .then(res => {
          this.download(res)
          this.$tip.apiSuccess('导出成功')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.export = false
        })
    }
  }
}
</script>