<template>
<div>
<div class="filters mb-10">
运输方式
<dict-selector :type='DICT_TYPE.ECW_TRANSPORT_TYPE' v-model="transportType" placeholder="请选择运输方式" style="width:150px" />
始发地：
<el-select placeholder="请选择始发地" v-model="exportCity" clearable>
<el-option v-for="item in exportCityList" :key="item.id" :label="item.titleZh" :value="item.id" />
</el-select>
目的地：
<el-select placeholder="请选择目的地" v-model="importCity" clearable>
<el-option v-for="item in importCityList" :key="item.id" :label="item.titleZh" :value="item.id" />
</el-select>
出货渠道:
<el-select placeholder="请选择目渠道" v-model="channelId" clearable>
<el-option v-for="item in channelList" :key="item.channelId" :label="item.nameZh" :value="item.channelId" />
</el-select>
</div>
<div class="mb-10">
<el-radio-group v-model="checkAll">
<el-radio :label="true">全选</el-radio>
<el-radio :label="false">全不选</el-radio>
</el-radio-group>
</div>
<el-row class="" :gutter="10">
<template v-for="item in filteredRouterList">
<el-col :span="12" :key="item.value">
<el-card class="mb-10">
<div slot="header">
{{item.label}}
<el-link type="primary" @click.native="toggleHide(item.value)" style="float:right">{{item._hide ? '展开' : '折叠'}}</el-link>
</div>
<!--table需要给一个key，否则全选的时候不会自动更新渲染-->
<el-table v-if="!hideMap[item.value]" :data="item.routerList" :span-method="SpanMethod" border :key="selectedRoutes.length + item.value">
<el-table-column label="始发地" prop="startTitleZh" />
<el-table-column label="目的地" prop="destTitleZh" />
<el-table-column label="渠道" prop="startTitleZh">
<template slot-scope="{row}">
{{row.channel.nameZh}}
</template>
</el-table-column>
<el-table-column label="操作" prop="">
<template slot-scope="{row}">
<el-checkbox :checked="getSelectedIndex(row) > -1" @change="toggleChecker(row, $event)"></el-checkbox>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</template>
</el-row>
</div>
</template>
<script>
import {getChannelList} from '@/api/ecw/channel'
import {getTradeCityList} from '@/api/ecw/region'
import {openedRouterList} from '@/api/ecw/warehouse'
export default {
props:{
value: {
type: Array
}
},
data(){
return {
transportTypeDicts: this.getDictDatas(this.DICT_TYPE.ECW_TRANSPORT_TYPE),
channelList:[],
tradeCityList:[],
openedRouterList:[], // 开放路线
transportType: null, // 运输方式
importCity: null, // 目的地（进口城市）
exportCity: null, // 始发地（出口城市）
channelId: null,
selectedRoutes: [], // 勾选的路线渠道
hideMap: {}, // 折叠状态
checkAll: null,
}
},
computed:{
importCityList(){
return this.tradeCityList.filter(item => item.type == 1 || item.type == 3)
},
exportCityList(){
return this.tradeCityList.filter(item => item.type == 2 || item.type == 3)
},
exportCityIds(){
let ids = []
this.exportCityList.forEach(item => {
ids.push(item.id)
})
return ids
},
importCityIds(){
let ids = []
this.importCityList.forEach(item => {
ids.push(item.id)
})
return ids
},
availChannelList(){
return this.channelList.filter(item => !this.channelId || this.channelId == item.channelId)
},
filteredRouterList(){
let transportTypeList = []
this.transportTypeDicts
.filter(transport => !this.channelId || transport.cssClass == 'channel')
.forEach(item => {
if(this.transportType === null || this.transportType == '' || this.transportType == item.value){
let routerList = []
this.openedRouterList.forEach(router => {
if(router.transportType == item.value){
routerList.push(Object.assign({
_merge: item.cssClass == 'channel' ? this.availChannelList.length || 1 : 1,
channel: item.cssClass == 'channel' ? this.availChannelList[0] || { channelId: 0} : {channelId: 0},
}, router)
)
// 字典的cssClass =channel则表示渠道相关（空运，海空联运）
if(item.cssClass == 'channel'){
this.availChannelList.slice(1).forEach(channel => {
routerList.push(Object.assign({channel, _merge: 0}, router))
})
}
}
})
let child = {
label: item.label,
value: item.value,
_hide: false, // 是否折叠
routerList: routerList
}
transportTypeList.push(child)
}
})
return transportTypeList
}
},
watch:{
exportCity(){
this.getOpenedRouterList()
},
importCity(){
this.getOpenedRouterList()
},
selectedRoutes(val){
this.$emit('input', val)
// 如果选择发生变化
let total = 0
this.filteredRouterList.forEach(item => {
total += item.routerList.length
})
if(total != val.length && val.length){
this.checkAll = null
}
},
value(val){
this.selectedRoutes = val || []
},
checkAll(val){
if(val === true || val === false){
console.log('选中全部')
this.filteredRouterList.forEach(item => {
item.routerList.forEach(router => {
if(this.getSelectedIndex(router) > -1 != val )this.toggleChecker(router, val)
})
})
}
}
},
created(){
getChannelList().then(res => {
this.channelList = res.data
})
getTradeCityList().then(res => {
this.tradeCityList = res.data
})
this.getOpenedRouterList()
if(this.value && this.value.length){
this.selectedRoutes = this.value
}
},
methods:{
getOpenedRouterList(){
let params = {}
if(this.exportCity){
params.startCityId = this.exportCity
}
if(this.importCity){
params.destCityId = this.importCity
}
openedRouterList(params).then(res => this.openedRouterList = res.data.filter(item => {
return this.exportCityIds.indexOf(item.startCityId) > -1 && this.importCityIds.indexOf(item.destCityId) > -1
}))
},
// 切换路线选择
toggleChecker(router, selected){
// this.getSelectedIndex(router)
/* this.selectedRoutes.forEach((item, i)=>{
if(item.lineId == router.id && item.shippingChannelId == item.channel.id){
index = i
break
}
}) */
if(selected){
this.selectedRoutes.push({
lineId: router.id,
channelId: router.channel.channelId,
transportId: router.transportType
})
}else{
let index = this.getSelectedIndex(router)
if(index > -1){
this.selectedRoutes.splice(index, 1)
}
}
},
getSelectedIndex(router){
return this.selectedRoutes.findIndex(item => {
return item.lineId == router.id && item.channelId == router.channel.channelId
})
/* let index = null
this.selectedRoutes.forEach((item, i)=>{
if(item.lineId == router.id && item.shippingChannelId == router.channel.channelId){
index = i
// break
}
})
return index */
},
SpanMethod({ row, column, rowIndex, columnIndex }){
if (columnIndex < 2 ) {
return {
rowspan: row._merge,
colspan: 1
}
}
return {
rowspan: 1,
colspan: 1
}
},
// 折叠，展开
toggleHide(value){
this.$set(this.hideMap, value, !this.hideMap[value])
}
}
}
</script>
<style scoped>
.mb-10{
margin-bottom: 10px
}
</style>