前端gjy

package.json

@@ -64,6 +64,7 @@
     "tinymce": "4.9.2",
     "url-loader": "^4.1.0",
     "vue": "2.6.10",
+    "vue-amap": "^0.5.10",
     "vue-i18n": "7.3.2",
     "vue-pdf": "^4.2.0",
     "vue-router": "3.0.2",
@@ -76,7 +77,6 @@
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
-    "autoprefixer": "^9.5.1",
     "@babel/register": "7.0.0",
     "@pixul/node-rancher-api": "^1.4.0",
     "@vue/cli-plugin-babel": "3.6.0",
@@ -84,6 +84,7 @@
     "@vue/cli-plugin-pwa": "^3.12.1",
     "@vue/cli-service": "3.5.3",
     "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "chai": "^4.1.2",
@@ -94,6 +95,7 @@
     "cz-conventional-changelog": "^2.1.0",
     "electron": "^12.0.5",
     "electron-builder": "^22.10.5",
+    "jquery": "^3.6.0",
     "lint-staged": "^10.2.13",
     "mockjs": "^1.0.1-beta3",
     "node-rancher-client-api": "^1.1.1",
@@ -143,4 +145,4 @@
   "files": [
     "dist"
   ]
-}
+}

src/components/mapdrag/mapdrag.vue

@@ -0,0 +1,293 @@
+<style lang='scss' scoped>
+.mapContent {
+  position: relative;
+  margin-top: 40px;
+}
+#mapContainer {
+  width: 300px;
+  height: 300px;
+}
+#tip {
+  position: absolute;
+  top: -60px;
+}
+#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;
+  }
+}
+</style>
+
+<template>
+  <div class="mapContent">
+    <div id="mapContainer"></div>
+    <div id="tip" v-show="showFlag === false ? false : true">
+      <el-select v-model="province" @change="selectP" placeholder="省">
+        <el-option
+          v-for="item in provinces"
+          :key="item.adcode"
+          :label="item.name"
+          :value="item.adcode"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="city" @change="selectC" placeholder="市">
+        <el-option
+          v-for="item in citys"
+          :key="item.adcode"
+          :label="item.name"
+          :value="item.name"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="district" @change="selectD" placeholder="区">
+        <el-option
+          v-for="item in districts"
+          :key="item.adcode"
+          :label="item.name"
+          :value="item.adcode"
+        >
+        </el-option>
+      </el-select>
+      <el-input
+        type="textarea"
+        id="searchValue"
+        placeholder="地址"
+        v-model="address"
+        clearable
+      ></el-input>
+    </div>
+  </div>
+</template>
+
+<script>
+import image from '../../../public/img/ic_locationmarker.jpg'
+export default {
+  data() {
+    return {
+      map: null,
+      provinces: [],
+      province: '',
+      districts: [],
+      district: '',
+      citys: [],
+      city: '',
+      polygons: [],
+      areacode: '',
+      address: '',
+      objPoint: [],
+      markers: [],
+    }
+  },
+  props: ['flagVisible', 'position'],
+  computed: {
+    showFlag() {
+      return this.flagVisible
+    },
+  },
+  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() {
+    setTimeout(() => {
+      var that = this
+      this.map = new AMap.Map('mapContainer', {
+        resizeEnable: true,
+        zoom: 10,
+      })
+      this.map.on('click', function (e) {
+        var marker = new AMap.Marker({
+          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+          title: '北京',
+        })
+        that.map.remove(that.markers)
+        that.markers.push(marker)
+        // 将创建的点标记添加到已有的地图实例：
+        that.map.add(marker)
+      })
+      this.marker = new AMap.Marker({
+        icon: new AMap.Icon({
+          size: new AMap.Size(36, 44),
+          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) {
+              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()
+          })
+          // 经纬度
+          var geocoder = new AMap.Geocoder({
+            radius: 1000,
+          })
+          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: {
+    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,
+        }
+        var district = new AMap.DistrictSearch(opts) // 注意：需要使用插件同步下发功能才能这样直接使用
+        function getData(data) {
+          // 清除地图上的所有覆盖物
+          // console.log(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()
+          }
+        }
+        let sear = val ? params : '中国'
+        district.search(sear, function (status, result) {
+          if (status === 'complete') {
+            getData(result.districtList[0])
+          }
+        })
+      })
+    },
+    selectP(val) {
+      this.loadmap(val)
+      this.city = ''
+      this.district = ''
+    },
+    selectC(val) {
+      this.loadmap(val)
+      this.district = ''
+    },
+    selectD(val) {
+      this.loadmap(val)
+    },
+  },
+}
+</script>

