<template>
|
<GlobalWindow :title="callType == 1 ? '叫号入园-' + title : '月台叫号-' + title" :visible.sync="isShowModal"
|
:showConfirm="false" width="800px">
|
<div class="queuing_modal">
|
<div class="df_ac mb20">
|
<span>搜索车辆：</span>
|
<el-input class="flex1 mr20" v-model="carCodeFront" placeholder="请输入车牌号"></el-input>
|
<el-button type="primary" @click="getList">查找</el-button>
|
<el-button @click="reset">重置</el-button>
|
</div>
|
<div class="list">
|
<div class="item" v-for="item in dataList" :key="item.id">
|
<div class="head df_sb">
|
<div v-if="item.carCodeFront" class="code">
|
<span>{{ item.carCodeFront.slice(0, 1) }}</span>
|
<span>{{ item.carCodeFront.slice(1, 2) }}</span>
|
<span>·</span>
|
<span>{{ item.carCodeFront.slice(2) }}</span>
|
</div>
|
<div class="status">{{ statusMap[item.status] }}</div>
|
</div>
|
<div class="info">
|
<div v-if="item.billCode" class="ite">
|
<span>运输单号：</span>
|
<span>{{ item.billCode }}</span>
|
</div>
|
<div v-else class="ite">
|
<span>合同单号：</span>
|
<span>{{ item.contractNum }}</span>
|
</div>
|
<div class="ite">
|
<span>驾驶员：</span>
|
<span>{{ item.driverName }}</span>
|
</div>
|
<div class="ite">
|
<span>手机号：</span>
|
<span>{{ item.drivierPhone }}</span>
|
</div>
|
<div class="ite">
|
<span>总运输量：</span>
|
<span>{{ item.totalNum || item.ioQty }}万支</span>
|
</div>
|
<div v-if="item.billCode" class="ite" style="width: 66%">
|
<span>运输公司：</span>
|
<span>{{ item.carrierName }}</span>
|
</div>
|
</div>
|
<div class="footer df_sb">
|
<div v-if="item.billCode" @click="handleDetail(item)" class="detail">运单详情</div>
|
<div v-else class="detail" @click="subDetail(item)">预约详情</div>
|
<div style="display: flex; align-items: center;">
|
<div style="margin-right: 15px; color: #207FF7; font-size: 13px; font-weight: 400;" v-if="item.signDate">
|
签到时间：{{item.signDate.substring(5, 10)}} {{item.signDate.substring(11, 16)}}
|
</div>
|
<el-button v-preventReClick :loading="loadingCall" type="primary" @click="handleCall(item)">叫号</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="pagination">
|
</pagination>
|
</div>
|
<!-- -->
|
<WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
|
<DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import { platformCallList, platformCallNumber, platformInPark } from '@/api'
|
import { statusMap } from '../config'
|
import { Message } from 'element-ui'
|
import WaybillDetail from './WaybillDetail.vue'
|
import DriverDetail from "@/views/task/driverDetail.vue"
|
export default {
|
components: {
|
GlobalWindow,
|
Pagination,
|
WaybillDetail,
|
DriverDetail
|
},
|
data() {
|
return {
|
statusMap,
|
isShowModal: false,
|
subLoading: false,
|
pagination: {
|
total: 0,
|
pageSize: 10,
|
page: 1
|
},
|
carCodeFront: '',
|
title: '',
|
callType: '1',
|
activePlat: {},
|
dataList: [],
|
isShowDetail: false, // 运单详情
|
isShowDriver: false, // 预约详情
|
loadingCall: false
|
|
}
|
},
|
methods: {
|
handleCall(item) {
|
const { activePlat, callType } = this
|
this.loadingCall = true
|
if (callType == 1) { // 入园叫号
|
platformInPark({
|
jobId: item.id,
|
platformId: activePlat.id
|
}).then(() => {
|
this.loadingCall = false
|
Message.success('叫号成功')
|
this.$emit('success')
|
this.getList()
|
},() => {this.loadingCall = false})
|
} else {
|
this.loadingCall = true
|
platformCallNumber({ platformId: activePlat.id, jobId: item.id }).then(res => {
|
this.loadingCall = false
|
Message.success('叫号成功')
|
this.$emit('success')
|
this.getList()
|
},()=> {this.loadingCall = false})
|
}
|
},
|
subDetail(row) {
|
this.isShowDriver = true
|
this.$nextTick(() => {
|
this.$refs.DriverDetailRef.id = row.bookId
|
this.$refs.DriverDetailRef.type = row.objType
|
this.$refs.DriverDetailRef.getDetail()
|
this.$refs.DriverDetailRef.isShowModal = true
|
})
|
},
|
handleDetail(row) {
|
this.isShowDetail = true
|
this.$nextTick(() => {
|
this.$refs.WaybillDetailRef.isShowModal = true
|
this.$refs.WaybillDetailRef.id = row.id
|
this.$refs.WaybillDetailRef.getDetail()
|
})
|
},
|
getList() {
|
const { activePlat, pagination, carCodeFront, callType } = this
|
platformCallList({
|
model: { callType, platformId: activePlat.id, carCodeFront },
|
page: pagination.page,
|
capacity: pagination.pageSize
|
}).then(res => {
|
this.dataList = res.records
|
this.pagination.total = res.total
|
})
|
},
|
reset() {
|
this.carCodeFront = ''
|
this.pagination.page = 1
|
this.pagination.pageSize = 10
|
this.getList()
|
},
|
handleSizeChange(e) {
|
this.pagination.pageSize = e
|
this.getList(1)
|
},
|
handlePageChange(e) {
|
this.pagination.page = e
|
this.getList()
|
},
|
handleSub() {
|
const { param } = this
|
this.subLoading = true
|
PlatformEdit({
|
...param
|
}).then(res => {
|
this.subLoading = false
|
this.isShowEdit = false
|
this.$tip.success('提交成功')
|
this.getList()
|
}, () => {
|
this.subLoading = false
|
})
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
.table-pagination {
|
bottom: 0px !important;
|
}
|
.queuing_modal {
|
padding: 10px 30px;
|
|
.list {
|
.item {
|
background: #f4fafb;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
margin-bottom: 10px;
|
padding: 16px;
|
|
.head {
|
margin-bottom: 15px;
|
|
.plate {
|
width: 90px;
|
text-align: center;
|
font-size: 15px;
|
color: #111111;
|
padding: 4px 5px;
|
font-weight: 700;
|
border: 1px solid #279baa;
|
background-color: #fff;
|
}
|
|
.status {
|
color: $primaryColor;
|
}
|
|
.code {
|
display: flex;
|
font-weight: 600;
|
height: 30px;
|
line-height: 30px;
|
font-size: 15px;
|
color: #111111;
|
background-color: #fff;
|
border-radius: 4px;
|
border: 1px solid $primaryColor;
|
padding-right: 4px;
|
|
span {
|
&:nth-of-type(1) {
|
background: $primaryColor;
|
padding: 0 8px;
|
color: #fff;
|
}
|
|
&:nth-of-type(2) {
|
padding-left: 4px;
|
}
|
}
|
}
|
}
|
|
.info {
|
display: flex;
|
flex-wrap: wrap;
|
|
.ite {
|
width: 33.3%;
|
margin-bottom: 8px;
|
|
span {
|
&:nth-child(1) {
|
color: #666666;
|
}
|
}
|
}
|
}
|
|
.footer {
|
.detail {
|
color: $primaryColor;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
