Skip to content

J
jiedao-app-operator-master
Commit 68c40f49 authored by zhengyi's avatar zhengyi
Browse files
Options

路线选择器bug修复

parent 7f835652
Show whitespace changes
Inline Side-by-side
Showing with 517 additions and 507 deletions
src/components/RoutersSelector/index.vue
View file @ 68c40f49
......@@ -2,23 +2,24 @@
<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" />
{{ $t('运输方式') }}
<dict-selector :type='DICT_TYPE.ECW_TRANSPORT_TYPE' v-model="transportType" :placeholder="$t('请选择运输方式')"
:filter="transportFilter" style="width:150px"/>
</template>
{{$t('始发地')}}：
{{ $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-option v-for="item in exportCityList" :key="item.id" :label="item.titleZh" :value="item.id"/>
</el-select>
{{$t('目的国')}}：
{{ $t('目的国') }}：
<el-select :placeholder="$t('请选择目的国')"
v-model="destCountryIds"
multiple
clearable>
<el-option v-for="item in countryList" :key="item.id" :label="$l(item, 'title')" :value="item.id" />
<el-option v-for="item in countryList" :key="item.id" :label="$l(item, 'title')" :value="item.id"/>
</el-select>
{{$t('目的城市')}}：
{{ $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" />
......@@ -28,72 +29,77 @@
v-model="destCityIds"
multiple
clearable>
<el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi" />
<el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi"/>
</el-select>
{{$t('目的仓')}}：
{{ $t('目的仓') }}：
<el-select :placeholder="$t('请选择目的仓')"
v-model="destWarehouseIds"
multiple
clearable>
<el-option v-for="item in AddressTown" :key="item.id" :label="item.titleZh" :value="item.id" />
<el-option v-for="item in AddressTown" :key="item.id" :label="item.titleZh" :value="item.id"/>
</el-select>
<template v-if="type != 'sea'">
{{$t('出货渠道')}}:
{{ $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-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 :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>
<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>
{{ $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 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')}}
{{ $l(row, 'startTitle') }}
</template>
</el-table-column>
<el-table-column :label="$t('目的仓')" prop="destTitleZh" >
<el-table-column :label="$t('目的仓')" prop="destTitleZh">
<template slot-scope="{row}">
{{$l(row, 'destTitle')}}
{{ $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')}}
{{ $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(',')}}
{{ 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>
<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>
<el-checkbox :key="getSelectedIndex(row)" :checked="getSelectedIndex(row) > -1"
@change="toggleChecker(row, $event)"></el-checkbox>
</template>
</el-table-column>
</el-table>
......@@ -110,26 +116,27 @@ import {getRegionList} from "@/api/ecw/order";
import {openedRouterList} from '@/api/ecw/warehouse'
import {getProductAttrList} from "@/api/ecw/productAttr";
import Template from "@/views/cms/template";
export default {
components: {Template},
props:{
props: {
value: {
type: Array
},
option: Object,
// 类型，sea海运，air空运
type: String,
showFilter:{
showFilter: {
type: Boolean,
default: true
}
},
data(){
data() {
return {
transportTypeDicts: this.getDictDatas(this.DICT_TYPE.ECW_TRANSPORT_TYPE),
channelList:[],
tradeCityList:[],
openedRouterList:[], // 开放路线
channelList: [],
tradeCityList: [],
openedRouterList: [], // 开放路线
transportType: null, // 运输方式
importCity: null, // 目的地（进口城市）
exportCity: null, // 始发地（出口城市）
......@@ -138,33 +145,36 @@ export default {
hideMap: {}, // 折叠状态
checkAll: null,
groupChecker: {}, // 分组全选状态
attrList:[], // 商品特性
attrList: [], // 商品特性
inited: false,
countryList: [], //目的国
AddressCity: [], //目的地
AddressTown: [], //目的仓
destCountryId: null,
destCityId: null,
destWarehouseId: null,
destCountryIds: [],
destCityIds: [],
destWarehouseIds: [],
}
},
computed:{
importCityList(){
computed: {
importCityList() {
return this.tradeCityList.filter(item => item.type == 1 || item.type == 3)
},
exportCityList(){
exportCityList() {
//字典：贸易类型字典region_trade_type，0非进出口，1进口，2出口，3进出口
return this.tradeCityList.filter(item => item.type == 2 || item.type == 3)
},
exportCityIds(){
exportCityIds() {
let ids = []
this.exportCityList.forEach(item => {
ids.push(item.id)
})
return ids
},
importCityIds(){
importCityIds() {
let ids = []
this.importCityList.forEach(item => {
ids.push(item.id)
......@@ -172,33 +182,33 @@ export default {
return ids
},
// 根据选择的渠道筛选
availChannelList(){
availChannelList() {
return this.channelList.filter(item => !this.channelId || this.channelId == item.channelId)
},
filteredRouterList(){
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){
if (this.transportType === null || this.transportType == '' || this.transportType == item.value) {
let routerList = []
this.openedRouterList.forEach(router => {
if(router.transportType == item.value){
if (router.transportType == item.value) {
let availChannels = []
// 空运相关的，没有可用的渠道则不显示线路
if(item.cssClass === 'channel'){
if (item.cssClass === 'channel') {
availChannels = this.availChannelList.filter(channel => channel.countryId == router.destCountryId)
if(!availChannels.length) return
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},
channel: item.cssClass == 'channel' ? availChannels[0] || {channelId: 0} : {channelId: 0},
}, router)
)
// 字典的cssClass =channel则表示渠道相关（空运，海空联运）
if(item.cssClass == 'channel'){
if (item.cssClass == 'channel') {
availChannels.slice(1).forEach(channel => {
routerList.push(Object.assign({channel, _merge: 0}, router))
})
......@@ -220,65 +230,65 @@ export default {
return transportTypeList
},
// 是否显示商品特性(渠道)
showAttr(){
showAttr() {
return this.type == 'air'
},
// 显示产品特性
getAttrName(){
getAttrName() {
return (id) => {
let item = this.attrList.find(item => item.id === +id)
if(!item) return ''
if (!item) return ''
return this.$l(item, 'attrName')
}
},
// 显示多个商品特性
getAttrNames(){
getAttrNames() {
return (ids) => {
if(!ids) return ''
return ids.split(',').filter( item => !!item).map(id => this.getAttrName(id)).join(',')
if (!ids) return ''
return ids.split(',').filter(item => !!item).map(id => this.getAttrName(id)).join(',')
}
}
},
watch:{
exportCity(){
watch: {
exportCity() {
this.getOpenedRouterList()
},
/*importCity(){
this.getChannelList()
this.getOpenedRouterList()
},*/
selectedRoutes(val){
selectedRoutes(val) {
this.$emit('input', val)
// 如果选择发生变化
let total = 0
this.filteredRouterList.forEach(item => {
total += item.routerList.length
})
if(total != val.length && val.length){
if (total != val.length && val.length) {
this.checkAll = null
}
},
value(val){
value(val) {
this.selectedRoutes = val || []
},
checkAll(val){
if(val === true || val === false){
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)
if (this.getSelectedIndex(router) > -1 != val) this.toggleChecker(router, val)
})
})
}
},
option(option){
if(option){
option(option) {
if (option) {
this.changeOption()
}
},
// 显示的路线发生变化之后，清空已勾选的路线
filteredRouterList(){
if(this.inited){
filteredRouterList() {
if (this.inited) {
this.selectedRoutes = []
Object.keys(this.groupChecker).forEach(key => {
this.groupChecker[key] = false
......@@ -372,11 +382,11 @@ export default {
},
},
},
async created(){
async created() {
this.tradeCityList = (await getTradeCityList()).data
// 路线需要过滤失效的进出口城市，所以在程序加载后再加载路线
await this.getOpenedRouterList()
if(this.option){
if (this.option) {
this.changeOption()
}
await this.$nextTick()
......@@ -384,20 +394,20 @@ export default {
this.getAddressCity()
this.getAddressTown()
this.getChannelList()
if(this.value && this.value.length){
if (this.value && this.value.length) {
this.selectedRoutes = this.value
}
// 如果显示特性，则需要查询特数据备用
if(this.showAttr){
if (this.showAttr) {
this.getAttrList()
}
await this.$nextTick()
this.inited = true
},
methods:{
getChannelList(){
methods: {
getChannelList() {
if (this.type == 'sea') return
let query = {
// cityId: this.importCity
......@@ -407,15 +417,15 @@ export default {
this.channelList = res.data
})
},
getAttrList(){
getAttrList() {
getProductAttrList().then(res => {
this.attrList = res.data
})
},
changeOption(){
if(!this.option) return
changeOption() {
if (!this.option) return
console.log("线路信息", this.option)
this.destCountryId = + this.option.destCountryId || null
this.destCountryId = +this.option.destCountryId || null
this.destCityId = +this.option.destCityId || null
this.destWarehouseId = +this.option.destWarehouseId || null
// this.importCity = +this.option.importCity || null
......@@ -424,25 +434,25 @@ export default {
this.channelId = +this.option.channelId || null
},
// 全选、全不选 某个运输方式所有线路
toggleGroupChecker(index, selected){
toggleGroupChecker(index, selected) {
let routerList = this.filteredRouterList[index].routerList
console.log(routerList.length, selected)
routerList.forEach(router => {
this.toggleChecker(router, selected)
})
},
async getOpenedRouterList(){
async getOpenedRouterList() {
let params = {}
if(this.exportCity){
if (this.exportCity) {
params.startCityId = this.exportCity
}
if(this.destCountryIds){
if (this.destCountryIds) {
params.destCountryIds = this.destCountryId
}
if(this.destCityIds){
if (this.destCityIds) {
params.destCityIds = this.destCityIds
}
if(this.destWarehouseIds){
if (this.destWarehouseIds) {
params.destWarehouseIds = this.destWarehouseIds
}
const res = await openedRouterList(params)
......@@ -451,7 +461,7 @@ export default {
})
},
// 切换路线选择
toggleChecker(router, selected){
toggleChecker(router, selected) {
// this.getSelectedIndex(router)
/* this.selectedRoutes.forEach((item, i)=>{
if(item.lineId == router.id && item.shippingChannelId == item.channel.id){
......@@ -459,29 +469,29 @@ export default {
break
}
}) */
if(selected){
if (selected) {
// 先判断是否已勾选
if(this.getSelectedIndex(router) > -1) return
if (this.getSelectedIndex(router) > -1) return
this.selectedRoutes.push({
lineId: router.id,
shippingChannelId: router.channel.channelId,
transportId: router.transportType
})
}else{
} else {
let index = this.getSelectedIndex(router)
if(index > -1){
if (index > -1) {
this.selectedRoutes.splice(index, 1)
}
}
},
getSelectedIndex(router){
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 ) {
SpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex < 2) {
return {
rowspan: row._merge,
colspan: 1
......@@ -493,35 +503,35 @@ export default {
}
},
// 折叠，展开
toggleHide(value){
toggleHide(value) {
this.$set(this.hideMap, value, !this.hideMap[value])
},
// 运输方式筛选
transportFilter(item){
transportFilter(item) {
// 未指定类型则全部可用
if(!this.type) return true
return (this.type == 'sea' ? ['1','2'] : ['3', '4']).indexOf(item.value) > -1
if (!this.type) return true
return (this.type == 'sea' ? ['1', '2'] : ['3', '4']).indexOf(item.value) > -1
},
/* 国家 */
getCountryList() {
getListTree({ treeType: 1 }).then((response) => {
getListTree({treeType: 1}).then((response) => {
this.countryList = response.data;
})
},
getAddressCity() {
getRegionList(4, 4).then(({ data }) => {
getRegionList(4, 4).then(({data}) => {
this.AddressCity = data;
})
},
getAddressTown() {
getRegionList(5, 5).then(({ data }) => {
getRegionList(5, 5).then(({data}) => {
this.AddressTown = data;
})
},
findByprovinceCode() {
if (this.destCountryIds != null && this.destCountryIds.length > 0) {
//获取当前省份值id，获取该省份下城市 destCountryId provinceCode
getRegionList(2, this.destCountryIds).then(({ data }) => {
getRegionList(2, this.destCountryIds).then(({data}) => {
this.AddressCity = data;
})
}
......@@ -530,7 +540,7 @@ export default {
findBycityCode() {
if (this.destCityIds != null && this.destCityIds.length > 0) {
//获取当前城市值id，获取该城市下区域
getRegionList(3, this.destCityIds).then(({ data }) => {
getRegionList(3, this.destCityIds).then(({data}) => {
this.AddressTown = data;
})
}
......@@ -539,7 +549,7 @@ export default {
}
</script>
<style scoped>
.mb-10{
.mb-10 {
margin-bottom: 10px
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment