wui-components-v2 1.1.69 → 1.1.70

package/components/wui-select-popup/wui-select-popup.vue

@@ -1,612 +1,612 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { enums, listData, pageConfig, pageKey } from '../../api/page'
-import foldCard from '../fold-card/fold-card.vue'
-import Search from '../search/search.vue'
-import type { Config, Entities, Enums, FoldCardModel } from '../../type'
-import { useGlobalToast } from '../../composables/useGlobalToast'
-import listTopButtons from '../list-top-buttons/list-top-buttons.vue'
-
-defineOptions({
-  name: 'WuiSelectPopup',
-})
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | string[] // v-model 绑定值
-    sourceId: string // 数据源ID
-    title?: string // 标题（用于popup标题）
-    label?: string // 左侧标签文字（如"基地名称"）
-    extControlType?: string // 选择模式：relselect(单选)、relselect-extdis等
-    placeholder?: string // 占位文本
-    foldCardModel?: FoldCardModel // 折叠卡片模式
-    readonly?: boolean // 只读模式，禁止打开弹窗
-    clearable?: boolean // 是否显示清空按钮
-    defaultSelectFirst?: boolean // 是否默认选择第一项
-  }>(),
-  {
-    title: '',
-    label: '',
-    extControlType: 'relselect',
-    placeholder: '请选择',
-    foldCardModel: 'simple',
-    readonly: false,
-    clearable: true,
-    defaultSelectFirst: false,
-  }
-)
-console.log(props, '3333333333333333333')
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | string[]): void
-  (e: 'confirm', value: string | string[]): void
-  (e: 'cancel'): void
-  (e: 'open'): void
-  (e: 'close'): void
-}>()
-
-const globalToast = useGlobalToast()
-const Zpaging = ref<any>(null)
-const config = ref<Config>({
-  columns: [],
-  primaryColumn: {
-    sourceId: '',
-    controlType: '',
-    mstrucId: '',
-    extControlType: '',
-  },
-  secondColumn: {
-    sourceId: '',
-    controlType: '',
-    mstrucId: '',
-    extControlType: '',
-  },
-  primaryCriteria: {
-    sourceId: '',
-    controlType: '',
-    mstrucId: '',
-    disabled: false,
-    defaultValue: '',
-    transDefaultValue: '',
-    required: false,
-    extControlType: '',
-    hidden: false,
-  },
-  criterias: [],
-  buttons: [],
-  id: '',
-  fields: [],
-  title: '',
-  type: '',
-  pointSourceId: '',
-  mstrucId: '',
-  relationNames: [],
-  readOnly: false,
-  displayConfig: [],
-  showType: 'table',
-  extShowConfig: {},
-  extDisplayConfig: {},
-})
-const datas = ref<Entities[]>([])
-const searchData = ref('')
-const enumColumn = ref<Enums>({})
-const selectData = ref<Record<string, string>>({}) // 选择数据
-
-// ★ 关键修改：使用独立的 ref 管理显示状态（参考 action-popup）
-const show = ref(false)
-
-// 格式化显示的选中值
-const displayValue = computed(() => {
-  const values = Object.values(selectData.value)
-  if (!values.length) return ''
-
-  if (props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis') {
-    return values[0]?.split('@R@')[1] || ''
-  }
-  return values.map(v => v.split('@R@')[1]).join(', ')
-})
-
-// 格式化选中的数据用于checkbox显示
-const selectDataFormat = computed(() => {
-  const newdata: Record<string, string> = {}
-  if (typeof selectData.value === 'object' && selectData.value !== null) {
-    Object.values(selectData.value).forEach(item => {
-      newdata[item.split('@R@')[0]] = item.split('@R@')[0]
-    })
-  }
-  return newdata
-})
-
-// 监听外部modelValue变化，同步到内部选择数据
-watch(
-  () => props.modelValue,
-  val => {
-    if (!val || (Array.isArray(val) && !val.length)) {
-      selectData.value = {}
-      return
-    }
-
-    const newData: Record<string, string> = {}
-    if (Array.isArray(val)) {
-      val.forEach(item => {
-        if (item && typeof item === 'string') {
-          const code = item.split('@R@')[0]
-          if (code) newData[code] = item
-        }
-      })
-    } else if (typeof val === 'string' && val) {
-      const code = val.split('@R@')[0]
-      if (code) newData[code] = val
-    }
-    selectData.value = newData
-  },
-  { immediate: true }
-)
-
-// 显示地址信息
-const showAddressInfo = computed(() => {
-  return props.extControlType === 'relselect-extdis'
-})
-
-// checkbox类型
-const checkboxType = computed(() => {
-  return ['relselect', 'relselect-extdis'].includes(props.extControlType) ? '' : 'square'
-})
-
-// 格式化地址
-const formatAddress = (value: string) => {
-  return (value?.split(',') || [])[2] || ''
-}
-
-// 标记是否已获取配置
-const isConfigLoaded = ref(false)
-// ★ 防止重复加载
-const isLoading = ref(false)
-// ★ 防止 z-paging 初始化时与手动 reload 重复请求
-const hasInitialized = ref(false)
-
-// ★ 是否已完成默认首项选中
-const hasDefaultSelected = ref(false)
-
-// ★ 默认选择第一项：数据加载完成后自动选中第一条并回显
-watch(datas, val => {
-  if (!props.defaultSelectFirst || !val?.length || hasDefaultSelected.value || Object.keys(selectData.value).length > 0)
-    return
-  const first = val[0]
-  selectData.value[first.code] = `${first.code}@R@${first.fieldMap[config.value.primaryColumn.sourceId]}`
-  const result =
-    props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis'
-      ? selectData.value[first.code]
-      : Object.values(selectData.value)
-  emit('update:modelValue', result)
-  hasDefaultSelected.value = true
-})
-
-// 获取页面配置
-async function getPageConfig() {
-  if (isConfigLoaded.value && config.value.id) return // 避免重复请求
-
-  try {
-    const res = await pageConfig(props.sourceId)
-    if (res.ltmplConfig) {
-      config.value = res.ltmplConfig
-      isConfigLoaded.value = true
-      await getEnums()
-      console.log('[WuiSelectPopup] ✅ 配置加载完成', config.value.title)
-    }
-  } catch (error) {
-    console.error('[WuiSelectPopup] ❌ 配置加载失败:', error)
-    throw error
-  }
-}
-
-// 获取枚举数据
-async function getEnums() {
-  try {
-    const params: string[] = []
-    config.value.criterias?.forEach((item: any) => {
-      if (item.controlType === 'select' || item.controlType === 'multiselect') {
-        params.push(`mstrucIds=${item.mstrucId}`)
-      }
-    })
-
-    if (!params.length) return
-    const res = await enums(params.join('&'))
-    enumColumn.value = res.enumMap || {}
-  } catch (error) {
-    console.log('error:', error)
-  }
-}
-
-// 查询列表数据（完整流程：config -> key -> data）
-async function queryList(pageNo: number, pageSize: number) {
-  // ★ 只防正在进行的重复请求（分页不拦截）
-  if (pageNo === 1 && isLoading.value) return
-
-  // ★ z-paging 组件初始化时自动触发 @query，popup 未打开时跳过
-  // （只跳过第一次，后续打开 popup 后的查询正常放行）
-  if (!show.value && !hasInitialized.value) {
-    hasInitialized.value = true
-    Zpaging.value.complete([])
-    return
-  }
-
-  if (pageNo === 1) isLoading.value = true
-
-  try {
-    // 步骤1：确保配置已加载
-    if (!isConfigLoaded.value) {
-      console.log('[WuiSelectPopup] 正在加载配置...')
-      await getPageConfig()
-      console.log('[WuiSelectPopup] 配置已加载，开始查询数据')
-    }
-
-    // 步骤2：构建查询参数
-    const search = uni.getStorageSync('paramsData')?.changedData || {}
-    const newParams = {
-      thirdCriteria: search.relValueField3 || '',
-      secondCriteria: search.relValueField?.toString() || '',
-    }
-
-    const params = Object.entries(newParams)
-      .map(([key, value]) => `${key}=${value}`)
-      .join('&')
-    let qre = searchData.value ? `${searchData.value}&${params}` : params
-
-    if (config.value.defaultCriteriaValue) {
-      for (const key in config.value.defaultCriteriaValue) {
-        if (Object.prototype.hasOwnProperty.call(config.value.defaultCriteriaValue, key)) {
-          const element = config.value.defaultCriteriaValue[key]
-          if (!qre.includes(key)) {
-            qre = `${qre}&${key}=${element}`
-          }
-        }
-      }
-    }
-
-    // 步骤3：获取查询Key
-    console.log('[WuiSelectPopup] 请求 pageKey，sourceId:', props.sourceId)
-    const res = await pageKey(props.sourceId, '', qre)
-    if (!res?.key) {
-      throw new Error('未获取到查询Key')
-    }
-    console.log('[WuiSelectPopup] 获取到 key:', res.key)
-
-    // 步骤4：使用Key请求数据
-    const data = await listData(res.key, pageNo, pageSize)
-    console.log(`[WuiSelectPopup] 获取到数据，第${pageNo}页，共 ${data.entities?.length} 条`)
-    Zpaging.value.complete(data.entities)
-  } catch (error) {
-    console.error('[WuiSelectPopup] ❌ 数据加载失败:', error)
-    Zpaging.value.complete(false)
-  } finally {
-    if (pageNo === 1) isLoading.value = false
-  }
-}
-
-// 处理选项变化
-function handleChange(item: Entities) {
-  if (selectData.value[item.code]) {
-    delete selectData.value[item.code]
-    return
-  }
-
-  // 单选模式清空已有选择
-  if (props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis') {
-    selectData.value = {}
-  }
-
-  selectData.value[item.code] = `${item.code}@R@${item.fieldMap[config.value.primaryColumn.sourceId]}`
-}
-
-// 提交确认
-function confirm() {
-  const keys = Object.keys(selectData.value)
-  if (!keys.length) {
-    globalToast.warning(`请选择${props.title}`)
-    return
-  }
-
-  const payload = Object.values(selectData.value)
-
-  // 单选返回字符串，多选返回数组
-  let result: string | string[]
-  if (props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis') {
-    result = payload[0]
-  } else {
-    result = payload
-  }
-
-  emit('update:modelValue', result)
-  emit('confirm', result)
-  show.value = false
-}
-
-// 取消
-function cancel() {
-  emit('cancel')
-  show.value = false
-}
-
-// 清空选择
-function clear() {
-  selectData.value = {}
-  emit(
-    'update:modelValue',
-    props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis' ? '' : []
-  )
-}
-
-// 搜索提交
-function submitSearch(data: any) {
-  searchData.value = data
-  Zpaging.value.reload()
-}
-
-// ★ 打开 popup - 直接操作内部 ref
-function openPopup(e?: any) {
-  e?.stopPropagation?.()
-  if (props.readonly) return
-  console.log('[WuiSelectPopup] 🎯 点击触发打开 Popup')
-  show.value = true
-  emit('open')
-}
-
-// 打开popup时初始化数据
-watch(show, async val => {
-  console.log('[WuiSelectPopup] 📢 show 状态变化:', val)
-  if (val) {
-    if (isLoading.value) return // ★ 防重复（正在请求中不重复触发）
-    await nextTick()
-    // ★ 不重置 isConfigLoaded（配置只需加载一次）
-    hasInitialized.value = false // ★ 允许 reload 触发查询
-    if (Zpaging.value) {
-      Zpaging.value.reload()
-    } else {
-      setTimeout(() => {
-        Zpaging.value?.reload()
-      }, 300)
-    }
-  } else {
-    emit('close')
-  }
-})
-
-// ★ 监听 edit-page 返回后刷新数据（通过 sourceId 过滤，只响应自己的刷新）
-function handleRefresh(refreshSourceId: string) {
-  if (refreshSourceId !== props.sourceId) return
-  console.log('[WuiSelectPopup] 🔄 收到刷新信号，重新加载数据')
-  if (show.value && Zpaging.value && !isLoading.value) {
-    isConfigLoaded.value = false // ★ 刷新时重新加载配置
-    hasInitialized.value = false // ★ 允许 reload 触发
-    Zpaging.value.reload()
-  }
-}
-
-onMounted(() => {
-  uni.$on('selectPopup:refresh', handleRefresh)
-})
-
-onUnmounted(() => {
-  uni.$off('selectPopup:refresh', handleRefresh)
-  uni.removeStorageSync('paramsData')
-})
-
-// 暴露方法给父组件
-defineExpose({
-  clear,
-  confirm,
-  cancel,
-  open: openPopup,
-  close: () => {
-    show.value = false
-  },
-})
-</script>
-
-<template>
-  <view class="wui-select-popup-wrapper dark:bg-[var(--wot-dark-background)]">
-    <!-- ★ 触发区域 - 原生表单样式（左标签 + 中内容 + 右箭头） -->
-    <view v-if="!show" class="trigger-cell" @click="openPopup">
-      <!-- 左侧标签 -->
-      <text v-if="label" class="cell-label dark:text-white">
-        {{ label }}
-      </text>
-
-      <!-- 中间内容区 -->
-      <view class="cell-content dark:text-white">
-        <text v-if="displayValue && displayValue !== 'null'" class="cell-value">
-          {{ displayValue || '' }}
-        </text>
-        <text v-else class="cell-placeholder">
-          {{ placeholder || `请选择${title || label}` }}
-        </text>
-      </view>
-
-      <!-- 右侧箭头 -->
-      <view class="cell-arrow">
-        <wd-icon v-if="clearable && displayValue" name="close-circle" size="16px" @click.stop="clear" />
-        <wd-icon name="right" v-else size="16px"></wd-icon>
-      </view>
-    </view>
-
-    <!-- ★ 底部弹出的Popup - 修复内容溢出 -->
-    <wd-popup
-      v-model="show"
-      position="bottom"
-      :z-index="999999"
-      custom-style="border-radius: 24rpx 24rpx 0 0; overflow: hidden;"
-      class="dark:bg-[#1b1b1e]"
-      safe-area-inset-bottom
-      @close="
-        () => {
-          show = false
-        }
-      "
-    >
-      <view class="select-popup-container dark:bg-[#1b1b1e]">
-        <!-- 标题栏 - 固定高度不参与滚动 -->
-        <view
-          class="popup-header flex items-center justify-between px-4 py-3 border-b border-gray-200 shrink-0 dark:text-white"
-        >
-          <text class="text-base font-bold">选择{{ title }}</text>
-          <wd-icon name="close-circle" size="16px" @click="cancel" />
-        </view>
-
-        <!-- 列表内容区 - 占据剩余空间并可滚动 -->
-        <view class="popup-body">
-          <z-paging
-            ref="Zpaging"
-            v-model="datas"
-            :show-loading-more-when-reload="true"
-            :fixed="false"
-            @query="queryList"
-          >
-            <template #top>
-              <Search
-                :enum-column="enumColumn"
-                :criterias="config.criterias"
-                :primary-criteria="config.primaryCriteria"
-                @submit="submitSearch"
-              />
-              <view>
-                <listTopButtons :buttons="config.buttons" :source-id="sourceId" :page-title="pageTitle" />
-              </view>
-              <slot name="top" />
-            </template>
-
-            <foldCard
-              v-for="(item, index) in datas"
-              :key="item.code"
-              :index="index"
-              :data="item"
-              :columns="config.columns"
-              :primary-column="config.primaryColumn"
-              :second-column="config.secondColumn"
-              :model="foldCardModel"
-              :groups="config"
-              :source-id="sourceId"
-              @click="handleChange(item)"
-            >
-              <template #select>
-                <wd-checkbox
-                  :true-value="`${item.code}`"
-                  false-value=""
-                  :model-value="selectDataFormat[item.code]"
-                  :type="checkboxType"
-                />
-              </template>
-
-              <template #addressInfo v-if="showAddressInfo">
-                <div>{{ item.fieldMap[config.extDisplayConfig?.secondColumn?.sourceId] }}</div>
-              </template>
-              <template #detailAddress v-if="showAddressInfo">
-                <div>{{ formatAddress(item.fieldMap[config.extDisplayConfig?.cardShowCols?.[0]?.sourceId]) }}</div>
-              </template>
-            </foldCard>
-
-            <template #bottom>
-              <view class="popup-footer flex justify-center gap-4 p-4 border-t border-gray-200">
-                <wd-button plain custom-class="flex-1" @click="cancel">取消</wd-button>
-                <wd-button type="primary" custom-class="flex-1" @click="confirm">确定</wd-button>
-              </view>
-            </template>
-          </z-paging>
-        </view>
-      </view>
-    </wd-popup>
-  </view>
-</template>
-
-<style scoped lang="scss">
-.wui-select-popup-wrapper {
-  width: 100%;
-  position: relative;
-}
-
-// ★ 触发区域 - 原生表单样式（类似微信picker）
-.trigger-cell {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  position: relative;
-  transition: background-color 0.2s;
-
-  &:active {
-    background-color: #f5f7fa; // 点击反馈
-  }
-
-  // 左侧标签 - 固定宽度，不换行
-  .cell-label {
-    flex-shrink: 0;
-    margin-right: 24rpx;
-    white-space: nowrap;
-  }
-
-  // 中间内容区 - 占据剩余空间
-  .cell-content {
-    flex: 1;
-    min-width: 0; // 允许文本溢出省略
-
-    .cell-value {
-      text-align: left;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: block;
-    }
-
-    .cell-placeholder {
-      color: #c0c4cc; // 灰色占位符
-      text-align: left;
-    }
-  }
-
-  // 右侧箭头
-  .cell-arrow {
-    flex-shrink: 0;
-    margin-left: 16rpx;
-    display: flex;
-    align-items: center;
-
-    .arrow-text {
-      color: #c0c4cc;
-      transform: scaleX(0.8); // 稍微压窄箭头
-    }
-  }
-}
-
-// Popup 容器 - 使用 flex 布局控制溢出
-.select-popup-container {
-  display: flex;
-  flex-direction: column;
-  height: 75vh; // 固定高度
-  max-height: 80vh; // 最大高度
-  overflow: hidden; // 防止内容溢出
-}
-
-// 标题栏
-.popup-header {
-  flex-shrink: 0; // 不压缩
-  z-index: 10;
-}
-
-// 内容区域 - 可滚动
-.popup-body {
-  flex: 1; // 占据剩余空间
-  overflow: hidden; // 超出隐藏，由 z-paging 管理滚动
-  min-height: 0; // ★ 关键：允许 flex 子元素收缩
-
-  // 让 z-paging 填满整个容器
-  :deep(.z-paging-content) {
-    height: 100% !important;
-  }
-}
-
-// 底部按钮区
-.popup-footer {
-  flex-shrink: 0; // 不压缩
-  position: sticky;
-  bottom: 0;
-}
-</style>
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { enums, listData, pageConfig, pageKey } from '../../api/page'
+import foldCard from '../fold-card/fold-card.vue'
+import Search from '../search/search.vue'
+import type { Config, Entities, Enums, FoldCardModel } from '../../type'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import listTopButtons from '../list-top-buttons/list-top-buttons.vue'
+
+defineOptions({
+  name: 'WuiSelectPopup',
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | string[] // v-model 绑定值
+    sourceId: string // 数据源ID
+    title?: string // 标题（用于popup标题）
+    label?: string // 左侧标签文字（如"基地名称"）
+    extControlType?: string // 选择模式：relselect(单选)、relselect-extdis等
+    placeholder?: string // 占位文本
+    foldCardModel?: FoldCardModel // 折叠卡片模式
+    readonly?: boolean // 只读模式，禁止打开弹窗
+    clearable?: boolean // 是否显示清空按钮
+    defaultSelectFirst?: boolean // 是否默认选择第一项
+  }>(),
+  {
+    title: '',
+    label: '',
+    extControlType: 'relselect',
+    placeholder: '请选择',
+    foldCardModel: 'simple',
+    readonly: false,
+    clearable: true,
+    defaultSelectFirst: false,
+  }
+)
+console.log(props, '3333333333333333333')
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | string[]): void
+  (e: 'confirm', value: string | string[]): void
+  (e: 'cancel'): void
+  (e: 'open'): void
+  (e: 'close'): void
+}>()
+
+const globalToast = useGlobalToast()
+const Zpaging = ref<any>(null)
+const config = ref<Config>({
+  columns: [],
+  primaryColumn: {
+    sourceId: '',
+    controlType: '',
+    mstrucId: '',
+    extControlType: '',
+  },
+  secondColumn: {
+    sourceId: '',
+    controlType: '',
+    mstrucId: '',
+    extControlType: '',
+  },
+  primaryCriterion: {
+    sourceId: '',
+    controlType: '',
+    mstrucId: '',
+    disabled: false,
+    defaultValue: '',
+    transDefaultValue: '',
+    required: false,
+    extControlType: '',
+    hidden: false,
+  },
+  criteria: [],
+  buttons: [],
+  id: '',
+  fields: [],
+  title: '',
+  type: '',
+  pointSourceId: '',
+  mstrucId: '',
+  relationNames: [],
+  readOnly: false,
+  displayConfig: [],
+  showType: 'table',
+  extShowConfig: {},
+  extDisplayConfig: {},
+})
+const datas = ref<Entities[]>([])
+const searchData = ref('')
+const enumColumn = ref<Enums>({})
+const selectData = ref<Record<string, string>>({}) // 选择数据
+
+// ★ 关键修改：使用独立的 ref 管理显示状态（参考 action-popup）
+const show = ref(false)
+
+// 格式化显示的选中值
+const displayValue = computed(() => {
+  const values = Object.values(selectData.value)
+  if (!values.length) return ''
+
+  if (props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis') {
+    return values[0]?.split('@R@')[1] || ''
+  }
+  return values.map(v => v.split('@R@')[1]).join(', ')
+})
+
+// 格式化选中的数据用于checkbox显示
+const selectDataFormat = computed(() => {
+  const newdata: Record<string, string> = {}
+  if (typeof selectData.value === 'object' && selectData.value !== null) {
+    Object.values(selectData.value).forEach(item => {
+      newdata[item.split('@R@')[0]] = item.split('@R@')[0]
+    })
+  }
+  return newdata
+})
+
+// 监听外部modelValue变化，同步到内部选择数据
+watch(
+  () => props.modelValue,
+  val => {
+    if (!val || (Array.isArray(val) && !val.length)) {
+      selectData.value = {}
+      return
+    }
+
+    const newData: Record<string, string> = {}
+    if (Array.isArray(val)) {
+      val.forEach(item => {
+        if (item && typeof item === 'string') {
+          const code = item.split('@R@')[0]
+          if (code) newData[code] = item
+        }
+      })
+    } else if (typeof val === 'string' && val) {
+      const code = val.split('@R@')[0]
+      if (code) newData[code] = val
+    }
+    selectData.value = newData
+  },
+  { immediate: true }
+)
+
+// 显示地址信息
+const showAddressInfo = computed(() => {
+  return props.extControlType === 'relselect-extdis'
+})
+
+// checkbox类型
+const checkboxType = computed(() => {
+  return ['relselect', 'relselect-extdis'].includes(props.extControlType) ? '' : 'square'
+})
+
+// 格式化地址
+const formatAddress = (value: string) => {
+  return (value?.split(',') || [])[2] || ''
+}
+
+// 标记是否已获取配置
+const isConfigLoaded = ref(false)
+// ★ 防止重复加载
+const isLoading = ref(false)
+// ★ 防止 z-paging 初始化时与手动 reload 重复请求
+const hasInitialized = ref(false)
+
+// ★ 是否已完成默认首项选中
+const hasDefaultSelected = ref(false)
+
+// ★ 默认选择第一项：数据加载完成后自动选中第一条并回显
+watch(datas, val => {
+  if (!props.defaultSelectFirst || !val?.length || hasDefaultSelected.value || Object.keys(selectData.value).length > 0)
+    return
+  const first = val[0]
+  selectData.value[first.code] = `${first.code}@R@${first.fieldMap[config.value.primaryColumn.sourceId]}`
+  const result =
+    props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis'
+      ? selectData.value[first.code]
+      : Object.values(selectData.value)
+  emit('update:modelValue', result)
+  hasDefaultSelected.value = true
+})
+
+// 获取页面配置
+async function getPageConfig() {
+  if (isConfigLoaded.value && config.value.id) return // 避免重复请求
+
+  try {
+    const res = await pageConfig(props.sourceId)
+    if (res.ltmplConfig) {
+      config.value = res.ltmplConfig
+      isConfigLoaded.value = true
+      await getEnums()
+      console.log('[WuiSelectPopup] ✅ 配置加载完成', config.value.title)
+    }
+  } catch (error) {
+    console.error('[WuiSelectPopup] ❌ 配置加载失败:', error)
+    throw error
+  }
+}
+
+// 获取枚举数据
+async function getEnums() {
+  try {
+    const params: string[] = []
+    config.value.criteria?.forEach((item: any) => {
+      if (item.controlType === 'select' || item.controlType === 'multiselect') {
+        params.push(`mstrucIds=${item.mstrucId}`)
+      }
+    })
+
+    if (!params.length) return
+    const res = await enums(params.join('&'))
+    enumColumn.value = res.enumMap || {}
+  } catch (error) {
+    console.log('error:', error)
+  }
+}
+
+// 查询列表数据（完整流程：config -> key -> data）
+async function queryList(pageNo: number, pageSize: number) {
+  // ★ 只防正在进行的重复请求（分页不拦截）
+  if (pageNo === 1 && isLoading.value) return
+
+  // ★ z-paging 组件初始化时自动触发 @query，popup 未打开时跳过
+  // （只跳过第一次，后续打开 popup 后的查询正常放行）
+  if (!show.value && !hasInitialized.value) {
+    hasInitialized.value = true
+    Zpaging.value.complete([])
+    return
+  }
+
+  if (pageNo === 1) isLoading.value = true
+
+  try {
+    // 步骤1：确保配置已加载
+    if (!isConfigLoaded.value) {
+      console.log('[WuiSelectPopup] 正在加载配置...')
+      await getPageConfig()
+      console.log('[WuiSelectPopup] 配置已加载，开始查询数据')
+    }
+
+    // 步骤2：构建查询参数
+    const search = uni.getStorageSync('paramsData')?.changedData || {}
+    const newParams = {
+      thirdCriterion: search.relValueField3 || '',
+      secondCriterion: search.relValueField?.toString() || '',
+    }
+
+    const params = Object.entries(newParams)
+      .map(([key, value]) => `${key}=${value}`)
+      .join('&')
+    let qre = searchData.value ? `${searchData.value}&${params}` : params
+
+    if (config.value.defaultCriteriaValue) {
+      for (const key in config.value.defaultCriteriaValue) {
+        if (Object.prototype.hasOwnProperty.call(config.value.defaultCriteriaValue, key)) {
+          const element = config.value.defaultCriteriaValue[key]
+          if (!qre.includes(key)) {
+            qre = `${qre}&${key}=${element}`
+          }
+        }
+      }
+    }
+
+    // 步骤3：获取查询Key
+    console.log('[WuiSelectPopup] 请求 pageKey，sourceId:', props.sourceId)
+    const res = await pageKey(props.sourceId, '', qre)
+    if (!res?.key) {
+      throw new Error('未获取到查询Key')
+    }
+    console.log('[WuiSelectPopup] 获取到 key:', res.key)
+
+    // 步骤4：使用Key请求数据
+    const data = await listData(res.key, pageNo, pageSize)
+    console.log(`[WuiSelectPopup] 获取到数据，第${pageNo}页，共 ${data.entities?.length} 条`)
+    Zpaging.value.complete(data.entities)
+  } catch (error) {
+    console.error('[WuiSelectPopup] ❌ 数据加载失败:', error)
+    Zpaging.value.complete(false)
+  } finally {
+    if (pageNo === 1) isLoading.value = false
+  }
+}
+
+// 处理选项变化
+function handleChange(item: Entities) {
+  if (selectData.value[item.code]) {
+    delete selectData.value[item.code]
+    return
+  }
+
+  // 单选模式清空已有选择
+  if (props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis') {
+    selectData.value = {}
+  }
+
+  selectData.value[item.code] = `${item.code}@R@${item.fieldMap[config.value.primaryColumn.sourceId]}`
+}
+
+// 提交确认
+function confirm() {
+  const keys = Object.keys(selectData.value)
+  if (!keys.length) {
+    globalToast.warning(`请选择${props.title}`)
+    return
+  }
+
+  const payload = Object.values(selectData.value)
+
+  // 单选返回字符串，多选返回数组
+  let result: string | string[]
+  if (props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis') {
+    result = payload[0]
+  } else {
+    result = payload
+  }
+
+  emit('update:modelValue', result)
+  emit('confirm', result)
+  show.value = false
+}
+
+// 取消
+function cancel() {
+  emit('cancel')
+  show.value = false
+}
+
+// 清空选择
+function clear() {
+  selectData.value = {}
+  emit(
+    'update:modelValue',
+    props.extControlType === 'relselect' || props.extControlType === 'relselect-extdis' ? '' : []
+  )
+}
+
+// 搜索提交
+function submitSearch(data: any) {
+  searchData.value = data
+  Zpaging.value.reload()
+}
+
+// ★ 打开 popup - 直接操作内部 ref
+function openPopup(e?: any) {
+  e?.stopPropagation?.()
+  if (props.readonly) return
+  console.log('[WuiSelectPopup] 🎯 点击触发打开 Popup')
+  show.value = true
+  emit('open')
+}
+
+// 打开popup时初始化数据
+watch(show, async val => {
+  console.log('[WuiSelectPopup] 📢 show 状态变化:', val)
+  if (val) {
+    if (isLoading.value) return // ★ 防重复（正在请求中不重复触发）
+    await nextTick()
+    // ★ 不重置 isConfigLoaded（配置只需加载一次）
+    hasInitialized.value = false // ★ 允许 reload 触发查询
+    if (Zpaging.value) {
+      Zpaging.value.reload()
+    } else {
+      setTimeout(() => {
+        Zpaging.value?.reload()
+      }, 300)
+    }
+  } else {
+    emit('close')
+  }
+})
+
+// ★ 监听 edit-page 返回后刷新数据（通过 sourceId 过滤，只响应自己的刷新）
+function handleRefresh(refreshSourceId: string) {
+  if (refreshSourceId !== props.sourceId) return
+  console.log('[WuiSelectPopup] 🔄 收到刷新信号，重新加载数据')
+  if (show.value && Zpaging.value && !isLoading.value) {
+    isConfigLoaded.value = false // ★ 刷新时重新加载配置
+    hasInitialized.value = false // ★ 允许 reload 触发
+    Zpaging.value.reload()
+  }
+}
+
+onMounted(() => {
+  uni.$on('selectPopup:refresh', handleRefresh)
+})
+
+onUnmounted(() => {
+  uni.$off('selectPopup:refresh', handleRefresh)
+  uni.removeStorageSync('paramsData')
+})
+
+// 暴露方法给父组件
+defineExpose({
+  clear,
+  confirm,
+  cancel,
+  open: openPopup,
+  close: () => {
+    show.value = false
+  },
+})
+</script>
+
+<template>
+  <view class="wui-select-popup-wrapper dark:bg-[var(--wot-dark-background)]">
+    <!-- ★ 触发区域 - 原生表单样式（左标签 + 中内容 + 右箭头） -->
+    <view v-if="!show" class="trigger-cell" @click="openPopup">
+      <!-- 左侧标签 -->
+      <text v-if="label" class="cell-label dark:text-white">
+        {{ label }}
+      </text>
+
+      <!-- 中间内容区 -->
+      <view class="cell-content dark:text-white">
+        <text v-if="displayValue && displayValue !== 'null'" class="cell-value">
+          {{ displayValue || '' }}
+        </text>
+        <text v-else class="cell-placeholder">
+          {{ placeholder || `请选择${title || label}` }}
+        </text>
+      </view>
+
+      <!-- 右侧箭头 -->
+      <view class="cell-arrow">
+        <wd-icon v-if="clearable && displayValue" name="close-circle" size="16px" @click.stop="clear" />
+        <wd-icon name="right" v-else size="16px"></wd-icon>
+      </view>
+    </view>
+
+    <!-- ★ 底部弹出的Popup - 修复内容溢出 -->
+    <wd-popup
+      v-model="show"
+      position="bottom"
+      :z-index="999999"
+      custom-style="border-radius: 24rpx 24rpx 0 0; overflow: hidden;"
+      class="dark:bg-[#1b1b1e]"
+      safe-area-inset-bottom
+      @close="
+        () => {
+          show = false
+        }
+      "
+    >
+      <view class="select-popup-container dark:bg-[#1b1b1e]">
+        <!-- 标题栏 - 固定高度不参与滚动 -->
+        <view
+          class="popup-header flex items-center justify-between px-4 py-3 border-b border-gray-200 shrink-0 dark:text-white"
+        >
+          <text class="text-base font-bold">选择{{ title }}</text>
+          <wd-icon name="close-circle" size="16px" @click="cancel" />
+        </view>
+
+        <!-- 列表内容区 - 占据剩余空间并可滚动 -->
+        <view class="popup-body">
+          <z-paging
+            ref="Zpaging"
+            v-model="datas"
+            :show-loading-more-when-reload="true"
+            :fixed="false"
+            @query="queryList"
+          >
+            <template #top>
+              <Search
+                :enum-column="enumColumn"
+                :criteria="config.criteria"
+                :primary-criterion="config.primaryCriterion"
+                @submit="submitSearch"
+              />
+              <view>
+                <listTopButtons :buttons="config.buttons" :source-id="sourceId" :page-title="pageTitle" />
+              </view>
+              <slot name="top" />
+            </template>
+
+            <foldCard
+              v-for="(item, index) in datas"
+              :key="item.code"
+              :index="index"
+              :data="item"
+              :columns="config.columns"
+              :primary-column="config.primaryColumn"
+              :second-column="config.secondColumn"
+              :model="foldCardModel"
+              :groups="config"
+              :source-id="sourceId"
+              @click="handleChange(item)"
+            >
+              <template #select>
+                <wd-checkbox
+                  :true-value="`${item.code}`"
+                  false-value=""
+                  :model-value="selectDataFormat[item.code]"
+                  :type="checkboxType"
+                />
+              </template>
+
+              <template #addressInfo v-if="showAddressInfo">
+                <div>{{ item.fieldMap[config.extDisplayConfig?.secondColumn?.sourceId] }}</div>
+              </template>
+              <template #detailAddress v-if="showAddressInfo">
+                <div>{{ formatAddress(item.fieldMap[config.extDisplayConfig?.cardShowCols?.[0]?.sourceId]) }}</div>
+              </template>
+            </foldCard>
+
+            <template #bottom>
+              <view class="popup-footer flex justify-center gap-4 p-4 border-t border-gray-200">
+                <wd-button plain custom-class="flex-1" @click="cancel">取消</wd-button>
+                <wd-button type="primary" custom-class="flex-1" @click="confirm">确定</wd-button>
+              </view>
+            </template>
+          </z-paging>
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.wui-select-popup-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+// ★ 触发区域 - 原生表单样式（类似微信picker）
+.trigger-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.2s;
+
+  &:active {
+    background-color: #f5f7fa; // 点击反馈
+  }
+
+  // 左侧标签 - 固定宽度，不换行
+  .cell-label {
+    flex-shrink: 0;
+    margin-right: 24rpx;
+    white-space: nowrap;
+  }
+
+  // 中间内容区 - 占据剩余空间
+  .cell-content {
+    flex: 1;
+    min-width: 0; // 允许文本溢出省略
+
+    .cell-value {
+      text-align: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
+
+    .cell-placeholder {
+      color: #c0c4cc; // 灰色占位符
+      text-align: left;
+    }
+  }
+
+  // 右侧箭头
+  .cell-arrow {
+    flex-shrink: 0;
+    margin-left: 16rpx;
+    display: flex;
+    align-items: center;
+
+    .arrow-text {
+      color: #c0c4cc;
+      transform: scaleX(0.8); // 稍微压窄箭头
+    }
+  }
+}
+
+// Popup 容器 - 使用 flex 布局控制溢出
+.select-popup-container {
+  display: flex;
+  flex-direction: column;
+  height: 75vh; // 固定高度
+  max-height: 80vh; // 最大高度
+  overflow: hidden; // 防止内容溢出
+}
+
+// 标题栏
+.popup-header {
+  flex-shrink: 0; // 不压缩
+  z-index: 10;
+}
+
+// 内容区域 - 可滚动
+.popup-body {
+  flex: 1; // 占据剩余空间
+  overflow: hidden; // 超出隐藏，由 z-paging 管理滚动
+  min-height: 0; // ★ 关键：允许 flex 子元素收缩
+
+  // 让 z-paging 填满整个容器
+  :deep(.z-paging-content) {
+    height: 100% !important;
+  }
+}
+
+// 底部按钮区
+.popup-footer {
+  flex-shrink: 0; // 不压缩
+  position: sticky;
+  bottom: 0;
+}
+</style>