af-mobile-client-vue3 1.1.5 → 1.1.7

package/src/components/data/XFormItem/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import type { FieldType } from 'vant'
 import type { Numeric } from 'vant/es/utils'
+import type { LocationResult } from '../XOlMap/types'
 import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
 import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
 import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
 import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
+import XLocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
 import { runLogic } from '@af-mobile-client-vue3/services/api/common'
 import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
 import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
@@ -85,7 +88,7 @@ const props = defineProps({
 
 })
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'set-form'])
 // 判断并初始化防抖函数
 let debouncedUserLinkFunc: (() => void) | null = null
 let debouncedDepLinkFunc: (() => void) | null = null
@@ -124,7 +127,8 @@ const currInst = getCurrentInstance()
 // 配置中心->表单项变更触发函数
 const dataChangeFunc = debounce(async () => {
   if (attr.dataChangeFunc)
-    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, attr, null, mode])
+    // eslint-disable-next-line vue/custom-event-name-casing
+    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, val => emits('set-form', val), attr, null, mode])
 }, 500)
 
 // 配置中心->表单项展示函数
@@ -144,13 +148,9 @@ const showFormItemFunc = debounce(async () => {
 
 const localValue = computed({
   get() {
-    // if (props.modelValue !== undefined) {
-    //   return props.modelValue
-    // }
     switch (attr.type) {
       case 'uploader':
         if (mode === '查询') {
-          // console.log(querySelectDefaultValue.value)
           return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
         }
         else {
@@ -510,7 +510,7 @@ function onPickerConfirm({ selectedOptions }) {
 // 日期时间选择数据
 const dateTimePickerValue = ref(undefined)
 function showDataTimePicker() {
-  if (props.modelValue !== undefined && props.modelValue !== '' && props.modelValue !== null) {
+  if (props.modelValue !== undefined && props.modelValue !== '' && props.modelValue !== null && typeof props.modelValue === 'string') {
     // 拆分日期和时间
     const [dateStr, timeStr] = props.modelValue.split(' ')
     // 拆分日期部分
@@ -587,6 +587,14 @@ function onDateTimePickerConfirm() {
 function onPickerCancel() {
   showDatePicker.value = false
 }
+
+const showAddressPicker = ref(false)
+const addressValue = ref('')
+// 处理地址选择器确认
+function handleAddressConfirm(location) {
+  addressValue.value = location.address
+  showAddressPicker.value = false
+}
 </script>
 
 <template>
@@ -843,11 +851,11 @@ function onPickerCancel() {
       >
         <VanDatePicker
           v-model="dateTimePickerValue.date"
-          :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
         />
         <VanTimePicker
           v-model="dateTimePickerValue.time"
-          :columns-type="['hour', 'minute', 'second']"
+          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
           :min-time="attr.minTime ? attr.minTime : '00:00:00'"
           :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
         />
@@ -880,15 +888,13 @@ function onPickerCancel() {
       >
         <VanDatePicker
           v-model="dateTimePickerValue.date"
-          :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
-          :readonly="attr.readonly ? attr.readonly : false"
+          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
         />
         <VanTimePicker
           v-model="dateTimePickerValue.time"
-          :columns-type="['hour', 'minute', 'second']"
+          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
           :min-time="attr.minTime ? attr.minTime : '00:00:00'"
           :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-          :readonly="attr.readonly ? attr.readonly : false"
         />
       </VanPickerGroup>
     </VanPopup>
@@ -979,7 +985,7 @@ function onPickerCancel() {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :type="attr.type"
+      :type="attr.type as FieldType"
       :readonly="readonly"
       :disabled="attr.disabled"
       :placeholder="placeholder"
@@ -988,6 +994,34 @@ function onPickerCancel() {
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
       @blur="() => formTypeCheck(attr, localValue as string)"
     />
+
+    <!-- 地址选择器 -->
+    <VanField
+      v-if="attr.type === 'addressSearch' && showItem"
+      v-model="addressValue"
+      name="addressSearch"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      is-link
+      :placeholder="placeholder"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择地址' }]"
+      @click="readonly ? null : showAddressPicker = true"
+    />
+    <VanPopup
+      v-model:show="showAddressPicker"
+      position="bottom"
+      :style="{ height: '80vh' }"
+      teleport="body"
+    >
+      <XLocationPicker
+        v-model="localValue as LocationResult"
+        tian-di-tu-key="c16876b28898637c0a1a68b3fa410504"
+        amap-key="5ebabc4536d4b42e0dd1e20175cca8ab"
+        @confirm="handleAddressConfirm"
+      />
+    </VanPopup>
   </div>
 </template>
 

package/src/components/data/XOlMap/README.md

@@ -52,8 +52,6 @@ const initParams: InitParams = {
   zoom: 12,                   // 初始缩放级别
   maxZoom: 18,               // 最大缩放级别
   minZoom: 4,                // 最小缩放级别
-  tianDiTuKey: 'your_key',   // 天地图密钥
-  amapKey: 'your_key',       // 高德地图密钥
 }
 
 // 中心点变化回调

package/src/components/data/XOlMap/XLocationPicker/index.vue

@@ -1,22 +1,36 @@
 <script setup lang="ts">
-import type { LocationResult } from '../types'
+import type { LocationResult, PhoneLocationStatus } from '../types'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import { Button } from 'vant'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import XOlMap from '../index.vue'
 
 interface Props {
   modelValue?: LocationResult
-  tianDiTuKey: string
-  amapKey: string
   defaultCenter?: [number, number]
   defaultZoom?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  defaultCenter: () => [116.404, 39.915],
-  defaultZoom: 10,
-  tianDiTuKey: '',
-  amapKey: '',
+  defaultCenter: () => {
+    try {
+      mobileUtil.execute({
+        param: undefined,
+        funcName: 'getPhoneStatus',
+        callbackFunc: (result) => {
+          const locationResult = result as PhoneLocationStatus
+          if (locationResult.f_latitude && locationResult.f_longitude) {
+            return [locationResult.f_longitude, locationResult.f_latitude]
+          }
+        },
+      })
+    }
+    catch (error) {
+      console.error('获取位置信息失败:', error)
+    }
+    return [108.948024, 34.263161] // 北京天安门坐标
+  },
+  defaultZoom: 16,
 })
 
 const emit = defineEmits<{
@@ -55,8 +69,6 @@ onMounted(() => {
     mapRef.value.init({
       center: props.defaultCenter,
       zoom: props.defaultZoom,
-      tianDiTuKey: props.tianDiTuKey,
-      amapKey: props.amapKey,
     })
 
     // 初始化后尝试获取地址信息

package/src/components/data/XOlMap/index.vue

@@ -17,6 +17,7 @@ import type {
   WMSOptions,
 } from './types'
 import locationIcon from '@af-mobile-client-vue3/assets/img/component/positioning.png'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import { Map, View } from 'ol'
 import { defaults as defaultControls, ScaleLine } from 'ol/control'
@@ -73,6 +74,8 @@ const wmsLayerStatus = ref<WMSLayerConfig[]>([])
 const vectorLayers: Record<number, VectorLayer<VectorSource>> = {}
 const pointLayerStatus = ref<PointLayerConfig[]>([])
 
+const tiandityKey = ref()
+const gaodeKey = ref()
 /** 导航模式 是否正在跟随定位 */
 const isFollowingLocation = ref(false)
 /** 定位定时器 */
@@ -85,11 +88,10 @@ let locationLayer: VectorLayer<VectorSource> | null = null
  */
 function createLocationLayer(): VectorLayer<VectorSource> {
   const source = new VectorSource()
-  const layer = new VectorLayer({
+  return new VectorLayer({
     source,
     zIndex: 10, // 确保位置图标在最上层
   })
-  return layer
 }
 
 /**
@@ -252,7 +254,7 @@ function initializeLayers(tianDiTuKey = ''): void {
  */
 async function getAddressInfo(location: [number, number]): Promise<string> {
   try {
-    const key = mapParams.value.amapKey
+    const key = gaodeKey.value
 
     if (!key) {
       return '获取地址失败: 未配置密钥'
@@ -320,86 +322,91 @@ function init(params: InitParams = {}): void {
     zoom = 10,
     maxZoom = 18,
     minZoom = 4,
-    tianDiTuKey = '',
-    amapKey = '',
   } = params
 
   try {
-    // 初始化所有底图图层
-    initializeLayers(tianDiTuKey)
-
-    // 创建地图实例 - 加载所有底图图层，但默认只显示高德地图
-    map = new Map({
-      target: mapRef.value,
-      layers: Object.values(baseMaps), // 加载所有底图图层
-      view: new View({
-        center: fromLonLat(center),
-        zoom,
-        projection: 'EPSG:3857',
-        maxZoom,
-        minZoom,
-      }),
-      controls: defaultControls({
-        zoom: false,
-        rotate: false,
-        attribution: false,
-      }).extend([
-        new ScaleLine({
-          units: 'metric',
-          className: 'ol-scale-line',
+    getConfigByName('webConfig', (res) => {
+      const tianDiTuKey = res.tianDiTuKey || 'c16876b28898637c0a1a68b3fa410504'
+      const amapKey = res.amapKey || '5ebabc4536d4b42e0dd1e20175cca8ab'
+
+      tiandityKey.value = tianDiTuKey
+      gaodeKey.value = amapKey
+      // 初始化所有底图图层
+      initializeLayers(tianDiTuKey)
+
+      // 创建地图实例 - 加载所有底图图层，但默认只显示高德地图
+      map = new Map({
+        target: mapRef.value,
+        layers: Object.values(baseMaps), // 加载所有底图图层
+        view: new View({
+          center: fromLonLat(center),
+          zoom,
+          projection: 'EPSG:3857',
+          maxZoom,
+          minZoom,
+        }),
+        controls: defaultControls({
+          zoom: false,
+          rotate: false,
+          attribution: false,
+        }).extend([
+          new ScaleLine({
+            units: 'metric',
+            className: 'ol-scale-line',
+          }),
+        ]),
+        interactions: defaultInteractions({
+          altShiftDragRotate: false,
+          pinchRotate: false,
         }),
-      ]),
-      interactions: defaultInteractions({
-        altShiftDragRotate: false,
-        pinchRotate: false,
-      }),
-    })
-
-    // 更新地图大小，确保地图正确渲染
-    setTimeout(() => {
-      if (map) {
-        map.updateSize()
-        // 确保默认图层正确显示
-        handleMapChange('tianditu')
-      }
-    }, 200)
-
-    // 监听地图移动结束事件
-    map.on('moveend', handleMoveEnd)
-
-    // 设置鼠标样式
-    if (mapRef.value) {
-      mapRef.value.style.cursor = 'grab'
-      // 监听地图事件
-      const mapElement = mapRef.value
-
-      // 鼠标按下时
-      mapElement.addEventListener('mousedown', () => {
-        mapElement.style.cursor = 'grabbing'
-        // 用户开始拖动地图，取消跟随定位
-        if (locationTimer) {
-          isFollowingLocation.value = false
-        }
       })
 
-      // 触摸开始时
-      mapElement.addEventListener('touchstart', () => {
-        // 用户开始拖动地图，取消跟随定位
-        if (locationTimer) {
-          isFollowingLocation.value = false
+      // 更新地图大小，确保地图正确渲染
+      setTimeout(() => {
+        if (map) {
+          map.updateSize()
+          // 确保默认图层正确显示
+          handleMapChange('tianditu')
         }
-      })
+      }, 200)
+
+      // 监听地图移动结束事件
+      map.on('moveend', handleMoveEnd)
+
+      // 设置鼠标样式
+      if (mapRef.value) {
+        mapRef.value.style.cursor = 'grab'
+        // 监听地图事件
+        const mapElement = mapRef.value
+
+        // 鼠标按下时
+        mapElement.addEventListener('mousedown', () => {
+          mapElement.style.cursor = 'grabbing'
+          // 用户开始拖动地图，取消跟随定位
+          if (locationTimer) {
+            isFollowingLocation.value = false
+          }
+        })
 
-      // 鼠标释放时
-      mapElement.addEventListener('mouseup', () => {
-        mapElement.style.cursor = 'grab'
-      })
+        // 触摸开始时
+        mapElement.addEventListener('touchstart', () => {
+          // 用户开始拖动地图，取消跟随定位
+          if (locationTimer) {
+            isFollowingLocation.value = false
+          }
+        })
 
-      // 鼠标离开地图时
-      mapElement.addEventListener('mouseleave', () => {
-        mapElement.style.cursor = 'grab'
-      })
-    }
+        // 鼠标释放时
+        mapElement.addEventListener('mouseup', () => {
+          mapElement.style.cursor = 'grab'
+        })
+
+        // 鼠标离开地图时
+        mapElement.addEventListener('mouseleave', () => {
+          mapElement.style.cursor = 'grab'
+        })
+      }
+    })
   }
   catch (error) {
     console.error('地图初始化失败:', error)

package/src/components/data/XOlMap/types.ts

@@ -28,12 +28,8 @@ export interface InitParams {
   maxZoom?: number
   /** 最小缩放级别 */
   minZoom?: number
-  /** 天地图密钥 */
-  tianDiTuKey?: string
   /** 是否开启地址选择模式 */
   enableLocationPicker?: boolean
-  /** 高德地图 API key */
-  amapKey?: string
 }
 
 /** 点位数据接口 */