From 30a3de5e8164f88fa11a92882c2b68f4b3f7c574 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 27 Jan 2026 18:59:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComDataTable/index.vue      | 193 ++++++++++++++++-----
 src/views/sMsSendManage/loopSend/index.vue |  28 +--
 2 files changed, 161 insertions(+), 60 deletions(-)

diff --git a/src/components/ComDataTable/index.vue b/src/components/ComDataTable/index.vue
index 7072fcc..ef1315b 100644
--- a/src/components/ComDataTable/index.vue
+++ b/src/components/ComDataTable/index.vue
@@ -182,6 +182,7 @@
                     :width="actionWidth"
                     :fixed="actionFixed"
                     align="center"
+                    class-name="action-column"
                 >
                     <template #default="{ row, $index }">
                         <slot name="action" :row="row" :index="$index">
@@ -207,6 +208,7 @@
                                     "
                                     @click="handleAction(action, row, $index)"
                                     v-hasPermi="action.permission"
+                                    class="action-button-item"
                                 >
                                     {{ action.label }}
                                 </ComButton>
@@ -229,55 +231,80 @@
                                             : action.disabled
                                     "
                                     @click="handleAction(action, row, $index)"
+                                    class="action-button-item"
                                 >
                                     {{ action.label }}
                                 </ComButton>
                             </template>
-                            <!-- 超过3个按钮时使用下拉菜单 -->
-                            <el-dropdown
+                            <!-- 超过3个按钮时使用弹出菜单 -->
+                            <el-popover
                                 v-if="moreActions.length > 0"
                                 trigger="click"
-                                @command="(cmd) => handleDropdownAction(cmd, row, $index)"
+                                placement="bottom-end"
+                                :width="140"
+                                popper-class="action-popover-menu"
+                                class="action-button-item"
                             >
-                                <ComButton
-                                    type="primary"
-                                    :size="computedSize === 'large' ? 'default' : 'small'"
-                                    link
-                                >
-                                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
-                                </ComButton>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <template v-for="(action, idx) in moreActions" :key="idx">
-                                            <!-- 有权限配置的菜单项，使用 v-hasPermi 指令 -->
-                                            <el-dropdown-item
-                                                v-if="action.permission"
-                                                :command="{ action, row, index: $index }"
-                                                :disabled="
-                                                    typeof action.disabled === 'function'
-                                                        ? action.disabled(row)
-                                                        : action.disabled
-                                                "
-                                                v-hasPermi="action.permission"
-                                            >
-                                                {{ action.label }}
-                                            </el-dropdown-item>
-                                            <!-- 没有权限配置的菜单项，不使用 v-hasPermi 指令（兼容旧代码） -->
-                                            <el-dropdown-item
-                                                v-else
-                                                :command="{ action, row, index: $index }"
-                                                :disabled="
-                                                    typeof action.disabled === 'function'
-                                                        ? action.disabled(row)
-                                                        : action.disabled
-                                                "
-                                            >
-                                                {{ action.label }}
-                                            </el-dropdown-item>
-                                        </template>
-                                    </el-dropdown-menu>
+                                <template #reference>
+                                    <ComButton
+                                        type="primary"
+                                        :size="
+                                            computedSize === 'large'
+                                                ? 'default'
+                                                : computedSize === 'small'
+                                                ? 'small'
+                                                : 'small'
+                                        "
+                                        link
+                                        class="more-action-button"
+                                    >
+                                        更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
+                                    </ComButton>
                                 </template>
-                            </el-dropdown>
+                                <div class="popover-menu-list">
+                                    <template v-for="(action, idx) in moreActions" :key="idx">
+                                        <!-- 有权限配置的菜单项，使用 v-hasPermi 指令 -->
+                                        <div
+                                            v-if="action.permission"
+                                            v-hasPermi="action.permission"
+                                            class="popover-menu-item"
+                                            :class="{
+                                                'is-disabled':
+                                                    typeof action.disabled === 'function'
+                                                        ? action.disabled(row)
+                                                        : action.disabled,
+                                            }"
+                                            @click="
+                                                !(typeof action.disabled === 'function'
+                                                    ? action.disabled(row)
+                                                    : action.disabled) &&
+                                                    handleAction(action, row, $index)
+                                            "
+                                        >
+                                            {{ action.label }}
+                                        </div>
+                                        <!-- 没有权限配置的菜单项，不使用 v-hasPermi 指令（兼容旧代码） -->
+                                        <div
+                                            v-else
+                                            class="popover-menu-item"
+                                            :class="{
+                                                'is-disabled':
+                                                    typeof action.disabled === 'function'
+                                                        ? action.disabled(row)
+                                                        : action.disabled,
+                                            }"
+                                            @click="
+                                                !(typeof action.disabled === 'function'
+                                                    ? action.disabled(row)
+                                                    : action.disabled) &&
+                                                    handleAction(action, row, $index)
+                                            "
+                                        >
+                                            {{ action.label }}
+                                        </div>
+                                    </template>
+                                </div>
+                            </el-popover>
                         </slot>
                     </template>
                 </el-table-column>
