新增供应商下拉列表及其相应功能

src/views/pms/origin/components/originDetail.vue

@@ -1,7 +1,22 @@
-<template> 
+<template>
   <el-card class="form-container" shadow="never">
     <el-form :model="origin" :rules="rules" ref="originFrom" label-width="150px">
-
+      <el-form-item label="供应商：" prop="compId">
+        <el-select
+          filterable
+          v-model="origin.compId"
+          @change="handleSupplierChange"
+          placeholder="请选择供应商"
+          style="width: 100%;"
+        >
+          <el-option
+            v-for="item in supplierOptList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="生产地名称" prop="originName">
         <el-input v-model="origin.originName"></el-input>
       </el-form-item>
@@ -130,6 +145,7 @@
 <script>
   import {createOrigin, getOrigin, updateOrigin} from '@/api/origin'
   import {originProductList as fetchOriginProductList, createOriginProduct, updateOriginProduct,deleteOriginProduct} from '@/api/origin'
+  import {selectCompList} from '@/api/product';
   import SingleUpload from '@/components/Upload/singleUpload'
   import MultiUpload from '@/components/Upload/multiUpload'
   import {bMapTransQQMap,qqMapTransBMap} from '@/utils/index';
@@ -186,6 +202,7 @@
     data() {
       return {
         origin:Object.assign({}, defaultorigin),
+        supplierOptList: [],
         rules: {
           originName: [
             {required: true, message: '请输入品牌名称', trigger: 'blur'},
@@ -203,15 +220,14 @@
           latitude  : [
             {required: true, message: '请选择经纬度', trigger: 'blur'}
           ],
+          compId: [{required: true, message: '请选择供应商', trigger: 'blur'}]
         },
         originProductList:[],
         originProductListLoading:false,
         center: {lng: 106.632713, lat: 26.653157},
         zoom: 12,
         mapVisible:false,
-        clientHeight:document.documentElement.clientHeight-90, // 设置屏幕高度
-
-
+        clientHeight:document.documentElement.clientHeight-90 // 设置屏幕高度
       }
     },
     computed: {
@@ -257,6 +273,7 @@
 
     },
     created() {
+      this.getSupplierOptList();
       if (this.isEdit) {
         getOrigin(this.$route.query.id).then(response => {
           this.origin = response.data;
@@ -280,7 +297,12 @@
         }).catch(err => {
           this.originProductListLoading = false;
         });
-
+      },
+      /** 获取供应商下拉列表 */
+      getSupplierOptList() {
+        selectCompList().then(response => {
+          this.supplierOptList = response.data;
+        });
       },
       // 新增产出物
       handleAddOriginProduct(){
@@ -349,66 +371,73 @@
         this.origin = Object.assign({},defaultorigin);
       },
       handlermap ({BMap, map}) {
-          let _this = this;	// 设置一个临时变量指向vue实例；
-          var geolocation = new BMap.Geolocation();
-          geolocation.getCurrentPosition(function(r){
-            // console.log(r);
-            _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
-            // console.log('_this.center',_this.origin);
-            if(_this.origin.latitude&&_this.origin.longitude){
-              let transqq = qqMapTransBMap(_this.origin.longitude,_this.origin.latitude);
-              // console.log('transqq',transqq);
-              _this.center = {lng:transqq.lng, lat: transqq.lat};
-            };
-            let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
-            let myMarker = new BMap.Marker(new BMap.Point(_this.origin.longitude, _this.origin.latitude),{icon: Icon_0});
-            map.addOverlay(myMarker);
-            _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
-            _this.initLocation = true;
-          },{enableHighAccuracy: true})
-            window.map = map;
-        },
-        //点击地图监听
-        clickEvent(e){
-          map.clearOverlays();
+        let _this = this;	// 设置一个临时变量指向vue实例；
+        var geolocation = new BMap.Geolocation();
+        geolocation.getCurrentPosition(function(r){
+          // console.log(r);
+          _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
+          // console.log('_this.center',_this.origin);
+          if(_this.origin.latitude&&_this.origin.longitude){
+            let transqq = qqMapTransBMap(_this.origin.longitude,_this.origin.latitude);
+            // console.log('transqq',transqq);
+            _this.center = {lng:transqq.lng, lat: transqq.lat};
+          };
           let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
-          var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
+          let myMarker = new BMap.Marker(new BMap.Point(_this.origin.longitude, _this.origin.latitude),{icon: Icon_0});
           map.addOverlay(myMarker);
-          //用所定位的经纬度查找所在地省市街道等信息
-          var point = new BMap.Point(e.point.lng, e.point.lat);
-          var gc = new BMap.Geocoder();
-          let _this = this;
-          gc.getLocation(point, function (rs) {
-            var addComp = rs.addressComponents;
-            // console.log(rs);//地址信息
-            _this.origin.provinceId = rs.addressComponents.province;
-            _this.origin.cityId = rs.addressComponents.city;
-            _this.origin.countyId = rs.addressComponents.district;
-            _this.origin.detailAddress = rs.address;
-          });
-          //转为高德坐标
-          let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
-          this.origin.longitude = transGaode.lng;
-          this.origin.latitude = transGaode.lat;
-          // this.origin.longitude = e.point.lng;
-          // this.origin.latitude = e.point.lat;
-        },
-        //定位成功回调
-        getLoctionSuccess(point, AddressComponent, marker){
-          // map.clearOverlays();
-          // let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
-          // var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
-          // map.addOverlay(myMarker);
-          // this.company.longitude = point.point.lng;
-          // this.company.latitude = point.point.lat;
-        },
-        findlocation(){
-          this.$emit("findlocdata",this.company)
-          this.mapVisible = false
-        },
-        mapShow(){
-          this.mapVisible = true
-        },
+          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
+          _this.initLocation = true;
+        },{enableHighAccuracy: true})
+          window.map = map;
+      },
+      //点击地图监听
+      clickEvent(e){
+        map.clearOverlays();
+        let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
+        var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
+        map.addOverlay(myMarker);
+        //用所定位的经纬度查找所在地省市街道等信息
+        var point = new BMap.Point(e.point.lng, e.point.lat);
+        var gc = new BMap.Geocoder();
+        let _this = this;
+        gc.getLocation(point, function (rs) {
+          var addComp = rs.addressComponents;
+          // console.log(rs);//地址信息
+          _this.origin.provinceId = rs.addressComponents.province;
+          _this.origin.cityId = rs.addressComponents.city;
+          _this.origin.countyId = rs.addressComponents.district;
+          _this.origin.detailAddress = rs.address;
+        });
+        //转为高德坐标
+        let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
+        this.origin.longitude = transGaode.lng;
+        this.origin.latitude = transGaode.lat;
+        // this.origin.longitude = e.point.lng;
+        // this.origin.latitude = e.point.lat;
+      },
+      //定位成功回调
+      getLoctionSuccess(point, AddressComponent, marker){
+        // map.clearOverlays();
+        // let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
+        // var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
+        // map.addOverlay(myMarker);
+        // this.company.longitude = point.point.lng;
+        // this.company.latitude = point.point.lat;
+      },
+      findlocation(){
+        this.$emit("findlocdata",this.company)
+        this.mapVisible = false
+      },
+      mapShow(){
+        this.mapVisible = true
+      },
+      handleSupplierChange(val) {
+        let supplierInfoObj = {};
+        supplierInfoObj = this.supplierOptList.find(item => {
+          return item.value === val;
+        });
+        this.origin.compName = supplierInfoObj.label;
+      },
     }
   }
 </script>