頁面部分：
<template>
??<!--?查詢服務(wù)?--?船期查詢?-->
??<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="預(yù)計(jì)離港時(shí)間"?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="預(yù)計(jì)離港時(shí)間"??align=center></el-table-column>
????????<el-table-column?prop="VM_ETD"?label="預(yù)計(jì)到港時(shí)間"??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
//時(shí)間格式處理--->處理成后端接口需要的格式
??????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>
效果展示部分：
