wui-components-v2 1.1.57 → 1.1.59

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

@@ -0,0 +1,602 @@
+<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,
+  }
+)
+
+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)
+
+// ★ 是否已完成默认首项选中
+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) {
+  // ★ 首次加载时防重复（分页加载不拦截，pageNo > 1 时放行）
+  if (pageNo === 1 && isLoading.value) 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 // ★ 防重复
+    isConfigLoaded.value = false
+    await nextTick()
+    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
+    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">
+    <!-- ★ 触发区域 - 原生表单样式（左标签 + 中内容 + 右箭头） -->
+    <view v-if="!show" class="trigger-cell" @click="openPopup">
+      <!-- 左侧标签 -->
+      <text v-if="label" class="cell-label">
+        {{ label }}
+      </text>
+
+      <!-- 中间内容区 -->
+      <view class="cell-content">
+        <text v-if="displayValue" 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;"
+      safe-area-inset-bottom
+      @close="
+        () => {
+          show = false
+        }
+      "
+    >
+      <view class="select-popup-container">
+        <!-- 标题栏 - 固定高度不参与滚动 -->
+        <view
+          class="popup-header flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-white shrink-0"
+        >
+          <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 bg-white 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;
+  background-color: #fff;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.2s;
+
+  &:active {
+    background-color: #f5f7fa; // 点击反馈
+  }
+
+  // 左侧标签 - 固定宽度，不换行
+  .cell-label {
+    flex-shrink: 0;
+    color: #333;
+    margin-right: 24rpx;
+    white-space: nowrap;
+  }
+
+  // 中间内容区 - 占据剩余空间
+  .cell-content {
+    flex: 1;
+    min-width: 0; // 允许文本溢出省略
+
+    .cell-value {
+      color: #333;
+      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; // 最大高度
+  background-color: #fff;
+  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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wui-components-v2",
-  "version": "1.1.57",
+  "version": "1.1.59",
   "description": "wui 组件库",
   "author": "wgxshh",
   "license": "MIT",

package/utils/control-type-supportor.ts

@@ -142,7 +142,6 @@ ControlTypeSupportor.getControlType = function (fieldConfig: Fields, fieldValue?
   if (fieldValue && Array.isArray(fieldValue) && itemType === 'relselect' && fieldValue.length > 0 && fieldValue[0].includes('valid')) {
     itemType = 'file'
   }
-  console.log('itemType', itemType)
   return itemType
 }