vue2-client 1.8.233 → 1.8.235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.233",
+  "version": "1.8.235",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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

@@ -1,8 +1,30 @@
 <template>
   <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>
+      <a-input-group
+        style="display: flex; width: 100%;"
+        compact>
+        <a-input
+          v-model="addressInput"
+          :read-only="readOnly"
+          @change="change"
+          style="flex: 1; width: auto; min-width: 0;"
+          placeholder="请选择地址信息"/>
+        <a-button
+          v-if="attr?.inputOnAfterName && attr?.inputOnAfterFunc"
+          style="flex: 1; width: auto; min-width: 4rem;max-width: 6rem"
+          type="primary"
+          @click="emitFunc(attr?.inputOnAfterFunc,addressInput)">
+          {{ attr?.inputOnAfterName }}
+        </a-button>
+        <!--    默认展示该图标 如果配置了按钮插槽展示  primary 央视 -->
+        <a-button
+          style="width: 2rem; flex-shrink: 0;"
+          :type="attr?.inputOnAfterName ? 'primary' :''"
+          icon="environment"
+          @click="visible=true">
+        </a-button>
+      </a-input-group>
     </div>
     <a-modal :visible="visible" title="地址选择" @ok="selected" @cancel="visible=false" :zIndex="m_index">
       <div id="addressSearchCombobox_map">
@@ -17,15 +39,17 @@
             @search="fetchFunction"
             @select="onSelect"
           >
-            <a-spin v-if="searching" slot="notFoundContent" size="small" />
+            <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 }}
+                  <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)"></span></p>
+                  <p class="addressName">
+                    <a-icon type="environment"/>
+                    <span v-html="highLight(address.label, address.word)"></span></p>
                   <p v-if="address.address !== '[]'" class="addressRemark">
                     {{ address.address }}
                   </p>
