TALL-MUI-4/components/TimeLine/TimeLine.vue

<template>
  <!-- 时间间隔栏 -->
  <!-- <Barrier /> -->

  <scroll-view
    :lower-threshold="300"
    style="height: 800px;"
    scroll-y="true"
    :upper-threshold="300"
    :scroll-into-view="scrollToTaskId"
    @scroll="scroll"
    @scrolltolower="handleScrollBottom"
    @scrolltoupper="handleScrollTop"
    id="scroll"
  >
    <!-- 时间轴 -->
    <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->

    <TimeBox :tasks="tasks" />

    <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
  </scroll-view>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
// import Barrier from './component/Barrier.vue';
import dayjs from 'dayjs';
import TimeBox from './component/TimeBox.vue';
import useGetTasks from '@/hooks/project/useGetTasks';

const props = defineProps({
  tasks: {
    type: Array,
    default: () => []
  }
})

const store = useStore();
const getTasksHook = useGetTasks();
// const visibleRoles = computed(() => store.state.role.visibleRoles);
// const scrollTop = computed(() => store.state.task.scrollTop);
// const tasks = computed(() => store.state.task.tasks);
const topEnd = computed(() => store.state.task.topEnd);
const bottomEnd = computed(() => store.state.task.bottomEnd);
const showSkeleton = computed(() => store.state.task.showSkeleton);
const timeNode = computed(() => store.state.task.timeNode);
const scrollToTaskId = computed(() => store.state.task.scrollToTaskId);
const timeGranularity = computed(() => store.getters['task/timeGranularity']);
// const showStatus = computed(() => store.state.task.showStatus); // 当前展示的状态 1、20个数据全部展示  2、只展示一部分数据
const nextPage = computed(() => store.state.task.nextPage); // 下一页
const upNextPage = computed(() => store.state.task.upNextPage); // 向上查下一页
const emit = defineEmits(['getTasks']);

const data = reactive({ top: 0 });

// 滚动
function scroll(e) {
  data.top = e.detail.scrollTop;
  store.commit('task/setShrink', data.top > data.scrollTop);
  store.commit('task/setScrollTop', data.top);
}

// 滚动到顶部
async function handleScrollTop() {
  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
  // 先把现在的任务放进去
  store.commit('task/updateTasks', props.tasks)
  console.warn('滚动到顶部: ');
  let params = { pageNum: upNextPage.value, queryType: 0 };
  getTasksHook.renderTask(params);
}

// 滚动到底部
async function handleScrollBottom() {
  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
  // 先把现在的任务放进去
  store.commit('task/updateTasks', props.tasks);
  console.warn('滚动到底部: ');

  let params = { pageNum: nextPage.value, queryType: 1 };
  getTasksHook.renderTask(params);
}
</script>