af-mobile-client-vue3 1.0.95 → 1.0.97

package/src/components/data/XCellList/XCellList.md

@@ -36,26 +36,36 @@
 ### 基础列表
 
 ```vue
+<script setup lang="ts">
+const serviceName = 'userService'
+
+function handleDetail(item) {
+  // 处理详情点击
+}
+</script>
+
 <template>
   <XCellList
-    config-name="listConfig" 
+    config-name="listConfig"
     :service-name="serviceName"
     @to-detail="handleDetail"
   />
 </template>
+```
+
+### 带筛选的表单
 
+```vue
 <script setup lang="ts">
+const configName = 'searchForm'
 const serviceName = 'userService'
+const formData = ref({})
 
-const handleDetail = (item) => {
-  // 处理详情点击
+function handleSubmit(data) {
+  console.log('表单提交:', data)
 }
 </script>
-```
-
-### 带筛选的表单
 
-```vue
 <template>
   <XFormGroup
     :config-name="configName"
@@ -65,16 +75,6 @@ const handleDetail = (item) => {
     @submit="handleSubmit"
   />
 </template>
-
-<script setup lang="ts">
-const configName = 'searchForm'
-const serviceName = 'userService'
-const formData = ref({})
-
-const handleSubmit = (data) => {
-  console.log('表单提交:', data)
-}
-</script>
 ```
 
 ## API 文档
@@ -132,20 +132,20 @@ interface ListConfig {
     // 操作按钮配置
     actionArr?: Array<{
       text: string
-      func: string 
+      func: string
     }>
   }[]
-  
+
   // 按钮状态
   buttonState: {
     add?: boolean
     edit?: boolean
     delete?: boolean
   }
-  
+
   // 是否显示排序
   showSortIcon?: boolean
-  
+
   // 查询表单配置
   formJson: FormItem[]
 }
