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.
334 lines
9.3 KiB
334 lines
9.3 KiB
<template>
|
|
<view class="px-2 bg-white wrap">
|
|
<view class="home-box u-skeleton">
|
|
<scroll-view :enable-flex="true" :scroll-left="data.scrollLeft" :throttle="false" scroll-with-animation scroll-x @scroll="scroll">
|
|
<view class="tab-box">
|
|
<!-- 角色项
|
|
default-tab-choice 是 我的角色 && 当前展示
|
|
default-tab-item 是 我的角色 && 当前不展示
|
|
tab-choice 不是我的 && 当前展示
|
|
-->
|
|
<view
|
|
:class="{
|
|
'default-tab-choice': item.mine == 1 && roleId === item.id,
|
|
'default-tab-item': item.mine == 1 && roleId !== item.id,
|
|
'tab-choice': item.mine == 0 && roleId === item.id,
|
|
}"
|
|
:key="index"
|
|
@click="changeRole(item.id, index)"
|
|
class="tab-item relative"
|
|
v-for="(item, index) in data.roles"
|
|
>
|
|
<view class="tab-children relative u-skeleton-fillet u-font-14">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="remind-box absolute bg-red-500 text-white text-xs" v-if="item.remindNum">{{
|
|
item.remindNum > 99 ? '99+' : item.remindNum
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 骨架屏 -->
|
|
<u-skeleton :animation="true" :loading="data.loading" bg-color="#fff"></u-skeleton>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, computed, watch, watchEffect, onMounted, nextTick } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import useGetTasks from '@/hooks/project/useGetTasks';
|
|
|
|
const data = reactive({
|
|
tabIndex: 0, // 当前访问的 index 默认为0
|
|
tabList: [], // tab dom节点集合
|
|
scrollLeft: 0, // scrollview需要滚动的距离
|
|
loading: false, // 是否显示骨架屏组件
|
|
roles: [
|
|
{ id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 },
|
|
{ id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 },
|
|
],
|
|
roleLeft: 0,
|
|
clickNum: 0,
|
|
firstClickTime: 0,
|
|
secClickTime: 0,
|
|
});
|
|
|
|
const store = useStore();
|
|
const getTasksHook = useGetTasks();
|
|
const projectId = computed(() => store.getters['project/projectId']);
|
|
const visibleRoles = computed(() => store.state.role.visibleRoles);
|
|
const roleId = computed(() => store.state.role.roleId);
|
|
const allTasks = computed(() => store.state.task.allTasks); // 所有任务
|
|
const remindData = computed(() => store.state.socket.remindData); // 小红点
|
|
const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId); // 前需要定位到的任务id
|
|
|
|
watch(visibleRoles, () => {
|
|
if (remindData.value && visibleRoles.value) {
|
|
visibleRoles.value.forEach(role => {
|
|
role.remindNum = 0;
|
|
remindData.value.forEach(remind => {
|
|
const remind_data = JSON.parse(remind.data);
|
|
if (projectId.value === remind_data.data.projectId && remind_data.data.roleId === role.id) {
|
|
role.remindNum++;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
if (visibleRoles.value && visibleRoles.value.length) {
|
|
data.roles = visibleRoles.value;
|
|
data.loading = false;
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (!visibleRoles.value || !visibleRoles.value.length) {
|
|
data.loading = true;
|
|
} else {
|
|
data.roles = visibleRoles.value;
|
|
}
|
|
|
|
nextTick(() => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.selectAll('.tab-children')
|
|
.boundingClientRect(res => {
|
|
if (res.length) {
|
|
data.roleLeft = res[0].left;
|
|
}
|
|
})
|
|
.exec();
|
|
});
|
|
});
|
|
|
|
function scroll(e) {
|
|
data.scrollLeft = e.detail.scrollLeft;
|
|
}
|
|
|
|
// 设置滚动位置
|
|
function setCurrentRole(index) {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.selectAll('.tab-children')
|
|
.boundingClientRect(res => {
|
|
res.forEach(item => {
|
|
data.tabList.push({ width: item.width });
|
|
});
|
|
})
|
|
.exec();
|
|
|
|
const system = uni.getSystemInfoSync(); // 获取系统信息
|
|
// 屏幕宽度
|
|
const screenWidth = system.windowWidth;
|
|
// 当前滚动的位置
|
|
let left = 0;
|
|
for (let i = 0; i < index; i++) {
|
|
left += data.tabList[i].width + (data.roleLeft - 8) * 2;
|
|
}
|
|
|
|
left += (data.tabList[index].width + (data.roleLeft - 8) * 2) / 2;
|
|
if (left > screenWidth) {
|
|
data.scrollLeft = left - screenWidth + screenWidth / 2;
|
|
} else if (left > screenWidth / 2) {
|
|
data.scrollLeft = left - screenWidth / 2;
|
|
} else if (left < screenWidth / 2) {
|
|
data.scrollLeft = 0;
|
|
}
|
|
}
|
|
|
|
// 清除插件script
|
|
function clearPluginScript() {
|
|
try {
|
|
const scripts = document.querySelectorAll('script[data-type=plugin]');
|
|
for (let i = 0; i < scripts.length; i++) {
|
|
document.body.removeChild(scripts[i]);
|
|
}
|
|
} catch (error) {
|
|
console.error('clearPluginScript error: ', error);
|
|
}
|
|
}
|
|
|
|
// 切换角色
|
|
// 查任务这里不用管 project监听了roleId的变化
|
|
// 时间基准点不用管 project监听了roleId 里处理了
|
|
function changeRole(id, index) {
|
|
try {
|
|
data.clickNum = data.clickNum === 0 ? 1 : data.clickNum + 1;
|
|
|
|
if (data.clickNum === 1) {
|
|
data.firstClickTime = new Date().getTime();
|
|
|
|
// 清除多余的script
|
|
// clearPluginScript();
|
|
nextTick(() => {
|
|
store.commit('role/setRoleId', id);
|
|
store.commit('role/setRoleIndex', index);
|
|
// 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
|
|
setCurrentRole(index);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
data.clickNum = data.firstClickTime = data.secClickTime = 0;
|
|
}, 500);
|
|
} else if (data.clickNum === 2) {
|
|
data.secClickTime = new Date().getTime();
|
|
|
|
if (data.secClickTime - data.firstClickTime < 500) {
|
|
const arr = [];
|
|
remindData.value.forEach(item => {
|
|
const remind_data = JSON.parse(item.data);
|
|
if (remind_data.data.taskType === 1 && remind_data.data.roleId === roleId.value) {
|
|
arr.push(item);
|
|
}
|
|
});
|
|
|
|
let nextLocationTaskId = '';
|
|
if (arr.length > 0) {
|
|
for (let i = 0; i < arr.length; i++) {
|
|
const first_option = JSON.parse(arr[0].data);
|
|
const curr_option = JSON.parse(arr[i].data);
|
|
|
|
if (!currLocationTaskId.value) {
|
|
nextLocationTaskId = first_option.data.taskId;
|
|
break;
|
|
}
|
|
|
|
if (curr_option.data.taskId === currLocationTaskId.value) {
|
|
if (i === arr.length - 1) {
|
|
nextLocationTaskId = first_option.data.taskId;
|
|
} else {
|
|
const next_option = JSON.parse(arr[i + 1].data);
|
|
nextLocationTaskId = next_option.data.taskId;
|
|
}
|
|
}
|
|
}
|
|
// store.commit('task/setTimeLineType', timeLineType.value === 1 ? 2 : 1);
|
|
}
|
|
|
|
store.commit('socket/setCurrLocationTaskId', nextLocationTaskId);
|
|
store.commit('task/clearTasks'); // 清空定期任务
|
|
store.commit('task/clearRealTasks'); // 清空真实任务数据
|
|
store.commit('task/setUpNextPage', 1);
|
|
store.commit('task/setDownNextPage', 1);
|
|
|
|
const params = { pageNum: 1, taskId: nextLocationTaskId, timeNode: new Date().getTime() };
|
|
getTasksHook.getTasks(params);
|
|
}
|
|
|
|
data.clickNum = data.firstClickTime = data.secClickTime = 0;
|
|
}
|
|
} catch (error) {
|
|
console.error('role.vue changeRole error: ', error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-box {
|
|
// 对此盒子进行 sticky 粘性定位
|
|
position: sticky;
|
|
top: 0;
|
|
background: #fff; // 设置背景 否则会透明
|
|
|
|
/* #ifdef H5 */
|
|
//粘性定位 在h5下 加 原生头部高度 44px
|
|
top: 88rpx;
|
|
/* #endif */
|
|
|
|
.tab-box {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
// height: 84rpx;
|
|
|
|
.tab-item {
|
|
// width: 20%;
|
|
// height: 84rpx;
|
|
padding: 20rpx 24rpx;
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
transition-property: background-color, width;
|
|
}
|
|
|
|
.default-tab-item {
|
|
color: $roleChoiceColor;
|
|
}
|
|
|
|
.default-tab-choice {
|
|
//当前选中 基于此类名给与底部选中框
|
|
position: relative;
|
|
color: $roleChoiceColor;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.default-tab-choice:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -20rpx;
|
|
width: 100%;
|
|
height: 6rpx;
|
|
border-radius: 2rpx;
|
|
background: $roleChoiceColor;
|
|
}
|
|
|
|
.tab-choice {
|
|
//当前选中 基于此类名给与底部选中框
|
|
position: relative;
|
|
color: $uni-color-primary;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-choice:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -20rpx;
|
|
width: 100%;
|
|
height: 6rpx;
|
|
border-radius: 2rpx;
|
|
background: $uni-color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.remind-box {
|
|
top: 0;
|
|
right: -5px;
|
|
padding: 0 3px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
text-align: center;
|
|
line-height: 16px;
|
|
border-radius: 8px;
|
|
font-weight: 100;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
// // 删除 底部滚动条
|
|
/* #ifndef APP-NVUE */
|
|
::-webkit-scrollbar,
|
|
::-webkit-scrollbar,
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* #endif */
|
|
/* #ifdef H5 */
|
|
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
|
|
scroll-view ::v-deep ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.skeleton {
|
|
height: 44rpx;
|
|
}
|
|
</style>
|
|
|