292 lines
		
	
	
		
			9.7 KiB
		
	
	
	
		
			Vue
		
	
	
			
		
		
	
	
			292 lines
		
	
	
		
			9.7 KiB
		
	
	
	
		
			Vue
		
	
	
| <template>
 | |
|   <div class="app-container">
 | |
|     <div class="filter-container">
 | |
|       <el-form ref="form" v-model="form">
 | |
|         <el-row>
 | |
|           <el-col :span="5">
 | |
|             <el-form-item label="车牌号:">
 | |
|               <el-input v-model="form.LICENCE_NO" placeholder="搜索" class="filter-item" style="width: 200px;"/>
 | |
|             </el-form-item>
 | |
|           </el-col>
 | |
|           <el-col :span="4">
 | |
|             <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">搜索</el-button>
 | |
|             <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="reset">重置</el-button>
 | |
|           </el-col>
 | |
|         </el-row>
 | |
|       </el-form>
 | |
|     </div>
 | |
|     <el-table
 | |
|       v-loading="listLoading"
 | |
|       ref="multipleTable"
 | |
|       :data="varList"
 | |
|       :row-key="getRowKey"
 | |
|       :header-cell-style="{
 | |
|         'font-weight': 'bold',
 | |
|         'color': '#000'
 | |
|       }"
 | |
|       tooltip-effect="dark"
 | |
|       border
 | |
|       fit
 | |
|       highlight-current-row
 | |
|     >
 | |
|       <el-table-column
 | |
|         :reserve-selection="true"
 | |
|         type="selection"
 | |
|         width="55"
 | |
|         align="center"/>
 | |
|       <el-table-column type="index" label="序号" width="50" align="center" />
 | |
|       <el-table-column prop="LICENCE_NO" label="车牌号"/>
 | |
|       <el-table-column label="车牌类型" align="center">
 | |
|         <template slot-scope="{row}">
 | |
|           {{ translateLicenceType(row.LICENCE_TYPE) }}
 | |
|         </template>
 | |
|       </el-table-column>
 | |
|       <el-table-column label="车辆类型" align="center">
 | |
|         <template slot-scope="{row}">
 | |
|           {{ translateVehicleType(row.VEHICLE_TYPE) }}
 | |
|         </template>
 | |
|       </el-table-column>
 | |
|       <el-table-column prop="CONTACT" label="联系人"/>
 | |
|       <el-table-column prop="PHONE" label="联系人电话"/>
 | |
|       <el-table-column prop="APPLY_TIME" label="申请访问时间"/>
 | |
|       <el-table-column label="审核状态" align="center" width="120">
 | |
|         <template slot-scope="{row}">
 | |
|           {{ getType(row.IS_AUDIT) }}
 | |
|         </template>
 | |
|       </el-table-column>
 | |
|       <el-table-column label="操作" align="left" width="300">
 | |
|         <template slot-scope="{row}">
 | |
|           <el-button type="primary" icon="el-icon-view" size="mini" @click="detail(row)">详情</el-button>
 | |
|           <el-button v-if="checkButton(row)" type="success" icon="el-icon-check" size="mini" @click="approve(row)">审核</el-button>
 | |
|         </template>
 | |
|       </el-table-column>
 | |
|     </el-table>
 | |
|     <div class="page-btn-group">
 | |
|       <div/><div/>
 | |
|       <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
 | |
|     </div>
 | |
|     <send-util ref="sendUtil" append-to-body @refresh="getList"/>
 | |
| 
 | |
|     <el-dialog :title="detailTitle" :visible.sync="dialogVisible" width="50%">
 | |
|       <el-form :model="detailForm" label-width="120px">
 | |
|         <el-form-item label="排放标准">
 | |
|           <el-input v-model="detailForm.EMISSION_STANDARDS" readonly />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="驾驶证图片">
 | |
|           <el-image
 | |
|             :src="config.fileUrl + detailForm.DRIVING_LICENSE"
 | |
|             style="width: 100px; height: 100px"
 | |
|             :preview-src-list="[config.fileUrl + detailForm.DRIVING_LICENSE]"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="绿本图片">
 | |
|           <el-image
 | |
|             :src="config.fileUrl + detailForm.GREEN_BOOK"
 | |
|             style="width: 100px; height: 100px"
 | |
|             :preview-src-list="[config.fileUrl + detailForm.GREEN_BOOK]"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="环保随车清单图片">
 | |
|           <el-image
 | |
