选择区域组件

src/assets/styles/sidebar.scss

@@ -22,7 +22,7 @@
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 1001;
+    z-index: 999;
     overflow: hidden;
     -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
     box-shadow: 2px 0 6px rgba(0,21,41,.35);

src/benyun/components/byArea/byArea.vue

@@ -5,7 +5,7 @@
         <div class="area-box first">
           <div class="left-label">省：</div>
           <div class="right-area">
-            <el-select v-model="provinceCode" clearable @clear="clearProvince" class="areaSelect" :class="{'error':provinceError}" @change="onProvince" size="mini" placeholder="请选择省">
+            <el-select v-model="provinceCode" clearable class="areaSelect" :class="{'error':provinceError}" @change="onProvince" size="mini" placeholder="请选择省">
               <el-option
                 v-for="item in optionsProvince"
                 :key="item.id"
@@ -16,11 +16,11 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="6">
+      <el-col :span="6" v-if="!attrs.show || attrs.show != 'province'">
         <div class="area-box">
-          <div class="left-label">市</div>
+          <div class="left-label">市：</div>
           <div class="right-area">
-            <el-select v-model="cityCode" clearable class="areaSelect" :class="{'error':cityError}" @clear="clearCity" @change="onCity" size="mini" placeholder="请选择市">
+            <el-select v-model="cityCode" clearable class="areaSelect" :class="{'error':cityError}" @change="onCity" size="mini" placeholder="请选择市">
               <el-option
                 v-for="item in optionsCity"
                 :key="item.id"
@@ -31,11 +31,11 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="6">
+      <el-col :span="6" v-if="!attrs.show || (attrs.show != 'province' && attrs.show != 'city')">
         <div class="area-box last">
           <div class="left-label">区/县：</div>
           <div class="right-area">
-            <el-select v-model="countyCode" clearable @clear="clearCounty" class="areaSelect" :class="{'error':countyError}" @change="onCounty" size="mini" placeholder="请选择区/县">
+            <el-select v-model="countyCode" clearable class="areaSelect" :class="{'error':countyError}" @change="onCounty" size="mini" placeholder="请选择区/县">
               <el-option
                 v-for="item in optionsCounty"
                 :key="item.id"
@@ -46,11 +46,41 @@
           </div>
         </div>
       </el-col>
+      <el-col :span="6" v-if="!attrs.show || (attrs.show != 'province' && attrs.show != 'city' && attrs.show != 'county')" >
+        <div class="area-box last">
+          <div class="left-label">街道：</div>
+          <div class="right-area">
+            <el-select v-model="townCode" clearable class="areaSelect" @change="onTown" size="mini" placeholder="请选择街道">
+              <el-option
+                v-for="item in optionsTown"
+                :key="item.id"
+                :label="item.name"
+                :value="item.code">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script lang="ts">
+/*
+  config:{
+    attr:{
+      province:'' //省
+      provinceCode:'' //省编码
+      city:''   //市
+      cityCode:''  //市编码
+      county:''  //县/区
+      countyCode:''   //县/区编码
+      town:''  //街道
+      townCode:''  //街道编码
+      show:'province/city/county'   //显示的层级
+    }
+  }
+*/
 import { Component, Prop, Vue, Mixins,Watch } from "vue-property-decorator";
 import VueViews from '@/benyun/compVue/VueViews'
 @Component
