代码优化

src/components/ComDataTable/index.vue

@@ -179,7 +179,7 @@
                 <el-table-column
                     v-if="showAction && hasActions"
                     label="操作"
-                    :width="actionWidth"
+                    :width="dynamicActionWidth"
                     :fixed="actionFixed"
                     align="center"
                     class-name="action-column"
@@ -187,6 +187,7 @@
                     <template #default="{ row, $index }">
                         <slot name="action" :row="row" :index="$index">
                             <!-- 前3个按钮直接显示 -->
+                            <div class="action-column-container">
                                 <template v-for="(action, idx) in visibleActions" :key="idx">
                                     <!-- 有权限配置的按钮，使用 v-hasPermi 指令 -->
                                     <ComButton
@@ -236,8 +237,65 @@
                                         {{ action.label }}
                                     </ComButton>
                                 </template>
+
+                                <el-dropdown
+                                    v-if="moreActions.length > 0"
+                                    @command="(cmd) => handleDropdownAction(cmd, row, $index)"
+                                >
+                                    <el-button type="primary" link size="small">
+                                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                                    </el-button>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <template
+                                                v-for="(action, idx) in moreActions"
+                                                :key="idx"
+                                            >
+                                                <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>
+
+                                                <el-dropdown-item
+                                                    v-else
+                                                    :command="{ action, row, index: $index }"
+                                                    :disabled="
+                                                        typeof action.disabled === 'function'
+                                                            ? action.disabled(row)
+                                                            : action.disabled
+                                                    "
+                                                >
+                                                    <!-- {{ action.label }} -->
+                                                    <ComButton
+                                                        :type="action.type || 'primary'"
+                                                        :size="
+                                                            computedSize === 'large'
+                                                                ? 'default'
+                                                                : 'small'
+                                                        "
+                                                        :link="action.link !== false"
+                                                        :plain="action.plain"
+                                                        :disabled="action.disabled"
+                                                    >
+                                                        {{ action.label }}
+                                                    </ComButton>
+                                                </el-dropdown-item>
+                                            </template>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+
                             <!-- 超过3个按钮时使用弹出菜单 -->
-                            <el-popover
+                            <!-- <el-popover
                                 v-if="moreActions.length > 0"
                                 trigger="click"
                                 placement="bottom-end"
@@ -263,7 +321,7 @@
                                 </template>
                                 <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"
@@ -283,7 +341,7 @@
                                         >
                                             {{ action.label }}
                                         </div>
-                                        <!-- 没有权限配置的菜单项，不使用 v-hasPermi 指令（兼容旧代码） -->
+                                    
                                         <div
                                             v-else
                                             class="popover-menu-item"
@@ -304,7 +362,7 @@
                                         </div>
                                     </template>
                                 </div>
-                            </el-popover>
+                            </el-popover> -->
                         </slot>
                     </template>
                 </el-table-column>
