DeXun/im-uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

版本忽略更新，报工页面优化

Browse Source
This commit is contained in:
砂糖
2025-07-11 10:07:03 +08:00
parent faab5b2bd1
commit 561601910f
6 changed files with 849 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
App.vue
View File

@@ -471,7 +471,7 @@ export default {
},
};
function checkUpdate() {
function checkUpdate(forceCheck = false) {
const localVersion = plus.runtime.version;
const localWgtVersion = uni.getStorageSync('wgtVersion') || localVersion;
uni.request({
@@ -483,11 +483,19 @@ function checkUpdate() {
const currentVersion = compareVersion(localWgtVersion, localVersion) > 0 ? localWgtVersion : localVersion;
console.log('本地基座版本:', localVersion, '本地wgt版本:', localWgtVersion, '当前对比版本:', currentVersion, '远程版本:', remoteVersion);
if (compareVersion(remoteVersion, currentVersion) > 0) {
// 检查是否已忽略当前版本（除非强制检查）
const ignoredVersion = uni.getStorageSync('ignoredVersion');
if (!forceCheck && ignoredVersion === remoteVersion) {
console.log('用户已选择忽略此版本:', remoteVersion);
return;
}
uni.showModal({
title: '发现新版本',
content: `检测到新版本（${remoteVersion}），是否立即下载并更新？`,
confirmText: '立即更新',
cancelText: '暂不更新',
showCancel: true,
success: (modalRes) => {
if (modalRes.confirm) {
uni.showLoading({title: '正在下载更新包...'});
@@ -520,6 +528,20 @@ function checkUpdate() {
uni.showToast({title: '下载失败'});
}
});
} else {
// 用户选择暂不更新，询问是否忽略此版本
uni.showModal({
title: '忽略更新',
content: `是否忽略版本 ${remoteVersion}？忽略后下次启动时将不再提示此版本更新。`,
confirmText: '忽略此版本',
cancelText: '下次提醒',
success: (ignoreRes) => {
if (ignoreRes.confirm) {
uni.setStorageSync('ignoredVersion', remoteVersion);
uni.showToast({title: '已忽略此版本更新'});
}
}
});
}
}
});
@@ -550,6 +572,29 @@ function compareVersion(v1, v2) {
}
return 0;
}
// 更新管理工具函数
function clearIgnoredVersion() {
uni.removeStorageSync('ignoredVersion');
console.log('已清除忽略的版本设置');
}
function getIgnoredVersion() {
return uni.getStorageSync('ignoredVersion');
}
function setIgnoredVersion(version) {
uni.setStorageSync('ignoredVersion', version);
console.log('已设置忽略版本:', version);
}
// 导出更新管理函数供其他页面使用
uni.$updateManager = {
checkUpdate: (forceCheck = false) => checkUpdate(forceCheck),
clearIgnoredVersion,
getIgnoredVersion,
setIgnoredVersion
};
</script>
<style lang="scss">

1
api/oa/login.js
View File

@@ -38,6 +38,7 @@ export const loginOaByPhone = async (phoneNumber) => {
// 响应拦截器已经处理了响应，直接返回 res.data
if (response && response.data.token) {
setToken(response.data.token)
uni.setStorageSync('oaId', response.data.userId)
// localStorage.setItem('oaToken', response.data.token)
return {
token: response.data.token,

254
components/ReportCard/index.vue Normal file
View File

@@ -0,0 +1,254 @@
<template>
<view class="report-card" @click="handleCardClick">
<!-- 带头像和名字的卡片 -->
<view v-if="showAvatar" class="card-with-avatar">
<view class="card-header">
<view class="user-info">
<image class="avatar" :src="item.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
<view class="user-details">
<text class="nickname">{{ item.nickName }}</text>
<text v-if="item.deptName" class="dept-name">({{ item.deptName }})</text>
</view>
</view>
<view class="report-time">{{ formatDate(item.createTime) }}</view>
</view>
<view class="card-content">
<view class="project-info">
<view class="project-name">
<text v-if="item.prePay > 0" class="star-icon">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="project-details">
<u-tag v-if="!item.projectCode" type="error" text="无" size="mini"></u-tag>
<u-tag v-else :text="item.projectCode" size="mini"></u-tag>
<text class="project-num">{{ item.projectNum }}</text>
</view>
</view>
<view class="work-info">
<view class="work-location">
<text>{{ item.workPlace }}</text>
</view>
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'" size="mini"></u-tag>
</view>
</view>
</view>
<!-- 不带头像的卡片 -->
<view v-else class="card-simple">
<view class="card-header-simple">
<view class="project-name">
<text v-if="item.prePay > 0" class="star-icon">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="report-time">{{ formatDate(item.createTime) }}</view>
</view>
<view class="card-content-simple">
<view class="project-details">
<u-tag v-if="!item.projectCode" type="error" text="无" size="mini"></u-tag>
<u-tag v-else :text="item.projectCode" size="mini"></u-tag>
<text class="project-num">{{ item.projectNum }}</text>
</view>
<view class="work-info">
<view class="work-location">
<text>{{ item.workPlace }}</text>
</view>
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'" size="mini"></u-tag>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ReportCard',
props: {
// 报工数据
item: {
type: Object,
required: true
},
// 是否显示头像和名字
showAvatar: {
type: Boolean,
default: true
}
},
methods: {
// 格式化日期
formatDate(date) {
if (!date) return '';
const d = new Date(date);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
},
// 卡片点击事件
handleCardClick() {
this.$emit('card-click', this.item);
}
}
}
</script>
<style lang="scss" scoped>
.report-card {
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}
// 带头像的卡片样式
.card-with-avatar {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx;
border-bottom: 1rpx solid #f0f0f0;
.user-info {
display: flex;
align-items: center;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.user-details {
.nickname {
font-size: 28rpx;
font-weight: 500;
color: #333;
display: block;
}
.dept-name {
font-size: 24rpx;
color: #666;
margin-top: 4rpx;
display: block;
}
}
}
.report-time {
font-size: 24rpx;
color: #999;
}
}
.card-content {
padding: 24rpx;
.project-info {
margin-bottom: 20rpx;
.project-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 12rpx;
.star-icon {
margin-right: 8rpx;
}
}
.project-details {
display: flex;
align-items: center;
gap: 12rpx;
.project-num {
font-size: 24rpx;
color: #666;
}
}
}
.work-info {
display: flex;
justify-content: space-between;
align-items: center;
.work-location {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 26rpx;
color: #666;
}
}
}
}
// 不带头像的卡片样式
.card-simple {
padding: 24rpx;
.card-header-simple {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.project-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
.star-icon {
margin-right: 8rpx;
}
}
.report-time {
font-size: 24rpx;
color: #999;
}
}
.card-content-simple {
.project-details {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 16rpx;
.project-num {
font-size: 24rpx;
color: #666;
}
}
.work-info {
display: flex;
justify-content: space-between;
align-items: center;
.work-location {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 26rpx;
color: #666;
}
}
}
}
}
</style>

263
components/ReportDetail/index.vue Normal file
View File

@@ -0,0 +1,263 @@
<template>
<uni-popup ref="popup" type="center" :mask-click="true" @mask-click="close">
<view class="detail-popup">
<view class="detail-header">
<text class="detail-title">报工详情</text>
<u-icon name="close" @click="close" size="40" color="#999"></u-icon>
</view>
<!-- 加载状态 -->
<view v-if="loading" class="loading-container">
<u-loading-icon mode="spinner" size="40"></u-loading-icon>
<text class="loading-text">加载中...</text>
</view>
<scroll-view v-else scroll-y class="detail-content">
<view class="detail-info">
<!-- 空数据提示 -->
<view v-if="!detail || Object.keys(detail).length === 0" class="empty-detail">
<text class="empty-text">暂无详情数据</text>
</view>
<!-- 项目信息 -->
<view v-else class="info-section">
<view class="section-title">项目信息</view>
<view class="info-item">
<text class="label">项目名称：</text>
<text class="value">{{ detail.projectName }}</text>
</view>
<view class="info-item">
<text class="label">项目编号：</text>
<text class="value">{{ detail.projectNum }}</text>
</view>
<view class="info-item" v-if="detail.projectCode">
<text class="label">项目代号：</text>
<text class="value">{{ detail.projectCode }}</text>
</view>
</view>
<!-- 报工信息 -->
<view class="info-section">
<view class="section-title">报工信息</view>
<view class="info-item">
<text class="label">工作地点：</text>
<text class="value">{{ detail.workPlace }}</text>
</view>
<view class="info-item">
<text class="label">是否出差：</text>
<text class="value">{{ detail.isTrip === 1 ? '是' : '否' }}</text>
</view>
<view class="info-item" v-if="detail.isTrip === 1">
<text class="label">出差类型：</text>
<text class="value">{{ detail.workType === 0 ? '国内' : '国外' }}</text>
</view>
<view class="info-item">
<text class="label">报工时间：</text>
<text class="value">{{ formatDate(detail.createTime) }}</text>
</view>
</view>
<!-- 报工内容 -->
<view class="info-section">
<view class="section-title">报工内容</view>
<view class="content-box">
<mp-html :content="detail.content"></mp-html>
</view>
</view>
<!-- 备注信息 -->
<view class="info-section" v-if="detail.remark">
<view class="section-title">备注</view>
<view class="content-box">
<text>{{ detail.remark }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</template>
<script>
import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'
export default {
name: 'ReportDetail',
components: {
mpHtml
},
props: {
// 报工详情数据
detail: {
type: Object,
default: () => ({})
}
},
data() {
return {
loading: false
}
},
watch: {
detail: {
handler(newVal) {
if (newVal && Object.keys(newVal).length > 0) {
this.loading = false;
}
},
immediate: true
}
},
methods: {
// 格式化日期
formatDate(date) {
if (!date) return '';
const d = new Date(date);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
},
// 打开弹窗
open() {
this.loading = true;
this.$refs.popup.open();
// 延迟关闭加载状态，给内容渲染时间
setTimeout(() => {
this.loading = false;
}, 300);
},
// 关闭弹窗
close() {
this.$refs.popup.close();
}
}
}
</script>
<style lang="scss" scoped>
.detail-popup {
background-color: #fff;
border-radius: 20rpx;
width: 90vw;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #e9ecef;
.detail-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
}
.loading-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 0;
box-sizing: border-box;
.loading-text {
font-size: 28rpx;
color: #666;
margin-top: 20rpx;
}
}
.detail-content {
flex: 1;
padding: 30rpx;
box-sizing: border-box;
max-height: 65vh;
}
.detail-info {
.empty-detail {
display: flex;
align-items: center;
justify-content: center;
padding: 100rpx 0;
.empty-text {
font-size: 28rpx;
color: #999;
}
}
.info-section {
margin-bottom: 40rpx;
&:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 28rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
padding-left: 20rpx;
border-left: 4rpx solid #007bff;
}
.info-item {
display: flex;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 26rpx;
color: #666;
width: 140rpx;
flex-shrink: 0;
}
.value {
font-size: 26rpx;
color: #333;
flex: 1;
word-break: break-all;
}
}
.content-box {
background-color: #f8f9fa;
border-radius: 12rpx;
padding: 20rpx;
min-height: 100rpx;
text {
font-size: 26rpx;
color: #333;
line-height: 1.6;
}
// 自定义mp-html样式
:deep(.mp-html) {
font-size: 26rpx;
color: #333;
line-height: 1.6;
p {
margin: 0;
padding: 0;
}
}
}
}
}
}
</style>

