|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow | 
|---|
|  |  |  | :title="'月台叫号-'+title" | 
|---|
|  |  |  | :visible.sync="isShowModal" | 
|---|
|  |  |  | :showConfirm="false" | 
|---|
|  |  |  | width="800px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <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-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="status">{{ statusMap[item.status] }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="info"> | 
|---|
|  |  |  | <div v-if="item.type == 4" class="ite"> | 
|---|
|  |  |  | <span>合同单号:</span> | 
|---|
|  |  |  | <span>{{ item.contractNum }}</span> | 
|---|
|  |  |  | <div v-if="item.billCode" class="ite"> | 
|---|
|  |  |  | <span>运输单号:</span> | 
|---|
|  |  |  | <span>{{ item.billCode }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-else class="ite"> | 
|---|
|  |  |  | <span>运输单号:</span> | 
|---|
|  |  |  | <span>{{ item.code }}</span> | 
|---|
|  |  |  | <span>合同单号:</span> | 
|---|
|  |  |  | <span>{{ item.contractNum }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="ite"> | 
|---|
|  |  |  | <span>驾驶员:</span> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="ite"> | 
|---|
|  |  |  | <span>总运输量:</span> | 
|---|
|  |  |  | <span>{{ item.totalNum }}万支</span> | 
|---|
|  |  |  | <span>{{ item.totalNum || item.ioQty }}万支</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-if="item.type != 4" class="ite" style="width: 66%"> | 
|---|
|  |  |  | <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.type != 4" class="detail">运单详情</div> | 
|---|
|  |  |  | <div v-else></div> | 
|---|
|  |  |  | <el-button type="primary" @click="handleCall(item)">叫号</el-button> | 
|---|
|  |  |  | <div v-if="item.billCode" @click="handleDetail(item)" class="detail">运单详情</div> | 
|---|
|  |  |  | <div v-else class="detail"  @click="subDetail(item)">预约详情</div> | 
|---|
|  |  |  | <el-button v-preventReClick :loading="loadingCall" type="primary" @click="handleCall(item)">叫号</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <pagination | 
|---|
|  |  |  | @size-change="handleSizeChange" | 
|---|
|  |  |  | @current-change="handlePageChange" | 
|---|
|  |  |  | :pagination="pagination" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <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 } from '@/api' | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | Pagination, | 
|---|
|  |  |  | WaybillDetail, | 
|---|
|  |  |  | DriverDetail | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | statusMap, | 
|---|
|  |  |  | isShowModal: false, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | carCodeFront: '', | 
|---|
|  |  |  | title: '', | 
|---|
|  |  |  | callType: '1', | 
|---|
|  |  |  | activePlat: {}, | 
|---|
|  |  |  | dataList: [] | 
|---|
|  |  |  | dataList: [], | 
|---|
|  |  |  | isShowDetail: false, // 运单详情 | 
|---|
|  |  |  | isShowDriver: false, // 预约详情 | 
|---|
|  |  |  | loadingCall: false | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | handleCall (item) { | 
|---|
|  |  |  | const activePlatform = this.activePlat | 
|---|
|  |  |  | platformCallNumber({ platformId: activePlatform.id, jobId: item.id }).then(res => { | 
|---|
|  |  |  | Message.success('叫号成功') | 
|---|
|  |  |  | this.$emit('success') | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getList () { | 
|---|
|  |  |  | const { activePlat, pagination, carCodeFront } = this | 
|---|
|  |  |  | 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: '2', platformId: activePlat.id, carCodeFront }, | 
|---|
|  |  |  | model: { callType, platformId: activePlat.id, carCodeFront }, | 
|---|
|  |  |  | page: pagination.page, | 
|---|
|  |  |  | capacity: pagination.pageSize | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.pagination.total = res.total | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | reset () { | 
|---|
|  |  |  | reset() { | 
|---|
|  |  |  | this.carCodeFront = '' | 
|---|
|  |  |  | this.pagination.page = 1 | 
|---|
|  |  |  | this.pagination.pageSize = 10 | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleSizeChange (e) { | 
|---|
|  |  |  | handleSizeChange(e) { | 
|---|
|  |  |  | this.pagination.pageSize = e | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handlePageChange (e) { | 
|---|
|  |  |  | handlePageChange(e) { | 
|---|
|  |  |  | this.pagination.page = e | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleSub () { | 
|---|
|  |  |  | handleSub() { | 
|---|
|  |  |  | const { param } = this | 
|---|
|  |  |  | this.subLoading = true | 
|---|
|  |  |  | PlatformEdit({ | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | @import "@/assets/style/variables.scss"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .queuing_modal { | 
|---|
|  |  |  | padding: 10px 30px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | background: #f4fafb; | 
|---|
|  |  |  | 
|---|
|  |  |  | border: 1px solid #dfe2e8; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | padding: 16px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .head { | 
|---|
|  |  |  | margin-bottom: 15px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .plate { | 
|---|
|  |  |  | width: 90px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | 
|---|
|  |  |  | border: 1px solid #279baa; | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status { | 
|---|
|  |  |  | color: $primaryColor; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .code { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|