This commit is contained in:
BianLzhaoMin
parent
3983922683
commit
30a3de5e81
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
// 新增
|
||||
|
|
|
|||
Loading…
Reference in New Issue