yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(review-meeting): optimize list readability

pull/874/head
Codewoc 2026-04-01 11:17:01 +08:00
parent c413c5cc56
commit 53d9781c5d
4 changed files with 471 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/views/review/meeting/AllProjectList.vue
View File

@ -76,49 +76,51 @@
<!-- 列表 --> <!-- 列表 -->
<el-table v-loading="loading" :data="list" border class="review-table" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="list" border class="review-table" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="56" align="center" />
<el-table-column label="会中序号" prop="seqNo" width="80" align="center" /> <el-table-column label="会中序号" prop="seqNo" width="96" align="center" />
<el-table-column label="起止时间" width="110" align="center"> <el-table-column label="起止时间" width="180" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span v-if="row.startTime || row.endTime">{{ row.startTime || '' }} - {{ row.endTime || '' }}</span> <span v-if="row.startTime || row.endTime">{{ row.startTime || '' }} - {{ row.endTime || '' }}</span>
<span v-else>-</span> <span v-else>-</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="议程分类" prop="agendaCategory" width="110" /> <el-table-column label="议程分类" prop="agendaCategory" width="160" />
<el-table-column label="项目名称" prop="projectTitle" show-overflow-tooltip min-width="180"> <el-table-column label="项目名称" prop="projectTitle" show-overflow-tooltip min-width="280">
<template #default="{ row }"> <template #default="{ row }">
<span class="project-name-text" @click="goToDetail(row)">{{ row.projectTitle }}</span> <span class="project-name-text" @click="goToDetail(row)">{{ row.projectTitle }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="报告人" prop="reporter" width="80" /> <el-table-column label="报告人" prop="reporter" width="120" />
<el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="130" /> <el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="220" />
<el-table-column label="评审日期" prop="reviewDate" width="120" align="center" /> <el-table-column label="评审日期" prop="reviewDate" width="160" align="center" />
<el-table-column label="会前资料齐全" width="120" align="center"> <el-table-column label="会前资料齐全" width="132" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="getMaterialCompleteClass(row.preMeetingMaterialsComplete)"> <span :class="getMaterialCompleteClass(row.preMeetingMaterialsComplete)">
{{ row.preMeetingMaterialsComplete ? '✓' : '✗' }} {{ row.preMeetingMaterialsComplete ? '✓' : '✗' }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="会后资料齐全" width="120" align="center"> <el-table-column label="会后资料齐全" width="132" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="getMaterialCompleteClass(row.postMeetingMaterialsComplete)"> <span :class="getMaterialCompleteClass(row.postMeetingMaterialsComplete)">
{{ row.postMeetingMaterialsComplete ? '✓' : '✗' }} {{ row.postMeetingMaterialsComplete ? '✓' : '✗' }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="评审结果" width="110" align="center"> <el-table-column label="评审结果" width="140" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="getReviewResultClass(row.reviewResult)"> <span :class="getReviewResultClass(row.reviewResult)">
{{ REVIEW_RESULT_LABEL[row.reviewResult as keyof typeof REVIEW_RESULT_LABEL] || '-' }} {{ REVIEW_RESULT_LABEL[row.reviewResult as keyof typeof REVIEW_RESULT_LABEL] || '-' }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right"> <el-table-column label="操作" width="360" align="center" :fixed="useFixedActionColumn ? 'right' : false">
<template #default="{ row }"> <template #default="{ row }">
<div class="op-group">
<a class="op-link" @click="openForm('update', row)">编辑</a> <a class="op-link" @click="openForm('update', row)">编辑</a>
<a class="op-link" @click="goToDetail(row)">上传项目资料</a> <a class="op-link" @click="goToDetail(row)">上传项目资料</a>
<a class="op-link op-danger" @click="handleDelete(row.id)">删除</a> <a class="op-link op-danger" @click="handleDelete(row.id)">删除</a>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -177,7 +179,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from 'vue' import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { import {
@ -198,6 +200,7 @@ const router = useRouter()
const loading = ref(false) const loading = ref(false)
const list = ref<ReviewMeetingProjectRespVO[]>([]) const list = ref<ReviewMeetingProjectRespVO[]>([])
const total = ref(0) const total = ref(0)
const useFixedActionColumn = ref(true)
const meetingOptions = ref<{ id: number; name: string; host?: string }[]>([]) const meetingOptions = ref<{ id: number; name: string; host?: string }[]>([])
const REVIEW_RESULT_LABEL = { PASS: '通过', REJECT: '不通过' } const REVIEW_RESULT_LABEL = { PASS: '通过', REJECT: '不通过' }
const getReviewResultClass = (result?: string) => { const getReviewResultClass = (result?: string) => {
@ -222,6 +225,10 @@ const queryParams = reactive<ReviewProjectPageReqVO & { pageNo: number; pageSize
reviewDate: undefined reviewDate: undefined
}) })
const syncActionColumnMode = () => {
useFixedActionColumn.value = window.innerWidth >= 1680
}
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
@ -331,19 +338,25 @@ const goToDetail = (row: ReviewMeetingProjectRespVO) => {
} }
onMounted(async () => { onMounted(async () => {
syncActionColumnMode()
window.addEventListener('resize', syncActionColumnMode)
await loadMeetingOptions() await loadMeetingOptions()
await getList() await getList()
}) })
onBeforeUnmount(() => {
window.removeEventListener('resize', syncActionColumnMode)
})
</script> </script>
<style scoped> <style scoped>
/* ── 页面标题 ── */ /* ── 页面标题 ── */
.page-title { .page-title {
font-size: 22px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 20px; margin-bottom: 14px;
padding-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid #e1e7f0; border-bottom: 1px solid #e1e7f0;
} }
@ -352,70 +365,72 @@ onMounted(async () => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 12px; gap: 10px 12px;
margin-bottom: 14px; margin-bottom: 12px;
} }
.search-meeting-select { .search-meeting-select {
width: 220px; width: 240px;
} }
.search-input { .search-input {
width: 160px; width: 200px;
} }
.search-input-sm { .search-input-sm {
width: 120px; width: 150px;
} }
:deep(.search-meeting-select), :deep(.search-meeting-select),
:deep(.search-input), :deep(.search-input),
:deep(.search-input-sm) { :deep(.search-input-sm) {
height: 40px; height: 42px;
} }
:deep(.search-meeting-select .el-input__wrapper), :deep(.search-meeting-select .el-input__wrapper),
:deep(.search-input .el-input__wrapper), :deep(.search-input .el-input__wrapper),
:deep(.search-input-sm .el-input__wrapper) { :deep(.search-input-sm .el-input__wrapper) {
min-height: 40px; min-height: 42px;
border-radius: 6px; border-radius: 6px;
border-color: #dcdedf; border-color: #dcdedf;
font-size: 16px;
} }
:deep(.search-meeting-select .el-select__wrapper), :deep(.search-meeting-select .el-select__wrapper),
:deep(.search-input .el-select__wrapper), :deep(.search-input .el-select__wrapper),
:deep(.search-input-sm .el-select__wrapper) { :deep(.search-input-sm .el-select__wrapper) {
min-height: 40px; min-height: 42px;
border-radius: 6px; border-radius: 6px;
border-color: #dcdedf; border-color: #dcdedf;
font-size: 16px;
} }
:deep(.search-meeting-select.el-date-editor), :deep(.search-meeting-select.el-date-editor),
:deep(.search-input.el-date-editor), :deep(.search-input.el-date-editor),
:deep(.search-input-sm.el-date-editor) { :deep(.search-input-sm.el-date-editor) {
min-height: 40px; min-height: 42px;
} }
:deep(.search-meeting-select .el-input__inner), :deep(.search-meeting-select .el-input__inner),
:deep(.search-input .el-input__inner), :deep(.search-input .el-input__inner),
:deep(.search-input-sm .el-input__inner) { :deep(.search-input-sm .el-input__inner) {
line-height: 40px; line-height: 42px;
font-size: 15px; font-size: 16px;
color: #333; color: #333;
} }
.btn-search { .btn-search {
height: 40px; height: 42px;
padding: 0 22px; padding: 0 22px;
background-color: #295abc; background-color: #295abc;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 15px; font-size: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.btn-search:hover { background-color: rgba(41, 90, 188, 0.88); } .btn-search:hover { background-color: rgba(41, 90, 188, 0.88); }
.btn-reset { .btn-reset {
height: 40px; height: 42px;
padding: 0 8px; padding: 0 8px;
background: none; background: none;
border: none; border: none;
color: #295abc; color: #295abc;
font-size: 15px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
.btn-reset:hover { opacity: 0.8; } .btn-reset:hover { opacity: 0.8; }
@ -424,18 +439,18 @@ onMounted(async () => {
.toolbar { .toolbar {
display: flex; display: flex;
gap: 10px; gap: 10px;
margin-bottom: 12px; margin-bottom: 10px;
} }
.btn-default { .btn-default {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
height: 36px; height: 40px;
padding: 0 16px; padding: 0 18px;
background-color: #fff; background-color: #fff;
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 15px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@ -452,12 +467,13 @@ onMounted(async () => {
border-color: #fc4f54; border-color: #fc4f54;
color: #fc4f54; color: #fc4f54;
} }
.btn-icon { font-size: 16px; line-height: 1; } .btn-icon { font-size: 18px; line-height: 1; }
/* ── 项目名称 ── */ /* ── 项目名称 ── */
.project-name-text { .project-name-text {
color: #295abc; color: #295abc;
font-size: 14px; font-size: 18px;
font-weight: 500;
cursor: pointer; cursor: pointer;
} }
.project-name-text:hover { text-decoration: underline; } .project-name-text:hover { text-decoration: underline; }
@ -473,40 +489,109 @@ onMounted(async () => {
.material-complete { .material-complete {
color: #67c23a !important; color: #67c23a !important;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 20px;
} }
.material-incomplete { .material-incomplete {
color: #f56c6c !important; color: #f56c6c !important;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 20px;
} }
/* ── 操作链接 ── */ /* ── 操作链接 ── */
.op-link { .op-link {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 10px;
color: #295abc; color: #295abc;
font-size: 13px; background: rgba(41, 90, 188, 0.06);
border: 1px solid rgba(41, 90, 188, 0.12);
border-radius: 999px;
box-shadow: none;
font-size: 14px;
font-weight: 500;
cursor: pointer; cursor: pointer;
margin: 0 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
transition: opacity 0.2s; }
.op-link:hover {
background: rgba(41, 90, 188, 0.1);
border-color: rgba(41, 90, 188, 0.2);
color: #1f4ca5;
}
.op-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
}
.op-danger {
color: #d63b42;
background: rgba(252, 79, 84, 0.07);
border-color: rgba(252, 79, 84, 0.12);
}
.op-danger:hover {
background: rgba(252, 79, 84, 0.12);
border-color: rgba(252, 79, 84, 0.18);
color: #c22e35;
} }
.op-link:hover { opacity: 0.8; text-decoration: underline; }
.op-danger { color: #fc4f54; }
/* ── 表格 ── */ /* ── 表格 ── */
:deep(.review-table .el-table__header-wrapper th) { :deep(.review-table .el-table__header-wrapper th) {
background-color: #eef2fb; background-color: #eef2fb;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 20px;
border-color: #e1e7f0; border-color: #e1e7f0;
} }
:deep(.review-table .el-table__header-wrapper th.el-table__cell) {
padding-top: 12px;
padding-bottom: 12px;
}
:deep(.review-table .el-table__header-wrapper th .cell) {
justify-content: center;
text-align: center;
}
:deep(.review-table .el-table__body td) { :deep(.review-table .el-table__body td) {
font-size: 14px; font-size: 20px;
color: #333; color: #333;
border-color: #e1e7f0; border-color: #e1e7f0;
padding-top: 12px;
padding-bottom: 12px;
}
:deep(.review-table .el-table__body td .cell),
:deep(.review-table .el-table__header-wrapper th .cell) {
line-height: 1.5;
} }
:deep(.review-table .el-table__body tr:hover > td) { :deep(.review-table .el-table__body tr:hover > td) {
background-color: rgba(41, 90, 188, 0.04); background-color: rgba(41, 90, 188, 0.04);
} }
:deep(.review-table .el-table__fixed-right),
:deep(.review-table .el-table__fixed) {
background-color: #fff;
overflow: hidden;
z-index: 3;
}
:deep(.review-table .el-table__fixed-right .el-table__fixed-header-wrapper),
:deep(.review-table .el-table__fixed-right .el-table__fixed-body-wrapper),
:deep(.review-table .el-table__fixed .el-table__fixed-header-wrapper),
:deep(.review-table .el-table__fixed .el-table__fixed-body-wrapper),
:deep(.review-table .el-table__fixed-right table),
:deep(.review-table .el-table__fixed table) {
background-color: #fff;
}
:deep(.review-table .el-table__fixed-right .el-table__cell),
:deep(.review-table .el-table__fixed .el-table__cell),
:deep(.review-table .el-table__fixed-right-patch) {
background-color: #fff;
}
:deep(.review-table .el-table__fixed-right .el-table__row:hover > td.el-table__cell),
:deep(.review-table .el-table__fixed .el-table__row:hover > td.el-table__cell) {
background-color: rgba(41, 90, 188, 0.04);
}
:deep(.review-table .el-table__fixed-right::before),
:deep(.review-table .el-table__fixed::before) {
background-color: #e1e7f0;
}
</style> </style>

95
src/views/review/meeting/MeetingEdit.vue
View File

@ -166,16 +166,16 @@
<div v-if="formData.projects && formData.projects.length > 0" class="mt-10"> <div v-if="formData.projects && formData.projects.length > 0" class="mt-10">
<el-table :data="formData.projects" border max-height="360" class="projects-preview-table"> <el-table :data="formData.projects" border max-height="360" class="projects-preview-table">
<el-table-column label="序号" prop="seqNo" width="60" align="center" /> <el-table-column label="序号" prop="seqNo" width="80" align="center" />
<el-table-column label="起止时间" width="120" align="center"> <el-table-column label="起止时间" width="180" align="center">
<template #default="{ row }"> <template #default="{ row }">
{{ row.startTime || '--:--' }} - {{ row.endTime || '--:--' }} {{ row.startTime || '--:--' }} - {{ row.endTime || '--:--' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="议程分类" prop="agendaCategory" width="110" /> <el-table-column label="议程分类" prop="agendaCategory" width="160" />
<el-table-column label="评审项目标题" prop="projectTitle" show-overflow-tooltip /> <el-table-column label="评审项目标题" prop="projectTitle" show-overflow-tooltip />
<el-table-column label="汇报人" prop="reporter" width="80" /> <el-table-column label="汇报人" prop="reporter" width="120" />
<el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="130" /> <el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="220" />
</el-table> </el-table>
</div> </div>
<el-empty v-else-if="isView" description="暂无评审项目" :image-size="60" /> <el-empty v-else-if="isView" description="暂无评审项目" :image-size="60" />
@ -651,12 +651,12 @@ const handleBack = () => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-bottom: 20px; margin-bottom: 16px;
padding-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid #e1e7f0; border-bottom: 1px solid #e1e7f0;
} }
.back-btn { .back-btn {
font-size: 28px; font-size: 30px;
color: #295abc; color: #295abc;
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
@ -664,18 +664,18 @@ const handleBack = () => {
} }
.back-btn:hover { opacity: 0.75; } .back-btn:hover { opacity: 0.75; }
.page-title { .page-title {
font-size: 22px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
/* ── 分区标题 ── */ /* ── 分区标题 ── */
.section-header { .section-header {
margin: 20px 0 14px; margin: 18px 0 12px;
} }
.section-title { .section-title {
position: relative; position: relative;
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
padding-left: 12px; padding-left: 12px;
@ -693,11 +693,26 @@ const handleBack = () => {
/* ── 表单 item 字号 ── */ /* ── 表单 item 字号 ── */
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
font-size: 14px; font-size: 16px;
color: #555; color: #555;
} }
:deep(.el-input__inner) { :deep(.el-form-item) {
font-size: 14px; margin-bottom: 20px;
}
:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__selected-item),
:deep(.el-select__placeholder),
:deep(.el-range-input) {
font-size: 16px;
}
:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-range-editor.el-input__wrapper) {
min-height: 42px;
}
:deep(.el-form-item__content) {
line-height: 1.5;
} }
/* ── 议程附件 ── */ /* ── 议程附件 ── */
@ -710,6 +725,8 @@ const handleBack = () => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
flex-wrap: wrap;
font-size: 16px;
} }
.agenda-action-row { .agenda-action-row {
display: flex; display: flex;
@ -718,7 +735,7 @@ const handleBack = () => {
flex-wrap: wrap; flex-wrap: wrap;
} }
.upload-hint { .upload-hint {
font-size: 12px; font-size: 14px;
color: #999; color: #999;
} }
@ -731,7 +748,7 @@ const handleBack = () => {
margin-bottom: 12px; margin-bottom: 12px;
} }
.import-hint { .import-hint {
font-size: 12px; font-size: 14px;
color: #999; color: #999;
} }
.mt-10 { .mt-10 {
@ -740,13 +757,13 @@ const handleBack = () => {
/* ── 按钮 ── */ /* ── 按钮 ── */
.btn-upload { .btn-upload {
height: 34px; height: 38px;
padding: 0 14px; padding: 0 16px;
background-color: #fff; background-color: #fff;
border: 1px solid #295abc; border: 1px solid #295abc;
border-radius: 6px; border-radius: 6px;
color: #295abc; color: #295abc;
font-size: 14px; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
@ -755,13 +772,13 @@ const handleBack = () => {
.btn-generate { .btn-generate {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 34px; height: 38px;
padding: 0 14px; padding: 0 16px;
background-color: #fff; background-color: #fff;
border: 1px solid #3aa76d; border: 1px solid #3aa76d;
border-radius: 6px; border-radius: 6px;
color: #3aa76d; color: #3aa76d;
font-size: 14px; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
@ -776,12 +793,12 @@ const handleBack = () => {
.btn-default { .btn-default {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 36px; height: 40px;
padding: 0 16px; padding: 0 18px;
background-color: #fff; background-color: #fff;
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 15px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@ -795,12 +812,12 @@ const handleBack = () => {
.btn-primary { .btn-primary {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 36px; height: 40px;
padding: 0 20px; padding: 0 20px;
background-color: #295abc; background-color: #295abc;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 15px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
@ -810,22 +827,36 @@ const handleBack = () => {
/* ── 底部 ── */ /* ── 底部 ── */
.form-footer { .form-footer {
margin-top: 24px; margin-top: 20px;
display: flex; display: flex;
gap: 12px; gap: 12px;
} }
/* ── 项目预览表格 ── */ /* ── 项目预览表格 ── */
:deep(.el-table .el-table__header-wrapper th) { :deep(.projects-preview-table .el-table__header-wrapper th) {
background-color: #eef2fb; background-color: #eef2fb;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 18px;
border-color: #e1e7f0; border-color: #e1e7f0;
} }
:deep(.el-table .el-table__body td) { :deep(.projects-preview-table .el-table__header-wrapper th.el-table__cell) {
font-size: 14px; padding-top: 12px;
padding-bottom: 12px;
}
:deep(.projects-preview-table .el-table__header-wrapper th .cell) {
justify-content: center;
text-align: center;
}
:deep(.projects-preview-table .el-table__body td) {
font-size: 18px;
color: #333; color: #333;
border-color: #e1e7f0; border-color: #e1e7f0;
padding-top: 12px;
padding-bottom: 12px;
}
:deep(.projects-preview-table .el-table__body td .cell),
:deep(.projects-preview-table .el-table__header-wrapper th .cell) {
line-height: 1.5;
} }
</style> </style>

201
src/views/review/meeting/ProjectList.vue
View File

@ -45,7 +45,6 @@
<el-select <el-select
v-model="scheduleInterval" v-model="scheduleInterval"
class="interval-select" class="interval-select"
size="small"
@change="handleIntervalChange" @change="handleIntervalChange"
> >
<el-option <el-option
@ -72,20 +71,19 @@
v-loading="loading || sortLoading" v-loading="loading || sortLoading"
:data="list" :data="list"
row-key="id" row-key="id"
size="small"
border border
class="review-table" class="review-table"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="52" align="center" /> <el-table-column type="selection" width="56" align="center" />
<el-table-column label="拖拽" width="54" align="center"> <el-table-column label="拖拽" width="60" align="center">
<template #default> <template #default>
<span class="drag-handle" title="拖拽排序">⋮⋮</span> <span class="drag-handle" title="拖拽排序">⋮⋮</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="立项编号" prop="id" width="72" align="center" /> <el-table-column label="立项编号" prop="id" width="88" align="center" />
<el-table-column label="会中序号" prop="seqNo" width="72" align="center" /> <el-table-column label="会中序号" prop="seqNo" width="88" align="center" />
<el-table-column label="起止时间" width="236" align="center"> <el-table-column label="起止时间" width="270" align="center">
<template #default="{ row }"> <template #default="{ row }">
<div class="readonly-time-range"> <div class="readonly-time-range">
<span class="readonly-time">{{ row.startTime || '--:--' }}</span> <span class="readonly-time">{{ row.startTime || '--:--' }}</span>
@ -94,12 +92,11 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="议程分类" width="130"> <el-table-column label="议程分类" width="160">
<template #default="{ row }"> <template #default="{ row }">
<el-select <el-select
v-model="row.agendaCategory" v-model="row.agendaCategory"
class="inline-field" class="inline-field"
size="small"
placeholder="议程分类" placeholder="议程分类"
@change="saveInlineRow(row, { reload: true })" @change="saveInlineRow(row, { reload: true })"
> >
@ -107,45 +104,41 @@
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="项目名称" prop="projectTitle" min-width="220"> <el-table-column label="项目名称" prop="projectTitle" min-width="320">
<template #default="{ row }"> <template #default="{ row }">
<el-input <el-input
v-model="row.projectTitle" v-model="row.projectTitle"
class="inline-field" class="inline-field"
size="small"
placeholder="项目名称" placeholder="项目名称"
@blur="saveInlineRow(row)" @blur="saveInlineRow(row)"
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="报告人" width="120"> <el-table-column label="报告人" width="150">
<template #default="{ row }"> <template #default="{ row }">
<el-input <el-input
v-model="row.reporter" v-model="row.reporter"
class="inline-field" class="inline-field"
size="small"
placeholder="报告人" placeholder="报告人"
@blur="saveInlineRow(row)" @blur="saveInlineRow(row)"
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="报告单位" min-width="180"> <el-table-column label="报告单位" min-width="240">
<template #default="{ row }"> <template #default="{ row }">
<el-input <el-input
v-model="row.reporterUnit" v-model="row.reporterUnit"
class="inline-field" class="inline-field"
size="small"
placeholder="报告单位" placeholder="报告单位"
@blur="saveInlineRow(row)" @blur="saveInlineRow(row)"
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="评审日期" width="142" align="center"> <el-table-column label="评审日期" width="170" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-date-picker <el-date-picker
v-model="row.reviewDate" v-model="row.reviewDate"
class="inline-field" class="inline-field"
size="small"
type="date" type="date"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
placeholder="评审日期" placeholder="评审日期"
@ -153,33 +146,32 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="会前资料齐全" width="110" align="center"> <el-table-column label="会前资料齐全" width="132" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="getMaterialCompleteClass(row.preMeetingMaterialsComplete)"> <span :class="getMaterialCompleteClass(row.preMeetingMaterialsComplete)">
{{ row.preMeetingMaterialsComplete ? '✓' : '✗' }} {{ row.preMeetingMaterialsComplete ? '✓' : '✗' }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="会后资料齐全" width="110" align="center"> <el-table-column label="会后资料齐全" width="132" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="getMaterialCompleteClass(row.postMeetingMaterialsComplete)"> <span :class="getMaterialCompleteClass(row.postMeetingMaterialsComplete)">
{{ row.postMeetingMaterialsComplete ? '✓' : '✗' }} {{ row.postMeetingMaterialsComplete ? '✓' : '✗' }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="AI状态" width="110" align="center"> <el-table-column label="AI状态" width="128" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="`ai-status ai-status-${row.aiSummaryStatus ?? 0}`"> <span :class="`ai-status ai-status-${row.aiSummaryStatus ?? 0}`">
{{ AI_STATUS_LABEL[row.aiSummaryStatus ?? 0] }} {{ AI_STATUS_LABEL[row.aiSummaryStatus ?? 0] }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="评审结果" width="120" align="center"> <el-table-column label="评审结果" width="148" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-select <el-select
v-model="row.reviewResult" v-model="row.reviewResult"
class="inline-field" class="inline-field"
size="small"
placeholder="评审结果" placeholder="评审结果"
clearable clearable
@change="saveInlineRow(row)" @change="saveInlineRow(row)"
@ -189,10 +181,12 @@
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="154" align="center" fixed="right"> <el-table-column label="操作" width="260" align="center" :fixed="useFixedActionColumn ? 'right' : false">
<template #default="{ row }"> <template #default="{ row }">
<div class="op-group">
<a class="op-link" @click="goToDetail(row)">上传项目资料</a> <a class="op-link" @click="goToDetail(row)">上传项目资料</a>
<a class="op-link op-danger" @click="handleDelete(row.id)">删除</a> <a class="op-link op-danger" @click="handleDelete(row.id)">删除</a>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -240,6 +234,7 @@ const total = ref(0)
const meetingInfo = ref<any>({}) const meetingInfo = ref<any>({})
const tableRef = ref() const tableRef = ref()
const selectedRows = ref<ReviewMeetingProjectRespVO[]>([]) const selectedRows = ref<ReviewMeetingProjectRespVO[]>([])
const useFixedActionColumn = ref(true)
let sortableInstance: Sortable | null = null let sortableInstance: Sortable | null = null
const STATUS_LABEL: Record<number, string> = { 0: '待召开', 1: '正在召开', 2: '已结束', 3: '已取消' } const STATUS_LABEL: Record<number, string> = { 0: '待召开', 1: '正在召开', 2: '已结束', 3: '已取消' }
@ -265,6 +260,10 @@ const queryParams = reactive({
reviewMeetingId reviewMeetingId
}) })
const syncActionColumnMode = () => {
useFixedActionColumn.value = window.innerWidth >= 1680
}
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
@ -501,11 +500,14 @@ const goToDetail = (row: ReviewMeetingProjectRespVO) => {
} }
onMounted(async () => { onMounted(async () => {
syncActionColumnMode()
window.addEventListener('resize', syncActionColumnMode)
meetingInfo.value = await getReviewMeeting(reviewMeetingId) meetingInfo.value = await getReviewMeeting(reviewMeetingId)
await getList() await getList()
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener('resize', syncActionColumnMode)
sortableInstance?.destroy() sortableInstance?.destroy()
sortableInstance = null sortableInstance = null
}) })
@ -514,42 +516,42 @@ onBeforeUnmount(() => {
<style scoped> <style scoped>
/* ── 页面标题 ── */ /* ── 页面标题 ── */
.page-title { .page-title {
font-size: 22px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 16px; margin-bottom: 12px;
padding-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid #e1e7f0; border-bottom: 1px solid #e1e7f0;
} }
/* ── 会议信息卡 ── */ /* ── 会议信息卡 ── */
.meeting-info-card { .meeting-info-card {
padding: 16px; padding: 14px 16px;
background: linear-gradient(180deg, rgba(41, 90, 188, 0.1) 0%, rgba(41, 90, 188, 0.04) 100%); background: linear-gradient(180deg, rgba(41, 90, 188, 0.1) 0%, rgba(41, 90, 188, 0.04) 100%);
border: 1px solid rgba(41, 90, 188, 0.16); border: 1px solid rgba(41, 90, 188, 0.16);
border-radius: 10px; border-radius: 10px;
margin-bottom: 16px; margin-bottom: 12px;
} }
.meeting-info-head { .meeting-info-head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 10px;
margin-bottom: 12px; margin-bottom: 10px;
} }
.meeting-title-wrap { .meeting-title-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 3px;
} }
.meeting-caption { .meeting-caption {
color: #4f6d9f; color: #4f6d9f;
font-size: 12px; font-size: 14px;
margin: 0; margin: 0;
} }
.meeting-name { .meeting-name {
color: #295abc; color: #295abc;
font-size: 20px; font-size: 24px;
line-height: 1.3; line-height: 1.3;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
@ -557,7 +559,7 @@ onBeforeUnmount(() => {
.meeting-time { .meeting-time {
margin: 0; margin: 0;
color: #2f3f5e; color: #2f3f5e;
font-size: 14px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.meeting-time-sep { .meeting-time-sep {
@ -566,9 +568,9 @@ onBeforeUnmount(() => {
} }
.status-pill { .status-pill {
align-self: flex-start; align-self: flex-start;
padding: 4px 10px; padding: 5px 12px;
border-radius: 999px; border-radius: 999px;
font-size: 13px; font-size: 15px;
font-weight: 600; font-weight: 600;
} }
.status-pill-0 { .status-pill-0 {
@ -586,7 +588,7 @@ onBeforeUnmount(() => {
} }
.meeting-meta-grid { .meeting-meta-grid {
display: grid; display: grid;
gap: 10px 14px; gap: 8px 12px;
grid-template-columns: repeat(4, minmax(140px, 1fr)); grid-template-columns: repeat(4, minmax(140px, 1fr));
} }
.table-toolbar { .table-toolbar {
@ -594,7 +596,7 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
margin-bottom: 12px; margin-bottom: 10px;
} }
.toolbar-left { .toolbar-left {
display: flex; display: flex;
@ -605,7 +607,7 @@ onBeforeUnmount(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 8px 12px; padding: 10px 14px;
background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%); background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
border: 1px solid #cfdcf8; border: 1px solid #cfdcf8;
border-radius: 10px; border-radius: 10px;
@ -613,33 +615,33 @@ onBeforeUnmount(() => {
} }
.toolbar-label { .toolbar-label {
color: #295abc; color: #295abc;
font-size: 13px; font-size: 15px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
} }
.interval-select { .interval-select {
width: 128px; width: 140px;
} }
.selection-summary { .selection-summary {
color: #5c6f91; color: #5c6f91;
font-size: 13px; font-size: 15px;
} }
.meta-item { .meta-item {
background: #fff; background: #fff;
border: 1px solid rgba(41, 90, 188, 0.1); border: 1px solid rgba(41, 90, 188, 0.1);
border-radius: 8px; border-radius: 8px;
padding: 10px 12px; padding: 9px 12px;
} }
.meta-label { .meta-label {
display: block; display: block;
color: #6a7f9f; color: #6a7f9f;
font-size: 12px; font-size: 12px;
margin-bottom: 4px; margin-bottom: 3px;
} }
.meta-value { .meta-value {
display: block; display: block;
color: #20314f; color: #20314f;
font-size: 14px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
@ -655,21 +657,21 @@ onBeforeUnmount(() => {
.material-complete { .material-complete {
color: #67c23a !important; color: #67c23a !important;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 22px;
} }
.material-incomplete { .material-incomplete {
color: #f56c6c !important; color: #f56c6c !important;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 22px;
} }
.ai-status { .ai-status {
display: inline-flex; display: inline-flex;
min-width: 64px; min-width: 64px;
justify-content: center; justify-content: center;
padding: 3px 8px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
font-size: 12px; font-size: 17px;
font-weight: 600; font-weight: 600;
} }
@ -708,6 +710,7 @@ onBeforeUnmount(() => {
min-width: 44px; min-width: 44px;
color: #20314f; color: #20314f;
font-weight: 600; font-weight: 600;
font-size: 20px;
} }
.inline-time-sep { .inline-time-sep {
color: #999; color: #999;
@ -718,12 +721,23 @@ onBeforeUnmount(() => {
:deep(.inline-field .el-input__wrapper), :deep(.inline-field .el-input__wrapper),
:deep(.inline-field .el-select__wrapper), :deep(.inline-field .el-select__wrapper),
:deep(.interval-select .el-select__wrapper) { :deep(.interval-select .el-select__wrapper) {
min-height: 40px;
border-radius: 6px; border-radius: 6px;
border: 1px solid transparent; border: 1px solid transparent;
box-shadow: none; box-shadow: none;
background-color: #f8fafc; background-color: #f8fafc;
transition: border-color 0.2s, background-color 0.2s; transition: border-color 0.2s, background-color 0.2s;
} }
:deep(.inline-field .el-input__inner),
:deep(.inline-field .el-select__selected-item),
:deep(.inline-field .el-input__inner::placeholder),
:deep(.interval-select .el-select__selected-item),
:deep(.interval-select .el-select__placeholder) {
font-size: 20px;
}
:deep(.inline-field.el-date-editor) {
min-height: 40px;
}
:deep(.interval-select .el-select__wrapper) { :deep(.interval-select .el-select__wrapper) {
border-color: #b7c9f2; border-color: #b7c9f2;
background: #fff; background: #fff;
@ -748,39 +762,106 @@ onBeforeUnmount(() => {
/* ── 操作链接 ── */ /* ── 操作链接 ── */
.op-link { .op-link {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 10px;
color: #295abc; color: #295abc;
font-size: 13px; background: rgba(41, 90, 188, 0.06);
border: 1px solid rgba(41, 90, 188, 0.12);
border-radius: 999px;
box-shadow: none;
font-size: 14px;
font-weight: 500;
cursor: pointer; cursor: pointer;
margin: 0 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
transition: opacity 0.2s; }
.op-link:hover {
background: rgba(41, 90, 188, 0.1);
border-color: rgba(41, 90, 188, 0.2);
color: #1f4ca5;
}
.op-danger {
color: #d63b42;
background: rgba(252, 79, 84, 0.07);
border-color: rgba(252, 79, 84, 0.12);
}
.op-danger:hover {
background: rgba(252, 79, 84, 0.12);
border-color: rgba(252, 79, 84, 0.18);
color: #c22e35;
}
.op-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
} }
.op-link:hover { opacity: 0.8; text-decoration: underline; }
.op-danger { color: #fc4f54; }
/* ── 表格 ── */ /* ── 表格 ── */
:deep(.review-table .el-table__header-wrapper th) { :deep(.review-table .el-table__header-wrapper th) {
background-color: #eef2fb; background-color: #eef2fb;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 20px;
border-color: #e1e7f0; border-color: #e1e7f0;
} }
:deep(.review-table .el-table__header-wrapper th.el-table__cell) {
padding-top: 12px;
padding-bottom: 12px;
}
:deep(.review-table .el-table__header-wrapper th .cell) {
justify-content: center;
text-align: center;
}
:deep(.review-table .el-table__body td) { :deep(.review-table .el-table__body td) {
font-size: 14px; font-size: 20px;
color: #333; color: #333;
border-color: #e1e7f0; border-color: #e1e7f0;
padding-top: 10px; padding-top: 12px;
padding-bottom: 10px; padding-bottom: 12px;
}
:deep(.review-table .el-table__body td .cell),
:deep(.review-table .el-table__header-wrapper th .cell) {
line-height: 1.5;
} }
:deep(.review-table .el-table__body tr:hover > td) { :deep(.review-table .el-table__body tr:hover > td) {
background-color: rgba(41, 90, 188, 0.04); background-color: rgba(41, 90, 188, 0.04);
} }
:deep(.review-table .el-table__fixed-right),
:deep(.review-table .el-table__fixed) {
background-color: #fff;
overflow: hidden;
z-index: 3;
}
:deep(.review-table .el-table__fixed-right .el-table__fixed-header-wrapper),
:deep(.review-table .el-table__fixed-right .el-table__fixed-body-wrapper),
:deep(.review-table .el-table__fixed .el-table__fixed-header-wrapper),
:deep(.review-table .el-table__fixed .el-table__fixed-body-wrapper),
:deep(.review-table .el-table__fixed-right table),
:deep(.review-table .el-table__fixed table) {
background-color: #fff;
}
:deep(.review-table .el-table__fixed-right .el-table__cell),
:deep(.review-table .el-table__fixed .el-table__cell),
:deep(.review-table .el-table__fixed-right-patch) {
background-color: #fff;
}
:deep(.review-table .el-table__fixed-right .el-table__row:hover > td.el-table__cell),
:deep(.review-table .el-table__fixed .el-table__row:hover > td.el-table__cell) {
background-color: rgba(41, 90, 188, 0.04);
}
:deep(.review-table .el-table__fixed-right::before),
:deep(.review-table .el-table__fixed::before) {
background-color: #e1e7f0;
}
.drag-handle { .drag-handle {
display: inline-block; display: inline-block;
color: #7a869a; color: #7a869a;
font-size: 16px; font-size: 18px;
line-height: 1; line-height: 1;
cursor: grab; cursor: grab;
user-select: none; user-select: none;

178
src/views/review/meeting/index.vue
View File

@ -39,27 +39,27 @@
<!-- 列表 --> <!-- 列表 -->
<el-table v-loading="loading" :data="list" class="review-table" border> <el-table v-loading="loading" :data="list" class="review-table" border>
<el-table-column label="编号" prop="id" width="70" align="center" /> <el-table-column label="编号" prop="id" width="82" align="center" />
<el-table-column label="会议名称" min-width="170"> <el-table-column label="会议名称" min-width="240">
<template #default="{ row }"> <template #default="{ row }">
<span class="meeting-name-link" @click="goToProjectList(row)">{{ row.name }}</span> <span class="meeting-name-link" @click="goToProjectList(row)">{{ row.name }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="会议开始时间" width="180"> <el-table-column label="会议开始时间" width="210">
<template #default="{ row }">{{ formatDate(row.startTime, 'YYYY-MM-DD HH:mm') }}</template> <template #default="{ row }">{{ formatDate(row.startTime, 'YYYY-MM-DD HH:mm') }}</template>
</el-table-column> </el-table-column>
<el-table-column label="会议结束时间" width="180"> <el-table-column label="会议结束时间" width="210">
<template #default="{ row }">{{ formatDate(row.endTime, 'YYYY-MM-DD HH:mm') }}</template> <template #default="{ row }">{{ formatDate(row.endTime, 'YYYY-MM-DD HH:mm') }}</template>
</el-table-column> </el-table-column>
<el-table-column label="会议地点" prop="location" width="130" show-overflow-tooltip /> <el-table-column label="会议地点" prop="location" width="184" show-overflow-tooltip />
<el-table-column label="参会专家数" prop="expertCount" width="100" align="center" /> <el-table-column label="参会专家数" prop="expertCount" width="112" align="center" />
<el-table-column label="项目数" prop="projectCount" width="80" align="center" /> <el-table-column label="项目数" prop="projectCount" width="96" align="center" />
<el-table-column label="状态" width="90" align="center"> <el-table-column label="状态" width="116" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span :class="`status-text status-${row.status}`">{{ STATUS_LABEL[row.status] }}</span> <span :class="`status-text status-${row.status}`">{{ STATUS_LABEL[row.status] }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="430" align="center" fixed="right"> <el-table-column label="操作" width="600" align="center" :fixed="useFixedActionColumn ? 'right' : false">
<template #default="{ row }"> <template #default="{ row }">
<template v-if="row.status === 0"> <template v-if="row.status === 0">
<div class="op-group"> <div class="op-group">
@ -145,6 +145,7 @@ const router = useRouter()
const loading = ref(false) const loading = ref(false)
const list = ref<ReviewMeetingRespVO[]>([]) const list = ref<ReviewMeetingRespVO[]>([])
const total = ref(0) const total = ref(0)
const useFixedActionColumn = ref(true)
const MEETING_STATUS_OPTIONS = [ const MEETING_STATUS_OPTIONS = [
{ value: 0, label: '待召开' }, { value: 0, label: '待召开' },
@ -169,6 +170,10 @@ const pendingMinutesMeeting = ref<ReviewMeetingRespVO>()
const exportTaskMap = reactive<Record<number, ReviewMeetingMaterialExportTaskRespVO | undefined>>({}) const exportTaskMap = reactive<Record<number, ReviewMeetingMaterialExportTaskRespVO | undefined>>({})
const exportPollingMap = new Map<number, ReturnType<typeof setTimeout>>() const exportPollingMap = new Map<number, ReturnType<typeof setTimeout>>()
const syncActionColumnMode = () => {
useFixedActionColumn.value = window.innerWidth >= 1680
}
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
@ -382,8 +387,15 @@ const handleExportMaterials = async (row: ReviewMeetingRespVO) => {
await pollExportTask(row.id, task.taskId) await pollExportTask(row.id, task.taskId)
} }
onMounted(() => getList()) onMounted(() => {
onBeforeUnmount(() => clearExportPolling()) syncActionColumnMode()
window.addEventListener('resize', syncActionColumnMode)
getList()
})
onBeforeUnmount(() => {
clearExportPolling()
window.removeEventListener('resize', syncActionColumnMode)
})
</script> </script>
<style scoped> <style scoped>
@ -392,8 +404,8 @@ onBeforeUnmount(() => clearExportPolling())
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 20px; margin-bottom: 14px;
padding-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid #e1e7f0; border-bottom: 1px solid #e1e7f0;
} }
@ -402,56 +414,56 @@ onBeforeUnmount(() => clearExportPolling())
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 12px; gap: 10px 12px;
margin-bottom: 16px; margin-bottom: 12px;
} }
.search-input { .search-input {
width: 220px;
}
.search-datepicker {
width: 240px; width: 240px;
} }
.search-datepicker {
width: 280px;
}
.search-select { .search-select {
width: 140px; width: 160px;
} }
:deep(.search-input .el-input__wrapper), :deep(.search-input .el-input__wrapper),
:deep(.search-select .el-input__wrapper), :deep(.search-select .el-input__wrapper),
:deep(.search-datepicker .el-input__wrapper) { :deep(.search-datepicker .el-input__wrapper) {
min-height: 40px; min-height: 42px;
border-radius: 6px; border-radius: 6px;
border-color: #dcdedf; border-color: #dcdedf;
font-size: 15px; font-size: 16px;
} }
:deep(.search-select .el-select__wrapper) { :deep(.search-select .el-select__wrapper) {
min-height: 40px; min-height: 42px;
border-radius: 6px; border-radius: 6px;
border-color: #dcdedf; border-color: #dcdedf;
font-size: 15px; font-size: 16px;
} }
:deep(.search-datepicker.el-date-editor) { :deep(.search-datepicker.el-date-editor) {
width: 240px !important; width: 280px !important;
min-width: 240px !important; min-width: 280px !important;
max-width: 240px !important; max-width: 280px !important;
min-height: 40px; min-height: 42px;
border-radius: 6px; border-radius: 6px;
border-color: #dcdedf; border-color: #dcdedf;
} }
:deep(.search-input .el-input__inner), :deep(.search-input .el-input__inner),
:deep(.search-select .el-input__inner), :deep(.search-select .el-input__inner),
:deep(.search-datepicker .el-input__inner) { :deep(.search-datepicker .el-input__inner) {
line-height: 40px; line-height: 42px;
font-size: 15px; font-size: 16px;
color: #333; color: #333;
} }
.btn-search { .btn-search {
height: 40px; height: 42px;
padding: 0 22px; padding: 0 22px;
background-color: #295abc; background-color: #295abc;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 15px; font-size: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
@ -460,12 +472,12 @@ onBeforeUnmount(() => clearExportPolling())
} }
.btn-reset { .btn-reset {
height: 40px; height: 42px;
padding: 0 8px; padding: 0 8px;
background: none; background: none;
border: none; border: none;
color: #295abc; color: #295abc;
font-size: 15px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
.btn-reset:hover { .btn-reset:hover {
@ -474,18 +486,18 @@ onBeforeUnmount(() => clearExportPolling())
/* ── 工具栏 ── */ /* ── 工具栏 ── */
.toolbar { .toolbar {
margin-bottom: 12px; margin-bottom: 10px;
} }
.btn-default { .btn-default {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
height: 36px; height: 40px;
padding: 0 16px; padding: 0 18px;
background-color: #fff; background-color: #fff;
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 15px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@ -496,13 +508,13 @@ onBeforeUnmount(() => clearExportPolling())
color: #295abc; color: #295abc;
} }
.btn-icon { .btn-icon {
font-size: 16px; font-size: 18px;
line-height: 1; line-height: 1;
} }
/* ── 状态文字 ── */ /* ── 状态文字 ── */
.status-text { .status-text {
font-size: 14px; font-size: 18px;
font-weight: 500; font-weight: 500;
} }
.status-0 { color: #ecae4b; } .status-0 { color: #ecae4b; }
@ -514,7 +526,8 @@ onBeforeUnmount(() => clearExportPolling())
.meeting-name-link { .meeting-name-link {
color: #295abc; color: #295abc;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 18px;
font-weight: 500;
} }
.meeting-name-link:hover { .meeting-name-link:hover {
color: rgba(41, 90, 188, 0.85); color: rgba(41, 90, 188, 0.85);
@ -524,25 +537,53 @@ onBeforeUnmount(() => clearExportPolling())
/* ── 操作链接 ── */ /* ── 操作链接 ── */
.op-link { .op-link {
display: inline-flex; display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 10px;
color: #295abc; color: #295abc;
font-size: 13px; background: rgba(41, 90, 188, 0.06);
border: 1px solid rgba(41, 90, 188, 0.12);
border-radius: 999px;
box-shadow: none;
font-size: 14px;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
} }
.op-link:hover { .op-link:hover {
opacity: 0.8; background: rgba(41, 90, 188, 0.1);
text-decoration: underline; border-color: rgba(41, 90, 188, 0.2);
color: #1f4ca5;
} }
.op-group { .op-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 6px;
line-height: 1.4; line-height: 1.4;
} }
.op-danger { .op-danger {
color: #fc4f54; color: #d63b42;
background: rgba(252, 79, 84, 0.07);
border-color: rgba(252, 79, 84, 0.12);
}
.op-danger:hover {
background: rgba(252, 79, 84, 0.12);
border-color: rgba(252, 79, 84, 0.18);
color: #c22e35;
}
.op-link.disabled {
color: #8a94a6;
background: rgba(125, 145, 180, 0.08);
border-color: rgba(125, 145, 180, 0.12);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.op-link.disabled:hover {
color: #8a94a6;
} }
/* ── 表格样式 ── */ /* ── 表格样式 ── */
@ -550,15 +591,56 @@ onBeforeUnmount(() => clearExportPolling())
background-color: #eef2fb; background-color: #eef2fb;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 18px;
border-color: #e1e7f0; border-color: #e1e7f0;
} }
:deep(.review-table .el-table__header-wrapper th.el-table__cell) {
padding-top: 12px;
padding-bottom: 12px;
}
:deep(.review-table .el-table__header-wrapper th .cell) {
justify-content: center;
text-align: center;
}
:deep(.review-table .el-table__body td) { :deep(.review-table .el-table__body td) {
font-size: 14px; font-size: 18px;
color: #333; color: #333;
border-color: #e1e7f0; border-color: #e1e7f0;
padding-top: 12px;
padding-bottom: 12px;
}
:deep(.review-table .el-table__body td .cell),
:deep(.review-table .el-table__header-wrapper th .cell) {
line-height: 1.5;
} }
:deep(.review-table .el-table__body tr:hover > td) { :deep(.review-table .el-table__body tr:hover > td) {
background-color: rgba(41, 90, 188, 0.04); background-color: rgba(41, 90, 188, 0.04);
} }
:deep(.review-table .el-table__fixed-right),
:deep(.review-table .el-table__fixed) {
background-color: #fff;
overflow: hidden;
z-index: 3;
}
:deep(.review-table .el-table__fixed-right .el-table__fixed-header-wrapper),
:deep(.review-table .el-table__fixed-right .el-table__fixed-body-wrapper),
:deep(.review-table .el-table__fixed .el-table__fixed-header-wrapper),
:deep(.review-table .el-table__fixed .el-table__fixed-body-wrapper),
:deep(.review-table .el-table__fixed-right table),
:deep(.review-table .el-table__fixed table) {
background-color: #fff;
}
:deep(.review-table .el-table__fixed-right .el-table__cell),
:deep(.review-table .el-table__fixed .el-table__cell),
:deep(.review-table .el-table__fixed-right-patch) {
background-color: #fff;
}
:deep(.review-table .el-table__fixed-right .el-table__row:hover > td.el-table__cell),
:deep(.review-table .el-table__fixed .el-table__row:hover > td.el-table__cell) {
background-color: rgba(41, 90, 188, 0.04);
}
:deep(.review-table .el-table__fixed-right::before),
:deep(.review-table .el-table__fixed::before) {
background-color: #e1e7f0;
}
</style> </style>