|
|
|
@ -1,119 +1,121 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { useInfiniteScroll } from "@vueuse/core";
|
|
|
|
|
import { onMounted, onUnmounted, reactive, ref, watch, defineProps } from "vue";
|
|
|
|
|
import ListItem from "./ListItem.vue";
|
|
|
|
|
import emitter from "@/utils/mitt";
|
|
|
|
|
import { useTaskStore } from "@/store/modules/task";
|
|
|
|
|
|
|
|
|
|
const taskStore = useTaskStore();
|
|
|
|
|
const data = ref<any[]>([]);
|
|
|
|
|
const activeId = ref("");
|
|
|
|
|
const el = ref<HTMLDivElement | null>(null);
|
|
|
|
|
const keyword = ref("");
|
|
|
|
|
const canloadMore = ref(true);
|
|
|
|
|
const isLoading = ref(false);
|
|
|
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
|
import { defineProps, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
|
|
|
|
import ListItem from './ListItem.vue'
|
|
|
|
|
import emitter from '@/utils/mitt'
|
|
|
|
|
import { useTaskStore } from '@/store/modules/task'
|
|
|
|
|
|
|
|
|
|
defineProps({
|
|
|
|
|
showFieldList: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [],
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
const taskStore = useTaskStore()
|
|
|
|
|
const data = ref<any[]>([])
|
|
|
|
|
const activeId = ref('')
|
|
|
|
|
const el = ref<HTMLDivElement | null>(null)
|
|
|
|
|
const keyword = ref('')
|
|
|
|
|
const canloadMore = ref(true)
|
|
|
|
|
const isLoading = ref(false)
|
|
|
|
|
|
|
|
|
|
const pagination = reactive({
|
|
|
|
|
pageNo: 0,
|
|
|
|
|
pageSize: 100,
|
|
|
|
|
});
|
|
|
|
|
pageSize: 30,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function selectHandler(id: string, index: number) {
|
|
|
|
|
taskStore.setActive(index);
|
|
|
|
|
taskStore.setActive(index)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
() => {
|
|
|
|
|
loadMore();
|
|
|
|
|
loadMore()
|
|
|
|
|
},
|
|
|
|
|
{ distance: 10, interval: 1500, canLoadMore: () => canloadMore.value }
|
|
|
|
|
);
|
|
|
|
|
{ distance: 10, interval: 1500, canLoadMore: () => canloadMore.value },
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
|
if (isLoading.value || el.value == null) return;
|
|
|
|
|
isLoading.value = true;
|
|
|
|
|
if (isLoading.value || el.value == null)
|
|
|
|
|
return
|
|
|
|
|
isLoading.value = true
|
|
|
|
|
try {
|
|
|
|
|
const more = await fetchList();
|
|
|
|
|
data.value.push(...more);
|
|
|
|
|
} finally {
|
|
|
|
|
isLoading.value = false;
|
|
|
|
|
const more = await fetchList()
|
|
|
|
|
data.value.push(...more)
|
|
|
|
|
}
|
|
|
|
|
finally {
|
|
|
|
|
isLoading.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取左侧列表
|
|
|
|
|
async function fetchList() {
|
|
|
|
|
try {
|
|
|
|
|
pagination.pageNo += 1;
|
|
|
|
|
const result = await taskStore.fetchApprovalList(pagination);
|
|
|
|
|
const { data, pageCount } = result;
|
|
|
|
|
canloadMore.value = pageCount >= pagination.pageNo;
|
|
|
|
|
return data || [];
|
|
|
|
|
} catch (error) {
|
|
|
|
|
canloadMore.value = false;
|
|
|
|
|
return [];
|
|
|
|
|
pagination.pageNo += 1
|
|
|
|
|
const result = await taskStore.fetchApprovalList(pagination)
|
|
|
|
|
const { data, pageCount } = result
|
|
|
|
|
canloadMore.value = pageCount >= pagination.pageNo
|
|
|
|
|
return data || []
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
canloadMore.value = false
|
|
|
|
|
return []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => taskStore.activeId,
|
|
|
|
|
(newVal) => {
|
|
|
|
|
activeId.value = newVal;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
activeId.value = newVal
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
function reset() {
|
|
|
|
|
pagination.pageNo = 0;
|
|
|
|
|
pagination.pageSize = 100;
|
|
|
|
|
canloadMore.value = true;
|
|
|
|
|
data.value.length = 0;
|
|
|
|
|
pagination.pageNo = 0
|
|
|
|
|
pagination.pageSize = 100
|
|
|
|
|
canloadMore.value = true
|
|
|
|
|
data.value.length = 0
|
|
|
|
|
|
|
|
|
|
taskStore.reset();
|
|
|
|
|
taskStore.reset()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function search(word: string) {
|
|
|
|
|
keyword.value = word;
|
|
|
|
|
reset();
|
|
|
|
|
keyword.value = word
|
|
|
|
|
reset()
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
() => {
|
|
|
|
|
loadMore();
|
|
|
|
|
loadMore()
|
|
|
|
|
},
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore.value }
|
|
|
|
|
);
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore.value },
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
emitter.on("refresh", refreshHandler);
|
|
|
|
|
});
|
|
|
|
|
emitter.on('refresh', refreshHandler)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
emitter.off("refresh", refreshHandler);
|
|
|
|
|
});
|
|
|
|
|
emitter.off('refresh', refreshHandler)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
async function refreshHandler() {
|
|
|
|
|
search("");
|
|
|
|
|
search('')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
search,
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<n-spin :show="isLoading">
|
|
|
|
|
<div ref="el" class="list">
|
|
|
|
|
<ListItem
|
|
|
|
|
:showFieldList="showFieldList"
|
|
|
|
|
v-for="(item, index) in data"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:show-field-list="showFieldList"
|
|
|
|
|
:selected="activeId === item.id"
|
|
|
|
|
:list-item="item"
|
|
|
|
|
@click="selectHandler(item.id, index)"
|
|
|
|
|