批量设置提单模版更换组件

src/components/RoutersSelectorWithoutChannel/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>

src/views/ecw/warehouse/index.vue

@@ -367,7 +367,7 @@
         </el-form-item>
 
         <el-form-item v-if="showFlag">
-          <routers-selector v-model="ladingform.lineIds" />
+          <routers-selector-without-channel v-model="ladingform.lineIds" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -389,7 +389,7 @@ import { uploadFile } from "@/api/infra/file";
 import { listDept } from "@/api/system/dept";
 import Ueditor from '@/components/Ueditor'
 import {getDictData} from '@/utils/dict'
-import RoutersSelector from '@/components/RoutersSelector';
+import RoutersSelectorWithoutChannel from '@/components/RoutersSelectorWithoutChannel';
 import { has } from 'min-dash';
 import Template from "../../cms/template/index";
 
@@ -398,7 +398,7 @@ export default {
   components: {
       Template,
       Ueditor,
-      RoutersSelector
+    RoutersSelectorWithoutChannel
   },
   data() {
 
@@ -1071,6 +1071,7 @@ export default {
             });
             this.ladingform.lineId=lineId.substr(0,lineId.length-1);
         }
+        console.log(this.ladingform.lineId);
         this.ladingform.account = JSON.stringify(this.arr);
           createTemplate(this.ladingform).then(response => {
               this.$modal.msgSuccess(this.$t("设置路线提单模板成功"));