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:
guoju0808
2026-08-26 11:43:08 +00:00
parent 614a31c404
commit bfc801a16a
24 changed files with 2038 additions and 26 deletions
+87 -2
View File
@@ -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>