应急物资新增字段

src/views/emergen_cyrescue/resource_management/equipment_library/components/list.vue

@@ -21,13 +21,13 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column type="index" label="序号" width="50" align="center" />
       <el-table-column prop="RESOURCE_LIBRARY_NAME" label="资源库名称" width="180" />
-      <el-table-column prop="LOCATION" label="所在地点" show-overflow-tooltip="true" />
-      <el-table-column prop="RESOURCE_CATEGORY" label="存放资源类别" show-overflow-tooltip="true" />
-      <el-table-column prop="RESOURCE_QUANTITY" label="资源数量" show-overflow-tooltip="true" />
-      <el-table-column prop="CONTACT_PERSON" label="联系人" show-overflow-tooltip="true" />
-      <el-table-column prop="CONTACT_PHONE" label="联系电话" show-overflow-tooltip="true" />
-      <el-table-column prop="CONTACT_MOBILE_PHONE" label="联系人手机号码" show-overflow-tooltip="true" />
-      <el-table-column prop="COMPANY_NAME" label="企业名称" show-overflow-tooltip="true" />
+      <el-table-column :show-overflow-tooltip="true" prop="LOCATION" label="所在地点" />
+      <el-table-column :show-overflow-tooltip="true" prop="RESOURCE_CATEGORY" label="存放资源类别" />
+      <el-table-column :show-overflow-tooltip="true" prop="RESOURCE_QUANTITY" label="资源数量" />
+      <el-table-column :show-overflow-tooltip="true" prop="CONTACT_PERSON" label="联系人" />
+      <el-table-column :show-overflow-tooltip="true" prop="CONTACT_PHONE" label="联系电话" />
+      <el-table-column :show-overflow-tooltip="true" prop="CONTACT_MOBILE_PHONE" label="联系人手机号码" />
+      <el-table-column :show-overflow-tooltip="true" prop="COMPANY_NAME" label="企业名称" />
 
       <el-table-column label="操作" align="center" width="600">
         <template slot-scope="{row}">
@@ -49,7 +49,7 @@
       <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
     </div>
     <el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='editUser'?'修改':'新增'" width="1000px">
-      <el-form ref="form" :rules="rules" :model="form" label-width="250px">
+      <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="margin-right: 10px">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="资源库名称" prop="RESOURCE_LIBRARY_NAME">
@@ -98,19 +98,40 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
+              <el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
+              <div style="display: flex">
+                <el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
+                <el-button style="margin-left:10px" @click="handleMap">
+                  <span class="svg-container">
+                    <svg-icon icon-class="international" />
+                  </span>
+                </el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormEdit = false">取消</el-button>
         <el-button type="primary" @click="confirm">确定</el-button>
       </div>
     </el-dialog>
+    <get-point ref="getPoint" @getPosition = "getPosition"/>
   </div>
 </template>
 <script>
 import Pagination from '@/components/Pagination'
