af-mobile-client-vue3 1.3.22 → 1.3.24

package/package.json

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

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

@@ -8,8 +8,10 @@ import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEva
 import LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
 import {
   showConfirmDialog,
+  ActionSheet as VanActionSheet,
   BackTop as VanBackTop,
   Button as VanButton,
+  Checkbox as VanCheckbox,
   Col as VanCol,
   Icon as VanIcon,
   List as VanList,
@@ -33,6 +35,9 @@ const {
   customEdit = false,
   customDelete = false,
   hideAllActions = false,
+  // 多选相关配置
+  enableMultiSelect = false, // 是否启用多选功能
+  multiSelectActions = [], // 多选操作按钮配置
 } = defineProps<{
   configName?: string
   fixQueryForm?: object
@@ -49,6 +54,14 @@ const {
   customDelete?: boolean
   // 是否隐藏所有操作按钮
   hideAllActions?: boolean
+  // 多选相关配置
+  enableMultiSelect?: boolean // 是否启用多选功能
+  multiSelectActions?: Array<{
+    name: string
+    key?: string
+    color?: string
+    icon?: string
+  }> // 多选操作按钮配置
 }>()
 
 const emit = defineEmits<{
@@ -58,6 +71,9 @@ const emit = defineEmits<{
   (e: 'add'): void
   (e: string, item: any): void
   (e: 'updateCondition', params: any): void
+  // 多选相关事件
+  (e: 'multiSelectAction', action: string, selectedItems: any[]): void
+  (e: 'selectionChange', selectedItems: any[]): void
 }>()
 
 const userState = useUserStore().getLogin()
@@ -133,6 +149,12 @@ const finishedText = ref('加载完成')
 // 避免查询多次
 const isLastPage = ref(false)
 
+// 多选相关状态
+const isMultiSelectMode = ref(false) // 是否处于多选模式
+const selectedItems = ref<Set<string>>(new Set()) // 选中的项目ID集合
+const longPressTimer = ref<number | null>(null) // 长按定时器
+const longPressDelay = 500 // 长按延迟时间（毫秒）
+
 // 条件参数(查询框)
 const conditionParams = ref(undefined)
 
@@ -149,6 +171,10 @@ const buttonPermissions = ref([])
 // 默认参数
 const defaultParams = {}
 
+// ActionSheet相关状态
+const showActionSheet = ref(false)
+const actionSheetActions = ref([])
+
 const slots = useSlots()
 
 // 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
@@ -546,6 +572,144 @@ defineExpose({
   updateConditionAndRefresh,
   onRefresh,
 })
+
+// 多选相关计算属性
+const selectedItemsArray = computed(() => {
+  return list.value.filter(item => selectedItems.value.has(item[idKey]))
+})
+
+const hasSelectedItems = computed(() => {
+  return selectedItems.value.size > 0
+})
+
+// 多选相关方法
+function startLongPress(item: any) {
+  if (!enableMultiSelect)
+    return
+
+  longPressTimer.value = window.setTimeout(() => {
+    enterMultiSelectMode(item)
+  }, longPressDelay)
+}
+
+function cancelLongPress() {
+  if (longPressTimer.value) {
+    clearTimeout(longPressTimer.value)
+    longPressTimer.value = null
+  }
+}
+
+function enterMultiSelectMode(item: any) {
+  isMultiSelectMode.value = true
+  selectedItems.value.clear()
+  const itemId = item[idKey]
+  selectedItems.value.add(itemId)
+  updateActionSheetActions()
+}
+
+function exitMultiSelectMode() {
+  isMultiSelectMode.value = false
+  selectedItems.value.clear()
+  showActionSheet.value = false
+}
+
+function toggleItemSelection(item: any) {
+  if (!isMultiSelectMode.value)
+    return
+
+  const itemId = item[idKey]
+  console.log('Toggle selection:', { itemId, currentSelectedItems: Array.from(selectedItems.value) })
+
+  if (selectedItems.value.has(itemId)) {
+    selectedItems.value.delete(itemId)
+  }
+  else {
+    selectedItems.value.add(itemId)
+  }
+
+  console.log('After toggle:', { selectedItems: Array.from(selectedItems.value) })
+
+  // 更新ActionSheet状态，但不退出多选模式
+  updateActionSheetActions()
+
+  emit('selectionChange', selectedItemsArray.value)
+}
+
+function updateActionSheetActions() {
+  if (multiSelectActions.length > 0) {
+    actionSheetActions.value = multiSelectActions.map(action => ({
+      name: action.name,
+      key: action.key || action.name,
+      color: action.color || '#000000',
+      icon: action.icon || 'records-o',
+    }))
+  }
+  else {
+    // 默认操作按钮
+    actionSheetActions.value = [
+      { name: '批量操作', key: 'batchOperation', color: '#000000', icon: 'records-o' },
+    ]
+  }
+
+  if (hasSelectedItems.value) {
+    showActionSheet.value = true
+  }
+}
+
+function handleActionSheetSelect(action: any) {
+  showActionSheet.value = false
+  emit('multiSelectAction', action, selectedItemsArray.value)
+
+  // 执行操作后退出多选模式
+  exitMultiSelectMode()
+}
+
+function handleCardClick(item: any, event: any) {
+  // 如果处于多选模式，阻止默认的详情跳转
+  if (isMultiSelectMode.value) {
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+
+  // 正常点击跳转到详情
+  emit('toDetail', item)
+}
+
+function handleTitleClick(item: any, event: any) {
+  event.stopPropagation()
+
+  if (isMultiSelectMode.value) {
+    // 多选模式下，点击标题切换选中状态
+    toggleItemSelection(item)
+  }
+  else {
+    // 非多选模式下，正常跳转到详情
+    emit('toDetail', item)
+  }
+}
+
+function handleCheckboxChange(item: any, checked: boolean) {
+  if (!isMultiSelectMode.value)
+    return
+
+  const itemId = item[idKey]
+  console.log('Checkbox change:', { itemId, checked, currentSelectedItems: Array.from(selectedItems.value) })
+
+  if (checked) {
+    selectedItems.value.add(itemId)
+  }
+  else {
+    selectedItems.value.delete(itemId)
+  }
+
+  console.log('After change:', { selectedItems: Array.from(selectedItems.value) })
+
+  // 更新ActionSheet状态，但不退出多选模式
+  updateActionSheetActions()
+
+  emit('selectionChange', selectedItemsArray.value)
+}
 </script>
 
 <template>
@@ -563,6 +727,7 @@ defineExpose({
         <VanSearch
           v-model="searchValue"
           class="title-search"
+          :class="{ 'multi-select-mode': isMultiSelectMode }"
           clearable
           placeholder="综合查询框..."
           shape="round"
@@ -576,6 +741,7 @@ defineExpose({
           type="primary"
           size="small"
           class="add-action-btn"
+          :disabled="isMultiSelectMode"
           @click="addOption"
         />
       </VanCol>
@@ -604,6 +770,26 @@ defineExpose({
       </VanCol>
     </VanRow>
     <slot name="search-after" />
+
+    <!-- 多选功能提示 -->
+    <div v-if="enableMultiSelect && !isMultiSelectMode" class="multi-select-tip">
+      <VanIcon name="info-o" />
+      <span>长按卡片可进入多选模式</span>
+    </div>
+
+    <!-- 多选模式提示 -->
+    <div v-if="isMultiSelectMode" class="multi-select-tip">
+      <VanIcon name="info-o" />
+      <span>多选模式 - 已选择 {{ selectedItems.size }} 项</span>
+      <VanButton
+        size="small"
+        type="default"
+        @click="exitMultiSelectMode"
+      >
+        退出
+      </VanButton>
+    </div>
+
     <div class="main">
       <VanPullRefresh v-model="refreshing" :success-text="finishedText" head-height="70" @refresh="onRefresh">
         <template v-if="!isError">
@@ -615,14 +801,35 @@ defineExpose({
             :immediate-check="isInitQuery"
             @load="onLoad"
           >
-            <div v-for="(item, index) in list" :key="`card_${index}`" class="card_item_main">
-              <VanRow gutter="20" class="card_item_header" align="center" @click="emit('toDetail', item)">
+            <div
+              v-for="(item, index) in list"
+              :key="`card_${index}`"
+              class="card_item_main"
+              :class="{ 'multi-select-mode': isMultiSelectMode }"
+              @touchstart="startLongPress(item)"
+              @touchend="cancelLongPress"
+              @touchcancel="cancelLongPress"
+              @mousedown="startLongPress(item)"
+              @mouseup="cancelLongPress"
+              @mouseleave="cancelLongPress"
+            >
+              <VanRow gutter="20" class="card_item_header" align="center" @click="handleCardClick(item, $event)">
                 <VanCol :span="24">
-                  <div class="title-row">
+                  <div class="title-row" :class="{ 'multi-select-title-row': isMultiSelectMode }">
+                    <!-- 多选模式下的选择框 -->
+                    <div v-if="isMultiSelectMode" class="selection-checkbox">
+                      <VanCheckbox
+                        :model-value="selectedItems.has(item[idKey])"
+                        shape="square"
+                        @update:model-value="(checked) => handleCheckboxChange(item, checked)"
+                      />
+                    </div>
                     <div v-for="(column) in mainColumns" :key="`main_${column.dataIndex}`" class="main-title">
                       <p
                         class="card_item_title"
                         :style="handleFunctionStyle(column.styleFunctionForValue, item)"
+                        :class="{ 'selectable-title': isMultiSelectMode }"
+                        @click="handleTitleClick(item, $event)"
                       >
                         {{ item[column.dataIndex] ?? '--' }}
                       </p>
@@ -646,13 +853,14 @@ defineExpose({
                         class="action-button"
                         :icon="btn.btnIcon"
                         size="small"
+                        :disabled="isMultiSelectMode"
                         @click.stop="handleButtonClick(btn, item)"
                       />
                     </div>
                   </div>
                 </VanCol>
               </VanRow>
-              <VanRow gutter="20" class="card_item_details" @click="emit('toDetail', item)">
+              <VanRow gutter="20" class="card_item_details" @click="handleCardClick(item, $event)">
                 <VanCol v-for="column of detailColumns" :key="`details_${column.dataIndex}`" :span="column.span">
                   <p>
                     {{ (column.showLabel === undefined || column.showLabel) ? `${column.title}: ` : '' }}
@@ -664,7 +872,7 @@ defineExpose({
                   </p>
                 </VanCol>
               </VanRow>
-              <VanRow v-if="tagList.length > 0" gutter="20" class="tag-row" @click="emit('toDetail', item)">
+              <VanRow v-if="tagList.length > 0" gutter="20" class="tag-row" @click="handleCardClick(item, $event)">
                 <VanCol :span="24">
                   <div class="tag-container">
                     <div class="tag-wrapper">
@@ -697,7 +905,7 @@ defineExpose({
                 v-if="footColumns && footColumns.length > 0"
                 gutter="20"
                 class="card_item_footer"
-                @click="emit('toDetail', item)"
+                @click="handleCardClick(item, $event)"
               >
                 <VanCol v-for="column of footColumns" :key="`foot_${column.dataIndex}`" :span="12">
                   <p>
@@ -724,7 +932,7 @@ defineExpose({
                     @select="onSelectMenu(item, $event)"
                   >
                     <template #reference>
-                      <div class="more-button">
+                      <div class="more-button" :class="{ disabled: isMultiSelectMode }">
                         <span>⋯</span>
                       </div>
                     </template>
@@ -739,6 +947,7 @@ defineExpose({
                         type="primary"
                         size="normal"
                         class="action-btn"
+                        :disabled="isMultiSelectMode"
                         @click="onSelectMenu(item, button)"
                       >
                         {{ button.text }}
@@ -756,6 +965,14 @@ defineExpose({
       </VanPullRefresh>
       <VanBackTop />
     </div>
+
+    <!-- 多选操作面板 -->
+    <VanActionSheet
+      v-model:show="showActionSheet"
+      :actions="actionSheetActions"
+      :overlay="false"
+      @select="handleActionSheetSelect"
+    />
   </div>
 </template>
 
@@ -790,6 +1007,30 @@ defineExpose({
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
       transition: all 0.3s ease;
       border: 1px solid rgba(0, 0, 0, 0.04);
+      position: relative;
+
+      &.multi-select-mode {
+        border-color: var(--van-primary-color);
+        background-color: rgba(25, 137, 250, 0.02);
+      }
+
+      .selection-checkbox {
+        position: relative;
+        margin-right: 8px;
+        z-index: 1;
+        flex-shrink: 0;
+
+        :deep(.van-checkbox__icon) {
+          border-color: var(--van-primary-color);
+          border-radius: 2px;
+        }
+
+        :deep(.van-checkbox__icon--checked) {
+          background-color: var(--van-primary-color);
+          border-color: var(--van-primary-color);
+          border-radius: 2px;
+        }
+      }
 
       &:active {
         transform: scale(0.98);
@@ -805,6 +1046,10 @@ defineExpose({
           margin-bottom: 2px;
           width: 100%;
 
+          &.multi-select-title-row {
+            padding-left: 0;
+          }
+
           .main-title {
             display: inline-flex;
             align-items: center;
@@ -813,6 +1058,21 @@ defineExpose({
               font-weight: 700;
               color: var(--van-text-color);
               margin: 0;
+
+              &.selectable-title {
+                cursor: pointer;
+                padding: 4px 8px;
+                border-radius: 4px;
+                transition: all 0.2s ease;
+
+                &:hover {
+                  background-color: rgba(25, 137, 250, 0.1);
+                }
+
+                &:active {
+                  background-color: rgba(25, 137, 250, 0.2);
+                }
+              }
             }
           }
 
@@ -964,6 +1224,12 @@ defineExpose({
             background-color: var(--van-background-2);
             transform: scale(0.95);
           }
+
+          &.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+          }
         }
 
         .action-btn {
@@ -1033,7 +1299,8 @@ defineExpose({
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 100;
+
     .add-col {
       display: flex;
       align-items: center;
@@ -1064,6 +1331,10 @@ defineExpose({
       width: 100%;
       padding: var(--van-search-padding);
       background-color: transparent;
+
+      &.multi-select-mode {
+        opacity: 0.8;
+      }
     }
     :deep(.van-search__content) {
       border-radius: 8px;
@@ -1113,5 +1384,48 @@ defineExpose({
       }
     }
   }
+
+  .multi-select-hint {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 6px;
+    margin: 8px 12px;
+    font-size: var(--van-font-size-sm);
+    color: var(--van-text-color-2);
+
+    .van-icon {
+      margin-right: 6px;
+      color: var(--van-text-color-3);
+    }
+
+    span {
+      flex: 1;
+    }
+  }
+
+  .multi-select-tip {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background-color: rgba(25, 137, 250, 0.1);
+    border: 1px solid rgba(25, 137, 250, 0.2);
+    border-radius: 6px;
+    margin: 8px 12px;
+    font-size: var(--van-font-size-sm);
+    color: var(--van-primary-color);
+
+    .van-icon {
+      margin-right: 6px;
+    }
+
+    span {
+      flex: 1;
+      margin-right: 8px;
+    }
+  }
 }
 </style>