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 />

      <!-- 日常任务面板 -->
      <Globals />

      <!-- 定期任务面板 -->
      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />

      <!-- 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';

const initHook = useInit();
const getTasksHook = useGetTasks();
const store = useStore();
const roleId = computed(() => store.state.role.roleId);
const timeNode = computed(() => store.state.task.timeNode);
const timeUnit = computed(() => store.state.task.timeUnit);
const projectId = computed(() => store.getters['project/projectId']);
const userId = computed(() => store.getters['user/userId']);
const newProjectInfo = computed(() => store.state.task.newProjectInfo);
const showScrollTo = computed(() => store.state.task.showScrollTo);
const height = ref(null);
const timeLine = ref(null);

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

// 获取可变全局任务
function getGlobalData() {
  const param = {
    roleId: roleId.value,
    timeNode: timeNode.value,
    timeUnit: timeUnit.value,
    projectId: projectId.value,
  };
  store.dispatch('task/getGlobal', param);
}

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

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

    // 滚动到对应位置
    let timer = null;
    timer = setInterval(() => {
      if (showScrollTo.value) {
        clearInterval(timer);
        console.log('timeLine: ', timeLine);
        timeLine.value.setScrollPosition();
      }
    }, 500);
  }
});

/**
 * 当角色发生变化时
 * 重新查询永久日常任务和普通日常任务
 * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
 * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
 */
watch(roleId, newValue => {
  if (newValue) {
    console.log('当角色发生变化时', newValue);
    store.commit('task/setTimeNode', Date.now());
    // 根据角色查找永久的日常任务
    const params = {
      roleId: newValue,
      projectId: projectId.value,
    };
    store.dispatch('task/getPermanent', params);
  }
});

/**
 * 当时间基准点发生变化时
 * 重新根据时间和角色查询普通日常任务
 * 永久日常任务不发生改变
 */
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 getTasks(params) {
  getTasksHook.initPlanTasks(params); // 处理定期任务
}
</script>

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