5 changed files with 206 additions and 199 deletions
@ -1,189 +1,195 @@ |
|||
<template> |
|||
<theme :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
|||
<!-- 标题栏 --> |
|||
<Title /> |
|||
|
|||
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
|||
<!-- 角色栏 --> |
|||
<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-item v-for="(task,index) in allTasks" :key="index"> |
|||
<!-- 日常任务面板 --> |
|||
<Globals :globals="task.global" /> |
|||
|
|||
<!-- 定期任务面板 --> |
|||
<TimeLine :tasks="task.task" @getTasks="getTasks" class="flex-1 overflow-hidden" /> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- TODO: DEBUG: --> |
|||
<u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button> |
|||
</view> |
|||
</theme> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, watch, onMounted } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import useInit from '@/hooks/project/useInit'; |
|||
import useGetTasks from '@/hooks/project/useGetTasks'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const initHook = useInit(); |
|||
const getTasksHook = useGetTasks(); |
|||
const store = useStore(); |
|||
const roleId = computed(() => store.state.role.roleId); |
|||
const timeNode = computed(() => store.state.task.timeNode); |
|||
const timeUnit = computed(() => store.state.task.timeUnit); |
|||
const projectId = computed(() => store.getters['project/projectId']); |
|||
const userId = computed(() => store.getters['user/userId']); |
|||
const newProjectInfo = computed(() => store.state.task.newProjectInfo); |
|||
const showScrollTo = computed(() => store.state.task.showScrollTo); |
|||
const visibleRoles = computed(() => store.state.role.visibleRoles); |
|||
const allTasks = computed(() => store.state.task.allTasks); |
|||
const roleIndex = computed(() => store.state.role.roleIndex); |
|||
const globals = computed(() => store.getters['task/globals']); |
|||
const timeGranularity = computed(() => store.getters['task/timeGranularity']); |
|||
const height = ref(null); |
|||
|
|||
onMounted(() => { |
|||
const system = uni.getSystemInfoSync(); |
|||
height.value = `${system.windowHeight}px`; |
|||
}); |
|||
|
|||
// 获取可变全局任务 |
|||
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'); |
|||
} |
|||
|
|||
/** |
|||
* 当角色发生变化时 |
|||
* 重新查询永久日常任务和普通日常任务 |
|||
* 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变 |
|||
* 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取 |
|||
*/ |
|||
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 |
|||
<template> |
|||
<theme :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
|||
<!-- 标题栏 --> |
|||
<Title /> |
|||
|
|||
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
|||
<!-- 角色栏 --> |
|||
<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-item v-for="(task,index) in allTasks" :key="index"> |
|||
<!-- 日常任务面板 --> |
|||
<Globals :globals="task.global" /> |
|||
|
|||
<!-- 定期任务面板 --> |
|||
<TimeLine :tasks="task.task" @getTasks="getTasks" class="flex-1 overflow-hidden" /> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<!-- TODO: DEBUG: --> |
|||
<u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button> |
|||
</view> |
|||
</theme> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, watch, onMounted } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import useInit from '@/hooks/project/useInit'; |
|||
import useGetTasks from '@/hooks/project/useGetTasks'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const initHook = useInit(); |
|||
const getTasksHook = useGetTasks(); |
|||
const store = useStore(); |
|||
const projectId = computed(() => store.getters['project/projectId']); |
|||
const userId = computed(() => store.getters['user/userId']); |
|||
const roleId = computed(() => store.state.role.roleId); // 当前展示查看的角色id |
|||
const roleIndex = computed(() => store.state.role.roleIndex); // 时间轴角色索引 |
|||
const visibleRoles = computed(() => store.state.role.visibleRoles); // 展示的角色信息 |
|||
const timeNode = computed(() => store.state.task.timeNode); // 时间基准点 |
|||
const timeUnit = computed(() => store.state.task.timeUnit); // 时间颗粒度 |
|||
const newProjectInfo = computed(() => store.state.task.newProjectInfo); |
|||
const showScrollTo = computed(() => store.state.task.showScrollTo); // 是否可以设置时间轴自动滚动的位置 |
|||
const allTasks = computed(() => store.state.task.allTasks); // 所有任务 |
|||
const globals = computed(() => store.getters['task/globals']); // 所有的日常任务 永久 + 可变 日常任务 |
|||
const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 计算颗粒度 对应的 dayjs add 的单位 |
|||
const height = ref(null); // 页面高度 |
|||
|
|||
onMounted(() => { |
|||
const system = uni.getSystemInfoSync(); |
|||
height.value = `${system.windowHeight}px`; |
|||
}); |
|||
|
|||
/** |
|||
* 当角色发生变化时 |
|||
* 重新查询永久日常任务和普通日常任务 |
|||
* 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变 |
|||
* 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取 |
|||
*/ |
|||
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); |
|||
} |
|||
} |
|||
} |
|||
</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> |
|||
|
|||
Loading…
Reference in new issue