5 changed files with 206 additions and 199 deletions
@ -1,189 +1,195 @@ |
|||||
<template> |
<template> |
||||
<theme :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
<theme :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
||||
<!-- 标题栏 --> |
<!-- 标题栏 --> |
||||
<Title /> |
<Title /> |
||||
|
|
||||
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
||||
<!-- 角色栏 --> |
<!-- 角色栏 --> |
||||
<Roles /> |
<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 :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"> |
<swiper-item v-for="(task,index) in allTasks" :key="index"> |
||||
<!-- 日常任务面板 --> |
<!-- 日常任务面板 --> |
||||
<Globals :globals="task.global" /> |
<Globals :globals="task.global" /> |
||||
|
|
||||
<!-- 定期任务面板 --> |
<!-- 定期任务面板 --> |
||||
<TimeLine :tasks="task.task" @getTasks="getTasks" class="flex-1 overflow-hidden" /> |
<TimeLine :tasks="task.task" @getTasks="getTasks" class="flex-1 overflow-hidden" /> |
||||
</swiper-item> |
</swiper-item> |
||||
</swiper> |
</swiper> |
||||
|
|
||||
<!-- TODO: DEBUG: --> |
<!-- TODO: DEBUG: --> |
||||
<u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button> |
<u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button> |
||||
</view> |
</view> |
||||
</theme> |
</theme> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, computed, watch, onMounted } from 'vue'; |
import { ref, computed, watch, onMounted } from 'vue'; |
||||
import { useStore } from 'vuex'; |
import { useStore } from 'vuex'; |
||||
import useInit from '@/hooks/project/useInit'; |
import useInit from '@/hooks/project/useInit'; |
||||
import useGetTasks from '@/hooks/project/useGetTasks'; |
import useGetTasks from '@/hooks/project/useGetTasks'; |
||||
import dayjs from 'dayjs'; |
import dayjs from 'dayjs'; |
||||
|
|
||||
const initHook = useInit(); |
const initHook = useInit(); |
||||
const getTasksHook = useGetTasks(); |
const getTasksHook = useGetTasks(); |
||||
const store = useStore(); |
const store = useStore(); |
||||
const roleId = computed(() => store.state.role.roleId); |
const projectId = computed(() => store.getters['project/projectId']); |
||||
const timeNode = computed(() => store.state.task.timeNode); |
const userId = computed(() => store.getters['user/userId']); |
||||
const timeUnit = computed(() => store.state.task.timeUnit); |
const roleId = computed(() => store.state.role.roleId); // 当前展示查看的角色id |
||||
const projectId = computed(() => store.getters['project/projectId']); |
const roleIndex = computed(() => store.state.role.roleIndex); // 时间轴角色索引 |
||||
const userId = computed(() => store.getters['user/userId']); |
const visibleRoles = computed(() => store.state.role.visibleRoles); // 展示的角色信息 |
||||
const newProjectInfo = computed(() => store.state.task.newProjectInfo); |
const timeNode = computed(() => store.state.task.timeNode); // 时间基准点 |
||||
const showScrollTo = computed(() => store.state.task.showScrollTo); |
const timeUnit = computed(() => store.state.task.timeUnit); // 时间颗粒度 |
||||
const visibleRoles = computed(() => store.state.role.visibleRoles); |
const newProjectInfo = computed(() => store.state.task.newProjectInfo); |
||||
const allTasks = computed(() => store.state.task.allTasks); |
const showScrollTo = computed(() => store.state.task.showScrollTo); // 是否可以设置时间轴自动滚动的位置 |
||||
const roleIndex = computed(() => store.state.role.roleIndex); |
const allTasks = computed(() => store.state.task.allTasks); // 所有任务 |
||||
const globals = computed(() => store.getters['task/globals']); |
const globals = computed(() => store.getters['task/globals']); // 所有的日常任务 永久 + 可变 日常任务 |
||||
const timeGranularity = computed(() => store.getters['task/timeGranularity']); |
const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 计算颗粒度 对应的 dayjs add 的单位 |
||||
const height = ref(null); |
const height = ref(null); // 页面高度 |
||||
|
|
||||
onMounted(() => { |
onMounted(() => { |
||||
const system = uni.getSystemInfoSync(); |
const system = uni.getSystemInfoSync(); |
||||
height.value = `${system.windowHeight}px`; |
height.value = `${system.windowHeight}px`; |
||||
}); |
}); |
||||
|
|
||||
// 获取可变全局任务 |
/** |
||||
function getGlobalData() { |
* 当角色发生变化时 |
||||
if(!allTasks.value[roleIndex]) { |
* 重新查询永久日常任务和普通日常任务 |
||||
const param = { |
* 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变 |
||||
roleId: roleId.value, |
* 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取 |
||||
timeNode: timeNode.value, |
*/ |
||||
timeUnit: timeUnit.value, |
watch(roleId, newValue => { |
||||
projectId: projectId.value, |
if (newValue) { |
||||
}; |
// 判断如果allTasks里有就不用加了 |
||||
store.dispatch('task/getGlobal', param); |
if (allTasks.value.length && allTasks.value[roleIndex.value].global && allTasks.value[roleIndex.value].task) |
||||
} |
return; |
||||
// 添加到allTasks里 |
|
||||
const index = visibleRoles.value.findIndex(role => role.id === roleId.value); |
console.log('当角色发生变化时', newValue); |
||||
const arr = [...allTasks.value]; |
store.commit('task/setTimeNode', Date.now()); |
||||
arr[index].global = [...globals.value]; |
// 根据角色查找永久的日常任务 |
||||
store.commit('task/setAllTasks', arr); |
const params = { |
||||
} |
roleId: newValue, |
||||
|
projectId: projectId.value, |
||||
// 清除已有的任务数据 |
}; |
||||
function clearTasksData() { |
store.dispatch('task/getPermanent', params); |
||||
// 清空日常任务的数据 |
|
||||
store.commit('task/setPermanents', []); |
|
||||
store.commit('task/setDailyTasks', []); |
|
||||
// 清空定期任务数据 |
|
||||
store.commit('task/clearTasks'); |
|
||||
// 到顶的标志复位 |
|
||||
// 到底的标志复位 |
|
||||
store.commit('task/clearEndFlag'); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 当角色发生变化时 |
|
||||
* 重新查询永久日常任务和普通日常任务 |
|
||||
* 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变 |
|
||||
* 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取 |
|
||||
*/ |
|
||||
watch(roleId, newValue => { |
|
||||
if (newValue) { |
|
||||
// 判断如果allTasks里有就不用加了 |
|
||||
if (allTasks.value.length && allTasks.value[roleIndex.value].global && allTasks.value[roleIndex.value].task) return; |
|
||||
|
|
||||
console.log('当角色发生变化时', newValue); |
|
||||
store.commit('task/setTimeNode', Date.now()); |
|
||||
// 根据角色查找永久的日常任务 |
|
||||
const params = { |
|
||||
roleId: newValue, |
|
||||
projectId: projectId.value, |
|
||||
}; |
|
||||
store.dispatch('task/getPermanent', params); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
/** |
|
||||
* 当时间基准点发生变化时 |
|
||||
* 重新根据时间和角色查询普通日常任务 |
|
||||
* 永久日常任务不发生 改变 |
|
||||
*/ |
|
||||
watch(timeNode, newValue => { |
|
||||
if (newValue && roleId.value) { |
|
||||
console.log('当时间基准点发生变化时'); |
|
||||
clearTasksData(); |
|
||||
// 查任务 |
|
||||
getGlobalData(); // 查可变日常任务 |
|
||||
getTasksHook.initPlanTasks(); // 处理定期任务 |
|
||||
|
|
||||
// 滚动到对应位置 |
|
||||
let timer = null; |
|
||||
timer = setInterval(() => { |
|
||||
if (showScrollTo.value) { |
|
||||
clearInterval(timer); |
|
||||
setScrollPosition(); |
|
||||
} |
|
||||
}, 300); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
/** |
|
||||
* 当收到打开新项目消息状态时 |
|
||||
* 重新根据时间和角色查询普通日常任务 |
|
||||
* 永久日常任务不发生改变 |
|
||||
*/ |
|
||||
watch(newProjectInfo, newValue => { |
|
||||
console.log('当收到打开新项目消息状态时'); |
|
||||
if (newValue && newValue.value.projectId && newValue.value.url) { |
|
||||
uni.$u.route('/', { |
|
||||
u: userId.value, |
|
||||
p: newValue.value.projectId, |
|
||||
url: newValue.value.url, |
|
||||
}); |
|
||||
clearTasksData(); |
|
||||
store.commit('role/setRoleId', ''); |
|
||||
const options = uni.$route.query; |
|
||||
|
|
||||
initHook.init(options); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
function getTasks(params) { |
|
||||
getTasksHook.initPlanTasks(params); // 处理定期任务 |
|
||||
} |
|
||||
|
|
||||
// tabs通知swiper切换 |
|
||||
function tabsChange(e) { |
|
||||
const { id } = visibleRoles.value[e.detail.current]; |
|
||||
store.commit('role/setRoleIndex', e.detail.current); |
|
||||
store.commit('role/setRoleId', id); |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 设置自动滚动位置 |
|
||||
function setScrollPosition() { |
|
||||
// 如果storage里有taskId 滚动到这个id的任务 |
|
||||
const taskId = uni.$storage.getStorageSync('taskId'); |
|
||||
if (taskId) { |
|
||||
store.commit('task/setScrollToTaskId', `a${taskId}`); |
|
||||
uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储 |
|
||||
} else { |
|
||||
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 |
|
||||
} |
} |
||||
} |
}); |
||||
} |
|
||||
</script> |
/** |
||||
|
* 当时间基准点发生变化时 |
||||
<style lang="scss" scoped> |
* 重新根据时间和角色查询普通日常任务 |
||||
.border-b { |
* 永久日常任务不发生 改变 |
||||
border-bottom: 1px solid #e4e7ed; |
*/ |
||||
} |
watch(timeNode, newValue => { |
||||
|
if (newValue && roleId.value) { |
||||
|
console.log('当时间基准点发生变化时'); |
||||
|
clearTasksData(); |
||||
|
// 查任务 |
||||
|
getGlobalData(); // 查可变日常任务 |
||||
|
getTasksHook.initPlanTasks(); // 处理定期任务 |
||||
|
|
||||
|
// 滚动到对应位置 |
||||
|
let timer = null; |
||||
|
timer = setInterval(() => { |
||||
|
if (showScrollTo.value) { |
||||
|
clearInterval(timer); |
||||
|
setScrollPosition(); |
||||
|
} |
||||
|
}, 300); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* 当收到打开新项目消息状态时 |
||||
|
* 重新根据时间和角色查询普通日常任务 |
||||
|
* 永久日常任务不发生改变 |
||||
|
*/ |
||||
|
watch(newProjectInfo, newValue => { |
||||
|
console.log('当收到打开新项目消息状态时'); |
||||
|
if (newValue && newValue.value.projectId && newValue.value.url) { |
||||
|
uni.$u.route('/', { |
||||
|
u: userId.value, |
||||
|
p: newValue.value.projectId, |
||||
|
url: newValue.value.url, |
||||
|
}); |
||||
|
clearTasksData(); |
||||
|
store.commit('role/setRoleId', ''); |
||||
|
const options = uni.$route.query; |
||||
|
|
||||
|
initHook.init(options); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 获取可变全局任务 |
||||
|
function getGlobalData() { |
||||
|
if (!allTasks.value[roleIndex]) { |
||||
|
const param = { |
||||
|
roleId: roleId.value, |
||||
|
timeNode: timeNode.value, |
||||
|
timeUnit: timeUnit.value, |
||||
|
projectId: projectId.value, |
||||
|
}; |
||||
|
store.dispatch('task/getGlobal', param); |
||||
|
} |
||||
|
// 添加到allTasks里 |
||||
|
const index = visibleRoles.value.findIndex(role => role.id === roleId.value); |
||||
|
const arr = [...allTasks.value]; |
||||
|
arr[index].global = [...globals.value]; |
||||
|
store.commit('task/setAllTasks', arr); |
||||
|
} |
||||
|
|
||||
|
// 清除已有的任务数据 |
||||
|
function clearTasksData() { |
||||
|
// 清空日常任务的数据 |
||||
|
store.commit('task/setPermanents', []); |
||||
|
store.commit('task/setDailyTasks', []); |
||||
|
// 清空定期任务数据 |
||||
|
store.commit('task/clearTasks'); |
||||
|
// 到顶的标志复位 |
||||
|
// 到底的标志复位 |
||||
|
store.commit('task/clearEndFlag'); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
function getTasks(params) { |
||||
|
getTasksHook.initPlanTasks(params); // 处理定期任务 |
||||
|
} |
||||
|
|
||||
|
// tabs通知swiper切换 |
||||
|
function tabsChange(e) { |
||||
|
const { |
||||
|
id |
||||
|
} = visibleRoles.value[e.detail.current]; |
||||
|
store.commit('role/setRoleIndex', e.detail.current); |
||||
|
store.commit('role/setRoleId', id); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 设置自动滚动位置 |
||||
|
function setScrollPosition() { |
||||
|
// 如果storage里有taskId 滚动到这个id的任务 |
||||
|
const taskId = uni.$storage.getStorageSync('taskId'); |
||||
|
if (taskId) { |
||||
|
store.commit('task/setScrollToTaskId', `a${taskId}`); |
||||
|
uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储 |
||||
|
} else { |
||||
|
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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.border-b { |
||||
|
border-bottom: 1px solid #e4e7ed; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue