forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
497 lines
16 KiB
497 lines
16 KiB
<template>
|
|
<view :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 />
|
|
|
|
<!-- 日常任务面板 -->
|
|
<Globals />
|
|
|
|
<!-- 定期任务面板 -->
|
|
<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
|
|
|
|
<!-- 医院项目的问卷悬浮按钮 -->
|
|
<view class="absolute bottom-10 right-5" v-if="showQuestion">
|
|
<view
|
|
@click="openQuestionnaire(false)"
|
|
class="relative text-white bg-blue-400 flex justify-center items-center w-12 h-12 rounded-full shadow-2xl"
|
|
>
|
|
问卷
|
|
<u-badge type="error" :count="count" :offset="[-8, -8]"></u-badge>
|
|
</view>
|
|
|
|
<u-popup v-model="showQuestionList" mode="bottom" border-radius="14">
|
|
<view class="h-64">
|
|
<view class="text-center font-bold fixed bg-white py-3 top-0 w-full">请选择</view>
|
|
<view class="flex flex-col mx-3 pt-10 pb-6 h-full overflow-y-auto" :class="questionnaires.length < 5 ? 'justify-center' : ''">
|
|
<view
|
|
v-for="(item, index) in questionnaires"
|
|
:key="item.id"
|
|
class="p-2 text-center"
|
|
@click="openQuestionnaire(true)"
|
|
:class="index === questionnaires.length - 1 ? '' : 'border-b'"
|
|
>
|
|
<view class="text-gray-500">{{ item.questionnaireName }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="fixed bottom-0 bg-white h-6 w-full"></view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
</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, showQuestion: false, questionnaires: [], count: 0, showQuestionList: false, chooseItem: 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) {
|
|
console.log('options: ', 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) {
|
|
this.setTimeNode(Date.now());
|
|
// 根据角色查找永久的日常任务
|
|
const params = { roleId: val, projectId: this.projectId };
|
|
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);
|
|
}
|
|
},
|
|
|
|
// 医院项目下的调查问卷
|
|
questionnaires(val) {
|
|
if (val && val.length) {
|
|
this.showQuestion = true;
|
|
val.forEach(item => {
|
|
if (item.isWrite === 0 || item.isWrite === -1) {
|
|
this.count += 1;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
const system = uni.getSystemInfoSync();
|
|
this.height = system.windowHeight + 'px';
|
|
},
|
|
|
|
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',
|
|
]),
|
|
|
|
// 初始化 定期任务
|
|
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() {
|
|
// 预加载 上下的定期任务
|
|
function preloadFn(that) {
|
|
const detailId = that.tasks.findIndex(task => task.detailId);
|
|
const arr = [];
|
|
that.tasks.forEach(task => {
|
|
if (task.detailId) {
|
|
arr.push(task);
|
|
}
|
|
});
|
|
if (detailId !== -1) {
|
|
// 只要有1个真实的任务 就预加载上下周期的任务
|
|
const { pageCount } = that.$t.task;
|
|
that.$nextTick(() => {
|
|
// 向上拿数据
|
|
const { tasks, timeGranularity } = that;
|
|
that.getTasks({ timeNode: +tasks[detailId].planStart, queryType: 0, queryNum: pageCount });
|
|
// 向下拿数据
|
|
const nextQueryTime = +that.$t.time.add(+arr[arr.length - 1].planStart, 1, timeGranularity);
|
|
that.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: pageCount });
|
|
});
|
|
} else {
|
|
// 没有任务 上下显示时间刻度
|
|
// 向上加载
|
|
// that.setPrevPlaceholderTasks();
|
|
// // 向下加载
|
|
// that.setNextPlaceholderTasks();
|
|
}
|
|
}
|
|
// 根据时间基准点和角色查找定期任务
|
|
this.getTasks({ queryType: 0 }); // 向上获取定期任务数据
|
|
|
|
// 根据项目id获取角色列表
|
|
this.getTasks({ queryType: 1 }, preloadFn); // 向下获取定期任务数据
|
|
},
|
|
|
|
/**
|
|
* 根据时间基准点和角色查找定期任务
|
|
* @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, fn) {
|
|
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();
|
|
}
|
|
if (this.tasks.length && fn) {
|
|
fn(this);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 生成getTasks所用的参数
|
|
* @param {object} query getTasks传递的参数
|
|
*/
|
|
generateGetTaskParam(query) {
|
|
const { roleId, timeNode, timeUnit, projectId } = this;
|
|
return {
|
|
roleId,
|
|
timeNode: query.timeNode || timeNode,
|
|
timeUnit: query.timeUnit || timeUnit,
|
|
queryNum: query.queryNum || 3,
|
|
queryType: query.queryType,
|
|
projectId,
|
|
};
|
|
},
|
|
|
|
// 设置时间轴向上的空数据
|
|
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));
|
|
if (arr && arr.length) {
|
|
oldTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}]
|
|
}
|
|
});
|
|
|
|
oldTasks = flatten(oldTasks); // 1维拍平
|
|
|
|
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')) {
|
|
console.log('切项目了');
|
|
this.$t.storage.setStorageSync('roleId', '');
|
|
}
|
|
// TODO
|
|
this.getProjectById({ projectId: options.p, num: 0 }); // 根据项目id获取项目信息
|
|
// 查询医院是否填写了调查问卷
|
|
this.handleQueryNotWrite(options.p);
|
|
}
|
|
},
|
|
|
|
// 分享链接来的初始化
|
|
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.log('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();
|
|
},
|
|
|
|
/**
|
|
* 查询医院是否填写了调查问卷
|
|
* @param {string} projectId 项目id
|
|
*/
|
|
async handleQueryNotWrite(projectId) {
|
|
try {
|
|
const param = { projectId };
|
|
const data = await this.$u.api.queryNotWrite(param);
|
|
console.log('data: ', data);
|
|
this.questionnaires = data;
|
|
} catch (error) {
|
|
console.error('error: ', error);
|
|
}
|
|
},
|
|
|
|
// 打开问卷
|
|
openQuestionnaire(value) {
|
|
this.chooseItem = value;
|
|
if (this.count === 1 || this.chooseItem) {
|
|
window.location.href = 'https://www.baidu.com/';
|
|
} else {
|
|
this.showQuestionList = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.border-b {
|
|
border-bottom: 1px solid #e4e7ed;
|
|
}
|
|
</style>
|
|
|