<template>
<div>
<div class="filters mb-10" v-if="showFilter">
<template v-if="!type">
{{$t('运输方式')}}
<dict-selector :type='DICT_TYPE.ECW_TRANSPORT_TYPE' v-model="transportType" :placeholder="$t('请选择运输方式')" :filter="transportFilter" style="width:150px" />
</template>
{{$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>
<template v-if="type != 'sea'">
{{$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>
</template>
</div>
<div class="mb-10 flex-row" v-if="showFilter">
<el-radio-group v-model="checkAll">
<el-radio :label="true">{{$t('全选')}}</el-radio>
<el-radio :label="false">{{$t('全不选')}}</el-radio>
</el-radio-group>
<el-link class="ml-20" type="danger">{{$t('已选择{n}条路线', {n: selectedRoutes.length})}}</el-link>
</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="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" v-if="[3,4].indexOf(+item.value) > -1">
<template slot-scope="{row}">
{{$l(row.channel, 'name')}}
</template>
</el-table-column>
<el-table-column v-if="showAttr" :label="$t('商品特性')" prop="startTitleZh">
<template slot-scope="{row}">
<!--{{ getAttrNames(row.attrId) }}-->
<template v-if="row.channel && row.channel.attrNameList">
{{row.channel.attrNameList.join(',')}}
</template>
</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}">
<!--给一个Key让他在全选后更新渲染-->
<el-checkbox :key="getSelectedIndex(row)" :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'
import {getProductAttrList} from "@/api/ecw/productAttr";
import Template from "@/views/cms/template";
export default {
components: {Template},
props:{
value: {
type: Array
},
option: Object,
// 类型，sea海运，air空运
type: String,
showFilter:{
type: Boolean,
default: true
}
},
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: {}, // 分组全选状态
attrList:[], // 商品特性
inited: false
}
},
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(this.transportFilter)
.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){
let availChannels = []
// 空运相关的，没有可用的渠道则不显示线路
if(item.cssClass === 'channel'){
availChannels = this.availChannelList.filter(channel => channel.countryId == router.destCountryId)
if(!availChannels.length) return
}
routerList.push(Object.assign({
_merge: item.cssClass == 'channel' ? availChannels.length || 1 : 1,
channel: item.cssClass == 'channel' ? availChannels[0] || { channelId: 0} : {channelId: 0},
}, router)
)
// 字典的cssClass =channel则表示渠道相关（空运，海空联运）
if(item.cssClass == 'channel'){
availChannels.slice(1).forEach(channel => {
routerList.push(Object.assign({channel, _merge: 0}, router))
})
}
}
})
let child = {
label: item.label,
labelEn: item.labelEn,
value: item.value,
_hide: false, // 是否折叠
routerList: routerList
}
transportTypeList.push(child)
}
})
return transportTypeList
},
// 是否显示商品特性(渠道)
showAttr(){
return this.type == 'air'
},
// 显示产品特性
getAttrName(){
return (id) => {
let item = this.attrList.find(item => item.id === +id)
if(!item) return ''
return this.$l(item, 'attrName')
}
},
// 显示多个商品特性
getAttrNames(){
return (ids) => {
if(!ids) return ''
return ids.split(',').filter( item => !!item).map(id => this.getAttrName(id)).join(',')
}
}
},
watch:{
exportCity(){
this.getOpenedRouterList()
},
importCity(){
this.getChannelList()
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()
}
},
// 显示的路线发生变化之后，清空已勾选的路线
filteredRouterList(){
if(this.inited){
this.selectedRoutes = []
Object.keys(this.groupChecker).forEach(key => {
this.groupChecker[key] = false
})
}
}
},
async created(){
this.getChannelList()
this.tradeCityList = (await getTradeCityList()).data
// 路线需要过滤失效的进出口城市，所以在程序加载后再加载路线
await this.getOpenedRouterList()
if(this.option){
this.changeOption()
}
await this.$nextTick()
if(this.value && this.value.length){
this.selectedRoutes = this.value
}
// 如果显示特性，则需要查询特数据备用
if(this.showAttr){
this.getAttrList()
}
await this.$nextTick()
this.inited = true
},
methods:{
async getChannelList(){
let query = {
cityId: this.importCity
}
this.channelList = (await getChannelList(query)).data
},
getAttrList(){
getProductAttrList().then(res => {
this.attrList = res.data
})
},
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)
})
},
async getOpenedRouterList(){
let params = {}
if(this.exportCity){
params.startCityId = this.exportCity
}
if(this.importCity){
params.destCityId = this.importCity
}
const res = await openedRouterList(params)
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){
// 先判断是否已勾选
if(this.getSelectedIndex(router) > -1) return
this.selectedRoutes.push({
lineId: router.id,
shippingChannelId: 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.shippingChannelId == router.channel.channelId
})
},
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])
},
// 运输方式筛选
transportFilter(item){
// 未指定类型则全部可用
if(!this.type) return true
return (this.type == 'sea' ? ['1','2'] : ['3', '4']).indexOf(item.value) > -1
},
}
}
</script>
<style scoped>
.mb-10{
margin-bottom: 10px
}
</style>