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/stores/craftModel.ts | 41 +++++++++++++++++---
src/views/dashboard/components/ProcessInfo.vue | 8 ++--
src/views/dashboard/index.vue | 40 ++++++++++++++++----
src/views/dashboard/components/CraftInfo.vue | 2
src/components.d.ts | 3 +
src/api/index.ts | 9 ++++
6 files changed, 83 insertions(+), 20 deletions(-)
diff --git a/src/api/index.ts b/src/api/index.ts
index 03bc1c8..e474d51 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -11,6 +11,13 @@
msg: string
}
+export interface ListResponse<T = any> {
+ code: number
+ data: T
+ msg: string
+ total: number
+}
+
export interface TaskListParams {
/** 1鏈畬鎴�2浠婂ぉ鏈畬鎴�3宸插畬鎴� */
type: 1 | 2 | 3
@@ -134,7 +141,7 @@
* @param params
*/
export function apiGetCraftModelList(params: CraftModelListParams) {
- return request<BaseResponse<CraftModel[]>>({
+ return request<ListResponse<CraftModel[]>>({
url: '/v1/processModel/list',
method: 'get',
params
diff --git a/src/components.d.ts b/src/components.d.ts
index 5374a8f..5683fb2 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -27,4 +27,7 @@
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
+ export interface ComponentCustomProperties {
+ vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
+ }
}
diff --git a/src/stores/craftModel.ts b/src/stores/craftModel.ts
index 9b8afbd..b550e86 100644
--- a/src/stores/craftModel.ts
+++ b/src/stores/craftModel.ts
@@ -1,22 +1,25 @@
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
import { defineStore } from 'pinia'
import type { CraftModel } from '@/api/craftModel'
import { apiGetCraftModelList } from '@/api'
import { useTasksStore } from '@/stores/tasks'
const watcher = ref()
-
+const page = ref(1)
+const total = ref(0)
export const useCraftModelStore = defineStore('craftModel', () => {
- const craftModelList = ref<CraftModel[]>()
+ const craftModelList = ref<CraftModel[]>([])
const taskStore = useTasksStore()
function getCraftModelList() {
if (taskStore.activeTask?.Procedure.ID) {
+ craftModelList.value = []
apiGetCraftModelList({
procedureId: taskStore.activeTask?.Procedure.ID,
- page: 1,
- pageSize: 999
+ page: page.value,
+ pageSize: 6
}).then((res) => {
craftModelList.value = res.data ?? []
+ total.value = res.total
})
}
}
@@ -25,10 +28,36 @@
watch(
() => taskStore.activeTask,
() => {
+ page.value = 1
getCraftModelList()
}
)
}
- return { craftModelList, getCraftModelList }
+ const loading = ref(false)
+
+ function loadMore() {
+ if (taskStore.activeTask?.Procedure.ID && !loading.value && hasMore.value) {
+ page.value++
+ loading.value = true
+ apiGetCraftModelList({
+ procedureId: taskStore.activeTask?.Procedure.ID,
+ page: page.value,
+ pageSize: 6
+ })
+ .then((res) => {
+ craftModelList.value = [...craftModelList.value, ...(res.data ?? [])]
+ total.value = res.total
+ })
+ .finally(() => {
+ loading.value = false
+ })
+ }
+ }
+
+ const hasMore = computed(() => {
+ return total.value > craftModelList.value.length
+ })
+
+ return { craftModelList, getCraftModelList, hasMore, loading, loadMore }
})
diff --git a/src/views/dashboard/components/CraftInfo.vue b/src/views/dashboard/components/CraftInfo.vue
index 3ebac61..6fd8472 100644
--- a/src/views/dashboard/components/CraftInfo.vue
+++ b/src/views/dashboard/components/CraftInfo.vue
@@ -13,7 +13,7 @@
</div>
<div class="tip-current">褰撳墠浣跨敤</div>
<div class="btn">
- <el-button type="primary" class="color_organge"> 鏇存柊宸ヨ壓</el-button>
+ <el-button type="primary"> 鏇存柊宸ヨ壓</el-button>
</div>
</div>
</template>
diff --git a/src/views/dashboard/components/ProcessInfo.vue b/src/views/dashboard/components/ProcessInfo.vue
index 65ab682..95ba326 100644
--- a/src/views/dashboard/components/ProcessInfo.vue
+++ b/src/views/dashboard/components/ProcessInfo.vue
@@ -13,7 +13,7 @@
</div>
<div v-if="craftModel.isUpdate" class="tip-current">褰撳墠浣跨敤</div>
<div class="btn">
- <el-button type="primary" class="color_organge" @click="onUpdateClick"> 鏇存柊宸ヨ壓 </el-button>
+ <el-button type="primary" @click="onUpdateClick"> 鏇存柊宸ヨ壓 </el-button>
</div>
</div>
</template>
@@ -31,10 +31,10 @@
}>()
function onDetailClick() {
- emit('detail', craftModel)
+ emit('detail', craftModel.value)
}
function onUpdateClick() {
- emit('update', craftModel)
+ emit('update', craftModel.value)
}
</script>
@@ -51,7 +51,7 @@
padding: 23px 10px 10px;
background: $status-done;
border-radius: 8px;
- float: left;
+ //float: left;
overflow: hidden;
font-size: 15px;
position: relative;
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