af-mobile-client-vue3 1.3.30 → 1.3.32

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

@@ -1,705 +1,705 @@
-<script setup lang="ts">
-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 useUserStore from '@af-mobile-client-vue3/stores/modules/user'
-import { Icon } from '@iconify/vue'
-import {
-  showFailToast,
-  Button as VanButton,
-  Col as VanCol,
-  DropdownItem as VanDropdownItem,
-  DropdownMenu as VanDropdownMenu,
-  Icon as VanIcon,
-  Row as VanRow,
-} from 'vant'
-import { computed, defineEmits, defineModel, defineProps, nextTick, onMounted, ref } from 'vue'
-import QrScanner from './QrScanner/index.vue'
-import VpnRecognition from './VpnRecognition/index.vue'
-
-const props = defineProps<{
-  fixQueryForm?: object
-  serviceName?: string
-  orderVal?: string
-  sortordVal?: string
-  orderList?: any[]
-  formQuery?: any[]
-  buttonState?: any
-  buttonPermissions?: any[]
-  scanOptions?: {
-    show?: boolean // 是否显示扫码按钮
-    type?: string | string[] // 显示类型：可以是单个类型，也可以是类型数组
-    defaultMode?: string // 默认模式
-  }
-}>()
-
-const emit = defineEmits([
-  'update:orderVal',
-  'update:sortordVal',
-  'update:conditionParams',
-  'onRefresh',
-  'addOption',
-  'toggleView',
-  'onScan',
-  'onNFC',
-])
-
-const userState = useUserStore().getLogin()
-
-// 定义扫描模式枚举，便于扩展
-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')
-// 排序规则
-const currentSortordVal = defineModel('sortordVal')
-// 下拉菜单元素
-const listFilterMenu = ref(null)
-// 排序规则列表
-const sortordList = ref([
-  { title: '正序', value: 'ascend' },
-  { title: '倒序', value: 'descend' },
-])
-const colFieldNames = {
-  text: 'title',
-  value: 'value',
-}
-
-// 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
-const conditionParams = ref({})
-
-// 用于存储每个 XFormItem 的 ref
-const formItemRefs = ref([])
-
-// 视图模式 - 当前选中的扫描模式
-const scanType = ref(getDefaultScanType())
-
-const scanMenuShow = ref(false)
-const filterMenuShow = ref(false)
-const showScanner = ref(true)
-
-onMounted(async () => {
-  // 监听应用状态变化
-  window.addEventListener('appstate-change', handleAppStateChange as EventListener)
-})
-
-// 定义应用状态事件的类型
-interface AppStateEvent extends CustomEvent {
-  detail: {
-    appState: 'afterhidden' | 'beforeshow' | 'aftershow'
-  }
-}
-// 处理应用状态变化
-function handleAppStateChange(e: AppStateEvent) {
-  if (e.detail.appState === 'afterhidden') {
-    // console.log('>>>> 组件 已卸载')
-    filterMenuShow.value = false
-  }
-  else if (e.detail.appState === 'beforeshow') {
-    // console.log('>>>> 组件 即将重新渲染')
-  }
-  else if (e.detail.appState === 'aftershow') {
-    // console.log('>>>> 组件 已经重新渲染')
-  }
-}
-
-// 获取默认扫描模式
-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)
-    conditionParams.value[type] = undefined
-}
-// 重置所有选项
-function resetOption() {
-  currentOrderVal.value = undefined
-  currentSortordVal.value = undefined
-  // 条件参数
-  Object.keys(conditionParams.value).forEach((key) => {
-    conditionParams.value[key] = undefined
-  })
-  // 关键：调用所有 XFormItem 的 reset 方法
-  nextTick(() => {
-    formItemRefs.value.forEach((refItem) => {
-      if (refItem && typeof refItem.reset === 'function') {
-        refItem.reset()
-      }
-    })
-  })
-  console.log('conditionParams.value重置', conditionParams.value)
-}
-function checkOrderOption() {
-  let isCheck = true
-  if (currentOrderVal.value) {
-    if (!currentSortordVal.value) {
-      showFailToast('排序规则不能为空')
-      isCheck = false
-    }
-  }
-  else if (currentSortordVal.value) {
-    if (!currentOrderVal.value) {
-      showFailToast('排序字段不能为空')
-      isCheck = false
-    }
-  }
-  return isCheck
-}
-// 清理查询条件参数，删除无效内容
-function cleanConditionParams(params) {
-  const cleanedParams = {}
-
-  for (const key of Object.keys(params)) {
-    const value = params[key]
-
-    // 跳过无效值
-    if (value === null || value === undefined || value === '') {
-      continue
-    }
-
-    // 处理数组
-    if (Array.isArray(value)) {
-      // 过滤掉空字符串、null、undefined
-      const filteredArray = value.filter(item =>
-        item !== null && item !== undefined && item !== '',
-      )
-      // 只有当数组不为空时才添加
-      if (filteredArray.length > 0) {
-        cleanedParams[key] = filteredArray
-      }
-      continue
-    }
-
-    // 处理对象
-    if (typeof value === 'object' && value !== null) {
-      // 检查对象是否为空
-      const objectKeys = Object.keys(value)
-      if (objectKeys.length === 0) {
-        continue
-      }
-
-      // 递归清理对象内部
-      const cleanedObject = {}
-      let hasValidValue = false
-
-      for (const objKey of objectKeys) {
-        const objValue = value[objKey]
-        if (objValue !== null && objValue !== undefined && objValue !== '') {
-          cleanedObject[objKey] = objValue
-          hasValidValue = true
-        }
-      }
-
-      // 只有当对象有有效值时才添加
-      if (hasValidValue) {
-        cleanedParams[key] = cleanedObject
-      }
-      continue
-    }
-
-    // 处理基本类型
-    if (value !== null && value !== undefined && value !== '') {
-      cleanedParams[key] = value
-    }
-  }
-
-  return cleanedParams
-}
-
-// 确认筛选条件
-function confirmOption() {
-  const isCheck = checkOrderOption()
-  if (isCheck) {
-    // 清理查询条件参数
-    const cleanedParams = cleanConditionParams(conditionParams.value)
-
-    const isEmptyObject = Object.keys(cleanedParams).length === 0
-    emit('update:conditionParams', isEmptyObject ? undefined : cleanedParams)
-    emit('onRefresh', {})
-    listFilterMenu.value.close(false)
-  }
-}
-
-// 处理筛选菜单显示
-function handleFilterMenuChange(value: boolean) {
-  filterMenuShow.value = value
-  if (value) {
-    scanMenuShow.value = false
-    showScanner.value = false
-  }
-}
-
-// 处理关闭扫描按钮点击
-function handleCloseScanButton() {
-  listFilterMenu.value.close(false)
-}
-
-// 按钮权限信息筛选
-function filterButtonPermissions(btn) {
-  return props.buttonPermissions.find(item => item.btnName === btn)
-}
-</script>
-
-<template>
-  <div id="XCellListFilter">
-    <div class="filter-buttons">
-      <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">
-              <Icon icon="ri:qr-scan-2-line" :width="24" />
-            </div>
-          </template>
-
-          <!-- 显示选项卡 -->
-          <div class="scan-tab-wrapper">
-            <div class="dropdown-title">
-              <VanIcon name="scan" class="title-icon" />
-              <span class="title-text">扫码功能</span>
-            </div>
-            <div class="scan-tabs">
-              <!-- 动态生成扫描模式选项卡 -->
-              <div
-                v-for="mode in enabledScanModes"
-                :key="mode"
-                class="scan-tab-item"
-                :class="{ active: scanType === mode }"
-                @click="switchToMode(mode)"
-              >
-                <VanIcon :name="SCAN_MODE_CONFIGS[mode].icon" class="tab-icon" />
-                {{ SCAN_MODE_CONFIGS[mode].title }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 动态显示当前选中的扫描组件 -->
-          <div v-if="showScanner" class="scanORnfc">
-            <component
-              :is="SCAN_MODE_CONFIGS[scanType].component"
-              @close="handleCloseScanButton"
-            />
-          </div>
-
-          <div class="closeItem">
-            <VanButton
-              type="primary"
-              size="normal"
-              class="close-scan-btn"
-              icon="cross"
-              @click="handleCloseScanButton"
-            >
-              {{ SCAN_MODE_CONFIGS[scanType].closeText }}
-            </VanButton>
-          </div>
-        </VanDropdownItem>
-
-        <!-- 筛选按钮 -->
-        <VanDropdownItem v-if="!props.buttonState || props.buttonState.filter !== false" v-model="filterMenuShow" @change="handleFilterMenuChange">
-          <template #title>
-            <div class="filter-icon-box">
-              <Icon icon="mdi:filter" :width="24" />
-            </div>
-          </template>
-          <div class="dropdown-title">
-            <VanIcon name="filter-o" class="title-icon" />
-            <span class="title-text">筛选条件</span>
-          </div>
-          <div class="order-condition">
-            <template v-if="props.orderList.length > 0">
-              <VanRow justify="space-between" class="filter-title">
-                <VanCol span="10">
-                  排序字段
-                </VanCol>
-                <!--                <VanCol span="2">
-                  <div class="reset-item" @click.stop="currentOrderVal = undefined">
-                    重置
-                  </div>
-                </VanCol> -->
-              </VanRow>
-              <XGridDropOption :columns="props.orderList" :columns-field-names="colFieldNames" />
-              <VanRow justify="space-between" class="filter-title">
-                <VanCol span="10">
-                  排序规则
-                </VanCol>
-                <!--                <VanCol span="2">
-                  <div class="reset-item" @click.stop="currentSortordVal = undefined">
-                    重置
-                  </div>
-                </VanCol> -->
-              </VanRow>
-              <XGridDropOption :columns="sortordList" :columns-field-names="colFieldNames" />
-            </template>
-            <template v-for="(item, index) in props.formQuery" :key="`${item.model}${index}`">
-              <VanRow justify="space-between" class="filter-title">
-                <VanCol span="10">
-                  {{ item.name }}
-                </VanCol>
-                <!--                <VanCol span="2">
-                  <div class="reset-item" @click.stop="resetOptionItem(item.model)">
-                    重置
-                  </div>
-                </VanCol> -->
-              </VanRow>
-              <XFormItem
-                ref="formItemRefs"
-                v-model="conditionParams[item.model]"
-                :form="conditionParams"
-                :attr="item"
-                :service-name="props.serviceName"
-                :show-label="false"
-              />
-            </template>
-          </div>
-          <div class="operations-panel">
-            <VanButton type="default" @click="resetOption">
-              重置
-            </VanButton>
-            <VanButton type="primary" @click="confirmOption">
-              查询
-            </VanButton>
-          </div>
-        </VanDropdownItem>
-      </VanDropdownMenu>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-#XCellListFilter {
-  --van-cell-horizontal-padding: 0;
-  width: 100%;
-  .filter-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-
-  .dropdown-title {
-    padding: 16px;
-    background-color: #fff;
-    border-bottom: 1px solid #ebedf0;
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    .title-icon {
-      font-size: 20px;
-      color: #646566;
-    }
-    .title-text {
-      font-size: 18px;
-      font-weight: 600;
-      color: #323233;
-      line-height: 1.4;
-    }
-  }
-
-  .scan-tab-wrapper {
-    padding: 0;
-    background-color: #fff;
-    .scan-tabs {
-      display: flex;
-      background: #f5f5f5;
-      border-radius: 8px;
-      padding: 2px;
-      margin-top: 8px;
-      .scan-tab-item {
-        flex: 1;
-        height: 44px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 15px;
-        color: #646566;
-        cursor: pointer;
-        border-radius: 6px;
-        gap: 4px;
-
-        .tab-icon {
-          font-size: 20px;
-        }
-
-        &.active {
-          background-color: #1989fa;
-          color: #fff;
-          .tab-icon {
-            color: #fff;
-          }
-        }
-      }
-    }
-  }
-
-  .filter-dropdown-menu {
-    :deep(.van-dropdown-menu__bar) {
-      box-shadow: none;
-      height: auto;
-      position: relative;
-      z-index: 1;
-    }
-    :deep(.van-dropdown-menu__item) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      z-index: 1;
-    }
-    // 隐藏下拉箭头
-    :deep(.van-dropdown-menu__title::after) {
-      display: none !important;
-    }
-    // 下拉菜单内容
-    :deep(.van-dropdown-item__content) {
-      position: fixed;
-      z-index: 10;
-      background-color: white;
-    }
-    // 下拉菜单遮罩层
-    :deep(.van-overlay) {
-      z-index: 9;
-    }
-  }
-
-  .filter-icon-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    background-color: rgba(245, 245, 245);
-    cursor: pointer;
-    position: relative;
-    z-index: 1;
-    &:active {
-      opacity: 0.7;
-    }
-  }
-  .order-condition {
-    padding: 0 16px 16px;
-    max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
-    overflow-y: auto;
-    width: 100%;
-    background-color: white;
-    .filter-title {
-      height: 2rem;
-      font-size: 13px;
-      font-weight: 600;
-      line-height: 2rem;
-      margin: 5px 5px 1px 0px;
-      color: black;
-    }
-    .range-picker-list {
-      .range-picker-title {
-        height: 2rem;
-        font-size: 13px;
-        font-weight: 600;
-        line-height: 2rem;
-        margin: 5px 1rem 1px 1rem;
-        color: black;
-      }
-      .range-picker-time {
-        display: inline-block;
-        background: #f8f8f8;
-        border-radius: 8px;
-        font-size: 13px;
-        margin: 0 1rem;
-        height: 2rem;
-        line-height: 2rem;
-        width: 40vw;
-        text-align: center;
-      }
-      /* 已完成选择的时间 */
-      .active-picker-time {
-        color: blue;
-      }
-    }
-    /* 重置元素按钮 */
-    .reset-item {
-      font-weight: 500;
-      color: blue;
-    }
-  }
-  /* 下拉菜单的操作面板 */
-  .operations-panel {
-    display: flex;
-    overflow: hidden;
-    user-select: none;
-    padding: 10px;
-    gap: 12px;
-
-    & > .van-button {
-      flex: 1;
-      margin: 0;
-
-      //&:first-child {
-      //  margin-right: 12px;
-      //}
-    }
-  }
-  /* 时间范围组件 */
-  .rangePicker-comp-box {
-    :deep(.van-calendar) {
-      height: 58vh;
-    }
-    :deep(.van-calendar__header-title) {
-      background-color: rgba(25, 137, 250, 0.1);
-      height: 8vh;
-      line-height: 8vh;
-    }
-    :deep(.van-calendar__month-mark) {
-      color: rgba(25, 137, 250, 0.1);
-    }
-  }
-  .scanORnfc {
-    height: 50vh;
-    width: 100%;
-    position: relative;
-    background-color: #f0f0f0;
-    border-radius: 8px;
-  }
-  .closeItem {
-    display: flex;
-    justify-content: center;
-    margin-top: 16px;
-    margin-bottom: 20px;
-
-    .close-scan-btn {
-      width: 140px;
-      height: 40px;
-      background-color: #1989fa;
-      border-radius: 4px;
-      font-size: 14px;
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-
-      :deep(.van-button__icon) {
-        margin-right: 4px;
-        font-size: 16px;
-      }
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+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 useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import { Icon } from '@iconify/vue'
+import {
+  showFailToast,
+  Button as VanButton,
+  Col as VanCol,
+  DropdownItem as VanDropdownItem,
+  DropdownMenu as VanDropdownMenu,
+  Icon as VanIcon,
+  Row as VanRow,
+} from 'vant'
+import { computed, defineEmits, defineModel, defineProps, nextTick, onMounted, ref } from 'vue'
+import QrScanner from './QrScanner/index.vue'
+import VpnRecognition from './VpnRecognition/index.vue'
+
+const props = defineProps<{
+  fixQueryForm?: object
+  serviceName?: string
+  orderVal?: string
+  sortordVal?: string
+  orderList?: any[]
+  formQuery?: any[]
+  buttonState?: any
+  buttonPermissions?: any[]
+  scanOptions?: {
+    show?: boolean // 是否显示扫码按钮
+    type?: string | string[] // 显示类型：可以是单个类型，也可以是类型数组
+    defaultMode?: string // 默认模式
+  }
+}>()
+
+const emit = defineEmits([
+  'update:orderVal',
+  'update:sortordVal',
+  'update:conditionParams',
+  'onRefresh',
+  'addOption',
+  'toggleView',
+  'onScan',
+  'onNFC',
+])
+
+const userState = useUserStore().getLogin()
+
+// 定义扫描模式枚举，便于扩展
+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')
+// 排序规则
+const currentSortordVal = defineModel('sortordVal')
+// 下拉菜单元素
+const listFilterMenu = ref(null)
+// 排序规则列表
+const sortordList = ref([
+  { title: '正序', value: 'ascend' },
+  { title: '倒序', value: 'descend' },
+])
+const colFieldNames = {
+  text: 'title',
+  value: 'value',
+}
+
+// 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
+const conditionParams = ref({})
+
+// 用于存储每个 XFormItem 的 ref
+const formItemRefs = ref([])
+
+// 视图模式 - 当前选中的扫描模式
+const scanType = ref(getDefaultScanType())
+
+const scanMenuShow = ref(false)
+const filterMenuShow = ref(false)
+const showScanner = ref(true)
+
+onMounted(async () => {
+  // 监听应用状态变化
+  window.addEventListener('appstate-change', handleAppStateChange as EventListener)
+})
+
+// 定义应用状态事件的类型
+interface AppStateEvent extends CustomEvent {
+  detail: {
+    appState: 'afterhidden' | 'beforeshow' | 'aftershow'
+  }
+}
+// 处理应用状态变化
+function handleAppStateChange(e: AppStateEvent) {
+  if (e.detail.appState === 'afterhidden') {
+    // console.log('>>>> 组件 已卸载')
+    filterMenuShow.value = false
+  }
+  else if (e.detail.appState === 'beforeshow') {
+    // console.log('>>>> 组件 即将重新渲染')
+  }
+  else if (e.detail.appState === 'aftershow') {
+    // console.log('>>>> 组件 已经重新渲染')
+  }
+}
+
+// 获取默认扫描模式
+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)
+    conditionParams.value[type] = undefined
+}
+// 重置所有选项
+function resetOption() {
+  currentOrderVal.value = undefined
+  currentSortordVal.value = undefined
+  // 条件参数
+  Object.keys(conditionParams.value).forEach((key) => {
+    conditionParams.value[key] = undefined
+  })
+  // 关键：调用所有 XFormItem 的 reset 方法
+  nextTick(() => {
+    formItemRefs.value.forEach((refItem) => {
+      if (refItem && typeof refItem.reset === 'function') {
+        refItem.reset()
+      }
+    })
+  })
+  console.log('conditionParams.value重置', conditionParams.value)
+}
+function checkOrderOption() {
+  let isCheck = true
+  if (currentOrderVal.value) {
+    if (!currentSortordVal.value) {
+      showFailToast('排序规则不能为空')
+      isCheck = false
+    }
+  }
+  else if (currentSortordVal.value) {
+    if (!currentOrderVal.value) {
+      showFailToast('排序字段不能为空')
+      isCheck = false
+    }
+  }
+  return isCheck
+}
+// 清理查询条件参数，删除无效内容
+function cleanConditionParams(params) {
+  const cleanedParams = {}
+
+  for (const key of Object.keys(params)) {
+    const value = params[key]
+
+    // 跳过无效值
+    if (value === null || value === undefined || value === '') {
+      continue
+    }
+
+    // 处理数组
+    if (Array.isArray(value)) {
+      // 过滤掉空字符串、null、undefined
+      const filteredArray = value.filter(item =>
+        item !== null && item !== undefined && item !== '',
+      )
+      // 只有当数组不为空时才添加
+      if (filteredArray.length > 0) {
+        cleanedParams[key] = filteredArray
+      }
+      continue
+    }
+
+    // 处理对象
+    if (typeof value === 'object' && value !== null) {
+      // 检查对象是否为空
+      const objectKeys = Object.keys(value)
+      if (objectKeys.length === 0) {
+        continue
+      }
+
+      // 递归清理对象内部
+      const cleanedObject = {}
+      let hasValidValue = false
+
+      for (const objKey of objectKeys) {
+        const objValue = value[objKey]
+        if (objValue !== null && objValue !== undefined && objValue !== '') {
+          cleanedObject[objKey] = objValue
+          hasValidValue = true
+        }
+      }
+
+      // 只有当对象有有效值时才添加
+      if (hasValidValue) {
+        cleanedParams[key] = cleanedObject
+      }
+      continue
+    }
+
+    // 处理基本类型
+    if (value !== null && value !== undefined && value !== '') {
+      cleanedParams[key] = value
+    }
+  }
+
+  return cleanedParams
+}
+
+// 确认筛选条件
+function confirmOption() {
+  const isCheck = checkOrderOption()
+  if (isCheck) {
+    // 清理查询条件参数
+    const cleanedParams = cleanConditionParams(conditionParams.value)
+
+    const isEmptyObject = Object.keys(cleanedParams).length === 0
+    emit('update:conditionParams', isEmptyObject ? undefined : cleanedParams)
+    emit('onRefresh', {})
+    listFilterMenu.value.close(false)
+  }
+}
+
+// 处理筛选菜单显示
+function handleFilterMenuChange(value: boolean) {
+  filterMenuShow.value = value
+  if (value) {
+    scanMenuShow.value = false
+    showScanner.value = false
+  }
+}
+
+// 处理关闭扫描按钮点击
+function handleCloseScanButton() {
+  listFilterMenu.value.close(false)
+}
+
+// 按钮权限信息筛选
+function filterButtonPermissions(btn) {
+  return props.buttonPermissions.find(item => item.btnName === btn)
+}
+</script>
+
+<template>
+  <div id="XCellListFilter">
+    <div class="filter-buttons">
+      <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">
+              <Icon icon="ri:qr-scan-2-line" :width="24" />
+            </div>
+          </template>
+
+          <!-- 显示选项卡 -->
+          <div class="scan-tab-wrapper">
+            <div class="dropdown-title">
+              <VanIcon name="scan" class="title-icon" />
+              <span class="title-text">扫码功能</span>
+            </div>
+            <div class="scan-tabs">
+              <!-- 动态生成扫描模式选项卡 -->
+              <div
+                v-for="mode in enabledScanModes"
+                :key="mode"
+                class="scan-tab-item"
+                :class="{ active: scanType === mode }"
+                @click="switchToMode(mode)"
+              >
+                <VanIcon :name="SCAN_MODE_CONFIGS[mode].icon" class="tab-icon" />
+                {{ SCAN_MODE_CONFIGS[mode].title }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 动态显示当前选中的扫描组件 -->
+          <div v-if="showScanner" class="scanORnfc">
+            <component
+              :is="SCAN_MODE_CONFIGS[scanType].component"
+              @close="handleCloseScanButton"
+            />
+          </div>
+
+          <div class="closeItem">
+            <VanButton
+              type="primary"
+              size="normal"
+              class="close-scan-btn"
+              icon="cross"
+              @click="handleCloseScanButton"
+            >
+              {{ SCAN_MODE_CONFIGS[scanType].closeText }}
+            </VanButton>
+          </div>
+        </VanDropdownItem>
+
+        <!-- 筛选按钮 -->
+        <VanDropdownItem v-if="!props.buttonState || props.buttonState.filter !== false" v-model="filterMenuShow" @change="handleFilterMenuChange">
+          <template #title>
+            <div class="filter-icon-box">
+              <Icon icon="mdi:filter" :width="24" />
+            </div>
+          </template>
+          <div class="dropdown-title">
+            <VanIcon name="filter-o" class="title-icon" />
+            <span class="title-text">筛选条件</span>
+          </div>
+          <div class="order-condition">
+            <template v-if="props.orderList.length > 0">
+              <VanRow justify="space-between" class="filter-title">
+                <VanCol span="10">
+                  排序字段
+                </VanCol>
+                <!--                <VanCol span="2">
+                  <div class="reset-item" @click.stop="currentOrderVal = undefined">
+                    重置
+                  </div>
+                </VanCol> -->
+              </VanRow>
+              <XGridDropOption :columns="props.orderList" :columns-field-names="colFieldNames" />
+              <VanRow justify="space-between" class="filter-title">
+                <VanCol span="10">
+                  排序规则
+                </VanCol>
+                <!--                <VanCol span="2">
+                  <div class="reset-item" @click.stop="currentSortordVal = undefined">
+                    重置
+                  </div>
+                </VanCol> -->
+              </VanRow>
+              <XGridDropOption :columns="sortordList" :columns-field-names="colFieldNames" />
+            </template>
+            <template v-for="(item, index) in props.formQuery" :key="`${item.model}${index}`">
+              <VanRow justify="space-between" class="filter-title">
+                <VanCol span="10">
+                  {{ item.name }}
+                </VanCol>
+                <!--                <VanCol span="2">
+                  <div class="reset-item" @click.stop="resetOptionItem(item.model)">
+                    重置
+                  </div>
+                </VanCol> -->
+              </VanRow>
+              <XFormItem
+                ref="formItemRefs"
+                v-model="conditionParams[item.model]"
+                :form="conditionParams"
+                :attr="item"
+                :service-name="props.serviceName"
+                :show-label="false"
+              />
+            </template>
+          </div>
+          <div class="operations-panel">
+            <VanButton type="default" @click="resetOption">
+              重置
+            </VanButton>
+            <VanButton type="primary" @click="confirmOption">
+              查询
+            </VanButton>
+          </div>
+        </VanDropdownItem>
+      </VanDropdownMenu>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XCellListFilter {
+  --van-cell-horizontal-padding: 0;
+  width: 100%;
+  .filter-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .dropdown-title {
+    padding: 16px;
+    background-color: #fff;
+    border-bottom: 1px solid #ebedf0;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .title-icon {
+      font-size: 20px;
+      color: #646566;
+    }
+    .title-text {
+      font-size: 18px;
+      font-weight: 600;
+      color: #323233;
+      line-height: 1.4;
+    }
+  }
+
+  .scan-tab-wrapper {
+    padding: 0;
+    background-color: #fff;
+    .scan-tabs {
+      display: flex;
+      background: #f5f5f5;
+      border-radius: 8px;
+      padding: 2px;
+      margin-top: 8px;
+      .scan-tab-item {
+        flex: 1;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        color: #646566;
+        cursor: pointer;
+        border-radius: 6px;
+        gap: 4px;
+
+        .tab-icon {
+          font-size: 20px;
+        }
+
+        &.active {
+          background-color: #1989fa;
+          color: #fff;
+          .tab-icon {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-dropdown-menu {
+    :deep(.van-dropdown-menu__bar) {
+      box-shadow: none;
+      height: auto;
+      position: relative;
+      z-index: 1;
+    }
+    :deep(.van-dropdown-menu__item) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 1;
+    }
+    // 隐藏下拉箭头
+    :deep(.van-dropdown-menu__title::after) {
+      display: none !important;
+    }
+    // 下拉菜单内容
+    :deep(.van-dropdown-item__content) {
+      position: fixed;
+      z-index: 10;
+      background-color: white;
+    }
+    // 下拉菜单遮罩层
+    :deep(.van-overlay) {
+      z-index: 9;
+    }
+  }
+
+  .filter-icon-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background-color: rgba(245, 245, 245);
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    &:active {
+      opacity: 0.7;
+    }
+  }
+  .order-condition {
+    padding: 0 16px 16px;
+    max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
+    overflow-y: auto;
+    width: 100%;
+    background-color: white;
+    .filter-title {
+      height: 2rem;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 2rem;
+      margin: 5px 5px 1px 0px;
+      color: black;
+    }
+    .range-picker-list {
+      .range-picker-title {
+        height: 2rem;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 2rem;
+        margin: 5px 1rem 1px 1rem;
+        color: black;
+      }
+      .range-picker-time {
+        display: inline-block;
+        background: #f8f8f8;
+        border-radius: 8px;
+        font-size: 13px;
+        margin: 0 1rem;
+        height: 2rem;
+        line-height: 2rem;
+        width: 40vw;
+        text-align: center;
+      }
+      /* 已完成选择的时间 */
+      .active-picker-time {
+        color: blue;
+      }
+    }
+    /* 重置元素按钮 */
+    .reset-item {
+      font-weight: 500;
+      color: blue;
+    }
+  }
+  /* 下拉菜单的操作面板 */
+  .operations-panel {
+    display: flex;
+    overflow: hidden;
+    user-select: none;
+    padding: 10px;
+    gap: 12px;
+
+    & > .van-button {
+      flex: 1;
+      margin: 0;
+
+      //&:first-child {
+      //  margin-right: 12px;
+      //}
+    }
+  }
+  /* 时间范围组件 */
+  .rangePicker-comp-box {
+    :deep(.van-calendar) {
+      height: 58vh;
+    }
+    :deep(.van-calendar__header-title) {
+      background-color: rgba(25, 137, 250, 0.1);
+      height: 8vh;
+      line-height: 8vh;
+    }
+    :deep(.van-calendar__month-mark) {
+      color: rgba(25, 137, 250, 0.1);
+    }
+  }
+  .scanORnfc {
+    height: 50vh;
+    width: 100%;
+    position: relative;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+  }
+  .closeItem {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+    margin-bottom: 20px;
+
+    .close-scan-btn {
+      width: 140px;
+      height: 40px;
+      background-color: #1989fa;
+      border-radius: 4px;
+      font-size: 14px;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      :deep(.van-button__icon) {
+        margin-right: 4px;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>