TALL-MUI-4/pages/project/project.vue

<template>
  <theme :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
    <!-- 标题栏 -->
    <Title />

    <view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100">
      <!-- 角色栏 -->
      <Roles />

      <swiper :current="roleIndex" class="swiper container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100" :indicator-dots="false" :autoplay="false" :circular="false"  @change="tabsChange">
        <swiper-item v-for="(task,index) in allTasks" :key="index">
          <!-- 日常任务面板 -->
          <Globals :globals="task.global" />

          <!-- 定期任务面板 -->
          <TimeLine :tasks="task.task" @getTasks="getTasks" class="flex-1 overflow-hidden" />
        </swiper-item>
      </swiper>

      <!-- TODO: DEBUG: -->
      <u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button>
    </view>
  </theme>
</template>

<script setup>
  import { ref, computed, watch, onMounted } from 'vue';
  import { useStore } from 'vuex';
  import useInit from '@/hooks/project/useInit';
  import useGetTasks from '@/hooks/project/useGetTasks';
  import dayjs from 'dayjs';

  const initHook = useInit();
  const getTasksHook = useGetTasks();
  const store = useStore();
  const projectId = computed(() => store.getters['project/projectId']);
  const userId = computed(() => store.getters['user/userId']);
  const roleId = computed(() => store.state.role.roleId); // 当前展示查看的角色id
  const roleIndex = computed(() => store.state.role.roleIndex); // 时间轴角色索引
  const visibleRoles = computed(() => store.state.role.visibleRoles); // 展示的角色信息
  const timeNode = computed(() => store.state.task.timeNode); // 时间基准点
  const timeUnit = computed(() => store.state.task.timeUnit); // 时间颗粒度
  const newProjectInfo = computed(() => store.state.task.newProjectInfo);
  const showScrollTo = computed(() => store.state.task.showScrollTo); // 是否可以设置时间轴自动滚动的位置
  const allTasks = computed(() => store.state.task.allTasks); // 所有任务
  const globals = computed(() => store.getters['task/globals']); // 所有的日常任务 永久 + 可变 日常任务
  const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 计算颗粒度 对应的 dayjs add 的单位
  const height = ref(null); // 页面高度

  onMounted(() => {
    const system = uni.getSystemInfoSync();
    height.value = `${system.windowHeight}px`;
  });

  /**
   * 当角色发生变化时
   * 重新查询永久日常任务和普通日常任务
   * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
   * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
   */
  watch(roleId, newValue => {
    if (newValue) {
      // 判断如果allTasks里有就不用加了
      if (allTasks.value.length && allTasks.value[roleIndex.value].global && allTasks.value[roleIndex.value].task)
        return;

      console.log('当角色发生变化时', newValue);
      store.commit('task/setTimeNode', Date.now());
      // 根据角色查找永久的日常任务
      const params = {
        roleId: newValue,
        projectId: projectId.value,
      };
      store.dispatch('task/getPermanent', params);
    }
  });

  /**
   * 当时间基准点发生变化时
   * 重新根据时间和角色查询普通日常任务
   * 永久日常任务不发生 改变
   */
  watch(timeNode, newValue => {
    if (newValue && roleId.value) {
      console.log('当时间基准点发生变化时');
      clearTasksData();
      // 查任务
      getGlobalData(); // 查可变日常任务
      getTasksHook.initPlanTasks(); // 处理定期任务

      // 滚动到对应位置
      let timer = null;
      timer = setInterval(() => {
        if (showScrollTo.value) {
          clearInterval(timer);
          setScrollPosition();
        }
      }, 300);
    }
  });

  /**
   * 当收到打开新项目消息状态时
   * 重新根据时间和角色查询普通日常任务
   * 永久日常任务不发生改变
   */
  watch(newProjectInfo, newValue => {
    console.log('当收到打开新项目消息状态时');
    if (newValue && newValue.value.projectId && newValue.value.url) {
      uni.$u.route('/', {
        u: userId.value,
        p: newValue.value.projectId,
        url: newValue.value.url,
      });
      clearTasksData();
      store.commit('role/setRoleId', '');
      const options = uni.$route.query;

      initHook.init(options);
    }
  });

  // 获取可变全局任务
  function getGlobalData() {
    if (!allTasks.value[roleIndex]) {
      const param = {
        roleId: roleId.value,
        timeNode: timeNode.value,
        timeUnit: timeUnit.value,
        projectId: projectId.value,
      };
      store.dispatch('task/getGlobal', param);
    }
    // 添加到allTasks里
    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
    const arr = [...allTasks.value];
    arr[index].global = [...globals.value];
    store.commit('task/setAllTasks', arr);
  }

  // 清除已有的任务数据
  function clearTasksData() {
    // 清空日常任务的数据
    store.commit('task/setPermanents', []);
    store.commit('task/setDailyTasks', []);
    // 清空定期任务数据
    store.commit('task/clearTasks');
    // 到顶的标志复位
    // 到底的标志复位
    store.commit('task/clearEndFlag');
  }



  function getTasks(params) {
    getTasksHook.initPlanTasks(params); // 处理定期任务
  }

  // tabs通知swiper切换
  function tabsChange(e) {
    const {
      id
    } = visibleRoles.value[e.detail.current];
    store.commit('role/setRoleIndex', e.detail.current);
    store.commit('role/setRoleId', id);

  }

  // 设置自动滚动位置
  function setScrollPosition() {
    // 如果storage里有taskId 滚动到这个id的任务
    const taskId = uni.$storage.getStorageSync('taskId');
    if (taskId) {
      store.commit('task/setScrollToTaskId', `a${taskId}`);
      uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
    } else {
      const item = allTasks.value[roleIndex.value].task.find(task => task.detailId);
      if (item) {
        store.commit('task/setScrollToTaskId', `a${item.id}`);
      } else {
        // 没有本地记录的taskId
        // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
        const task = allTasks.value[roleIndex.value].task.find(item => dayjs(+item.planStart).isSame(timeNode.value,
          timeGranularity.value));
        task && store.commit('task/setScrollToTaskId', `a${task.id}`); // 有这个task 就记录他的id
      }
    }
  }
</script>

<style lang="scss" scoped>
  .border-b {
    border-bottom: 1px solid #e4e7ed;
  }
</style>