index.vue

<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>