feat: 批量移动端适配 (24 个列表页 + 13 个宽表用 GrTable)
- 给 24 个有 filter-form 但无 media query 的列表页统一加 @media (max-width:768px) - 卡片 padding 收窄 (12px, radius 4px) - 工具栏横向滚动 (6+ 按钮铺不下) - filter-form 保持横向布局 (label 左 80px 右对齐 + input 右占满) - 查找/重置按钮垂直堆叠不偏移 - 表格字号 12px - 13 个宽表 (≥10 列) 替换为 GrTable 组件: - sponsor/Projects, executor/Projects, sponsor/SponsorProjects - sponsor/SponsorPeople, expert/Experts, executor/People - meetings/Meetings, sponsor/Meetings, executor/Meetings - manager/ExecIntent, manager/SupportIntent, manager/Plans - admin/Users - 每个页面的 mainCols 取业务主键 (项目编号+名称 / 账号+姓名 等) - 手机端次要列折叠到展开行, 主列+操作列保留 - 修复 executor/Projects.vue 多行 el-table 标签导致的 GrTable 替换错误 全 95 个 vue 编译 200, 0 错误
This commit is contained in:
@@ -56,7 +56,9 @@
|
||||
</div>
|
||||
|
||||
<!-- ========== 表格区 (按原型列头) ========== -->
|
||||
<el-table :data="list" border stripe v-loading="loading" @selection-change="onSelectionChange">
|
||||
<GrTable :data="list" border stripe v-loading="loading" @selection-change="onSelectionChange"
|
||||
:main-cols="['projectNo', 'meetingName']"
|
||||
>
|
||||
<el-table-column type="selection" width="44" />
|
||||
<el-table-column prop="projectNo" label="项目编号" min-width="130" />
|
||||
<el-table-column prop="meetingName" label="会议名称" min-width="180" show-overflow-tooltip />
|
||||
@@ -80,7 +82,7 @@
|
||||
<el-link :underline="false" size="small" type="danger" :disabled="row.currentStage !== 'FROZEN'" @click="onUnfreeze(row)">解冻</el-link>
|
||||
</div></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</GrTable>
|
||||
<div class="pager">
|
||||
<el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
|
||||
:total="page.total" :page-sizes="[10,20,50]" layout="total, sizes, prev, pager, next, jumper"
|
||||
@@ -163,6 +165,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import GrTable from '@/components/GrTable.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { bizList, bizUpdate } from '@/api/public'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
@@ -325,4 +328,86 @@ onMounted(() => { readQueryFromRoute(); loadList() })
|
||||
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
|
||||
.batch-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.pager { display: flex; justify-content: flex-end; margin-top: 12px; }
|
||||
|
||||
/* ========================================
|
||||
移动端适配 (≤768px)
|
||||
- 卡片 padding 收窄
|
||||
- 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x)
|
||||
- filter-form: 保持 label 左 + input 右横向布局
|
||||
- 表格字号收紧
|
||||
======================================== */
|
||||
@media (max-width: 768px) {
|
||||
/* 卡片 padding */
|
||||
.page-card { padding: 12px !important; border-radius: 4px !important; }
|
||||
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
|
||||
|
||||
/* 工具栏: 横向滚动 (按钮多时不换行) */
|
||||
.toolbar {
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 8px !important;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.toolbar::-webkit-scrollbar { height: 4px; }
|
||||
.toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; }
|
||||
.toolbar :deep(.action-btn),
|
||||
.toolbar :deep(.el-button) {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px !important;
|
||||
padding: 0 10px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
/* filter-form: label 与输入框横向 (label 左, input 右) */
|
||||
.filter-form {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
.filter-form :deep(.el-form-item) {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.filter-form :deep(.el-form-item__label) {
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
min-width: 80px !important;
|
||||
text-align: right !important;
|
||||
padding: 0 8px 0 0 !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--el-text-color-regular) !important;
|
||||
line-height: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
.filter-form :deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
line-height: 32px !important;
|
||||
flex: 1 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
/* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */
|
||||
.filter-form :deep(.el-select),
|
||||
.filter-form :deep(.el-input),
|
||||
.filter-form :deep(.el-date-editor),
|
||||
.filter-form :deep(.el-button),
|
||||
.filter-form :deep(.el-cascader) {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
.filter-form :deep(.el-button + .el-button) {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
/* 表格字号收紧 */
|
||||
:deep(.el-table) { font-size: 12px !important; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user