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="getTasksHook.getTasks" class="flex-1 overflow-hidden" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 点击切换时间轴样式 -->
    <!-- <u-button size="mini" style="position: fixed; bottom: 20px; left: 100px;" @click="changeModal">
      {{ timeLineType === 1 ? '切换到任务模式' : '切换到时间轴模式' }}
    </u-button> -->
  </theme>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } 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 userInfo = computed(() => store.state.user.user);
// 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); // 页面高度
const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式
const remindData = computed(() => store.state.socket.remindData); // 时间轴模式
const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId); // 前需要定位到的任务id
// const targetTaskId = computed(() => store.state.task.targetTaskId); // 前需要定位到的任务id

if (!userInfo.value) {
  const res = uni.$storage.getStorageSync('user');
  if (res) {
    store.commit('user/setUser', JSON.parse(res));
  }
}
console.log('项目详情页打开了么');
onMounted(() => {
  const system = uni.getSystemInfoSync();
  height.value = `${system.screenHeight}px`;
  console.log('项目详情onMounted');
});

onUnmounted(() => {
  console.log('卸载组件实例后调用');
  clearTasksData();
  store.commit('role/setRoleId', ''); // 清除角色id
  store.commit('socket/setCurrLocationTaskId', ''); // 清除点击的任务id
});

watch(remindData, () => {
  console.log('remindData', remindData.value)

  if (remindData.value) {
    if (visibleRoles.value) {
      visibleRoles.value.forEach(role => {
        role.remindNum = 0;

        remindData.value.forEach(remind => {
          const remind_data = JSON.parse(remind.data);
          if (projectId.value === remind_data.data.projectId && remind_data.data.roleId === role.id) {
            role.remindNum++;
          }
        });
      });
    }

    if (allTasks.value.length) {
      allTasks.value.forEach(data => {
        if (data.global) {
          data.global.forEach(global => {
            global.remindNum = 0;

            if (global.plugins && global.plugins.length) {
              global.plugins.forEach(pluginArr => {
                pluginArr.forEach(plugin => {
                  plugin.remindNum = 0;

                  remindData.value.forEach(remind => {
                    const remind_data = JSON.parse(remind.data);
                    if (remind_data.data.projectId === projectId.value && remind_data.data.roleId === roleId.value) {
                      if (remind_data.data.taskId === global.id) {
                        global.remindNum++;
                      }

                      if (remind_data.data.taskId === global.id && remind_data.data.pluginId === plugin.pluginTaskId) {
                        plugin.remindNum++;
                      }
                    }
                  })
                })
              })
            }
          })
        }

        if (data.task) {
          data.task.forEach(task => {
            task.remindNum = 0;

            if (task.plugins && task.plugins.length) {
              task.plugins.forEach(pluginArr => {
                pluginArr.forEach(plugin => {
                  plugin.remindNum = 0;

                  remindData.value.forEach(remind => {
                    const remind_data = JSON.parse(remind.data);
                    if (remind_data.data.projectId === projectId.value && remind_data.data.roleId === roleId.value) {
                      if (remind_data.data.taskId === task.id) {
                        task.remindNum++;
                      }

                      if (remind_data.data.taskId === task.id && remind_data.data.pluginId === plugin.pluginTaskId) {
                        plugin.remindNum++;
                      }
                    }
                  })
                })
              })
            }
          })
        }
      })
    }
  }
})

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

    store.commit('task/setTimeNode', Date.now());
  }
});

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

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

watch(globals, () => {
  // 添加到allTasks里
  const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
  const arr = [...allTasks.value];
  if (arr.length && index > -1) {
    if (remindData.value) {
      globals.value.forEach(global => {
        global.remindNum = 0;

        if (global.plugins && global.plugins.length) {
          global.plugins.forEach(pluginArr => {
            pluginArr.forEach(plugin => {
              plugin.remindNum = 0;
              remindData.value.forEach(remind => {
                const remind_data = JSON.parse(remind.data);

                if (projectId.value === remind_data.data.projectId && roleId.value === remind_data.data.roleId) {
                  if (remind_data.data.taskId === global.id) {
                    global.remindNum++;
                  }

                  if (remind_data.data.taskId === global.id && remind_data.data.pluginId === plugin.pluginTaskId) {
                    plugin.remindNum++;
                  }
                }
              });
            });
          });
        }
      })
    }

    arr[index].global = [...globals.value];
  }

  store.commit('task/setAllTasks', arr);
});

// tabs通知swiper切换
function tabsChange(e) {
  const { id } = visibleRoles.value[e.detail.current]; // 当前显示角色的id
  store.commit('role/setRoleIndex', e.detail.current); // 当前显示第几个角色
  store.commit('role/setRoleId', id);

  const index = e.detail.current;
  const arr = [...allTasks.value];
  store.commit('task/updateTasks', arr[index].task || []); // 当前显示任务数据
  store.commit('task/updateRealTasks', arr[index].realTasks || []); // 当前真实任务数据
  store.commit('task/setUpNextPage', arr[index].upNextPage || 1); // 当前向上查询页数
  store.commit('task/setDownNextPage', arr[index].downNextPage || 1); // 当前向下查询页数
  store.commit('socket/setCurrLocationTaskId', '');
}

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

// 获取日常任务
function getPermanent() {
  if (!allTasks.value[roleIndex] && roleId.value) {
    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/clearRealTasks'); // 清空真实任务数据
  store.commit('task/setUpNextPage', 1);
  store.commit('task/setDownNextPage', 1);
  // 到顶的标志复位
  // 到底的标志复位
  store.commit('task/clearEndFlag');
}

// 设置自动滚动位置
function setScrollPosition() {
  // 如果storage里有taskId 滚动到这个id的任务
  const taskId = uni.$storage.getStorageSync('taskId');

  if (taskId) {
    store.commit('task/setScrollToTaskId', `a${taskId}`);
    uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
  } else {
    if (!allTasks.value[roleIndex.value]) return;

    if (allTasks.value[roleIndex.value] && !allTasks.value[roleIndex.value].task) {
      allTasks.value[roleIndex.value].task = [];
    }

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

function changeModal() {
  store.commit('task/clearTasks'); // 清空定期任务
  store.commit('task/clearRealTasks'); // 清空真实任务数据
  store.commit('task/setUpNextPage', 1);
  store.commit('task/setDownNextPage', 1);
  store.commit('task/setTimeLineType', timeLineType.value === 1 ? 2 : 1);
  const params = { taskId: currLocationTaskId.value };
  getTasksHook.initPlanTasks(params);
}
</script>

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