From 68404100b734b63d1220bb3637d665676eeb32a3 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 06 十一月 2023 16:01:53 +0800
Subject: [PATCH] feat: 工艺参数列表添加滚动加载
---
src/views/dashboard/index.vue | 40 ++++++++++++++++++++++++++++++++--------
1 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index af278ea..5f99ae8 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -15,14 +15,30 @@
<ProcessingInfo style="margin-top: 6px" :task="activeTask"></ProcessingInfo>
</el-tab-pane>
<el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅">
- <el-scrollbar always>
- <ProcessInfo
- v-for="item in craftModelStore.craftModelList"
- :key="item.ID"
- :craft-model="item"
- @detail="openCraftModelDetailModal"
- ></ProcessInfo>
- </el-scrollbar>
+ <div style="height: 300px">
+ <el-scrollbar always style="height: 100%">
+ <div
+ v-infinite-scroll="craftModelStore.loadMore"
+ infinite-scroll-delay="500"
+ infinite-scroll-distance="40"
+ style="display: flex; align-items: center; flex-wrap: wrap"
+ >
+ <ProcessInfo
+ v-for="item in craftModelStore.craftModelList"
+ :key="item.ID"
+ :craft-model="item"
+ @detail="openCraftModelDetailModal"
+ ></ProcessInfo>
+ </div>
+ <div class="craft-loaded-tip">
+ <el-icon v-if="craftModelStore.loading" class="is-loading" size="30">
+ <Loading />
+ </el-icon>
+
+ <div v-if="!craftModelStore.hasMore">鍔犺浇瀹屾垚</div>
+ </div>
+ </el-scrollbar>
+ </div>
</el-tab-pane>
<el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">
<InputMaterialsList
@@ -94,6 +110,7 @@
import { useCraftModelStore } from '@/stores/craftModel'
import CraftDetailModal from '@/views/dashboard/components/CraftDetailModal.vue'
import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue'
+import { Loading } from '@element-plus/icons-vue'
defineOptions({
name: 'DashboardView'
@@ -219,4 +236,11 @@
width: 100%;
font-size: 20px;
}
+.craft-loaded-tip {
+ height: 40px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
</style>
--
Gitblit v1.8.0