|
|
|
<template>
|
|
|
|
<!-- $t is vue-i18n global function to translate lang -->
|
|
|
|
<div class="app-container">
|
|
|
|
<!--工具条-->
|
|
|
|
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
|
|
|
|
<el-form :inline="true" :model="searchText">
|
|
|
|
<el-form-item>
|
|
|
|
<el-date-picker v-model="searchText.startdate" value-format="yyyy-MM-dd" type="date"
|
|
|
|
placeholder="开始航班日期"
|
|
|
|
></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-date-picker v-model="searchText.enddate" value-format="yyyy-MM-dd" type="date"
|
|
|
|
placeholder="结束航班日期"
|
|
|
|
></el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button :loading="listLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="fetchData">查询</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
<el-tag
|
|
|
|
:key="note.message"
|
|
|
|
:type="note.type">
|
|
|
|
{{note.message}}
|
|
|
|
</el-tag>
|
|
|
|
</el-form>
|
|
|
|
</el-col>
|
|
|
|
<div>
|
|
|
|
<FilenameOption v-model="filename" />
|
|
|
|
<AutoWidthOption v-model="autoWidth" />
|
|
|
|
<BookTypeOption v-model="bookType" />
|
|
|
|
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">导出 Excel</el-button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-table v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
|
|
|
<el-table-column align="center" label="Id" width="95">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
{{ scope.$index }}
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="运单号">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
{{ scope.row.waybillnomaster }}
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="航班号" width="115" align="center">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
{{ scope.row.flightno }}
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column align="center" label="航班日期" width="220" :formatter="dateFormat">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<i class="el-icon-time"/>
|
|
|
|
<span>{{ scope.row.flightDate | parseTime('{y}-{m}-{d}')}}</span>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="航段" width="110" align="center">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-tag>{{ scope.row.segment }}</el-tag>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { getNmmsAnalysisList } from '@/api/agent-excel'
|
|
|
|
import { parseTime } from '@/utils'
|
|
|
|
|
|
|
|
// options components
|
|
|
|
import FilenameOption from './components/FilenameOption'
|
|
|
|
import AutoWidthOption from './components/AutoWidthOption'
|
|
|
|
import BookTypeOption from './components/BookTypeOption'
|
|
|
|
import Export2Excel from '@/vendor/Export2Excel'
|
|
|
|
export default {
|
|
|
|
name: 'ExportExcelNMMS',
|
|
|
|
components: { FilenameOption, AutoWidthOption, BookTypeOption },
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
list: [],
|
|
|
|
fetchList: [],
|
|
|
|
listLoading: false,
|
|
|
|
downloadLoading: false,
|
|
|
|
filename: '',
|
|
|
|
autoWidth: true,
|
|
|
|
bookType: 'xlsx',
|
|
|
|
searchText: {
|
|
|
|
startdate: undefined,
|
|
|
|
enddate: undefined
|
|
|
|
},
|
|
|
|
note: {
|
|
|
|
type: 'info',
|
|
|
|
message: ''
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
// this.fetchData()
|
|
|
|
},
|
|
|
|
filters: {
|
|
|
|
parseTime: parseTime
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
dateFormat:function(row,column){
|
|
|
|
var t=new Date(row.updateTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
|
|
|
|
return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();
|
|
|
|
},
|
|
|
|
fetchData() {
|
|
|
|
this.listLoading = true
|
|
|
|
getNmmsAnalysisList(this.searchText).then(response => {
|
|
|
|
this.list = response.data.data
|
|
|
|
this.listLoading = false
|
|
|
|
this.$message({
|
|
|
|
message: '数据查询成功,可以下载excel',
|
|
|
|
type: 'success'
|
|
|
|
});
|
|
|
|
this.note.message = '数据查询成功,可以下载excel;共'+this.list.length+'条数据';
|
|
|
|
this.note.type = 'success';
|
|
|
|
})
|
|
|
|
},
|
|
|
|
handleDownload() {
|
|
|
|
this.downloadLoading = true
|
|
|
|
import('@/vendor/Export2Excel').then(excel => {
|
|
|
|
const tHeader = [
|
|
|
|
'航班号',
|
|
|
|
'航班日期',
|
|
|
|
'航段',
|
|
|
|
'主运单号',
|
|
|
|
'分单号',
|
|
|
|
'运单件数',
|
|
|
|
'运单重量',
|
|
|
|
'舱单件数',
|
|
|
|
'舱单重量',
|
|
|
|
'品名',
|
|
|
|
'航班起始站',
|
|
|
|
'航班起始站中文',
|
|
|
|
'航班目的站',
|
|
|
|
'航班目的站中文',
|
|
|
|
'发货人国家',
|
|
|
|
'发货人国家中文',
|
|
|
|
'发货人区域'
|
|
|
|
]
|
|
|
|
const filterVal = [
|
|
|
|
'flightno',
|
|
|
|
'flightDate',
|
|
|
|
'segment',
|
|
|
|
'waybillnomaster',
|
|
|
|
'waybillnosecondary',
|
|
|
|
'totalpiece',
|
|
|
|
'totalweight',
|
|
|
|
'manifesttotalpiece',
|
|
|
|
'manifesttotalweight',
|
|
|
|
'productname',
|
|
|
|
'originatingstation',
|
|
|
|
'originatingstationcn',
|
|
|
|
'destinationstation',
|
|
|
|
'destinationstationcn',
|
|
|
|
'shipperCountrycode',
|
|
|
|
'countrydescchn',
|
|
|
|
'areadescchn'
|
|
|
|
]
|
|
|
|
const list = this.list
|
|
|
|
const data = this.formatJson(filterVal, list)
|
|
|
|
excel.export_json_to_excel({
|
|
|
|
header: tHeader,
|
|
|
|
data,
|
|
|
|
filename: this.filename,
|
|
|
|
autoWidth: this.autoWidth,
|
|
|
|
bookType: this.bookType
|
|
|
|
})
|
|
|
|
this.downloadLoading = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
formatJson(filterVal, jsonData) {
|
|
|
|
return jsonData.map(v => filterVal.map(j => {
|
|
|
|
if (j === 'timestamp') {
|
|
|
|
return parseTime(v[j])
|
|
|
|
} else {
|
|
|
|
return v[j]
|
|
|
|
}
|
|
|
|
}))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.radio-label {
|
|
|
|
font-size: 14px;
|
|
|
|
color: #606266;
|
|
|
|
line-height: 40px;
|
|
|
|
padding: 0 12px 0 30px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
...
|
...
|
|