@@ -298,7 +325,7 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { useFullscreen } from '@vueuse/core'
-import { Operation, FullScreen, Setting, Rank, Refresh } from '@element-plus/icons-vue'
+import { Operation, FullScreen, Setting, Rank, Refresh, ArrowDown } from '@element-plus/icons-vue'
 import draggable from 'vuedraggable/dist/vuedraggable.common'
 import Pagination from '@/components/Pagination/index.vue'
 import ComButton from '@/components/ComButton/index.vue'
@@ -475,12 +502,12 @@ const hasActions = computed(() => {
 
 // 可见的操作按钮（前3个）
 const visibleActions = computed(() => {
-    return props.actionColumns.slice(0, 3)
+    return props.actionColumns.slice(0, 2)
 })
 
 // 更多的操作按钮（超过3个的部分）
 const moreActions = computed(() => {
-    return props.actionColumns.slice(3)
+    return props.actionColumns.slice(2)
 })
 
 // 初始化列配置
@@ -719,9 +746,83 @@ defineExpose({
     box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
 }
 
-.setting-icon {
+/* 操作列单元格样式 - 确保按钮水平对齐 */
+:deep(.el-table__body-wrapper .el-table__body tbody tr td.action-column .cell),
+:deep(.el-table__fixed-right .el-table__fixed-body-wrapper tbody tr td.action-column .cell) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+    white-space: nowrap;
+}
+
+.action-button-item {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+}
+
+.more-action-button {
+    :deep(.el-icon--right) {
+        margin-left: 4px;
+        font-size: 12px;
+        vertical-align: middle;
+    }
+}
+
+/* Popover 菜单样式 */
+.popover-menu-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.popover-menu-item {
+    padding: 8px 20px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 14px;
+    color: #606266;
+    transition: all 0.2s;
+    line-height: 1.5;
+    white-space: nowrap;
+    user-select: none;
+
+    &:hover:not(.is-disabled) {
+        background-color: #ecf5ff;
+        color: #409eff;
+    }
+
+    &:active:not(.is-disabled) {
+        background-color: #d9ecff;
+    }
+
+    &.is-disabled {
+        color: #c0c4cc;
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+:deep(.action-popover-menu) {
+    padding: 4px 0;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid #e4e7ed;
+    background-color: #fff;
+    min-width: 120px;
+}
+
+:deep(.action-popover-menu .el-popover__title) {
+    display: none;
 }
 
 .column-setting-container {
diff --git a/src/views/sMsSendManage/loopSend/index.vue b/src/views/sMsSendManage/loopSend/index.vue
index 11533d5..22c92f7 100644
--- a/src/views/sMsSendManage/loopSend/index.vue
+++ b/src/views/sMsSendManage/loopSend/index.vue
@@ -126,20 +126,20 @@ const actionColumns = [
             })
         },
     },
-    // {
-    //     label: '编辑',
-    //     type: 'primary',
-    //     link: true,
-    //     handler: (row) => {
-    //         router.push({
-    //             path: '/sms/loopSendEdit/index',
-    //             query: {
-    //                 id: row.id,
-    //                 mode: 'edit',
-    //             },
-    //         })
-    //     },
-    // },
+    {
+        label: '编辑',
+        type: 'primary',
+        link: true,
+        handler: (row) => {
+            router.push({
+                path: '/sms/loopSendEdit/index',
+                query: {
+                    id: row.id,
+                    mode: 'edit',
+                },
+            })
+        },
+    },
 ]
 
 // 新增