@@ -411,6 +469,17 @@ const props = defineProps({
         type: [String, Boolean],
         default: 'right',
     },
+
+    // 是否开启更多按钮
+    showMoreAction: {
+        type: Boolean,
+        default: false,
+    },
+    // 超过几个按钮时开启更多按钮
+    moreActionCount: {
+        type: Number,
+        default: 2,
+    },
     // 分页配置
     pagination: {
         type: Object,
@@ -502,12 +571,83 @@ const hasActions = computed(() => {
 
 // 可见的操作按钮（前3个）
 const visibleActions = computed(() => {
-    return props.actionColumns.slice(0, 2)
+    if (props.showMoreAction) {
+        return props.actionColumns.slice(0, props.moreActionCount)
+    }
+    return props.actionColumns
+    // return props.actionColumns.slice(0, 2)
 })
 
 // 更多的操作按钮（超过3个的部分）
 const moreActions = computed(() => {
-    return props.actionColumns.slice(2)
+    if (props.showMoreAction) {
+        return props.actionColumns.slice(props.moreActionCount)
+    }
+    return []
+})
+
+// 动态计算操作列宽度
+const dynamicActionWidth = computed(() => {
+    if (props.actionColumns.length === 0) {
+        return 120 // 默认最小宽度
+    }
+
+    // 计算单个按钮的宽度（包括文字、padding）
+    // link类型的按钮，中文字符约14px，英文字符约7px，加上左右padding约16px
+    const getButtonWidth = (label) => {
+        if (!label) return 50 // 最小按钮宽度
+        // 计算文字宽度：中文字符按14px，英文字符按7px
+        let textWidth = 0
+        for (let i = 0; i < label.length; i++) {
+            const char = label[i]
+            // 判断是否为中文字符（包括中文标点）
+            if (/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char)) {
+                textWidth += 18
+            } else {
+                textWidth += 7
+            }
+        }
+        const padding = 4 // 左右padding
+        return Math.max(textWidth + padding) // 最小50px
+    }
+
+    // 按钮之间的间距
+    const buttonGap = 0
+    // 列标题和单元格padding（减小两端padding）
+    const columnPadding = 0
+
+    if (props.showMoreAction) {
+        // 需要更多按钮时：显示 moreActionCount 个按钮 + 1个更多按钮
+        const visibleCount = props.moreActionCount
+        const moreButtonLabel = '更多'
+
+        let totalWidth = columnPadding
+
+        // 计算可见按钮的宽度
+        for (let i = 0; i < Math.min(visibleCount, props.actionColumns.length); i++) {
+            const action = props.actionColumns[i]
+            totalWidth += getButtonWidth(action.label) + buttonGap
+        }
+
+        // 加上更多按钮的宽度
+        totalWidth += getButtonWidth(moreButtonLabel)
+
+        return Math.max(totalWidth, 120) // 最小宽度120px
+    } else {
+        // 不需要更多按钮时：显示所有按钮
+        let totalWidth = columnPadding
+
+        props.actionColumns.forEach((action) => {
+            totalWidth += getButtonWidth(action.label) + buttonGap
+        })
+
+        // 减去最后一个按钮的间距
+        if (props.actionColumns.length > 0) {
+            totalWidth -= buttonGap
+        }
+
+        return Math.max(totalWidth, 100) // 最小宽度100px
+    }
 })
 
 // 初始化列配置
@@ -744,85 +884,35 @@ defineExpose({
 /* 操作列按钮样式 */
 :deep(.el-table__fixed-right) {
     box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
-}
 
-/* 操作列单元格样式 - 确保按钮水平对齐 */
+    /* 减小fixed right操作列的水平padding */
-:deep(.el-table__body-wrapper .el-table__body tbody tr td.action-column .cell),
+    .el-table__cell:last-child {
-:deep(.el-table__fixed-right .el-table__fixed-body-wrapper tbody tr td.action-column .cell) {
+        .cell {
-    display: flex;
+            padding-left: 8px !important;
-    align-items: center;
+            padding-right: 8px !important;
-    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 菜单样式 */
+/* 减小非fixed操作列的水平padding（操作列通常是最后一列） */
-.popover-menu-list {
+:deep(.el-table__body-wrapper),
-    padding: 0;
+:deep(.el-table__header-wrapper) {
-    margin: 0;
+    .el-table__body,
-    list-style: none;
+    .el-table__header {
+        .el-table__row {
+            .el-table__cell:last-child {
+                .cell {
+                    padding-left: 8px !important;
+                    padding-right: 8px !important;
+                }
+            }
+        }
+    }
 }
 
-.popover-menu-item {
+.setting-icon {
-    padding: 8px 20px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 16px;
-    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 {
@@ -895,4 +985,106 @@ defineExpose({
 :deep(.sortable-chosen) {
     background-color: #e0f2fe !important;
 }
+
+.action-column-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    position: relative;
+
+    .el-button {
+        margin-left: 0;
+    }
+
+    /* 修复el-dropdown悬停时的边框问题 */
+    :deep(.el-dropdown) {
+        display: inline-block;
+
+        .el-button {
+            border: none !important;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:hover,
+            &:focus,
+            &:active {
+                border: none !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+        }
+    }
+}
+
+/* 隐藏el-dropdown的popper定位参考线和边框 */
+:deep(.el-dropdown__popper) {
+    &::before,
+    &::after {
+        display: none !important;
+        content: none !important;
+    }
+
+    .el-popper__arrow {
+        display: none !important;
+
+        &::before,
+        &::after {
+            display: none !important;
+            content: none !important;
+        }
+    }
+}
+
+/* 修复下拉菜单的边框 */
+:deep(.el-dropdown-menu) {
+    &::before,
+    &::after {
+        display: none !important;
+        content: none !important;
+    }
+}
+
+/* 确保操作列中的下拉按钮没有额外的边框或伪元素 */
+.action-column-container :deep(.el-dropdown) {
+    position: relative;
+
+    &::before,
+    &::after {
+        display: none !important;
+        content: none !important;
+    }
+
+    .el-button {
+        position: relative;
+        border: none !important;
+        outline: none !important;
+
+        &::before,
+        &::after {
+            display: none !important;
+            content: none !important;
+        }
+
+        &:hover::before,
+        &:hover::after,
+        &:focus::before,
+        &:focus::after {
+            display: none !important;
+            content: none !important;
+        }
+    }
+}
+
+/* 修复表格单元格hover时可能显示的边框 */
+:deep(.el-table__body-wrapper .el-table__row:hover) {
+    .el-table__cell:last-child {
+        .action-column-container {
+            &::before,
+            &::after {
+                display: none !important;
+                content: none !important;
+            }
+        }
+    }
+}
 </style>

src/components/ComTable/index.vue

@@ -24,6 +24,8 @@
             :show-toolbar="showToolbar"
             :show-action="showAction"
             :action-columns="actionColumns"
+            :show-more-action="showMoreAction"
+            :more-action-count="moreActionCount"
             @selection-change="handleSelectionChange"
             @refresh="handleRefresh"
             @pagination-change="handlePaginationChange"
@@ -117,6 +119,16 @@ const props = defineProps({
         type: Function,
         default: null,
     },
+    // 是否开启更多按钮
+    showMoreAction: {
+        type: Boolean,
+        default: false,
+    },
+    // 超过几个按钮时开启更多按钮
+    moreActionCount: {
+        type: Number,
+        default: 2,
+    },
     // 初始化默认查询参数
     defaultQueryParams: {
         type: Object,

src/views/sMsSendManage/loopSend/index.vue

@@ -8,6 +8,8 @@
             :load-data="listLoopSendAPI"
             :show-toolbar="true"
             :show-action="true"
+            :show-more-action="true"
+            :more-action-count="2"
             :action-columns="actionColumns"
         >
             <template #toolbar>
@@ -102,7 +104,7 @@ const actionColumns = [
 
     {
         label: '立即执行一次',
-        type: 'primary',
+        type: 'success',
         link: true,
         handler: (row) => {
             runOneLoopMsgAPI({ id: row.id, jobId: row.jobId })
@@ -119,7 +121,7 @@ const actionColumns = [
     },
     {
         label: '编辑',
-        type: 'primary',
+        type: 'success',
         link: true,
         handler: (row) => {
             router.push({
@@ -138,13 +140,16 @@ const actionColumns = [
         link: true,
 
         handler: (row) => {
-            proxy.$modal.confirm('是否确认删除该循环发送任务？').then(async () => {
+            proxy.$modal
+                .confirm('是否确认删除该循环发送任务？')
+                .then(async () => {
                     const result = await delLoopSendAPI({ id: row.id, jobId: row.jobId })
                     if (result.code === 200) {
                         proxy.$modal.msgSuccess('删除成功')
                         comTableRef.value?.refresh()
                     }
                 })
+                .catch(() => {})
         },
     },
     {

src/views/sMsSendManage/loopSend/sendDetails.vue

@@ -29,9 +29,16 @@
                         prop="orgName"
                         label="部门"
                         align="center"
+                        width="180"
                         show-overflow-tooltip
                     />
                     <el-table-column prop="phone" label="电话" align="center" width="130" />
+                    <el-table-column
+                        prop="updateTime"
+                        label="提交时间"
+                        align="center"
+                        width="180"
+                    />
                     <el-table-column prop="sendTime" label="发送时间" align="center" width="180" />
                     <el-table-column prop="submitStatus" label="提交状态" align="center" />
                     <el-table-column label="发送状态" align="center" width="120">
@@ -110,6 +117,10 @@ const tableColumns = [
         prop: 'taskName',
         label: '任务名称',
     },
+    {
+        prop: 'loopTime',
+        label: '时间',
+    },
     {
         prop: 'msgType',
         label: '短信类型',
@@ -144,7 +155,7 @@ const actionColumns = [
 const detailDialogConfig = reactive({
     outerVisible: false,
     outerTitle: '发送记录详情',
-    outerWidth: '1000px',
+    outerWidth: '80%',
     minHeight: '400px',
     maxHeight: '80vh',
 })