47
pages/profile/index/index.vue
View File

@@ -66,6 +66,11 @@ export default {
idx: 3,
title: "关于我们",
icon: require("static/images/profile_menu_about.png"),
},
{
idx: 4,
title: "应用更新",
icon: require("static/images/profile_menu_about.png"),
},
{
idx: 5,
@@ -73,7 +78,7 @@ export default {
icon: require("static/images/profile_menu_about.png")
},
{
idx: 4,
idx: 6,
title: "退出登录",
icon: require("static/images/profile_menu_logout.png"),
},
@@ -134,6 +139,9 @@ export default {
uni.navigateTo({
url: "/pages/profile/about/index",
});
break;
case 4:
this.showUpdateOptions();
break;
case 5:
uni.createPushMessage({
@@ -147,7 +155,7 @@ export default {
}
});
break;
case 4:
case 6:
uni.showModal({
title: "提示",
content: "确定要退出当前账号吗？",
@@ -169,6 +177,41 @@ export default {
url: `/pages/common/userOrGroupQrCode/index`,
});
},
showUpdateOptions() {
const ignoredVersion = uni.$updateManager.getIgnoredVersion();
let content = '选择更新操作：';
if (ignoredVersion) {
content += `\n当前忽略版本：${ignoredVersion}`;
}
uni.showActionSheet({
itemList: ['检查更新', '清除忽略版本', '取消'],
success: (res) => {
switch (res.tapIndex) {
case 0:
// 检查更新（强制检查）
uni.$updateManager.checkUpdate(true);
break;
case 1:
// 清除忽略版本
uni.showModal({
title: '确认操作',
content: '确定要清除忽略的版本设置吗？清除后将重新提示所有版本更新。',
success: (modalRes) => {
if (modalRes.confirm) {
uni.$updateManager.clearIgnoredVersion();
uni.showToast({title: '已清除忽略版本设置'});
}
}
});
break;
case 2:
// 取消
break;
}
}
});
},
},
};
</script>

