页面部分：
<template>
<!-- 查询服务 -- 船期查询 -->
<div class="ship_date__query">
<div class="ship_date__query-center">
<el-form ref="formData" class="center-form" label-width="110px">
<el-form-item label="航线">
<el-select v-model="ROUTES" placeholder=" " filterable :popper-append-to-body="false">
<el-option v-for="item in routesData" :key="item.SERVICE_ID" :label="item.SERVICE_NAME" :value="item.SERVICE_ID"></el-option>
</el-select>
</el-form-item>
<el-form-item label="船名">
<el-select v-model="VESSEL_NAMEC" placeholder=" " filterable :popper-append-to-body="false">
<el-option v-for="item in formData" :key="item.VESSEL_ID" :label="item.VESSEL_NAMEC" :value="item.VESSEL_ID"></el-option>
</el-select>
</el-form-item>
<el-form-item label="航次">
<el-input v-model="SHIPVOY"></el-input>
</el-form-item>
<el-form-item label=""></el-form-item>
<el-form-item label="预计离港时间" style="margin-left: 20px;">
<el-date-picker v-model="time" type="date" placeholder=""></el-date-picker>
</el-form-item>
<el-form-item label-width="30px">
<el-col class="line" :span="4">----</el-col>
<el-date-picker v-model="timeLive" type="date" placeholder="" ></el-date-picker>
</el-form-item>
<div class="btn" @click="getVOYAGE2">查询</div>
<div class="btns" @click="getclear">重置</div>
</el-form>
</div>
<div class="ship_date__query-bottom">
<el-table :data="tableData" ref="multipleTable" class="ship_date__query-table" border>
<el-table-column prop="VESSEL_NAMEC" label="船中文名" align=center></el-table-column>
<el-table-column prop="VESSEL_NAMEE" label="船英文名" align=center></el-table-column>
<el-table-column prop="VMP_VOYAGES" label="航次" align=center ></el-table-column>
<el-table-column prop="VMP_BIG_VOYAGES" label="大航次" align=center ></el-table-column>
<el-table-column prop="SERVICE_NAME" label="航线" align=center></el-table-column>
<el-table-column prop="Joining_together" label="挂靠港口/码头" width="180" align=center></el-table-column>
<el-table-column prop="VM_ETA" label="预计离港时间" align=center></el-table-column>
<el-table-column prop="VM_ETD" label="预计到港时间" align=center></el-table-column>
<!-- <el-table-column prop="PORT_NAMEC" label="港口名称" align=center></el-table-column>
<el-table-column prop="OPERATORCOMPANY_SHORTNAME" label="码头名称" align=center></el-table-column> -->
</el-table>
</div>
</div>
</template>
逻辑部分：
<script>
export default {
name: 'ShipDateQuery',
data () {
return {
ROUTES: '',
routesData: [],
VESSEL_NAMEC: '',
formData: [],
SHIPVOY: '',
time: '',
timeLive: '',
tableData: []
}
},
created () {
this.getShip()
this.getRoutes()
},
methods: {
// 船名查询
async getShip () {
const result = await this.$http.GetShip({})
this.formData = result.data.data
},
// 航线查询
async getRoutes () {
const result = await this.$http.GetRoutes({})
this.routesData = result.data.data
},
// 查询接口
async getVOYAGE2 () {
console.log(this.time, 'time')
console.log(this.timeLive, 'timeLive')
const that = this
//时间格式处理--->处理成后端接口需要的格式
that.time = that.time === '' ? '' : String(that.time).indexOf('-') !== -1 ? that.time : that.time.getFullYear() + '-' + (that.time.getMonth() + 1) + '-' + that.time.getDate()
that.timeLive = that.timeLive === '' ? '' : String(that.timeLive).indexOf('-') !== -1 ? that.timeLive : that.timeLive.getFullYear() + '-' + (that.timeLive.getMonth() + 1) + '-' + that.timeLive.getDate()
console.log(this.time, 'time1')
console.log(this.timeLive, 'timeLive1')
const result = await that.$http.VOYAGE2({
RoutesId: that.ROUTES,
Scd_Cname: that.VESSEL_NAMEC,
startDate: that.time,
endDate: that.timeLive,
voy: that.SHIPVOY
})
that.tableData = result.data
},
getclear () {
this.ROUTES = ''
this.VESSEL_NAMEC = ''
this.time = ''
this.timeLive = ''
this.SHIPVOY = ''
}
}
}
</script>
样式部分：
<style lang="scss" scoped>
.ship_date__query{
width: 100%;
height: 100%;
padding: 0 20px;
.ship_date__query-center{
width: 100%;
border: 1px solid #e8e9e9;
margin-bottom: 20px;
padding: 20px 0;
max-width: 1248px;
height: 170px;
.center-form{
display: flex;
flex-wrap: wrap;
.btn {
width: 90px;
height: 40px;
margin-left: 60px;
line-height: 40px;
font-size: 22px;
text-align: center;
align-items: center;
background: #7295d9;
color: #ffffff;
border-radius: 5px;
}
.btns {
margin-left: 20px;
width: 90px;
height: 40px;
line-height: 40px;
font-size: 22px;
text-align: center;
align-items: center;
background: #ffffff;
border: 1px solid #7295d9;
color: #7295d9;
border-radius: 5px;
}
}
.el-form-item {
margin-bottom: 25px;
width: 300px;
}
}
.ship_date__query-bottom {
width: 100%;
height: calc(100% - 210px);
background: #ffffff;
border: 1px solid #e8e9e9;
padding: 15px;
.ship_date__query-table {
border: 1px solid #a9bee7;
}
}
}
</style>
效果展示部分：