|             :src="config.fileUrl + detailForm.ECO_FRIENDLY_CHECKLIST"
 | |
|             style="width: 100px; height: 100px"
 | |
|             :preview-src-list="[config.fileUrl + detailForm.ECO_FRIENDLY_CHECKLIST]"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="出厂合格证图片">
 | |
|           <el-image
 | |
|             :src="config.fileUrl + detailForm.FACTORY_CERTIFICATE"
 | |
|             style="width: 100px; height: 100px"
 | |
|             :preview-src-list="[config.fileUrl + detailForm.FACTORY_CERTIFICATE]"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="环保信息截图图片">
 | |
|           <el-image
 | |
|             :src="config.fileUrl + detailForm.ENVIRONMENTAL_SCREENSHOTS"
 | |
|             style="width: 100px; height: 100px"
 | |
|             :preview-src-list="[config.fileUrl + detailForm.ENVIRONMENTAL_SCREENSHOTS]"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="访问起始时间">
 | |
|           <el-input v-model="detailForm.VISIT_START_TIME" readonly />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="访问结束时间">
 | |
|           <el-input v-model="detailForm.VISIT_END_TIME" readonly />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="访问口门名称">
 | |
|           <el-input v-model="detailForm.DOOR_NAME" readonly />
 | |
|         </el-form-item>
 | |
|       </el-form>
 | |
|       <span slot="footer" class="dialog-footer">
 | |
|     <el-button @click="dialogVisible = false">关闭</el-button>
 | |
|   </span>
 | |
|     </el-dialog>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
 | |
| import { requestFN } from '@/utils/request'
 | |
| import SendUtil from './sendUtil.vue'
 | |
| import formatDate from '../../../../utils/dateformat'
 | |
| 
 | |
