TALL-MUI-4/hooks/project/useGetTasks222.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']);

  const remindData = computed(() => store.state.socket.remindData); // 小红点

  const currRoleRealTasks = computed(() => store.state.task.currRoleRealTasks); // 当前角色的真实任务数据
  const currRoleShowTasks = computed(() => store.state.task.currRoleShowTasks); // 当前角色的展示任务数据
  const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId);

  // 初始化 定期任务
  async function initPlanTasks() {
    if (timeLineType.value === 1) setNextPlaceholderTasks({});
    console.log('查询定期任务');
    await getTasks({}); // 获取初始数据
    // await dataRender({});
  }

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

  /**
   * 根据时间基准点和角色查找定期任务
   * @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);
    console.log('查询定期任务api', params);
    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);

        console.log('查询到的真实任务', data.list);
        const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
        console.log('api当前角色id', roleId.value, index);
        const arr = [...allTasks.value];
        arr[index].realTasks = [...realTasks.value];
        arr[index].upNextPage = params.queryType === 0 ? data.nextPage : 1;
        arr[index].downNextPage = params.queryType === 1 ? data.nextPage : 1;
        store.commit('task/setAllTasks', arr);
        console.log('设置当前真实任务', arr[index].realTasks);
        store.commit('task/setCurrRoleRealTasks', arr[index].realTasks); // 设置当前角色的真实任务数据
        params.queryType === 0 ? store.commit('task/setUpNextPage', arr[index].upNextPage) : store.commit('task/setDownNextPage', arr[index].downNextPage); // 下一页

        // 如果第一次渲染但没有空数据则加载空数据
        if (!currRoleShowTasks.value || !currRoleShowTasks.value.length && timeLineType.value === 1) {
          setNextPlaceholderTasks(params);
        }

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

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

  // 刻度模式数据处理
  async function renderScaleTask(query) {
    const params = generateGetTaskParam(query);
    console.log('当前角色id', roleId.value);
    console.log('当前角色的真实任务', currRoleRealTasks.value);
    let centerData = await showTaskTime(params, currRoleShowTasks.value, currRoleRealTasks.value) || [];
    console.log('需要显示的真实任务', centerData);
    await handleTasksData(params, centerData, currRoleRealTasks.value);
  }

  // 已显示的任务第一个时间和最后一个时间
  async function showTaskTime(params, showTasks, realTasks) {
    /**
     * 1、判断显示任务中是否有真实任务
     *    1-1、有。根据id查找任务
     *    1-2、无。根据时间查找任务
     * 2、查找15个任务
     */

    // 初始值
    // 显示任务中没有真实任务数据
    let centerData = [];
    if (realTasks.length > params.pageSize && params.queryType === 0) {
      centerData = realTasks.slice(realTasks.length - params.pageSize);
    } else {
      centerData = realTasks.slice(0, params.pageSize);
    }

    const firstDetailIndex = showTasks.findIndex(task => task.detailId);
    if (firstDetailIndex > -1) {
      // 显示任务中有真实任务数据
      const firstId = showTasks[firstDetailIndex].id;
      let lastDetailIndex = -1;
      showTasks.forEach((item, index) => {
        if (item.detailId) {
          lastDetailIndex = index;
        }
      })
      const lastId = showTasks[lastDetailIndex].id;

      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 = index >= params.pageSize ? realTasks.slice(index - params.pageSize, index) : realTasks.slice(0, index);
        }
      })
    }

    return centerData;
  }

  async function handleTasksData(params, centerData, realTasks) {
    /**
     * 3、查找的任务数量是否>=15
     *    3-1、是。
     *        判断时间跨度是否>=15
     *        3-1-1、是。显示时间刻度范围内的任务
     *        3-1-2、否。显示全部任务并删除多余的刻度
     *    3-2、否。
     *        判断时间跨度是否>=15
     *        3-2-1、是。显示时间刻度范围内的任务
     *        3-2-2、否。
     *              下一页是否为0
     *              3-2-2-1、是。无下一页，显示任务和刻度，之后继续展示刻度
     *              3-2-2-1、否。查找下一页数据并重复上述步骤
     */
    let showTasks = currRoleShowTasks.value; // 显示的数据
    const nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值
    if (centerData.length) {
      let centerDataTime = '', // 中间数据的时间
          scaleTime = '', // 空时间节点的开始时间
          centerTime = '', // 中间数据+/-15后的数据
          isExceed = false; // 时间跨度是否大于15

      if (params.queryType) {
        centerDataTime = centerData[centerData.length - 1].planStart;
        scaleTime = currDownTimeNode.value;
        centerTime = dayjs(+centerDataTime).subtract(params.pageSize, timeGranularity.value);
        isExceed = dayjs(+centerTime).isSame(+scaleTime, timeGranularity.value) || dayjs(+centerTime).isAfter(+scaleTime, timeGranularity.value)
      } else {
        centerDataTime = centerData[0].planStart;
        scaleTime = currUpTimeNode.value;
        centerTime = dayjs(+centerDataTime).add(params.pageSize, timeGranularity.value);
        isExceed = dayjs(+centerTime).isSame(+scaleTime, timeGranularity.value) || dayjs(+centerTime).isBefore(+scaleTime, timeGranularity.value)
      }

      const firstDetailIndex = showTasks.findIndex(task => task.detailId); // 显示任务中存在真实任务
      const firstId = firstDetailIndex > -1 ? showTasks[firstDetailIndex].id : '';
      let lastDetailIndex = -1;
      showTasks.forEach((item, index) => {
        if (item.detailId) {
          lastDetailIndex = index;
        }
      })
      const lastId = lastDetailIndex > -1 ? showTasks[lastDetailIndex].id : '';

      showTasks.forEach((task, index) => {
        const arr = centerData.filter(item => dayjs(+item.planStart).isSame(+task.planStart, timeGranularity.value));
        if (arr.length) {
          if (params.queryType === 1 && task.id === lastId) {
            showTasks.splice(index + 1, 0, [...arr])
          } else if (params.queryType === 0 && task.id === firstId) {
            showTasks.splice(index, 0, [...arr])
          } else {
            showTasks.splice(index, 1, [...arr])
          }
        }
      })

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

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

          if (len > -1) {
            showTasks = params.queryType === 0 ? showTasks.slice(len) : showTasks.slice(0, len + 1);
          }
        } else if (nextPage > 0) {
          console.log('数据不为空，时间跨度小于15')
          getTasks({pageNum: nextPage, queryType: params.queryType});
        }
      }
    } else {
      if (nextPage > 0) {
        console.log('数据为空')
        getTasks({pageNum: nextPage, queryType: params.queryType});
      } else {
        params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params);
      }
    }

    // if (showTasks.length > 30) {
    //   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 renderConTask(params) {
    let nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值
    let showTasks = currRoleShowTasks.value;
    let centerData = await showTaskTime(params, showTasks, currRoleRealTasks.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);
  }

  // 设置时间轴向上的空数据
  function setPrevPlaceholderTasks() {
    store.commit('task/setTopEnd', true);
    let startTime = '';
    if (!currRoleShowTasks.value || !currRoleShowTasks.value.length) {
      startTime = Date.now(); // 没有任务就应该是时间基准点
    } else {
      startTime = currRoleShowTasks.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(params) {
    // store.commit('task/setBottomEnd', true);
    let startTime = '';
    if (!currRoleShowTasks.value || !currRoleShowTasks.value.length) {
      startTime = Date.now();
    } else {
      startTime = dayjs(+currRoleShowTasks.value[currRoleShowTasks.value.length - 1].planStart).add(1, timeGranularity.value).valueOf();
    }

    if (params.taskId) {
      currRoleRealTasks.value.forEach(item => {
        if (item.id === params.taskId) {
          startTime = Number(item.planStart);
        }
      })
    }

    const initData = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value);
    store.commit('task/setCurrDownTimeNode', startTime);
    store.commit('task/setDownTasks', initData);
  }

  /**
   * 当日常任务发生变化时
   * 将新获取到的日常任务放在allTasks里
   */
  watch(tasks, () => {
    // 添加到allTasks里
    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
    const arr = [...allTasks.value];
    arr[index].task = [...tasks.value];
    store.commit('task/setAllTasks', arr);
    store.commit('task/setCurrRoleShowTasks', arr[index].task); // 设置当前角色的展示任务数据
  });

  return {
    initPlanTasks,
    getTasks,
    dataRender
  }
}