<template>
|
<GlobalWindow 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" :class="{ red: item.status == 0 }">{{ 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.type != 4" class="ite" style="width: 66%">
|
<span>运输公司：</span>
|
<span>{{ item.carrierName }}</span>
|
</div>
|
</div>
|
<div class="footer df_sb">
|
<div @click="handleDetail(item)" v-if="item.billCode" class="detail">运单详情</div>
|
<div @click="subDetail(item)" v-else class="detail">预约详情</div>
|
<el-button type="primary" @click="handleCall(item)">签到</el-button>
|
</div>
|
</div>
|
</div>
|
<pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="pagination">
|
</pagination>
|
</div>
|
<WaybillDetailRef v-if="isShowDetail" ref="WaybillDetailRef" />
|
<DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import WaybillDetailRef from "./WaybillDetail.vue"
|
import DriverDetail from "@/views/task/driverDetail.vue"
|
import { platformJobPage, platformJobSign } from '@/api'
|
import { statusMap } from '../config'
|
import { Message } from 'element-ui'
|
export default {
|
components: {
|
GlobalWindow,
|
Pagination,
|
WaybillDetailRef,
|
DriverDetail
|
},
|
data() {
|
return {
|
statusMap,
|
isShowModal: false,
|
isShowDetail: false,
|
isShowDriver: false,
|
subLoading: false,
|
pagination: {
|
total: 0,
|
pageSize: 10,
|
page: 1
|
},
|
carCodeFront: '',
|
// activePlat: {},
|
dataList: []
|
|
}
|
},
|
methods: {
|
handleCall(item) {
|
// const activePlatform = this.activePlat
|
platformJobSign({ jobId: item.id, signType: '2' }).then(res => {
|
Message.success('签到成功')
|
this.$emit('success')
|
this.getList()
|
})
|
},
|
getList() {
|
const { activePlat, pagination, carCodeFront } = this
|
platformJobPage({
|
model: { platformGroupId: activePlat.id, queryStatus: '0,1', carCodeFront },
|
page: pagination.page,
|
capacity: pagination.pageSize
|
}).then(res => {
|
this.dataList = res.records
|
this.pagination.total = res.total
|
})
|
},
|
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()
|
})
|
},
|
reset() {
|
this.carCodeFront = ''
|
this.pagination.page = 1
|
this.pagination.pageSize = 10
|
this.getList()
|
},
|
handleSizeChange(e) {
|
this.pagination.pageSize = e
|
this.getList()
|
},
|
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";
|
|
.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>
|
