753 lines
19 KiB
Vue
Executable File
753 lines
19 KiB
Vue
Executable File
<template>
|
|
<div class="my-card-management-container">
|
|
<!-- 顶部标题 -->
|
|
<div class="page-header">
|
|
<h2 class="page-title">我的报卡</h2>
|
|
</div>
|
|
|
|
<!-- 统计卡片区 -->
|
|
<div class="statistics-section">
|
|
<div class="stat-card">
|
|
<div class="stat-icon-wrap stat-icon-purple">
|
|
<el-icon class="stat-icon-inner"><DataAnalysis /></el-icon>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value">{{ statistics.totalCount || 0 }}</div>
|
|
<div class="stat-label">总报卡数</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon-wrap stat-icon-red">
|
|
<el-icon class="stat-icon-inner"><Warning /></el-icon>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value">{{ statistics.pendingFailedCount || 0 }}</div>
|
|
<div class="stat-label">待提交</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon-wrap stat-icon-green">
|
|
<el-icon class="stat-icon-inner"><CircleCheck /></el-icon>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value">{{ statistics.reportedCount || 0 }}</div>
|
|
<div class="stat-label">已成功上报</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 高级筛选区 -->
|
|
<div class="filter-section">
|
|
<div class="filter-title">高级筛选</div>
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<span class="filter-label">日期范围</span>
|
|
<el-date-picker
|
|
v-model="queryParams.dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="年/月/日"
|
|
end-placeholder="年/月/日"
|
|
value-format="YYYY-MM-DD"
|
|
class="filter-date-picker"
|
|
/>
|
|
</div>
|
|
<div class="filter-item">
|
|
<span class="filter-label">状态</span>
|
|
<el-select v-model="queryParams.status" placeholder="全部状态" clearable class="filter-select">
|
|
<el-option label="全部状态" value="" />
|
|
<el-option label="待提交" value="0" />
|
|
<el-option label="已提交" value="1" />
|
|
<el-option label="已审核" value="2" />
|
|
<el-option label="已上报" value="3" />
|
|
<el-option label="失败" value="4" />
|
|
<el-option label="作废" value="6" />
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<span class="filter-label">报卡名称</span>
|
|
<el-input
|
|
v-model="queryParams.keyword"
|
|
placeholder="输入报卡名称..."
|
|
clearable
|
|
class="filter-input"
|
|
@keyup.enter="handleQuery"
|
|
/>
|
|
</div>
|
|
<div class="filter-actions">
|
|
<el-button class="btn-apply" type="primary" @click="handleQuery">
|
|
<el-icon><Check /></el-icon>
|
|
应用筛选
|
|
</el-button>
|
|
<el-button class="btn-reset" @click="handleReset">
|
|
<el-icon><RefreshRight /></el-icon>
|
|
重置条件
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格区 -->
|
|
<div class="table-section">
|
|
<el-table
|
|
ref="tableRef"
|
|
v-loading="loading"
|
|
:data="cardList"
|
|
@selection-change="handleSelectionChange"
|
|
border
|
|
stripe
|
|
:height="tableHeight"
|
|
virtualized
|
|
:virtualized-row-height="48"
|
|
>
|
|
<el-table-column type="selection" width="50" align="center" />
|
|
<el-table-column label="卡片ID" prop="cardNo" min-width="155" />
|
|
<el-table-column label="患者姓名" prop="patName" width="90" />
|
|
<el-table-column label="身份证号" prop="idNo" min-width="170" />
|
|
<el-table-column label="联系电话" prop="phone" width="120" />
|
|
<el-table-column label="就诊卡号" prop="visitCardNo" width="110" />
|
|
<el-table-column label="报卡名称" prop="cardName" min-width="120" />
|
|
<el-table-column label="提交时间" prop="submitTime" width="110" align="center" />
|
|
<el-table-column label="状态" prop="status" width="80" align="center">
|
|
<template #default="{ row }">
|
|
<span :class="['status-tag', 'status-' + row.status]">
|
|
{{ getStatusName(row.status) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="160" align="center" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
|
|
<el-button v-if="row.status == 0" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
|
|
<el-button v-if="row.status == 0" type="success" link size="small" @click="handleSubmit(row)">提交</el-button>
|
|
<el-button v-if="row.status == 1" type="warning" link size="small" @click="handleWithdraw(row)">撤回</el-button>
|
|
<el-button v-if="row.status == 3" type="primary" link size="small" @click="handleExport(row)">导出</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination-section">
|
|
<el-pagination
|
|
v-model:current-page="queryParams.pageNo"
|
|
v-model:page-size="queryParams.pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="getList"
|
|
@current-change="getList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部批量操作栏 -->
|
|
<div class="bottom-action-bar">
|
|
<div class="bottom-action-left">
|
|
<el-checkbox v-model="isAllSelected" @change="handleSelectAll">全选</el-checkbox>
|
|
<span class="selected-info">已选择 {{ selectedRows.length }} 个项目</span>
|
|
</div>
|
|
<div class="bottom-action-right">
|
|
<el-button class="btn-batch-delete" :disabled="selectedRows.length === 0" @click="handleBatchDelete">批量删除</el-button>
|
|
<el-button class="btn-batch-submit" type="primary" :disabled="selectedRows.length === 0" @click="handleBatchSubmit">批量提交</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<InfectiousDiseaseReportDialog
|
|
ref="infectiousDiseaseReportRef"
|
|
:read-only="detailMode === 'view'"
|
|
@success="detailVisible = false"
|
|
@close="detailVisible = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, onActivated, onBeforeUnmount, nextTick, computed } from 'vue';
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
import { DataAnalysis, Warning, CircleCheck, Check, RefreshRight } from '@element-plus/icons-vue';
|
|
import InfectiousDiseaseReportDialog from '../components/diagnosis/infectiousDiseaseReportDialog.vue';
|
|
import {
|
|
getDoctorCardStatistics,
|
|
getDoctorCardList,
|
|
submitCard,
|
|
withdrawCard,
|
|
batchSubmitCards,
|
|
batchDeleteCards,
|
|
exportCardToWord,
|
|
getCardDetail,
|
|
} from './api';
|
|
|
|
const loading = ref(false);
|
|
const cardList = ref([]);
|
|
const total = ref(0);
|
|
const selectedRows = ref([]);
|
|
const isAllSelected = ref(false);
|
|
const tableRef = ref(null);
|
|
|
|
const statistics = ref({
|
|
totalCount: 0,
|
|
pendingFailedCount: 0,
|
|
reportedCount: 0,
|
|
});
|
|
|
|
const queryParams = reactive({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
dateRange: [],
|
|
status: '',
|
|
keyword: '',
|
|
});
|
|
|
|
const detailVisible = ref(false);
|
|
const detailMode = ref('view');
|
|
const infectiousDiseaseReportRef = ref(null);
|
|
|
|
// 计算表格高度：根据视口高度动态调整
|
|
const tableHeight = computed(() => {
|
|
// 视口高度 - 顶部导航(约60px) - 标题(40px) - 统计卡片(120px) - 筛选区(100px)
|
|
// - 分页(60px) - 底部操作栏(60px) - 上下边距(80px) - 额外缓冲(20px)
|
|
return window.innerHeight - 540;
|
|
});
|
|
|
|
// 监听窗口大小变化，确保表格高度自适应
|
|
let resizeObserver = null;
|
|
|
|
const statusMap = {
|
|
0: { name: '待提交', type: 'warning' },
|
|
1: { name: '已提交', type: 'primary' },
|
|
2: { name: '已审核', type: 'success' },
|
|
3: { name: '已上报', type: 'success' },
|
|
4: { name: '失败', type: 'danger' },
|
|
5: { name: '退回', type: 'danger' },
|
|
6: { name: '作废', type: 'info' },
|
|
};
|
|
|
|
const ageUnitMap = {
|
|
'1': '岁',
|
|
'2': '月',
|
|
'3': '天',
|
|
};
|
|
|
|
function getStatusName(status) {
|
|
return statusMap[status]?.name || '未知';
|
|
}
|
|
|
|
function getStatusType(status) {
|
|
return statusMap[status]?.type || 'info';
|
|
}
|
|
|
|
function getAgeUnit(unit) {
|
|
return ageUnitMap[unit] || '岁';
|
|
}
|
|
|
|
async function getStatistics() {
|
|
try {
|
|
const res = await getDoctorCardStatistics();
|
|
console.log('统计数据响应:', res);
|
|
if (res.code === 200) {
|
|
statistics.value = res.data || { totalCount: 0, pendingFailedCount: 0, reportedCount: 0 };
|
|
} else {
|
|
console.error('获取统计数据失败:', res.msg);
|
|
ElMessage.error(res.msg || '获取统计数据失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('获取统计数据异常:', error);
|
|
ElMessage.error('获取统计数据失败');
|
|
}
|
|
}
|
|
|
|
async function getList() {
|
|
loading.value = true;
|
|
try {
|
|
const params = { ...queryParams };
|
|
if (params.dateRange && params.dateRange.length === 2) {
|
|
params.startDate = params.dateRange[0];
|
|
params.endDate = params.dateRange[1];
|
|
}
|
|
delete params.dateRange;
|
|
|
|
console.log('查询参数:', params);
|
|
const res = await getDoctorCardList(params);
|
|
console.log('列表数据响应:', res);
|
|
if (res.code === 200) {
|
|
cardList.value = res.data?.list || [];
|
|
total.value = res.data?.total || 0;
|
|
console.log('列表数据:', cardList.value, '总数:', total.value);
|
|
} else {
|
|
console.error('获取列表失败:', res.msg);
|
|
ElMessage.error(res.msg || '获取数据失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('获取列表异常:', error);
|
|
ElMessage.error('获取数据失败');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function handleQuery() {
|
|
queryParams.pageNo = 1;
|
|
getList();
|
|
}
|
|
|
|
function handleReset() {
|
|
queryParams.pageNo = 1;
|
|
queryParams.pageSize = 10;
|
|
queryParams.dateRange = [];
|
|
queryParams.status = '';
|
|
queryParams.keyword = '';
|
|
getList();
|
|
}
|
|
|
|
function handleSelectionChange(selection) {
|
|
selectedRows.value = selection;
|
|
isAllSelected.value = selection.length === cardList.value.length && cardList.value.length > 0;
|
|
}
|
|
|
|
function handleSelectAll(val) {
|
|
nextTick(() => {
|
|
if (tableRef.value) {
|
|
tableRef.value.toggleAllSelection();
|
|
}
|
|
});
|
|
}
|
|
|
|
async function handleView(row) {
|
|
try {
|
|
const res = await getCardDetail(row.cardNo);
|
|
if (res.code === 200) {
|
|
detailMode.value = 'view';
|
|
detailVisible.value = true;
|
|
nextTick(() => {
|
|
infectiousDiseaseReportRef.value?.showReport(res.data || {});
|
|
});
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error('获取详情失败');
|
|
}
|
|
}
|
|
|
|
async function handleEdit(row) {
|
|
try {
|
|
const res = await getCardDetail(row.cardNo);
|
|
if (res.code === 200) {
|
|
detailMode.value = 'edit';
|
|
detailVisible.value = true;
|
|
nextTick(() => {
|
|
infectiousDiseaseReportRef.value?.showReport(res.data || {}, false);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error('获取详情失败');
|
|
}
|
|
}
|
|
|
|
async function handleSubmit(row) {
|
|
try {
|
|
await ElMessageBox.confirm('确认提交该报卡？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
});
|
|
const res = await submitCard(row.cardNo);
|
|
if (res.code === 200) {
|
|
ElMessage.success('提交成功');
|
|
getStatistics();
|
|
getList();
|
|
} else {
|
|
ElMessage.error(res.msg || '提交失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
ElMessage.error('提交失败');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleWithdraw(row) {
|
|
try {
|
|
await ElMessageBox.confirm('确认撤回该报卡？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
});
|
|
const res = await withdrawCard(row.cardNo);
|
|
if (res.code === 200) {
|
|
ElMessage.success('撤回成功');
|
|
getStatistics();
|
|
getList();
|
|
} else {
|
|
ElMessage.error(res.msg || '撤回失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
ElMessage.error('撤回失败');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleBatchSubmit() {
|
|
const validRows = selectedRows.value.filter(row => row.status == 0);
|
|
if (validRows.length === 0) {
|
|
ElMessage.warning('只能提交待提交状态的报卡');
|
|
return;
|
|
}
|
|
try {
|
|
await ElMessageBox.confirm(`确认提交选中的 ${validRows.length} 条报卡？`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
});
|
|
const cardNos = validRows.map(row => row.cardNo);
|
|
const res = await batchSubmitCards(cardNos);
|
|
if (res.code === 200) {
|
|
ElMessage.success(res.msg || '批量提交成功');
|
|
getStatistics();
|
|
getList();
|
|
} else {
|
|
ElMessage.error(res.msg || '批量提交失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
ElMessage.error('批量提交失败');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleBatchDelete() {
|
|
const validRows = selectedRows.value.filter(row => row.status == 0);
|
|
if (validRows.length === 0) {
|
|
ElMessage.warning('只能删除待提交状态的报卡');
|
|
return;
|
|
}
|
|
try {
|
|
await ElMessageBox.confirm(`确认删除选中的 ${validRows.length} 条报卡？删除后状态将变为作废。`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
});
|
|
const cardNos = validRows.map(row => row.cardNo);
|
|
const res = await batchDeleteCards(cardNos);
|
|
if (res.code === 200) {
|
|
ElMessage.success(res.msg || '批量删除成功');
|
|
getStatistics();
|
|
getList();
|
|
} else {
|
|
ElMessage.error(res.msg || '批量删除失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
ElMessage.error('批量删除失败');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleExport(row) {
|
|
try {
|
|
const res = await exportCardToWord(row.cardNo);
|
|
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `传染病报告卡-${row.cardNo}.docx`;
|
|
link.click();
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
ElMessage.error('导出失败');
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
console.log('页面首次加载 - onMounted');
|
|
getStatistics();
|
|
getList();
|
|
|
|
// 添加窗口大小变化监听
|
|
window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
// 处理 keep-alive 缓存场景：从其他页面返回时重新加载数据
|
|
onActivated(() => {
|
|
console.log('页面被激活 - onActivated');
|
|
getStatistics();
|
|
getList();
|
|
});
|
|
|
|
// 组件卸载时移除事件监听
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
});
|
|
|
|
// 窗口大小变化处理函数
|
|
function handleResize() {
|
|
// 触发计算属性重新计算
|
|
nextTick(() => {
|
|
if (tableRef.value) {
|
|
tableRef.value.doLayout();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.my-card-management-container {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: calc(100vh - 84px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* 页面标题 */
|
|
.page-header {
|
|
margin-bottom: 0;
|
|
}
|
|
.page-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 统计卡片区 */
|
|
.statistics-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
|
|
border: 1px solid #f0f0f0;
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
.stat-card:hover {
|
|
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 图标容器 */
|
|
.stat-icon-wrap {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.stat-icon-purple {
|
|
background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
|
|
}
|
|
.stat-icon-red {
|
|
background: linear-gradient(135deg, #fca5a5 0%, #ef4444 100%);
|
|
}
|
|
.stat-icon-green {
|
|
background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
|
|
}
|
|
.stat-icon-inner {
|
|
font-size: 24px;
|
|
color: #fff;
|
|
}
|
|
|
|
.stat-content {
|
|
flex: 1;
|
|
}
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
line-height: 1.2;
|
|
}
|
|
.stat-label {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 高级筛选区 */
|
|
.filter-section {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 16px 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
.filter-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
margin-bottom: 14px;
|
|
}
|
|
.filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.filter-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.filter-label {
|
|
font-size: 13px;
|
|
color: #475569;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.filter-date-picker {
|
|
width: 240px;
|
|
}
|
|
.filter-select {
|
|
width: 140px;
|
|
}
|
|
.filter-input {
|
|
width: 180px;
|
|
}
|
|
.filter-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
.btn-apply {
|
|
background-color: #6366f1;
|
|
border-color: #6366f1;
|
|
}
|
|
.btn-apply:hover {
|
|
background-color: #4f46e5;
|
|
border-color: #4f46e5;
|
|
}
|
|
.btn-reset {
|
|
color: #475569;
|
|
}
|
|
|
|
/* 表格区 */
|
|
.table-section {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
|
|
/* 状态标签 */
|
|
.status-tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
}
|
|
/* 已上报 - 绿 */
|
|
.status-3 {
|
|
color: #16a34a;
|
|
background: #dcfce7;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
/* 已审核 - 蓝 */
|
|
.status-2 {
|
|
color: #2563eb;
|
|
background: #dbeafe;
|
|
border: 1px solid #bfdbfe;
|
|
}
|
|
/* 失败 - 红 */
|
|
.status-4 {
|
|
color: #dc2626;
|
|
background: #fee2e2;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
/* 已提交 - 绿 */
|
|
.status-1 {
|
|
color: #16a34a;
|
|
background: #dcfce7;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
/* 待提交 - 橙 */
|
|
.status-0 {
|
|
color: #d97706;
|
|
background: #fef3c7;
|
|
border: 1px solid #fde68a;
|
|
}
|
|
/* 作废 - 灰 */
|
|
.status-6 {
|
|
color: #64748b;
|
|
background: #f1f5f9;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
/* 退回 - 红 */
|
|
.status-5 {
|
|
color: #dc2626;
|
|
background: #fee2e2;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
/* 分页 */
|
|
.pagination-section {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* 底部批量操作栏 */
|
|
.bottom-action-bar {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 12px 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.bottom-action-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.selected-info {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
.bottom-action-right {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.btn-batch-delete {
|
|
color: #dc2626;
|
|
border-color: #fecaca;
|
|
background: #fff;
|
|
}
|
|
.btn-batch-delete:hover {
|
|
background: #fee2e2;
|
|
border-color: #fca5a5;
|
|
}
|
|
.btn-batch-submit {
|
|
background-color: #6366f1;
|
|
border-color: #6366f1;
|
|
font-weight: 500;
|
|
}
|
|
.btn-batch-submit:hover {
|
|
background-color: #4f46e5;
|
|
border-color: #4f46e5;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.statistics-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.filter-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.filter-actions {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style> |