af-mobile-client-vue3 1.2.4 → 1.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "packageManager": "pnpm@10.12.3",
   "description": "Vue + Vite component lib",
   "engines": {

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

@@ -2,6 +2,7 @@
 import type { FormInstance } from 'vant'
 import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
 import { addOrModifyEntity } from '@af-mobile-client-vue3/services/api/common'
+import XOlMap from '@af-mobile-client-vue3/components/data/XOlMap/index.vue'
 import { post } from '@af-mobile-client-vue3/services/restTools'
 import {
   showFailToast,
@@ -10,7 +11,7 @@ import {
   CellGroup as VanCellGroup,
   Form as VanForm,
 } from 'vant'
-import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, nextTick, onBeforeMount, reactive, ref, watch } from 'vue'
 
 interface FormItem {
   addOrEdit: string
@@ -74,6 +75,37 @@ const resolvedSubmitButton = computed(() => {
   return props.submitButton
 })
 
+const previewMapRef = ref(null)
+// 假设你只预览第一个 addressSearch 类型的经纬度
+const previewLonLatKey = computed(() => {
+  const item = realJsonData.value.find(i => i.type === 'addressSearch')
+  return item ? `${item.model}_lon_lat` : null
+})
+const previewMapPoint = computed(() => {
+  const val = form.value[previewLonLatKey.value]
+  if (val && typeof val === 'string' && val.includes(',')) {
+    const [lon, lat] = val.split(',').map(Number)
+    if (!Number.isNaN(lon) && !Number.isNaN(lat)) {
+      return [lon, lat]
+    }
+  }
+  return null
+})
+
+// 地图初始化逻辑
+const previewMapInited = ref(false)
+watch(previewMapPoint, async (val) => {
+  await nextTick()
+  if (val && previewMapRef.value) {
+    if (!previewMapInited.value) {
+      await previewMapRef.value.init({ center: val, zoom: 16, isPreview: true })
+      previewMapInited.value = true
+    }
+    previewMapRef.value.setCenter(val, true)
+    previewMapRef.value.updateLocationMarker(val)
+  }
+}, { immediate: true })
+
 onBeforeMount(() => {
   if (!props.configName && props.groupFormItems) {
     if (props.groupFormItems && props.groupFormItems.tableName) {
@@ -266,6 +298,15 @@ defineExpose({ init, form, formGroupName, validate })
           @set-form="setForm"
         />
       </VanCellGroup>
+      <!-- 地图预览，统一放在表单项下方，只在有经纬度时显示 -->
+      <div v-if="previewMapPoint" style="height: 200px; margin-top: 12px; position: relative;">
+        <XOlMap
+          ref="previewMapRef"
+          :center="previewMapPoint"
+          :style="{ height: '100%' }"
+        />
+        <div class="map-mask" />
+      </div>
     </div>
     <div v-if="resolvedSubmitButton && props.mode !== '预览'" class="form-footer-fixed">
       <VanButton class="action-btn" round block type="primary" native-type="submit">
@@ -298,4 +339,14 @@ defineExpose({ init, form, formGroupName, validate })
     border-radius: 10px;
   }
 }
+.map-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: all;
+  background: transparent;
+  z-index: 10;
+}
 </style>

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

@@ -48,6 +48,8 @@ const mapParams = ref<InitParams>({})
 
 /** 地图容器引用 */
 const mapRef = ref<HTMLDivElement>()
+/** 是否为预览模式 */
+const preview = ref(false)
 /** 地图实例 */
 let map: Map | null = null
 /** 当前底图类型 */
@@ -104,13 +106,17 @@ function createLocationLayer(): VectorLayer<VectorSource> {
  * 更新位置图标
  */
 function updateLocationMarker(center: [number, number]): void {
-  if (!map || !locationLayer)
+  if (!map) {
     return
-
+  }
+  if (!locationLayer) {
+    locationLayer = createLocationLayer()
+    map?.addLayer(locationLayer)
+  }
   const source = locationLayer.getSource()
-  if (!source)
+  if (!source) {
     return
-
+  }
   // 清除现有图标
   source.clear()
 
@@ -330,8 +336,10 @@ function init(params: InitParams = {}): Promise<void> {
       zoom = 10,
       maxZoom = 18,
       minZoom = 4,
+      isPreview = false,
     } = params
-
+    // 设置预览模式
+    preview.value = isPreview
     try {
       getConfigByName('webConfig', (res) => {
         const tianDiTuKey = res.tianDiTuKey || 'c16876b28898637c0a1a68b3fa410504'
@@ -1031,6 +1039,7 @@ function handleToggleTrackLayer(track: TrackData): void {
 
 // 暴露方法给父组件
 defineExpose({
+  updateLocationMarker,
   init,
   getMap,
   setCenter,
@@ -1071,8 +1080,7 @@ onUnmounted(() => {
 <template>
   <div class="map-wrapper">
     <div ref="mapRef" class="ol-map" />
-    <!-- 添加定位按钮 -->
-    <div class="location-button">
+    <div v-if="!preview" class="location-button">
       <Button size="small" square @click="handleLocation">
         <img
           src="@af-mobile-client-vue3/assets/img/component/location.png"
@@ -1183,7 +1191,7 @@ onUnmounted(() => {
   .ol-map {
     width: 100%;
     height: 100%;
-    min-height: 400px;
+    min-height: 200px;
     touch-action: none;
 
     &:active {

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

@@ -14,7 +14,7 @@ export interface PhoneLocationStatus {
   status: string
 
   data: {
-    location: string;
+    location: string
   }
 }
 
@@ -30,6 +30,8 @@ export interface InitParams {
   minZoom?: number
   /** 是否开启地址选择模式 */
   enableLocationPicker?: boolean
+  /** 是否为预览模式（预览时不显示定位按钮） */
+  isPreview?: boolean
 }
 
 /** 点位数据接口 */