<template>
|
<div class="main_app">
|
<div class="main_header">
|
<div class="platgroup_tabs pt20">
|
<div class="tab" :class="{ active: activeGroup.id === item.id }" @click="platgroupClick(item)"
|
v-for="(item, i) in PlatGroupList" :key="i">
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
<div class="df_sb">
|
<QueryForm v-model="filters" :query-form-config="queryQueueUpConfig" @handleQuery="getList(1)" @clear="clear">
|
</QueryForm>
|
<div>
|
<el-button @click="openSign" type="primary" style="align-self: flex-start;">车辆签到</el-button>
|
</div>
|
</div>
|
<div class="common-header">
|
<div class="static_wrap">
|
<span>等待：<span class="num">{{ staticParam.waitNum }}</span></span>
|
<span class="mr30">{{ }}</span>
|
<span>挂起：<span class="red">{{ staticParam.exceptionNum }}</span></span>
|
<span></span>
|
</div>
|
</div>
|
<el-table :height="tableHeightNew" v-loading="loading" :data="dataList" stripe row-key="id" default-expand-all>
|
<el-table-column type="index" label="序号" width="80" />
|
<el-table-column label="车牌号" width="130">
|
<template slot-scope="{ row }">
|
<div class="plate_id">
|
<span>{{ row.carCodeFront.slice(0, 1) }}</span>
|
<span>{{ row.carCodeFront.slice(1, 2) }}</span>
|
<span>·</span>
|
<span>{{ row.carCodeFront.slice(2) }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="carrierName" label="运输公司" show-overflow-tooltip min-width="140">
|
<template v-slot="scope">
|
<span>{{ scope.row.carrierName || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="contractNum" label="运输单号/合同号" min-width="120">
|
<template v-slot="scope">
|
<span>{{ scope.row.billCode || scope.row.contractNum || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="totalNum" label="总运输量(万支)" min-width="110">
|
<template v-slot="scope">
|
<span>{{ scope.row.totalNum || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="驾驶员" min-width="130">
|
<template slot-scope="{ row }">
|
<span class="mr10">{{ row.driverName }}</span>
|
<span>{{ row.drivierPhone }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="signDate" label="签到时间" min-width="150" />
|
<el-table-column label="状态" align="center" width="80">
|
<template slot-scope="{ row }">
|
<!-- <span v-if="row.status == 2" class="red">月台等待</span> -->
|
<span v-if="row.status == 2" class="red">等待叫号</span>
|
<span v-if="row.status == 3" class="primaryColor">入园等待</span>
|
<span v-if="row.status == 7" class="primaryColor">转移中</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="100" fixed="right">
|
<template slot-scope="{ row }">
|
<el-button v-if="row.billCode" type="text" @click="handleDetail(row)"
|
v-permissions="['business:company:update']">运单详情</el-button>
|
<el-button v-else type="text" @click="subDetail(row)">预约详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <el-table v-else class="mb20" v-loading="loading" :data="dataList" stripe row-key="id" default-expand-all>
|
<el-table-column type="index" label="序号" width="80" />
|
<el-table-column label="车牌号" width="130">
|
<template slot-scope="{ row }">
|
<div class="plate_id">
|
<span>{{ row.carCodeFront.slice(0, 1) }}</span>
|
<span>{{ row.carCodeFront.slice(1, 2) }}</span>
|
<span>·</span>
|
<span>{{ row.carCodeFront.slice(2) }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="carrierName" label="运输公司" min-width="120" />
|
<el-table-column prop="totalNum" label="总运输量(万支)" min-width="110" />
|
<el-table-column label="驾驶员" min-width="130">
|
<template slot-scope="{ row }">
|
<span class="mr10">{{ row.driverName }}</span>
|
<span>{{ row.drivierPhone }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="signDate" label="签到时间" min-width="150" />
|
<el-table-column label="操作" align="center" width="100" fixed="right">
|
<template slot-scope="{ row }">
|
<el-button v-if="row.billCode" type="text" @click="handleDetail(row)"
|
v-permissions="['business:company:update']">运单详情</el-button>
|
<el-button v-else type="text" @click="subDetail(row)">预约详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
<pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="pagination" />
|
|
<!-- -->
|
<PlatformSign ref="PlatformSignRef" v-if="isPlatformSign" @success="getPlatGroupList"
|
@close="isPlatformSign = false" />
|
<WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
|
<DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/common/Pagination'
|
import QueryForm from '@/components/common/QueryForm'
|
import {
|
getPlatformGroupList,
|
platformLineUpPage,
|
getPlatformGroupWork
|
} from '@/api'
|
import { queryQueueUpConfig } from './config'
|
import WaybillDetail from './components/WaybillDetail.vue'
|
import DriverDetail from '@/views/task/driverDetail.vue'
|
import PlatformSign from './components/PlatformSign.vue'
|
import BaseComputHeight from '@/components/base/BaseComputHeight'
|
export default {
|
extends: BaseComputHeight,
|
components: {
|
Pagination,
|
QueryForm,
|
PlatformSign,
|
WaybillDetail,
|
DriverDetail
|
},
|
data() {
|
return {
|
filters: {},
|
activeGroup: {
|
type: 2
|
},
|
PlatGroupList: [],
|
staticParam: {},
|
dataList: [],
|
loading: false,
|
isShowDriver: false,
|
isPlatformSign: false,
|
pagination: {
|
pageSize: 10,
|
page: 1,
|
total: 0,
|
},
|
queryQueueUpConfig,
|
isShowDetail: false, // 运单详情
|
detail: {}
|
}
|
},
|
created() {
|
this.getPlatGroupList()
|
},
|
methods: {
|
openSign() {
|
this.isPlatformSign = true
|
this.$nextTick(() => {
|
this.$refs.PlatformSignRef.isShowModal = true
|
this.$refs.PlatformSignRef.activePlat = this.activeGroup
|
this.$refs.PlatformSignRef.carCodeFront = ''
|
this.$refs.PlatformSignRef.pagination = {
|
total: 0,
|
pageSize: 10,
|
page: 1
|
}
|
this.$refs.PlatformSignRef.getList()
|
})
|
},
|
getPlatGroupList() {
|
getPlatformGroupList({
|
queryData: 1,
|
queryType: 1
|
}).then(res => {
|
this.PlatGroupList = res || []
|
if (res && res.length > 0) {
|
if (this.activeGroup && this.activeGroup.id) {
|
this.activeGroup = res.find(item => item.id === this.activeGroup.id)
|
} else {
|
this.activeGroup = res[0]
|
}
|
|
this.getPlatformGroupWork()
|
this.getList()
|
}
|
})
|
},
|
getList() {
|
const { activeGroup, pagination, filters } = this
|
this.loading = true
|
platformLineUpPage({
|
model: { platformGroupId: activeGroup.id, ...filters, callType: 3 },
|
capacity: pagination.pageSize,
|
page: pagination.page,
|
}).then(res => {
|
this.loading = false
|
this.dataList = res.records || []
|
this.pagination.total = res.total || 0
|
}, () => {
|
this.loading = false
|
})
|
},
|
getPlatformGroupWork() {
|
const { activeGroup } = this
|
getPlatformGroupWork(activeGroup.id).then(res => {
|
this.staticParam = res || {}
|
})
|
},
|
handleSizeChange(e) {
|
this.pagination.pageSize = e
|
this.getList(1)
|
},
|
handlePageChange(e) {
|
this.pagination.page = e
|
this.getList()
|
},
|
platgroupClick(item) {
|
this.activeGroup = { ...item }
|
this.pagination.page = 1
|
this.filters = {}
|
this.getPlatformGroupWork()
|
this.getList()
|
},
|
clear() {
|
this.pagination.page = 1
|
this.filters = {}
|
this.getList()
|
},
|
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()
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.main_app {
|
padding: 0 20px;
|
|
.doumee-filter {
|
padding-top: 20px;
|
border: 0;
|
}
|
}
|
|
.common-header {
|
background-color: #fff;
|
/* position: relative; */
|
/* z-index: 999; */
|
/* top: -10; */
|
/* margin: -20px; */
|
padding: 0 20px;
|
|
/* border: 1px solid red; */
|
.static_wrap {
|
height: 50px;
|
line-height: 50px;
|
color: #666666;
|
font-size: 15px;
|
padding: 0 20px;
|
background: #F4FAFB;
|
border-radius: 2px 2px 0px 0px;
|
/* margin-bottom: 36px; */
|
|
.num {
|
color: #111111;
|
}
|
}
|
}
|
|
.plate_id {
|
display: flex;
|
width: 120px;
|
font-weight: 600;
|
height: 30px;
|
line-height: 30px;
|
font-size: 16px;
|
color: #111111;
|
border-radius: 4px;
|
border: 1px solid #dfdede;
|
|
span {
|
&:nth-of-type(1) {
|
background: $primary-color;
|
padding: 0 6px;
|
color: #fff
|
}
|
|
&:nth-of-type(2) {
|
padding-left: 2px;
|
}
|
|
&:nth-of-type(4) {
|
padding-right: 3px;
|
}
|
}
|
}
|
|
|
.main_header {
|
.platgroup_tabs {
|
flex: 1;
|
display: flex;
|
border-bottom: 1px solid #dfe2e8;
|
|
.tab {
|
color: #666666;
|
margin-right: 40px;
|
cursor: pointer;
|
padding-bottom: 14px;
|
border-bottom: 2px solid #fff;
|
}
|
|
.active {
|
font-weight: 500;
|
font-size: 15px;
|
color: #222222;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
}
|
</style>
|
