<template>
<div>
<div class="filters mb-10">
{{$t('运输方式')}}
<dict-selector :type='DICT_TYPE.ECW_TRANSPORT_TYPE' v-model="transportType" :placeholder="$t('请选择运输方式')" style="width:150px" />
{{$t('始发地')}}：
<el-select :placeholder="$t('请选择始发地')" v-model="exportCity" clearable>
<el-option v-for="item in exportCityList" :key="item.id" :label="item.titleZh" :value="item.id" />
</el-select>
{{$t('目的地')}}：
<el-select :placeholder="$t('请选择目的地')" v-model="importCity" clearable>
<el-option v-for="item in importCityList" :key="item.id" :label="item.titleZh" :value="item.id" />
</el-select>
<!-- {{$t('出货渠道')}}:-->
<!-- <el-select :placeholder="$t('请选择目渠道')" 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">{{$t('全选')}}</el-radio>
<el-radio :label="false">{{$t('全不选')}}</el-radio>
</el-radio-group>
</div>
<el-row class="" :gutter="10">
<template v-for="(item, index) in filteredRouterList">
<el-col :span="12" :key="item.value">
<el-card class="mb-10">
<div slot="header">
{{$l(item, 'label')}}
<el-link type="primary" @click.native="toggleHide(item.value)" style="float:right">{{item._hide ? $t('展开') : $t('折叠')}}</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="$t('始发仓')" prop="startTitleZh">
<template slot-scope="{row}">
{{$l(row, 'startTitle')}}
</template>
</el-table-column>
<el-table-column :label="$t('目的仓')" prop="destTitleZh" >
<template slot-scope="{row}">
{{$l(row, 'destTitle')}}
</template>
</el-table-column>
<!-- <el-table-column :label="$t('渠道')" prop="startTitleZh">-->
<!-- <template slot-scope="{row}">-->
<!-- {{$l(row.channel, 'name')}}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column :label="$t('操作')" prop="">
<template slot="header">
<el-checkbox @change="toggleGroupChecker(index, $event)" v-model="groupChecker[item.value]"></el-checkbox>
</template>
<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
},
option: Object
},
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,
groupChecker: {}, // 分组全选状态
}
},
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: 1,
channel: {channelId: 0},
}, router)
)
// 字典的cssClass =channel则表示渠道相关（空运，海空联运）
// if(item.cssClass == 'channel'){
// this.availChannelList.slice(1).forEach(channel => {
// routerList.push(Object.assign({channel, _merge: 0}, router))
// })
// }
}
})
console.log(this.availChannelList)
let child = {
label: item.label,
labelEn: item.labelEn,
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)
})
})
}
},
option(option){
if(option){
this.changeOption()
}
}
},
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
}
if(this.option){
this.changeOption()
}
},
methods:{
changeOption(){
if(!this.option) return
this.importCity = +this.option.importCity || null
this.exportCity = +this.option.exportCity || null
this.transportType = this.option.transportId || null
this.channelId = +this.option.channelId || null
},
// 全选、全不选 某个运输方式所有线路
toggleGroupChecker(index, selected){
let routerList = this.filteredRouterList[index].routerList
console.log(routerList.length, selected)
routerList.forEach(router => {
this.toggleChecker(router, selected)
})
},
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>