af-mobile-client-vue3 1.3.96 → 1.3.97

package/package.json

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

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

@@ -1,148 +1,238 @@
-<script setup lang="ts">
-import {
-  Field as VanField,
-  Picker as VanPicker,
-  Popup as VanPopup,
-} from 'vant'
-import { computed, defineEmits, defineModel, defineProps, onBeforeMount, ref, watch } from 'vue'
-
-const props = defineProps({
-  columns: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  option: {
-    type: Object,
-    default() {
-      return { text: 'label', value: 'value', children: 'children' }
-    },
-  },
-  isSearch: {
-    type: Boolean,
-    default: false,
-  },
-  offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
-    type: Boolean,
-    default: false,
-  },
-  border: { // 是否展示边框
-    type: Boolean,
-    default: false,
-  },
-})
-const emits = defineEmits(['confirm', 'change', 'cancel', 'input'])
-const show = ref(false)
-const searchVal = ref('')
-const resultValue = defineModel()
-const columnsData = ref([])
-const selectedOption = ref([])
-
-// 转换空children为空字符串
-function transformColumns(data) {
-  return data.map((item) => {
-    if (item.children && item.children.length === 0) {
-      return {
-        ...item,
-        children: '',
-      }
-    }
-    else if (item.children && item.children.length !== 0) {
-      return { ...item, children: transformColumns(item.children) }
-    }
-    else {
-      return { ...item }
-    }
-  })
-}
-
-onBeforeMount(() => {
-  columnsData.value = transformColumns(props.columns)
-})
-
-const resultLabel = computed({
-  get() {
-    if (!resultValue.value)
-      return ''
-    const res = props.columns.filter((item) => {
-      const data = props.offOption ? item : item[props.option.value]
-      return data === resultValue.value
-    })
-    return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
-  },
-  set() {
-
-  },
-})
-
-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
-  selectedOption.value = value.selectedOptions
-  show.value = !show.value
-  emits('confirm', value.selectedValues[0], value.selectedOptions)
-}
-
-function change(val, index) {
-  emits('change', val, index, resultValue.value)
-}
-
-function cancel(val, index) {
-  show.value = !show.value
-  emits('cancel', val, index, resultValue.value)
-}
-
-function showPopu(disabled) {
-  if (disabled !== undefined && disabled !== false)
-    return false
-  columnsData.value = transformColumns(props.columns)
-  show.value = !show.value
-}
-
-watch(() => resultValue, (newVal, _oldVal) => {
-  searchVal.value = ''
-  columnsData.value = transformColumns(props.columns)
-  emits('input', newVal)
-})
-</script>
-
-<template>
-  <VanField
-    v-model="resultLabel"
-    v-bind="$attrs"
-    readonly
-    :is-link="true"
-    :border="props.border"
-    @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"
-    />
-  </VanPopup>
-</template>
-
-<style scoped>
-/* 样式定义 */
-</style>
+<script setup lang="ts">
+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'
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  option: {
+    type: Object,
+    default() {
+      return { text: 'label', value: 'value', children: 'children' }
+    },
+  },
+  offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
+    type: Boolean,
+    default: false,
+  },
+  border: { // 是否展示边框
+    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 resultValue = defineModel()
+const columnsData = ref([])
+const selectedOption = ref([])
+const searchValue = ref('')
+const filteredColumns = ref([])
+const isLoading = ref(false)
+
+// 转换空children为空字符串
+function transformColumns(data) {
+  return data.map((item) => {
+    if (item.children && item.children.length === 0) {
+      return {
+        ...item,
+        children: '',
+      }
+    }
+    else if (item.children && item.children.length !== 0) {
+      return { ...item, children: transformColumns(item.children) }
+    }
+    else {
+      return { ...item }
+    }
+  })
+}
+
+// 搜索过滤函数
+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({
+  get() {
+    if (!resultValue.value)
+      return ''
+    const res = props.columns.filter((item) => {
+      const data = props.offOption ? item : item[props.option.value]
+      return data === resultValue.value
+    })
+    return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
+  },
+  set() {
+
+  },
+})
+
+function onConfirm(value, _index) {
+  resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
+  // resultValue.value = value.selectedValues
+  selectedOption.value = value.selectedOptions
+  show.value = !show.value
+  emits('confirm', value.selectedValues[0], value.selectedOptions)
+}
+
+function change(val, index) {
+  emits('change', val, index, resultValue.value)
+}
+
+function cancel(val, index) {
+  show.value = !show.value
+  emits('cancel', val, index, resultValue.value)
+}
+
+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) => {
+  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>
+  <VanField
+    v-model="resultLabel"
+    v-bind="$attrs"
+    readonly
+    :is-link="true"
+    :border="props.border"
+    @click="showPopu($attrs.readonly)"
+  />
+  <VanPopup v-model:show="show" position="bottom">
+    <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('')
+// 懒加载 最后检索版本
+let 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/views/component/XCellListView/index.vue

@@ -12,92 +12,8 @@ const router = useRouter()
 // const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('temporarySecurityCheckCRUD')
-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',
-// })
-function phone(row: any) {
-  console.log('>>>> phone')
-}
-
-function mapView() {
-  // 进行地图查看
-  console.log('等待你处理地图查看事件')
-}
+const configName = ref('ceshiCRUD')
+const serviceName = ref('af-linepatrol')
 </script>
 
 <template>
@@ -106,8 +22,6 @@ function mapView() {
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
-        @phone="phone"
-        @map-marked="mapView"
       />
     </template>
   </NormalDataLayout>