fix: Experts 操作列太宽 (admin 320/manager 240 → admin 120+更多/manager 180)
原操作列 1 个 column + :width="isAdmin ? 320 : 240", 5/3 个按钮排成一行 但实际内容仅 ~190/76px, 留白过多; 手机端 240/320 直接挤爆. 改造: - admin (5 个按钮): '审核' 外置 + '更多▼' 折叠次要 (修改/查看/启用/禁用/已拒绝) → width 320 → 120 - manager (≤3 个按钮): 全部外置 (审核/修改/已拒绝) → width 240 → 180 - 操作列拆为 v-if=isAdmin / v-else 两个独立 column - 加 onExpertMore 函数处理更多下拉 command 路由 - 加 ArrowDown icon import - mobile 操作列进一步紧凑: 字号 11px, padding 0 3px, is-right 缩窄 4px - 已拒绝 (查意见) 移入更多下拉, 仅 auditStatus=3 时显示 桌面端布局: 操作列从占 ~25% 桌面宽 → 占 ~10% 手机端: 操作列从 320px (撑爆) → 120/180px 紧凑
This commit is contained in:
@@ -94,19 +94,34 @@
|
||||
<template #default="{ row }">{{ fmtTime(row.auditTime) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="auditBy" label="审批人" width="120" align="center" />
|
||||
<el-table-column label="操作" :width="isAdmin ? 320 : 240" fixed="right">
|
||||
<!-- 操作列: manager 全部外置 (≤3 个), admin 折叠次要到 "更多" -->
|
||||
<el-table-column v-if="isAdmin" label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }"><div class="table-actions">
|
||||
<!-- 审核 (通过/拒绝): 两角色都有, manager 主业, admin 可兜底 -->
|
||||
<!-- 高频: 审核 -->
|
||||
<el-link :underline="false" type="primary" @click="onAudit(row)">审核</el-link>
|
||||
<!-- 修改: 两角色都有 (独立页编辑, route 自动决定回跳) -->
|
||||
<el-link :underline="false" type="primary" @click="goEdit(row)">修改</el-link>
|
||||
<!-- 查看 (只读详情): 仅 admin, manager 直接在审核 dialog 看 -->
|
||||
<el-link :underline="false" v-if="isAdmin" type="primary" @click="goView(row)">查看</el-link>
|
||||
<!-- 启用/禁用: 仅 admin, 是账号管理动作 (同步 sys_user.status) -->
|
||||
<el-link :underline="false" v-if="isAdmin" :type="row.status === 'N' ? 'success' : 'danger'" @click="row.status === 'N' ? onEnable(row) : onDisable(row)">
|
||||
{{ row.status === 'N' ? '恢复' : '禁用' }}
|
||||
<!-- 折叠: 修改 / 查看 / 启用/禁用 / 已拒绝 -->
|
||||
<el-dropdown trigger="hover" @command="(cmd) => onExpertMore(cmd, row)">
|
||||
<el-link :underline="false" class="op-dropdown">
|
||||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-link>
|
||||
<!-- 已拒绝 (查意见): 仅 auditStatus=3 时显示, 两角色都可见 -->
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="edit">修改</el-dropdown-item>
|
||||
<el-dropdown-item command="view">查看</el-dropdown-item>
|
||||
<el-dropdown-item :command="row.status === 'N' ? 'enable' : 'disable'">
|
||||
{{ row.status === 'N' ? '恢复' : '禁用' }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="row.auditStatus === '3'" command="view-opinion" divided>已拒绝 (查意见)</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div></template>
|
||||
</el-table-column>
|
||||
<!-- 操作列: manager 全部外置 (3 个以内不需要折叠) -->
|
||||
<el-table-column v-else label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }"><div class="table-actions">
|
||||
<el-link :underline="false" type="primary" @click="onAudit(row)">审核</el-link>
|
||||
<el-link :underline="false" type="primary" @click="goEdit(row)">修改</el-link>
|
||||
<el-link :underline="false" v-if="row.auditStatus === '3'" type="info" @click="onViewAuditOpinion(row)">已拒绝</el-link>
|
||||
</div></template>
|
||||
</el-table-column>
|
||||
@@ -224,7 +239,7 @@ import { useRouter, useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { bizList, bizUpdate } from '@/api/public'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Upload } from '@element-plus/icons-vue'
|
||||
import { Upload, ArrowDown } from '@element-plus/icons-vue'
|
||||
import AuditStatusTag from '@/components/AuditStatusTag.vue'
|
||||
import ImportResultDialog from '@/components/ImportResultDialog.vue'
|
||||
|
||||
@@ -248,6 +263,15 @@ function goNew() { router.push(listBasePath.value + '/new') }
|
||||
function goEdit(row) { router.push(listBasePath.value + '/edit/' + row.expertId) }
|
||||
function goView(row) { router.push(listBasePath.value + '/view/' + row.expertId) }
|
||||
|
||||
/** 操作列"更多"下拉统一入口 (admin 角色) */
|
||||
function onExpertMore(cmd, row) {
|
||||
if (cmd === 'edit') goEdit(row)
|
||||
else if (cmd === 'view') goView(row)
|
||||
else if (cmd === 'enable') onEnable(row)
|
||||
else if (cmd === 'disable') onDisable(row)
|
||||
else if (cmd === 'view-opinion') onViewAuditOpinion(row)
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -553,5 +577,15 @@ watch(() => route.fullPath, () => {
|
||||
|
||||
/* 表格字号收紧 */
|
||||
:deep(.el-table) { font-size: 12px !important; }
|
||||
|
||||
/* 操作列 mobile: 进一步紧凑, 按钮字号 11px / padding 0 3px */
|
||||
:deep(.table-actions) { gap: 0 !important; }
|
||||
:deep(.table-actions .el-link),
|
||||
:deep(.table-actions .op-dropdown) {
|
||||
font-size: 11px !important;
|
||||
padding: 0 3px !important;
|
||||
}
|
||||
/* 操作列宽度在 mobile 进一步缩窄 */
|
||||
:deep(.el-table .is-right) { padding-right: 4px !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user