af-mobile-client-vue3 1.1.7 → 1.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

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

@@ -127,7 +127,7 @@ onBeforeMount(() => {
 function initComponent() {
   getConfigByName(configName, (result) => {
     groupFormItems.value = result
-    title.value = result.title
+    title.value = result?.title
     for (let i = 0; i < result.columnJson.length; i++) {
       const item = result.columnJson[i]
       item.span = item.flexSpan
@@ -436,6 +436,7 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
               <VanRow gutter="20" class="card_item_details" @click="emit('toDetail', item)">
                 <VanCol v-for="column of detailColumns" :key="`details_${column.dataIndex}`" :span="column.span">
                   <p>
+                    {{ `${column.title}: ` }}
                     <XBadge
                       :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"

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'
@@ -216,7 +215,8 @@ const localValue = computed({
 
         else
           return props.modelValue
-
+      case 'addressSearch':
+        return props.modelValue
       default:
         return undefined
     }
@@ -590,9 +590,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 +1019,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 +1037,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
   }

package/src/views/component/XCellListView/index.vue

@@ -1,92 +1,11 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { defineEmits, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-// 定义事件
-const emit = defineEmits(['deleteRow'])
-// 访问路由
-const router = useRouter()
-// 获取默认值
-const idKey = ref('o_id')
+import { ref } from 'vue'
 
 // 简易crud表单测试
-const configName = ref('crud_oper_log_manage')
-const serviceName = ref('af-system')
-
-// 资源权限测试
-// const configName = ref('crud_sources_test')
-// const serviceName = ref('af-system')
-
-// 实际业务测试
-// const configName = ref('lngChargeAuditMobileCRUD')
-// const serviceName = ref('af-gaslink')
-
-// 跳转到详情页面
-// function toDetail(item) {
-//   router.push({
-//     name: 'XCellDetailView',
-//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
-//     query: {
-//       operName: item[operNameKey.value],
-//       method:item[methodKey.value],
-//       requestMethod:item[requestMethodKey.value],
-//       operatorType:item[operatorTypeKey.value],
-//       operUrl:item[operUrlKey.value],
-//       operIp:item[operIpKey.value],
-//       costTime:item[costTimeKey.value],
-//       operTime:item[operTimeKey.value],
-//
-//       title: item[titleKey.value],
-//       businessType: item[businessTypeKey.value],
-//       status:item[statusKey.value]
-//     }
-//   })
-// }
-
-// 跳转到表单——以表单组来渲染纯表单
-function toDetail(item) {
-  router.push({
-    name: 'XFormGroupView',
-    query: {
-      id: item[idKey.value],
-      // id: item.rr_id,
-      // o_id: item.o_id,
-    },
-  })
-}
-
-// 新增功能
-// function addOption(totalCount) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: totalCount, openid: totalCount },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '新增',
-//     },
-//   })
-// }
-
-// 修改功能
-// function updateRow(result) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: result.o_id, openid: result.o_id },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '修改',
-//     },
-//   })
-// }
-
-// 删除功能
-function deleteRow(result) {
-  emit('deleteRow', result.o_id)
-}
+const configName = ref('defectDispatchPhoneCRUD')
+const serviceName = ref('af-linepatrol')
 </script>
 
 <template>
@@ -95,10 +14,6 @@ function deleteRow(result) {
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
-        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
-        :id-key="idKey"
-        @to-detail="toDetail"
-        @delete-row="deleteRow"
       />
     </template>
   </NormalDataLayout>

package/src/views/component/XFormGroupView/index.vue

@@ -9,13 +9,6 @@ import { useRoute } from 'vue-router'
 const configName = ref('form_check_test')
 const serviceName = ref('af-system')
 
-// const configName = ref("计划下发Form")
-// const serviceName = ref("af-linepatrol")
-
-// 表单组
-// const configName = ref('lngChargeAuditMobileFormGroup')
-// const serviceName = ref('af-gaslink')
-
 const formData = ref({})
 const formGroup = ref(null)
 const route = useRoute()
@@ -25,36 +18,6 @@ function submit(_result) {
     history.back()
   })
 }
-
-// 表单组——数据
-// function initComponents () {
-//   runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
-//     formData.value = {...res}
-//   })
-// }
-
-// 纯表单——数据
-// function initComponents() {
-//   formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
-// }
-
-// function initComponents() {
-//   runLogic('getlngChargeAuditMobileFormGroupData', { id: route.query?.id, o_id: route.query?.o_id }, 'af-gaslink').then((res) => {
-//     console.log('res------', res)
-//     formData.value = { ...res }
-// formGroup.value.init({
-//   configName: configName.value,
-//   serviceName: serviceName.value,
-//   groupFormData: { ...res },
-//   mode: "新增"
-// })
-//     isInit.value = true
-//   })
-// }
-
-// onBeforeMount(() => {
-//   initComponents()
-// })
 </script>
 
 <template>

package/src/views/component/XFormView/index.vue

@@ -1,133 +1,44 @@
 <script setup lang="ts">
-import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-import { post } from '@af-mobile-client-vue3/services/restTools'
-import {
-  showDialog,
-  NavBar as VanNavBar,
-  Space as VanSpace,
-} from 'vant'
-import { defineEmits, getCurrentInstance, onBeforeMount, ref } from 'vue'
-import { useRoute } from 'vue-router'
-
-const emit = defineEmits(['onSumbit'])
-const xForm = ref(null)
-const id = ref(-1)
-const openid = ref('')
-const instance = getCurrentInstance()
-const xFormInit = ref(false)
-const route = useRoute()
-const configName = route.query.configName as string
-const serviceName = route.query.serviceName as string
-const mode = route.query.mode as string
-const updateData = ref({})
-const title = ref('')
-const groupFormItems = ref({})
-const api = ref('/af-system/logic/commonQuery')
-const updateId = {
-  queryParamsName: 'crud_oper_log_manage',
-  pageNo: 1,
-  pageSize: 20,
-  conditionParams: { o_id: route.params.id as string },
-}
-const loadUpdate = ref(false)
-// const serviceName = ref('af-revenue')
-const _currentEvaluate = {
-  id: null,
-  f_business_name: '',
-  f_evaluate_state: '',
-}
-
-// 组件挂载前获取数据
-onBeforeMount(async () => {
-  if (instance) {
-    id.value = route.params.id as unknown as number
-    openid.value = route.params.openid as string
-    formInit()
-  }
+import { ref } from 'vue'
+
+const configName = ref('PointBindingForm')
+const serviceName = ref('af-linepatrol')
+
+const formData = ref({
+  t1_f_number: '点位编号>>',
+  t2_f_name: '所属区域>>',
+  t1_f_address: '地址信息>>',
+  t1_f_address_lon_lat: '118.842054,39.246094',
+  t1_f_describe: '点位描述>>',
+  t1_f_state: '点位状态>>',
 })
-
-// 组件初始化前的判断
-async function formInit() {
-  getConfigByName(configName, (result) => {
-    groupFormItems.value = result
-    title.value = result.title
-    if (mode === '修改')
-      getUpdateData()
-    xFormInit.value = true
-  }, serviceName)
-}
-
-// 获取配置信息
-function queryData() {
-
-}
-
-// 提交操作
-function onSubmit(params) {
-  // const data = {
-  //   id: currentEvaluate.id,
-  //   f_json: params,
-  //   f_evaluate_date: formatDate(new Date()),
-  //   f_evaluate_state: '已评价',
-  //   f_evaluate_type: '用户评价',
-  //   f_evaluate_userid: openid.value,
-  // }
-  // openApiLogic(data, 'saveEvaluate', formServiveName).then((_res: any) => {
-  //     showDialog({ message: '评价成功了' }).then(() => {history.back()})
-  // }).catch(() => {
-  //   showDialog({ message: '评价失败了' })
+const formGroup = ref(null)
+function submit(result) {
+  console.log('>>>> result: ', result)
+  // showDialog({ message: '提交成功' }).then(() => {
+  //   history.back()
   // })
-  if (params) {
-    emit('onSumbit', params)
-    showDialog({ message: '评价成功了' }).then(() => {
-      history.back()
-    })
-  }
-  else {
-    showDialog({ message: '评价失败了' }).then(() => {
-      history.back()
-    })
-  }
-}
-
-// 查询需要修改的数据
-async function getUpdateData() {
-  if (api.value && updateId) {
-    const res = await post(api.value, updateId)
-    updateData.value = res.data[0]
-  }
 }
 </script>
 
 <template>
-  <NormalDataLayout id="XFormView" title="XForm表单">
+  <NormalDataLayout id="XFormGroupView" title="纯表单">
     <template #layout_content>
-      <VanSpace direction="vertical" fill>
-        <VanNavBar :title="title ? mode.concat(title) : null" />
-        <XForm
-          v-if="xFormInit"
-          ref="xForm"
-          :group-form-items="JSON.parse(JSON.stringify(groupFormItems))"
-          :service-name="serviceName"
-          :form-data="updateData"
-          :mode="mode"
-          style="margin-bottom: 14px;"
-          @on-submit="onSubmit"
-        />
-      </VanSpace>
+      <!--      v-if="isInit" -->
+      <XFormGroup
+        ref="formGroup"
+        :config-name="configName"
+        :service-name="serviceName"
+        :group-form-data="formData"
+        mode="新增"
+        @submit="submit"
+      />
     </template>
   </NormalDataLayout>
 </template>
 
-<style scoped>
-.van-doc-demo-block__title {
-  margin: 0;
-  padding: 32px 16px 16px;
-  color: black;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-}
+<style scoped lang="less">
+
 </style>

package/src/views/component/XFormView/oldindex.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+import { nextTick, onMounted, ref } from 'vue'
+
+const xForm = ref(null)
+const serviceName = 'af-linepatrol'
+
+onMounted(() => {
+  const modifyModelData = {
+    t1_f_number: '点位编号',
+    t2_f_name: '所属区域',
+    t1_f_address: '116.450355,40.057394',
+    t1_f_describe: '点位描述',
+    t1_f_state: '点位状态',
+  }
+  getConfigByName('PointBindingForm', async (res) => {
+    const initData = {
+      formItems: res, // 琉璃配置
+      serviceName, // 服务名称
+      formData: JSON.stringify(modifyModelData), // 数据
+      mode: '修改', // 修改
+    }
+    console.log('>>>> initData: ', JSON.stringify(initData))
+    await nextTick()
+    xForm.value.init(initData)
+  }, 'af-linepatrol')
+})
+
+// 提交操作
+function onSubmit(params) {
+  console.log('>>>> params: ', JSON.stringify(params))
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XFormView" title="XForm表单">
+    <template #layout_content>
+      <XForm
+        ref="xForm"
+        service-name="af-linepatrol"
+        @on-submit="onSubmit"
+      />
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped>
+</style>

package/src/views/component/XOlMapView/XLocationPicker/index.vue

@@ -44,8 +44,6 @@ function handleLocationConfirm(location: LocationResult) {
         <div class="map-container">
           <LocationPicker
             v-model="selectedLocation"
-            tian-di-tu-key="c16876b28898637c0a1a68b3fa410504"
-            amap-key="5ebabc4536d4b42e0dd1e20175cca8ab"
             :default-center="[108.948024, 34.263161]"
             :default-zoom="12"
             @confirm="handleLocationConfirm"

package/src/views/component/XOlMapView/index.vue

@@ -63,14 +63,12 @@ const wmsConfig = {
 }
 
 // 初始化地图
-onMounted(() => {
-  mapRef.value.init({
+onMounted(async () => {
+  await mapRef.value.init({
     center: [108.948024, 34.263161], // 西安坐标
     zoom: 12,
-    maxZoom: 18,
-    minZoom: 4,
   })
-  mapRef.value.addWMSLayers(wmsConfig)
+  await mapRef.value.addWMSLayers(wmsConfig)
 })
 
 // 地图控制函数