@@ -157,28 +157,28 @@ interface ListConfig {
 interface FormItem {
   // 表单项类型
   type: 'input' | 'select' | 'date' | 'checkbox' | 'radio' | 'switch' | 'textarea' | 'uploader'
-  
+
   // 字段名
   model: string
-  
+
   // 标签名
   name: string
-  
+
   // 校验规则
   rule?: {
     required: string
     type: 'string' | 'number' | 'integer' | 'float'
   }
-  
+
   // 占位提示
   placeholder?: string
-  
+
   // 数据源配置
   keyName?: string
-  
+
   // 是否只读
   readonly?: boolean
-  
+
   // 是否禁用
   disabled?: boolean
 }

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

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
+import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
+import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
+import { getConfigByName, query } from '@af-mobile-client-vue3/services/api/common'
+import LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
 import {
+  showConfirmDialog,
   BackTop as VanBackTop,
   Button as VanButton,
   Col as VanCol,
@@ -12,12 +16,8 @@ import {
   Search as VanSearch,
   Space as VanSpace,
   Tag as VanTag,
-  showConfirmDialog,
 } from 'vant'
-import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
-import { getConfigByName, query } from '@af-mobile-client-vue3/services/api/common'
-import LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
-import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
+import { computed, defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
@@ -25,11 +25,17 @@ const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
   fixQueryForm?: object
   idKey?: string
   serviceName?: string
+  scanOptions?: {
+    show?: boolean // 是否显示扫码按钮
+    type?: string | string[] // 显示类型：可以是单个类型或类型数组 'nfc' / ['scan', 'nfc']
+    defaultMode?: string // 默认模式
+  }
 }>(), {
   configName: '',
   fixQueryForm: null,
   idKey: 'o_id',
   serviceName: undefined,
+  scanOptions: undefined,
 })
 
 const emit = defineEmits([])
@@ -144,8 +150,13 @@ function initComponent() {
         tagList.value.push(item)
       }
       else if (item.slotType === 'action' && item.actionArr) {
-        for (let j = 0; j < item.actionArr.length; j++)
-          allActions.value.push({ text: item.actionArr[j].text, func: item.actionArr[j].func })
+        for (let j = 0; j < item.actionArr.length; j++) {
+          allActions.value.push({
+            text: item.actionArr[j].text,
+            func: item.actionArr[j].func,
+            customFunction: item.actionArr[j].customFunction,
+          })
+        }
       }
 
       if (item.showTitleBtn)
@@ -258,7 +269,7 @@ function handleFunctionStyle(funcString, param) {
 
     return func(param)
   }
-  catch (error) {
+  catch {
     return {}
   }
 }
@@ -317,6 +328,32 @@ function addOption() {
 function handleButtonClick(btn, item) {
   emit(`${btn.btnIcon}`, item)
 }
+
+// 处理自定义函数
+function evaluateCustomFunction(funcString: string | undefined, record: any, index: number): boolean {
+  try {
+    // 如果 customFunction 不存在，返回 true 表示正常显示
+    if (!funcString || funcString === '')
+      return true
+
+    // 匹配参数名、函数体
+    const innerFuncRegex = /function\s*\((\w+)\s*,\s*(\w+)\)\s*\{([\s\S]*)\}/
+    const matches = funcString.match(innerFuncRegex)
+
+    if (!matches)
+      return true
+
+    const [, param1, param2, functionBody] = matches
+
+    // eslint-disable-next-line no-new-func
+    const func = new Function(param1, param2, functionBody)
+    return func(record, index)
+  }
+  catch (error) {
+    console.error('Error evaluating custom function:', error)
+    return true
+  }
+}
 </script>
 
 <template>
@@ -342,6 +379,7 @@ function handleButtonClick(btn, item) {
           :order-list="orderList"
           :form-query="formQueryList"
           :button-state="buttonState"
+          :scan-options="scanOptions"
           @on-refresh="onRefresh"
           @add-option="addOption"
         />
@@ -457,12 +495,12 @@ function handleButtonClick(btn, item) {
                   <VanPopover
                     v-model:show="showPopover[index]"
                     placement="bottom-start"
-                    :actions="otherActions"
+                    :actions="otherActions.filter(action => evaluateCustomFunction(action.customFunction, item, index))"
                     @select="onSelectMenu(item, $event)"
                   >
                     <template #reference>
                       <div
-                        v-show="otherActions && otherActions.length !== 0"
+                        v-show="otherActions && otherActions.length !== 0 && otherActions.some(action => evaluateCustomFunction(action.customFunction, item, index))"
                         class="more-button"
                       >
                         <span>⋯</span>
@@ -475,6 +513,7 @@ function handleButtonClick(btn, item) {
                     <VanSpace>
                       <VanButton
                         v-for="button in reversedMainActions"
+                        v-show="evaluateCustomFunction(button.customFunction, item, index)"
                         :key="button.func"
                         type="primary"
                         size="small"

package/src/components/data/XCellListFilter/QrScanner/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { Icon as VanIcon } from 'vant'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { startScanAnimation, stopScanAnimation } from './startScanAnimation'
 
 // 扫码框的引用

package/src/components/data/XCellListFilter/VpnRecognition/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Icon as VanIcon } from 'vant'
+import { ref } from 'vue'
 
 defineEmits(['close'])
 
@@ -12,9 +12,9 @@ const isScanning = ref(true)
     <div class="scanner-container">
       <div class="scanner-bg">
         <div class="scan-circle">
-          <VanIcon name="idcard" size="60" color="rgb(59,130,246)"/>
+          <VanIcon name="idcard" size="60" color="rgb(59,130,246)" />
         </div>
-        <div class="scan-ripple" v-if="isScanning" />
+        <div v-if="isScanning" class="scan-ripple" />
         <div class="scan-tip">
           准备读取NFC
         </div>

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

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { defineEmits, defineModel, defineProps, nextTick, ref } from 'vue'
+import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
+import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
 import {
+  showFailToast,
   Button as VanButton,
   Col as VanCol,
   DropdownItem as VanDropdownItem,
   DropdownMenu as VanDropdownMenu,
   Icon as VanIcon,
   Row as VanRow,
-  showFailToast,
 } from 'vant'
-import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
-import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
+import { computed, defineEmits, defineModel, defineProps, ref } from 'vue'
 import QrScanner from './QrScanner/index.vue'
 import VpnRecognition from './VpnRecognition/index.vue'
 
@@ -22,6 +22,11 @@ const props = defineProps<{
   orderList?: any[]
   formQuery?: any[]
   buttonState?: any
+  scanOptions?: {
+    show?: boolean // 是否显示扫码按钮
+    type?: string | string[] // 显示类型：可以是单个类型，也可以是类型数组
+    defaultMode?: string // 默认模式
+  }
 }>()
 
 const emit = defineEmits([
@@ -34,6 +39,34 @@ const emit = defineEmits([
   'onScan',
   'onNFC',
 ])
+
+// 定义扫描模式枚举，便于扩展
+const SCAN_MODES = {
+  SCAN: 'scan', // 扫码模式
+  NFC: 'nfc', // NFC读取模式
+  // 可扩展
+}
+
+// 定义扫描模式配置
+const SCAN_MODE_CONFIGS = {
+  [SCAN_MODES.SCAN]: {
+    icon: 'scan',
+    title: '扫码',
+    component: QrScanner,
+    closeText: '关闭扫描',
+  },
+  [SCAN_MODES.NFC]: {
+    icon: 'wifi',
+    title: 'NFC',
+    component: VpnRecognition,
+    closeText: '关闭读取',
+  },
+  // 可扩展
+}
+
+// 获取所有可用的扫描模式列表
+const AVAILABLE_MODES = Object.keys(SCAN_MODE_CONFIGS)
+
 // 排序字段
 const currentOrderVal = defineModel('orderVal')
 // 排序规则
@@ -53,13 +86,111 @@ const colFieldNames = {
 // 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
 const conditionParams = ref({})
 
-// 视图模式
-const scanType = ref('scan') // 'scan' 或 'nfc'
+// 视图模式 - 当前选中的扫描模式
+const scanType = ref(getDefaultScanType())
 
 const scanMenuShow = ref(false)
 const filterMenuShow = ref(false)
 const showScanner = ref(true)
 
+// 获取默认扫描模式
+function getDefaultScanType() {
+  // 如果指定了默认模式且该模式有效，则使用默认模式
+  if (props.scanOptions?.defaultMode && isModeAvailable(props.scanOptions.defaultMode))
+    return props.scanOptions.defaultMode
+
+  // 确定启用的模式列表
+  const enabledModes = getEnabledModes()
+
+  // 如果有可用模式，使用第一个可用模式
+  if (enabledModes.length > 0)
+    return enabledModes[0]
+
+  // 兜底默认为扫码模式
+  return SCAN_MODES.SCAN
+}
+
+// 获取启用的模式列表
+function getEnabledModes() {
+  // 如果没有指定type，则默认全部可用
+  if (!props.scanOptions?.type)
+    return AVAILABLE_MODES
+
+  // 如果type是字符串，转换为数组处理
+  const typeList = Array.isArray(props.scanOptions.type)
+    ? props.scanOptions.type
+    : [props.scanOptions.type]
+
+  // 过滤出有效的模式
+  return typeList.filter(mode => isModeAvailable(mode))
+}
+
+// 检查模式是否有效
+function isModeAvailable(mode) {
+  return AVAILABLE_MODES.includes(mode)
+}
+
+// 是否显示扫码按钮
+const showScanButton = computed(() => {
+  // 如果没有传递scanOptions，默认不显示
+  if (!props.scanOptions)
+    return false
+
+  // 如果定义了scanOptions.show，优先使用它
+  if (props.scanOptions.show !== undefined)
+    return props.scanOptions.show
+
+  // 其次检查buttonState.scan
+  if (props.buttonState?.scan !== undefined)
+    return props.buttonState.scan !== false
+
+  // 默认不显示
+  return false
+})
+
+// 获取启用的扫描模式列表
+const enabledScanModes = computed(() => getEnabledModes())
+
+// 处理扫码菜单显示
+function handleScanMenuChange(value: boolean) {
+  scanMenuShow.value = value
+  if (value) {
+    filterMenuShow.value = false
+
+    // 确保当前模式在启用列表中
+    if (!enabledScanModes.value.includes(scanType.value))
+      scanType.value = getDefaultScanType()
+
+    // 重新挂载组件
+    showScanner.value = false
+    setTimeout(() => {
+      showScanner.value = true
+    }, 10)
+  }
+  else {
+    showScanner.value = false
+  }
+}
+
+// 切换到指定的扫描模式
+function switchToMode(mode) {
+  // 确保模式有效且已启用
+  if (isModeAvailable(mode) && enabledScanModes.value.includes(mode)) {
+    scanType.value = mode
+    // 重新挂载组件
+    showScanner.value = false
+    setTimeout(() => {
+      showScanner.value = true
+    }, 10)
+    // 发出对应事件
+    if (mode === SCAN_MODES.SCAN)
+      emit('onScan')
+    else if (mode === SCAN_MODES.NFC)
+      emit('onNFC')
+    // 可扩展
+  }
+}
+
 // 重置某个选项
 function resetOptionItem(type) {
   if (conditionParams.value[type] !== undefined)
@@ -106,23 +237,6 @@ function addOption() {
   emit('addOption')
 }
 
-// 处理扫码菜单显示
-function handleScanMenuChange(value: boolean) {
-  scanMenuShow.value = value
-  if (value) {
-    filterMenuShow.value = false
-    scanType.value = 'scan'
-    // 先设为false再设为true,强制重新挂载组件
-    showScanner.value = false
-    setTimeout(() => {
-      showScanner.value = true
-    }, 10)
-  }
-  else {
-    showScanner.value = false
-  }
-}
-
 // 处理筛选菜单显示
 function handleFilterMenuChange(value: boolean) {
   filterMenuShow.value = value
@@ -132,24 +246,6 @@ function handleFilterMenuChange(value: boolean) {
   }
 }
 
-// 处理扫码
-function handleScan() {
-  scanType.value = 'scan'
-  // 重新挂载扫描组件
-  showScanner.value = false
-  setTimeout(() => {
-    showScanner.value = true
-  }, 10)
-  emit('onScan')
-}
-
-// 处理NFC
-function handleNFC() {
-  scanType.value = 'nfc'
-  showScanner.value = false
-  emit('onNFC')
-}
-
 // 处理关闭扫描按钮点击
 function handleCloseScanButton() {
   listFilterMenu.value.close(false)
@@ -159,39 +255,39 @@ function handleCloseScanButton() {
 <template>
   <div id="XCellListFilter">
     <div class="filter-buttons">
-      <VanDropdownMenu :close-on-click-outside="false" class="filter-dropdown-menu" ref="listFilterMenu">
-        <VanDropdownItem v-model="scanMenuShow" @change="handleScanMenuChange">
+      <VanDropdownMenu ref="listFilterMenu" :close-on-click-outside="false" class="filter-dropdown-menu">
+        <VanDropdownItem v-if="showScanButton" v-model="scanMenuShow" @change="handleScanMenuChange">
           <template #title>
             <div class="filter-icon-box">
               <VanIcon name="apps-o" size="24" class="filter-icon" />
             </div>
           </template>
+
+          <!-- 显示选项卡 -->
           <div class="scan-tab-wrapper">
             <div class="scan-tabs">
+              <!-- 动态生成扫描模式选项卡 -->
               <div
+                v-for="mode in enabledScanModes"
+                :key="mode"
                 class="scan-tab-item"
-                :class="{ active: scanType === 'scan' }"
-                @click="handleScan"
-              >
-                <VanIcon name="scan" class="tab-icon" />
-                扫码
-              </div>
-              <div
-                class="scan-tab-item"
-                :class="{ active: scanType === 'nfc' }"
-                @click="handleNFC"
+                :class="{ active: scanType === mode }"
+                @click="switchToMode(mode)"
               >
-                <VanIcon name="wifi" class="tab-icon" />
-                NFC
+                <VanIcon :name="SCAN_MODE_CONFIGS[mode].icon" class="tab-icon" />
+                {{ SCAN_MODE_CONFIGS[mode].title }}
               </div>
             </div>
           </div>
-          <div v-if="scanType === 'scan'" class="scanORnfc">
-            <QrScanner v-if="showScanner" @close="handleCloseScanButton" />
-          </div>
-          <div v-if="scanType === 'nfc'" class="scanORnfc">
-            <VpnRecognition @close="handleCloseScanButton" />
+
+          <!-- 动态显示当前选中的扫描组件 -->
+          <div v-if="showScanner" class="scanORnfc">
+            <component
+              :is="SCAN_MODE_CONFIGS[scanType].component"
+              @close="handleCloseScanButton"
+            />
           </div>
+
           <div class="closeItem">
             <VanButton
               type="primary"
@@ -200,11 +296,13 @@ function handleCloseScanButton() {
               icon="cross"
               @click="handleCloseScanButton"
             >
-              {{ scanType === 'scan' ? '关闭扫描' : '关闭读取' }}
+              {{ SCAN_MODE_CONFIGS[scanType].closeText }}
             </VanButton>
           </div>
         </VanDropdownItem>
-        <VanDropdownItem v-model="filterMenuShow" @change="handleFilterMenuChange">
+
+        <!-- 筛选按钮 -->
+        <VanDropdownItem v-if="!props.buttonState || props.buttonState.filter !== false" v-model="filterMenuShow" @change="handleFilterMenuChange">
           <template #title>
             <div class="filter-icon-box">
               <VanIcon name="filter-o" size="24" class="filter-icon" />

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import type { FormInstance } from 'vant'
+import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
 import {
   Button as VanButton,
   CellGroup as VanCellGroup,
   Form as VanForm,
 } from 'vant'
-import type { FormInstance } from 'vant'
 import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref, watch } from 'vue'
-import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
 
 interface FormItem {
   addOrEdit: string

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
 import {
   Button as VanButton,
   Tab as VanTab,
   Tabs as VanTabs,
 } from 'vant'
 import { defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
-import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
-import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
 
 const props = withDefaults(defineProps<{
   configName?: string
@@ -80,7 +80,7 @@ async function submit() {
     await res.validate()
     formData.value[res.formGroupName] = res.form
   }
-  emit('submit', formData)
+  emit('submit', formData.value)
 }
 
 // function initXForm(index: number) {