youshang/erp_sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
ZiJIe
2025-09-22 14:50:20 +08:00
parent a76d3a4337
commit d5fa814cd6
4 changed files with 110 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
electron-vue-template/src/renderer/components/zebra/ZebraDashboard.vue
View File

@@ -174,20 +174,7 @@ onMounted(async () => {
</div>
</div>
<!-- 进度条显示 -->
<div class="progress-section" v-if="showProgress">
<div class="progress-box">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
</div>
<div class="progress-text">{{ progressPercentage }}%</div>
</div>
<div class="current-status" v-if="fetchTotalItems > 0">
{{ progressPercentage >= 100 ? '完成' : `获取中... (${allOrderData.length}/${fetchTotalItems})` }}
</div>
</div>
</div>
<!-- 进度条显示：移动到底部，以免挤压表头 -->
</div>
<!-- 数据显示区域 -->
@@ -256,15 +243,19 @@ onMounted(async () => {
</div>
</div>
<!-- 表格加载遮罩 -->
<!-- 表格加载遮罩：仅在无数据时显示 -->
<div v-if="loading && !allOrderData.length" class="table-loading">
<div class="spinner">⟳</div>
<div>加载中...</div>
</div>
</div>
<!-- 分页器 -->
<!-- 底部区域：进度条 + 分页器 -->
<div class="pagination-fixed">
<div v-if="showProgress" class="progress-bottom">
<div class="progress-bar"><div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div></div>
<div class="progress-text">{{ progressPercentage }}%</div>
</div>
<el-pagination
background
:current-page="currentPage"
@@ -296,8 +287,8 @@ export default {
.progress-section { margin: 15px 0 10px 0; }
.progress-box { padding: 8px 0; }
.progress-container { display: flex; align-items: center; position: relative; padding-right: 50px; margin-bottom: 8px; }
.progress-bar { flex: 1; height: 6px; background: #ebeef5; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #409EFF, #66b1ff); border-radius: 3px; transition: width 0.3s ease; }
.progress-bar { flex: 1; height: 3px; background: #ebeef5; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #409EFF, #66b1ff); border-radius: 2px; transition: width 0.3s ease; }
.progress-text { position: absolute; right: 0; font-size: 13px; color: #409EFF; font-weight: 500; }
.current-status { font-size: 12px; color: #606266; padding-left: 2px; }
.table-container { display: flex; flex-direction: column; flex: 1; min-height: 400px; overflow: hidden; }
@@ -326,6 +317,7 @@ export default {
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.empty-text { font-size: 14px; color: #909399; }
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; }
.progress-bottom { display: flex; align-items: center; gap: 8px; margin-right: auto; }
</style>