28 changed files with 717 additions and 455 deletions
@ -1,9 +1,11 @@ |
|||||
const apiUrl = process.env.VUE_APP_API_URL; |
const apiUrl = process.env.VUE_APP_API_URL; |
||||
const mock = `${apiUrl}/defaultwbs`; |
const mock = `${apiUrl}/defaultwbs`; |
||||
|
const plugin = `${apiUrl}/pluginshop/plugin`; |
||||
|
|
||||
const install = (Vue, vm) => { |
const install = (Vue, vm) => { |
||||
vm.$u.api = { ...vm.$u.api } || {}; |
vm.$u.api = { ...vm.$u.api } || {}; |
||||
vm.$u.api.getPlugin = param => vm.$u.post(`${mock}/plugin`, { param }); |
vm.$u.api.getPlugin = param => vm.$u.post(`${mock}/plugin`, param); |
||||
|
vm.$u.api.getOtherPlugin = param => vm.$u.post(`${plugin}/query`, param); |
||||
}; |
}; |
||||
|
|
||||
export default { install }; |
export default { install }; |
||||
|
|||||
@ -1,25 +0,0 @@ |
|||||
@font-face { |
|
||||
font-family: 'custom-icon'; /* Project id 2685595 */ |
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVsAAsAAAAACgAAAAUfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqGfIV2ATYCJAMQCwoABCAFhQsHURurCMiuMYUxPrWYbZJ11AENNuDWinu9B3343wTPy36/c+WrJmkq4NUbnswqIdo6oyVCh0pjZM3kN/Sb+9vabmY0s5OZwYtCdsO5QNnpi6ia8CLyL4qgGGt7b54+glfxrBKtmXWGqFaCp0B7SiATEr1ANPXvGzvOkmQsS994MvzlXijX3tRv70+uPsD5P2a6+rgS+DYAiUqMLBrYLNryeeZlUwrdgcsp3zK86iB34z4IiBvJJR7XVDYCxyMKmYEvKb1YEAXLkZ6hgJKT8gqiiArC0K2pSryAEPRW3AB48n5e/iSGEiqUpF9oa4fQglNvlF+/krv/O0w+Mra/NDxdQQgY6M1MLnvV2nOSwNYjES+ySM0BlCVK0Wvbz9vn/6foq+JGjX95YJRAMnRukoAZju0YzSLB8HWdBMXXc/oJcJ3MjoIIpAsgJwhUvkUYmwyUFcbgMUNP8NZs7bxRHjnzp3oxW69OvXx796hdkdpN5y5Ebxkdwyy0i/vNo9wbK1Xk1tF54gvn5PfeNWr37ctTr8YwJ4XR/NAFC9xLZaNP2FbujgGf9ZwyD3DnQc33oheKon7aLHNKrdlOcW+0bV5gW7ibN8+jySFrJfPtigKKzb6vTcXsU1BaIFpe6HwCu/HkmhO2hddjq6Os03jJqjnAq0/wSUKsCLT6KWyVajV+esn9acKTJM832i45UpN9vEPRUT/rJt1Vl7sTtltjd1k1fPmx0O7qFsi9o/lcd+Piclq/x9+580euFfJOCmlCHm/aHdDEN/PVN2zf9aPirdu0KH7P0SfDgoYGPQFri6pmqOdydenxe+I+WE4sH5ScnFTZJ+RLfZZHvhxl+quLBcFV4bqiUqj8l3pCPinq2zdJobhZQax0/jn2f2PJLqEkFUKCDGdd67Hz6D/QX4mH+54XSbEkO1wwcsrateiYAnm2zJj4XzyIP9iZJnPb2yQxR7jJ0iyxJGZOZNQb5edFksqISkmx1C8hrsyzYxI92fKrJEUZRVVE8EfIvDkhSo+Dj/vvmGKPBEm+ISJUYzGXqGI63CfMLYviAmXcHlXBldMNmsSZESsm7p81fsPwjGLxrMnDPa52Cvf9K/u+bBkq9nogPMTf6hWWem4in+r5+O+msp5NnqCxc74uZw8BPnaYGyL7iGpFM6qiCGYIzm4BL6ccX5slzxpOHy1i2UhUcchS+VJUpKlS3BzxfVT8lW8BEVPoJtfHVEeU/vg2X8xlNFB4xED/XyMHq8EtAARbEjtvdvYsqQWCpGk26h+cxt/IEQ39nbL/c1x/46efq5IwYTz+IRqY+sd54MMBnGyKATz1lKgWBcCVmPYRGLYoiBsK+MVckPekD2HhPTpEQiGCKqIGTUId6WCEDIFlZBiswbiuOkpvs4eRkFQeNMzEUJTthyrtDZqy+0gHXxEhbMiQYeAH4w4i4biERkws4iCFoBZrGYzpadasM6MQ3WlBrAnXOtdDptNIcUJ6aG6GnEWPS7EEdXyBswSaIdfdCksXk4iQDtNxrAnT9HsxaDSyWDvHtkEaqVsRas+Mi9MVvYmaZk2gCAeiIJAWpsVgGD0ay0znHEJonSwQlgle8XvqQYxORhSuOo8CSzOI47h6MhhMArV4GLKEa4ZmneEqiy6MRAiig1lcrp0eo5mzGjIaNhamvXhSG4iGqLW2sLTLFEcK6aBc9bh80wWvAeL0m3okIhmpSIuvI0TRrSZoRvYm1gwH06zRuOFr7IrwlkFGnIPazkEAAAA=') |
|
||||
format('woff2'); |
|
||||
} |
|
||||
|
|
||||
.custom-icon { |
|
||||
font-family: 'custom-icon' !important; |
|
||||
font-size: 16px; |
|
||||
font-style: normal; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
|
||||
.custom-icon-attachment:before { |
|
||||
content: '\e7e1'; |
|
||||
} |
|
||||
|
|
||||
.custom-icon-moneycollect:before { |
|
||||
content: '\e7cd'; |
|
||||
} |
|
||||
|
|
||||
.custom-icon-C-bxl-redux:before { |
|
||||
content: '\e608'; |
|
||||
} |
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -1,224 +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) { |
|
||||
// 查上下的任务 |
|
||||
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> |
|
||||
@ -0,0 +1,17 @@ |
|||||
|
export default { |
||||
|
timeUnits: [ |
||||
|
// 时间颗粒度
|
||||
|
{ id: 0, value: '毫秒' }, |
||||
|
{ id: 1, value: '秒' }, |
||||
|
{ id: 2, value: '分' }, |
||||
|
{ id: 3, value: '时' }, |
||||
|
{ id: 4, value: '天' }, |
||||
|
{ id: 5, value: '周' }, |
||||
|
{ id: 6, value: '月' }, |
||||
|
{ id: 7, value: '季度' }, |
||||
|
{ id: 8, value: '年' }, |
||||
|
{ id: 9, value: '年代' }, |
||||
|
{ id: 10, value: '世纪' }, |
||||
|
{ id: 11, value: '千年' }, |
||||
|
], |
||||
|
}; |
||||
@ -0,0 +1,56 @@ |
|||||
|
export default { |
||||
|
/** |
||||
|
* 显示toast |
||||
|
* @param {string} title 提示内容 |
||||
|
* @param {number} duration 显示时间 默认2000 |
||||
|
*/ |
||||
|
showToast(title, duration = 2000) { |
||||
|
return uni.showToast({ |
||||
|
title, |
||||
|
icon: 'none', |
||||
|
duration, |
||||
|
mask: true, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 隐藏toast
|
||||
|
hideToast() { |
||||
|
return uni.hideToast(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 显示加载雪花 |
||||
|
* @param {string} title |
||||
|
*/ |
||||
|
showLoading(title) { |
||||
|
return uni.showLoading({ |
||||
|
title, |
||||
|
mask: true, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 隐藏loading
|
||||
|
hideLoading() { |
||||
|
return uni.hideLoading(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 显示modal弹出框 |
||||
|
* @param {string} title 标题 |
||||
|
* @param {string} content 内容 |
||||
|
* @param {boolean} showCancel 是否显示取消按钮 默认true |
||||
|
*/ |
||||
|
showModal(title, content, showCancel = true) { |
||||
|
return new Promise(function (resolve, reject) { |
||||
|
uni.showModal({ |
||||
|
title, |
||||
|
content, |
||||
|
showCancel, |
||||
|
success: ({ confirm, cancel }) => { |
||||
|
confirm && resolve(); |
||||
|
cancel && reject(); |
||||
|
}, |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
}; |
||||
Loading…
Reference in new issue