vue2-client 1.6.34 → 1.6.36

package/index.js

@@ -1,30 +1,30 @@
-import Vue from 'vue'
-import { initRouter } from '@vue2-client/router'
-import { initI18n } from '@vue2-client/utils/i18n'
-import bootstrap from '@vue2-client/bootstrap'
-import { modules } from '@vue2-client/store'
-import '@vue2-client/theme/index.less'
-import '@vue2-client/utils/filter'
-import 'animate.css/source/animate.css'
-import 'moment/locale/zh-cn'
-import Antd from 'ant-design-vue'
-import Viser from 'viser-vue'
-// 插件
-import Plugins from '@vue2-client/base-client/plugins'
-
-const routerOptions = initRouter()
-const i18n = initI18n('CN', 'US')
-
-Vue.use(Antd)
-Vue.use(Viser)
-Vue.use(Plugins)
-Vue.config.productionTip = false
-const message = Vue.prototype.$message
-
-export {
-  routerOptions,
-  modules,
-  i18n,
-  message,
-  bootstrap
-}
+import Vue from 'vue'
+import { initRouter } from '@vue2-client/router'
+import { initI18n } from '@vue2-client/utils/i18n'
+import bootstrap from '@vue2-client/bootstrap'
+import { modules } from '@vue2-client/store'
+import '@vue2-client/theme/index.less'
+import '@vue2-client/utils/filter'
+import 'animate.css/source/animate.css'
+import 'moment/locale/zh-cn'
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+// 插件
+import Plugins from '@vue2-client/base-client/plugins'
+
+const routerOptions = initRouter()
+const i18n = initI18n('CN', 'US')
+
+Vue.use(Antd)
+Vue.use(Viser)
+Vue.use(Plugins)
+Vue.config.productionTip = false
+const message = Vue.prototype.$message
+
+export {
+  routerOptions,
+  modules,
+  i18n,
+  message,
+  bootstrap
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.6.34",
+  "version": "1.6.36",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue

@@ -1,36 +1,53 @@
 <template>
-  <div class="certain-category-search-wrapper">
-    <a-auto-complete
-      style="right: -12px"
-      :disabled="!mapAutocomplete"
-      :dropdown-match-select-width="false"
-      :dropdown-style="{ width: '400px' }"
-      class="certain-category-search"
-      dropdown-class-name="certain-category-search-dropdown"
-      option-label-prop="value"
-      placeholder="输入地址关键字搜索"
-      @search="fetchFunction"
-      @select="onSelect"
-    >
-      <a-spin v-if="searching" slot="notFoundContent" size="small" />
-      <template slot="dataSource">
-        <a-select-opt-group v-for="group in option" :key="group.title">
+  <div id="addressSearchCombobox">
+    <div>
+      <a-input style="width: 88%" v-model="addressInput" @change="change"/>
+      <a-button style="width: 10%;padding: 0px" type="link" @click="visible=true"><img style="width: 100%" src="@vue2-client/assets/img/location.png"/></a-button>
+    </div>
+    <a-modal :visible="visible" title="地址选择" @ok="selected" @cancel="visible=false" :zIndex='m_index'>
+      <div id="addressSearchCombobox_map">
+        <div class="certain-category-search-wrapper">
+          <a-auto-complete
+            style="right: 0px;width: 90%;z-index:2;margin-top:2%;"
+            :disabled="!mapAutocomplete"
+            class="certain-category-search"
+            dropdown-class-name="certain-category-search-dropdown"
+            option-label-prop="value"
+            placeholder="输入地址关键字搜索"
+            @search="fetchFunction"
+            @select="onSelect"
+          >
+            <a-spin v-if="searching" slot="notFoundContent" size="small" />
+            <template slot="dataSource">
+              <a-select-opt-group v-for="group in option" :key="group.title">
           <span
             slot="label">
             <a-icon type="bank" /> {{ group.title }}
           </span>
-          <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
-            <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
-            <p v-if="address.address !== '[]'" class="addressRemark">
-              {{ address.address }}
-            </p>
-          </a-select-option>
-        </a-select-opt-group>
-      </template>
-      <a-input>
-        <a-icon slot="suffix" class="certain-category-icon" type="search"/>
-      </a-input>
-    </a-auto-complete>
+                <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
+                  <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
+                  <p v-if="address.address !== '[]'" class="addressRemark">
+                    {{ address.address }}
+                  </p>
+                </a-select-option>
+              </a-select-opt-group>
+            </template>
+            <a-input>
+              <a-icon slot="suffix" class="certain-category-icon" type="search"/>
+            </a-input>
+          </a-auto-complete>
+        </div>
+      </div>
+      <a-descriptions
+        bordered
+        class="asc_descriptions"
+        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
+      >
+        <a-descriptions-item label="坐标" span=2><span>{{addressObj.lng_lat}}</span></a-descriptions-item>
+        <a-descriptions-item label="地址" span=2><span>{{addressObj.address}}</span></a-descriptions-item>
+      </a-descriptions>
+    </a-modal>
+    <!--    -->
   </div>
 </template>
 <script>
@@ -53,13 +70,18 @@ export default {
       // 最后检索版本
       lastFetchId: 0,
       // 检索中
-      searching: false
+      searching: false,
+      addressObj: {
+        lng_lat: '',
+        address: '',
+      },
+      visible: false,
+      map: null,
+      m_index: 1002,
+      positionPicker: null,
+      addressInput: this.searchResult
     }
   },
-  model: {
-    prop: 'searchResult',
-    event: 'onSelect'
-  },
   computed: {
     ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
   },