@@ -58,76 +88,195 @@ export default class ByArea extends VueViews {
   provinceCode='';
   cityCode='';
   countyCode='';
+  townCode='';
   province='';
   city='';
   county='';
+  town='';
   area='';
   areaCode='';
   optionsProvince:Array<any>=[];
   optionsCity:Array<any>=[];
   optionsCounty:Array<any>=[];
+  optionsTown:Array<any>=[];
   provinceError = false;
   cityError = false;
   countyError = false;
-
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
   mounted(){
-    this.request({
-      data:{
-        parentCode:'86'
-      },
-      success:(data:any) => {
-        this.optionsProvince = data;
-        console.log(this.optionsProvince)
-      }
-    })
+    this.getProvince();
   }
 
-  clearProvince(){
-    this.cityCode='';
-    this.countyCode='';
-    this.province='';
+  onProvince(v:any){
+    this.province = '';
+    this.area = '';
+    for(const item of this.optionsProvince){
+      if(item.code == v){
+        this.province = item.name;
+        this.area = item.fullName;
+      }
+    }
     this.city='';
+    this.cityCode = '';
     this.county='';
-    this.area='';
-    this.areaCode='';
-    this.optionsCity=[];
-    this.optionsCounty=[];
+    this.countyCode = '';
+    this.optionsCity = [];
+    this.optionsCounty = [];
+    this.townCode = '';
+    this.town = '';
+    this.optionsTown=[];
+    this.areaCode = v;
     this.provinceError = false;
+    if(v){
+      this.getCity(v);
+    }
     this.onChange();
   }
-  clearCity(){
-    this.countyCode='';
-    this.city='';
+  onCity(v:any){
+    this.city = '';
+    this.area = '';
+    for(const item of this.optionsCity){
+      if(item.code == v){
+        this.city = item.name;
+        this.area = item.fullName;
+      }
+    }
     this.county='';
-    this.area=this.province;
-    this.areaCode=this.provinceCode+'0000';
-    this.optionsCounty=[];
+    this.countyCode = '';
+    this.optionsCounty = [];
+    this.townCode = '';
+    this.town = '';
+    this.optionsTown=[];
+    this.areaCode = v;
     this.cityError = false;
+    if(v){
+      this.getCounty(v);
+    }
     this.onChange();
   }
-  clearCounty(){
-    this.countyCode='';
-    this.county='';
-    this.area=this.city;
+  onCounty(v:any){
+    this.county = '';
+    this.area = '';
+    for(const item of this.optionsCounty){
+      if(item.code == v){
+        this.county = item.name;
+        this.area = item.fullName;
+      }
+    }
+    this.townCode = '';
+    this.town = '';
+    this.optionsTown=[];
+    
+    this.areaCode = v;
     this.countyError = false;
-    this.areaCode=this.cityCode+'00';
+    if(v){
+      this.getTown(v);
+    }
     this.onChange();
   }
-  onProvince(v:any){
-
+  onTown(v:any){
+    this.town = '';
+    this.area = '';
+    for(const item of this.optionsTown){
+      if(item.code == v){
+        this.town = item.name;
+        this.area = item.fullName;
+      }
+    }
+    this.areaCode = v;
+    this.onChange();
+  }
+  getValue(){
+    let obj:any={};
+    if(this.attrs.province){
+      obj[this.attrs.province]=this.province;
+    }
+    if(this.attrs.provinceCode){
+      obj[this.attrs.provinceCode]=this.provinceCode;
+    }
+    if(this.attrs.city){
+      obj[this.attrs.city]=this.city;
+    }
+    if(this.attrs.cityCode){
+      obj[this.attrs.cityCode]=this.cityCode
+    }
+    if(this.attrs.county){
+      obj[this.attrs.county]=this.county;
+    }
+    if(this.attrs.countyCode){
+      obj[this.attrs.countyCode]=this.countyCode
+    }
+    if(this.attrs.town){
+      obj[this.attrs.town]=this.town;
+    }
+    if(this.attrs.townCode){
+      obj[this.attrs.townCode]=this.townCode
+    }
+    if(this.attrs.areaCode){
+      obj[this.attrs.areaCode]=this.areaCode;
+    }
+    if(this.attrs.area){
+      obj[this.attrs.area]=this.area;
+    }
+    return obj;
   }
-  onCity(v:any){}
-  onCounty(v:any){}
   onChange(){
-    
+    this.$emit('onChange',this.getValue())
+  }
+  //获取省数据
+  getProvince(){
+    this.request({
+      params:{
+        parentCode:'86'
+      },
+      success:(data:any) => {
+        this.optionsProvince = data;
+      }
+    })
+  }
+  //获取市
+  getCity(v:any){
+    this.request({
+      params:{
+        parentCode:v
+      },
+      success:(data:any) => {
+        this.optionsCity = data;
+      }
+    })
+  }
+  //获取县/区
+  getCounty(v:any){
+    this.request({
+      params:{
+        parentCode:v
+      },
+      success:(data:any) => {
+        this.optionsCounty = data;
+      }
+    })
+  }
+  //获取街道
+  getTown(v:any){
+    this.request({
+      params:{
+        parentCode:v
+      },
+      success:(data:any) => {
+        this.optionsTown = data;
+      }
+    })
   }
-
   request(data:any){
     let parame:any = {
       url:'/omsOrder/omsArea/getByParentCode',
       method: 'GET',
     };
-    parame.data = data.data;
+    parame.params = data.params;
     parame.success = (res:any) => {
       data.success(res.data)
     }
@@ -147,7 +296,7 @@ export default class ByArea extends VueViews {
     display: flex;
     align-items: center;
     .left-label{
-      // width: 100px;
+      width: 100px;
       text-align: right;
       // flex-shrink: 0;
       // .require{

src/main.ts

@@ -38,6 +38,8 @@ import warehouseDialog from './components/warehouseDialog/warehouseDialog.vue'
 Vue.component('warehouseDialog', warehouseDialog);
 import productStore from './components/productStore/productStore.vue'
 Vue.component('productStore', productStore);
+import buyer from './components/buyer/buyer.vue'
+Vue.component('by-buyer', buyer);
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size