TALL-MUI-4/hooks/project/useGetTasks.js

import { computed, nextTick, watch } from 'vue';
import { useStore } from 'vuex';
import { flatten } from 'lodash';
import dayjs from 'dayjs';
export default function useGetTasks() {
  const store = useStore();
  const tasks = computed(() => store.state.task.tasks);
  const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式
  const realTasks = computed(() => store.state.task.realTasks); // 真实任务
  const downNextPage = computed(() => store.state.task.downNextPage); // 下一页
  const upNextPage = computed(() => store.state.task.upNextPage); // 下一页
  const currUpTimeNode = computed(() => store.state.task.currUpTimeNode); // 当前查询的时间
  const currDownTimeNode = computed(() => store.state.task.currDownTimeNode); // 当前查询的时间
  const roleId = computed(() => store.state.role.roleId);
  const timeNode = computed(() => store.state.task.timeNode);
  const timeUnit = computed(() => store.state.task.timeUnit);
  const visibleRoles = computed(() => store.state.role.visibleRoles);
  const allTasks = computed(() => store.state.task.allTasks);
  const roleIndex = computed(() => store.state.role.roleIndex);

  const projectId = computed(() => store.getters['project/projectId']);
  const timeGranularity = computed(() => store.getters['task/timeGranularity']);

  // 初始化 定期任务
  async function initPlanTasks() {
    await getTasks({}); // 获取初始数据
  }

  /**
   * 生成getTasks所用的参数
   * @param {object} query getTasks传递的参数
   */
  function generateGetTaskParam(query) {
    return {
      roleId: roleId.value,
      timeUnit: query.timeUnit || timeUnit.value,
      queryType: query.queryType === 0 ? 0 : 1,
      pageNum: query.pageNum || 1,
      pageSize: query.pageSize || uni.$taskConfig.pageCount
    };
  }

  /**
   * 根据时间基准点和角色查找定期任务
   * @param {object} query
   * @param {string} query.roleId 角色id
   * @param {string} query.timeNode 时间基准点 默认当前
   * @param {string} query.timeUnit 时间颗粒度 默认天
   * @param {string} query.queryNum 查找颗粒度数量 默认3个
   * @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
   */
  function getTasks(query) {
    store.commit('task/setShowSkeleton', false);

    const params = generateGetTaskParam(query);
    uni.$catchReq.getTaskByNum(params, (err, data) => {
      store.commit('task/setShowSkeleton', false);
      if (err) {
        // TODO: 提示错误
        console.error('err: ', err);
      } else {
        store.commit('task/setShowScrollTo', true);

        params.queryType === 0 ? store.commit('task/setUpRealTasks', data.list) : store.commit('task/setDownRealTasks', data.list);
        params.queryType === 0 ? store.commit('task/setUpNextPage', data.nextPage) : store.commit('task/setDownNextPage', data.nextPage); // 下一页

        // 数据处理
        dataRender(params);
      }
    });
  }

  function dataRender(params) {
    timeLineType.value === 1 ? renderScaleTask(params) : renderConTask(params);
  }

  async function renderConTask(params) {
    let nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值
    let showTasks = tasks.value;
    let centerData = await showTaskId(params, showTasks, realTasks.value) || [];

    if (centerData.length < 15 && nextPage > 0) {
      getTasks({pageNum: nextPage, queryType: params.queryType});
    } else {
      if (params.queryType === 0) {
        showTasks = [...centerData, ...showTasks];
      } else {
        showTasks = [...showTasks, ...centerData];
      }
    }

    if (showTasks.length < 15 && nextPage === 0 && params.queryType === 1) {
      getTasks({pageNum: 1, queryType: 0});
    }
    
    if (showTasks.length > 80) {
      showTasks = params.queryType === 0 ? showTasks.slice(0, 80) : showTasks.slice(showTasks.length - 80);
    }

    store.commit('task/clearTasks');
    params.queryType === 0 ? store.commit('task/setUpTasks', showTasks) : store.commit('task/setDownTasks', showTasks);
  }

  // 刻度模式数据处理
  async function renderScaleTask(params) {
    params.queryType === 0 ? setPrevPlaceholderTasks() : setNextPlaceholderTasks();
    let centerData = await showTaskId(params, tasks.value, realTasks.value) || [];
    tasksData(params, centerData, realTasks.value);
  }

  // 已显示的任务第一个id和最后一个id
  function showTaskId(params, showTasks, realTasks) {
    const firstDetailIndex = showTasks.findIndex(task => task.detailId);
    const firstId = firstDetailIndex === -1 ? 0 : showTasks[firstDetailIndex].id;
    let lastDetailIndex = -1;
    showTasks.forEach((item, index) => {
      if (item.detailId) {
        lastDetailIndex = index;
      }
    })
    const lastId = lastDetailIndex === -1 ? 0 : showTasks[lastDetailIndex].id;

    let centerData = params.queryType === 0 ? [] : realTasks.slice(0, params.pageSize);
    realTasks.forEach((item, index) => {
      if (params.queryType === 1 && item.id === lastId) {
        centerData = realTasks.slice(index + 1, index + 1 + params.pageSize) || [];
      } else if (params.queryType === 0 && item.id === firstId) {
        centerData = realTasks.slice(index - params.pageSize, index) || [];
      }
    })
    return centerData;
  }

  /**
   * 刻度模式数据处理
   * 大于等于15天，真实数据的时间跨度
   * 或大于等于15条，真实数据的数量
   * 不用重新加载数据
   * @param {Object} params
   */
  function tasksData(params, centerData, realTasks) {
    let param = generateGetTaskParam(params);
    let showTasks = tasks.value; // 显示的数据
    let nextPage = param.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值

    // 判断条件
    let isAccordTerm1 = false, isAccordTerm2 = false;
    if (centerData.length > 0) {
      // 1.数据数量>=15条
      isAccordTerm1 = centerData.length >= param.pageSize;

      // 2.数据最后一条数据时间>=当前查询的时间
      if (param.queryType === 0) {
        let firstData = dayjs(centerData[0].planStart).add(param.pageSize, timeGranularity.value);
        isAccordTerm2 = dayjs(+firstData).isBefore(+currUpTimeNode.value, timeGranularity.value) || dayjs(+firstData).isSame(+currUpTimeNode.value, timeGranularity.value);
      } else {
        let lastData = dayjs(centerData[centerData.length - 1].planStart).subtract(param.pageSize, timeGranularity.value);
        isAccordTerm2 = dayjs(+lastData).isAfter(+currDownTimeNode.value, timeGranularity.value) || dayjs(+lastData).isSame(+currDownTimeNode.value, timeGranularity.value);
      }
    }

    // 3.下一页===0
    // 不需要添加新数据
    if (!isAccordTerm1 && !isAccordTerm2 && nextPage > 0) {
      getTasks({pageNum: nextPage, queryType: param.queryType});
    } else {
      let tasksArr = [], isReplace = false, firstIndex = -1, selctedIndex = -1, replaceTime = 0;
      showTasks.forEach((task, index) => {
        const arr = centerData.filter(item => dayjs(+item.planStart).isSame(+task.planStart, timeGranularity.value));
        if (arr && arr.length) {
          if (task.detailId) {
            // 新数据与旧数据时间有重叠
            if (param.queryType === 1) {
              selctedIndex = index;
              tasksArr = [...arr];
            } else {
              firstIndex = showTasks.findIndex(data => dayjs(+data.planStart).isSame(+task.planStart, timeGranularity.value));
            }
          } else {
            showTasks.splice(index, 1, [...arr]);
          }
        }
      })

      if (selctedIndex) {
        showTasks.splice(selctedIndex + 1, 0, [...tasksArr])
      }

      if (firstIndex) {
        showTasks.splice(firstIndex, 0, [...tasksArr])
      }

      showTasks.forEach((task, index) => {
        const arr = centerData.filter(item => dayjs(+item.planStart).isSame(+task.planStart, timeGranularity.value));
        if (arr && arr.length) {
          if (!task.detailId) { // 新数据与旧数据时间有重叠
            showTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}]
          }
        }
      })

      showTasks = flatten(showTasks); // 1维拍平

      if (isAccordTerm1 && !isAccordTerm2) {
        let len = 0;
        let data = param.queryType === 0 ? centerData[0] : centerData[centerData.length - 1];
        showTasks.forEach((item, index) => {
          if (item.id === data.id) {
            len = index;
          }
        })

        showTasks = param.queryType === 0 ? showTasks.slice(len) : showTasks.slice(0, len + 1);
      }

      if (showTasks.length > 80) {
        showTasks = param.queryType === 0 ? showTasks.slice(0, 80) : showTasks.slice(showTasks.length - 80);
      }
    }

    store.commit('task/clearTasks');
    param.queryType === 0 ? store.commit('task/setUpTasks', showTasks) : store.commit('task/setDownTasks', showTasks);
  }

  // 设置时间轴向上的空数据
  function setPrevPlaceholderTasks() {
    store.commit('task/setTopEnd', true);
    let startTime = '';
    if (!tasks.value || !tasks.value.length) {
      startTime = Date.now(); // 没有任务就应该是时间基准点
    } else {
      startTime = tasks.value[0].planStart - 0; // 有任务就是第一个任务的计划开始时间
    }
    const placeholderTasks = uni.$task.setPlaceholderTasks(startTime, true, timeGranularity.value);
    store.commit('task/setCurrUpTimeNode', startTime);
    store.commit('task/setUpTasks', placeholderTasks);
  }

  // 设置时间轴向下的空数据
  function setNextPlaceholderTasks() {
    // store.commit('task/setBottomEnd', true);
    let startTime = '';
    if (!tasks.value || !tasks.value.length) {
      startTime = Date.now();
    } else {
      startTime = dayjs(+tasks.value[tasks.value.length - 1].planStart).add(1, timeGranularity.value).valueOf();
    }
    const initData = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value);
    store.commit('task/setCurrDownTimeNode', startTime);
    store.commit('task/setDownTasks', initData);
  }

  /**
   * 当日常任务发生变化时
   * 将新获取到的日常任务放在allTasks里
   */
  watch(tasks, newValue => {
    // console.log('newValue----->tasks: ', tasks.value);
    // 添加到allTasks里
    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
    const arr = [...allTasks.value];
    arr[index].task = [...newValue];
    store.commit('task/setAllTasks', arr);
  });

  return {
    initPlanTasks,
    getTasks,
    dataRender
  };
}