style(review-meeting): optimize list readability
Codewoc
parent
c413c5cc56
commit
53d9781c5d
|
|
@ -76,49 +76,51 @@
|
|||
|
||||
<!-- 列表 -->
|
||||
<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 label="会中序号" prop="seqNo" width="80" align="center" />
|
||||
<el-table-column label="起止时间" width="110" align="center">
|
||||
<el-table-column type="selection" width="56" align="center" />
|
||||
<el-table-column label="会中序号" prop="seqNo" width="96" align="center" />
|
||||
<el-table-column label="起止时间" width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.startTime || row.endTime">{{ row.startTime || '' }} - {{ row.endTime || '' }}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="议程分类" prop="agendaCategory" width="110" />
|
||||
<el-table-column label="项目名称" prop="projectTitle" show-overflow-tooltip min-width="180">
|
||||
<el-table-column label="议程分类" prop="agendaCategory" width="160" />
|
||||
<el-table-column label="项目名称" prop="projectTitle" show-overflow-tooltip min-width="280">
|
||||
<template #default="{ row }">
|
||||
<span class="project-name-text" @click="goToDetail(row)">{{ row.projectTitle }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报告人" prop="reporter" width="80" />
|
||||
<el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="130" />
|
||||
<el-table-column label="评审日期" prop="reviewDate" width="120" align="center" />
|
||||
<el-table-column label="会前资料齐全" width="120" align="center">
|
||||
<el-table-column label="报告人" prop="reporter" width="120" />
|
||||
<el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="220" />
|
||||
<el-table-column label="评审日期" prop="reviewDate" width="160" align="center" />
|
||||
<el-table-column label="会前资料齐全" width="132" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="getMaterialCompleteClass(row.preMeetingMaterialsComplete)">
|
||||
{{ row.preMeetingMaterialsComplete ? '✓' : '✗' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会后资料齐全" width="120" align="center">
|
||||
<el-table-column label="会后资料齐全" width="132" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="getMaterialCompleteClass(row.postMeetingMaterialsComplete)">
|
||||
{{ row.postMeetingMaterialsComplete ? '✓' : '✗' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="评审结果" width="110" align="center">
|
||||
<el-table-column label="评审结果" width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="getReviewResultClass(row.reviewResult)">
|
||||
{{ REVIEW_RESULT_LABEL[row.reviewResult as keyof typeof REVIEW_RESULT_LABEL] || '-' }}
|
||||
</span>
|
||||
</template>
|
||||
</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 }">
|
||||
<a class="op-link" @click="openForm('update', row)">编辑</a>
|
||||
<a class="op-link" @click="goToDetail(row)">上传项目资料</a>
|
||||
<a class="op-link op-danger" @click="handleDelete(row.id)">删除</a>
|
||||
<div class="op-group">
|
||||
<a class="op-link" @click="openForm('update', row)">编辑</a>
|
||||
<a class="op-link" @click="goToDetail(row)">上传项目资料</a>
|
||||
<a class="op-link op-danger" @click="handleDelete(row.id)">删除</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -177,7 +179,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
|
|
@ -198,6 +200,7 @@ const router = useRouter()
|
|||
const loading = ref(false)
|
||||
const list = ref<ReviewMeetingProjectRespVO[]>([])
|
||||
const total = ref(0)
|
||||
const useFixedActionColumn = ref(true)
|
||||
const meetingOptions = ref<{ id: number; name: string; host?: string }[]>([])
|
||||
const REVIEW_RESULT_LABEL = { PASS: '通过', REJECT: '不通过' }
|
||||
const getReviewResultClass = (result?: string) => {
|
||||
|
|
@ -222,6 +225,10 @@ const queryParams = reactive<ReviewProjectPageReqVO & { pageNo: number; pageSize
|
|||
reviewDate: undefined
|
||||
})
|
||||
|
||||
const syncActionColumnMode = () => {
|
||||
useFixedActionColumn.value = window.innerWidth >= 1680
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
|
|
@ -331,19 +338,25 @@ const goToDetail = (row: ReviewMeetingProjectRespVO) => {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
syncActionColumnMode()
|
||||
window.addEventListener('resize', syncActionColumnMode)
|
||||
await loadMeetingOptions()
|
||||
await getList()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', syncActionColumnMode)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── 页面标题 ── */
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e1e7f0;
|
||||
}
|
||||
|
||||
|
|
@ -352,70 +365,72 @@ onMounted(async () => {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
gap: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.search-meeting-select {
|
||||
width: 220px;
|
||||
width: 240px;
|
||||
}
|
||||
.search-input {
|
||||
width: 160px;
|
||||
width: 200px;
|
||||
}
|
||||
.search-input-sm {
|
||||
width: 120px;
|
||||
width: 150px;
|
||||
}
|
||||
:deep(.search-meeting-select),
|
||||
:deep(.search-input),
|
||||
:deep(.search-input-sm) {
|
||||
height: 40px;
|
||||
height: 42px;
|
||||
}
|
||||
:deep(.search-meeting-select .el-input__wrapper),
|
||||
:deep(.search-input .el-input__wrapper),
|
||||
:deep(.search-input-sm .el-input__wrapper) {
|
||||
min-height: 40px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border-color: #dcdedf;
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.search-meeting-select .el-select__wrapper),
|
||||
:deep(.search-input .el-select__wrapper),
|
||||
:deep(.search-input-sm .el-select__wrapper) {
|
||||
min-height: 40px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border-color: #dcdedf;
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.search-meeting-select.el-date-editor),
|
||||
:deep(.search-input.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-input .el-input__inner),
|
||||
:deep(.search-input-sm .el-input__inner) {
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
line-height: 42px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
height: 40px;
|
||||
height: 42px;
|
||||
padding: 0 22px;
|
||||
background-color: #295abc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-search:hover { background-color: rgba(41, 90, 188, 0.88); }
|
||||
|
||||
.btn-reset {
|
||||
height: 40px;
|
||||
height: 42px;
|
||||
padding: 0 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #295abc;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-reset:hover { opacity: 0.8; }
|
||||
|
|
@ -424,18 +439,18 @@ onMounted(async () => {
|
|||
.toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn-default {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -452,12 +467,13 @@ onMounted(async () => {
|
|||
border-color: #fc4f54;
|
||||
color: #fc4f54;
|
||||
}
|
||||
.btn-icon { font-size: 16px; line-height: 1; }
|
||||
.btn-icon { font-size: 18px; line-height: 1; }
|
||||
|
||||
/* ── 项目名称 ── */
|
||||
.project-name-text {
|
||||
color: #295abc;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.project-name-text:hover { text-decoration: underline; }
|
||||
|
|
@ -473,40 +489,109 @@ onMounted(async () => {
|
|||
.material-complete {
|
||||
color: #67c23a !important;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.material-incomplete {
|
||||
color: #f56c6c !important;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ── 操作链接 ── */
|
||||
.op-link {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
margin: 0 4px;
|
||||
transition: opacity 0.2s;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s, 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) {
|
||||
background-color: #eef2fb;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
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) {
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
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) {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -166,16 +166,16 @@
|
|||
|
||||
<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-column label="序号" prop="seqNo" width="60" align="center" />
|
||||
<el-table-column label="起止时间" width="120" align="center">
|
||||
<el-table-column label="序号" prop="seqNo" width="80" align="center" />
|
||||
<el-table-column label="起止时间" width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.startTime || '--:--' }} - {{ row.endTime || '--:--' }}
|
||||
</template>
|
||||
</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="reporter" width="80" />
|
||||
<el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="130" />
|
||||
<el-table-column label="汇报人" prop="reporter" width="120" />
|
||||
<el-table-column label="报告单位" prop="reporterUnit" show-overflow-tooltip width="220" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-empty v-else-if="isView" description="暂无评审项目" :image-size="60" />
|
||||
|
|
@ -651,12 +651,12 @@ const handleBack = () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e1e7f0;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 28px;
|
||||
font-size: 30px;
|
||||
color: #295abc;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
|
|
@ -664,18 +664,18 @@ const handleBack = () => {
|
|||
}
|
||||
.back-btn:hover { opacity: 0.75; }
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* ── 分区标题 ── */
|
||||
.section-header {
|
||||
margin: 20px 0 14px;
|
||||
margin: 18px 0 12px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
padding-left: 12px;
|
||||
|
|
@ -693,11 +693,26 @@ const handleBack = () => {
|
|||
|
||||
/* ── 表单 item 字号 ── */
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 14px;
|
||||
:deep(.el-form-item) {
|
||||
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;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 16px;
|
||||
}
|
||||
.agenda-action-row {
|
||||
display: flex;
|
||||
|
|
@ -718,7 +735,7 @@ const handleBack = () => {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -731,7 +748,7 @@ const handleBack = () => {
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
.import-hint {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.mt-10 {
|
||||
|
|
@ -740,13 +757,13 @@ const handleBack = () => {
|
|||
|
||||
/* ── 按钮 ── */
|
||||
.btn-upload {
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #295abc;
|
||||
border-radius: 6px;
|
||||
color: #295abc;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
|
@ -755,13 +772,13 @@ const handleBack = () => {
|
|||
.btn-generate {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
padding: 0 14px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3aa76d;
|
||||
border-radius: 6px;
|
||||
color: #3aa76d;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
|
@ -776,12 +793,12 @@ const handleBack = () => {
|
|||
.btn-default {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -795,12 +812,12 @@ const handleBack = () => {
|
|||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
background-color: #295abc;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
|
@ -810,22 +827,36 @@ const handleBack = () => {
|
|||
|
||||
/* ── 底部 ── */
|
||||
.form-footer {
|
||||
margin-top: 24px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── 项目预览表格 ── */
|
||||
:deep(.el-table .el-table__header-wrapper th) {
|
||||
:deep(.projects-preview-table .el-table__header-wrapper th) {
|
||||
background-color: #eef2fb;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
border-color: #e1e7f0;
|
||||
}
|
||||
:deep(.el-table .el-table__body td) {
|
||||
font-size: 14px;
|
||||
:deep(.projects-preview-table .el-table__header-wrapper th.el-table__cell) {
|
||||
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;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
<el-select
|
||||
v-model="scheduleInterval"
|
||||
class="interval-select"
|
||||
size="small"
|
||||
@change="handleIntervalChange"
|
||||
>
|
||||
<el-option
|
||||
|
|
@ -72,20 +71,19 @@
|
|||
v-loading="loading || sortLoading"
|
||||
:data="list"
|
||||
row-key="id"
|
||||
size="small"
|
||||
border
|
||||
class="review-table"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="52" align="center" />
|
||||
<el-table-column label="拖拽" width="54" align="center">
|
||||
<el-table-column type="selection" width="56" align="center" />
|
||||
<el-table-column label="拖拽" width="60" align="center">
|
||||
<template #default>
|
||||
<span class="drag-handle" title="拖拽排序">⋮⋮</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="立项编号" prop="id" width="72" align="center" />
|
||||
<el-table-column label="会中序号" prop="seqNo" width="72" align="center" />
|
||||
<el-table-column label="起止时间" width="236" align="center">
|
||||
<el-table-column label="立项编号" prop="id" width="88" align="center" />
|
||||
<el-table-column label="会中序号" prop="seqNo" width="88" align="center" />
|
||||
<el-table-column label="起止时间" width="270" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="readonly-time-range">
|
||||
<span class="readonly-time">{{ row.startTime || '--:--' }}</span>
|
||||
|
|
@ -94,12 +92,11 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="议程分类" width="130">
|
||||
<el-table-column label="议程分类" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-select
|
||||
v-model="row.agendaCategory"
|
||||
class="inline-field"
|
||||
size="small"
|
||||
placeholder="议程分类"
|
||||
@change="saveInlineRow(row, { reload: true })"
|
||||
>
|
||||
|
|
@ -107,45 +104,41 @@
|
|||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="项目名称" prop="projectTitle" min-width="220">
|
||||
<el-table-column label="项目名称" prop="projectTitle" min-width="320">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-model="row.projectTitle"
|
||||
class="inline-field"
|
||||
size="small"
|
||||
placeholder="项目名称"
|
||||
@blur="saveInlineRow(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报告人" width="120">
|
||||
<el-table-column label="报告人" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-model="row.reporter"
|
||||
class="inline-field"
|
||||
size="small"
|
||||
placeholder="报告人"
|
||||
@blur="saveInlineRow(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报告单位" min-width="180">
|
||||
<el-table-column label="报告单位" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-model="row.reporterUnit"
|
||||
class="inline-field"
|
||||
size="small"
|
||||
placeholder="报告单位"
|
||||
@blur="saveInlineRow(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="评审日期" width="142" align="center">
|
||||
<el-table-column label="评审日期" width="170" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-date-picker
|
||||
v-model="row.reviewDate"
|
||||
class="inline-field"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="评审日期"
|
||||
|
|
@ -153,33 +146,32 @@
|
|||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会前资料齐全" width="110" align="center">
|
||||
<el-table-column label="会前资料齐全" width="132" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="getMaterialCompleteClass(row.preMeetingMaterialsComplete)">
|
||||
{{ row.preMeetingMaterialsComplete ? '✓' : '✗' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会后资料齐全" width="110" align="center">
|
||||
<el-table-column label="会后资料齐全" width="132" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="getMaterialCompleteClass(row.postMeetingMaterialsComplete)">
|
||||
{{ row.postMeetingMaterialsComplete ? '✓' : '✗' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="AI状态" width="110" align="center">
|
||||
<el-table-column label="AI状态" width="128" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="`ai-status ai-status-${row.aiSummaryStatus ?? 0}`">
|
||||
{{ AI_STATUS_LABEL[row.aiSummaryStatus ?? 0] }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="评审结果" width="120" align="center">
|
||||
<el-table-column label="评审结果" width="148" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-select
|
||||
v-model="row.reviewResult"
|
||||
class="inline-field"
|
||||
size="small"
|
||||
placeholder="评审结果"
|
||||
clearable
|
||||
@change="saveInlineRow(row)"
|
||||
|
|
@ -189,10 +181,12 @@
|
|||
</el-select>
|
||||
</template>
|
||||
</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 }">
|
||||
<a class="op-link" @click="goToDetail(row)">上传项目资料</a>
|
||||
<a class="op-link op-danger" @click="handleDelete(row.id)">删除</a>
|
||||
<div class="op-group">
|
||||
<a class="op-link" @click="goToDetail(row)">上传项目资料</a>
|
||||
<a class="op-link op-danger" @click="handleDelete(row.id)">删除</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -240,6 +234,7 @@ const total = ref(0)
|
|||
const meetingInfo = ref<any>({})
|
||||
const tableRef = ref()
|
||||
const selectedRows = ref<ReviewMeetingProjectRespVO[]>([])
|
||||
const useFixedActionColumn = ref(true)
|
||||
let sortableInstance: Sortable | null = null
|
||||
|
||||
const STATUS_LABEL: Record<number, string> = { 0: '待召开', 1: '正在召开', 2: '已结束', 3: '已取消' }
|
||||
|
|
@ -265,6 +260,10 @@ const queryParams = reactive({
|
|||
reviewMeetingId
|
||||
})
|
||||
|
||||
const syncActionColumnMode = () => {
|
||||
useFixedActionColumn.value = window.innerWidth >= 1680
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
|
|
@ -501,11 +500,14 @@ const goToDetail = (row: ReviewMeetingProjectRespVO) => {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
syncActionColumnMode()
|
||||
window.addEventListener('resize', syncActionColumnMode)
|
||||
meetingInfo.value = await getReviewMeeting(reviewMeetingId)
|
||||
await getList()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', syncActionColumnMode)
|
||||
sortableInstance?.destroy()
|
||||
sortableInstance = null
|
||||
})
|
||||
|
|
@ -514,42 +516,42 @@ onBeforeUnmount(() => {
|
|||
<style scoped>
|
||||
/* ── 页面标题 ── */
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e1e7f0;
|
||||
}
|
||||
|
||||
/* ── 会议信息卡 ── */
|
||||
.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%);
|
||||
border: 1px solid rgba(41, 90, 188, 0.16);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.meeting-info-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.meeting-title-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 3px;
|
||||
}
|
||||
.meeting-caption {
|
||||
color: #4f6d9f;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.meeting-name {
|
||||
color: #295abc;
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
|
|
@ -557,7 +559,7 @@ onBeforeUnmount(() => {
|
|||
.meeting-time {
|
||||
margin: 0;
|
||||
color: #2f3f5e;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.meeting-time-sep {
|
||||
|
|
@ -566,9 +568,9 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
.status-pill {
|
||||
align-self: flex-start;
|
||||
padding: 4px 10px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-pill-0 {
|
||||
|
|
@ -586,7 +588,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
.meeting-meta-grid {
|
||||
display: grid;
|
||||
gap: 10px 14px;
|
||||
gap: 8px 12px;
|
||||
grid-template-columns: repeat(4, minmax(140px, 1fr));
|
||||
}
|
||||
.table-toolbar {
|
||||
|
|
@ -594,7 +596,7 @@ onBeforeUnmount(() => {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
|
|
@ -605,7 +607,7 @@ onBeforeUnmount(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
padding: 10px 14px;
|
||||
background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
|
||||
border: 1px solid #cfdcf8;
|
||||
border-radius: 10px;
|
||||
|
|
@ -613,33 +615,33 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
.toolbar-label {
|
||||
color: #295abc;
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.interval-select {
|
||||
width: 128px;
|
||||
width: 140px;
|
||||
}
|
||||
.selection-summary {
|
||||
color: #5c6f91;
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.meta-item {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(41, 90, 188, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
padding: 9px 12px;
|
||||
}
|
||||
.meta-label {
|
||||
display: block;
|
||||
color: #6a7f9f;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.meta-value {
|
||||
display: block;
|
||||
color: #20314f;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -655,21 +657,21 @@ onBeforeUnmount(() => {
|
|||
.material-complete {
|
||||
color: #67c23a !important;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.material-incomplete {
|
||||
color: #f56c6c !important;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.ai-status {
|
||||
display: inline-flex;
|
||||
min-width: 64px;
|
||||
justify-content: center;
|
||||
padding: 3px 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -708,6 +710,7 @@ onBeforeUnmount(() => {
|
|||
min-width: 44px;
|
||||
color: #20314f;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
.inline-time-sep {
|
||||
color: #999;
|
||||
|
|
@ -718,12 +721,23 @@ onBeforeUnmount(() => {
|
|||
:deep(.inline-field .el-input__wrapper),
|
||||
:deep(.inline-field .el-select__wrapper),
|
||||
:deep(.interval-select .el-select__wrapper) {
|
||||
min-height: 40px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
background-color: #f8fafc;
|
||||
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) {
|
||||
border-color: #b7c9f2;
|
||||
background: #fff;
|
||||
|
|
@ -748,39 +762,106 @@ onBeforeUnmount(() => {
|
|||
|
||||
/* ── 操作链接 ── */
|
||||
.op-link {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
margin: 0 4px;
|
||||
transition: opacity 0.2s;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s, 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) {
|
||||
background-color: #eef2fb;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
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) {
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
border-color: #e1e7f0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
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) {
|
||||
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 {
|
||||
display: inline-block;
|
||||
color: #7a869a;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -39,27 +39,27 @@
|
|||
|
||||
<!-- 列表 -->
|
||||
<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="会议名称" min-width="170">
|
||||
<el-table-column label="编号" prop="id" width="82" align="center" />
|
||||
<el-table-column label="会议名称" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<span class="meeting-name-link" @click="goToProjectList(row)">{{ row.name }}</span>
|
||||
</template>
|
||||
</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>
|
||||
</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>
|
||||
</el-table-column>
|
||||
<el-table-column label="会议地点" prop="location" width="130" show-overflow-tooltip />
|
||||
<el-table-column label="参会专家数" prop="expertCount" width="100" align="center" />
|
||||
<el-table-column label="项目数" prop="projectCount" width="80" align="center" />
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<el-table-column label="会议地点" prop="location" width="184" show-overflow-tooltip />
|
||||
<el-table-column label="参会专家数" prop="expertCount" width="112" align="center" />
|
||||
<el-table-column label="项目数" prop="projectCount" width="96" align="center" />
|
||||
<el-table-column label="状态" width="116" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="`status-text status-${row.status}`">{{ STATUS_LABEL[row.status] }}</span>
|
||||
</template>
|
||||
</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 v-if="row.status === 0">
|
||||
<div class="op-group">
|
||||
|
|
@ -145,6 +145,7 @@ const router = useRouter()
|
|||
const loading = ref(false)
|
||||
const list = ref<ReviewMeetingRespVO[]>([])
|
||||
const total = ref(0)
|
||||
const useFixedActionColumn = ref(true)
|
||||
|
||||
const MEETING_STATUS_OPTIONS = [
|
||||
{ value: 0, label: '待召开' },
|
||||
|
|
@ -169,6 +170,10 @@ const pendingMinutesMeeting = ref<ReviewMeetingRespVO>()
|
|||
const exportTaskMap = reactive<Record<number, ReviewMeetingMaterialExportTaskRespVO | undefined>>({})
|
||||
const exportPollingMap = new Map<number, ReturnType<typeof setTimeout>>()
|
||||
|
||||
const syncActionColumnMode = () => {
|
||||
useFixedActionColumn.value = window.innerWidth >= 1680
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
|
|
@ -382,8 +387,15 @@ const handleExportMaterials = async (row: ReviewMeetingRespVO) => {
|
|||
await pollExportTask(row.id, task.taskId)
|
||||
}
|
||||
|
||||
onMounted(() => getList())
|
||||
onBeforeUnmount(() => clearExportPolling())
|
||||
onMounted(() => {
|
||||
syncActionColumnMode()
|
||||
window.addEventListener('resize', syncActionColumnMode)
|
||||
getList()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
clearExportPolling()
|
||||
window.removeEventListener('resize', syncActionColumnMode)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -392,8 +404,8 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e1e7f0;
|
||||
}
|
||||
|
||||
|
|
@ -402,56 +414,56 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
gap: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.search-input {
|
||||
width: 220px;
|
||||
}
|
||||
.search-datepicker {
|
||||
width: 240px;
|
||||
}
|
||||
.search-datepicker {
|
||||
width: 280px;
|
||||
}
|
||||
.search-select {
|
||||
width: 140px;
|
||||
width: 160px;
|
||||
}
|
||||
:deep(.search-input .el-input__wrapper),
|
||||
:deep(.search-select .el-input__wrapper),
|
||||
:deep(.search-datepicker .el-input__wrapper) {
|
||||
min-height: 40px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border-color: #dcdedf;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.search-select .el-select__wrapper) {
|
||||
min-height: 40px;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border-color: #dcdedf;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.search-datepicker.el-date-editor) {
|
||||
width: 240px !important;
|
||||
min-width: 240px !important;
|
||||
max-width: 240px !important;
|
||||
min-height: 40px;
|
||||
width: 280px !important;
|
||||
min-width: 280px !important;
|
||||
max-width: 280px !important;
|
||||
min-height: 42px;
|
||||
border-radius: 6px;
|
||||
border-color: #dcdedf;
|
||||
}
|
||||
:deep(.search-input .el-input__inner),
|
||||
:deep(.search-select .el-input__inner),
|
||||
:deep(.search-datepicker .el-input__inner) {
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
line-height: 42px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
height: 40px;
|
||||
height: 42px;
|
||||
padding: 0 22px;
|
||||
background-color: #295abc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
|
@ -460,12 +472,12 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
}
|
||||
|
||||
.btn-reset {
|
||||
height: 40px;
|
||||
height: 42px;
|
||||
padding: 0 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #295abc;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-reset:hover {
|
||||
|
|
@ -474,18 +486,18 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
|
||||
/* ── 工具栏 ── */
|
||||
.toolbar {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn-default {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -496,13 +508,13 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
color: #295abc;
|
||||
}
|
||||
.btn-icon {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ── 状态文字 ── */
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-0 { color: #ecae4b; }
|
||||
|
|
@ -514,7 +526,8 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
.meeting-name-link {
|
||||
color: #295abc;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.meeting-name-link:hover {
|
||||
color: rgba(41, 90, 188, 0.85);
|
||||
|
|
@ -524,25 +537,53 @@ onBeforeUnmount(() => clearExportPolling())
|
|||
/* ── 操作链接 ── */
|
||||
.op-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
transition: opacity 0.2s;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
|
||||
}
|
||||
.op-link:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
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: 8px;
|
||||
gap: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.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;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
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) {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
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) {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue