airportPickupTable.vue
4.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<div class="collapsebox">
<div class="pd20">
<div class="fl mb20" style="display: flex;">
<el-input
v-model.trim="query.text"
:placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information'"
:prefix-icon="Search"
clearable
size="small"
style="width: 260px"/>
<el-button size="small" style="margin-left: 20px" type="primary" @click="getList">
{{ language == 0 ? '查询' : 'SEARCH' }}
</el-button>
</div>
<el-table :data="list" border>
<el-table-column :label="language==0?'序号':'Serial'" :min-width="language==0?60:80" align="center"
type="index"/>
<el-table-column :label="language==0?'服务类型':'Type Of Service'" :min-width="language==0? 90:150"
align="center"
prop="serviceTypeStr">
<template #default="{row}">
{{ row.serviceType == 1 ? language == 0 ? '接机' : 'Pick-up' : language == 0 ? '送机' : 'Drop-off' }}
</template>
</el-table-column>
<el-table-column :label="language==0?'联系人':'Contacts'" align="center" prop="name" width="110">
</el-table-column>
<el-table-column :label="language==0?'联系方式':'Contact Way'" :min-width="language==0?100:130" align="center"
prop="phone">
</el-table-column>
<el-table-column :label="language==0?'抵达时间':'Time Of Arrival'" align="center" width="180">
<template #default="{row}">
{{ row.arrivalDate + ' ' + row.arrivaTime }}
</template>
</el-table-column>
<el-table-column :label="language==0?'人数':'Number Of People'" :min-width="language==0?120:170" align="center"
prop="counts">
</el-table-column>
<el-table-column :label="language==0?'航班 / 车次':'Flight / train number'" :min-width="language==0?120:190"
align="center"
prop="flight">
</el-table-column>
<el-table-column :label="language==0?'机场 / 火车站':'Airport / Train station'" :min-width="language==0?120:200"
align="center"
prop="stationName">
</el-table-column>
<el-table-column :label="language==0?'航站楼':'Terminal'" align="center" prop="terminal" width="160">
</el-table-column>
<el-table-column :label="language==0?'出发地':' Place Of Departure'" :min-width="language==0?120:200"
align="center" prop="hotle">
<template #default="{row}">
{{ row.serviceType != 1 ? row.hotle : row.stationName }}
</template>
</el-table-column>
<el-table-column :label="language==0?'目的地':'Destination'" :min-width="language==0?120:200"
align="center" prop="hotle">
<template #default="{row}">
{{ row.serviceType == 1 ? row.hotle : row.stationName }}
</template>
</el-table-column>
</el-table>
<PaginationPc
v-show="total>0"
v-model:limit="query.pageSize"
v-model:page="query.pageNum"
:total="total"
@pagination="getList"
/>
</div>
</div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {useStorage} from "@vueuse/core/index"
import {aircraft} from "@/apiPc/match";
import PaginationPc from "@/components/PaginationPc";
import {useRoute} from 'vue-router'
const language = useStorage('language', 0)
const list = ref([])
const total = ref(0)
const route = useRoute()
const query = ref({
text: '',
pageSize: 10,
pageNum: 1,
cptId: route.query.matchId
})
function getList() {
aircraft(query.value).then(res => {
list.value = res
total.value = res.total
})
}
</script>
<style lang="scss" scoped>
.table {
width: 100%;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
th {
background: #eee;
padding: 6px 10px;
text-transform: uppercase;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
font-size: 15px;
}
td {
padding: 6px 10px;
border-right: 1px solid #e1e1e1;
font-size: 15px;
border-bottom: 1px solid #e1e1e1;
vertical-align: middle;
text-align: center;
span {
margin-right: 10px
}
span::after {
content: ','
}
span:last-child::after {
content: ''
}
}
}
</style>