@@ -79,13 +103,27 @@ export default {
       map: null,
       m_index: 1002,
       positionPicker: null,
-      addressInput: this.searchResult
+      addressInput: this.searchResult,
+      // 选择地址返回的行政区域
+      divisions: {},
+      // 生成地址串中省市区街道信息禁止修改
+      readOnlyDivisions: false
     }
   },
   computed: {
     ...mapState('setting', ['isMobile', 'gaode_key', 'gaode_secret_key'])
   },
   props: {
+    attr: {
+      type: Object,
+      default: () => {
+      }
+    },
+    emitFunc: {
+      type: Function,
+      default: () => {
+      }
+    },
     searchResult: {
       type: String,
       default: undefined
@@ -100,8 +138,19 @@ export default {
     // Object 返回格式时 可以自定义key
     resultKeys: {
       type: Object,
-      default: () => { return { address: 'address', coords: 'coords' } }
-    }
+      default: () => {
+        return { address: 'address', coords: 'coords' }
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    // 省市区是否可以修改
+    divisionsChange: {
+      type: Boolean,
+      default: false
+    },
   },
   created () {
   },
@@ -109,6 +158,14 @@ export default {
   },
   methods: {
     change (value) {
+      if (this.readOnlyDivisions && !this.divisionsChange) {
+        // 如果省市区街道信息禁止修改
+        if (this.divisions.str && !this.addressInput.startsWith(this.divisions.str)) {
+          this.addressInput = this.addressObj.address
+          this.$message.info('省市区街道信息请从选择新地址以变更')
+          return
+        }
+      }
       this.$emit('update:searchResult', this.addressInput)
     },
     initMap (aMap) {
@@ -151,7 +208,7 @@ export default {
       this.addressInput = this.addressObj.address
       console.log(' result--- ', result)
       this.visible = false
-      this.$emit('onSelect', JSON.stringify(result))
+      this.$emit('onSelect', Object.assign({}, result, { divisions: this.divisions }))
       // this.$emit('onClick', result || value)
     },
     // 懒加载检索方法
@@ -230,8 +287,6 @@ export default {
             dragEnable: true,
             animateEnable: false
           })
-          console.log(aMap)
-          console.log(window)
           this.positionPicker = new window.AMapUI.PositionPicker({
             mode: 'dragMap',
             map: this.map
@@ -239,6 +294,22 @@ export default {
           this.positionPicker.on('success', (positionResult) => {
             console.log(positionResult)
             console.log(positionResult.position)
+            // 设置 行政区划信息
+            if (positionResult?.regeocode?.addressComponent) {
+              const { addressComponent } = positionResult?.regeocode
+              this.divisions.province = addressComponent.province
+              this.divisions.city = addressComponent.city
+              this.divisions.district = addressComponent.district
+              this.divisions.township = addressComponent.township
+              this.divisions.towncode = addressComponent.towncode
+              this.divisions.street = addressComponent.street
+              this.divisions.str =
+                `${addressComponent.province}${addressComponent.city}${addressComponent.district}${addressComponent.township}`
+            }
+            if (this.divisions.str && positionResult.address.startsWith(this.divisions.str)) {
+              // 如果 省市区信息和获取到的地址的前缀一致 那么省市区前缀禁止修改只能修改后面的 通过 onchange事件拦截
+              this.readOnlyDivisions = true
+            }
             this.addressObj.address = positionResult.address
             this.addressObj.lng_lat = `${positionResult.position.lng},${positionResult.position.lat}`
           })
@@ -252,18 +323,19 @@ export default {
 }
 </script>
 <style>
-.asc_descriptions .ant-descriptions-item-content{
+.asc_descriptions .ant-descriptions-item-content {
   width: 80%;
 }
 </style>
 <style lang="less">
-#addressSearchCombobox_map{
-  margin:1% 0;
-  width:100%;
-  height:400px;
-  text-align:center
+#addressSearchCombobox_map {
+  margin: 1% 0;
+  width: 100%;
+  height: 400px;
+  text-align: center
 }
-#addressSearchCombobox{
+
+#addressSearchCombobox {
 
   .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
     color: #666;
@@ -287,15 +359,18 @@ export default {
   .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);

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

@@ -0,0 +1,35 @@
+<script>
+
+import AddressSearchCombobox from '@/base-client/components/common/AddressSearchCombobox/index'
+
+export default {
+  name: 'Demo',
+  components: { AddressSearchCombobox },
+  data () {
+    return {
+      visible: false,
+      searchResult: {}
+    }
+  },
+  methods: {
+    addressSearchComboboxSelect (res) {
+      console.log('===', res)
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <address-search-combobox
+      v-model="searchResult"
+      :resultKeys="{ address: 'f_address', coords: `f_address_lng_lat` }"
+      searchResultType="Object"
+      @onSelect="addressSearchComboboxSelect"
+    ></address-search-combobox>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -380,12 +380,21 @@
   <x-form-col
     v-else-if="attr.type === 'addressSearch'"
     :flex="attr.flex">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.prop ? attr.prop : attr.model">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="attr.name"
+      :prop="attr.prop ? attr.prop : attr.model"
+      :labelCol="layout === 'inline' && attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].labelCol:undefined"
+      :wrapperCol="layout === 'inline'&& attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].wrapperCol:undefined"
+      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}">
       <address-search-combobox
+        :emitFunc="emitFunc"
+        :attr="attr"
+        :read-only="readOnly"
         v-model="searchResult"
         :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
         searchResultType="Object"
-        @onSelect="form=Object.assign(form,JSON.parse(searchResult))"
+        @onSelect="addressSearchComboboxSelect"
       ></address-search-combobox>
     </a-form-model-item>
   </x-form-col>
@@ -596,7 +605,7 @@ export default {
             xxl: 24
           }
         } else {
-          if (this.attr.type === 'input' && this.attr.occupyCol) {
+          if (['input', 'addressSearch'] && this.attr.occupyCol) {
             // 如果是 input 看是否配置了 占用列配置
             this.attr.flex = {
               xs: 8 * this.attr.occupyCol,
@@ -637,6 +646,13 @@ export default {
         this.initRadioValue()
       }
     },
+    addressSearchComboboxSelect () {
+      this.form = Object.assign(this.form, JSON.parse(this.searchResult))
+      this.emitFunc('addressSearchComboboxSelect', {
+        key: this.attr.model,
+        value: this.searchResult
+      })
+    },
     getDataCallback (res) {
       this.option = res
       if (this.attr.type === 'treeSelect') {

package/src/config/default/setting.config.js

@@ -49,5 +49,7 @@ module.exports = {
   // 自定义组件集合 格式为组件名: 组件路径（不需要带@/）
   customizeComponent: {},
   // 自定义默认头像路径
-  defaultAvatarUrl: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
+  defaultAvatarUrl: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
+  gaode_key: 'a37ffa0cad038bef7242cdff7084cd36',
+  gaode_secret_key: 'da72499e61d9299f447bb5b2af9f9e6c',
 }

package/src/pages/Example/index.vue

@@ -8,7 +8,8 @@
 <script>
 import XReport from '@vue2-client/base-client/components/common/XReport'
 // import Demo from '@vue2-client/base-client/components/common/XFormGroup/demo.vue'
-import Demo from '@vue2-client/base-client/components/common/XDescriptions/demo.vue'
+// import Demo from '@vue2-client/base-client/components/common/XDescriptions/demo.vue'
+import Demo from '@vue2-client/base-client/components/common/AddressSearchCombobox/demo.vue'
 
 export default {
   name: 'Example',