feat:抽取地图选点组件

nezha-fronted/src/components/page/config/system.vue

@@ -43,12 +43,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.mapConfig')" >
-              <div class="system-map">
-                <div class="system-map-item"><span class="label">{{$t('config.system.basic.lat')}}</span><span><el-input width="20px" v-model="basic.map_center_config.latitude"></el-input></span></div>
-                <div class="system-map-item"><span class="label">{{$t('config.system.basic.lng')}}</span><span><el-input width="20px" v-model="basic.map_center_config.longitude"></el-input></span></div>
-                <div class="system-map-item"><span class="label">{{$t('config.system.basic.zoom')}}</span><span><el-input width="20px" v-model="basic.map_center_config.zoom"></el-input></span></div>
-                <div class="system-map-item" style="margin-right: unset !important;" @click="mapConfigVisible = true"><i class="nz-icon nz-icon-shuidi" style="color:rgb(238, 157, 63)"></i></div>
-              </div>
+              <latlng-picker :init-data="basic.map_center_config" ref="latlngPicker"></latlng-picker>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.unsaved')" prop="unsaved_change">
               <el-switch v-model.number="basic.unsaved_change" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
@@ -62,9 +57,6 @@
               <button id="system-basic-save" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'"  :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
-          <el-dialog :visible.sync="mapConfigVisible" :title="$t('config.system.basic.mapTitle')" width="calc(50% - 10px)"  @close="mapClose" @opened="initMap" class=" nz-dialog map-config-dialog" :modal-append-to-body="true">
-            <div id="map" style="height: 100%; width: 100%"></div>
-          </el-dialog>
         </div>
       </el-tab-pane>
       <el-tab-pane :label="$t('config.system.email.email')" name="email" >
@@ -364,17 +356,13 @@
 
 <script>
 import { positiveInteger, port, hostPlus, host, uSize } from '../../common/js/validate'
-
+import latlngPicker from "../../common/latlngPicker";
 import bus from '../../../libs/bus'
 import draggable from 'vuedraggable'
-// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
-import 'leaflet/dist/leaflet.css'
-import * as L from 'leaflet'
-import icon from 'leaflet/dist/images/marker-icon.png'
-import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+
 export default {
   name: 'system',
-  components: { draggable },
+  components: { draggable ,latlngPicker},
   data () {
     return {
       basic: {
@@ -392,9 +380,6 @@ export default {
         unsaved_change: 'on',
         map_center_config: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 }
       },
-      mapConfigVisible: false,
-      map: null,
-      marker: null,
       basicCopy: null,
       basicRules: {
         system_name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
@@ -554,59 +539,6 @@ export default {
     }
   },
   methods: {
-    initMap: function () {
-      if (this.map) {
-        this.map.remove()
-        this.map = null
-      }
-      const DefaultIcon = L.icon({
-        iconUrl: icon,
-        iconSize: [26, 40],
-        iconAnchor: [13, 40],
-        shadowUrl: iconShadow
-      })
-      L.Marker.prototype.options.icon = DefaultIcon
-      const map = L.map('map', {
-        minZoom: this.basic.map_center_config.minZoom,
-        maxZoom: this.basic.map_center_config.maxZoom,
-        attributionControl: false,
-        zoomControl: false,
-        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
-      }).setView([this.basic.map_center_config.latitude, this.basic.map_center_config.longitude], this.basic.map_center_config.zoom)
-
-      L.tileLayer(
-        '/static/Tiles/{z}/{x}/{y}.png',
-        { noWrap: true }
-      ).addTo(map)
-
-      const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
-      attribution.addAttribution(' © OpenStreetMap contributors')
-      attribution.addTo(map)
-
-      L.control.zoom({
-        position: 'bottomright',
-        zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
-        zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
-        zoomInTitle: '',
-        zoomOutTitle: ''
-      }).addTo(map)
-
-      const marker = L.marker([this.basic.map_center_config.latitude, this.basic.map_center_config.longitude]).addTo(map)
-      map.on('click', function (e) {
-        const lat = e.latlng.lat
-        const lng = e.latlng.lng
-        marker.setLatLng([lat, lng])
-      })
-      this.map = map
-      this.marker = marker
-    },
-    mapClose: function () {
-      this.mapConfigVisible = false
-      const latlng = this.marker.getLatLng()
-      this.basic.map_center_config.latitude = latlng.lat
-      this.basic.map_center_config.longitude = latlng.lng
-      this.basic.map_center_config.zoom = this.map.getZoom()
-    },
     selectTab: function (tab) {
       this.querySetInfo(tab.name)
     },
@@ -656,6 +588,7 @@ export default {
         if (valid) {
           const param = {}
           if (type == 'basic') {
+            this.basic.map_center_config = this.$refs.latlngPicker.getAttribute();
             this.basic.map_center_config = JSON.stringify(this.basic.map_center_config)
           }
           param[type] = Object.assign({}, this[type])
@@ -1001,20 +934,7 @@ export default {
     width: 61.8% !important;
     position: relative;
   }
-  .system .system-map{
-    width: 100%;
-    display: flex;
-  }
-  .system-map .system-map-item{
-    /*display: inline-block;*/
-    margin-right: 10px;
-  }
-  .system-map .system-map-item .label{
-    margin-right: 10px;
-  }
-  .system-map .el-input{
-    width: 92px !important;
-  }
+
   .linkBox{
     max-height: 800px;
     width: 800px;
@@ -1181,13 +1101,7 @@ export default {
   .system-config-form .el-form-item__content{
     width: 512px;
   }
-  .system .map-config-dialog .el-dialog{
-    height: 45%;
-  }
-  .map-config-dialog .el-dialog__body{
-    height: calc(100% - 48px) !important;
 
-  }
   .system-config-form .el-input{
     width:512px;
     text-align: left;