+import getPoint from '../../util/getPoint.vue'
 import { requestFN } from '@/utils/request'
 export default {
-  components: { Pagination },
+  components: { getPoint, Pagination },
   data() {
     return {
       listQuery: {
@@ -133,7 +154,9 @@ export default {
         CONTACT_PERSON: '',
         CONTACT_PHONE: '',
         CONTACT_MOBILE_PHONE: '',
-        COMPANY_NAME: ''
+        COMPANY_NAME: '',
+        LONGITUDE: '',
+        LATITUDE: ''
       },
       rules: {
         RESOURCE_LIBRARY_NAME: [
@@ -167,6 +190,12 @@ export default {
         COMPANY_NAME: [
           { required: true, message: '企业名称不能为空', trigger: 'blur' },
           { min: 2, max: 255, message: '长度在 2 到 255 个字符', trigger: 'blur' }
+        ],
+        LATITUDE: [
+          { required: true, message: '纬度不能为空', trigger: 'blur' }
+        ],
+        LONGITUDE: [
+          { required: true, message: '经度不能为空', trigger: 'blur' }
         ]
       }
     }
@@ -206,7 +235,7 @@ export default {
       requestFN('/major/resource/detail', params).then((response) => {
         const data = response.msg
         this.form = {
-          Id: data.ID,
+          ID: data.ID,
           RESOURCE_LIBRARY_NAME: data.RESOURCE_LIBRARY_NAME,
           LOCATION: data.LOCATION,
           RESOURCE_CATEGORY: data.RESOURCE_CATEGORY,
@@ -214,7 +243,9 @@ export default {
           CONTACT_PERSON: data.CONTACT_PERSON,
           CONTACT_PHONE: data.CONTACT_PHONE,
           CONTACT_MOBILE_PHONE: data.CONTACT_MOBILE_PHONE,
-          COMPANY_NAME: data.COMPANY_NAME
+          COMPANY_NAME: data.COMPANY_NAME,
+          LONGITUDE: data.LONGITUDE,
+          LATITUDE: data.LATITUDE
         }
       }).catch((e) => {
         console.error('获取详情数据失败', e)
@@ -231,7 +262,9 @@ export default {
         CONTACT_PERSON: '',
         CONTACT_PHONE: '',
         CONTACT_MOBILE_PHONE: '',
-        COMPANY_NAME: ''
+        COMPANY_NAME: '',
+        LONGITUDE: '',
+        LATITUDE: ''
       }
     },
     confirm() {
@@ -306,6 +339,14 @@ export default {
     getQuery() {
       this.$refs.multipleTable.clearSelection()
       this.getList()
+    },
+    handleMap() {
+      this.$refs.getPoint.init({ LATITUDE: this.form.LATITUDE, LONGITUDE: this.form.LONGITUDE })
+    },
+    getPosition(e) {
+      this.form.LATITUDE = e.LATITUDE
+      this.form.LONGITUDE = e.LONGITUDE
+      console.log(this.form)
     }
   }
 }

src/views/emergen_cyrescue/resource_management/util/getPoint.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-dialog :visible.sync="visible" title="编辑坐标" width="800px" class="dy-dialog">
+    <baidu-map
+      :zoom="zoom"
+      :scroll-wheel-zoom="true"
+      :style="{height: clientHeight+'px'}"
+      @click="getClickInfo"
+      @ready="handler">
+      <bm-view style="width: 100%; height:100%; flex: 1"/>
+      <bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
+        <div v-if="false" class="map-flex">
+          <div class="map-lable">关键词：</div>
+          <div style="flex:1;">
+            <el-autocomplete
+              v-model="TYPEKeyword"
+              :fetch-suggestions="querySearch"
+              :trigger-on-focus="false"
+              placeholder="请输入详细设备类型"
+              style="width:100%"
+              @select="handleSelect"/>
+          </div>
+        </div>
+      </bm-control>
+    </baidu-map>
+    <div slot="footer" class="dialog-footer">
+      <span>经度：</span>
+      <el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled/>
+      <span>纬度：</span>
+      <el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled/>
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="setPosition">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      clientHeight: 600,
+      ISLOADingMap: true,
+      BMap: '',
+      map: '',
+      zoom: 14,
+      LONGITUDE: '',
+      LATITUDE: '',
+      TYPEKeyword: ''
+    }
+  },
+  methods: {
+    init(e) {
+      this.visible = true
+      if (e.LATITUDE) {
+        this.LATITUDE = e.LATITUDE
+        this.LONGITUDE = e.LONGITUDE
+      }
+    },
+    mapOpen() {
+      this.top = this.getScrollTop()
+      if (this.top) {
+        this.setScrollTop(0)
+      }
+    },
+    // 关闭地图后调用
+    mapClose() {
+      this.setScrollTop(this.top)
+      this.top = 0
+      this.showMap = false
+    },
+    getScrollTop() {
+      let scrollTop = 0
+      if (document.documentElement && document.documentElement.scrollTop) {
+        scrollTop = document.documentElement.scrollTop
+      } else if (document.body) {
+        scrollTop = document.body.scrollTop
+      }
+      return scrollTop
+    },
+    setScrollTop(top) {
+      if (!isNaN(top)) {
+        if (document.documentElement && document.documentElement.scrollTop !== undefined) {
+          document.documentElement.scrollTop = top
+        } else if (document.body) {
+          document.body.scrollTop = top
+        }
+      }
+    },
+    // 地图初始化
+    handler({ BMap, map }) {
+      this.mapOpen()
+      this.BMap = BMap
+      this.map = map
+      this.ISLOADingMap = true
+      var geolocation = new BMap.Geolocation()
+      const myGeo = new BMap.Geocoder()
+      var $this = this
+      // 调用百度地图api 中的获取当前位置接口
+      geolocation.getCurrentPosition(function(r) {
+        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
+          if (result) {
+            $this.ISLOADingMap = false
+            $this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
+            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
+            $this.setCenter({ BMap, map })
+          }
+        })
+      })
+    },
+    // 搜索地图
+    querySearch(queryString, cb) {
+      var options = {
+        onSearchComplete: function(results) {
+          if (local.getStatus() === 0) {
+            // 判断状态是否正确
+            var s = []
+            for (var i = 0; i < results.getCurrentNumPois(); i++) {
+              var x = results.getPoi(i)
+              var item = { value: x.TYPE + x.title, point: x.point }
+              s.push(item)
+              cb(s)
+            }
+          } else {
+            cb()
+          }
+        }
+      }
+      var local = new this.BMap.LocalSearch(this.map, options)
+      local.search(queryString)
+    },
+    handleSelect(item) {
+      var { point } = item
+      this.map.clearOverlays() // 清除地图上所有覆盖物
+      this.map.centerAndZoom(point, this.zoom)
+      const marker = new this.BMap.Marker(point) // 创建标注
+      this.map.addOverlay(marker) // 将标注添加到地图中
+      marker.enableDragging() // 可拖拽
+      this.LONGITUDE = point.lng
+      this.LATITUDE = point.lat
+    },
+    // 设置打开中心位置
+    setCenter({ BMap, map }) {
+      var lng = ''
+      var lat = ''
+      if (this.LONGITUDE === '' || this.LATITUDE === '') {
+        lng = '119.676473'
+        lat = '39.94469'
+      } else {
+        lng = this.LONGITUDE
+        lat = this.LATITUDE
+      }
+      var point = new BMap.Point(lng, lat)
+      const zoom = map.getZoom()
+      setTimeout(() => {
+        map.centerAndZoom(point, zoom)
+      }, 0)
+    },
+    getClickInfo(e) {
+      this.LONGITUDE = e.point.lng
+      this.LATITUDE = e.point.lat
+    },
+    setPosition() {
+      this.visible = false
+      this.$emit('getPosition', { LATITUDE: this.LATITUDE, LONGITUDE: this.LONGITUDE })
+    }
+  }
+}
+</script>
+<style lang="sass" scoped>
+.table-ui
+  td
+    line-height: 34px
+
+  .tbg
+    width: 200px
+
+.ui-foot
+  text-align: center
+  margin-top: 20px
+</style>