You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.4 KiB
119 lines
2.4 KiB
<script lang="ts" setup>
|
|
import { useWorkOrder } from '@/store/modules/workOrder'
|
|
import { isEmpty } from '@/utils'
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
|
import { reactive, ref, watch } from 'vue'
|
|
import ListItem from './ListItem.vue'
|
|
import type { PackageListItem } from '/#/workorder'
|
|
|
|
const workStore = useWorkOrder()
|
|
const data = ref<PackageListItem[]>([])
|
|
const activeId = ref('')
|
|
const el = ref<HTMLDivElement | null>(null)
|
|
const keyword = ref('')
|
|
const canloadMore = ref(true)
|
|
|
|
const pagination = reactive({
|
|
pageNo: 0,
|
|
pageSize: 10,
|
|
})
|
|
|
|
function selectHandler(id: string, index: number) {
|
|
workStore.setActive(index)
|
|
}
|
|
|
|
const { isLoading } = useInfiniteScroll(
|
|
el as any,
|
|
() => {
|
|
loadMore()
|
|
},
|
|
{ distance: 10, interval: 800, canLoadMore: () => {
|
|
// console.log('canloadmore excuted!')
|
|
return canloadMore.value
|
|
} },
|
|
)
|
|
|
|
async function loadMore() {
|
|
if (isLoading.value || el.value == null)
|
|
return
|
|
|
|
// console.log('loadmore')
|
|
const more = await fetchList()
|
|
data.value.push(...more)
|
|
}
|
|
|
|
async function fetchList() {
|
|
try {
|
|
pagination.pageNo += 1
|
|
const result = await workStore.fetchOrderList(pagination, keyword.value)
|
|
const { data, pageCount } = result
|
|
canloadMore.value = pageCount >= pagination.pageNo && pageCount !== 0
|
|
return data || []
|
|
}
|
|
catch (error) {
|
|
canloadMore.value = false
|
|
return []
|
|
}
|
|
}
|
|
|
|
watch(() => workStore.activeId, (newVal) => {
|
|
if (isEmpty(newVal))
|
|
return
|
|
|
|
activeId.value = newVal
|
|
})
|
|
|
|
function reset() {
|
|
pagination.pageNo = 0
|
|
pagination.pageSize = 10
|
|
canloadMore.value = true
|
|
data.value.length = 0
|
|
|
|
workStore.reset()
|
|
}
|
|
|
|
async function search(word: string) {
|
|
keyword.value = word
|
|
reset()
|
|
useInfiniteScroll(
|
|
el as any,
|
|
() => {
|
|
loadMore()
|
|
},
|
|
{ distance: 10, canLoadMore: () => canloadMore.value },
|
|
)
|
|
}
|
|
|
|
defineExpose({
|
|
search,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<n-spin :show="isLoading">
|
|
<div ref="el" class="list">
|
|
<ListItem
|
|
v-for="(item, index) in data" :key="item.id" :selected="activeId === item.id" :list-item="item"
|
|
@click="selectHandler(item.id, index)"
|
|
/>
|
|
</div>
|
|
</n-spin>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.list {
|
|
height: calc(100vh - 146px);
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
|
|
scrollbar-width: none;
|
|
/* firefox */
|
|
-ms-overflow-style: none;
|
|
/* IE 10+ */
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|