367
pages/workbench/reportWork/reportWork.vue
View File

@@ -1,55 +1,58 @@
<template>
<view class="container">
<!-- 数据列表 -->
<view class="table-wrapper">
<scroll-view scroll-x class="table-scroll">
<view class="table-container">
<view class="table-header">
<view class="header-cell">项目代号</view>
<view class="header-cell">项目名称</view>
<view class="header-cell">项目编号</view>
<view class="header-cell">经办人</view>
<view class="header-cell">工作地点</view>
<view class="header-cell">国内/国外</view>
<view class="header-cell">报工时间</view>
</view>
<view class="table-body">
<view
v-for="(item, index) in projectReportList"
:key="item.reportId"
class="table-row"
>
<view class="table-cell">
<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
<u-tag v-else :text="item.projectCode"></u-tag>
</view>
<view class="table-cell">
<text v-if="item.prePay > 0">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="table-cell">{{ item.projectNum }}</view>
<view class="table-cell">
<text>{{ item.nickName }}</text>
<text v-if="item.deptName">({{ item.deptName }})</text>
</view>
<view class="table-cell">{{ item.workPlace }}</view>
<view class="table-cell">
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'"></u-tag>
</view>
<view class="table-cell">{{ formatDate(item.createTime) }}</view>
</view>
</view>
</view>
</scroll-view>
<!-- Tab切换 -->
<view class="tab-container">
<view
class="tab-item"
:class="{ active: activeTab === 'all' }"
@click="switchTab('all')"
>
<text>全部报工</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'my' }"
@click="switchTab('my')"
>
<text>我的报工</text>
</view>
</view>
<!-- 分页 -->
<u-loadmore
v-if="total > 0"
:status="loadMoreStatus"
@loadmore="loadMore"
></u-loadmore>
<!-- 卡片列表 -->
<view class="card-list-container">
<scroll-view
scroll-y
class="card-scroll"
@scrolltolower="loadMore"
refresher-enabled
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
:style="{ height: scrollHeight + 'px' }"
>
<view class="card-list">
<ReportCard
v-for="(item, index) in projectReportList"
:key="item.reportId"
:item="item"
:show-avatar="activeTab === 'all'"
@card-click="handleCardClick"
></ReportCard>
<!-- 空状态 -->
<view v-if="!loading && projectReportList.length === 0" class="empty-state">
<image src="/static/images/empty_lable.png" class="empty-image"></image>
<text class="empty-text">暂无报工数据</text>
</view>
</view>
<!-- 加载更多 -->
<u-loadmore
v-if="total > 0"
:status="loadMoreStatus"
@loadmore="loadMore"
></u-loadmore>
</scroll-view>
</view>
<!-- 圆形新增按钮 -->
<view class="fab-button" @click="handleAdd">
@@ -119,24 +122,44 @@
</view>
</view>
</uni-popup>
<!-- 报工详情弹窗 -->
<ReportDetail
ref="reportDetail"
:detail="reportDetail"
></ReportDetail>
</view>
</template>
<script>
import { listProjectReport, addProjectReport } from '@/api/oa/projectReport'
import { listProjectReport, addProjectReport, getProjectReport } from '@/api/oa/projectReport'
import { listProject } from '@/api/oa/project'
import { listDept } from '@/api/oa/dept'
import ReportCard from '@/components/ReportCard/index.vue'
import ReportDetail from '@/components/ReportDetail/index.vue'
import { mapState } from 'vuex'
export default {
components: {
ReportCard,
ReportDetail,
},
computed: {
...mapState('user', ['selfInfo'])
},
data() {
return {
// 当前激活的tab
activeTab: 'all',
// 滚动区域高度
scrollHeight: 0,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 总条数
total: 0,
// 项目报工表格数据
// 项目报工列表数据
projectReportList: [],
// 弹出层标题
title: "",
@@ -149,6 +172,10 @@ export default {
form: {},
// 加载更多状态
loadMoreStatus: 'loadmore',
// 下拉刷新状态
refreshing: false,
// 报工详情数据
reportDetail: {},
// 分页参数
queryParams: {
pageNum: 1,
@@ -186,14 +213,40 @@ export default {
}
},
onLoad() {
this.calculateScrollHeight();
this.getList();
},
onReady() {
// 页面渲染完成后重新计算高度
this.calculateScrollHeight();
},
methods: {
// 格式化日期
formatDate(date) {
if (!date) return '';
const d = new Date(date);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
// 计算滚动区域高度
calculateScrollHeight() {
const systemInfo = uni.getSystemInfoSync();
const tabHeight = 100; // tab高度
const containerPadding = 40; // 容器padding
// 悬浮按钮是固定定位，不需要预留空间，让卡片列表到达底部
// 我也不知道为什么要 + 100, 不然滚动高度下面一大片空白，这个不太好调试
this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 100;
},
// 切换tab
switchTab(tab) {
if (this.activeTab === tab) return;
this.activeTab = tab;
this.queryParams.pageNum = 1;
this.projectReportList = [];
this.getList();
},
// 下拉刷新
onRefresh() {
this.refreshing = true;
this.queryParams.pageNum = 1;
this.getList().finally(() => {
this.refreshing = false;
});
},
// 获取项目列表
@@ -235,19 +288,49 @@ export default {
// 查询项目报工列表
getList() {
this.loading = true;
listProjectReport(this.queryParams).then(response => {
this.projectReportList = response.rows || [];
this.total = response.total || 0;
this.loading = false;
this.getProjectList();
// this.getDeptList();
}).catch(err => {
console.error('获取报工列表失败:', err);
this.loading = false;
uni.showToast({
title: '获取数据失败',
icon: 'none'
return new Promise((resolve, reject) => {
this.loading = true;
// 根据当前tab设置查询参数
const params = {
...this.queryParams
};
// 如果是我的报工，添加用户ID过滤
if (this.activeTab === 'my') {
// 使用当前登录用户的ID
const oaId = uni.getStorageSync('oaId');
if (oaId) {
params.userId = oaId;
}
}
listProjectReport(params).then(response => {
if (this.queryParams.pageNum === 1) {
this.projectReportList = response.rows || [];
} else {
this.projectReportList = [...this.projectReportList, ...(response.rows || [])];
}
this.total = response.total || 0;
this.loading = false;
// 更新加载更多状态
if (this.queryParams.pageNum > 1) {
this.loadMoreStatus = 'loadmore';
}
this.getProjectList();
// this.getDeptList();
resolve(response);
}).catch(err => {
console.error('获取报工列表失败:', err);
this.loading = false;
this.loadMoreStatus = 'loadmore';
uni.showToast({
title: '获取数据失败',
icon: 'none'
});
reject(err);
});
});
},
@@ -259,6 +342,32 @@ export default {
this.$refs.popup.open();
},
// 卡片点击事件
handleCardClick(item) {
console.log('点击了报工卡片:', item);
// 获取报工详情
this.getReportDetail(item.reportId);
},
// 获取报工详情
getReportDetail(reportId) {
// 先打开弹窗显示加载状态
this.$refs.reportDetail.open();
getProjectReport(reportId).then(response => {
// 根据API返回的数据结构处理
this.reportDetail = response.data || response || {};
}).catch(err => {
console.error('获取报工详情失败:', err);
uni.showToast({
title: '获取详情失败',
icon: 'none'
});
// 关闭弹窗
this.$refs.reportDetail.close();
});
},
// 提交表单
submitForm() {
// 手动验证表单
@@ -361,18 +470,7 @@ export default {
this.queryParams.pageNum++;
this.loadMoreStatus = 'loading';
listProjectReport(this.queryParams).then(response => {
const newData = response.rows || [];
this.projectReportList = [...this.projectReportList, ...newData];
this.loadMoreStatus = 'loadmore';
}).catch(err => {
console.error('加载更多失败:', err);
this.loadMoreStatus = 'loadmore';
uni.showToast({
title: '加载失败',
icon: 'none'
});
});
this.getList();
},
// 项目选择变化处理
@@ -391,61 +489,75 @@ export default {
<style lang="scss" scoped>
.container {
padding: 20rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.table-wrapper {
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
}
.table-scroll {
width: 100%;
}
.table-container {
min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
}
.table-header {
height: 100vh;
display: flex;
background-color: #f8f9fa;
flex-direction: column;
}
.tab-container {
display: flex;
background-color: #fff;
padding: 0 20rpx;
border-bottom: 1rpx solid #e9ecef;
.header-cell {
width: 200rpx; // 固定列宽
padding: 20rpx 10rpx;
text-align: center;
font-weight: bold;
.tab-item {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
flex-shrink: 0; // 防止列被压缩
color: #666;
position: relative;
&.active {
color: #007bff;
font-weight: 500;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background-color: #007bff;
border-radius: 2rpx;
}
}
}
}
.table-body {
.table-row {
display: flex;
border-bottom: 1rpx solid #e9ecef;
&:hover {
background-color: #f8f9fa;
}
.table-cell {
width: 200rpx; // 固定列宽
padding: 20rpx 10rpx;
text-align: center;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0; // 防止列被压缩
word-break: break-all; // 长文本换行
}
.card-list-container {
flex: 1;
padding: 20rpx;
overflow: hidden;
}
.card-scroll {
width: 100%;
height: 100%;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
.empty-image {
width: 200rpx;
height: 200rpx;
margin-bottom: 30rpx;
opacity: 0.6;
}
.empty-text {
font-size: 28rpx;
color: #999;
}
}
@@ -512,5 +624,6 @@ export default {
justify-content: center;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
padding: 20rpx;
z-index: 999;
}
</style>