13 changed files with 836 additions and 200 deletions
@ -0,0 +1,263 @@ |
|||
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 basicTasks = computed(() => store.state.task.basicTasks); |
|||
const upBasicTasks = computed(() => store.state.task.upBasicTasks); |
|||
const nextPage = computed(() => store.state.task.nextPage); // 下一页
|
|||
const upNextPage = computed(() => store.state.task.upNextPage); // 下一页
|
|||
// const lastPage = computed(() => store.state.task.lastPage); // 最后一页
|
|||
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({}); // 获取初始数据
|
|||
} |
|||
|
|||
/** |
|||
* 根据时间基准点和角色查找定期任务 |
|||
* @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 = { |
|||
roleId: roleId.value, |
|||
timeUnit: query.timeUnit || timeUnit.value, |
|||
queryType: query.queryType === 0 ? 0 : 1, |
|||
pageNum: query.pageNum || 1, |
|||
pageSize: query.pageSize || uni.$taskConfig.pageCount |
|||
} |
|||
|
|||
uni.$catchReq.getTaskByNum(params, (err, data) => { |
|||
store.commit('task/setShowSkeleton', false); |
|||
if (err) { |
|||
// TODO: 提示错误
|
|||
console.error('err: ', err); |
|||
} else { |
|||
store.commit('task/setShowScrollTo', true); |
|||
|
|||
if (params.queryType === 0) { |
|||
// 将接口返回的数据存储到store
|
|||
let lists = [...upBasicTasks.value, ...data.list]; |
|||
store.commit('task/setUpBasicTask', lists); |
|||
store.commit('task/setUpNextPage', data.nextPage); // 下一页
|
|||
} else { |
|||
let lists = [...basicTasks.value, ...data.list]; |
|||
store.commit('task/setBasicTask', lists); |
|||
store.commit('task/setNextPage', data.nextPage); // 下一页
|
|||
} |
|||
|
|||
// 刻度模式数据处理
|
|||
renderTask(params); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// 刻度模式数据处理
|
|||
function renderTask(params) { |
|||
params.queryType === 0 ? setPrevPlaceholderTasks() : setNextPlaceholderTasks(); |
|||
tasksData(params); |
|||
} |
|||
|
|||
/** |
|||
* 刻度模式数据处理 |
|||
* 大于等于15天，真实数据的时间跨度 |
|||
* 或大于等于15条，真实数据的数量 |
|||
* 不用重新加载数据 |
|||
* @param {Object} params |
|||
*/ |
|||
function tasksData(params) { |
|||
let oldTasks = tasks.value; |
|||
let realTasks = params.queryType === 0 ? upBasicTasks.value : basicTasks.value; |
|||
// 下一页的值
|
|||
let next = params.queryType === 0 ? upNextPage.value : nextPage.value; |
|||
|
|||
// 真实数据是否>=15条 || 是否>=15天
|
|||
let term = tremFilter(params); |
|||
|
|||
if (term || next === 0) { |
|||
// 过滤真实数据中在tasks时间段中的数据，并将最后的数据存储到tasksArr数组中
|
|||
let tasksArr = [], taskLen = 0, lastIndex = 0; |
|||
oldTasks.forEach((task, index) => { |
|||
const oldArr = oldTasks.filter(item => dayjs(+item.planStart).isSame(+task.planStart, timeGranularity.value)); |
|||
const arr = realTasks.filter(item => dayjs(+item.planStart).isSame(+task.planStart, timeGranularity.value)); |
|||
|
|||
if (arr && arr.length) { |
|||
if (task.detailId) { |
|||
tasksArr = [...arr]; |
|||
lastIndex = index; |
|||
} else { |
|||
taskLen += arr.length; // 在时间刻度内的数据量
|
|||
oldTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}]
|
|||
} |
|||
} |
|||
}) |
|||
|
|||
// 数据与上一页最后一个数据时间节点相同
|
|||
if (lastIndex) { |
|||
taskLen += tasksArr.length; |
|||
oldTasks.splice(lastIndex, 0, [...tasksArr]); |
|||
} |
|||
|
|||
oldTasks = flatten(oldTasks); // 1维拍平
|
|||
|
|||
if (taskLen === params.pageSize) { |
|||
// 如果真实任务所有数据都在tasks时间段中，则将所有任务显示，并且从最后一个真实任务的时间截止，存储到tasks中
|
|||
let len = 0; |
|||
oldTasks.forEach((item, index) => { |
|||
if (item.id === realTasks[realTasks.length - 1].id) { |
|||
len = index; |
|||
} |
|||
}) |
|||
|
|||
oldTasks = oldTasks.slice(0, len + 1); |
|||
params.queryType === 0 ? store.commit('task/setUpBasicTask', []) : store.commit('task/setBasicTask', []); |
|||
} else { |
|||
// 只有一部分真实数据展示，展示tasks时间段加时间段内的真实数据
|
|||
params.queryType === 0 ? store.commit('task/setUpBasicTask', realTasks.slice(taskLen)) : store.commit('task/setBasicTask', realTasks.slice(taskLen)); |
|||
} |
|||
|
|||
store.commit('task/clearTasks'); |
|||
params.queryType === 0 ? store.commit('task/setUpTasks', oldTasks) : store.commit('task/setDownTasks', oldTasks); |
|||
} else { |
|||
if (next > 0) { |
|||
getTasks({pageNum: params.pageNum, queryType: params.queryType}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 数据筛选条件 |
|||
* 大于等于15天，真实数据的时间跨度，且大于等于15条，真实数据的数量，不用重新加载数据 |
|||
*/ |
|||
function tremFilter(params) { |
|||
let time1 = 0, time2 = 0; |
|||
let realTasks = basicTasks.value; |
|||
|
|||
if (realTasks.length > 0) { |
|||
// 真实数据第一条数据加上15天后的时间
|
|||
time1 = dayjs(+realTasks[0].planStart).add(params.pageSize, timeGranularity.value); |
|||
// 真实数据最后一条数据的时间
|
|||
time2 = dayjs(realTasks[realTasks.length - 1].planStart, timeGranularity.value); |
|||
} |
|||
|
|||
let result1 = false, result2 = false; |
|||
// 判断真实任务的时间跨度是否在15天之内
|
|||
if (time1 > 0 && time2 > 0) { |
|||
// 两个时间是否相等
|
|||
result1 = dayjs(time1).isSame(time2, timeGranularity.value); |
|||
// time1是否大于time2
|
|||
result2 = dayjs(time1).isAfter(time2, timeGranularity.value); |
|||
} |
|||
|
|||
let term1 = realTasks.length >= params.pageSize; // 大于等于15条，真实数据的数量
|
|||
// 大于等于15天，真实数据的时间跨度
|
|||
let term2 = result1 || result2; |
|||
|
|||
return term1 || term2; |
|||
} |
|||
|
|||
/** |
|||
* 用拿到的新数据 替换 时间刻度/旧数据 |
|||
* 先对比 新旧数据的 始末时间 补齐刻度 |
|||
* 再遍历对比 用任务替换刻度 |
|||
* @param {array} data 服务端返回的新数据 上边已经处理过空值 |
|||
* @param {number} type 0 -> 向上 1->向下 |
|||
*/ |
|||
// function replacePrevData(data, type) {
|
|||
// const obj = { tasks: tasks.value, data, timeGranularity: timeGranularity.value };
|
|||
// let oldTasks = fillPlaceholderTask(obj); // 已经上下补齐时间刻度的
|
|||
// console.log('oldTasks', oldTasks)
|
|||
// // 遍历对比 用任务替换刻度
|
|||
// // TODO: tasks越来越多 遍历越来越多 需要优化
|
|||
// oldTasks.forEach((taskItem, index) => {
|
|||
// const arr = data.filter(dataItem => dayjs(+dataItem.planStart).isSame(+taskItem.planStart, timeGranularity.value));
|
|||
// if (arr && arr.length) {
|
|||
// oldTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}]
|
|||
// }
|
|||
// });
|
|||
|
|||
// oldTasks = flatten(oldTasks); // 1维拍平
|
|||
|
|||
// store.commit('task/clearTasks');
|
|||
// type === 0 ? store.commit('task/setUpTasks', oldTasks) : store.commit('task/setDownTasks', oldTasks);
|
|||
// }
|
|||
|
|||
/** |
|||
* 超出旧数据上、下限 补齐时间刻度到新数据的起始时间颗粒度 |
|||
*/ |
|||
// function fillPlaceholderTask(obj) {
|
|||
// const { prev, next } = uni.$task.computeFillPlaceholderTaskCount(obj);
|
|||
// if (prev) {
|
|||
// const newTasks = uni.$task.setPlaceholderTasks(+obj.tasks[0].planStart, true, obj.timeGranularity, prev);
|
|||
// store.commit('task/setUpTasks', newTasks);
|
|||
// }
|
|||
// if (next) {
|
|||
// const newTasks = uni.$task.setPlaceholderTasks(+obj.tasks[obj.tasks.length - 1].planStart, false, obj.timeGranularity, next);
|
|||
// store.commit('task/setDownTasks', newTasks);
|
|||
// }
|
|||
// return tasks.value;
|
|||
// }
|
|||
|
|||
// 设置时间轴向上的空数据
|
|||
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/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); |
|||
} |
|||
const initData = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value); |
|||
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, |
|||
renderTask |
|||
}; |
|||
} |
|||
@ -0,0 +1,325 @@ |
|||
const mutations = { |
|||
/** |
|||
* 设置真实任务数据 |
|||
* @param {Object} state |
|||
* @param {Object} data |
|||
*/ |
|||
setBasicTask(state, data) { |
|||
state.basicTasks = [...data]; |
|||
}, |
|||
|
|||
/** |
|||
* 设置向上真实任务数据 |
|||
* @param {Object} state |
|||
* @param {Object} data |
|||
*/ |
|||
setUpBasicTask(state, data) { |
|||
state.upBasicTasks = [...data]; |
|||
}, |
|||
|
|||
/** |
|||
* 设置当前展示的状态 |
|||
* @param {Object} state |
|||
* @param {Object} data 1、20个数据全部展示 2、只展示一部分数据 |
|||
*/ |
|||
// setShowStatus(state, data) {
|
|||
// state.showStatus = data;
|
|||
// },
|
|||
|
|||
/** |
|||
* 下一页页数 |
|||
* @param {Object} state |
|||
* @param {Object} data |
|||
*/ |
|||
setNextPage(state, data) { |
|||
state.nextPage = data; |
|||
}, |
|||
|
|||
/** |
|||
* 向上下一页页数 |
|||
* @param {Object} state |
|||
* @param {Object} data |
|||
*/ |
|||
setUpNextPage(state, data) { |
|||
state.upNextPage = data; |
|||
}, |
|||
|
|||
/** |
|||
* 总共页数 |
|||
* @param {Object} state |
|||
* @param {Object} data |
|||
*/ |
|||
setLastPage(state, data) { |
|||
state.lastPage = data; |
|||
}, |
|||
|
|||
/** |
|||
* 向上总共页数 |
|||
* @param {Object} state |
|||
* @param {Object} data |
|||
*/ |
|||
setUpLastPage(state, data) { |
|||
state.upLastPage = data; |
|||
}, |
|||
|
|||
/** |
|||
* 记录时间轴向上滚动的距离 |
|||
* @param { object } state |
|||
* @param { number } num |
|||
*/ |
|||
setScrollTop(state, num) { |
|||
state.scrollTop = num; |
|||
}, |
|||
|
|||
/** |
|||
* 记录时间轴向上滚动的距离 |
|||
* @param { object } state |
|||
* @param {string} taskId |
|||
*/ |
|||
setScrollToTaskId(state, taskId) { |
|||
state.scrollToTaskId = taskId; |
|||
}, |
|||
|
|||
/** |
|||
* 设置日常任务当前是否应该处于收缩状态 |
|||
* @param { object } state |
|||
* @param { boolean } data |
|||
*/ |
|||
setShrink(state, data) { |
|||
state.isShrink = data; |
|||
}, |
|||
|
|||
/** |
|||
* 设置tip的值 |
|||
* @param {object} state |
|||
* @param {object} data |
|||
*/ |
|||
setTip(state, data) { |
|||
if (!data) return; |
|||
state.tip = { ...data }; |
|||
}, |
|||
|
|||
/** |
|||
* 是否显示tips |
|||
* @param { object } state |
|||
* @param { boolean } show |
|||
*/ |
|||
setTipShow(state, show) { |
|||
state.tip.show = show; |
|||
}, |
|||
|
|||
/** |
|||
* 是否显示tips |
|||
* @param { object } state |
|||
* @param { number } status |
|||
*/ |
|||
setStatus(state, status) { |
|||
state.tip.status = status; |
|||
}, |
|||
|
|||
/** |
|||
* 设置时间基准点 |
|||
* @param { object } state |
|||
* @param { number } data |
|||
*/ |
|||
setTimeNode(state, data) { |
|||
state.timeNode = data; |
|||
}, |
|||
|
|||
/** |
|||
* 设置时间颗粒度 |
|||
* @param { object } state |
|||
* @param { number } data |
|||
*/ |
|||
setTimeUnit(state, data) { |
|||
state.timeUnit = data; |
|||
}, |
|||
|
|||
/** |
|||
* 设置向上查到的定期任务数据 |
|||
* @param {Object} state |
|||
* @param {Array} data 服务端返回的模板数组 |
|||
*/ |
|||
setUpTasks(state, data) { |
|||
if (!state.tasks.length) { |
|||
state.tasks = [...data]; // 原来没有数据
|
|||
} else { |
|||
state.tasks = [...data, ...state.tasks]; |
|||
|
|||
let arr = [], |
|||
flag = false; |
|||
state.tasks.forEach(task => { |
|||
arr.forEach(item => { |
|||
if (task.id == item.id) { |
|||
flag = true; |
|||
} |
|||
}); |
|||
|
|||
if (!flag) { |
|||
arr.push(task); |
|||
} |
|||
}); |
|||
|
|||
state.tasks = [...arr]; |
|||
// state.tasks = [...data.concat(state.tasks)];
|
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 设置向下查到的定期任务数据 |
|||
* @param {Object} state |
|||
* @param {Array} data 服务端返回的模板数组 |
|||
*/ |
|||
setDownTasks(state, data) { |
|||
if (!state.tasks && !state.tasks.length) { |
|||
state.tasks = [...data]; |
|||
} else { |
|||
state.tasks = [...state.tasks, ...data]; |
|||
let arr = [], flag = false; |
|||
state.tasks.forEach(task => { |
|||
arr.forEach(item => { |
|||
if (item.id === task.id) { |
|||
flag = true; |
|||
} |
|||
}); |
|||
|
|||
if (!flag) { |
|||
arr.push(task); |
|||
} |
|||
}); |
|||
|
|||
state.tasks = [...arr]; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 添加任务后更新tasks |
|||
* @param {Object} state |
|||
* @param {Array} data 新添加的task |
|||
*/ |
|||
updateTasks(state, data) { |
|||
state.tasks = [...data]; |
|||
}, |
|||
|
|||
/** |
|||
* 设置添加任务的位置 |
|||
* @param {*} state |
|||
* @param {*} data |
|||
*/ |
|||
setAddPosition(state, data) { |
|||
console.log('data: ', data); |
|||
}, |
|||
|
|||
/** |
|||
* 设置日常任务数据 |
|||
* @param {Object} state |
|||
* @param {Array} data 服务端返回的模板数组 |
|||
*/ |
|||
setDailyTasks(state, data) { |
|||
state.dailyTasks = data || []; |
|||
}, |
|||
|
|||
/** |
|||
* 设置永久固定任务 |
|||
* @param {object} state |
|||
* @param {array} tasks 服务端查询到的永久日常任务书籍 |
|||
*/ |
|||
setPermanents(state, tasks) { |
|||
state.permanents = tasks || []; |
|||
}, |
|||
|
|||
/** |
|||
* 设置时间轴是否继续向上查任务 |
|||
* @param {Object} state |
|||
* @param {Boolean} show |
|||
*/ |
|||
setTopEnd(state, show) { |
|||
state.topEnd = show; |
|||
}, |
|||
|
|||
/** |
|||
* 设置时间轴是否继续向下查任务 |
|||
* @param {Object} state |
|||
* @param {Boolean} show |
|||
*/ |
|||
setBottomEnd(state, show) { |
|||
state.bottomEnd = show; |
|||
}, |
|||
|
|||
// 清空标志位 如切换角色等使用
|
|||
clearEndFlag(state) { |
|||
state.topEnd = false; |
|||
state.bottomEnd = false; |
|||
}, |
|||
|
|||
// 清空定期任务
|
|||
clearTasks(state) { |
|||
state.tasks = []; |
|||
}, |
|||
|
|||
/** |
|||
* 收到消息设置任务状态 |
|||
* @param {Object} state |
|||
* @param {Array} data 服务端返回的模板数组 |
|||
*/ |
|||
setTaskStatus(state, data) { |
|||
const item = state.tasks.find(i => i.id === data.id); |
|||
item.process = data.taskStatus; |
|||
}, |
|||
|
|||
/** |
|||
* 收到打开新项目消息状态 |
|||
* @param {Object} state |
|||
* @param {Array} data 服务端返回的模板数组 |
|||
*/ |
|||
setNewProjectInfo(state, data) { |
|||
state.newProjectInfo = data; |
|||
}, |
|||
|
|||
/** |
|||
* 设置骨架屏是否显示 |
|||
* @param {Object} state |
|||
* @param {Boolean} show |
|||
*/ |
|||
setShowSkeleton(state, show) { |
|||
state.showSkeleton = show; |
|||
}, |
|||
|
|||
/** |
|||
* 设置日常任务骨架屏是否显示 |
|||
* @param {Object} state |
|||
* @param {Boolean} show |
|||
*/ |
|||
setShowGlobalSkeleton(state, show) { |
|||
state.showGlobalSkeleton = show; |
|||
}, |
|||
|
|||
/** |
|||
* 设置永久的日常任务是否加载过 |
|||
* @param {Object} state |
|||
* @param {Boolean} show |
|||
*/ |
|||
setHasPermanent(state, show) { |
|||
state.hasPermanent = show; |
|||
}, |
|||
|
|||
/** |
|||
* 是否设置时间轴自动滚动的位置 |
|||
* @param {Object} state |
|||
* @param {Boolean} show |
|||
*/ |
|||
setShowScrollTo(state, show) { |
|||
state.showScrollTo = show; |
|||
}, |
|||
|
|||
/** |
|||
* 设置所有任务数据 |
|||
* @param {Object} state |
|||
* @param {Array} data 服务端返回的模板数组 |
|||
*/ |
|||
setAllTasks(state, data) { |
|||
state.allTasks = data || []; |
|||
}, |
|||
}; |
|||
|
|||
export default mutations; |
|||
@ -0,0 +1,36 @@ |
|||
const state = { |
|||
basicTasks: [], // 接口返回的任务列表
|
|||
upBasicTasks: [], // 接口返回的任务列表 - 向上
|
|||
// showStatus: 0, // 1、20个数据全部展示 2、只展示一部分数据
|
|||
nextPage: 1, // 下一页查询的页数
|
|||
lastPage: 0, // 全部页数
|
|||
upNextPage: 1, // 向上查页数
|
|||
upLastPage: 0, // 向上查 最后一页
|
|||
scrollTop: 0, |
|||
scrollToTaskId: '', // 时间轴自动滚动的位置
|
|||
isShrink: false, // true: 收起， false：展开
|
|||
tip: { |
|||
taskId: '', // 当前正在修改状态的任务的id
|
|||
show: false, |
|||
status: 0, // 所点击任务的当前状态码
|
|||
text: '', |
|||
left: 0, // 鼠标点击位置距离左边的距离
|
|||
top: 0, // 鼠标点击位置距离上边的距离
|
|||
}, |
|||
timeNode: new Date().getTime(), // 时间基准点
|
|||
timeUnit: 4, // 时间颗粒度
|
|||
topEnd: false, // 时间轴向上查任务到顶了
|
|||
bottomEnd: false, // 时间轴向下查任务到底了
|
|||
permanents: [], // 永久日常任务
|
|||
dailyTasks: [], // 日常任务
|
|||
tasks: [], // 所有的定期任务
|
|||
showSkeleton: false, // 定期任务骨架屏
|
|||
showGlobalSkeleton: false, // 日常任务骨架屏
|
|||
newProjectInfo: {}, |
|||
showScrollTo: false, // 是否可以设置时间轴自动滚动的位置
|
|||
|
|||
allTasks: [], // 所有任务
|
|||
hasPermanent: false, // 永久的日常任务是否加载过
|
|||
}; |
|||
|
|||
export default state; |
|||
Loading…
Reference in new issue