af-mobile-client-vue3 1.1.8 → 1.1.10

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

@@ -1,7 +1,6 @@
 <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'
@@ -146,87 +145,91 @@ const showFormItemFunc = debounce(async () => {
   }
 }, 500)
 
-const localValue = computed({
-  get() {
-    switch (attr.type) {
-      case 'uploader':
-        if (mode === '查询') {
-          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-        }
-        else {
-          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
-        }
-      case 'switch':
-        return props.modelValue !== undefined ? props.modelValue : false
-      case 'checkbox':
-      case 'file':
-      case 'image':
-      case 'timePicker':
-      case 'datePicker':
-        if (mode === '查询') {
-          // console.log(querySelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-        }
-        else {
-          // console.log(formSelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
-        }
-      // case 'datePicker':
-      //   if (mode === '查询') {
-      //     // console.log(querySelectDefaultValue.value)
-      //     return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-      //   }
-      //   else {
-      //     if (props.modelValue !== undefined) {
-      //       // 拆分日期和时间
-      //       const [dateStr, timeStr] = props.modelValue.split(' ')
-      //       // 拆分日期部分
-      //       const date = dateStr.split('-')
-      //       // 拆分时间部分
-      //       const time = timeStr.split(':')
-      //       // 赋值给 dateTimePickerValue
-      //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      //       dateTimePickerValue.value = {
-      //         date,
-      //         time,
-      //       }
-      //       return dateTimePickerValue.value
-      //     }
-      //     return formSelectDefaultValue.value
-      //   }
-      case 'radio':
-      case 'rate':
-      case 'slider':
-      case 'area':
-      case 'citySelect':
-      case 'calendar':
-      case 'textarea':
-      case 'intervalPicker':
-      case 'input':
-      case 'select':
-        if (mode === '查询')
-          return props.modelValue !== undefined ? props.modelValue : queryInputDefaultValue.value
-        else
-          return props.modelValue !== undefined ? props.modelValue : formInputDefaultValue.value
-      case 'stepper':
-        return props.modelValue !== undefined ? props.modelValue : 1
-      case 'rangePicker':
-        if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
-          return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
+// 获取默认值的函数
+function getDefaultValue() {
+  switch (attr.type) {
+    case 'uploader':
+    case 'checkbox':
+    case 'file':
+    case 'image':
+    case 'timePicker':
+    case 'datePicker':
+      if (mode === '查询')
+        return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
+      else
+        return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
+    case 'switch':
+      return props.modelValue !== undefined ? props.modelValue : false
+    case 'radio':
+    case 'rate':
+    case 'slider':
+    case 'area':
+    case 'citySelect':
+    case 'calendar':
+    case 'textarea':
+    case 'intervalPicker':
+    case 'input':
+    case 'select':
+      if (mode === '查询')
+        return props.modelValue !== undefined ? props.modelValue : queryInputDefaultValue.value
+      else
+        return props.modelValue !== undefined ? props.modelValue : formInputDefaultValue.value
+    case 'stepper':
+      return props.modelValue !== undefined ? props.modelValue : 1
+    case 'rangePicker':
+      if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
+        return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
+      else
+        return props.modelValue
+    case 'addressSearch':
+      return props.modelValue
+    default:
+      return undefined
+  }
+}
 
-        else
-          return props.modelValue
+// 改用 ref，并设置初始值
+const localValue = ref(getDefaultValue())
 
-      default:
-        return undefined
-    }
-  },
-  set(newValue) {
-    emits('update:modelValue', newValue)
-    dataChangeFunc()
-  },
+// 监听 props.modelValue 的变化
+watch(() => props.modelValue, (newVal) => {
+  // 如果是文件上传类型，需要特殊处理
+  if (attr.type === 'image' || attr.type === 'file') {
+    localValue.value = Array.isArray(newVal) ? newVal : []
+  }
+  else {
+    localValue.value = newVal !== undefined ? newVal : getDefaultValue()
+  }
 })
 
+// 监听 localValue 的变化
+watch(localValue, (newVal) => {
+  if (attr.type === 'image' || attr.type === 'file') {
+    // 确保上传组件的值始终是数组
+    const value = Array.isArray(newVal) ? newVal : []
+    emits('update:modelValue', value)
+  }
+  else {
+    emits('update:modelValue', newVal)
+  }
+  dataChangeFunc()
+})
+
+function updateFile(files, _index) {
+  // 处理文件数据
+  // 更新本地值
+  localValue.value = files.map((file) => {
+    const newFile = { ...file }
+    if (newFile.content)
+      delete newFile.content
+    if (newFile.file)
+      delete newFile.file
+    if (newFile.objectUrl)
+      delete newFile.objectUrl
+    return newFile
+  })
+}
+
 // 表单校验的类型校验
 function formTypeCheck(attr, value) {
   switch (attr.rule.type) {
@@ -553,30 +556,6 @@ function onAreaConfirm({ selectedOptions }) {
   }])
 }
 
-function updateFile(files, _index) {
-  files.forEach((file) => {
-    if (file.content)
-      delete file.content
-    if (file.file)
-      delete file.file
-    if (file.objectUrl)
-      delete file.objectUrl
-  })
-  localValue.value = files
-  emits('update:modelValue', localValue.value)
-}
-// 监听表单发生变化后触发展示函数
-watch(() => form, (_oldVal, _newVal) => {
-  showFormItemFunc()
-  // 数据源来自人员联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
-    debouncedUserLinkFunc()
-
-  // 数据源来自部门联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
-    debouncedDepLinkFunc()
-}, { deep: true })
-
 function onDateTimePickerConfirm() {
   showDatePicker.value = false
   const dateStr = dateTimePickerValue.value.date.join('-')
@@ -590,9 +569,30 @@ function onPickerCancel() {
 
 const showAddressPicker = ref(false)
 const addressValue = ref('')
+
+// XLocationPicker 默认加载的中心点
+const defaultMapCenter = computed(() => {
+  const lonLat = form[`${attr.model}_lon_lat`]
+  if (lonLat && typeof lonLat === 'string' && lonLat.includes(',')) {
+    const [lon, lat] = lonLat.split(',').map(Number)
+    if (!Number.isNaN(lon) && !Number.isNaN(lat)) {
+      return [lon, lat] as [number, number]
+    }
+  }
+  return undefined
+})
+
 // 处理地址选择器确认
 function handleAddressConfirm(location) {
-  addressValue.value = location.address
+  // 构造新的数据格式
+  const formData = {
+    [`${attr.model}_lon_lat`]: `${location.longitude},${location.latitude}`,
+    [attr.model]: location.address,
+  }
+
+  // 更新表单数据
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emits('set-form', formData)
   showAddressPicker.value = false
 }
 </script>
@@ -998,7 +998,7 @@ function handleAddressConfirm(location) {
     <!-- 地址选择器 -->
     <VanField
       v-if="attr.type === 'addressSearch' && showItem"
-      v-model="addressValue"
+      v-model="localValue as string"
       name="addressSearch"
       :label="labelData"
       :label-align="labelAlign"
@@ -1016,9 +1016,7 @@ function handleAddressConfirm(location) {
       teleport="body"
     >
       <XLocationPicker
-        v-model="localValue as LocationResult"
-        tian-di-tu-key="c16876b28898637c0a1a68b3fa410504"
-        amap-key="5ebabc4536d4b42e0dd1e20175cca8ab"
+        :default-center="defaultMapCenter"
         @confirm="handleAddressConfirm"
       />
     </VanPopup>

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

@@ -63,17 +63,15 @@ function handleConfirm() {
 }
 
 // 组件挂载时初始化地图
-onMounted(() => {
+onMounted(async () => {
   // 使用 nextTick 确保 DOM 已更新
-  nextTick(() => {
-    mapRef.value.init({
-      center: props.defaultCenter,
-      zoom: props.defaultZoom,
-    })
-
-    // 初始化后尝试获取地址信息
-    handleCenterChange(props.defaultCenter)
+  await nextTick()
+  await mapRef.value.init({
+    center: props.defaultCenter,
+    zoom: props.defaultZoom,
   })
+  // 初始化后尝试获取地址信息
+  handleCenterChange(props.defaultCenter)
 })
 
 // 监听弹窗状态变化

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

@@ -308,109 +308,115 @@ async function handleMoveEnd() {
  * 初始化地图
  * @param params - 初始化参数
  */
-function init(params: InitParams = {}): void {
-  if (!mapRef.value) {
-    return
-  }
-
-  // 保存初始化参数
-  mapParams.value = params
-
-  // 设置默认参数
-  const {
-    center = [116.404, 39.915],
-    zoom = 10,
-    maxZoom = 18,
-    minZoom = 4,
-  } = params
+function init(params: InitParams = {}): Promise<void> {
+  return new Promise((resolve) => {
+    if (!mapRef.value) {
+      resolve()
+      return
+    }
 
-  try {
-    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',
+    // 保存初始化参数
+    mapParams.value = params
+
+    // 设置默认参数
+    const {
+      center = [116.404, 39.915],
+      zoom = 10,
+      maxZoom = 18,
+      minZoom = 4,
+    } = params
+
+    try {
+      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')
+            // 地图初始化完成后解析 Promise
+            resolve()
           }
-        })
+        }, 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'
-        })
-      }
-    })
-  }
-  catch (error) {
-    console.error('地图初始化失败:', error)
-  }
+          // 鼠标释放时
+          mapElement.addEventListener('mouseup', () => {
+            mapElement.style.cursor = 'grab'
+          })
+
+          // 鼠标离开地图时
+          mapElement.addEventListener('mouseleave', () => {
+            mapElement.style.cursor = 'grab'
+          })
+        }
+      })
+    }
+    catch (error) {
+      console.error('地图初始化失败:', error)
+      resolve()
+    }
+  })
 }
 
 /**
@@ -905,6 +911,7 @@ defineExpose({
 // 组件卸载时清理地图实例
 onUnmounted(() => {
   if (map) {
+    stopNavigation()
     map.setTarget(undefined)
     map = null
   }