前端 sdy

src/components/mapdrag/mapdrag.vue

@@ -1,73 +1,84 @@
 <style lang='scss' scoped>
-.mapContent {
-  position: relative;
-  margin-top: 80px;
-  .center-add{
+  .mapContent {
+    position: relative;
+    margin-top: 50px;
+
+    .center-add {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      z-index: 999;
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  #mapContainer {
+    width: 100%;
+    height: 330px;
+  }
+
+  #tip {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    z-index: 999;
-    width: 30px;
-    height: 30px;
+    top: -45px;
+    display: flex;
+  }
+
+  #tip .el-input {
+    // width: 179px;
+    margin-right: 0px;
+  }
+
+  #tip .el-select {
+    margin-right: 10px;
+  }
+
+  #tip .el-select {
+    width: 179px;
+  }
+
+  #tip .el-textarea {
+    width: 179px;
+
+    /deep/ .el-textarea__inner {
+      height: 40px;
+      resize: none;
+    }
   }
-}
-#mapContainer {
-  width: 100%;
-  height: 300px;
-}
-#tip {
-  position: absolute;
-  top: -75px;
-}
-#tip .el-input {
-  width: 179px;
-  margin-right: 0px;
-}
-#tip .el-select {
-  margin-right: 10px;
-}
-#tip .el-select {
-  width: 179px;
-}
-#tip .el-textarea {
-  width: 179px;
-  /deep/ .el-textarea__inner {
-    height: 40px;
-    resize: none;
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
   }
