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 dayjs from 'dayjs';
import useInit from '@/hooks/project/useInit';
import useGetTasks from '@/hooks/project/useGetTasks';

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());
  }
});

/**
 * 当时间基准点发生变化时
 * 重新根据时间和角色查询普通日常任务
 * 永久日常任务不发生 改变
 */
watch(timeNode, newValue => {
  if (newValue && roleId.value) {
    console.log('当时间基准点发生变化时');
    clearTasksData();
    // 查任务
    getGlobalData(); // 查可变日常任务
    // 根据角色查找永久的日常任务
    getPermanent();
    // const params = {
    //   roleId: roleId.value,
    //   projectId: projectId.value,
    // };
    // store.dispatch('task/getPermanent', params);
    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);
  }
});

watch(globals, () => {
  // 添加到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 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 getPermanent() {
  if (!allTasks.value[roleIndex]) {
    const params = {
      roleId: roleId.value,
      projectId: projectId.value,
    };
    store.dispatch('task/getPermanent', params);
  }
}

// 清除已有的任务数据
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>