10 changed files with 126 additions and 529 deletions
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<view class="my-2">过程还原</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,439 +0,0 @@ |
|||
<template> |
|||
<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-16"> |
|||
<!-- 标题栏 --> |
|||
<Title /> |
|||
|
|||
<view class="container flex flex-col flex-1 overflow-hidden bg-gray-100"> |
|||
<!-- 角色栏 --> |
|||
<Roles @changeIsSetting="changeIsSetting" /> |
|||
|
|||
<!-- 日常任务面板 --> |
|||
<!-- <Globals /> --> |
|||
|
|||
<!-- 定期任务面板 --> |
|||
<!-- <ConfigInfo class="flex-1 overflow-hidden" style="background-color: #f3f3f3" /> --> |
|||
<ConfigInfo class="flex-1 overflow-hidden" style="background-color: #f3f3f3" v-if="isSetting" /> |
|||
<TimeLine @getTasks="getTasks" style="background-color: #f3f3f3" class="flex-1 overflow-hidden" ref="timeLine" v-else /> |
|||
</view> |
|||
|
|||
<!-- 引导语 --> |
|||
<!-- <GuidePage class="w-full h-full" v-if="showGuide" @quitGuide="quitGuide" /> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'; |
|||
import { setPlaceholderTasks, computeFillPlaceholderTaskCount } from '@/utils/task'; |
|||
import { flatten } from 'lodash'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
height: '', |
|||
show: false, |
|||
questionnaires: [], |
|||
count: 0, |
|||
chooseItem: false, |
|||
showGuide: false, |
|||
isSetting: false, // 角色是设置 |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('user', ['user', 'token']), |
|||
...mapState('role', ['visibleRoles', 'roleId']), |
|||
...mapState('task', ['timeNode', 'timeUnit', 'tasks', 'regularTask', 'newProjectInfo', 'showSkeleton', 'showScrollTo']), |
|||
...mapState('project', ['project']), |
|||
...mapGetters('task', ['timeGranularity']), |
|||
...mapGetters('project', ['projectId']), |
|||
...mapGetters('user', ['userId']), |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
if (options.share && options.share === '1') { |
|||
this.shareInit(options); |
|||
} else { |
|||
this.init(options); |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
/** |
|||
* 当时间基准点发生变化时 |
|||
* 重新根据时间和角色查询普通日常任务 |
|||
* 永久日常任务不发生改变 |
|||
*/ |
|||
timeNode(val) { |
|||
if (val && this.roleId) { |
|||
this.clearTasksData(); |
|||
this.getGlobalData(); // 查可变日常任务 |
|||
this.initPlanTasks(); // 处理定期任务 |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 当角色发生变化时 |
|||
* 重新查询永久日常任务和普通日常任务 |
|||
* 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变 |
|||
* 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取 |
|||
*/ |
|||
roleId(val) { |
|||
if (val) { |
|||
if (this.isSetting) return; |
|||
this.setTimeNode(Date.now()); |
|||
// 根据角色查找永久的日常任务 |
|||
const params = { roleId: val, projectId: this.projectId, templateCode: this.project.templateCode }; |
|||
this.getPermanent(params); |
|||
} |
|||
}, |
|||
|
|||
// 收到跳转新项目的消息 |
|||
newProjectInfo(val) { |
|||
if (val && val.projectId && val.url) { |
|||
this.$u.route('/', { u: this.userId, p: val.projectId, url: val.url }); |
|||
this.clearTasksData(); |
|||
this.setRoleId(''); |
|||
const options = this.$route.query; |
|||
this.init(options); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
const system = uni.getSystemInfoSync(); |
|||
this.height = system.windowHeight + 'px'; |
|||
|
|||
// TODO: 判断用户第一次进来才会显示 |
|||
setTimeout(() => { |
|||
this.showGuide = true; |
|||
}, 1000); |
|||
}, |
|||
|
|||
onUnload() { |
|||
this.clearTasksData(); |
|||
this.setRoleId(''); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions('user', ['getToken']), |
|||
...mapActions('task', ['getRegulars', 'getPermanent', 'getGlobal']), |
|||
...mapMutations('user', ['setToken']), |
|||
...mapMutations('project', ['setProject', 'setProjectName']), |
|||
...mapMutations('role', ['setInvisibleRoles', 'setVisibleRoles', 'setRoleId']), |
|||
...mapMutations('task', [ |
|||
'setPermanents', |
|||
'setUpTasks', |
|||
'setDownTasks', |
|||
'setDailyTasks', |
|||
'setTimeNode', |
|||
'clearTasks', |
|||
'clearEndFlag', |
|||
'setShowSkeleton', |
|||
'setTopEnd', |
|||
'setBottomEnd', |
|||
'setShowScrollTo', |
|||
]), |
|||
|
|||
back() { |
|||
uni.navigateBack(); |
|||
}, |
|||
|
|||
changeIsSetting(show) { |
|||
this.isSetting = show; |
|||
}, |
|||
|
|||
// 初始化 定期任务 |
|||
async initPlanTasks() { |
|||
this.setPrevPlaceholderTasks(); // 向上加载空数据 |
|||
this.setNextPlaceholderTasks(); // 向下加载空数据 |
|||
// // this.$nextTick(() => this.$refs.timeLine.setScrollPosition()); // 滚动到对应位置 |
|||
await this.getInitTasks(); // 获取初始数据 |
|||
// 滚动到对应位置 |
|||
let timer = null; |
|||
timer = setInterval(() => { |
|||
if (this.showScrollTo) { |
|||
clearInterval(timer); |
|||
this.$nextTick(() => this.$refs.timeLine.setScrollPosition()); |
|||
} |
|||
}, 500); |
|||
}, |
|||
|
|||
// 切换了 颗粒度 || 角色时候 获取初始定期任务 |
|||
getInitTasks() { |
|||
// 根据项目id获取角色列表 |
|||
// this.getTasks({ queryType: 1 }, preloadFn); // 向下获取定期任务数据 |
|||
// 根据时间基准点和角色查找定期任务 |
|||
this.getTasks({ queryType: 0 }); // 向上获取定期任务数据 |
|||
}, |
|||
|
|||
/** |
|||
* 根据时间基准点和角色查找定期任务 |
|||
* @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向下查找(默认) 下查包含自己，上查不包含 |
|||
*/ |
|||
getTasks(query) { |
|||
this.setShowSkeleton(true); |
|||
const params = this.generateGetTaskParam(query); |
|||
this.$t.$q.getRegularTask(params, (err, data) => { |
|||
this.setShowSkeleton(false); |
|||
if (err) { |
|||
// TODO: 提示错误 |
|||
console.error('err: ', err); |
|||
} else { |
|||
this.setShowScrollTo(true); |
|||
// 有数据用数据替换刻度 |
|||
// 没有数据 继续加载刻度 |
|||
if (data && data.length) { |
|||
this.replacePrevData(data, params.queryType); |
|||
params.queryType === 0 ? this.setTopEnd(false) : this.setBottomEnd(false); |
|||
} else { |
|||
// TODO: 0 -> 向上 1 -> 向下 |
|||
params.queryType === 0 ? this.setPrevPlaceholderTasks() : this.setNextPlaceholderTasks(); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 生成getTasks所用的参数 |
|||
* @param {object} query getTasks传递的参数 |
|||
*/ |
|||
generateGetTaskParam(query) { |
|||
const { roleId, timeNode, timeUnit, projectId, project } = this; |
|||
return { |
|||
roleId, |
|||
timeNode: query.timeNode || timeNode, |
|||
timeUnit: query.timeUnit || timeUnit, |
|||
// queryNum: query.queryNum || 3, |
|||
queryNum: 1, |
|||
queryType: query.queryType, |
|||
projectId, |
|||
templateCode: project.templateCode, |
|||
}; |
|||
}, |
|||
|
|||
// 设置时间轴向上的空数据 |
|||
setPrevPlaceholderTasks() { |
|||
this.setTopEnd(true); |
|||
let startTime = ''; |
|||
const { tasks } = this; |
|||
if (!tasks || !tasks.length) { |
|||
startTime = Date.now(); // 没有任务就应该是时间基准点 |
|||
} else { |
|||
startTime = tasks[0].planStart - 0; // 有任务就是第一个任务的计划开始时间 |
|||
} |
|||
const placeholderTasks = setPlaceholderTasks(startTime, true, this.timeGranularity); |
|||
this.setUpTasks(placeholderTasks); |
|||
}, |
|||
|
|||
// 设置时间轴向下的空数据 |
|||
setNextPlaceholderTasks() { |
|||
this.setBottomEnd(true); |
|||
let startTime = ''; |
|||
if (!this.tasks || !this.tasks.length) { |
|||
startTime = Date.now(); |
|||
} else { |
|||
startTime = +this.tasks[this.tasks.length - 1].planStart; |
|||
} |
|||
const initData = setPlaceholderTasks(startTime, false, this.timeGranularity); |
|||
this.setDownTasks(initData); |
|||
}, |
|||
|
|||
/** |
|||
* 用拿到的新数据 替换 时间刻度/旧数据 |
|||
* 先对比 新旧数据的 始末时间 补齐刻度 |
|||
* 再遍历对比 用任务替换刻度 |
|||
* @param {array} data 服务端返回的新数据 上边已经处理过空值 |
|||
* @param {number} type 0 -> 向上 1->向下 |
|||
*/ |
|||
replacePrevData(data, type) { |
|||
const { timeGranularity } = this; |
|||
let oldTasks = this.fillPlaceholderTask({ tasks: this.tasks, data, timeGranularity }); // 已经上下补齐时间刻度的 |
|||
// 遍历对比 用任务替换刻度 |
|||
// TODO: tasks越来越多 遍历越来越多 需要优化 |
|||
oldTasks.forEach((taskItem, index) => { |
|||
const arr = data.filter(dataItem => this.$moment(+dataItem.planStart).isSame(+taskItem.planStart, timeGranularity)); |
|||
console.log('arr: ', arr); |
|||
|
|||
if (arr && arr.length) { |
|||
oldTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}] |
|||
} |
|||
}); |
|||
|
|||
oldTasks = flatten(oldTasks); // 1维拍平 |
|||
console.log('oldTasks: ', oldTasks); |
|||
this.clearTasks(); // setUpTasks setUpTasks 的限制 需要清空 |
|||
type === 0 ? this.setUpTasks(oldTasks) : this.setDownTasks(oldTasks); |
|||
}, |
|||
|
|||
/** |
|||
* 超出旧数据上、下限 补齐时间刻度到新数据的起始时间颗粒度 |
|||
*/ |
|||
fillPlaceholderTask({ tasks, data, timeGranularity }) { |
|||
const { prev, next } = computeFillPlaceholderTaskCount({ tasks, data, timeGranularity }); |
|||
if (prev) { |
|||
const newTasks = setPlaceholderTasks(+tasks[0].planStart, true, timeGranularity, prev); |
|||
this.setUpTasks(newTasks); |
|||
} |
|||
if (next) { |
|||
const newTasks = setPlaceholderTasks(+tasks[tasks.length - 1].planStart, false, timeGranularity, next); |
|||
this.setDownTasks(newTasks); |
|||
} |
|||
return this.tasks; |
|||
}, |
|||
|
|||
/** |
|||
* 初始化 |
|||
* @param {object | null} options |
|||
*/ |
|||
init(options) { |
|||
if (!this.token) { |
|||
// 不论有没有token都直接从userId获取token |
|||
// token有过期时间 从本地获取可能是过期 干脆直接从userId获取 |
|||
if (!options || !options.u) { |
|||
this.$t.ui.showToast('缺少用户信息参数'); // 参数里没有u (userId)提示 |
|||
} else { |
|||
this.getToken(options.u); |
|||
} |
|||
} |
|||
|
|||
// 参数里有项目名称 就设置标题里的项目名称 |
|||
options && options.pname && this.setProjectName(options.pname); |
|||
|
|||
if (!options || !options.p) { |
|||
this.$t.ui.showToast('缺少项目信息参数'); // 没有项目id参数 |
|||
} else { |
|||
if (options.p !== this.$t.storage.getStorageSync('projectId')) { |
|||
this.$t.storage.setStorageSync('roleId', ''); |
|||
} |
|||
// TODO |
|||
// this.getProjectById({ projectId: options.p, num: 0 }); // 根据项目id获取项目信息 |
|||
|
|||
// 根据项目id获取角色列表 |
|||
this.getRoles({ projectId: options.p, num: 0, templateCode: this.project.templateCode }); |
|||
} |
|||
}, |
|||
|
|||
// 分享链接来的初始化 |
|||
async shareInit(options) { |
|||
const storageUser = this.$t.storage.getStorageSync('user'); |
|||
const user = storageUser ? JSON.parse(storageUser) : null; |
|||
if (user && user.id) { |
|||
await this.getToken(user.id); |
|||
const res = await this.clickShare({ code: options.shareId }); |
|||
if (res && res.projectId) { |
|||
let query = { ...this.$route.query }; |
|||
query = { |
|||
u: user.id, |
|||
p: res.projectId, |
|||
}; |
|||
this.$router.push({ path: this.$route.path, query }); |
|||
this.init(query); |
|||
} |
|||
} else { |
|||
this.$t.ui.showToast('缺少用户信息参数,请登录'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 点击分享连接 |
|||
* @param {any} commit |
|||
* @param {object} param 请求参数 |
|||
*/ |
|||
async clickShare(param) { |
|||
try { |
|||
const data = await this.$u.api.clickShare(param); |
|||
return data; |
|||
} catch (error) { |
|||
this.$t.ui.showToast(error.msg || '获取失败'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 通过项目id获取项目信息 |
|||
* @param {object} params 提交的参数 |
|||
*/ |
|||
async getProjectById(params) { |
|||
try { |
|||
const data = await uni.$u.api.findProjectById(params); |
|||
this.setProject(data); |
|||
// 根据项目id获取角色列表 |
|||
this.getRoles(params); |
|||
} catch (error) { |
|||
console.error('error: ', error || '获取项目信息失败'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 通过项目id获取角色信息 |
|||
* @param {string} projectId |
|||
* @param {object} params 提交的参数 |
|||
*/ |
|||
getRoles(params) { |
|||
this.$t.$q.findShowRole(params, (err, data) => { |
|||
if (err) { |
|||
console.error('err: ', err || '获取角色信息失败'); |
|||
} else { |
|||
this.setInvisibleRoles(data ? data.invisibleList : []); |
|||
this.setVisibleRoles(data ? data.visibleList : []); |
|||
this.setInitialRoleId(data ? data.visibleList : []); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 设置 初始显示角色信息 |
|||
setInitialRoleId(visibleList) { |
|||
if (!visibleList || !visibleList.length) return; |
|||
const index = visibleList.findIndex(item => +item.mine === 1); |
|||
const currentRole = index > 0 ? visibleList[index] : visibleList[0]; |
|||
const storageRoleId = this.$t.storage.getStorageSync('roleId'); |
|||
const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : ''; |
|||
this.setRoleId(currentRoleId); |
|||
// 清空storage |
|||
this.$t.storage.setStorageSync('roleId', ''); |
|||
}, |
|||
|
|||
// 获取可变全局任务 |
|||
getGlobalData() { |
|||
const { roleId, timeNode, timeUnit, projectId } = this; |
|||
const param = { roleId, timeNode, timeUnit, projectId }; |
|||
this.getGlobal(param); |
|||
}, |
|||
|
|||
// 清除已有的任务数据 |
|||
clearTasksData() { |
|||
// 清空日常任务的数据 |
|||
this.setPermanents([]); |
|||
this.setDailyTasks([]); |
|||
// 清空定期任务数据 |
|||
this.clearTasks(); |
|||
// 到顶的标志复位 |
|||
// 到底的标志复位 |
|||
this.clearEndFlag(); |
|||
}, |
|||
|
|||
// 退出引导页 |
|||
quitGuide() { |
|||
this.showGuide = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.img-box { |
|||
width: 750rpx; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 999; |
|||
} |
|||
.border-b { |
|||
border-bottom: 1px solid #e4e7ed; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue