OfficeApp/pages/oaHome/oaHome.vue
2023-08-19 14:04:55 +08:00

802 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="oa_home" style="oaColor">
<!-- <image class="header_bg" src="../../static/img/home/head-bg.png"></image> -->
<view
class="home_header"
:class="!ApproveList.length > 0 ? 'home_header_no_data' : ''"
>
<!-- #ifdef APP-PLUS||H5 -->
<view style="height: var(--status-bar-height)"></view>
<view style="height: 100rpx"></view>
<!-- #endif -->
<view class="my_info">
<view class="head_img">
<view class="img_box">
<u--image
:showLoading="true"
width="150.28rpx"
height="150.28rpx"
:src="myOaInfo.avatar || '../../static/img/public/avatar.png'"
shape="circle"
></u--image>
</view>
<text class="nickname">工作证: {{ myOaInfo.nickname }}</text>
<text>身份: {{ myOaInfo.admin_id ? "超级管理员" : "普通用户" }}</text>
</view>
<view v-if="!$store.state.app.token" @click="login" class="mesg_box">
<view class="name">
<text class="nickname">立即登录</text>
</view>
<view class="duty"> 登录后可查看更多 </view>
</view>
<!-- <view v-else class="mesg_box">
<view class="name">
<text class="nickname">姓名:{{ myOaInfo.nickname }}</text>
<text>{{ myOaInfo.admin_id ? "超级管理员" : "普通用户" }}</text>
</view>
<view class="duty">
电话:{{ myOaInfo.account }}<br />
公司:<text v-if="myOaInfo.company">{{
myOaInfo.company.company_name
}}</text><br />
公司类型:<text v-if="myOaInfo.company">{{
myOaInfo.company.company_type_name
}}</text><br />
</view>
</view> -->
</view>
<!-- 占位 -->
<view style="height: 130rpx"></view>
<!-- 任务状态 -->
<!-- <view class="task_panel">
<block v-for="(item,index) in assessData" :key="index">
<view class="task_item">
<view class="plan">{{ item.num }}</view>
<view class="">{{ item.name }}</view>
</view>
</block>
</view> -->
<view
class="backlog"
:class="!ApproveList.length > 0 ? 'backlog_no_data' : ''"
>
<view class="head_title flex_a_c_j_sb">
<view class="title">公告列表</view>
<view class="flex_a_c" @click="navTo('/subpkg/noticeList/noticeList')"
>更多
<view class="iconfont icon-you">
<uni-icons type="forward"></uni-icons>
</view>
</view>
</view>
<block v-if="ApproveList.length > 0">
<view
class="backlog_item flex_a_c_j_sb"
v-for="(item, index) in ApproveList.slice(0, 2)"
:key="index"
@click="clickNotice(item.id)"
>
<view class="text">
<text class="text_time">{{
item.create_time.substring(0, 10)
}}</text>
{{ item.title }}
</view>
<i class="iconfont icon-you"
><uni-icons type="forward"></uni-icons
></i>
</view>
</block>
<view v-else class="backlog_no flex_a_c_j_sb">
<view class="text">暂无更多消息</view>
<i class="iconfont icon-you"
><uni-icons type="forward"></uni-icons
></i>
</view>
</view>
</view>
<view class="my_task">
<view class="task_title flex_a_c_j_sb">
<view class="title">工作管理</view>
<view class="flex_a_c"
>更多
<view class="iconfont icon-you">
<uni-icons type="forward"></uni-icons>
</view>
</view>
</view>
</view>
<view class="fast_track">
<block v-for="(item, index) in oaHomeData" :key="index">
<view class="track_item" @click="navTwo(item.url, index)">
<u--image
:showLoading="true"
:src="item.icon"
width="77.19rpx"
height="77.19rpx"
></u--image>
<view class="title">{{ item.text }}</view>
</view>
</block>
</view>
<view class="my_task">
<view class="task_title flex_a_c_j_sb">
<view class="title">配送信息</view>
<view class="flex_a_c" @click="goOrderList"
>更多
<view class="iconfont icon-you">
<uni-icons type="forward"></uni-icons>
</view>
</view>
</view>
<!-- <block v-if="myTaskList.length>0">
<taskCard></taskCard>
</block> -->
<view v-if="orderList.length > 0">
<globalPopup ref="globalPopup"></globalPopup>
<logistiBriefCard
v-for="(item, index) in orderList"
:key="index"
:goodsInfo="item"
>
</logistiBriefCard>
</view>
<view v-else class="no_task">
<view class="title">暂无配送信息</view>
<view class="tips" v-if="!$store.state.app.token"
>登录后查看配送信息详情</view
>
</view>
<!-- <view class="head_title flex_a_c_j_sb">
<view class="">我的任务</view>
<view class="flex_a_c" @click="test">更多 <view class="iconfont icon-you"></view>
</view>
</view>
<block v-for="(item,index) in myTaskList" :key="index">
<view class="task_list" @click="naviTaskDetails(item.id)">
<view class="title flex_a_c_j_sb">
<view class="flex_a_c">
<view v-if="item.priority==4" class="tag">{{ item.priority_name }}</view>
<view v-else class="tag1">{{ item.priority_name }}</view>
<view class="text">{{ item.title }}</view>
</view>
<view v-if="item.flow_status==1" class="if_take take1">{{ item.flow_name }}</view>
<view v-else-if="item.flow_status==2" class="if_take take2">{{ item.flow_name }}</view>
<view v-else="item.flow_status==3" class="if_take take3">{{ item.flow_name }}</view>
</view>
<view class="describe">{{ item.content }}</view>
<view class="task_deta flex_a_c_j_sb">
<view class="">任务性质{{ item.is_bug }}</view>
<view class="">计划完成日期{{ item.end_time }}</view>
</view>
</view>
</block> -->
</view>
<view class="no_login" @click="login" v-if="!$store.state.app.token">
<view class="view">
<view class="text">登录里海OA,开启线上便捷办公</view>
<button class="btn">立即登录</button>
</view>
</view>
<!-- <tabbar></tabbar> -->
</view>
</template>
<script>
import logistiBriefCard from "@/components/logistiComptent/logistiCard/logistiBriefCard.vue"
import globalPopup from "@/components/GlobalPopup/GlobalPopup.vue"
import {
getList
} from "@/api/logistics.js"
import {
Toast
} from '@/libs/uniApi.js'
import {
oaHomeData
} from '@/static/server/server.js'
import {
noticeList
} from "@/api/notice.js"
// import tabbar from '../components/tabbar'
import {
getIndexListAPI,
getTaskListAPI,
getMyTaskListAPI,
getApproveListAPI,
getUserIndexAPI
} from '@/api/oaApi.js'
//#ifdef APP-PLUS
var jpushModule = uni.requireNativePlugin("JG-JPush");
// #endif
export default {
components: {
// tabbar
logistiBriefCard,
globalPopup
},
data () {
return {
notArr: [],
orderList: [],
oaHomeData: [],
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
assessData: [{
num: '0',
name: '任务'
},
{
num: '0',
name: '已完成'
},
{
num: '0',
name: '未完成'
},
{
num: '0%',
name: '完成率'
},
],
project: {},
task: {},
page: 1,
myTaskList: [],
flowState: '#47B347', // 任务状态
priority: '', // 任务紧急度
myOaInfo: {
avatar: '',
nickname: '',
mobile: '',
did_name: '',
label_name: '',
},
ApproveList: []
}
},
onReady () {
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#3175f9'
})
},
onLoad () {
//#ifdef APP-PLUS
const audioContext = uni.createInnerAudioContext()
audioContext.volume = 1
audioContext.src = '../../static/mp3/order.mp3'
let that = this
jpushModule.addNotificationListener(function (result) {
if (!that.notArr.includes(result.messageID)) {
that.$refs.globalPopup.showPopu();
that.getOrderList()
console.log("idnex的")
audioContext.play()
}
that.notArr.push(result.messageID)
})
// #endif
},
onShow () {
// this.getUserIndex()
// this.getIndexList()
this.getApproveList()
this.initUserInfo()
this.showToask()
this.initOaHomeDada()
this.getOrderList()
},
computed: {},
methods: {
test () {
this.$refs.globalPopup.showPopu();
},
// test() {
// wx.chooseMessageFile({
// count: 1, //限制选择的文件数量
// type: 'all', //非图片和视频的文件,不选默认为all
// //type:'video',//视频
// //type:'image',//图片
// success(res) {
// const tempFilePaths = res.tempFiles
// console.log(res);
// }
// })
// },
async getOrderList () {
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id || ""
let res = await getList({
courier_id: id
// courier_id: 167
})
this.orderList = res.data.data
},
goOrderList () {
uni.navigateTo({
url: "/pages/logistics/index"
})
},
initUserInfo () {
this.$store.state.app.userInfo ? this.myOaInfo = this.$store.state.app.userInfo : this.myOaInfo.avatar =
'';
},
initOaHomeDada () {
if (this.$store.state.app.userInfo.admin_id == 0) { // 如果用户不是管理员
let arr = oaHomeData.filter(item => !item.admin); //过滤掉管理员专属页面
this.oaHomeData = arr;
} else {
// this.oaHomeData = oaHomeData;
let arr = oaHomeData.filter(item => !item.captain); //过滤掉普通用户专属页面
this.oaHomeData = arr;
}
if (this.$store.state.app.userInfo?.company?.company_type_name == '平台公司') {
this.oaHomeData = this.oaHomeData.filter(item => {
return item.text == '人员管理' ? false : true;
})
}
// 判断是否需要显示更多按钮
if (this.oaHomeData >= 8) {
this.oaHomeData[7] = this.oaHomeData[this.oaHomeData.length - 1];
} else {
this.oaHomeData.splice(this.oaHomeData.length - 1, 1)
}
},
async getApproveList () {
const res = await noticeList({
keyword: '',
page_no: 1,
page_size: 2
})
this.ApproveList = res.data.lists
},
async getIndexList () {
const {
project,
task
} = await getIndexListAPI()
console.log(task, '222');
this.assessData[0].num = project.count
this.assessData[1].num = project.count_ok
this.assessData[2].num = project.count_no
this.assessData[3].num = project.count_lv + '%'
this.assessData[4].num = task.count
this.assessData[5].num = task.count_ok
this.assessData[6].num = task.count_no
this.assessData[7].num = task.count_lv + '%'
this.myTaskList = task.list
},
async getMyTask () {
let data = {
page: this.page,
limit: 10
}
const res = getMyTaskListAPI(data)
},
naviTaskDetails (id) {
uni.navigateTo({
url: `/pages/views/task_details?id=${id}`
})
},
navTo (url) {
url ?
uni.navigateTo({
url: url,
fail () {
uni.switchTab({
url: url
})
}
}) : Toast('暂未开放')
},
navTwo (url, key) {
let role_id = this.$store.state.app?.userInfo?.admin?.role_id || null;
var arr = [3, 6];
if (role_id && role_id[0] == 9) {
if (arr.indexOf(key) == -1) {
Toast('请先成立公司后开放')
return false
}
}
this.navTo(url);
},
// 点击公告
clickNotice (e) {
uni.navigateTo({
url: `/pages/oaNews/oaNews?id=${e}`
})
},
// 判断当前是否登录,显示任务及完成率
showToask () {
if (!this.$store.state.app.token) {
this.assessData = this.assessData.map(item => {
item.num = '*';
return item;
})
} else {
// 新增接口后要替换为接口
this.assessData = this.assessData.map(item => {
item.num = '0';
return item;
})
}
},
login () {
uni.navigateTo({
url: '/pages/oaLogin/oaLogin'
})
},
async getUserIndex () {
const res = await getUserIndexAPI()
this.myOaInfo = res
}
},
onPullDownRefresh () {
// this.getIndexList()
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.oa_home {
padding-bottom: 120rpx;
}
.header_bg {
position: absolute;
width: 100%;
// z-index: -1;
}
.home_header {
position: relative;
padding: 28rpx;
// height: 607.02rpx;
// height: 480.02rpx;
width: 100%;
// background-color: $theme-oa-color;
margin-bottom: 133.33rpx;
background-color: $theme-oa-color;
border-radius: 0 0 30rpx 30rpx;
.head_img {
background-color: #ff7c32;
width: 100%;
border-radius: 70rpx 50rpx 50rpx 70rpx;
height: 130.28rpx;
display: flex;
justify-content: space-between;
padding-right: 50rpx;
line-height: 130rpx;
color: white;
font-size: 34rpx;
.img_box {
width: 150.28rpx;
height: 150.28rpx;
translate: -10rpx -10rpx;
border: 1px dashed #707070;
}
// font-we
}
.my_info {
.mesg_box {
color: #fff;
margin-left: 31.58rpx;
.nickname {
font-size: 32rpx;
font-weight: 500;
margin-right: 30rpx;
}
.duty {
margin-top: 10.53rpx;
}
}
}
.task_panel {
color: #fff;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
text-align: center;
padding-bottom: 110rpx;
.task_item {
margin-top: 42.11rpx;
.plan {
width: 173.68rpx;
font-size: 38.6rpx;
margin-bottom: 21.05rpx;
}
}
}
.backlog {
position: absolute;
left: 50%;
bottom: -101.75rpx;
transform: translate(-50%);
width: 694.74rpx;
background: #ffffff;
border-radius: 12px;
padding: 28.07rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 25rpx;
font-weight: 400;
.title {
font-size: 32rpx;
font-weight: 500;
}
&_item {
margin-top: 19.3rpx;
color: #666666;
.text {
font-size: 28.04rpx;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 使用省略号代表被截断的文本 */
width: 580rpx;
/* 设置元素宽度,根据需要进行调整 */
.text_time {
display: inline-block;
background-color: #ff8c1a;
color: white;
padding: 5rpx 10rpx;
margin-right: 10rpx;
border-radius: 15rpx;
}
// &::before {
// content: "公告";
// display: inline-block;
// color: #ff8c1a;
// padding: 2px 8px;
// border-radius: 4px;
// border: 1px solid #ff8c1a;
// margin-right: 14.04rpx;
// }
}
}
&_no {
margin-top: 19.3rpx;
color: #666666;
.text {
font-size: 28.04rpx;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 使用省略号代表被截断的文本 */
width: 580rpx;
/* 设置元素宽度,根据需要进行调整 */
&::before {
content: none;
}
}
}
}
.backlog_no_data {
bottom: -70rpx;
}
}
.home_header_no_data {
margin-bottom: 93.33rpx;
}
.fast_track {
width: 694rpx;
// height: 331rpx;
display: flex;
flex-wrap: wrap;
justify-content: left;
align-content: space-between;
margin: 0 auto;
padding: 15rpx 38.6rpx;
background-color: #fff;
border-radius: 12px;
.track_item {
width: 154.39rpx;
font-size: 24.56rpx;
margin: 25rpx 0;
display: flex;
flex-direction: column;
align-items: center;
.title {
margin-top: 14.04rpx;
}
}
}
.my_task {
width: 694.74rpx;
margin: 0 auto;
// margin-top: 31.58rpx;
// background-color: #fff;
border-radius: 12px;
// padding: 28.07rpx;
.no_task {
width: 694rpx;
height: 140rpx;
padding: 28rpx;
background: #ffffff;
border-radius: 21rpx 21rpx 21rpx 21rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.title {
font-size: 28rpx;
font-weight: 500;
color: #000000cc;
line-height: 35rpx;
}
.tips {
font-size: 25rpx;
font-weight: 400;
color: #333333ff;
line-height: 35rpx;
}
}
.task_title {
font-size: 25rpx;
font-weight: 400;
padding: 28rpx;
.title {
font-size: 32rpx;
font-weight: 500;
}
}
.task_list {
height: 196.49rpx;
border-bottom: 1px solid #cccccc;
padding: 21.05rpx 0;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
.tag {
color: #f24848;
font-size: 24.56rpx;
padding: 0 7.02rpx;
margin-right: 14.04rpx;
background: #ffe4e4;
border-radius: 4px;
}
.tag1 {
color: #3274f9;
font-size: 24.56rpx;
padding: 0 7.02rpx;
margin-right: 14.04rpx;
background: #e4edff;
border-radius: 4px;
}
.text {
font-size: 28.07rpx;
width: 403.51rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.if_take {
font-size: 28.07rpx;
text-align: center;
line-height: 49.12rpx;
width: 115.79rpx;
height: 49.12rpx;
border-radius: 100px;
}
.take1 {
color: #47b347;
background: #dffcdf;
}
.take2 {
color: #3274f9;
background: #e4edff;
}
.take3 {
color: #999999;
background: #f5f5f5;
}
}
.describe {
font-size: 24.56rpx;
}
.task_deta {
color: #999;
font-size: 24.56rpx;
}
}
}
.no_login {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 112rpx;
/* #ifdef H5 */
height: 212rpx;
/* #endif */
background: rgba(#333333, 0.4);
border-radius: 14rpx 14rpx 0rpx 0rpx;
padding: 28rpx 28rpx;
.view {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.text {
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
}
.btn {
width: 158rpx;
height: 60rpx;
background: #3274f9;
border-radius: 30rpx 30rpx 30rpx 30rpx;
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>