af-mobile-client-vue3 1.4.25 → 1.4.27

package/package.json

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

package/src/components/data/OtherCharge/OtherChargeForm.vue

@@ -2,6 +2,7 @@
 import type { FileItem } from '../../common/otherCharge/FileUploader.vue'
 import CardContainer from '@af-mobile-client-vue3/components/data/CardContainer/CardContainer.vue'
 import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
+import OtherChargeGroupModal from '@af-mobile-client-vue3/components/data/OtherCharge/OtherChargeGroupModal.vue'
 import { getConfigByNameAsync, runLogic } from '@af-mobile-client-vue3/services/api/common'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import {
@@ -109,6 +110,8 @@ const props = defineProps<{
   user?: BusinessUser
   isWorkOrder?: boolean
   workOrderData?: any
+  serviceName?: string
+  showGroup?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -127,13 +130,14 @@ const remarks = ref('')
 const fileList = ref<FileItem[]>([])
 const showAddItemModal = ref(false)
 const showQrCodePayment = ref(false)
+// 材料组相关状态
+const showAddGroupModal = ref(false)
 // 子组件的响应组件引用
 const printRef = ref()
 // 收费类型数据
 const chargeTypeConfig = reactive<ChargeTypeConfig>({
   value: [],
 })
-
 // 配置数据
 const config = reactive<Partial<OtherChargeConfig>>({
   payment: '现金缴费',
@@ -150,6 +154,10 @@ const useGridUploader = computed(() => {
   return config.fileTypes && config.fileTypes.length > 0
 })
 
+// 是否显示添加材料组按钮
+const showAddGroupButton = computed(() => {
+  return props.showGroup ?? false
+})
 // 初始化获取配置
 async function initConfig() {
   try {
@@ -196,9 +204,8 @@ async function initConfig() {
       chargeTypeConfig.value = chargeTypes
       console.log('新的收费类型数据', chargeTypes)
     })
-
     // 获取其他收费类型配置
-    const chargeConfig = await getConfigByNameAsync('mobile_otherChargeConfig')
+    const chargeConfig = await getConfigByNameAsync('mobile_otherChargeConfig', props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME)
     if (chargeConfig) {
       // 更新配置
       Object.assign(config, chargeConfig)
@@ -428,10 +435,21 @@ function onFileRemoved(): void {
         <CardHeader title="费用项目">
           <template #extra>
             <VanButton
+              v-if="showAddGroupButton"
               type="primary"
               size="small"
               icon="plus"
               plain
+              @click="showAddGroupModal = true"
+            >
+              选择材料组
+            </VanButton>
+            <VanButton
+              type="primary"
+              size="small"
+              icon="plus"
+              plain
+              style="margin-left: 8px;"
               @click="showAddItemModal = true"
             >
               添加费用项
@@ -576,7 +594,13 @@ function onFileRemoved(): void {
       :charge-types="chargeTypeConfig"
       @add="addChargeItem"
     />
-
+    <!-- 添加材料组 -->
+    <OtherChargeGroupModal
+      v-model:show="showAddGroupModal"
+      :work-order-data="props.workOrderData || []"
+      :service-name="props.serviceName"
+      @add="addChargeItem"
+    />
     <!-- 收据弹窗 -->
     <ReceiptModal ref="printRef" @close="emit('closeOperation')" />
     <!-- 二维码支付弹窗 -->

package/src/components/data/OtherCharge/OtherChargeGroupModal.vue

@@ -0,0 +1,542 @@
+<script setup lang="ts">
+// 组件依赖：API 调用工具与 Vant 组件
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import {
+  showFailToast,
+  showToast,
+  Button as VanButton,
+  Field as VanField,
+  Icon as VanIcon,
+  Loading as VanLoading,
+  Picker as VanPicker,
+  Popup as VanPopup,
+} from 'vant'
+import { computed, reactive, ref, watch } from 'vue'
+
+// 工单信息接口定义
+interface WorkOrderOption {
+  text: string
+  value?: string
+  workflowId?: string
+}
+
+// 材料组接口定义
+interface MaterialGroupItem {
+  value: string
+  label: string
+}
+
+// 表单数据接口定义
+interface FormData {
+  workOrderId: string
+  workOrderCode: string
+  groupId: string
+  groupName: string
+}
+
+// 组件属性定义：控制弹窗显示、工单数据与服务名
+const props = defineProps<{
+  show: boolean
+  workOrderData: WorkOrderOption[]
+  serviceName?: string
+}>()
+
+// 组件事件定义：同步 show 状态与新增收费项
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+  (e: 'add', item: {
+    id: number
+    type: string
+    item: string
+    model: string
+    unitPrice: number
+    quantity: number
+    total: string
+    workOrderCode: string
+    workOrderId: string
+  }): void
+}>()
+
+// 计算属性：双向绑定弹窗显隐
+const showModal = computed({
+  get: () => props.show,
+  set: value => emit('update:show', value),
+})
+
+// 计算属性：确定服务名称（优先使用外部传入）
+const serviceAppName = computed(() => props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME)
+
+// 全局变量：用于记录当前选中的工单详细信息
+const selectedWorkOrder = ref<WorkOrderOption | null>(null)
+
+// 表单状态：记录选择的工单与材料组
+const formData = reactive<FormData>({
+  workOrderId: '',
+  workOrderCode: '',
+  groupId: '',
+  groupName: '',
+})
+
+// 控制选择器显示状态
+const showWorkOrderSelector = ref(false)
+const showGroupSelector = ref(false)
+
+// 加载状态与提示文案
+const loading = ref(false)
+const materialGroups = ref<MaterialGroupItem[]>([])
+const materials = ref<any[]>([])
+const groupMessage = ref('')
+const materialMessage = ref('')
+const initializing = ref(false)
+
+// 工单下拉选项（仅保留合法 workflowId/value）
+const workOrderOptions = computed(() => {
+  return (props.workOrderData || []).map(order => ({
+    text: order.text || order.workflowId || order.value || '未命名工单',
+    value: order.workflowId || order.value || '',
+  })).filter(option => option.value)
+})
+
+// 材料组选项
+const groupOptions = computed(() => materialGroups.value.map(group => ({
+  text: group.label,
+  value: group.value,
+})))
+
+// 顶部提示信息：优先展示材料组提示，其次材料提示
+const headerMessage = computed(() => {
+  if (groupMessage.value)
+    return groupMessage.value
+  if (materialMessage.value)
+    return materialMessage.value
+  return ''
+})
+
+// 提交按钮可用状态：需选择材料组并成功获取材料
+const canSubmit = computed(() => Boolean(formData.groupId && materials.value.length > 0 && !loading.value))
+
+// 关闭弹窗并重置数据
+function closeModal() {
+  showModal.value = false
+  resetForm()
+}
+
+// 重置所有状态数据
+function resetForm() {
+  formData.workOrderId = ''
+  formData.workOrderCode = ''
+  formData.groupId = ''
+  formData.groupName = ''
+  materialGroups.value = []
+  materials.value = []
+  groupMessage.value = ''
+  materialMessage.value = ''
+  showWorkOrderSelector.value = false
+  showGroupSelector.value = false
+  selectedWorkOrder.value = null
+}
+
+// 根据 workflowId 定位工单
+function getSelectedWorkOrder(workflowId: string) {
+  return (props.workOrderData || []).find(order => (order.workflowId || order.value) === workflowId)
+}
+
+// 选择工单后更新表单并查询材料组
+function onWorkOrderSelected({ selectedValues }: { selectedValues: string[] }) {
+  const workflowId = selectedValues[0]
+  const selected = getSelectedWorkOrder(workflowId) || null
+  selectedWorkOrder.value = selected
+  formData.workOrderId = workflowId
+  formData.workOrderCode = selected?.text || '未命名工单'
+  showWorkOrderSelector.value = false
+  fetchMaterialGroups(workflowId, true)
+}
+
+// 选择材料组后更新表单并查询材料
+function onGroupSelected({ selectedValues }: { selectedValues: string[] }) {
+  const selectedGroupId = selectedValues[0]
+  const selectedGroup = materialGroups.value.find(group => group.value === selectedGroupId)
+  if (selectedGroup) {
+    formData.groupId = selectedGroup.value
+    formData.groupName = selectedGroup.label
+  }
+  showGroupSelector.value = false
+  materialMessage.value = ''
+  materials.value = []
+  if (formData.groupId) {
+    fetchMaterialsByGroup(formData.groupId)
+  }
+}
+
+// 根据工单查询材料组，可选择自动选中第一个材料组
+async function fetchMaterialGroups(workflowId: string, autoSelectFirstGroup = false) {
+  if (!workflowId) {
+    groupMessage.value = '请选择工单后再获取材料组'
+    return
+  }
+  loading.value = true
+  groupMessage.value = ''
+  materialMessage.value = ''
+  materialGroups.value = []
+  materials.value = []
+  formData.groupId = ''
+  formData.groupName = ''
+
+  try {
+    const res = await runLogic('getMaterialGroup', {
+      workflowId,
+    }, serviceAppName.value)
+    const groups = Array.isArray(res)
+      ? res.map((item: any) => ({
+          value: item.value || item.id || '',
+          label: item.name || item.label || '未命名材料组',
+        })).filter((group: MaterialGroupItem) => group.value)
+      : []
+
+    materialGroups.value = groups
+    if (!groups.length) {
+      groupMessage.value = '当前工单暂无可用材料组'
+    }
+    else if (autoSelectFirstGroup) {
+      const [firstGroup] = groups
+      formData.groupId = firstGroup.value
+      formData.groupName = firstGroup.label
+      await fetchMaterialsByGroup(firstGroup.value)
+    }
+  }
+  catch (error) {
+    console.error('获取材料组失败:', error)
+    showFailToast('获取材料组失败')
+    groupMessage.value = '获取材料组失败，请稍后重试'
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 根据材料组查询材料清单
+async function fetchMaterialsByGroup(groupId: string) {
+  if (!groupId)
+    return
+  loading.value = true
+  materialMessage.value = ''
+  materials.value = []
+  try {
+    const res = await runLogic('getMaterialByGroup', {
+      id: groupId,
+    }, serviceAppName.value)
+
+    if (Array.isArray(res) && res.length > 0) {
+      materials.value = res
+    }
+    else {
+      materialMessage.value = '该材料组暂无材料'
+    }
+  }
+  catch (error) {
+    console.error('获取材料列表失败:', error)
+    showFailToast('获取材料列表失败')
+    materialMessage.value = '获取材料失败，请稍后再试'
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 点击添加按钮时校验并返回材料数据
+async function handleSubmit() {
+  if (!formData.workOrderId) {
+    showToast('请选择工单')
+    return
+  }
+  if (!formData.groupId) {
+    showToast('请选择材料组')
+    return
+  }
+  if (!materials.value.length) {
+    showToast('该材料组暂无材料，无法添加')
+    return
+  }
+
+  try {
+    materials.value.forEach((material, index) => {
+      const unitPrice = Number.parseFloat(material.price ?? '0') || 0
+      const quantity = Number.parseFloat(material.count ?? '1') || 1
+      const total = (unitPrice * quantity).toFixed(2)
+
+      emit('add', {
+        id: Date.now() + index,
+        item: material.name || '未知材料',
+        type: material.type || '未分类',
+        model: material.model || '型号未知',
+        unitPrice,
+        quantity,
+        total,
+        workOrderId: formData.workOrderId,
+        workOrderCode: formData.workOrderCode,
+      })
+    })
+    showToast(`成功添加${materials.value.length}项材料`)
+    closeModal()
+  }
+  catch (error) {
+    console.error('提交材料失败:', error)
+    showFailToast('添加材料失败')
+  }
+}
+
+// 初始化默认选择：自动选择首个工单与材料组
+async function initDefaultSelections() {
+  if (formData.workOrderId || initializing.value)
+    return
+  if (!workOrderOptions.value.length)
+    return
+  initializing.value = true
+  try {
+    const firstOrderOption = workOrderOptions.value[0]
+    const firstOrder = getSelectedWorkOrder(firstOrderOption.value) || null
+    selectedWorkOrder.value = firstOrder
+    formData.workOrderId = firstOrderOption.value
+    formData.workOrderCode = firstOrderOption.text
+    await fetchMaterialGroups(firstOrderOption.value, true)
+  }
+  finally {
+    initializing.value = false
+  }
+}
+
+// 监听弹窗显示状态，打开时尝试进行默认选择
+watch(() => props.show, (visible) => {
+  if (visible) {
+    initDefaultSelections()
+  }
+  else {
+    resetForm()
+  }
+})
+
+// 监听工单数据变化，必要时重新初始化
+watch(() => props.workOrderData, () => {
+  if (showModal.value && !formData.workOrderId) {
+    initDefaultSelections()
+  }
+}, { deep: true })
+</script>
+
+<template>
+  <!-- 材料组选择弹窗容器 -->
+  <VanPopup
+    v-model:show="showModal"
+    round
+    position="center"
+    :style="{ width: '90%', maxWidth: '420px' }"
+    close-icon-position="top-right"
+    class="other-charge-group-modal"
+  >
+    <!-- 主内容区域 -->
+    <div class="other-charge-group-modal__container">
+      <!-- 弹窗加载遮罩 -->
+      <div v-if="loading" class="other-charge-group-modal__loading-mask">
+        <VanLoading size="24px">
+          加载中...
+        </VanLoading>
+      </div>
+      <!-- 弹窗标题区域 -->
+      <div class="other-charge-group-modal__header">
+        <h3 class="other-charge-group-modal__title">
+          选择材料组
+        </h3>
+        <VanIcon name="cross" @click="closeModal" />
+      </div>
+      <!-- 顶部提示信息 -->
+      <p v-if="headerMessage" class="other-charge-group-modal__tip">
+        {{ headerMessage }}
+      </p>
+
+      <!-- 选择表单 -->
+      <form class="other-charge-group-modal__form" @submit.prevent="handleSubmit">
+        <!-- 工单选择 -->
+        <div class="other-charge-group-modal__field">
+          <label class="other-charge-group-modal__label">工单号</label>
+          <VanField
+            v-model="formData.workOrderCode"
+            placeholder="请选择工单"
+            readonly
+            right-icon="arrow-down"
+            :disabled="!workOrderOptions.length"
+            @click="workOrderOptions.length ? showWorkOrderSelector = true : showToast('暂无工单可选')"
+          />
+        </div>
+
+        <!-- 材料组选择 -->
+        <div class="other-charge-group-modal__field">
+          <label class="other-charge-group-modal__label">材料组名称</label>
+          <VanField
+            v-model="formData.groupName"
+            placeholder="请先选择工单"
+            readonly
+            right-icon="arrow-down"
+            :disabled="!formData.workOrderId || !materialGroups.length"
+            @click="formData.workOrderId && materialGroups.length ? showGroupSelector = true : showToast(formData.workOrderId ? '该工单暂无材料组' : '请先选择工单')"
+          />
+        </div>
+
+        <!-- 材料数量提示 -->
+        <p v-if="materials.length" class="other-charge-group-modal__material-count">
+          已获取 {{ materials.length }} 条材料
+        </p>
+
+        <!-- 操作按钮 -->
+        <div class="other-charge-group-modal__buttons">
+          <VanButton
+            plain
+            type="default"
+            size="normal"
+            class="other-charge-group-modal__cancel-btn"
+            @click="closeModal"
+          >
+            取消
+          </VanButton>
+          <VanButton
+            type="primary"
+            size="normal"
+            native-type="submit"
+            class="other-charge-group-modal__confirm-btn"
+            :loading="loading"
+            :disabled="!canSubmit"
+          >
+            添加
+          </VanButton>
+        </div>
+      </form>
+    </div>
+
+    <!-- 工单选择器弹窗 -->
+    <VanPopup
+      v-model:show="showWorkOrderSelector"
+      position="bottom"
+      teleport="#other-charge-form"
+      round
+      destroy-on-close
+    >
+      <VanPicker
+        :columns="workOrderOptions"
+        show-toolbar
+        title="选择工单"
+        @confirm="onWorkOrderSelected"
+        @cancel="showWorkOrderSelector = false"
+      />
+    </VanPopup>
+
+    <!-- 材料组选择器弹窗 -->
+    <VanPopup
+      v-model:show="showGroupSelector"
+      position="bottom"
+      teleport="#other-charge-form"
+      round
+      destroy-on-close
+    >
+      <VanPicker
+        :columns="groupOptions"
+        show-toolbar
+        title="选择材料组"
+        @confirm="onGroupSelected"
+        @cancel="showGroupSelector = false"
+      />
+    </VanPopup>
+  </VanPopup>
+</template>
+
+<style scoped lang="less">
+/* 组件样式：整体结构 */
+.other-charge-group-modal {
+  /* 容器样式，含内边距与定位 */
+  &__container {
+    padding: 16px;
+    position: relative;
+  }
+
+  /* 头部区域布局 */
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  /* 标题样式 */
+  &__title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1f2937;
+    margin: 0;
+  }
+
+  /* 表单输入域样式 */
+  &__form {
+    .van-field {
+      background-color: #f9fafb;
+      border-radius: 6px;
+    }
+  }
+
+  /* 单个字段间距 */
+  &__field {
+    margin-bottom: 16px;
+  }
+
+  /* 字段标题样式 */
+  &__label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 4px;
+  }
+
+  /* 操作按钮区域 */
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+    gap: 12px;
+  }
+
+  /* 取消按钮样式 */
+  &__cancel-btn {
+    border-color: #d1d5db;
+    color: #374151;
+  }
+
+  /* 确认按钮样式 */
+  &__confirm-btn {
+    background-color: #2563eb;
+  }
+
+  /* 加载遮罩样式 */
+  &__loading-mask {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(255, 255, 255, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    border-radius: 12px;
+  }
+
+  /* 顶部提示文字 */
+  &__tip {
+    margin: 8px 0 0 0;
+    font-size: 13px;
+    color: #ef4444;
+  }
+
+  /* 材料数量提示 */
+  &__material-count {
+    font-size: 13px;
+    color: #10b981;
+    margin: 0 0 12px 0;
+  }
+}
+</style>

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

@@ -188,4 +188,4 @@ export interface PolygonLayerConfig {
   onClick?: (polygon: PolygonData, event: any) => void
   /** 多边形数据提供者 */
   dataProvider?: () => PolygonData[] | Promise<PolygonData[]>
-}
+}

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

@@ -8,21 +8,22 @@ const router = useRouter()
 const loading = ref(false)
 
 const workOrderData = ref([])
+const serviceName = ref('af-telephone')
 
 const userinfo = {
   f_workflow_id: '1',
-  f_userinfo_id: '1',
-  f_userinfo_code: '1',
-  f_user_name: '1',
-  f_userfiles_id: '1',
-  f_orgid: '1',
+  f_userinfo_id: '88035',
+  f_userinfo_code: '11058442',
+  f_user_name: '苟水平',
+  f_userfiles_id: '91063',
+  f_orgid: '37710',
 }
 function backList() {
   router.back()
 }
 onMounted(() => {
   console.log('userinfo', userinfo)
-  workOrderData.value = [{ text: '1', value: '1' }, { text: '2', value: '2' }]
+  workOrderData.value = [{ text: '2025111300305', value: '308', workflowId: '4653' }, { text: '2025111300288', value: '291', workflowId: '4636' }]
   loading.value = true
 })
 </script>
@@ -32,6 +33,8 @@ onMounted(() => {
     v-if="loading"
     :user="userinfo"
     :is-work-order="true"
+    :show-group="true"
+    :service-name="serviceName"
     :work-order-data="workOrderData"
     @close-operation="backList"
   />

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

@@ -13,7 +13,83 @@ const router = useRouter()
 
 // 简易crud表单测试
 const configName = ref('ceshiCRUD')
-const serviceName = ref('af-linepatrol')
+const serviceName = ref('af-safecheck')
+
+// 资源权限测试
+// 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 fixQueryForm = ref({
+//   f_operator_id: '487184754014158848',
+// })
 </script>
 
 <template>
@@ -21,6 +97,7 @@ const serviceName = ref('af-linepatrol')
     <template #layout_content>
       <XCellList
         :config-name="configName"
+        :service-name="serviceName"
       />
     </template>
   </NormalDataLayout>

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

@@ -28,6 +28,7 @@ function onSubmit(data: any) {
         ref="formGroupAddConstruction"
         mode="修改"
         :config-name="configName"
+        :service-name="serviceName"
         :form-data="formData"
         @on-submit="onSubmit"
       />

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

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
-import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { showNotify } from 'vant'
-import { ref } from 'vue'
-
-const selectedLocation = ref<LocationResult>()
-
-// 处理位置选择
-function handleLocationConfirm(location: LocationResult) {
-  // console.log('选择的位置:', location)
-  // selectedLocation.value = location
-  showNotify({ type: 'success', message: '位置已选择' })
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
-    <template #layout_content>
-      <div class="location-picker-demo">
-        <!-- 页面标题 -->
-        <div class="page-header">
-          <div class="title">
-            位置选择
-          </div>
-        </div>
-
-        <!-- 选择结果展示 -->
-        <div v-if="selectedLocation" class="location-result">
-          <div class="label">
-            已选位置:
-          </div>
-          <div class="value">
-            {{ selectedLocation.address }}
-          </div>
-          <div class="coordinates">
-            经度: {{ selectedLocation.longitude.toFixed(6) }},
-            纬度: {{ selectedLocation.latitude.toFixed(6) }}
-          </div>
-        </div>
-
-        <!-- 地图组件 -->
-        <div class="map-container">
-          <LocationPicker
-            v-model="selectedLocation"
-            :default-center="[108.948024, 34.263161]"
-            :default-zoom="12"
-            @confirm="handleLocationConfirm"
-          />
-        </div>
-      </div>
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped lang="less">
-.location-picker-demo {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: #f7f8fa;
-}
-
-.page-header {
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  position: relative;
-  z-index: 1;
-
-  .title {
-    font-size: 16px;
-    color: #333;
-    font-weight: 500;
-  }
-}
-
-.location-result {
-  background: white;
-  padding: 12px 16px;
-  margin: 10px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-  .label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 4px;
-  }
-
-  .value {
-    font-size: 16px;
-    color: #333;
-    margin-bottom: 8px;
-    word-break: break-all;
-  }
-
-  .coordinates {
-    font-size: 12px;
-    color: #999;
-  }
-}
-
-.map-container {
-  flex: 1;
-  position: relative;
-  margin: 0 10px 10px 10px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>
+<script setup lang="ts">
+import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { showNotify } from 'vant'
+import { ref } from 'vue'
+
+const selectedLocation = ref<LocationResult>()
+
+// 处理位置选择
+function handleLocationConfirm(location: LocationResult) {
+  // console.log('选择的位置:', location)
+  // selectedLocation.value = location
+  showNotify({ type: 'success', message: '位置已选择' })
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
+    <template #layout_content>
+      <div class="location-picker-demo">
+        <!-- 页面标题 -->
+        <div class="page-header">
+          <div class="title">
+            位置选择
+          </div>
+        </div>
+
+        <!-- 选择结果展示 -->
+        <div v-if="selectedLocation" class="location-result">
+          <div class="label">
+            已选位置:
+          </div>
+          <div class="value">
+            {{ selectedLocation.address }}
+          </div>
+          <div class="coordinates">
+            经度: {{ selectedLocation.longitude.toFixed(6) }},
+            纬度: {{ selectedLocation.latitude.toFixed(6) }}
+          </div>
+        </div>
+
+        <!-- 地图组件 -->
+        <div class="map-container">
+          <LocationPicker
+            v-model="selectedLocation"
+            :default-center="[108.948024, 34.263161]"
+            :default-zoom="12"
+            @confirm="handleLocationConfirm"
+          />
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.location-picker-demo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: #f7f8fa;
+}
+
+.page-header {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
+
+  .title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.location-result {
+  background: white;
+  padding: 12px 16px;
+  margin: 10px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  .label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .value {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .coordinates {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.map-container {
+  flex: 1;
+  position: relative;
+  margin: 0 10px 10px 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>