-}
-.el-button--primary {
-  background-color: #5878e8;
-  border-color: #5878e8;
-}
-.el-button--default {
-  color: #5878e8;
-  border-color: #5473e8;
-}
-.address{
-  display: flex;
-  align-items: center;
-  position:absolute;
-  top: -35px;
-  .address-input{
-    width: 400px;
+
+  .el-button--default {
+    color: #5878e8;
+    border-color: #5473e8;
+  }
+
+  .address {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+
+    // position:absolute;
+    // top: -35px;
+    .address-input {
+      display: inline-block;
+      width: 480px;
+    }
   }
-}
 </style>
 
 <template>
   <div class="mapContent">
-     <img
-        class='center-add'
-        src="../../../public/img/zuobiao.gif"
-        alt=""
-          />
+    <img class='center-add' src="../../../public/img/zuobiao.gif" alt="" />
     <div id="mapContainer"></div>
     <div id="tip" v-show="showFlag === false ? false : true">
-      <el-select v-model="province" @change="selectP" placeholder="省">
+      <!-- <el-select v-model="province" @change="selectP" placeholder="省">
         <el-option
           v-for="item in provinces"
           :key="item.adcode"
@@ -93,366 +104,406 @@
           :value="item.adcode"
         >
         </el-option>
-      </el-select>
+      </el-select> -->
+      <div class="address">
+        <el-input type="text" id="searchValue" placeholder="请输入关键字:" v-model="address" clearable class="address-input">
+        </el-input>
+      </div>
       <el-button>经纬度：{{center}}</el-button>
       <el-button @click="positions" type="primary" v-if='!isShowaddress'>确定定位</el-button>
       <el-button @click="anewselect" v-if='!isShowaddress'>重新选择</el-button>
       <el-button @click="submit" v-if='isShowaddress'>确定</el-button>
     </div>
-    <div class="address" v-if="isShowaddress">
-       <el-input
-        type="text"
-        id="searchValue"
-        placeholder="请输入关键字:"
-        v-model="address"
-        clearable
-        class="address-input"
-      ></el-input>
-    </div>
-    
+
+
   </div>
 </template>
 
 <script>
-import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
-import image from '../../../public/img/ic_locationmarker.jpg'
-export default {
-  data() {
-    return {
-      map: null,
-      provinces: [],
-      province: '',
-      districts: [],
-      district: '',
-      citys: [],
-      city: '',
-      polygons: [],
-      selectedOptions1:[],
-      areacode: '',
-      address: '',
-      objPoint: [],
-      markers: [],
-      zoomEnable: true,
-      dragEnable: true,
-      status: true,
-      center:'',
-    }
-  },
-  props: ['flagVisible', 'position','selectedOptions','isShowaddress','type'],
-  computed: {
-    showFlag() {
-      return this.flagVisible
+  import {
+    regionData,
+    CodeToText,
+    TextToCode
+  } from 'element-china-area-data'
+  import image from '../../../public/img/ic_locationmarker.jpg'
+  export default {
+    data() {
+      return {
+        map: null,
+        provinces: [],
+        province: '',
+        districts: [],
+        district: '',
+        citys: [],
+        city: '',
+        polygons: [],
+        selectedOptions1: [],
+        areacode: '',
+        address: '',
+        objPoint: [],
+        markers: [],
+        zoomEnable: true,
+        dragEnable: true,
+        status: true,
+        center: '',
+      }
     },
-  },
-  watch: {
-    selectedOptions:{
-      handler(newValue, oldValue) {
-        this.province=CodeToText[newValue[0]]
-        this.selectP(this.province)
-        this.city = CodeToText[newValue[1]]
-        this.selectC(CodeToText[newValue[1]])
-        this.district= newValue[2]
-        this.selectD(this.district)
+    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type'],
+    computed: {
+      showFlag() {
+        return this.flagVisible
       },
-      deep: true
-    }
-  },
-  async created() {
-    // 已载入高德地图API，则直接初始化地图
-    if (window.AMap && window.AMapUI) {
-      this.initMap()
-      // 未载入高德地图API，则先载入API再初始化
-    } else {
-      await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
-      await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
-      this.initMap()
-    }
-  },
-  mounted() {
+    },
+    watch: {
+      selectedOptions: {
+        handler(newValue, oldValue) {
+          this.province = CodeToText[newValue[0]]
+          this.selectP(this.province)
+          this.city = CodeToText[newValue[1]]
+          this.selectC(CodeToText[newValue[1]])
+          this.district = newValue[2]
+          this.selectD(this.district)
+        },
+        deep: true
+      }
+    },
+    async created() {
+      // 已载入高德地图API，则直接初始化地图
+      if (window.AMap && window.AMapUI) {
+        this.initMap()
+        // 未载入高德地图API，则先载入API再初始化
+      } else {
+        await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
+        await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
+        this.initMap()
+      }
+    },
+    mounted() {
       // console.log(this)
-    setTimeout(() => {
-      var that = this
-      this.map = new AMap.Map('mapContainer', {
-        resizeEnable: true,
-        zoom: 10,
-        zoomEnable: this.zoomEnable,
-        dragEnable: this.dragEnable,
-      })
-      this.map.on('click', function (e) {
-        if (this.status) {
-          var marker = new AMap.Marker({
-            position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          })
-          that.map.remove(that.markers)
-          that.$emit('marker', e)
-          that.markers.push(marker)
-          // 将创建的点标记添加到已有的地图实例：
-          that.map.add(marker)
-        }
-      })
-      this.marker = new AMap.Marker({
-        icon: new AMap.Icon({
-          size: new AMap.Size(0, 0),
-          image: image,
-        }),
-        map: that.map,
-      })
-      AMap.plugin(
-        ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],
-        function () {
-          var autocomplete = new AMap.Autocomplete({
-            input: 'searchValue',
-          })
-          var placeSearch = new AMap.PlaceSearch({
-            city: that.acode,
-            citylimit: true,
-            pageSize: 1,
-            pageIndex: 1,
-            map: that.map,
-          })
-          AMap.event.addListener(autocomplete, 'select', function (e) {
-            that.marker.setMap(that.map)
-            that.marker.setPosition(e.poi.location)
-            placeSearch.search() // 关键字查询查询
-            geocoder.getAddress(e.poi.location, function (status, result) {
-              console.log(e.poi.location,"klokolkjolk")
-              if (status === 'complete') {
-                var obj = {}
-                that.province = result.regeocode.addressComponent.province
-                that.city = result.regeocode.addressComponent.city
-                that.district = result.regeocode.addressComponent.district
-                obj.formattedAddress = result.regeocode.formattedAddress
-                obj.areacode = result.regeocode.addressComponent.adcode
-                that.address = result.regeocode.formattedAddress
-                obj.lat = e.poi.location.lat
-                obj.lng = e.poi.location.lng
-                that.$emit('searchAddress', obj)
-              } else {
-                that.$emit('searchAddress', '')
-              }
+      setTimeout(() => {
+        var that = this
+        this.map = new AMap.Map('mapContainer', {
+          resizeEnable: true,
+          zoom: 10,
+          zoomEnable: this.zoomEnable,
+          dragEnable: this.dragEnable,
+        })
+        this.map.on('click', function(e) {
+          if (this.status) {
+            var marker = new AMap.Marker({
+              position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat
+                .getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
             })
-            that.map.setFitView()
-          })
-          // 经纬度
-          var geocoder = new AMap.Geocoder({
-            radius: 1000,
-          })
-          that.map.on('moveend', function(e){
-            //地图变动之后需要重新赋值省市区，未完成
-             that.center = that.map.getCenter(); //获取当前地图中心位置
-             that.center.lat =Number(that.center.lat.toFixed(3))
-             that.center.lng =Number(that.center.lng.toFixed(3))
-              that.center.Q =Number(that.center.Q.toFixed(3))
-             that.center.R =Number(that.center.R.toFixed(3))
-                  for (var i = 0, l = that.polygons.length; i < l; i++) {
-              that.polygons[i].setMap(null)
-            }
-            that.marker.setMap(that.map)
-            that.marker.setPosition(that.center)
-            geocoder.getAddress(that.center, function (status, result) {
-              if (status === 'complete') {
-                var obj = {}
-                that.province = result.regeocode.addressComponent.province
-                that.city = result.regeocode.addressComponent.city
-                that.district = result.regeocode.addressComponent.district
-                obj.formattedAddress = result.regeocode.formattedAddress
-                obj.areacode = result.regeocode.addressComponent.adcode
-                that.address = result.regeocode.formattedAddress
-                obj.lat = that.center.lat
-                obj.lng = that.center.lng
-                that.$emit('pickedAddress', obj)
-              } else {
-                that.$emit('pickedAddress', '')
-              }
+            that.map.remove(that.markers)
+            that.$emit('marker', e)
+            that.markers.push(marker)
+            // 将创建的点标记添加到已有的地图实例：
+            that.map.add(marker)
+          }
+        })
+        this.marker = new AMap.Marker({
+          icon: new AMap.Icon({
+            size: new AMap.Size(0, 0),
+            image: image,
+          }),
+          map: that.map,
+        })
+        AMap.plugin(
+          ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch'],
+          function() {
+            var autocomplete = new AMap.Autocomplete({
+              input: 'searchValue',
             })
-          });
-          that.map.on('zoomend', function(){
-            //地图变动之后需要重新赋值省市区，未完成
-            // this.zoom = map.getZoom(); //获取当前地图级别
-            that.center = that.map.getCenter(); //获取当前地图中心位置
-            that.center.lat =Number(that.center.lat.toFixed(3))
-            that.center.lng =Number(that.center.lng.toFixed(3))
-             that.center.Q =Number(that.center.Q.toFixed(3))
-             that.center.R =Number(that.center.R.toFixed(3))
-                       for (var i = 0, l = that.polygons.length; i < l; i++) {
-              that.polygons[i].setMap(null)
-            }
-            that.marker.setMap(that.map)
-            that.marker.setPosition(that.center)
-            geocoder.getAddress(that.center, function (status, result) {
-              if (status === 'complete') {
-                var obj = {}
-                that.province = result.regeocode.addressComponent.province
-                that.city = result.regeocode.addressComponent.city
-                that.district = result.regeocode.addressComponent.district
-                obj.formattedAddress = result.regeocode.formattedAddress
-                obj.areacode = result.regeocode.addressComponent.adcode
-                that.address = result.regeocode.formattedAddress
-                obj.lat = that.center.lat
-                obj.lng = that.center.lng
-                that.$emit('pickedAddress', obj)
+            var placeSearch = new AMap.PlaceSearch({
+              city: that.acode,
+              citylimit: true,
+              pageSize: 1,
+              pageIndex: 1,
+              map: that.map,
+            })
+            var districtSearch = new AMap.DistrictSearch({
+              subdistrict: 1,
+              level: 'city',
+              showbiz: false,
+            });
+
+            AMap.event.addListener(autocomplete, 'select', function(e) {
+              that.marker.setMap(that.map)
+              if (e.poi.location) {
+                placeSearch.search() // 关键字查询查询
+                that.marker.setPosition(e.poi.location)
+                geocoder.getAddress(e.poi.location, function(status, result) {
+                  console.log(e.poi.location, "klokolkjolk")
+                  if (status === 'complete') {
+                    var obj = {}
+                    that.province = result.regeocode.addressComponent.province
+                    that.city = result.regeocode.addressComponent.city
+                    that.district = result.regeocode.addressComponent.district
+                    obj.formattedAddress = result.regeocode.formattedAddress
+                    obj.areacode = result.regeocode.addressComponent.adcode
+                    that.address = result.regeocode.formattedAddress
+                    obj.lat = e.poi.location.lat
+                    obj.lng = e.poi.location.lng
+                    that.$emit('searchAddress', obj)
+                  } else {
+                    that.$emit('searchAddress', '')
+                  }
+                  that.map.setFitView()
+                })
               } else {
-                that.$emit('pickedAddress', '')
+                districtSearch.search(e.poi.name, (status, result1) => {
+                  if (status == 'complete') {
+                    that.marker.setPosition(result1.districtList[0].center)
+                    geocoder.getAddress(result1.districtList[0].center, function(status, result) {
+                      if (status === 'complete') {
+                        var obj = {}
+                        that.province = result.regeocode.addressComponent.province
+                        that.city = result.regeocode.addressComponent.city
+                        that.district = result.regeocode.addressComponent.district
+                        obj.formattedAddress = result.regeocode.formattedAddress
+                        obj.areacode = result.regeocode.addressComponent.adcode
+                        that.address = result.regeocode.formattedAddress
+                        obj.lat = result1.districtList[0].center.lat
+                        obj.lng = result1.districtList[0].center.lng
+                        that.$emit('searchAddress', obj)
+                      } else {
+                        that.$emit('searchAddress', '')
+                      }
+                      that.map.setFitView()
+                    })
+
+
+                  }
+                })
               }
             })
-          });
-          // that.map.on('click', function (e) {
-          //   for (var i = 0, l = that.polygons.length; i < l; i++) {
-          //     that.polygons[i].setMap(null)
-          //   }
-          //   that.marker.setMap(that.map)
-          //   that.marker.setPosition(e.lnglat)
-          //   geocoder.getAddress(e.lnglat, function (status, result) {
-          //     if (status === 'complete') {
-          //       var obj = {}
-          //       that.province = result.regeocode.addressComponent.province
-          //       that.city = result.regeocode.addressComponent.city
-          //       that.district = result.regeocode.addressComponent.district
-          //       obj.formattedAddress = result.regeocode.formattedAddress
-          //       obj.areacode = result.regeocode.addressComponent.adcode
-          //       that.address = result.regeocode.formattedAddress
-          //       obj.lat = e.lnglat.lat
-          //       obj.lng = e.lnglat.lng
-          //       that.$emit('pickedAddress', obj)
-          //     } else {
-          //       that.$emit('pickedAddress', '')
-          //     }
-          //   })
-          // })
-          // 根据坐标点定位,获取地址的详细信息
-          if (that.position) {
-            that.marker.setMap(that.map)
-            that.marker.setPosition(that.position)
-            geocoder.getAddress(that.position, function (status, result) {
-              if (status === 'complete') {
-                var obj = {}
-                obj.formattedAddress = result.regeocode.formattedAddress
-                obj.areacode = result.regeocode.addressComponent.adcode
-                that.address = result.regeocode.formattedAddress
-                that.$emit('positionAddress', obj)
-                that.province = result.regeocode.addressComponent.province
-                that.city = result.regeocode.addressComponent.city
-                that.district = result.regeocode.addressComponent.district
-              }
+            // 经纬度
+            var geocoder = new AMap.Geocoder({
+              radius: 1000,
             })
-            that.map.setFitView()
-          } else {
-            return false
+            that.map.on('moveend', function(e) {
+              //地图变动之后需要重新赋值省市区，未完成
+              that.center = that.map.getCenter(); //获取当前地图中心位置
+              that.center.lat = Number(that.center.lat.toFixed(3))
+              that.center.lng = Number(that.center.lng.toFixed(3))
+              that.center.Q = Number(that.center.Q.toFixed(3))
+              that.center.R = Number(that.center.R.toFixed(3))
+              for (var i = 0, l = that.polygons.length; i < l; i++) {
+                that.polygons[i].setMap(null)
+              }
+              that.marker.setMap(that.map)
+              that.marker.setPosition(that.center)
+              geocoder.getAddress(that.center, function(status, result) {
+                if (status === 'complete') {
+                  var obj = {}
+                  that.province = result.regeocode.addressComponent.province
+                  that.city = result.regeocode.addressComponent.city
+                  that.district = result.regeocode.addressComponent.district
+                  obj.formattedAddress = result.regeocode.formattedAddress
+                  obj.areacode = result.regeocode.addressComponent.adcode
+                  that.address = result.regeocode.formattedAddress
+                  obj.lat = that.center.lat
+                  obj.lng = that.center.lng
+                  that.$emit('pickedAddress', obj)
+                } else {
+                  that.$emit('pickedAddress', '')
+                }
+              })
+            });
+            that.map.on('zoomend', function() {
+              //地图变动之后需要重新赋值省市区，未完成
+              // this.zoom = map.getZoom(); //获取当前地图级别
+              that.center = that.map.getCenter(); //获取当前地图中心位置
+              that.center.lat = Number(that.center.lat.toFixed(3))
+              that.center.lng = Number(that.center.lng.toFixed(3))
+              that.center.Q = Number(that.center.Q.toFixed(3))
+              that.center.R = Number(that.center.R.toFixed(3))
+              for (var i = 0, l = that.polygons.length; i < l; i++) {
+                that.polygons[i].setMap(null)
+              }
+              that.marker.setMap(that.map)
+              that.marker.setPosition(that.center)
+              geocoder.getAddress(that.center, function(status, result) {
+                if (status === 'complete') {
+                  var obj = {}
+                  that.province = result.regeocode.addressComponent.province
+                  that.city = result.regeocode.addressComponent.city
+                  that.district = result.regeocode.addressComponent.district
+                  obj.formattedAddress = result.regeocode.formattedAddress
+                  obj.areacode = result.regeocode.addressComponent.adcode
+                  that.address = result.regeocode.formattedAddress
+                  obj.lat = that.center.lat
+                  obj.lng = that.center.lng
+                  that.$emit('pickedAddress', obj)
+                } else {
+                  that.$emit('pickedAddress', '')
+                }
+              })
+            });
+            // that.map.on('click', function (e) {
+            //   for (var i = 0, l = that.polygons.length; i < l; i++) {
+            //     that.polygons[i].setMap(null)
+            //   }
+            //   that.marker.setMap(that.map)
+            //   that.marker.setPosition(e.lnglat)
+            //   geocoder.getAddress(e.lnglat, function (status, result) {
+            //     if (status === 'complete') {
+            //       var obj = {}
+            //       that.province = result.regeocode.addressComponent.province
+            //       that.city = result.regeocode.addressComponent.city
+            //       that.district = result.regeocode.addressComponent.district
+            //       obj.formattedAddress = result.regeocode.formattedAddress
+            //       obj.areacode = result.regeocode.addressComponent.adcode
+            //       that.address = result.regeocode.formattedAddress
+            //       obj.lat = e.lnglat.lat
+            //       obj.lng = e.lnglat.lng
+            //       that.$emit('pickedAddress', obj)
+            //     } else {
+            //       that.$emit('pickedAddress', '')
+            //     }
+            //   })
+            // })
+            // 根据坐标点定位,获取地址的详细信息
+            if (that.position) {
+              that.marker.setMap(that.map)
+              that.marker.setPosition(that.position)
+              geocoder.getAddress(that.position, function(status, result) {
+                if (status === 'complete') {
+                  var obj = {}
+                  obj.formattedAddress = result.regeocode.formattedAddress
+                  obj.areacode = result.regeocode.addressComponent.adcode
+                  that.address = result.regeocode.formattedAddress
+                  that.$emit('positionAddress', obj)
+                  that.province = result.regeocode.addressComponent.province
+                  that.city = result.regeocode.addressComponent.city
+                  that.district = result.regeocode.addressComponent.district
+                }
+              })
+              that.map.setFitView()
+            } else {
+              return false
+            }
           }
-        }
-      )
-    }, 500)
-    this.loadmap()
-  },
-  methods: {
-    positions() {
-      this.status = false
-      var status = {
-        zoomEnable: false,
-        dragEnable: false,
-      }
-      this.map.setStatus(status)
-      this.loadmap()
-    },
-    anewselect() {
-      this.status = true
-      var status = {
-        zoomEnable: true,
-        dragEnable: true,
-      }
-      this.map.setStatus(status)
+        )
+      }, 500)
       this.loadmap()
     },
-    loadmap(val) {
-      let params = val
-      var that = this // 插件
-      for (var j = 0, k = that.polygons.length; j < k; j++) {
-        that.polygons[j].setMap(null)
-      }
-      AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], function () {
-        // 标注
-        var opts = {
-          subdistrict: 1,
-          extensions: 'all',
-          showbiz: false,
+    methods: {
+      positions() {
+        this.status = false
+        var status = {
+          zoomEnable: false,
+          dragEnable: false,
+        }
+        this.map.setStatus(status)
+        this.loadmap()
+        let _data = []
+        _data.push(this.province)
+        _data.push(this.city)
+        _data.push(this.district)
+        _data.push(this.address)
+        _data.push(this.type)
+        this.$emit('addressListen', _data)
+      },
+      anewselect() {
+        this.status = true
+        var status = {
+          zoomEnable: true,
+          dragEnable: true,
+        }
+        this.map.setStatus(status)
+        this.loadmap()
+      },
+      loadmap(val) {
+        let params = val
+        var that = this // 插件
+        for (var j = 0, k = that.polygons.length; j < k; j++) {
+          that.polygons[j].setMap(null)
         }
-        var district = new AMap.DistrictSearch(opts) // 注意：需要使用插件同步下发功能才能这样直接使用
-        function getData(data) {
-          console.log(data)
-          that.$emit('selectedAddress', data)
-          // 清除地图上的所有覆盖物
-          that.areacode = data.citycode
-          var bounds = data.boundaries
-          if (data.level === 'country') {
-            that.provinces = data.districtList
-            that.citys = []
-            that.districts = []
-          } else if (data.level === 'province') {
-            that.map.remove(that.marker)
-            that.citys = data.districtList
-            that.districts = []
-            that.address = ''
-          } else if (data.level === 'city') {
-            that.districts = data.districtList
+        AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], function() {
+          // 标注
+          var opts = {
+            subdistrict: 1,
+            extensions: 'all',
+            showbiz: false,
           }
-          if (data.level === 'country' && bounds) {
-            return false
-          } else {
-            for (var i = 0, l = bounds.length; i < l; i++) {
-              var polygon = new AMap.Polygon({
-                map: that.map,
-                strokeWeight: 1,
-                strokeColor: '#CC66CC',
-                fillColor: '#CCF3FF',
-                fillOpacity: 0.5,
-                path: bounds[i],
-              })
-              that.polygons.push(polygon)
+          var district = new AMap.DistrictSearch(opts) // 注意：需要使用插件同步下发功能才能这样直接使用
+          function getData(data) {
+            console.log(data)
+            that.$emit('selectedAddress', data)
+            // 清除地图上的所有覆盖物
+            that.areacode = data.citycode
+            var bounds = data.boundaries
+            if (data.level === 'country') {
+              that.provinces = data.districtList
+              that.citys = []
+              that.districts = []
+            } else if (data.level === 'province') {
+              that.map.remove(that.marker)
+              that.citys = data.districtList
+              that.districts = []
+              that.address = ''
+            } else if (data.level === 'city') {
+              that.districts = data.districtList
+            }
+            if (data.level === 'country' && bounds) {
+              return false
+            } else {
+              for (var i = 0, l = bounds.length; i < l; i++) {
+                var polygon = new AMap.Polygon({
+                  map: that.map,
+                  strokeWeight: 1,
+                  strokeColor: '#CC66CC',
+                  fillColor: '#CCF3FF',
+                  fillOpacity: 0.5,
+                  path: bounds[i],
+                })
+                that.polygons.push(polygon)
+              }
+              that.map.setFitView()
             }
-            that.map.setFitView()
           }
-        }
-        let sear = val ? params : '中国'
-        district.search(sear, function (status, result) {
-          if (status === 'complete') {
+          let sear = val ? params : '中国'
+          district.search(sear, function(status, result) {
+            if (status === 'complete') {
               getData(result.districtList[0])
-          }
+            }
+          })
         })
-      })
-    },
-    selectP(val) {
-     this.province=CodeToText[val]
-      if (this.status) {
-        this.$emit('provinceChange', val)
-        this.loadmap(val)
-        this.city = ''
-        this.district = ''
-      }
-    },
-    selectC(val) {
-      console.log(val)
-      if (this.status) {
-        this.loadmap(val)
-        this.district = ''
-      }
-    },
-    selectD(val) {
-     this.district=CodeToText[val]
-      if (this.status) {
-        this.loadmap(val)
+      },
+      selectP(val) {
+        this.province = CodeToText[val]
+        if (this.status) {
+          this.$emit('provinceChange', val)
+          this.loadmap(val)
+          this.city = ''
+          this.district = ''
+        }
+      },
+      selectC(val) {
+        console.log(val)
+        if (this.status) {
+          this.loadmap(val)
+          this.district = ''
+        }
+      },
+      selectD(val) {
+        this.district = CodeToText[val]
+        if (this.status) {
+          this.loadmap(val)
+        }
+      },
+      submit() {
+        let _data = []
+        _data.push(this.province)
+        _data.push(this.city)
+        _data.push(this.district)
+        _data.push(this.address)
+        _data.push(this.type)
+        this.$emit('addressListen', _data)
+        this.$parent.blurMap()
+        console.log("submit")
       }
     },
-    submit(){
-      let _data = []
-      _data.push(this.province)
-      _data.push(this.city)
-      _data.push(this.district)
-      _data.push(this.address)
-      _data.push(this.type)
-      this.$emit('addressListen',_data)
-      this.$parent.blurMap()
-      console.log("submit")
-    }
-  },
-}
-</script>
+  }
+</script>

src/views/statisticalReport/stockSaleOutReportList.vue

@@ -719,7 +719,7 @@
         })
       },
       //列表
-      getList(type) {debugger
+      getList(type) {
         // 1自运2他运
         let _data = {
             compId: sessionStorage.getItem('ws-pf_compId'),

src/views/warehouse/warehouseManagementAdd.vue

@@ -6,28 +6,13 @@
         <h2 class="bg-left title">创建仓库</h2>
       </el-col>
       <el-col :span="12" class="bg-right">
-        <el-button
-          class="bg-bottom"
-          type="primary"
-          size="small"
-          @click="returnsales()"
-          ><img
-            width="6"
-            height="10"
-            style="vertical-align: bottom; margin-right: 3px"
-            src="../../../public/img/lujing.png"
-            alt=""
-          />返回</el-button
-        >
+        <el-button class="bg-bottom" type="primary" size="small" @click="returnsales()"><img width="6" height="10"
+            style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
+        </el-button>
       </el-col>
     </el-row>
 
-    <ws-form
-      class="position"
-      ref="deptBudgetList"
-      :rules="rules"
-      :model="deptBudgetList"
-    >
+    <ws-form class="position" ref="deptBudgetList" :rules="rules" :model="deptBudgetList">
       <el-radio-group v-model="radio">
         <el-radio :label="1">常用仓库</el-radio>
         <el-radio :label="2">临时仓库</el-radio>
@@ -37,251 +22,136 @@
       <ws-info-table>
         <!--仓库名称-->
         <ws-form-item label="仓库名称" span="1" prop="warehouseName">
-          <ws-input
-            v-model="deptBudgetList.warehouseName"
-            placeholder="请输入仓库名"
-            maxlength="20"
-            size="small"
-          />
+          <ws-input v-model="deptBudgetList.warehouseName" placeholder="请输入仓库名" maxlength="20" size="small" />
         </ws-form-item>
         <!--负责人-->
         <ws-form-item label="负责人" span="1" prop="personCharge">
-          <el-select
-            v-model="deptBudgetList.personCharge"
-            placeholder="请选择负责人"
-            filterable
-            clearable 
-            @change="selectstaff"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.staffName"
-              :value="item.staffName"
-            />
+          <el-select v-model="deptBudgetList.personCharge" placeholder="请选择负责人" filterable clearable
+            @change="selectstaff">
+            <el-option v-for="item in options" :key="item.value" :label="item.staffName" :value="item.staffName" />
           </el-select>
         </ws-form-item>
         <!--负责人电话-->
         <ws-form-item label="负责人电话" span="1" prop="personPhone">
-          <ws-input
-            v-model="deptBudgetList.personPhone"
-            placeholder="请输入负责人手机号码"
-            maxlength="100"
-            size="small"
-          />
+          <ws-input v-model="deptBudgetList.personPhone" placeholder="请输入负责人手机号码" maxlength="100" size="small" />
         </ws-form-item>
         <!--其他负责人-->
-        <ws-form-item label="其他负责人"  span="1" prop="otherPersonCharge">
-          <el-select
-            v-model="deptBudgetList.otherPersonPhone"
-            placeholder="请选择其他负责人"
-            @change="selectstaffOther"
-            multiple
-            filterable
-          >
-            <el-option
-              v-for="item in optionsOther"
-              :key="item.staffMobilePhone"
-              :label="item.staffName"
-              :value="item.staffMobilePhone"
-            />
+        <ws-form-item label="其他负责人" span="1" prop="otherPersonCharge">
+          <el-select v-model="deptBudgetList.otherPersonPhone" placeholder="请选择其他负责人" @change="selectstaffOther"
+            multiple filterable>
+            <el-option v-for="item in optionsOther" :key="item.staffMobilePhone" :label="item.staffName"
+              :value="item.staffMobilePhone" />
           </el-select>
         </ws-form-item>
         <!--仓库所在地-->
         <ws-form-item label="仓库所在地" span="1" prop="acceptanceMethod">
-          <el-cascader
-            :options="options_"
-            v-model="selectedOptions"
-            clearable
-            size="large"
-            placeholder="请选择仓库所在地"
-            style="width: 200%"
-            @change="handleChange"
-          />
+          <el-cascader :options="options_" v-model="selectedOptions" clearable size="large" placeholder="请选择仓库所在地"
+            style="width: 200%" @change="handleChange" />
         </ws-form-item>
 
         <!--详细地址-->
-        <ws-form-item
-          label="详细地址"
-          span="1"
-          prop="detailedAddress"
-          class="readonly"
-        >
-          <ws-input
-            v-model="deptBudgetList.detailedAddress"
-            placeholder="请输入详细地址"
-            maxlength="100"
-            size="small"
-          />
+        <ws-form-item label="详细地址" span="1" prop="detailedAddress" class="readonly">
+          <ws-input v-model="deptBudgetList.detailedAddress" placeholder="请输入详细地址" maxlength="100" size="small" />
         </ws-form-item>
 
         <!--总储量（吨）-->
-        <ws-form-item
-          label="总储量（吨）"
-          span="1"
-          prop="settlementMethod"
-          v-show="radio == 1"
-        >
-          <ws-input
-            class="totalStorage"
-            :readonly="true"
-            v-model="totalStorage"
-            maxlength="100"
-            size="small"
-          />
+        <ws-form-item label="总储量（吨）" span="1" prop="settlementMethod" v-show="radio == 1">
+          <ws-input class="totalStorage" :readonly="true" v-model="totalStorage" maxlength="100" size="small" />
         </ws-form-item>
-        <div
-          style="width: 100%"
-          class="flex position"
-          v-for="(item, index) in freightspace"
-          v-show="radio == 1"
-          :key="index"
-        >
-          <ws-form-item
-            label="仓位编号"
-            span="1"
-            prop="contractNo"
-            class="readonly"
-          >
-            <ws-input
-              v-model="item.binNumber"
-              placeholder="请输入仓位编号"
-              maxlength="20"
-              size="small"
-            />
+        <div style="width: 100%" class="flex position" v-for="(item, index) in freightspace" v-show="radio == 1"
+          :key="index">
+          <ws-form-item label="仓位编号" span="1" prop="contractNo" class="readonly">
+            <ws-input v-model="item.binNumber" placeholder="请输入仓位编号" maxlength="20" size="small" />
           </ws-form-item>
           <ws-form-item label="仓位储量（吨）" span="1" prop="contractNo">
-            <ws-input
-              v-model="item.maxStorage"
-              placeholder="请输入仓位最大容量"
-              maxlength="100"
-              size="small"
-            />
+            <ws-input v-model="item.maxStorage" placeholder="请输入仓位最大容量" maxlength="100" size="small" />
           </ws-form-item>
           <!--备注（选项）-->
           <ws-form-item label="备注（选填）" span="1" prop="placeDelivery">
-            <ws-input
-              v-model="item.remark"
-              placeholder="请输入备注"
-              maxlength="20"
-              size="small"
-            />
+            <ws-input v-model="item.remark" placeholder="请输入备注" maxlength="20" size="small" />
           </ws-form-item>
-          <img
-            width="22"
-            height="22"
-            class="add"
-            @click="add"
-            src="../../../public/img/add.png"
-            alt=""
-          />
-          <img
-            width="22"
-            height="22"
-            class="del"
-            @click="del(index)"
-            src="../../../public/img/del.png"
-            alt=""
-          />
+          <img width="22" height="22" class="add" @click="add" src="../../../public/img/add.png" alt="" />
+          <img width="22" height="22" class="del" @click="del(index)" src="../../../public/img/del.png" alt="" />
         </div>
       </ws-info-table>
     </ws-form>
     <ws-form ref="deptBudgetList" :model="deptBudgetList">
       <div class="small-title" v-show="radio == 1">上传仓库照片</div>
-      <el-upload
-      ref='upload'
-        action="https://www.zthymaoyi.com/upload/admin"
-        :show-file-list="false"
-        :on-success="
+      <el-upload ref='upload' action="https://www.zthymaoyi.com/upload/admin" :show-file-list="false" :on-success="
           (res, file) => {
             uploadSuccessHandle(res)
           }
-        "
-        class="avatar-uploader"
-        accept=".jpg, .jpeg, .png, .gif"
-      >
+        " class="avatar-uploader" accept=".jpg, .jpeg, .png, .gif">
         <el-button v-show="radio == 1">上传附件</el-button>
       </el-upload>
       <div class="addressUrls" v-if="addressUrls != null">
         <div class="addressUrls-item">
-          <div
-            v-for="(item, index) in addressUrls"
-            class="addressUrl"
-            :key="index"
-          >
+          <div v-for="(item, index) in addressUrls" class="addressUrl" :key="index">
             <div @click="close(index)" class="iconfont icon-guanbi"></div>
-            <img
-              v-if="addressUrls != null"
-              width="100"
-              height="100"
-              :src="item"
-              alt=""
-            />
+            <img v-if="addressUrls != null" width="100" height="100" :src="item" alt="" />
           </div>
         </div>
       </div>
       <div style="margin-bottom: 5px" class="small-title">仓库定位</div>
-      <map-drag  @marker="marker" @selectedAddress="selectedAddress" @provinceChange='provinceChange' @pickedAddress='getInfo'></map-drag>
+      <!-- <map-drag  @marker="marker" @selectedAddress="selectedAddress" @provinceChange='provinceChange' @pickedAddress='getInfo'></map-drag> -->
+      <map-drag @marker="marker" :isShowaddress='false' v-on:addressListen='getAddress' v-on:pickedAddress='searchAddress' ></map-drag>
     </ws-form>
     <!-- 提交 -->
     <div style="text-align: right; padding: 10px" class="center">
-      <el-button
-        class="bg-bottom"
-        type="primary"
-        size="small"
-        @click="submit(deptBudgetList)"
-        >提交</el-button
-      >
+      <el-button class="bg-bottom" type="primary" size="small" @click="submit(deptBudgetList)">提交</el-button>
     </div>
   </div>
 </template>
 <script>
-import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
-import {
-  addList,
-  addxiala,
-  editxiala,
-  delxiala,
-  increase,
-  getstaff,
-} from '@/model/warehouse/index'
-import WsUpload from '@/components/WsUpload'
-import mapDrag from '@/components/mapdrag/mapdrag'
-export default {
-  name: 'viewSpareMoney',
-  components: {
-    WsUpload,
-    mapDrag,
-  },
-  watch: {
-    vesselId(val) {
-      this.getVesselData()
+  import {
+    regionData,
+    CodeToText,
+    TextToCode
+  } from 'element-china-area-data'
+  import {
+    addList,
+    addxiala,
+    editxiala,
+    delxiala,
+    increase,
+    getstaff,
+  } from '@/model/warehouse/index'
+  import WsUpload from '@/components/WsUpload'
+  import mapDrag from '@/components/mapdrag/mapdrag'
+  export default {
+    name: 'viewSpareMoney',
+    components: {
+      WsUpload,
+      mapDrag,
     },
-    isShow(val) {
-      this.showType = val
-    },
-  },
-  data() {
-    let self = this
-    return {
-      deptBudgetList: {
-        totalStorage: 0,
-        addressUrl: '',
+    watch: {
+      vesselId(val) {
+        this.getVesselData()
+      },
+      isShow(val) {
+        this.showType = val
       },
-      options_: regionData,
-      otherPersonPhone:'',
-      heightData: '600px',
-      zoom: 7,
-      selectedOptions: [],
-      center: [116.244694, 39.517344],
-      window: '',
-      radio: 1,
-      personCharge: [],
-      options: [],
-      optionsOther: [],
-      staffList: [],
-      polygons: [
-        {
+    },
+    data() {
+      let self = this
+      return {
+        deptBudgetList: {
+          totalStorage: 0,
+          addressUrl: '',
+        },
+        options_: regionData,
+        otherPersonPhone: '',
+        heightData: '600px',
+        zoom: 7,
+        selectedOptions: [],
+        center: [116.244694, 39.517344],
+        window: '',
+        radio: 1,
+        personCharge: [],
+        options: [],
+        optionsOther: [],
+        staffList: [],
+        polygons: [{
           pName: 'Geolocation', //定位
           events: {
             init(o) {
@@ -297,831 +167,925 @@ export default {
               })
             },
           },
+        }, ],
+        district: null,
+        listDate: {
+          country: '中国',
+          level: 'country',
+          city: ''
+        },
+        citylist: [],
+        compId: sessionStorage.getItem('ws-pf_compId'),
+        rules: {
+          warehouseName: [{
+              required: true,
+              message: '请输入仓库名称',
+              trigger: 'blur',
+            },
+            {
+              min: 2,
+              max: 20,
+              message: '仓库名长度不符合要求，请输入2-20字符之内',
+              trigger: 'blur',
+            },
+          ],
         },
-      ],
-      district: null,
-      listDate: { country: '中国', level: 'country', city: '' },
-      citylist: [],
-      compId: sessionStorage.getItem('ws-pf_compId'),
-      rules: {
-        warehouseName: [
-          {
-            required: true,
-            message: '请输入仓库名称',
-            trigger: 'blur',
-          },
-          {
-            min: 2,
-            max: 20,
-            message: '仓库名长度不符合要求，请输入2-20字符之内',
-            trigger: 'blur',
-          },
-        ],
-      },
 
-      appendixIdsAdd: '',
-      size: 10,
-      value1: '',
-      unitList: [],
-      freightspace: [{ binNumber: '', maxStorage: '', remark: '' }],
-      name: '',
-      list: [],
-      addressUrls: [],
-    }
-  },
-  mounted() {
-    this.getList()
-  },
-  computed: {
-    totalStorage: function () {
-      var maxStorage = 0
-      for (var i = 0; i < this.freightspace.length; i++) {
-        maxStorage += Number(this.freightspace[i].maxStorage)
+        appendixIdsAdd: '',
+        size: 10,
+        value1: '',
+        unitList: [],
+        freightspace: [{
+          binNumber: '',
+          maxStorage: '',
+          remark: ''
+        }],
+        name: '',
+        list: [],
+        addressUrls: [],
       }
-      return maxStorage
     },
-  },
-  methods: {
-    getInfo(e){
-      console.log(e)
-      this.deptBudgetList.warehousePositioning = e.lat +','+e.lng
-      console.log(this.deptBudgetList.warehousePositioning)
+    mounted() {
+      this.getList()
     },
-    close(index) {
-      this.addressUrls.splice(index, 1)
+    computed: {
+      totalStorage: function() {
+        var maxStorage = 0
+        for (var i = 0; i < this.freightspace.length; i++) {
+          maxStorage += Number(this.freightspace[i].maxStorage)
+        }
+        return maxStorage
+      },
     },
-    dataFilter(val) {
-      this.deptBudgetList.personCharge = val
-      if (val) {
-        console.log(val)
-        this.options = this.staffList.filter((item) => {
-          if (
-            !!~item.staffName.indexOf(val) ||
-            !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
-          ) {
-            return true
+    methods: {
+      getAddress(data) {
+        console.log("getAddress", data)
+         this.deptBudgetList.warehousePrivate =data[0]
+                  this.deptBudgetList.warehouseCity =data[1]
+                  this.deptBudgetList.warehouseArea =data[2]
+      },
+        searchAddress(e) {
+       this.deptBudgetList.warehousePositioning =e.lat + ',' + e.lng
+      },
+      close(index) {
+        this.addressUrls.splice(index, 1)
+      },
+      dataFilter(val) {
+        this.deptBudgetList.personCharge = val
+        if (val) {
+          console.log(val)
+          this.options = this.staffList.filter((item) => {
+            if (
+              !!~item.staffName.indexOf(val) ||
+              !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
+            ) {
+              return true
+            }
+          })
+        } else {
+          this.options = this.staffList
+        }
+      },
+      selectstaffOther(e) {
+        this.deptBudgetList.otherPersonCharge = ''
+        for (var i = 0; i < this.optionsOther.length; i++) {
+          for (var j = 0; j < e.length; j++) {
+            if (this.optionsOther[i].staffMobilePhone == e[j]) {
+              this.deptBudgetList.otherPersonCharge += this.optionsOther[i].staffName + ' ' + this.optionsOther[i]
+                .staffMobilePhone + ','
+            }
           }
-        })
-      } else {
-        this.options = this.staffList
-      }
-    },
-    selectstaffOther(e) {
-      this.deptBudgetList.otherPersonCharge = ''
-      for (var i = 0; i < this.optionsOther.length; i++) {
-        for(var j=0;j<e.length;j++){
-          if (this.optionsOther[i].staffMobilePhone == e[j]) {
-            this.deptBudgetList.otherPersonCharge += this.optionsOther[i].staffName + ' '+ this.optionsOther[i].staffMobilePhone + ','
+        }
+      },
+      selectstaff(e) {
+        for (var i = 0; i < this.staffList.length; i++) {
+          if (this.staffList[i].staffName == e) {
+            this.deptBudgetList.personPhone = this.staffList[i].staffMobilePhone
+            this.deptBudgetList.personChargeKey = this.staffList[i].staffId
           }
         }
-      }
-    },
-    selectstaff(e) {
-      for (var i = 0; i < this.staffList.length; i++) {
-        if (this.staffList[i].staffName == e) {
-          this.deptBudgetList.personPhone = this.staffList[i].staffMobilePhone
-          this.deptBudgetList.personChargeKey = this.staffList[i].staffId
+      },
+      marker: function(item) {
+        this.deptBudgetList.warehousePositioning =
+          item.lnglat.lat + ',' + item.lnglat.lng
+      },
+      selectedAddress(e) {
+        this.deptBudgetList.warehousePositioning =
+          e.center.lat + ',' + e.center.lng
+      },
+      provinceChange(e) {
+        console.log(CodeToText[e])
+      },
+      confirmPositioncity() {
+        this.listDate.level = 'city'
+        this.listDate.country = this.name
+      },
+      // 关闭 dialog时 处理文件url 初始化upload组件
+      handleClose() {
+        this.dialogViewSpareMoney = false
+      },
+      add() {
+        this.freightspace.push({
+          binNumber: '',
+          maxStorage: '',
+          remark: '',
+        })
+      },
+      del(index) {
+        if (this.freightspace.length > 1) {
+          this.freightspace.splice(index, 1)
         }
-      }
-    },
-    marker: function (item) {
-      this.deptBudgetList.warehousePositioning =
-        item.lnglat.lat + ',' + item.lnglat.lng
-    },
-    selectedAddress(e) {
-      this.deptBudgetList.warehousePositioning =
-        e.center.lat + ',' + e.center.lng
-    },
-    provinceChange(e){
-      console.log(CodeToText[e])
-    },
-    confirmPositioncity() {
-      this.listDate.level = 'city'
-      this.listDate.country = this.name
-    },
-    // 关闭 dialog时 处理文件url 初始化upload组件
-    handleClose() {
-      this.dialogViewSpareMoney = false
-    },
-    add() {
-      this.freightspace.push({
-        binNumber: '',
-        maxStorage: '',
-        remark: '',
-      })
-    },
-    del(index) {
-      if (this.freightspace.length > 1) {
-        this.freightspace.splice(index, 1)
-      }
-    },
-    handleChange(value) {
-      this.selectedOptions = value
-    },
-    returnsales() {
-      this.deptBudgetList = {}
-      this.freightspace = {}
-      this.selectedOptions = ''
-      this.$router.push({ path: 'warehouseManagementList' })
-    },
-    // 上传附件
-    uploadSuccessHandle(e) {
-      this.deptBudgetList.addressUrl += e.url + ','
-      this.addressUrls.push(e.url)
-    },
-    onChange(files) {
-      this.fileNum = files
-      this.$refs.upload.handleSaveBill().then((res) => {})
-    },
+      },
+      handleChange(value) {
+        this.selectedOptions = value
+      },
+      returnsales() {
+        this.deptBudgetList = {}
+        this.freightspace = {}
+        this.selectedOptions = ''
+        this.$router.push({
+          path: 'warehouseManagementList'
+        })
+      },
+      // 上传附件
+      uploadSuccessHandle(e) {
+        this.deptBudgetList.addressUrl += e.url + ','
+        this.addressUrls.push(e.url)
+      },
+      onChange(files) {
+        this.fileNum = files
+        this.$refs.upload.handleSaveBill().then((res) => {})
+      },
 
-    submit() {
-      if (this.radio == 1) {
-        if (!this.deptBudgetList.warehouseName) {
-          this.$message({
-            message: '仓库名称不能为空！',
-            type: 'warning',
-          })
-          return
-        }
-        if (
-          this.deptBudgetList.warehouseName.length < 2 ||
-          this.deptBudgetList.warehouseName.length > 20
-        ) {
-          this.$message({
-            message: '仓库名长度不符合要求！',
-            type: 'warning',
-          })
-          return
+      submit() {
+        if (this.radio == 1) {
+          if (!this.deptBudgetList.warehouseName) {
+            this.$message({
+              message: '仓库名称不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            this.deptBudgetList.warehouseName.length < 2 ||
+            this.deptBudgetList.warehouseName.length > 20
+          ) {
+            this.$message({
+              message: '仓库名长度不符合要求！',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.personCharge) {
+            this.$message({
+              message: '负责人不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            this.deptBudgetList.personCharge.length < 2 ||
+            this.deptBudgetList.personCharge.length > 10
+          ) {
+            this.$message({
+              message: '负责人长度不符合要求，请控制在2-10字符之内',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.personPhone) {
+            this.$message({
+              message: '负责人电话不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (this.deptBudgetList.personPhone.length != 11) {
+            this.$message({
+              message: '手机号输入有误！',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.detailedAddress) {
+            this.$message({
+              message: '详细地址不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+
+          if (this.totalStorage <= 0) {
+            this.$message({
+              message: '仓位储量不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            this.deptBudgetList.detailedAddress.length < 2 ||
+            this.deptBudgetList.detailedAddress.length > 20
+          ) {
+            this.$message({
+              message: '详细地址长度不符合要求，请控制在2-20字符之内',
+              type: 'warning',
+            })
+            return
+          }
+          // freightspace
+          for (var i = 0; i < this.freightspace.length; i++) {
+            for (var j = i + 1; j < this.freightspace.length; j++) {
+              console.log(
+                this.freightspace[i].binNumber,
+                this.freightspace[j].binNumber
+              )
+              if (
+                this.freightspace[i].binNumber == this.freightspace[j].binNumber
+              ) {
+                this.$message({
+                  message: '仓位编号重复',
+                  type: 'warning',
+                })
+                return
+              }
+            }
+          }
+          this.$confirm(`确定提交仓库信息？`, {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            })
+            .then(() => {
+              this.$refs.deptBudgetList.validate((valid) => {
+                if (valid) {
+                  // this.deptBudgetList.otherPersonCharge=this.deptBudgetList.otherPersonCharge.toString()
+                  this.deptBudgetList.otherPersonPhone = this.deptBudgetList.otherPersonPhone.toString()
+                  this.deptBudgetList.compId =
+                    sessionStorage.getItem('ws-pf_compId')
+                  this.deptBudgetList.warehousePositionInfoList =
+                    this.freightspace
+                  this.deptBudgetList.totalStorage = this.totalStorage
+                  addList(this.deptBudgetList)
+                    .toPromise()
+                    .then((response) => {
+                      this.$message.success('添加成功')
+                      this.deptBudgetList = {}
+                      this.freightspace = [{
+                        binNumber: '',
+                        maxStorage: '',
+                        remark: ''
+                      }]
+                      this.selectedOptions = ''
+                      this.addressUrls = []
+                      this.$router.push({
+                        path: 'warehouseManagementList'
+                      })
+                    })
+                } else {
+                  EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
+                  return false
+                }
+              })
+            })
+            .catch(() => {
+              return false
+            })
+        } else if (this.radio == 2) {
+          if (!this.deptBudgetList.warehouseName) {
+            this.$message({
+              message: '仓库名称不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            this.deptBudgetList.warehouseName.length < 2 ||
+            this.deptBudgetList.warehouseName.length > 20
+          ) {
+            this.$message({
+              message: '仓库名长度不符合要求！',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.personCharge) {
+            this.$message({
+              message: '负责人不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            this.deptBudgetList.personCharge.length < 2 ||
+            this.deptBudgetList.personCharge.length > 10
+          ) {
+            this.$message({
+              message: '负责人长度不符合要求，请控制在2-10字符之内',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.personPhone) {
+            this.$message({
+              message: '负责人电话不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          if (this.deptBudgetList.personPhone.length != 11) {
+            this.$message({
+              message: '手机号输入有误！',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.detailedAddress) {
+            this.$message({
+              message: '详细地址不能为空！',
+              type: 'warning',
+            })
+            return
+          }
+          this.$confirm(`确定提交仓库信息？`, {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            })
+            .then(() => {
+              this.$refs.deptBudgetList.validate((valid) => {
+                if (valid) {
+                  this.deptBudgetList.compId =
+                    sessionStorage.getItem('ws-pf_compId')
+                  this.deptBudgetList.warehousePrivate =
+                    CodeToText[this.selectedOptions[0]]
+                  this.deptBudgetList.warehouseCity =
+                    CodeToText[this.selectedOptions[1]]
+                  this.deptBudgetList.warehouseArea =
+                    CodeToText[this.selectedOptions[2]]
+                  this.deptBudgetList.warehousePositionInfoList =
+                    this.freightspace
+                  this.deptBudgetList.totalStorage = this.totalStorage
+                  this.deptBudgetList.otherPersonPhone = this.deptBudgetList.otherPersonPhone.toString()
+                  if (this.radio == 2) {
+                    this.deptBudgetList.warehousetype == 2
+                  }
+
+                  increase(this.deptBudgetList)
+                    .toPromise()
+                    .then((response) => {
+                      this.$message.success('添加成功')
+                      this.deptBudgetList = {}
+                      this.freightspace = [{
+                        binNumber: '',
+                        maxStorage: '',
+                        remark: ''
+                      }]
+                      this.addressUrls = []
+                      this.selectedOptions = ''
+                      this.$router.push({
+                        path: 'warehouseManagementList'
+                      })
+                    })
+                } else {
+                  EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
+                  return false
+                }
+              })
+            })
+            .catch(() => {
+              return false
+            })
         }
-        if (!this.deptBudgetList.personCharge) {
-          this.$message({
-            message: '负责人不能为空！',
-            type: 'warning',
-          })
+      },
+      resetForm(deptBudgetList) {
+        this.$refs[deptBudgetList].resetFields()
+      },
+      saveClick(item, index) {
+        console.log(item)
+
+        if (Object.is(item.id, 1)) {
           return
         }
-        if (
-          this.deptBudgetList.personCharge.length < 2 ||
-          this.deptBudgetList.personCharge.length > 10
-        ) {
-          this.$message({
-            message: '负责人长度不符合要求，请控制在2-10字符之内',
-            type: 'warning',
+        if (Object.is(this.unitList[index].flag, 'delete')) {
+          this.$set(this.unitList, index, {
+            flag: 'check'
           })
-          return
-        }
-        if (!this.deptBudgetList.personPhone) {
-          this.$message({
-            message: '负责人电话不能为空！',
-            type: 'warning',
+        } else {
+          this.$set(this.unitList, index, {
+            flag: 'delete'
           })
-          return
         }
-        if (this.deptBudgetList.personPhone.length != 11) {
-          this.$message({
-            message: '手机号输入有误！',
-            type: 'warning',
-          })
+        if (!item.constValue) {
+          this.unitList.splice(index, 1)
           return
         }
-        if (!this.deptBudgetList.detailedAddress) {
-          this.$message({
-            message: '详细地址不能为空！',
-            type: 'warning',
-          })
-          return
+        if (item.flag == 'add') {
+          item.constKey = Math.random() * 20
+          this.trainingMethods.compId = sessionStorage.getItem('ws-pf_compId')
+          this.trainingMethods.constKey = item.constKey
+          this.trainingMethods.constCode = 'TYPEYAN'
+          this.trainingMethods.constValue = item.constValue
+          this.trainingMethods.id = item.id
+          addxiala(this.trainingMethods)
+            .toPromise()
+            .then((response) => {
+              this.getUnitList()
+            })
+        } else if (item.flag == 'check') {
+          this.trainingMethods.compId = sessionStorage.getItem('ws-pf_compId')
+          this.trainingMethods.constKey = item.constKey
+          this.trainingMethods.constCode = 'TYPEYAN'
+          this.trainingMethods.constValue = item.constValue
+          this.trainingMethods.id = item.id
+          editxiala(this.trainingMethods)
+            .toPromise()
+            .then((response) => {
+              this.getUnitList()
+            })
         }
-
-        if (this.totalStorage <= 0) {
-          this.$message({
-            message: '仓位储量不能为空！',
-            type: 'warning',
+      },
+      getList() {
+        getstaff({
+            compId: sessionStorage.getItem('ws-pf_compId')
           })
-          return
-        }
-        if (
-          this.deptBudgetList.detailedAddress.length < 2 ||
-          this.deptBudgetList.detailedAddress.length > 20
-        ) {
-          this.$message({
-            message: '详细地址长度不符合要求，请控制在2-20字符之内',
-            type: 'warning',
+          .toPromise()
+          .then((response) => {
+            // this.agent = response
+            this.options = response
+            this.optionsOther = response
+            this.staffList = response
+            this.personCharge = response
+            // for(var i=0;i<response.length;i++){
+            //   this.optionsOther.push(response[i].staffName+" "+response[i].staffMobilePhone)
+            // }
           })
-          return
+      },
+      selectChapterTwo(e) {
+        for (var i = 0; i < this.ChapterTwoList.length; i++) {
+          if (this.ChapterTwoList[i].constValue == e) {
+            this.deptBudgetList.gradeKey = this.ChapterTwoList[i].constKey
+          }
         }
-        // freightspace
-        for (var i = 0; i < this.freightspace.length; i++) {
-          for (var j = i + 1; j < this.freightspace.length; j++) {
-            console.log(
-              this.freightspace[i].binNumber,
-              this.freightspace[j].binNumber
-            )
-            if (
-              this.freightspace[i].binNumber == this.freightspace[j].binNumber
-            ) {
-              this.$message({
-                message: '仓位编号重复',
-                type: 'warning',
-              })
-              return
-            }
+      },
+      selectunitList(e) {
+        for (var i = 0; i < this.unitList.length; i++) {
+          if (this.unitList[i].constValue == e) {
+            this.deptBudgetList.acceptanceMethodKey = this.unitList[i].constKey
           }
         }
-        this.$confirm(`确定提交仓库信息？`, {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            this.$refs.deptBudgetList.validate((valid) => {
-              if (valid) {
-                // this.deptBudgetList.otherPersonCharge=this.deptBudgetList.otherPersonCharge.toString()
-                this.deptBudgetList.otherPersonPhone=this.deptBudgetList.otherPersonPhone.toString()
-                this.deptBudgetList.compId =
-                  sessionStorage.getItem('ws-pf_compId')
-                this.deptBudgetList.warehousePrivate =
-                  CodeToText[this.selectedOptions[0]]
-                this.deptBudgetList.warehouseCity =
-                  CodeToText[this.selectedOptions[1]]
-                this.deptBudgetList.warehouseArea =
-                  CodeToText[this.selectedOptions[2]]
-                this.deptBudgetList.warehousePositionInfoList =
-                  this.freightspace
-                this.deptBudgetList.totalStorage = this.totalStorage
-                addList(this.deptBudgetList)
-                  .toPromise()
-                  .then((response) => {
-                    this.$message.success('添加成功')
-                    this.deptBudgetList = {}
-                    this.freightspace = [{ binNumber: '', maxStorage: '', remark: '' }]
-                    this.selectedOptions = ''
-                    this.addressUrls=[]
-                    this.$router.push({ path: 'warehouseManagementList' })
-                  })
-              } else {
-                EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
-                return false
-              }
-            })
-          })
-          .catch(() => {
-            return false
-          })
-      } else if (this.radio == 2) {
-        if (!this.deptBudgetList.warehouseName) {
-          this.$message({
-            message: '仓库名称不能为空！',
-            type: 'warning',
-          })
-          return
+      },
+      selectgrade(e) {
+        for (var i = 0; i < this.gradeList.length; i++) {
+          if (this.gradeList[i].constValue == e) {
+            this.deptBudgetList.gradeKey = this.gradeList[i].constKey
+          }
         }
-        if (
-          this.deptBudgetList.warehouseName.length < 2 ||
-          this.deptBudgetList.warehouseName.length > 20
-        ) {
-          this.$message({
-            message: '仓库名长度不符合要求！',
-            type: 'warning',
-          })
-          return
+      },
+      selectgoodsName(e) {
+        for (var i = 0; i < this.goodnameList.length; i++) {
+          if (this.goodnameList[i].constValue == e) {
+            this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
+          }
         }
-        if (!this.deptBudgetList.personCharge) {
-          this.$message({
-            message: '负责人不能为空！',
-            type: 'warning',
-          })
-          return
+      },
+      selectpackingMethod(e) {
+        for (var i = 0; i < this.packtypeList.length; i++) {
+          if (this.packtypeList[i].constValue == e) {
+            this.deptBudgetList.packingMethodKey = this.packtypeList[i].constKey
+          }
         }
-        if (
-          this.deptBudgetList.personCharge.length < 2 ||
-          this.deptBudgetList.personCharge.length > 10
-        ) {
-          this.$message({
-            message: '负责人长度不符合要求，请控制在2-10字符之内',
-            type: 'warning',
-          })
+      },
+      // 编辑
+      editClick(item, index) {
+        const map = JSON.parse(JSON.stringify(item))
+        if (Object.is(item.id, 1)) {
           return
         }
-        if (!this.deptBudgetList.personPhone) {
-          this.$message({
-            message: '负责人电话不能为空！',
-            type: 'warning',
-          })
-          return
+        if (Object.is(this.unitList[index].flag, 'delete')) {
+          map.flag = 'check'
+          this.$set(this.unitList, index, map)
+        } else {
+          map.flag = 'delete'
+          this.$set(this.unitList, index, map)
         }
-        if (this.deptBudgetList.personPhone.length != 11) {
-          this.$message({
-            message: '手机号输入有误！',
-            type: 'warning',
-          })
+      },
+      // 删除
+      deleteClick(item, index) {
+        if (Object.is(item.constKey, 1)) {
           return
         }
-        if (!this.deptBudgetList.detailedAddress) {
-          this.$message({
-            message: '详细地址不能为空！',
-            type: 'warning',
-          })
+        if (!item.constValue) {
+          this.unitList.splice(index, 1)
           return
         }
-        this.$confirm(`确定提交仓库信息？`, {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            this.$refs.deptBudgetList.validate((valid) => {
-              if (valid) {
-                this.deptBudgetList.compId =
-                  sessionStorage.getItem('ws-pf_compId')
-                this.deptBudgetList.warehousePrivate =
-                  CodeToText[this.selectedOptions[0]]
-                this.deptBudgetList.warehouseCity =
-                  CodeToText[this.selectedOptions[1]]
-                this.deptBudgetList.warehouseArea =
-                  CodeToText[this.selectedOptions[2]]
-                this.deptBudgetList.warehousePositionInfoList =
-                  this.freightspace
-                this.deptBudgetList.totalStorage = this.totalStorage
-                this.deptBudgetList.otherPersonPhone=this.deptBudgetList.otherPersonPhone.toString()
-                if (this.radio == 2) {
-                  this.deptBudgetList.warehousetype == 2
-                }
-
-                increase(this.deptBudgetList)
-                  .toPromise()
-                  .then((response) => {
-                    this.$message.success('添加成功')
-                    this.deptBudgetList = {}
-                    this.freightspace = [{ binNumber: '', maxStorage: '', remark: '' }]
-                     this.addressUrls=[]
-                    this.selectedOptions = ''
-                    this.$router.push({ path: 'warehouseManagementList' })
-                  })
-              } else {
-                EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
-                return false
-              }
-            })
-          })
-          .catch(() => {
-            return false
+        delxiala({
+            id: this.unitList[index].id
           })
-      }
-    },
-    resetForm(deptBudgetList) {
-      this.$refs[deptBudgetList].resetFields()
-    },
-    saveClick(item, index) {
-      console.log(item)
-
-      if (Object.is(item.id, 1)) {
-        return
-      }
-      if (Object.is(this.unitList[index].flag, 'delete')) {
-        this.$set(this.unitList, index, { flag: 'check' })
-      } else {
-        this.$set(this.unitList, index, { flag: 'delete' })
-      }
-      if (!item.constValue) {
-        this.unitList.splice(index, 1)
-        return
-      }
-      if (item.flag == 'add') {
-        item.constKey = Math.random() * 20
-        this.trainingMethods.compId = sessionStorage.getItem('ws-pf_compId')
-        this.trainingMethods.constKey = item.constKey
-        this.trainingMethods.constCode = 'TYPEYAN'
-        this.trainingMethods.constValue = item.constValue
-        this.trainingMethods.id = item.id
-        addxiala(this.trainingMethods)
           .toPromise()
           .then((response) => {
             this.getUnitList()
+            this.pleaseChoose = ''
           })
-      } else if (item.flag == 'check') {
-        this.trainingMethods.compId = sessionStorage.getItem('ws-pf_compId')
-        this.trainingMethods.constKey = item.constKey
-        this.trainingMethods.constCode = 'TYPEYAN'
-        this.trainingMethods.constValue = item.constValue
-        this.trainingMethods.id = item.id
-        editxiala(this.trainingMethods)
-          .toPromise()
-          .then((response) => {
-            this.getUnitList()
-          })
-      }
-    },
-    getList() {
-      getstaff({ compId: sessionStorage.getItem('ws-pf_compId') })
-        .toPromise()
-        .then((response) => {
-          // this.agent = response
-          this.options = response
-          this.optionsOther = response
-          this.staffList = response
-          this.personCharge = response
-          // for(var i=0;i<response.length;i++){
-          //   this.optionsOther.push(response[i].staffName+" "+response[i].staffMobilePhone)
-          // }
-        })
-    },
-    selectChapterTwo(e) {
-      for (var i = 0; i < this.ChapterTwoList.length; i++) {
-        if (this.ChapterTwoList[i].constValue == e) {
-          this.deptBudgetList.gradeKey = this.ChapterTwoList[i].constKey
-        }
-      }
-    },
-    selectunitList(e) {
-      for (var i = 0; i < this.unitList.length; i++) {
-        if (this.unitList[i].constValue == e) {
-          this.deptBudgetList.acceptanceMethodKey = this.unitList[i].constKey
-        }
-      }
-    },
-    selectgrade(e) {
-      for (var i = 0; i < this.gradeList.length; i++) {
-        if (this.gradeList[i].constValue == e) {
-          this.deptBudgetList.gradeKey = this.gradeList[i].constKey
-        }
-      }
-    },
-    selectgoodsName(e) {
-      for (var i = 0; i < this.goodnameList.length; i++) {
-        if (this.goodnameList[i].constValue == e) {
-          this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
-        }
-      }
-    },
-    selectpackingMethod(e) {
-      for (var i = 0; i < this.packtypeList.length; i++) {
-        if (this.packtypeList[i].constValue == e) {
-          this.deptBudgetList.packingMethodKey = this.packtypeList[i].constKey
-        }
-      }
-    },
-    // 编辑
-    editClick(item, index) {
-      const map = JSON.parse(JSON.stringify(item))
-      if (Object.is(item.id, 1)) {
-        return
-      }
-      if (Object.is(this.unitList[index].flag, 'delete')) {
-        map.flag = 'check'
-        this.$set(this.unitList, index, map)
-      } else {
-        map.flag = 'delete'
-        this.$set(this.unitList, index, map)
-      }
-    },
-    // 删除
-    deleteClick(item, index) {
-      if (Object.is(item.constKey, 1)) {
-        return
-      }
-      if (!item.constValue) {
-        this.unitList.splice(index, 1)
-        return
-      }
-      delxiala({ id: this.unitList[index].id })
-        .toPromise()
-        .then((response) => {
-          this.getUnitList()
-          this.pleaseChoose = ''
-        })
+      },
     },
-  },
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-/deep/.totalStorage .el-input__inner {
-  color: #afb5cb;
-  background: #f5f7fa;
-}
-.small-title {
-  position: relative;
-  padding: 10px;
-  font-weight: 600;
-}
-.small-title::before {
-  position: absolute;
-  content: '';
-  display: block;
-  background: #5473e8;
-  width: 4px;
-  height: 14px;
-  left: 0px;
-  top: 13px;
-}
-.position {
-  position: relative;
-}
-.add,
-.del {
-  position: absolute;
-  right: -38px;
-  top: 9px;
-  cursor: pointer;
-}
-.del {
-  right: -70px;
-}
-.amap-page-container {
-  width: 300px;
-  height: 300px;
-}
-.el-form {
-  padding: 0 15%;
-}
-/deep/.ws-info-table .el-form-item {
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-}
-.readonly {
-  position: relative;
-}
-.readonly:after {
-  content: '*';
-  color: #ff2727;
-  position: absolute;
-  right: 8px;
-  z-index: 10;
-  top: 21%;
-  font-size: 20px;
-}
-.title {
-  position: relative;
-}
-.title::before {
-  content: '';
-  display: inline-block;
-  width: 5px;
-  height: 30px;
-  background: #5473e8;
-  position: absolute;
-  left: 0;
-}
-.ws-info-table {
-  border-left: 1px solid transparent;
-  border-top: 1px solid transparent;
-}
-.el-button--primary {
-  background-color: #5878e8;
-  border-color: #5878e8;
-}
-.el-col {
-  background: #f6f7fc;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  padding: 0 25px;
-  border-left: 1px solid transparent;
-  background: #fff;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__label {
-  width: 115px;
-  text-align: center;
-  background: #fff;
-  // border: 1px solid #cdd2dc;
-}
-.button-container {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  width: 100%;
-  height: 50px;
-  padding: 0 10px;
-  & > div {
-    margin-left: 10px;
+  /deep/.totalStorage .el-input__inner {
+    color: #afb5cb;
+    background: #f5f7fa;
+  }
+
+  .small-title {
+    position: relative;
+    padding: 10px;
+    font-weight: 600;
+  }
+
+  .small-title::before {
+    position: absolute;
+    content: '';
+    display: block;
+    background: #5473e8;
+    width: 4px;
+    height: 14px;
+    left: 0px;
+    top: 13px;
+  }
+
+  .position {
+    position: relative;
+  }
+
+  .add,
+  .del {
+    position: absolute;
+    right: -38px;
+    top: 9px;
+    cursor: pointer;
+  }
+
+  .del {
+    right: -70px;
+  }
+
+  .amap-page-container {
+    width: 300px;
+    height: 300px;
+  }
+
+  .el-form {
+    padding: 0 15%;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  .readonly {
+    position: relative;
+  }
+
+  .readonly:after {
+    content: '*';
+    color: #ff2727;
+    position: absolute;
+    right: 8px;
+    z-index: 10;
+    top: 21%;
+    font-size: 20px;
+  }
+
+  .title {
+    position: relative;
+  }
+
+  .title::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+    background: #5473e8;
+    position: absolute;
+    left: 0;
+  }
+
+  .ws-info-table {
+    border-left: 1px solid transparent;
+    border-top: 1px solid transparent;
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .el-col {
+    background: #f6f7fc;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+    border-left: 1px solid transparent;
+    background: #fff;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 115px;
+    text-align: center;
+    background: #fff;
+    // border: 1px solid #cdd2dc;
+  }
+
+  .button-container {
     display: flex;
     flex-wrap: nowrap;
-    flex-direction: row;
-    & > span {
-      line-height: 50px;
-    }
-  }
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
+
+    &>div {
+      margin-left: 10px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
 
-  /deep/.auditFlow-box {
-    position: unset;
-    margin-left: 10px;
-    &/deep/.auditFlow-icon {
-      width: auto;
-      padding-right: 30px;
+      &>span {
+        line-height: 50px;
+      }
     }
-    &/deep/.auditFlow-main {
-      position: absolute;
+
+    /deep/.auditFlow-box {
+      position: unset;
+      margin-left: 10px;
+
+      &/deep/.auditFlow-icon {
+        width: auto;
+        padding-right: 30px;
+      }
+
+      &/deep/.auditFlow-main {
+        position: absolute;
+      }
     }
   }
-}
-.box-app {
-  display: inline-block;
-  float: left;
-  margin-left: 30px;
-  line-height: 50px;
-}
-/deep/.el-dialog {
-  .el-form-item {
-    margin-bottom: 0 !important;
-    .el-input--medium {
-      textarea {
-        min-height: 100px !important;
+
+  .box-app {
+    display: inline-block;
+    float: left;
+    margin-left: 30px;
+    line-height: 50px;
+  }
+
+  /deep/.el-dialog {
+    .el-form-item {
+      margin-bottom: 0 !important;
+
+      .el-input--medium {
+        textarea {
+          min-height: 100px !important;
+        }
       }
     }
   }
-}
-.collapse-bottom {
-  margin-bottom: 20px;
-}
-.input-main .textarea .el-textarea__inner {
-  width: 100%;
-  z-index: 1;
-}
-.bg-left {
-  padding-left: 30px;
-}
-.bg-right {
-  padding-right: 10px;
-  text-align: right;
-}
-.bg-bottom {
-  margin: 15px 0px;
-}
-.wenzi {
-  width: 900px;
-  margin: 0 auto;
-}
-.wenzi h3 {
-  display: inline-block;
-  left: 10px;
-}
-.wenzi p {
-  display: inline-block;
-}
-.center {
-  width: 900px;
-  margin: 0 auto;
-}
-.el-form-item {
-  width: 50%;
-}
-.el-form-item__label {
-  text-align: center;
-}
-.ce {
-  width: 900px;
-  margin: 0 auto;
-}
-/*.crt-main .textarea /deep/ .el-form-item__label {*/
-/*  height: 82px;*/
-/*}*/
-// 控制select为只读的时候显示样式
-
-.hide-sel {
-  .el-input__inner {
-    border: 0px;
+
+  .collapse-bottom {
+    margin-bottom: 20px;
   }
-  .el-icon-arrow-up {
-    display: none;
+
+  .input-main .textarea .el-textarea__inner {
+    width: 100%;
+    z-index: 1;
   }
-  .el-textarea__inner {
-    background-color: #fff !important;
-    border: 0;
+
+  .bg-left {
+    padding-left: 30px;
   }
-  .el-date-editor {
-    i {
-      display: none;
-    }
+
+  .bg-right {
+    padding-right: 10px;
+    text-align: right;
   }
-  .is-disabled {
-    .el-input__inner:hover {
-      background-color: #fff !important;
-      border: 0;
-    }
-    color: #606266;
+
+  .bg-bottom {
+    margin: 15px 0px;
+  }
+
+  .wenzi {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  .wenzi h3 {
+    display: inline-block;
+    left: 10px;
+  }
+
+  .wenzi p {
+    display: inline-block;
+  }
+
+  .center {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  .el-form-item {
+    width: 50%;
+  }
+
+  .el-form-item__label {
+    text-align: center;
+  }
+
+  .ce {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  /*.crt-main .textarea /deep/ .el-form-item__label {*/
+  /*  height: 82px;*/
+  /*}*/
+  // 控制select为只读的时候显示样式
+
+  .hide-sel {
     .el-input__inner {
-      background-color: #fff !important;
-      border: 0;
-      color: #606266;
+      border: 0px;
     }
+
+    .el-icon-arrow-up {
+      display: none;
+    }
+
     .el-textarea__inner {
       background-color: #fff !important;
       border: 0;
+    }
+
+    .el-date-editor {
+      i {
+        display: none;
+      }
+    }
+
+    .is-disabled {
+      .el-input__inner:hover {
+        background-color: #fff !important;
+        border: 0;
+      }
+
       color: #606266;
+
+      .el-input__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+
+      .el-textarea__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
     }
   }
-}
 
-// 控制select为只读的时候显示样式
-/deep/.ws-class-table-col {
-  height: auto;
-  padding: 0px 2px;
-  /deep/.el-input__inner {
+  // 控制select为只读的时候显示样式
+  /deep/.ws-class-table-col {
+    height: auto;
     padding: 0px 2px;
+
+    /deep/.el-input__inner {
+      padding: 0px 2px;
+    }
+  }
+
+  /deep/.is-disabled {
+    .el-input__prefix,
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff !important;
+      color: #000 !important;
+      font-size: 14px;
+      cursor: text;
+      padding: 0 !important;
+    }
   }
-}
-/deep/.is-disabled {
-  .el-input__prefix,
-  .el-input__suffix {
+
+  .winseaview-view {
+    padding: 0 0 20px;
+  }
+
+  .container {
+    overflow: scroll;
+    height: 93vh;
+  }
+
+  .ws-info-table .el-form-item {
+    width: 33.3333%;
+  }
+
+  .readonly:after {
+    display: none;
+  }
+
+  .el-textarea__inner {
     display: none;
   }
-  .el-input__inner {
+
+  .el-form {
+    margin-top: 50px;
+  }
+
+  .readonly {
+    width: 16%;
+  }
+
+  .ws-info-table .el-form-item {
+    width: 33.33%;
+  }
+
+  //去边框
+  /deep/.el-form-item {
+    border-right: 0px;
+    border-bottom: 0px;
+  }
+
+  /deep/.ws-info-table {
+    border-left: 0px;
+    border-top: 0px;
+  }
+
+  .ws-info-table .el-form-item .el-form-item__content {
+    border-right: 0px;
+    border-bottom: 0px;
+    border-left: 0px;
+    border-top: 0px;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 0px;
+    border-bottom: 0px;
+    border-left: 0px;
+    border-top: 0px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    background: #f5f7fa;
+    border-radius: 4px;
+    border: 1px solid #d8dce6;
+    font-family: PingFangSC-Regular, PingFang SC;
+    margin-bottom: 5px;
     background-color: #fff;
-    border-color: #fff !important;
-    color: #000 !important;
     font-size: 14px;
-    cursor: text;
-    padding: 0 !important;
+    font-weight: 400;
+    color: #8890b1;
+    line-height: 16px;
   }
-}
-.winseaview-view {
-  padding: 0 0 20px;
-}
-.container {
-  overflow: scroll;
-  height: 93vh;
-}
-.ws-info-table .el-form-item {
-  width: 33.3333%;
-}
-.readonly:after {
-  display: none;
-}
-.el-textarea__inner {
-  display: none;
-}
-.el-form {
-  margin-top: 50px;
-}
-.readonly {
-  width: 16%;
-}
-.ws-info-table .el-form-item {
-  width: 33.33%;
-}
-//去边框
-/deep/.el-form-item {
-  border-right: 0px;
-  border-bottom: 0px;
-}
-/deep/.ws-info-table {
-  border-left: 0px;
-  border-top: 0px;
-}
-.ws-info-table .el-form-item .el-form-item__content {
-  border-right: 0px;
-  border-bottom: 0px;
-  border-left: 0px;
-  border-top: 0px;
-}
-/deep/.ws-info-table .el-form-item {
-  border-right: 0px;
-  border-bottom: 0px;
-  border-left: 0px;
-  border-top: 0px;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  background: #f5f7fa;
-  border-radius: 4px;
-  border: 1px solid #d8dce6;
-  font-family: PingFangSC-Regular, PingFang SC;
-  margin-bottom: 5px;
-  background-color: #fff;
-  font-size: 14px;
-  font-weight: 400;
-  color: #8890b1;
-  line-height: 16px;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__label {
-  background-color: #fff;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #8890b1;
-  line-height: 16px;
-}
-
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  border: 0px;
-}
-.avatar-uploader {
-  margin: 0 5px;
-}
-.addressUrls {
-  display: flex;
-  margin-top: 10px;
-}
-.addressUrls-item {
-  position: relative;
-      display: flex;
-}
-.icon-guanbi {
-  position: absolute;
-  right: 0;
-}
-.addressUrl {
-  margin: 0px 10px;
-  border-radius: 3px;
-}
-</style>
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    background-color: #fff;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #8890b1;
+    line-height: 16px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    border: 0px;
+  }
+
+  .avatar-uploader {
+    margin: 0 5px;
+  }
+
+  .addressUrls {
+    display: flex;
+    margin-top: 10px;
+  }
+
+  .addressUrls-item {
+    position: relative;
+    display: flex;
+  }
+
+  .icon-guanbi {
+    position: absolute;
+    right: 0;
+  }
+
+  .addressUrl {
+    margin: 0px 10px;
+    border-radius: 3px;
+  }
+</style>

src/views/warehouse/warehouseManagementEdit.vue

@@ -6,13 +6,7 @@
         <h2 class="bg-left title">修改仓库信息</h2>
       </el-col>
       <el-col :span="4" class="bg-right">
-        <el-button
-          class="bg-bottom"
-          type="primary"
-          size="small"
-          @click="returnWarehouse()"
-          >返回</el-button
-        >
+        <el-button class="bg-bottom" type="primary" size="small" @click="returnWarehouse()">返回</el-button>
       </el-col>
     </el-row>
     <div>
@@ -25,109 +19,44 @@
         <!--基本信息-->
         <ws-info-table>
           <!--仓库名称-->
-          <ws-form-item
-            label="仓库名称"
-            span="1"
-            prop="warehouseName"
-            class="readonly"
-          >
-            <ws-select
-              v-model="deptBudgetList.warehouseName"
-              placeholder=""
-              class="typeselect"
-              @change="selectpackingMethod"
-            >
-              <ws-option
-                v-for="item in packtypeList"
-                :key="item.constKey"
-                :label="item.warehouseName"
-                :value="item.warehouseName"
-              />
+          <ws-form-item label="仓库名称" span="1" prop="warehouseName" class="readonly">
+            <ws-select v-model="deptBudgetList.warehouseName" placeholder="" class="typeselect"
+              @change="selectpackingMethod">
+              <ws-option v-for="item in packtypeList" :key="item.constKey" :label="item.warehouseName"
+                :value="item.warehouseName" />
             </ws-select>
           </ws-form-item>
           <!--负责人-->
           <ws-form-item label="负责人" span="1" prop="personCharge">
-            <el-select
-              v-model="deptBudgetList.personCharge"
-              placeholder="请选择负责人"
-              filterable
-              clearable
-              @change="selectstaff"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.staffName"
-                :value="item.staffName"
-              />
+            <el-select v-model="deptBudgetList.personCharge" placeholder="请选择负责人" filterable clearable
+              @change="selectstaff">
+              <el-option v-for="item in options" :key="item.value" :label="item.staffName" :value="item.staffName" />
             </el-select>
           </ws-form-item>
           <!--负责人电话-->
-          <ws-form-item
-            label="负责人电话"
-            span="1"
-            prop="personPhone"
-            class="readonly"
-          >
-            <ws-input
-              :readonly="true"
-              v-model="deptBudgetList.personPhone"
-              placeholder="请输入负责人电话"
-              maxlength="100"
-              size="small"
-            />
+          <ws-form-item label="负责人电话" span="1" prop="personPhone" class="readonly">
+            <ws-input :readonly="true" v-model="deptBudgetList.personPhone" placeholder="请输入负责人电话" maxlength="100"
+              size="small" />
           </ws-form-item>
           <!--其他负责人-->
-        <ws-form-item label="其他负责人"  v-if="warehouseType == 1" span="1" prop="otherPersonCharge">
-          <el-select
-            v-model="deptBudgetList.otherPersonPhone"
-            placeholder="请选择其他负责人"
-            @change="selectstaffOther"
-            :filter-method="dataFilter1"
-            filterable 
-            multiple
-          >
-            <el-option
-              v-for="item in optionsOther"
-              :key="item.staffMobilePhone"
-              :label="item.staffName"
-              :value="item.staffMobilePhone "
-            />
-          </el-select>
-        </ws-form-item>
+          <ws-form-item label="其他负责人" v-if="warehouseType == 1" span="1" prop="otherPersonCharge">
+            <el-select v-model="deptBudgetList.otherPersonPhone" placeholder="请选择其他负责人" @change="selectstaffOther"
+              :filter-method="dataFilter1" filterable multiple>
+              <el-option v-for="item in optionsOther" :key="item.staffMobilePhone" :label="item.staffName"
+                :value="item.staffMobilePhone " />
+            </el-select>
+          </ws-form-item>
           <!--仓库所在地-->
           <ws-form-item label="仓库所在地" span="1" prop="warehouseCity">
-            <el-cascader
-              :options="options_"
-              v-model="selectedOptions"
-              clearable
-              size="large"
-              placeholder="请输入仓库所在地"
-              style="width: 200%"
-              @change="handleChange"
-            />
+            <el-cascader :options="options_" v-model="selectedOptions" clearable size="large" placeholder="请输入仓库所在地"
+              style="width: 200%" @change="handleChange" />
           </ws-form-item>
           <!--详细地址-->
-          <ws-form-item
-            label="详细地址"
-            span="1"
-            prop="detailedAddress"
-            class="readonly"
-          >
-            <ws-input
-              v-model="deptBudgetList.detailedAddress"
-              placeholder="请输入详细地址"
-              maxlength="100"
-              size="small"
-            />
+          <ws-form-item label="详细地址" span="1" prop="detailedAddress" class="readonly">
+            <ws-input v-model="deptBudgetList.detailedAddress" placeholder="请输入详细地址" maxlength="100" size="small" />
           </ws-form-item>
           <!--总储量（吨)-->
-          <ws-form-item
-            v-if="warehouseType == 1"
-            label="总储量（吨)"
-            span="1"
-            prop="totalStorage"
-          >
+          <ws-form-item v-if="warehouseType == 1" label="总储量（吨)" span="1" prop="totalStorage">
             {{ totalStorage }}
           </ws-form-item>
         </ws-info-table>
@@ -135,936 +64,983 @@
           <ws-info-table>
             <!--仓位编号-->
             <ws-form-item label="仓位编号" span="1" prop="binNumber">
-              <ws-input
-                v-model.number="item.binNumber"
-                placeholder="请输入仓位编号"
-                maxlength="100"
-                size="small"
-              />
+              <ws-input v-model.number="item.binNumber" placeholder="请输入仓位编号" maxlength="100" size="small" />
             </ws-form-item>
             <!--仓位储量（吨）-->
             <ws-form-item label="仓位储量（吨）" span="1" prop="maxStorage">
-              <ws-input
-                v-model="item.maxStorage"
-                placeholder="请输入仓位储量（吨）"
-                maxlength="20"
-                size="small"
-              />
+              <ws-input v-model="item.maxStorage" placeholder="请输入仓位储量（吨）" maxlength="20" size="small" />
             </ws-form-item>
             <!--备注（选填）-->
             <ws-form-item label="备注（选填）" span="1" prop=" remark">
-              <ws-input
-                v-model="item.remark"
-                placeholder="请输入备注"
-                maxlength="100"
-                size="small"
-              />
+              <ws-input v-model="item.remark" placeholder="请输入备注" maxlength="100" size="small" />
             </ws-form-item>
-            <img
-              width="22"
-              height="22"
-              class="add"
-              @click="add"
-              src="../../../public/img/add.png"
-              alt=""
-            />
-            <img
-              width="22"
-              height="22"
-              class="del"
-              @click="del(index, item)"
-              src="../../../public/img/del.png"
-              alt=""
-            />
+            <img width="22" height="22" class="add" @click="add" src="../../../public/img/add.png" alt="" />
+            <img width="22" height="22" class="del" @click="del(index, item)" src="../../../public/img/del.png"
+              alt="" />
           </ws-info-table>
         </div>
       </ws-form>
       <ws-form ref="deptBudgetList" :model="deptBudgetList">
         <div v-if="warehouseType == 1" class="small-title">上传仓库照片</div>
-        <el-upload
-          action="https://www.zthymaoyi.com/upload/admin"
-          :show-file-list="false"
-          :on-success="
+        <el-upload action="https://www.zthymaoyi.com/upload/admin" :show-file-list="false" :on-success="
             (res, file) => {
               uploadSuccessHandle(res)
             }
-          "
-          :on-remove="
+          " :on-remove="
             (value) => {
               handleRemove(value)
             }
-          "
-          class="avatar-uploader"
-          accept=".jpg, .jpeg, .png, .gif"
-        >
-          <el-button  v-if="warehouseType == 1">上传附件</el-button>
+          " class="avatar-uploader" accept=".jpg, .jpeg, .png, .gif">
+          <el-button v-if="warehouseType == 1">上传附件</el-button>
         </el-upload>
         <div class="addressUrls" v-if="addressUrls != null">
-        <div class='addressUrls-item'>
-          <div v-for="(item , index) in addressUrls" class="addressUrl" :key="index">
-           <div @click='close(index)' class="iconfont icon-guanbi"></div>
-          <img
-            v-if="addressUrls != null"
-            width="100"
-            height="100"
-            :src="item"
-            alt=""
-          /> 
-        </div>
-         
-       
-          </div> 
+          <div class='addressUrls-item'>
+            <div v-for="(item , index) in addressUrls" class="addressUrl" :key="index">
+              <div @click='close(index)' class="iconfont icon-guanbi"></div>
+              <img v-if="addressUrls != null" width="100" height="100" :src="item" alt="" />
+            </div>
+
+
           </div>
+        </div>
         <div class="small-title">仓库定位</div>
-        <map-drag
-        :selectedOptions='selectedOptions'
-          @marker="marker"
-          @selectedAddress="selectedAddress"
-        ></map-drag>
+        <map-drag @marker="marker" :isShowaddress='false' v-on:addressListen='getAddress'
+          v-on:pickedAddress='searchAddress'></map-drag>
       </ws-form>
 
       <!-- <ws-button @click="exportlist()"></ws-button> -->
     </div>
     <div style="text-align: right; padding: 10px">
-      <el-button
-        class="bg-bottom-up"
-        type="primary"
-        size="small"
-        @click="submit()"
-        >修改</el-button
-      >
+      <el-button class="bg-bottom-up" type="primary" size="small" @click="submit()">修改</el-button>
     </div>
   </div>
 </template>
 <script>
-import { getFileList, saveFiles } from '@/model/upload'
-import {
-  getstafffind,
-} from '@/model/contarct/index'
-import {
-  xiala,
-  billoperatehis,
-  getLook,
-  edit,
-  delPosition
-} from '@/model/warehouse/index'
-import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
-import { downloadFile } from '@/utils/batchDown'
-import Pagination from '@/components/Pagination'
-import WsUpload from '@/components/WsUpload'
-import mapDrag from '@/components/mapdrag/mapdrag'
-import { dayjs, fmoney, EventBus } from 'base-core-lib'
-export default {
-  name: 'viewSpareMoney',
-  components: {
-    WsUpload,
-    Pagination,
-    mapDrag,
-  },
-  watch: {
-    vesselId(val) {
-      this.getList()
+  import {
+    getFileList,
+    saveFiles
+  } from '@/model/upload'
+  import {
+    getstafffind,
+  } from '@/model/contarct/index'
+  import {
+    xiala,
+    billoperatehis,
+    getLook,
+    edit,
+    delPosition
+  } from '@/model/warehouse/index'
+  import {
+    regionData,
+    CodeToText,
+    TextToCode
+  } from 'element-china-area-data'
+  import {
+    downloadFile
+  } from '@/utils/batchDown'
+  import Pagination from '@/components/Pagination'
+  import WsUpload from '@/components/WsUpload'
+  import mapDrag from '@/components/mapdrag/mapdrag'
+  import {
+    dayjs,
+    fmoney,
+    EventBus
+  } from 'base-core-lib'
+  export default {
+    name: 'viewSpareMoney',
+    components: {
+      WsUpload,
+      Pagination,
+      mapDrag,
     },
-    isShow(val) {
-      this.showType = val
-    },
-  },
-  data() {
-    return {
-      fileList: [],
-      //弹出框
-      dialogViewSpareMoney: false,
-      dialogApproveFormVisible: false,
-      // 船舶类型
-      monetaryKey: null,
-      // 表格显示数据
-      tableDate: [],
-      // 是否显示
-      showType: true,
-      // 年
-      year: '',
-      deptBudgetTotal: 0,
-      currentPage: 1,
-      pageSize: 10,
-      searchType: 1,
-      searchKeyWord: '',
-      contractType: 2,
-      startDate: null,
-      endDate: null,
-      warehouseType: '1',
-      unitList: [],
-      baseId: '',
-      // 提交类型
-      submitType: true,
-      size: 10,
-      options_: regionData,
-      selectedOptions: [],
-      compId: sessionStorage.getItem('ws-pf_compId'),
-      deptCircularPage: {},
-      packtypeList: [],
-      date: {
-        year: dayjs().format('YYYY'),
-        month: dayjs().format('MM'),
+    watch: {
+      vesselId(val) {
+        this.getList()
       },
-      staffList: [],
-      contractList: [],
-      deptBudgetList: {},
-      historyList: [],
-      appendixIdsAdd: '',
-      pickerBeginDateBefore: {
-        disabledDate: (time) => {
-          return time.getTime() > Date.now()
-        },
+      isShow(val) {
+        this.showType = val
       },
-      options: [],
-      staffList1:[],
-      optionsOther: [],
-      value: '',
-      accessoryTFs: false,
-      addressUrls: [],
-    }
-  },
-  activated() {
-    this.loaddata()
-    getstafffind({ roles: 'd6a5c8a52da544309259f91f75de1ec6' })
-      .toPromise()
-      .then((response) => {
-        this.options = response
-        this.optionsOther = response
-        this.staffList1 = response
-        this.staffList = response
-      })
-    this.showType = this.isShow
-  },
-  computed: {
-    totalStorage: function () {
-      var sum = 0
-      if (this.deptBudgetList.warehousePositionInfoList) {
-        for (
-          var i = 0;
-          i < this.deptBudgetList.warehousePositionInfoList.length;
-          i++
-        ) {
-          sum += Number(
-            this.deptBudgetList.warehousePositionInfoList[i].maxStorage
-          )
-        }
-      }
-      return sum
     },
-  },
-  methods: {
-     selectstaffOther(e) {
-      this.deptBudgetList.otherPersonCharge = ''
-      for (var i = 0; i < this.optionsOther.length; i++) {
-        for(var j=0;j<e.length;j++){
-          if (this.optionsOther[i].staffMobilePhone == e[j]) {
-            this.deptBudgetList.otherPersonCharge += this.optionsOther[i].staffName + ' '+ this.optionsOther[i].staffMobilePhone + ','
-          }
-        }
+    data() {
+      return {
+        fileList: [],
+        //弹出框
+        dialogViewSpareMoney: false,
+        dialogApproveFormVisible: false,
+        // 船舶类型
+        monetaryKey: null,
+        // 表格显示数据
+        tableDate: [],
+        // 是否显示
+        showType: true,
+        // 年
+        year: '',
+        deptBudgetTotal: 0,
+        currentPage: 1,
+        pageSize: 10,
+        searchType: 1,
+        searchKeyWord: '',
+        contractType: 2,
+        startDate: null,
+        endDate: null,
+        warehouseType: '1',
+        unitList: [],
+        baseId: '',
+        // 提交类型
+        submitType: true,
+        size: 10,
+        options_: regionData,
+        selectedOptions: [],
+        compId: sessionStorage.getItem('ws-pf_compId'),
+        deptCircularPage: {},
+        packtypeList: [],
+        date: {
+          year: dayjs().format('YYYY'),
+          month: dayjs().format('MM'),
+        },
+        staffList: [],
+        contractList: [],
+        deptBudgetList: {},
+        historyList: [],
+        appendixIdsAdd: '',
+        pickerBeginDateBefore: {
+          disabledDate: (time) => {
+            return time.getTime() > Date.now()
+          },
+        },
+        options: [],
+        staffList1: [],
+        optionsOther: [],
+        value: '',
+        accessoryTFs: false,
+        addressUrls: [],
       }
     },
-    close(index){
-      this.addressUrls.splice(index,1)
-    },
-    dataFilter(val) {
-      this.deptBudgetList.personCharge = val
-      if (val) {
-        //val存在
-        this.options = this.staffList.filter((item) => {
-          if (
-            !!~item.staffName.indexOf(val) ||
-            !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
-          ) {
-            return true
-          }
+    activated() {
+      this.loaddata()
+      getstafffind({
+          roles: 'd6a5c8a52da544309259f91f75de1ec6'
         })
-      } else {
-        //val为空时，还原数组
-        this.options = this.staffList
-      }
+        .toPromise()
+        .then((response) => {
+          this.options = response
+          this.optionsOther = response
+          this.staffList1 = response
+          this.staffList = response
+        })
+      this.showType = this.isShow
     },
-    dataFilter1(val) {
-      this.deptBudgetList.personCharge = val
-      if (val) {
-        //val存在
-        this.optionsOther = this.staffList1.filter((item) => {
-          if (
-            !!~item.staffName.indexOf(val) ||
-            !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
+    computed: {
+      totalStorage: function() {
+        var sum = 0
+        if (this.deptBudgetList.warehousePositionInfoList) {
+          for (
+            var i = 0; i < this.deptBudgetList.warehousePositionInfoList.length; i++
           ) {
-            return true
+            sum += Number(
+              this.deptBudgetList.warehousePositionInfoList[i].maxStorage
+            )
           }
-        })
-      } else {
-        //val为空时，还原数组
-        this.optionsOther = this.staffList1
-      }
-    },
-    selectstaff(e) {
-      for (var i = 0; i < this.staffList.length; i++) {
-        if (this.staffList[i].staffName == e) {
-          this.deptBudgetList.personPhone = this.staffList[i].staffMobilePhone
-          this.deptBudgetList.personChargeKey = this.staffList[i].staffId
-        }
-      }
-    },
-    //返回按钮
-    returnWarehouse() {
-      this.addressUrls = []
-      this.deptBudgetList = {}
-      this.selectedOptions = []
-      this.$router.push({ path: 'warehouseManagementList' })
-    },
-    handleChange(value) {
-      this.selectedOptions = value
-    },
-    warehouseTypechange() {
-      this.addressUrls = []
-      this.deptBudgetList = {}
-      this.selectedOptions = []
-      this.loaddata()
-    },
-    marker: function (item) {
-      this.deptBudgetList.warehousePositioning =
-        item.lnglat.lat + ',' + item.lnglat.lng
-    },
-    selectedAddress(e) {
-      this.deptBudgetList.warehousePositioning =
-        e.center.lat + ',' + e.center.lng
-    },
-    uploadSuccess(data, files, url) {
-      this.fileList = files
-      console.log('uploadSuccess ', data, files, url)
-    },
-    onChange(files) {
-      this.fileNum = files
-      this.$refs.upload.handleSaveBill().then((res) => {
-        console.log(files)
-      })
-    },
-    handleClose() {
-      this.accessoryTFs = false
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-      this.pageSize = val
-      this.getList()
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val
-      console.log(`当前页: ${val}`)
-      this.getList()
-    },
-    selectpackingMethod(e) {
-      for (var i = 0; i < this.packtypeList.length; i++) {
-        if (this.packtypeList[i].warehouseName == e) {
-          this.baseId = this.packtypeList[i].id
-          this.getLook(this.packtypeList[i].id)
         }
-      }
-    },
-    add() {
-      this.deptBudgetList.warehousePositionInfoList.push({
-        binNumber: '',
-        maxStorage: '',
-        remark: '',
-      })
+        return sum
+      },
     },
-    del(index, item) {
-      if (item.nowStorage > 0) {
-        this.$message.warning('尚有剩余库存，不可删除')
-      } else {
-        this.$confirm(`此操作将永久删除该仓位的全部信息，是否确定删除`, {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            if (item.id) {
-              delPosition({ id: item.id })
-                .toPromise()
-                .then((response) => {
-                  this.$message.success('删除成功')
-                })
-                .catch((response) => {
-                  EventBus.$emit(
-                    'error',
-                    this.$t('showMessage.asteriskRequired')
-                  )
-                })
+    methods: {
+      getAddress(data) {
+        console.log("getAddress", data)
+        this.deptBudgetList.warehousePrivate = data[0]
+        this.deptBudgetList.warehouseCity = data[1]
+        this.deptBudgetList.warehouseArea = data[2]
+      },
+      searchAddress(e) {
+        this.deptBudgetList.warehousePositioning = e.lat + ',' + e.lng
+      },
+      selectstaffOther(e) {
+        this.deptBudgetList.otherPersonCharge = ''
+        for (var i = 0; i < this.optionsOther.length; i++) {
+          for (var j = 0; j < e.length; j++) {
+            if (this.optionsOther[i].staffMobilePhone == e[j]) {
+              this.deptBudgetList.otherPersonCharge += this.optionsOther[i].staffName + ' ' + this.optionsOther[i]
+                .staffMobilePhone + ','
             }
-            if (this.deptBudgetList.warehousePositionInfoList.length > 1) {
-              this.deptBudgetList.warehousePositionInfoList.splice(index, 1)
+          }
+        }
+      },
+      close(index) {
+        this.addressUrls.splice(index, 1)
+      },
+      dataFilter(val) {
+        this.deptBudgetList.personCharge = val
+        if (val) {
+          //val存在
+          this.options = this.staffList.filter((item) => {
+            if (
+              !!~item.staffName.indexOf(val) ||
+              !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
+            ) {
+              return true
             }
           })
-          .catch(() => {
-            return false
-          })
-      }
-    },
-    loaddata() {
-      // 仓库名称
-      xiala({
-        compId: sessionStorage.getItem('ws-pf_compId'),
-        warehouseType: this.warehouseType,
-      })
-        .toPromise()
-        .then((response) => {
-          this.packtypeList = response
-        })
-    },
-    getUnitList() {
-      xiala({
-        compId: sessionStorage.getItem('ws-pf_compId'),
-        constCode: 'TYPEYAN',
-      })
-        .toPromise()
-        .then((response) => {
-          this.unitList = response
-          let currItem
-          this.unitList.forEach((item, index, arr) => {
-            item.flag = 'delete'
-            if (this.vModel == item.constKey) {
-              currItem = item
-              this.getLook(currItem.compId)
+        } else {
+          //val为空时，还原数组
+          this.options = this.staffList
+        }
+      },
+      dataFilter1(val) {
+        this.deptBudgetList.personCharge = val
+        if (val) {
+          //val存在
+          this.optionsOther = this.staffList1.filter((item) => {
+            if (
+              !!~item.staffName.indexOf(val) ||
+              !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
+            ) {
+              return true
             }
           })
-          //
-          if (currItem) {
-            this.getLook(currItem.compId)
+        } else {
+          //val为空时，还原数组
+          this.optionsOther = this.staffList1
+        }
+      },
+      selectstaff(e) {
+        for (var i = 0; i < this.staffList.length; i++) {
+          if (this.staffList[i].staffName == e) {
+            this.deptBudgetList.personPhone = this.staffList[i].staffMobilePhone
+            this.deptBudgetList.personChargeKey = this.staffList[i].staffId
           }
-        })
-    },
-    getLook(compId1) {
-      getLook({
-        id: compId1,
-      })
-        .toPromise()
-        .then((response) => {
-          var tmp = []
-          tmp[0] = TextToCode[response.warehousePrivate].code
-          tmp[1] =
-            TextToCode[response.warehousePrivate][response.warehouseCity].code
-          tmp[2] =
-            TextToCode[response.warehousePrivate][response.warehouseCity][
-              response.warehouseArea
-            ].code
-          this.selectedOptions = tmp
-          this.deptBudgetList = response
-          // if(this.deptBudgetList.addressUrl){
-          //   this.fileList =  this._getFileList(this.deptBudgetList.addressUrl)
-          // }
-          this.addressUrls = this.deptBudgetList.addressUrl.split(',')
-          this.deptBudgetList.otherPersonPhone=this.deptBudgetList.otherPersonPhone.split(',')
-          this.addressUrls.pop()
-        })
-    },
-    // 传入appendixIds 从服务器获取文件列表信息
-    _getFileList(appendixIds) {
-      return new Promise(async (next) => {
-        try {
-          next((await getFileList({ appendixIds }).toPromise()) || [])
-        } catch (error) {
-          next()
         }
-      })
-    },
-    uploadSuccessHandle(e) {
-      this.deptBudgetList.addressUrl += e.url + ','
-      this.addressUrls.push(e.url)
-    },
-    //提交
-    submit() {
-      if (!this.deptBudgetList.warehouseName) {
-        this.$message({
-          message: '仓库名称不能为空！',
-          type: 'warning',
-        })
-        return
-      }
-      if (
-        this.deptBudgetList.warehouseName.length < 2 ||
-        this.deptBudgetList.warehouseName.length > 20
-      ) {
-        this.$message({
-          message: '仓库名长度不符合要求！',
-          type: 'warning',
-        })
-        return
-      }
-      if (!this.deptBudgetList.personCharge) {
-        this.$message({
-          message: '负责人不能为空！',
-          type: 'warning',
-        })
-        return
-      }
-      if (
-        this.deptBudgetList.personCharge.length < 2 ||
-        this.deptBudgetList.personCharge.length > 10
-      ) {
-        this.$message({
-          message: '负责人长度不符合要求，请控制在2-10字符之内',
-          type: 'warning',
+      },
+      //返回按钮
+      returnWarehouse() {
+        this.addressUrls = []
+        this.deptBudgetList = {}
+        this.selectedOptions = []
+        this.$router.push({
+          path: 'warehouseManagementList'
         })
-        return
-      }
-      if (!this.deptBudgetList.personPhone) {
-        this.$message({
-          message: '负责人电话不能为空！',
-          type: 'warning',
+      },
+      handleChange(value) {
+        this.selectedOptions = value
+      },
+      warehouseTypechange() {
+        this.addressUrls = []
+        this.deptBudgetList = {}
+        this.selectedOptions = []
+        this.loaddata()
+      },
+      marker: function(item) {
+        this.deptBudgetList.warehousePositioning =
+          item.lnglat.lat + ',' + item.lnglat.lng
+      },
+      selectedAddress(e) {
+        this.deptBudgetList.warehousePositioning =
+          e.center.lat + ',' + e.center.lng
+      },
+      uploadSuccess(data, files, url) {
+        this.fileList = files
+        console.log('uploadSuccess ', data, files, url)
+      },
+      onChange(files) {
+        this.fileNum = files
+        this.$refs.upload.handleSaveBill().then((res) => {
+          console.log(files)
         })
-        return
-      }
-      if (this.deptBudgetList.personPhone.length != 11) {
-        this.$message({
-          message: '手机号输入有误！',
-          type: 'warning',
+      },
+      handleClose() {
+        this.accessoryTFs = false
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      },
+      selectpackingMethod(e) {
+        for (var i = 0; i < this.packtypeList.length; i++) {
+          if (this.packtypeList[i].warehouseName == e) {
+            this.baseId = this.packtypeList[i].id
+            this.getLook(this.packtypeList[i].id)
+          }
+        }
+      },
+      add() {
+        this.deptBudgetList.warehousePositionInfoList.push({
+          binNumber: '',
+          maxStorage: '',
+          remark: '',
         })
-        return
-      }
-      if (!this.deptBudgetList.detailedAddress) {
-        this.$message({
-          message: '详细地址不能为空！',
-          type: 'warning',
+      },
+      del(index, item) {
+        if (item.nowStorage > 0) {
+          this.$message.warning('尚有剩余库存，不可删除')
+        } else {
+          this.$confirm(`此操作将永久删除该仓位的全部信息，是否确定删除`, {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            })
+            .then(() => {
+              if (item.id) {
+                delPosition({
+                    id: item.id
+                  })
+                  .toPromise()
+                  .then((response) => {
+                    this.$message.success('删除成功')
+                  })
+                  .catch((response) => {
+                    EventBus.$emit(
+                      'error',
+                      this.$t('showMessage.asteriskRequired')
+                    )
+                  })
+              }
+              if (this.deptBudgetList.warehousePositionInfoList.length > 1) {
+                this.deptBudgetList.warehousePositionInfoList.splice(index, 1)
+              }
+            })
+            .catch(() => {
+              return false
+            })
+        }
+      },
+      loaddata() {
+        // 仓库名称
+        xiala({
+            compId: sessionStorage.getItem('ws-pf_compId'),
+            warehouseType: this.warehouseType,
+          })
+          .toPromise()
+          .then((response) => {
+            this.packtypeList = response
+          })
+      },
+      getUnitList() {
+        xiala({
+            compId: sessionStorage.getItem('ws-pf_compId'),
+            constCode: 'TYPEYAN',
+          })
+          .toPromise()
+          .then((response) => {
+            this.unitList = response
+            let currItem
+            this.unitList.forEach((item, index, arr) => {
+              item.flag = 'delete'
+              if (this.vModel == item.constKey) {
+                currItem = item
+                this.getLook(currItem.compId)
+              }
+            })
+            //
+            if (currItem) {
+              this.getLook(currItem.compId)
+            }
+          })
+      },
+      getLook(compId1) {
+        getLook({
+            id: compId1,
+          })
+          .toPromise()
+          .then((response) => {
+            var tmp = []
+            tmp[0] = TextToCode[response.warehousePrivate].code
+            tmp[1] =
+              TextToCode[response.warehousePrivate][response.warehouseCity].code
+            tmp[2] =
+              TextToCode[response.warehousePrivate][response.warehouseCity][
+                response.warehouseArea
+              ].code
+            this.selectedOptions = tmp
+            this.deptBudgetList = response
+            // if(this.deptBudgetList.addressUrl){
+            //   this.fileList =  this._getFileList(this.deptBudgetList.addressUrl)
+            // }
+            this.addressUrls = this.deptBudgetList.addressUrl.split(',')
+            this.deptBudgetList.otherPersonPhone = this.deptBudgetList.otherPersonPhone.split(',')
+            this.addressUrls.pop()
+          })
+      },
+      // 传入appendixIds 从服务器获取文件列表信息
+      _getFileList(appendixIds) {
+        return new Promise(async (next) => {
+          try {
+            next((await getFileList({
+              appendixIds
+            }).toPromise()) || [])
+          } catch (error) {
+            next()
+          }
         })
-        return
-      }
-      if (this.warehouseType == 1) {
-        if (this.totalStorage <= 0) {
+      },
+      uploadSuccessHandle(e) {
+        this.deptBudgetList.addressUrl += e.url + ','
+        this.addressUrls.push(e.url)
+      },
+      //提交
+      submit() {
+        if (!this.deptBudgetList.warehouseName) {
           this.$message({
-            message: '仓位储量不能为空！',
+            message: '仓库名称不能为空！',
             type: 'warning',
           })
           return
         }
-      }
-
-      if (
-        this.deptBudgetList.detailedAddress.length < 2 ||
-        this.deptBudgetList.detailedAddress.length > 20
-      ) {
-        this.$message({
-          message: '详细地址长度不符合要求，请控制在2-20字符之内',
-          type: 'warning',
-        })
-        return
-      }
-      for (
-        var i = 0;
-        i < this.deptBudgetList.warehousePositionInfoList.length;
-        i++
-      ) {
-        for (
-          var j = i + 1;
-          j < this.deptBudgetList.warehousePositionInfoList.length;
-          j++
+        if (
+          this.deptBudgetList.warehouseName.length < 2 ||
+          this.deptBudgetList.warehouseName.length > 20
         ) {
-          console.log(
-            this.deptBudgetList.warehousePositionInfoList[i].binNumber,
-            this.deptBudgetList.warehousePositionInfoList[j].binNumber
-          )
-          if (
-            this.deptBudgetList.warehousePositionInfoList[i].binNumber ==
-            this.deptBudgetList.warehousePositionInfoList[j].binNumber
-          ) {
+          this.$message({
+            message: '仓库名长度不符合要求！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.personCharge) {
+          this.$message({
+            message: '负责人不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.personCharge.length < 2 ||
+          this.deptBudgetList.personCharge.length > 10
+        ) {
+          this.$message({
+            message: '负责人长度不符合要求，请控制在2-10字符之内',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.personPhone) {
+          this.$message({
+            message: '负责人电话不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.personPhone.length != 11) {
+          this.$message({
+            message: '手机号输入有误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.detailedAddress) {
+          this.$message({
+            message: '详细地址不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.warehouseType == 1) {
+          if (this.totalStorage <= 0) {
             this.$message({
-              message: '仓位编号重复',
+              message: '仓位储量不能为空！',
               type: 'warning',
             })
             return
           }
         }
-      }
-      this.$refs.deptBudgetList.validate((valid) => {
-        if (valid) {
-          this.deptBudgetList.warehousePrivate =
-            CodeToText[this.selectedOptions[0]]
-          this.deptBudgetList.warehouseCity =
-            CodeToText[this.selectedOptions[1]]
-          this.deptBudgetList.warehouseArea =
-            CodeToText[this.selectedOptions[2]]
-          this.deptBudgetList.warehouseType = this.warehouseType
-          this.deptBudgetList.baseId = this.baseId
-          this.deptBudgetList.compId = this.compId
-          this.deptBudgetList.contractType = 1
-           this.deptBudgetList.otherPersonPhone=this.deptBudgetList.otherPersonPhone.toString()
-          edit(this.deptBudgetList)
+
+        if (
+          this.deptBudgetList.detailedAddress.length < 2 ||
+          this.deptBudgetList.detailedAddress.length > 20
+        ) {
+          this.$message({
+            message: '详细地址长度不符合要求，请控制在2-20字符之内',
+            type: 'warning',
+          })
+          return
+        }
+        for (
+          var i = 0; i < this.deptBudgetList.warehousePositionInfoList.length; i++
+        ) {
+          for (
+            var j = i + 1; j < this.deptBudgetList.warehousePositionInfoList.length; j++
+          ) {
+            console.log(
+              this.deptBudgetList.warehousePositionInfoList[i].binNumber,
+              this.deptBudgetList.warehousePositionInfoList[j].binNumber
+            )
+            if (
+              this.deptBudgetList.warehousePositionInfoList[i].binNumber ==
+              this.deptBudgetList.warehousePositionInfoList[j].binNumber
+            ) {
+              this.$message({
+                message: '仓位编号重复',
+                type: 'warning',
+              })
+              return
+            }
+          }
+        }
+        this.$refs.deptBudgetList.validate((valid) => {
+          if (valid) {
+            this.deptBudgetList.warehousePrivate =
+              CodeToText[this.selectedOptions[0]]
+            this.deptBudgetList.warehouseCity =
+              CodeToText[this.selectedOptions[1]]
+            this.deptBudgetList.warehouseArea =
+              CodeToText[this.selectedOptions[2]]
+            this.deptBudgetList.warehouseType = this.warehouseType
+            this.deptBudgetList.baseId = this.baseId
+            this.deptBudgetList.compId = this.compId
+            this.deptBudgetList.contractType = 1
+            this.deptBudgetList.otherPersonPhone = this.deptBudgetList.otherPersonPhone.toString()
+            edit(this.deptBudgetList)
+              .toPromise()
+              .then((response) => {
+                this.$message.success('编辑成功')
+                this.deptBudgetList = {}
+                this.warehouseType = '1'
+                this.$router.push({
+                  path: 'warehouseManagementList'
+                })
+              })
+          } else {
+            //EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
+            return false
+          }
+        })
+        new Promise((resolve, reject) => {
+          const newAppendixs = this.fileList
+          const params = {
+            newAppendixs
+          }
+          saveFiles(params)
             .toPromise()
-            .then((response) => {
-              this.$message.success('编辑成功')
-              this.deptBudgetList = {}
-              this.warehouseType = '1'
-              this.$router.push({ path: 'warehouseManagementList' })
+            .then((res) => {
+              resolve(res.join())
             })
-        } else {
-          //EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
-          return false
-        }
-      })
-      new Promise((resolve, reject) => {
-        const newAppendixs = this.fileList
-        const params = { newAppendixs }
-        saveFiles(params)
-          .toPromise()
-          .then((res) => {
-            resolve(res.join())
+            .catch((err) => {
+              EventBus.$emit('error', this.$t('showMessage.saveFilesError'))
+              reject()
+            })
+        })
+      },
+
+      // 关闭 dialog时 处理文件url 初始化upload组件
+      handleCloe() {
+        this.dialogViewSpareMoney = false
+      },
+      history(row) {
+        console.log(row)
+        billoperatehis({
+            id: row.id
           })
-          .catch((err) => {
-            EventBus.$emit('error', this.$t('showMessage.saveFilesError'))
-            reject()
+          .toPromise()
+          .then((response) => {
+            this.historyList = response
           })
-      })
-    },
+      },
+      //删除
 
-    // 关闭 dialog时 处理文件url 初始化upload组件
-    handleCloe() {
-      this.dialogViewSpareMoney = false
+      approve() {},
+      listQuery() {},
+      total() {},
+      clearfiltQuery() {},
+      selectCrtDuty() {},
     },
-    history(row) {
-      console.log(row)
-      billoperatehis({ id: row.id })
-        .toPromise()
-        .then((response) => {
-          this.historyList = response
-        })
-    },
-    //删除
-
-    approve() {},
-    listQuery() {},
-    total() {},
-    clearfiltQuery() {},
-    selectCrtDuty() {},
-  },
-}
+  }
 </script>
 <style lang="scss" scoped>
-/deep/.totalStorage .el-input__inner {
-  color: #afb5cb;
-  background: #f5f7fa;
-}
-.small-title {
-  position: relative;
-  padding: 10px;
-  font-weight: 600;
-}
-.small-title::before {
-  position: absolute;
-  content: '';
-  display: block;
-  background: #5473e8;
-  width: 4px;
-  height: 14px;
-  left: 0px;
-  top: 13px;
-}
-.position {
-  position: relative;
-}
-.add,
-.del {
-  position: absolute;
-  right: -38px;
-  top: 9px;
-  cursor: pointer;
-}
-.del {
-  right: -70px;
-}
-.amap-page-container {
-  width: 300px;
-  height: 300px;
-}
-.el-form {
-  padding: 0 15%;
-}
-/deep/.ws-info-table .el-form-item {
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-}
-.readonly {
-  position: relative;
-}
-.readonly:after {
-  content: '*';
-  color: #ff2727;
-  position: absolute;
-  right: 8px;
-  z-index: 10;
-  top: 21%;
-  font-size: 20px;
-}
-.title {
-  position: relative;
-}
-.title::before {
-  content: '';
-  display: inline-block;
-  width: 5px;
-  height: 30px;
-  background: #5473e8;
-  position: absolute;
-  left: 0;
-}
-.ws-info-table {
-  border-left: 1px solid transparent;
-  border-top: 1px solid transparent;
-}
-.el-button--primary {
-  background-color: #5878e8;
-  border-color: #5878e8;
-}
-.el-col {
-  background: #f6f7fc;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  padding: 0 25px;
-  border-left: 1px solid transparent;
-  background: #fff;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__label {
-  width: 100px;
-  text-align: center;
-  background: #fff;
-  // border: 1px solid #cdd2dc;
-}
-.button-container {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  width: 100%;
-  height: 50px;
-  padding: 0 10px;
-  & > div {
-    margin-left: 10px;
+  /deep/.totalStorage .el-input__inner {
+    color: #afb5cb;
+    background: #f5f7fa;
+  }
+
+  .small-title {
+    position: relative;
+    padding: 10px;
+    font-weight: 600;
+  }
+
+  .small-title::before {
+    position: absolute;
+    content: '';
+    display: block;
+    background: #5473e8;
+    width: 4px;
+    height: 14px;
+    left: 0px;
+    top: 13px;
+  }
+
+  .position {
+    position: relative;
+  }
+
+  .add,
+  .del {
+    position: absolute;
+    right: -38px;
+    top: 9px;
+    cursor: pointer;
+  }
+
+  .del {
+    right: -70px;
+  }
+
+  .amap-page-container {
+    width: 300px;
+    height: 300px;
+  }
+
+  .el-form {
+    padding: 0 15%;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  .readonly {
+    position: relative;
+  }
+
+  .readonly:after {
+    content: '*';
+    color: #ff2727;
+    position: absolute;
+    right: 8px;
+    z-index: 10;
+    top: 21%;
+    font-size: 20px;
+  }
+
+  .title {
+    position: relative;
+  }
+
+  .title::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+    background: #5473e8;
+    position: absolute;
+    left: 0;
+  }
+
+  .ws-info-table {
+    border-left: 1px solid transparent;
+    border-top: 1px solid transparent;
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .el-col {
+    background: #f6f7fc;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+    border-left: 1px solid transparent;
+    background: #fff;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 100px;
+    text-align: center;
+    background: #fff;
+    // border: 1px solid #cdd2dc;
+  }
+
+  .button-container {
     display: flex;
     flex-wrap: nowrap;
-    flex-direction: row;
-    & > span {
-      line-height: 50px;
-    }
-  }
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
 
-  /deep/.auditFlow-box {
-    position: unset;
-    margin-left: 10px;
-    &/deep/.auditFlow-icon {
-      width: auto;
-      padding-right: 30px;
+    &>div {
+      margin-left: 10px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+
+      &>span {
+        line-height: 50px;
+      }
     }
-    &/deep/.auditFlow-main {
-      position: absolute;
+
+    /deep/.auditFlow-box {
+      position: unset;
+      margin-left: 10px;
+
+      &/deep/.auditFlow-icon {
+        width: auto;
+        padding-right: 30px;
+      }
+
+      &/deep/.auditFlow-main {
+        position: absolute;
+      }
     }
   }
-}
-.box-app {
-  display: inline-block;
-  float: left;
-  margin-left: 30px;
-  line-height: 50px;
-}
-/deep/.el-dialog {
-  .el-form-item {
-    margin-bottom: 0 !important;
-    .el-input--medium {
-      textarea {
-        min-height: 100px !important;
+
+  .box-app {
+    display: inline-block;
+    float: left;
+    margin-left: 30px;
+    line-height: 50px;
+  }
+
+  /deep/.el-dialog {
+    .el-form-item {
+      margin-bottom: 0 !important;
+
+      .el-input--medium {
+        textarea {
+          min-height: 100px !important;
+        }
       }
     }
   }
-}
-.collapse-bottom {
-  margin-bottom: 20px;
-}
-.input-main .textarea .el-textarea__inner {
-  width: 100%;
-  z-index: 1;
-}
-.bg-left {
-  padding-left: 30px;
-}
-.bg-right {
-  padding-right: 10px;
-  text-align: right;
-}
-.bg-bottom {
-  margin: 15px 0px;
-}
-.wenzi {
-  width: 900px;
-  margin: 0 auto;
-}
-.wenzi h3 {
-  display: inline-block;
-  left: 10px;
-}
-.wenzi p {
-  display: inline-block;
-}
-.center {
-  width: 900px;
-  margin: 0 auto;
-}
-.el-form-item {
-  width: 50%;
-}
-.el-form-item__label {
-  text-align: center;
-}
-.ce {
-  width: 900px;
-  margin: 0 auto;
-}
-/*.crt-main .textarea /deep/ .el-form-item__label {*/
-/*  height: 82px;*/
-/*}*/
-// 控制select为只读的时候显示样式
-
-.hide-sel {
-  .el-input__inner {
-    border: 0px;
+
+  .collapse-bottom {
+    margin-bottom: 20px;
   }
-  .el-icon-arrow-up {
-    display: none;
+
+  .input-main .textarea .el-textarea__inner {
+    width: 100%;
+    z-index: 1;
   }
-  .el-textarea__inner {
-    background-color: #fff !important;
-    border: 0;
+
+  .bg-left {
+    padding-left: 30px;
   }
-  .el-date-editor {
-    i {
-      display: none;
-    }
+
+  .bg-right {
+    padding-right: 10px;
+    text-align: right;
   }
-  .is-disabled {
-    .el-input__inner:hover {
-      background-color: #fff !important;
-      border: 0;
-    }
-    color: #606266;
+
+  .bg-bottom {
+    margin: 15px 0px;
+  }
+
+  .wenzi {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  .wenzi h3 {
+    display: inline-block;
+    left: 10px;
+  }
+
+  .wenzi p {
+    display: inline-block;
+  }
+
+  .center {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  .el-form-item {
+    width: 50%;
+  }
+
+  .el-form-item__label {
+    text-align: center;
+  }
+
+  .ce {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  /*.crt-main .textarea /deep/ .el-form-item__label {*/
+  /*  height: 82px;*/
+  /*}*/
+  // 控制select为只读的时候显示样式
+
+  .hide-sel {
     .el-input__inner {
-      background-color: #fff !important;
-      border: 0;
-      color: #606266;
+      border: 0px;
     }
+
+    .el-icon-arrow-up {
+      display: none;
+    }
+
     .el-textarea__inner {
       background-color: #fff !important;
       border: 0;
+    }
+
+    .el-date-editor {
+      i {
+        display: none;
+      }
+    }
+
+    .is-disabled {
+      .el-input__inner:hover {
+        background-color: #fff !important;
+        border: 0;
+      }
+
       color: #606266;
+
+      .el-input__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+
+      .el-textarea__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
     }
   }
-}
 
-// 控制select为只读的时候显示样式
-/deep/.ws-class-table-col {
-  height: auto;
-  padding: 0px 2px;
-  /deep/.el-input__inner {
+  // 控制select为只读的时候显示样式
+  /deep/.ws-class-table-col {
+    height: auto;
     padding: 0px 2px;
+
+    /deep/.el-input__inner {
+      padding: 0px 2px;
+    }
   }
-}
-/deep/.is-disabled {
-  .el-input__prefix,
-  .el-input__suffix {
+
+  /deep/.is-disabled {
+    .el-input__prefix,
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff !important;
+      color: #000 !important;
+      font-size: 14px;
+      cursor: text;
+      padding: 0 !important;
+    }
+  }
+
+  .winseaview-view {
+    padding: 0 0 20px;
+  }
+
+  .container {
+    overflow: scroll;
+    height: 93vh;
+  }
+
+  .ws-info-table .el-form-item {
+    width: 33.3333%;
+  }
+
+  .readonly:after {
+    display: none;
+  }
+
+  .el-textarea__inner {
     display: none;
   }
-  .el-input__inner {
+
+  .el-form {
+    margin-top: 50px;
+  }
+
+  .readonly {
+    width: 16%;
+  }
+
+  .ws-info-table .el-form-item {
+    width: 33.33%;
+  }
+
+  //去边框
+  /deep/.el-form-item {
+    border-right: 0px;
+    border-bottom: 0px;
+  }
+
+  /deep/.ws-info-table {
+    border-left: 0px;
+    border-top: 0px;
+  }
+
+  .ws-info-table .el-form-item .el-form-item__content {
+    border-right: 0px;
+    border-bottom: 0px;
+    border-left: 0px;
+    border-top: 0px;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 0px;
+    border-bottom: 0px;
+    border-left: 0px;
+    border-top: 0px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    background: #f5f7fa;
+    border-radius: 4px;
+    border: 1px solid #d8dce6;
+    font-family: PingFangSC-Regular, PingFang SC;
+    margin-bottom: 5px;
     background-color: #fff;
-    border-color: #fff !important;
-    color: #000 !important;
     font-size: 14px;
-    cursor: text;
-    padding: 0 !important;
+    font-weight: 400;
+    color: #8890b1;
+    line-height: 16px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    background-color: #fff;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #8890b1;
+    line-height: 16px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    border: 0px;
+  }
+
+  .addressUrls {
+    width: 100%;
+    display: flex;
+    margin-top: 10px;
+  }
+
+  .addressUrl {
+    margin: 0 10px;
+    border-radius: 3px;
+  }
+
+  .addressUrls-item {
+    position: relative;
+  }
+
+  .icon-guanbi {
+    position: absolute;
+    right: 0;
   }
-}
-.winseaview-view {
-  padding: 0 0 20px;
-}
-.container {
-  overflow: scroll;
-  height: 93vh;
-}
-.ws-info-table .el-form-item {
-  width: 33.3333%;
-}
-.readonly:after {
-  display: none;
-}
-.el-textarea__inner {
-  display: none;
-}
-.el-form {
-  margin-top: 50px;
-}
-.readonly {
-  width: 16%;
-}
-.ws-info-table .el-form-item {
-  width: 33.33%;
-}
-//去边框
-/deep/.el-form-item {
-  border-right: 0px;
-  border-bottom: 0px;
-}
-/deep/.ws-info-table {
-  border-left: 0px;
-  border-top: 0px;
-}
-.ws-info-table .el-form-item .el-form-item__content {
-  border-right: 0px;
-  border-bottom: 0px;
-  border-left: 0px;
-  border-top: 0px;
-}
-/deep/.ws-info-table .el-form-item {
-  border-right: 0px;
-  border-bottom: 0px;
-  border-left: 0px;
-  border-top: 0px;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  background: #f5f7fa;
-  border-radius: 4px;
-  border: 1px solid #d8dce6;
-  font-family: PingFangSC-Regular, PingFang SC;
-  margin-bottom: 5px;
-  background-color: #fff;
-  font-size: 14px;
-  font-weight: 400;
-  color: #8890b1;
-  line-height: 16px;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__label {
-  background-color: #fff;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #8890b1;
-  line-height: 16px;
-}
-
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  border: 0px;
-}
-.addressUrls {
-  width: 100%;
-  display: flex;
-  margin-top: 10px;
-}
-.addressUrl {
-  margin: 0 10px;
-  border-radius: 3px;
-}
-.addressUrls-item{
-  position:relative;
-}
-.icon-guanbi{
-  position:absolute;
-  right:0;
-}
 </style>