| export default{
 | |
|   components: { SendUtil, Pagination },
 | |
|   data() {
 | |
|     return {
 | |
|       listQuery: {
 | |
|         page: 1,
 | |
|         limit: 10
 | |
|       },
 | |
|       config: config,
 | |
|       dialogVisible: false,
 | |
|       detailTitle: '详情',
 | |
|       detailForm: {
 | |
|         EMISSION_STANDARDS: '',
 | |
|         DRIVING_LICENSE: '',
 | |
|         GREEN_BOOK: '',
 | |
|         ECO_FRIENDLY_CHECKLIST: '',
 | |
|         CERTIFICATE_IMAGE: '',
 | |
|         FACTORY_CERTIFICATE: '',
 | |
|         ENVIRONMENTAL_SCREENSHOTS: '',
 | |
|         VISIT_START_TIME: '',
 | |
|         VISIT_END_TIME: '',
 | |
|         DOOR_NAME: ''
 | |
|       },
 | |
|       // 车牌类型列表
 | |
|       licenceTypeList: [
 | |
|         { ID: '0', NAME: '白牌' },
 | |
|         { ID: '1', NAME: '蓝牌' },
 | |
|         { ID: '2', NAME: '黄牌' },
 | |
|         { ID: '3', NAME: '绿牌' },
 | |
|         { ID: '4', NAME: '黑牌' }
 | |
|       ],
 | |
|       // 车辆类型列表
 | |
|       vehicleTypeList: [
 | |
|         // { ID: '', NAME: '请选择' },
 | |
|         { ID: '0', NAME: '货车' },
 | |
|         { ID: '1', NAME: '轿车' },
 | |
|         { ID: '2', NAME: '大巴客车' }
 | |
|       ],
 | |
|       IS_POLICE: '',
 | |
|       areaList: [], // 省市县列表
 | |
|       placeList: [],
 | |
|       listLoading: true,
 | |
|       varList: [],
 | |
|       total: 0,
 | |
|       title: '',
 | |
|       isShow: false,
 | |
|       form: {
 | |
|         LICENCE_NO: '',
 | |
|         PHONE: '',
 | |
|         ID_CARD: '',
 | |
|         CORPINFO_NAME: '',
 | |
|         DEPARTMENT_NAME: '',
 | |
|         VISIT_START_TIME: '',
 | |
|         VISIT_END_TIME: '',
 | |
|         DOOR_NAME: '',
 | |
|         IS_DANGEROUS_CAR: '1',
 | |
|         CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID
 | |
|       }
 | |
|     }
 | |
|   },
 | |
|   created() {
 | |
|     this.getList()
 | |
|     this.getPermissions()
 | |
|   },
 | |
|   methods: {
 | |
|     checkButton(row){
 | |
|       console.log('---------------------')
 | |
|       console.log('row.IS_AUDIT:', row.IS_AUDIT);
 | |
|       console.log('this.IS_POLICE:', this.IS_POLICE);
 | |
|       if (row.IS_AUDIT === '0' && this.IS_POLICE === '1'){
 | |
|         return true
 | |
|       }else {
 | |
|         return false
 | |
|       }
 | |
|     },
 | |
|     translateLicenceType(id) {
 | |
|       for (var i = 0; i < this.licenceTypeList.length; i++) {
 | |
|         if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
 | |
|       }
 | |
|     },
 | |
|     translateVehicleType(id) {
 | |
|       for (var i = 0; i < this.vehicleTypeList.length; i++) {
 | |
|         if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
 | |
|       }
 | |
|     },
 | |
|     approve(row) {
 | |
|       this.$refs.sendUtil.init(row)
 | |
|     },
 | |
|     getType(AUDIT_TYPE) {
 | |
|       if (AUDIT_TYPE === '0') {
 | |
|         return '待交警支队审核'
 | |
|       } else if (AUDIT_TYPE === '1') {
 | |
|         return '待分公司审核'
 | |
|       } else if (AUDIT_TYPE === '2') {
 | |
|         return '审核通过'
 | |
|       } else if (AUDIT_TYPE === '3') {
 | |
|         return '审核驳回'
 | |
|       }
 | |
|     },
 | |
|     // 搜索
 | |
|     getQuery() {
 | |
|       this.$refs.multipleTable.clearSelection()
 | |
|       this.getList()
 | |
|     },
 | |
|     // 重置
 | |
|     reset() {
 | |
|       this.form.LICENCE_NO = ''
 | |
|       this.getList()
 | |
|     },
 | |
|     // 获取列表
 | |
|     getList() {
 | |
|       this.listLoading = true
 | |
|       requestFN(
 | |
|         '/mkmjManagement/freightVehiclesAudit?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page, this.form
 | |
|       ).then((data) => {
 | |
|         console.log(data)
 | |
|         this.listLoading = false
 | |
|         this.varList = data.varList
 | |
|         this.total = data.page.totalResult
 | |
|         this.hasButton()
 | |
|         this.pd = data.pd
 | |
|       }).catch((e) => {
 | |
|         this.listLoading = false
 | |
|       })
 | |
|     },
 | |
|     getPermissions(){
 | |
|       requestFN(
 | |
|         '/mkmjManagement/getPermissions'
 | |
|       ).then((data) => {
 | |
|         this.IS_POLICE = data.pageData.IS_POLICE
 | |
|         console.log('IS_POLICE:', this.IS_POLICE)
 | |
|       })
 | |
|     },
 | |
|     detail(row) {
 | |
|       this.dialogVisible = true
 | |
|       requestFN(
 | |
|         '/mkmjManagement/getCarInfo',
 | |
|         {
 | |
|           VEHICLE_ID: row.VEHICLE_ID
 | |
|         }
 | |
|       ).then((data) => {
 | |
|         this.detailForm.EMISSION_STANDARDS = data.pageData.EMISSION_STANDARDS
 | |
|         this.detailForm.DRIVING_LICENSE = data.pageData.DRIVING_LICENSE
 | |
|         this.detailForm.GREEN_BOOK = data.pageData.GREEN_BOOK
 | |
|         this.detailForm.ECO_FRIENDLY_CHECKLIST = data.pageData.ECO_FRIENDLY_CHECKLIST
 | |
|         this.detailForm.FACTORY_CERTIFICATE = data.pageData.FACTORY_CERTIFICATE
 | |
|         this.detailForm.ENVIRONMENTAL_SCREENSHOTS = data.pageData.ENVIRONMENTAL_SCREENSHOTS
 | |
|         this.detailForm.VISIT_START_TIME = formatDate(data.pageData.VISIT_START_TIME, 'YYYY-MM-DD HH:mm:ss')
 | |
|         this.detailForm.VISIT_END_TIME = formatDate(data.pageData.VISIT_END_TIME, 'YYYY-MM-DD HH:mm:ss')
 | |
|         this.detailForm.DOOR_NAME = data.pageData.DOOR_NAME
 | |
|       }).catch((e) => {
 | |
|         this.listLoading = false
 | |
|       })
 | |
|     }
 | |
|   }
 | |
| 
 | |
| }
 | |
| </script>
 | |
| 
 |