src/config/config.js

@@ -0,0 +1,4 @@
+// 高德地图 key
+export const MapKey = '211dd6f989e719022aaf47ddb0659c47'
+// 地图限定城市
+export const MapCityName = '深圳'

src/main.js

@@ -11,10 +11,20 @@ import './registerServiceWorker';
 import crudCommon from '@/mixins/crud'
 window.$crudCommon = crudCommon;
 import vendors from '@/vendors'
-
 const { router, store } = vendors
 Vue.config.productionTip = false
+import AMap from 'vue-amap';
+Vue.use(AMap);
 
+import $ from 'jquery'
+// 初始化vue-amap
+AMap.initAMapApiLoader({
+  // 高德key
+  key: 'd5486742b76ab0969e4c3ce26f46dfc6',
+  // 插件集合 （插件按需引入）
+  plugin: ['AMap.Geolocation', 'Geolocation', 'AMap.DistrictSearch', "AMap.PlaceSearch",],
+  v: '1.4.4'
+});
 // ------------ 通过域名判断起始的登陆页面 开始 --------------------
 //使用login的Url
 // const urls = [

src/utils/remoteLoad.js

@@ -0,0 +1,48 @@
+export default function remoteLoad (url, hasCallback) {
+  return createScript(url)
+  /**
+   * 创建script
+   * @param url
+   * @returns {Promise}
+   */
+  function createScript (url) {
+    let scriptElement = document.createElement('script')
+    document.body.appendChild(scriptElement)
+    let promise = new Promise((resolve, reject) => {
+      scriptElement.addEventListener('load', e => {
+        removeScript(scriptElement)
+        if (!hasCallback) {
+          resolve(e)
+        }
+      }, false)
+
+      scriptElement.addEventListener('error', e => {
+        removeScript(scriptElement)
+        reject(e)
+      }, false)
+
+      if (hasCallback) {
+        window.____callback____ = function () {
+          resolve()
+          window.____callback____ = null
+        }
+      }
+    })
+
+    if (hasCallback) {
+      url += '&callback=____callback____'
+    }
+
+    scriptElement.src = url
+
+    return promise
+  }
+
+  /**
+   * 移除script标签
+   * @param scriptElement script dom
+   */
+  function removeScript (scriptElement) {
+    document.body.removeChild(scriptElement)
+  }
+}

src/views/contractManagement/purchaseContract.vue

@@ -552,9 +552,12 @@ export default {
         })
     },
     find() {
-      if (this.value2.length > 0) {
+      if (this.value2) {
         this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
         this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
+      } else {
+        this.startDate = ''
+        this.endDate = ''
       }
       this.currentPage = 1
       this.getList()

src/views/contractManagement/salesContract.vue

@@ -578,9 +578,12 @@ export default {
         })
     },
     find() {
-      if (this.value2.length > 0) {
+      if (this.value2) {
         this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
         this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
+      } else {
+        this.startDate = ''
+        this.endDate = ''
       }
       this.currentPage = 1
       this.getList()

src/views/contractManagement/salesContractEdit.vue

@@ -1205,7 +1205,7 @@ export default {
           editInfo(this.deptBudgetList)
             .toPromise()
             .then((response) => {
-              this.$message.success('添加成功')
+              this.$message.success('编辑成功')
               this.$router.push({ path: 'salesContract' })
             })
         } else {