af-mobile-client-vue3 1.3.96 → 1.3.98

package/package.json

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

package/src/components/core/ImageUploader/index.vue

@@ -225,7 +225,7 @@ function handlePhotoUpload(photoData: any) {
     f_operator: 'server',
     imgPath: photoData.filePath,
     urlPath: `/api/${import.meta.env.VITE_APP_SYSTEM_NAME}/resource/upload`,
-    commonId: parentData.commonId.value ?? '',
+    commonId: parentData?.commonId?.value ?? '',
   }
   if (props.isAsyncUpload) {
     // 添加上传队列

package/src/components/core/XMultiSelect/index.vue

@@ -34,6 +34,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  lazyLoad: { // 是否启用懒加载
+    type: String,
+    default: 'false',
+  },
+  onSearch: { // 懒加载时的搜索函数
+    type: Function,
+    default: null,
+  },
 })
 const emits = defineEmits(['input', 'confirm', 'change', 'cancel'])
 const show = ref(false)
@@ -44,7 +52,24 @@ const checkedAll = ref(false)
 const resultValue = defineModel()
 const checkboxGroup = ref()
 const checkboxes = ref()
+const isLoading = ref(false)
 function search(val) {
+  // 如果是懒加载模式
+  if (props.lazyLoad && props.lazyLoad === 'true' && props.onSearch) {
+    isLoading.value = true
+    // 调用父组件传递的搜索函数
+    props.onSearch(val).then((results) => {
+      columnsData.value = results || []
+      isLoading.value = false
+    }).catch((error) => {
+      console.error('懒加载搜索失败:', error)
+      columnsData.value = []
+      isLoading.value = false
+    })
+    return
+  }
+
+  // 普通搜索模式
   if (val) {
     columnsData.value = props.columns.filter((item) => {
       return item[props.option.text].includes(val)
@@ -140,7 +165,12 @@ const resultLabel = computed(() => {
           @update:model-value="search"
           @cancel="search"
         />
-        <div class="x-multi-select-checkbox-group">
+        <div v-if="isLoading" class="loading-container">
+          <div class="loading-text">
+            搜索中...
+          </div>
+        </div>
+        <div v-else class="x-multi-select-checkbox-group">
           <VanCell title="全选">
             <template #right-icon>
               <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
@@ -185,6 +215,16 @@ const resultLabel = computed(() => {
       padding: 0 16px;
     }
   }
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+  }
+  .loading-text {
+    color: #969799;
+    font-size: 14px;
+  }
   //.van-popup {
   //  border-radius: 20px 20px 0 0;
   //}

package/src/components/core/XSelect/index.vue

@@ -3,6 +3,7 @@ import {
   Field as VanField,
   Picker as VanPicker,
   Popup as VanPopup,
+  Search as VanSearch,
 } from 'vant'
 import { computed, defineEmits, defineModel, defineProps, onBeforeMount, ref, watch } from 'vue'
 
@@ -19,10 +20,6 @@ const props = defineProps({
       return { text: 'label', value: 'value', children: 'children' }
     },
   },
-  isSearch: {
-    type: Boolean,
-    default: false,
-  },
   offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
     type: Boolean,
     default: false,
@@ -31,13 +28,23 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  lazyLoad: { // 是否启用懒加载
+    type: String,
+    default: 'false',
+  },
+  onSearch: { // 懒加载时的搜索函数
+    type: Function,
+    default: null,
+  },
 })
 const emits = defineEmits(['confirm', 'change', 'cancel', 'input'])
 const show = ref(false)
-const searchVal = ref('')
 const resultValue = defineModel()
 const columnsData = ref([])
 const selectedOption = ref([])
+const searchValue = ref('')
+const filteredColumns = ref([])
+const isLoading = ref(false)
 
 // 转换空children为空字符串
 function transformColumns(data) {
@@ -57,8 +64,68 @@ function transformColumns(data) {
   })
 }
 
+// 搜索过滤函数
+function handleSearch(value) {
+  // 确保 value 是字符串
+  const searchText = typeof value === 'string' ? value : value?.target?.value || ''
+  searchValue.value = searchText
+
+  // 如果是懒加载模式
+  if (props.lazyLoad && props.lazyLoad === 'true' && props.onSearch) {
+    if (!searchText) {
+      filteredColumns.value = []
+      return
+    }
+
+    isLoading.value = true
+    // 调用父组件传递的搜索函数
+    props.onSearch(searchText).then((results) => {
+      filteredColumns.value = transformColumns(results || [])
+      isLoading.value = false
+    }).catch((error) => {
+      console.error('懒加载搜索失败:', error)
+      filteredColumns.value = []
+      isLoading.value = false
+    })
+    return
+  }
+
+  // 普通搜索模式
+  if (!searchText) {
+    filteredColumns.value = columnsData.value
+    return
+  }
+
+  const searchTextLower = searchText.toLowerCase()
+
+  filteredColumns.value = columnsData.value.filter((item) => {
+    const text = props.offOption ? item : item[props.option.text]
+    return text?.toString().toLowerCase().includes(searchTextLower)
+  })
+}
+
+// 清空搜索
+function handleSearchClear() {
+  searchValue.value = ''
+  if (props.lazyLoad) {
+    // 懒加载模式：清空搜索时重新获取初始数据
+    if (props.onSearch) {
+      props.onSearch('').then((results) => {
+        filteredColumns.value = transformColumns(results || [])
+      }).catch((error) => {
+        console.error('清空搜索后数据加载失败:', error)
+        filteredColumns.value = []
+      })
+    }
+  }
+  else {
+    filteredColumns.value = columnsData.value
+  }
+}
+
 onBeforeMount(() => {
   columnsData.value = transformColumns(props.columns)
+  filteredColumns.value = columnsData.value
 })
 
 const resultLabel = computed({
@@ -76,18 +143,6 @@ const resultLabel = computed({
   },
 })
 
-function search(val) {
-  if (val) {
-    columnsData.value = transformColumns(columnsData.value).filter((item) => {
-      const data = props.offOption ? item : item[props.option.text]
-      return data.includes(val)
-    })
-  }
-  else {
-    columnsData.value = transformColumns(props.columns)
-  }
-}
-
 function onConfirm(value, _index) {
   resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
   // resultValue.value = value.selectedValues
@@ -109,14 +164,23 @@ function showPopu(disabled) {
   if (disabled !== undefined && disabled !== false)
     return false
   columnsData.value = transformColumns(props.columns)
+  filteredColumns.value = columnsData.value
+  searchValue.value = '' // 重置搜索
   show.value = !show.value
 }
 
 watch(() => resultValue, (newVal, _oldVal) => {
-  searchVal.value = ''
   columnsData.value = transformColumns(props.columns)
+  filteredColumns.value = columnsData.value
   emits('input', newVal)
 })
+
+// 监听 columns 变化
+watch(() => props.columns, () => {
+  columnsData.value = transformColumns(props.columns)
+  filteredColumns.value = columnsData.value
+  searchValue.value = ''
+}, { deep: true })
 </script>
 
 <template>
@@ -129,20 +193,46 @@ watch(() => resultValue, (newVal, _oldVal) => {
     @click="showPopu($attrs.readonly)"
   />
   <VanPopup v-model:show="show" position="bottom">
-    <VanField v-if="props.isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search" />
-    <VanPicker
-      v-bind="$attrs"
-      :columns="columnsData"
-      :columns-field-names="props.option"
-      show-toolbar
-      :value-key="props.option.text"
-      @cancel="cancel"
-      @confirm="onConfirm"
-      @change="change"
-    />
+    <div class="x-select-popup">
+      <!-- 搜索框 -->
+      <VanSearch
+        v-model="searchValue"
+        placeholder="搜索"
+        @clear="handleSearchClear"
+        @input="handleSearch"
+      />
+
+      <!-- 选择器 -->
+      <div v-if="isLoading" class="loading-container">
+        <div class="loading-text">
+          搜索中...
+        </div>
+      </div>
+      <VanPicker
+        v-else
+        v-bind="$attrs"
+        :columns="filteredColumns"
+        :columns-field-names="props.option"
+        show-toolbar
+        :value-key="props.option.text"
+        @cancel="cancel"
+        @confirm="onConfirm"
+        @change="change"
+      />
+    </div>
   </VanPopup>
 </template>
 
 <style scoped>
-/* 样式定义 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.loading-text {
+  color: #969799;
+  font-size: 14px;
+}
 </style>

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

@@ -169,6 +169,8 @@ const showArea = ref(false)
 const errorMessage = ref('')
 const showTreeSelect = ref(false)
 const treeValue = ref('')
+// 懒加载 最后检索版本
+const lastFetchId = ref(0)
 
 // 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
 const userState = useUserStore().getLogin()
@@ -917,6 +919,106 @@ function findOptionInTree(options, value) {
   return null
 }
 
+// 懒加载搜索函数
+async function handleLazySearch(searchText: string) {
+  if (!attr.keyName || typeof attr.keyName !== 'string') {
+    return []
+  }
+
+  try {
+    // 如果是 search@ 类型的数据源
+    if (attr.keyName.includes('search@')) {
+      let source = attr.keyName.substring(7)
+      const userid = currUser.value
+      let roleName = 'roleName'
+
+      if (source.startsWith('根据角色[') && source.endsWith(']获取人员')) {
+        const startIndex = source.indexOf('[') + 1
+        const endIndex = source.indexOf(']', startIndex)
+        roleName = source.substring(startIndex, endIndex)
+        source = '根据角色获取人员'
+      }
+
+      const searchData = {
+        source,
+        userid,
+        roleName,
+        searchText, // 添加搜索关键词
+      }
+
+      return new Promise((resolve) => {
+        if (attr.type === 'select' || attr.type === 'checkbox') {
+          searchToListOption(searchData, (res) => {
+            // 根据搜索关键词过滤结果
+            const filtered = res.filter((item) => {
+              const text = item[columnsField.value.text] || item.label || ''
+              return text.toString().toLowerCase().includes(searchText.toLowerCase())
+            })
+            resolve(filtered)
+          })
+        }
+        else {
+          searchToOption(searchData, (res) => {
+            const filtered = res.filter((item) => {
+              const text = item[columnsField.value.text] || item.label || ''
+              return text.toString().toLowerCase().includes(searchText.toLowerCase())
+            })
+            resolve(filtered)
+          })
+        }
+      })
+    }
+
+    // logic 数据源
+    if (attr.keyName.includes('logic@')) {
+      const logicName = attr.keyName.substring(6)
+      const value = { word: searchText, ...userInfo.value }
+
+      // 调用logic前设置参数
+      if (getDataParams && getDataParams[attr.model]) {
+        Object.assign(value, getDataParams[attr.model])
+      }
+
+      lastFetchId.value++
+      const fetchId = this.lastFetchId
+      // 根据搜索关键词过滤结果
+      const results = await runLogic(logicName, value, serviceName) as any
+      if (fetchId !== lastFetchId.value) {
+        return
+      }
+      if (searchText) {
+        return results.filter((item) => {
+          const text = item[columnsField.value.text] || item.label || ''
+          return text.toString().toLowerCase().includes(searchText.toLowerCase())
+        })
+      }
+      return results
+    }
+
+    // 自定义 js 函数
+    if (attr.keyName.includes('async ') || attr.keyName.includes('function ')) {
+      const results = await executeStrFunctionByContext(currInst, attr.keyName, [
+        { ...props.form, searchText },
+        runLogic,
+        props.mode,
+        getConfigByNameAsync,
+        post,
+      ])
+      // 根据搜索关键词过滤结果
+      return results.filter((item) => {
+        const text = item[columnsField.value.text] || item.label || ''
+        return text.toString().toLowerCase().includes(searchText.toLowerCase())
+      })
+    }
+
+    return []
+  }
+  catch (error) {
+    console.error('懒加载搜索失败:', error)
+    return []
+  }
+}
+
 // 扫码/NFC
 function scanCodeOrNfc(attr) {
   if (attr.type === 'scanCode') {
@@ -1015,7 +1117,7 @@ function scanCodeOrNfc(attr) {
       </VanField>
       <!--   下拉   -->
       <XMultiSelect
-        v-if="attr.showMode === 'select' && mode === '查询'"
+        v-if="(!attr.showMode || attr.showMode === 'select') && mode === '查询'"
         v-model="modelData"
         :label="labelData"
         :readonly="readonly"
@@ -1025,6 +1127,8 @@ function scanCodeOrNfc(attr) {
         :option="attr.option ? attr.option : columnsField"
         :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
         :required="attr.rule.required === 'true'"
+        :lazy-load="attr.lazyLoad"
+        :on-search="attr.lazyLoad ? handleLazySearch : null"
       />
     </template>
 
@@ -1329,6 +1433,8 @@ function scanCodeOrNfc(attr) {
       :option="attr.option ? attr.option : columnsField"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
       :required="attr.rule.required === 'true'"
+      :lazy-load="attr.lazyLoad"
+      :on-search="attr.lazyLoad ? handleLazySearch : null"
     />
 
     <!-- 文本区域 -->

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/XCellListView/index.vue

@@ -12,7 +12,7 @@ const router = useRouter()
 // const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('temporarySecurityCheckCRUD')
+const configName = ref('ceshiCRUD')
 const serviceName = ref('af-safecheck')
 
 // 资源权限测试
@@ -90,14 +90,6 @@ const serviceName = ref('af-safecheck')
 // const fixQueryForm = ref({
 //   f_operator_id: '487184754014158848',
 // })
-function phone(row: any) {
-  console.log('>>>> phone')
-}
-
-function mapView() {
-  // 进行地图查看
-  console.log('等待你处理地图查看事件')
-}
 </script>
 
 <template>
@@ -106,8 +98,6 @@ function mapView() {
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
-        @phone="phone"
-        @map-marked="mapView"
       />
     </template>
   </NormalDataLayout>

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>