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 currLocationTaskId = computed(() => store.state.socket.currLocationTaskId); // 初始化 定期任务 async function initPlanTasks() { if (timeLineType.value === 1) setNextPlaceholderTasks({}); 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); 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); // 下一页 const index = visibleRoles.value.findIndex(role => role.id === roleId.value); const arr = [...allTasks.value]; arr[index].realTasks = [...realTasks.value]; store.commit('task/setAllTasks', arr); store.commit('task/setCurrRoleRealTasks', arr[index].realTasks); // 设置当前角色的真实任务数据 // 如果第一次渲染但没有空数据则加载空数据 if (!tasks.value || !tasks.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); let centerData = await showTaskTime(params, tasks.value, currRoleRealTasks.value) || []; await handleTasksData(params, centerData, currRoleRealTasks.value); } // 已显示的任务第一个时间和最后一个时间 async function showTaskTime(params, showTasks, realTasks) { /** * 1、判断显示任务中是否有真实任务 * 1-1、有。根据id查找任务 * 1-2、无。根据时间查找任务 * 2、查找15个任务 */ // 初始值 // 显示任务中没有真实任务数据 let 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 = tasks.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) { getTasks({pageNum: nextPage, queryType: params.queryType}); } } } else { if (nextPage > 0) { getTasks({pageNum: nextPage, queryType: params.queryType}); } else { params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params); } } 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 renderConTask(params) { let nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值 let showTasks = tasks.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 (!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(params) { // 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(); } 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, newValue => { // 添加到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 } }