开通线路价格组件

src/components/RoutersSelector/index.vue

@@ -10,14 +10,28 @@
                 <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="destCountryId" clearable>
+                <el-option v-for="item in countryList" :key="item.id" :label="$l(item, 'title')" :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>
+            -->
+            <el-select :placeholder="$t('请选择目的地')" v-model="destCityId" clearable>
+                <el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi" />
+            </el-select>
+            {{$t('目的仓')}}：
+            <el-select :placeholder="$t('请选择目的仓')" v-model="destWarehouseId" clearable>
+                <el-option v-for="item in AddressTown" :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-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>
@@ -82,7 +96,8 @@
 </template>
 <script>
 import {getChannelList} from '@/api/ecw/channel'
-import {getTradeCityList} from '@/api/ecw/region'
+import {getListTree, getTradeCityList} from '@/api/ecw/region'
+import {getRegionList} from "@/api/ecw/order";
 import {openedRouterList} from '@/api/ecw/warehouse'
 import {getProductAttrList} from "@/api/ecw/productAttr";
 import Template from "@/views/cms/template";
@@ -115,7 +130,13 @@ export default {
             checkAll: null,
             groupChecker: {}, // 分组全选状态
             attrList:[], // 商品特性
-            inited: false
+            inited: false,
+            countryList: [], //目的国
+            AddressCity: [], //目的地
+            AddressTown: [], //目的仓
+            destCountryId: null,
+            destCityId: null,
+            destWarehouseId: null,
             
         }
     },
@@ -124,6 +145,7 @@ export default {
             return this.tradeCityList.filter(item => item.type == 1 || item.type == 3)
         },
         exportCityList(){
+            //字典：贸易类型字典region_trade_type，0非进出口，1进口，2出口，3进出口
             return this.tradeCityList.filter(item => item.type == 2 || item.type == 3)
         },
         exportCityIds(){
@@ -185,6 +207,7 @@ export default {
                         transportTypeList.push(child)
                     }
                 })
+            console.log(transportTypeList)
             return transportTypeList
         },
         // 是否显示商品特性(渠道)
@@ -211,10 +234,10 @@ export default {
         exportCity(){
             this.getOpenedRouterList()
         },
-        importCity(){
+        /*importCity(){
           this.getChannelList()
           this.getOpenedRouterList()
-        },
+        },*/
         selectedRoutes(val){
             this.$emit('input', val)
             // 如果选择发生变化
@@ -252,18 +275,107 @@ export default {
                     this.groupChecker[key] = false
                 })
             }
+        },
+        destCountryId: {
+            //监听当前地区值的变化，于与上方地区值进行了双向绑定
+            deep: true, //深度监听
+            handler() {
+                //每当值省份值改变时其下地区值进行清空
+                this.AddressCity = [];
+                this.AddressTown = [];
+                this.destWarehouseId = "";
+                this.destCityId = "";
+                this.findByprovinceCode();
+                if (this.destCountryId == "") {
+                    //1 是所有区域，2 国家，3是市，
+                    this.getAddressCity()
+                    this.getAddressTown()
+                } else if (
+                    this.destCountryId != "" &&
+                    this.destCityId == "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    this.getAddressTown()
                 }
+                this.getOpenedRouterList()
             },
-    async created(){
+        },
+        destCityId: {
+            deep: true, //深度监听 目的仓
+            handler() {
+                this.AddressTown = [];
+                this.destWarehouseId = "";
+                this.findBycityCode();
+                if (
+                    this.destCityId != "" &&
+                    this.destCountryId != "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    //获取当前城市值id，获取该城市下区域
+                    this.getChannelList()
+                } else if (
+                    this.destCountryId == "" &&
+                    this.destCityId == "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    this.getAddressTown()
+                } else if (
+                    this.destCountryId != "" &&
+                    this.destCityId == "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    this.findByprovinceCode()
+                    this.getAddressTown()
+                } else if (
+                    this.destCountryId == "" &&
+                    this.destCityId != "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    //获取当前城市值id，获取该城市下区域
                     this.getChannelList()
+                }
+                this.getOpenedRouterList()
+            },
+        },
+        destWarehouseId: {
+            deep: true, //深度监听
+            handler() {
+                if (
+                    this.destCountryId != "" &&
+                    this.destCityId != "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    //获取当前城市值id，获取该城市下区域
+                    this.findBycityCode()
+                } else if (
+                    this.destCountryId != "" &&
+                    this.destCityId == "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    this.getAddressTown()
+                } else if (
+                    this.destCountryId == "" &&
+                    this.destCityId != "" &&
+                    this.destWarehouseId == ""
+                ) {
+                    this.findBycityCode()
+                }
+                // this.getOpenedRouterList()
+            },
+        },
+    },
+    async created(){
         this.tradeCityList = (await getTradeCityList()).data
         // 路线需要过滤失效的进出口城市，所以在程序加载后再加载路线
         await this.getOpenedRouterList()
         if(this.option){
             this.changeOption()
         }
-
         await this.$nextTick()
+        this.getCountryList()
+        this.getAddressCity()
+        this.getAddressTown()
+        this.getChannelList()
         if(this.value && this.value.length){
             this.selectedRoutes = this.value
         }
@@ -277,11 +389,15 @@ export default {
         this.inited = true
     },
     methods:{
-      async getChannelList(){
+        getChannelList(){
+            if (this.type == 'sea') return
             let query = {
-          cityId: this.importCity
+                // cityId: this.importCity
+                cityId: this.destCityId
             }
-        this.channelList = (await getChannelList(query)).data
+            getChannelList(query).then(res => {
+                this.channelList = res.data
+            })
         },
         getAttrList(){
             getProductAttrList().then(res => {
@@ -290,7 +406,10 @@ export default {
         },
         changeOption(){
             if(!this.option) return
-            this.importCity = +this.option.importCity || 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
             this.exportCity = +this.option.exportCity || null
             this.transportType = this.option.transportId || null
             this.channelId = +this.option.channelId || null
@@ -308,8 +427,11 @@ export default {
             if(this.exportCity){
                 params.startCityId = this.exportCity
             }
-            if(this.importCity){
-                params.destCityId = this.importCity
+            if(this.destCountryId){
+                params.destCountryId = this.destCountryId
+            }
+            if(this.destCityId){
+                params.destCityId = this.destCityId
             }
             const res = await openedRouterList(params)
             this.openedRouterList = res.data.filter(item => {
@@ -368,6 +490,34 @@ export default {
           if(!this.type) return true
           return (this.type == 'sea' ? ['1','2'] : ['3', '4']).indexOf(item.value) > -1
         },
+        /* 国家 */
+        getCountryList() {
+            getListTree({ treeType: 1 }).then((response) => {
+                this.countryList = response.data;
+            });
+        },
+        getAddressCity() {
+            getRegionList(4, 4).then(({ data }) => {
+                this.AddressCity = data;
+            })
+        },
+        getAddressTown() {
+            getRegionList(5, 5).then(({ data }) => {
+                this.AddressTown = data;
+            })
+        },
+        findByprovinceCode() {
+            //获取当前省份值id，获取该省份下城市 destCountryId provinceCode
+            getRegionList(2, this.destCountryId).then(({ data }) => {
+                this.AddressCity = data;
+            })
+        },
+        findBycityCode() {
+            //获取当前城市值id，获取该城市下区域
+            getRegionList(3, this.destCityId).then(({ data }) => {
+                this.AddressTown = data;
+            })
+        },
     }
 }
 </script>