8 changed files with 272 additions and 256 deletions
@ -1,25 +1,215 @@ |
|||
<template> |
|||
<view class="wrap bg-white px-2"> |
|||
<role-list @getTasks="getTasks" /> |
|||
<view class="home-box u-skeleton"> |
|||
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
|||
<view class="tab-box"> |
|||
<view :key="index" @click="changeIndex(item.id, index)" class="tab-item" v-for="(item, index) in roles"> |
|||
<view :class="setColor(item.mine, item.id)" class="tab-children u-skeleton-fillet">{{ item.name }}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import RoleList from './component/RoleList'; |
|||
import { mapState, mapMutations, mapActions } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'Roles', |
|||
components: { RoleList }, |
|||
data() { |
|||
return {}; |
|||
return { |
|||
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, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) }, |
|||
|
|||
watch: { |
|||
visibleRoles(val) { |
|||
if (val && val.length) { |
|||
this.roles = [...this.visibleRoles]; |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
if (!this.visibleRoles || !this.visibleRoles.length) { |
|||
this.loading = true; |
|||
} else { |
|||
this.roles = [...this.visibleRoles]; |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
getTasks(query) { |
|||
console.log('query: ', query); |
|||
this.$emit('getTasks', query); |
|||
...mapMutations('home', ['setRoleId', 'setTasks']), |
|||
...mapActions('home', ['handleRegularTask']), |
|||
|
|||
// 设置滚动位置 |
|||
setCurrentRole(index) { |
|||
const data = document.getElementsByClassName('tab-children'); |
|||
// 获取当前所有子元素 并插入到 tabList 列表中 |
|||
data.forEach(item => { |
|||
this.tabList.push({ |
|||
width: item.clientWidth, |
|||
left: item.offsetLeft, |
|||
}); |
|||
}); |
|||
//当前滚动的位置 |
|||
let left = 0; |
|||
let screenWidth = window.screen.width; |
|||
for (let i = 0; i < index; i++) { |
|||
left += this.tabList[i].width + this.tabList[i].left * 2; |
|||
} |
|||
left += this.tabList[index].width; |
|||
this.scrollLeft = left - screenWidth / 2; |
|||
}, |
|||
|
|||
// 切换角色 |
|||
async changeIndex(id, index) { |
|||
try { |
|||
this.setRoleId(id); |
|||
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
|||
this.setCurrentRole(index); |
|||
// 清空定期任务数据 |
|||
this.setTasks([]); |
|||
// 根据时间基准点和角色查找定期任务 |
|||
await this.$emit('getTasksByRole'); |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
}, |
|||
|
|||
// 设置文字颜色 |
|||
setColor(mine, id) { |
|||
const { roleId } = this; |
|||
if (mine === '1' && roleId === id) { |
|||
return 'default-tab-choice'; |
|||
} |
|||
if (mine === '1' && roleId !== id) { |
|||
return 'default-tab-item'; |
|||
} |
|||
if (mine === '0' && roleId === id) { |
|||
return 'tab-choice'; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
<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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// // 删除 底部滚动条 |
|||
/* #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> |
|||
|
|||
@ -1,225 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<view class="home-box u-skeleton"> |
|||
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
|||
<view class="tab-box"> |
|||
<view :key="index" @click="changeIndex(item.id, index)" class="tab-item" v-for="(item, index) in roles"> |
|||
<view :class="setColor(item.mine, item.id)" class="tab-children u-skeleton-fillet">{{ item.name }}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations, mapActions } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'RoleList', |
|||
data() { |
|||
return { |
|||
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, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) }, |
|||
|
|||
watch: { |
|||
visibleRoles(val) { |
|||
if (val && val.length) { |
|||
this.roles = [...this.visibleRoles]; |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
if (!this.visibleRoles || !this.visibleRoles.length) { |
|||
this.loading = true; |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('home', ['setRoleId']), |
|||
...mapActions('home', ['handleRegularTask']), |
|||
|
|||
setCurrentRole(index) { |
|||
const data = document.getElementsByClassName('tab-children'); |
|||
// 获取当前所有子元素 并插入到 tabList 列表中 |
|||
data.forEach(item => { |
|||
this.tabList.push({ |
|||
width: item.clientWidth, |
|||
left: item.offsetLeft, |
|||
}); |
|||
}); |
|||
//当前滚动的位置 |
|||
let left = 0; |
|||
let screenWidth = window.screen.width; |
|||
for (let i = 0; i < index; i++) { |
|||
left += this.tabList[i].width + this.tabList[i].left * 2; |
|||
} |
|||
left += this.tabList[index].width; |
|||
this.scrollLeft = left - screenWidth / 2; |
|||
}, |
|||
|
|||
async changeIndex(id, index) { |
|||
this.setRoleId(id); |
|||
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
|||
this.setCurrentRole(index); |
|||
// 根据时间基准点和角色查找定期任务 |
|||
await this.$emit('getTasks', { queryType: 0 }); |
|||
await this.$emit('getTasks', { queryType: 1 }); |
|||
console.log('this.tasks && this.tasks.length: ', this.tasks && this.tasks.length); |
|||
if (this.tasks && this.tasks.length) { |
|||
debugger; |
|||
// 查上下的任务 |
|||
const upQuery = { |
|||
timeNode: +this.tasks[0].planStart, |
|||
queryType: 0, |
|||
queryNum: 6, |
|||
}; |
|||
console.log('upQuery: ', upQuery); |
|||
await this.$emit('getTasks', upQuery); |
|||
const downQuery = { |
|||
timeNode: +this.tasks[this.tasks.length - 1].planStart, |
|||
queryType: 0, |
|||
queryNum: 6, |
|||
}; |
|||
console.log('downQuery: ', downQuery); |
|||
await this.$emit('getTasks', downQuery); |
|||
} |
|||
}, |
|||
|
|||
// 设置文字颜色 |
|||
setColor(mine, id) { |
|||
const { roleId } = this; |
|||
if (mine === '1' && roleId === id) { |
|||
return 'default-tab-choice'; |
|||
} |
|||
if (mine === '1' && roleId !== id) { |
|||
return 'default-tab-item'; |
|||
} |
|||
if (mine === '0' && roleId === id) { |
|||
return 'tab-choice'; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// // 删除 底部滚动条 |
|||
/* #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> |
|||
Loading…
Reference in new issue