@@ -84,27 +106,53 @@ export default {
   created () {
   },
   mounted () {
-    GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
-      this.mapAutocomplete = new (aMap).AutoComplete({
-        // city 限定城市，默认全国
-        city: '全国'
-      })
-    })
   },
   methods: {
+    change (value) {
+      this.$emit('update:searchResult', this.addressInput)
+    },
+    initMap (aMap) {
+      this.map = new (aMap).Map('addressSearchCombobox_map', { // 设置地图容器id
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 10, // 初始化地图层级
+      })
+      this.geocoder = new (aMap).Geocoder({
+        radius: 500 // 范围，默认：500
+      })
+      this.map.addControl(new (aMap).ToolBar()) // 初始化工具插件
+      // 初始化窗体
+      /*this.infoWindow = new (aMap).InfoWindow({
+        anchor: 'bottom-center',
+        isCustom: false, // 使用自定义窗体
+        autoMove: true,
+        content: '',
+        showShadow: true,
+        offset: new (aMap).Pixel(0, -25)
+      })*/
+    },
     onSelect (value) {
+      let result
+      console.log(' value--- ', this.searchResult)
+      const _arr = value.replace('>', '').split('<')
+      this.addressObj.address=_arr[0]
+      this.addressObj.lng_lat=_arr[1]
+      this.map.setCenter(this.addressObj.lng_lat.split(','))
+    },
+    selected () {
       let result
       if (this.searchResultType !== 'Default') {
-        const _arr = value.replace('>', '').split('<')
         if (this.searchResultType === 'Array') {
-           result = _arr
+          result = [this.addressObj.address, this.addressObj.lng_lat]
         } else {
           result = {}
-          result[this.resultKeys.address] = _arr[0]
-          result[this.resultKeys.coords] = _arr[1]
+          result[this.resultKeys.address] = this.addressObj.address
+          result[this.resultKeys.coords] = this.addressObj.lng_lat
         }
       }
-      this.$emit('onSelect', JSON.stringify(result) || value)
+      this.addressInput=this.addressObj.address
+      console.log(' result--- ', result)
+      this.visible=false
+      this.$emit('onSelect', JSON.stringify(result))
       // this.$emit('onClick', result || value)
     },
     // 懒加载检索方法
@@ -170,64 +218,100 @@ export default {
         return value
       }
     }
+  },
+  watch: {
+    'visible' (val){
+      console.log('val', val)
+      if(val){
+        GetGDMap(this.gaode_secret_key, this.gaode_key).then(aMap => {
+          this.initMap(aMap)
+          this.mapAutocomplete = new (aMap).AutoComplete({
+            // city 限定城市，默认全国
+            city: '全国',
+            dragEnable: true,
+            animateEnable: false
+          })
+          console.log(aMap)
+          console.log(window)
+          this.positionPicker = new window.AMapUI.PositionPicker({
+            mode: 'dragMap',
+            map: this.map
+          })
+          this.positionPicker.on('success', (positionResult) => {
+            console.log(positionResult)
+            console.log(positionResult.position)
+            this.addressObj.address=positionResult.address
+            this.addressObj.lng_lat=`${positionResult.position.lng},${positionResult.position.lat}`
+          })
+          this.positionPicker.on('fail', function(positionResult) {
+          })
+          this.positionPicker.start()
+        })
+      }
+    }
   }
 }
 </script>
-
 <style>
-.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
-  color: #666;
-  font-weight: bold;
-  font-size: 14px;
+.asc_descriptions .ant-descriptions-item-content{
+  width: 80%;
 }
-
-.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
-  border-bottom: 1px solid #f6f6f6;
+</style>
+<style lang="less">
+#addressSearchCombobox_map{
+  margin:1% 0;
+  width:100%;
+  height:400px;
+  text-align:center
 }
+#addressSearchCombobox{
 
-.certain-category-search-dropdown .ant-select-dropdown-menu-item {
-  padding-left: 16px;
-}
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+    color: #666;
+    font-weight: bold;
+    font-size: 14px;
+  }
 
-.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
-  text-align: center;
-  cursor: default;
-}
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+    border-bottom: 1px solid #f6f6f6;
+  }
 
-.certain-category-search-dropdown .ant-select-dropdown-menu {
-  max-height: 300px;
-}
-</style>
-<style scoped>
-.certain-category-search-wrapper,
->>> .certain-category-search.ant-select-auto-complete,
-.ant-input-affix-wrapper,
-.ant-input-suffix {
-  right: 12px;
-}
-.certain-category-search-wrapper >>> .certain-search-item-count {
-  position: absolute;
-  color: #999;
-  right: 16px;
-}
-.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused,
-.certain-category-icon {
-  color: #108ee9;
-}
-.certain-category-search-wrapper >>> .certain-category-icon {
-  color: #6e6e6e;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item {
+    padding-left: 16px;
+  }
 
-.addressName {
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: bold;
-}
+  .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+    text-align: center;
+    cursor: default;
+  }
 
-.addressRemark {
-  margin-bottom: 0;
-  font-size: 12px;
+  .certain-category-search-dropdown .ant-select-dropdown-menu {
+    max-height: 300px;
+  }
+  .certain-category-search-wrapper .certain-search-item-count {
+    position: absolute;
+    color: #999;
+    right: 16px;
+  }
+  .certain-category-search-wrapper .certain-category-search.ant-select-focused,
+  .certain-category-icon {
+    color: #108ee9;
+  }
+  .certain-category-search-wrapper .certain-category-icon {
+    color: #6e6e6e;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    font-size: 16px;
+  }
+
+  .addressName {
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .addressRemark {
+    margin-bottom: 0;
+    font-size: 12px;
+  }
 }
 </style>