|
@@ -1,10 +1,10 @@
|
|
<template>
|
|
<template>
|
|
- <div class="OKRList">
|
|
|
|
|
|
+ <div class="OKRList" >
|
|
<!-- <div class="topBox"> </div> -->
|
|
<!-- <div class="topBox"> </div> -->
|
|
<div class="title">
|
|
<div class="title">
|
|
- 我可见的目标
|
|
|
|
|
|
+ OKR广场
|
|
</div>
|
|
</div>
|
|
- <div class="OKRBody">
|
|
|
|
|
|
+ <div class="OKRBody" v-loading="loading">
|
|
<div class="top-opt">
|
|
<div class="top-opt">
|
|
<span class="year">
|
|
<span class="year">
|
|
<el-select v-model="yearValue" clearable placeholder="年份" @change="yearChange">
|
|
<el-select v-model="yearValue" clearable placeholder="年份" @change="yearChange">
|
|
@@ -28,9 +28,10 @@
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</span>
|
|
</span>
|
|
|
|
+
|
|
<span class="nameSearch">
|
|
<span class="nameSearch">
|
|
<el-input
|
|
<el-input
|
|
- placeholder="请输入搜索的名字"
|
|
|
|
|
|
+ placeholder="输入搜索的名字"
|
|
v-model="nameValue"
|
|
v-model="nameValue"
|
|
clearable>
|
|
clearable>
|
|
<el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
|
|
<el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
|
|
@@ -41,7 +42,7 @@
|
|
<el-button type="warning" round @click="search">搜索</el-button>
|
|
<el-button type="warning" round @click="search">搜索</el-button>
|
|
</span> -->
|
|
</span> -->
|
|
</div>
|
|
</div>
|
|
- <div class="listBody" v-if="list.length>0">
|
|
|
|
|
|
+ <div class="listBody" >
|
|
<div class="itemBody" @click="getThisOKR(item)" v-for="(item,index) in list" :key="index" >
|
|
<div class="itemBody" @click="getThisOKR(item)" v-for="(item,index) in list" :key="index" >
|
|
<div class="item">
|
|
<div class="item">
|
|
<div class="item-top">
|
|
<div class="item-top">
|
|
@@ -52,21 +53,41 @@
|
|
</div>
|
|
</div>
|
|
<div class="krlist">
|
|
<div class="krlist">
|
|
<span class="tip">KR</span>
|
|
<span class="tip">KR</span>
|
|
- <span class="num">关键结果<span style="width:10px;display:inline-block"></span> <span class="nums"> {{item.krList.length}}</span> </span>
|
|
|
|
|
|
+ <span class="num">关键结果
|
|
|
|
+ <span style="width:10px;display:inline-block"></span> <span class="nums" v-if="item.krList"> {{ item.krList.length }}</span>
|
|
|
|
+ <span class="nums" v-else> 0</span>
|
|
|
|
+ </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-bottom">
|
|
<div class="item-bottom">
|
|
<span>负责人:{{item.name}}</span>
|
|
<span>负责人:{{item.name}}</span>
|
|
|
|
+ <span>
|
|
|
|
+ <el-tooltip :content="item.follow?'取消关注':'关注'" placement="bottom" effect="dark">
|
|
|
|
+ <img src="../assets/image/followRed.png" alt="" class="follow" v-if="item.follow" @click.stop="followHis(item)">
|
|
|
|
+ <img src="../assets/image/follow.png" alt="" class="follow" v-else @click.stop="followHis(item)">
|
|
|
|
+ </el-tooltip>
|
|
|
|
+
|
|
|
|
+ </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-else>
|
|
|
|
|
|
+ <div v-if="list.length==0">
|
|
<div class="noListData">
|
|
<div class="noListData">
|
|
<img src="../assets/image/nodata.png" alt="" class="nodata">
|
|
<img src="../assets/image/nodata.png" alt="" class="nodata">
|
|
<p class="tip">咦,没有OKR哎~</p>
|
|
<p class="tip">咦,没有OKR哎~</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- <div class="fenye" >
|
|
|
|
+ <el-pagination
|
|
|
|
+ background
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ :total="totalPage"
|
|
|
|
+ :current-page='currentPage'
|
|
|
|
+ >
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
<!-- okr 四象限 -->
|
|
<!-- okr 四象限 -->
|
|
<el-dialog
|
|
<el-dialog
|
|
@@ -126,9 +147,15 @@
|
|
|
|
|
|
<span slot="reference" class="content">
|
|
<span slot="reference" class="content">
|
|
<span class="taskGrade">
|
|
<span class="taskGrade">
|
|
- P{{item.priority}}
|
|
|
|
|
|
+ <!-- P{{item.priority}} -->
|
|
|
|
+ <img src="../assets/image/1.png" alt="" v-if="item.priority=='1'" class="priorityIMg">
|
|
|
|
+ <img src="../assets/image/2.png" alt="" v-if="item.priority=='2'" class="priorityIMg">
|
|
|
|
+ <img src="../assets/image/3.png" alt="" v-if="item.priority=='3'" class="priorityIMg">
|
|
</span>
|
|
</span>
|
|
- {{item.taskTitle}}
|
|
|
|
|
|
+ <span class="taskTitle">
|
|
|
|
+ {{item.taskTitle}}
|
|
|
|
+ <span v-for="(element) in item.remindVOS" :key="element.krId" class="remindSpan">@{{element.name}}</span>
|
|
|
|
+ </span>
|
|
</span>
|
|
</span>
|
|
</el-popover>
|
|
</el-popover>
|
|
</li>
|
|
</li>
|
|
@@ -160,7 +187,9 @@
|
|
:content="'KR:'+ele.krInfo">
|
|
:content="'KR:'+ele.krInfo">
|
|
|
|
|
|
<span slot="reference" class="content">
|
|
<span slot="reference" class="content">
|
|
- <span class="KR-content">{{ele.krInfo}}</span>
|
|
|
|
|
|
+ <span class="KR-content">{{ele.krInfo}}
|
|
|
|
+ <span v-for="element in ele.remindVOS" :key="element.remindId" class="remindSpan">@{{element.name}}</span>
|
|
|
|
+ </span>
|
|
</span>
|
|
</span>
|
|
</el-popover>
|
|
</el-popover>
|
|
<!-- <span class="KR-content">{{ele.krInfo}}</span> -->
|
|
<!-- <span class="KR-content">{{ele.krInfo}}</span> -->
|
|
@@ -188,12 +217,17 @@
|
|
width="300"
|
|
width="300"
|
|
trigger="hover"
|
|
trigger="hover"
|
|
:content="'详细描述:'+item.taskInfo">
|
|
:content="'详细描述:'+item.taskInfo">
|
|
- <span slot="reference">
|
|
|
|
|
|
+ <span slot="reference" class="content">
|
|
<span class="taskGrade">
|
|
<span class="taskGrade">
|
|
- P{{item.priority}}
|
|
|
|
|
|
+ <!-- P{{item.priority}} -->
|
|
|
|
+ <img src="../assets/image/1.png" alt="" v-if="item.priority=='1'" class="priorityIMg">
|
|
|
|
+ <img src="../assets/image/2.png" alt="" v-if="item.priority=='2'" class="priorityIMg">
|
|
|
|
+ <img src="../assets/image/3.png" alt="" v-if="item.priority=='3'" class="priorityIMg">
|
|
</span>
|
|
</span>
|
|
-
|
|
|
|
- {{item.taskTitle}}
|
|
|
|
|
|
+ <span class="taskTitle">
|
|
|
|
+ {{item.taskTitle}}
|
|
|
|
+ <span v-for="(element) in item.remindVOS" :key="element.krId" class="remindSpan">@{{element.name}}</span>
|
|
|
|
+ </span>
|
|
</span>
|
|
</span>
|
|
</el-popover>
|
|
</el-popover>
|
|
|
|
|
|
@@ -250,6 +284,12 @@ import {postAction , getAction} from '@/utils/api/http.js'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ loading:false,
|
|
|
|
+ totalPage:0,
|
|
|
|
+ currentPage:1,
|
|
|
|
+ isLoading:false,
|
|
|
|
+ nomore:false,
|
|
|
|
+ follow:false,
|
|
yearValue:undefined,
|
|
yearValue:undefined,
|
|
yearsOptions:[],
|
|
yearsOptions:[],
|
|
cycleValue:undefined,
|
|
cycleValue:undefined,
|
|
@@ -287,6 +327,28 @@ export default {
|
|
// }
|
|
// }
|
|
// },
|
|
// },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ followHis(item){
|
|
|
|
+ // this.follow=!this.follow;
|
|
|
|
+ console.log(item)
|
|
|
|
+
|
|
|
|
+ let status=item.follow?0:1;
|
|
|
|
+ postAction('/okr/focusInfo/focus',{
|
|
|
|
+ status,
|
|
|
|
+ userId:item.object.userId
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ console.log(res)
|
|
|
|
+ if(res.success){
|
|
|
|
+ this.list.forEach((ele,index)=>{
|
|
|
|
+ if(item.object.userId==ele.object.userId){
|
|
|
|
+ this.$set(ele,'follow',!item.follow)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.$meaasge.error('取消关注失败,请稍后再试!')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
handleClose(done) {
|
|
handleClose(done) {
|
|
this.$confirm('确认关闭?')
|
|
this.$confirm('确认关闭?')
|
|
.then(_ => {
|
|
.then(_ => {
|
|
@@ -317,8 +379,11 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+ handleCurrentChange(val){
|
|
|
|
+ this.currentPage=val;
|
|
|
|
+ },
|
|
getList(){
|
|
getList(){
|
|
|
|
+ this.loading=true;
|
|
this.isCurrentQuarter=2;
|
|
this.isCurrentQuarter=2;
|
|
this.list=[];
|
|
this.list=[];
|
|
postAction('/okr/okr/getSyncUserListByMemberId',{
|
|
postAction('/okr/okr/getSyncUserListByMemberId',{
|
|
@@ -326,23 +391,26 @@ export default {
|
|
quarter:this.cycleValue,
|
|
quarter:this.cycleValue,
|
|
name:this.nameValue
|
|
name:this.nameValue
|
|
}).then((res)=>{
|
|
}).then((res)=>{
|
|
- console.log(res);
|
|
|
|
|
|
+ // console.log(res);
|
|
|
|
+ this.loading=false;
|
|
this.isCurrentQuarter=res.result.isCurrentQuarter;
|
|
this.isCurrentQuarter=res.result.isCurrentQuarter;
|
|
this.list=res.result.list
|
|
this.list=res.result.list
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+
|
|
getThisOKR(item){
|
|
getThisOKR(item){
|
|
|
|
+ console.log(item)
|
|
this.currentData={
|
|
this.currentData={
|
|
object:{},
|
|
object:{},
|
|
- krLiat:[]
|
|
|
|
|
|
+ krList:[]
|
|
},
|
|
},
|
|
this.dialogVisible=true;
|
|
this.dialogVisible=true;
|
|
- console.log(item,this.isCurrentQuarter);
|
|
|
|
|
|
+ // console.log(item,this.isCurrentQuarter);
|
|
if(this.isCurrentQuarter!=1){
|
|
if(this.isCurrentQuarter!=1){
|
|
this.currentData=item
|
|
this.currentData=item
|
|
}else{
|
|
}else{
|
|
postAction('/okr/okr/getOkrInfo',{
|
|
postAction('/okr/okr/getOkrInfo',{
|
|
- userId:item.object.userId
|
|
|
|
|
|
+ objectId:item.object.id
|
|
}
|
|
}
|
|
).then((res)=>{
|
|
).then((res)=>{
|
|
console.log(res);
|
|
console.log(res);
|
|
@@ -368,12 +436,36 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
|
|
+ // scroll() {
|
|
|
|
+ // let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
|
|
|
|
+ // let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
|
+ // let scrollHeight = document.body.scrollHeight;
|
|
|
|
+ // console.log(scrollTop+windowHeight,scrollHeight)
|
|
|
|
+ // if(scrollTop+windowHeight>=scrollHeight){ //测试浏览器有的时候相加 会出现小数点 这里用 >= 不用 ==
|
|
|
|
+ // if(this.page <= this.totalPage) {
|
|
|
|
+ // this.getList();
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+
|
|
},
|
|
},
|
|
|
|
+ // created () {
|
|
|
|
+ // var that = this;
|
|
|
|
+ // window.addEventListener('scroll',this.scroll,true)
|
|
|
|
+ // console.log(this.$router)
|
|
|
|
+ // this.getList();
|
|
|
|
+ // },
|
|
|
|
+ // destroyed () {
|
|
|
|
+ // window.removeEventListener('scroll', this.scroll,true)
|
|
|
|
+ // },
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ this.loading=true;
|
|
postAction('/okr/okr/getSyncUserListByMemberId',{
|
|
postAction('/okr/okr/getSyncUserListByMemberId',{
|
|
|
|
|
|
}).then((res)=>{
|
|
}).then((res)=>{
|
|
console.log(res);
|
|
console.log(res);
|
|
|
|
+ this.loading=false;
|
|
this.isCurrentQuarter=res.result.isCurrentQuarter;
|
|
this.isCurrentQuarter=res.result.isCurrentQuarter;
|
|
this.list=res.result.list;
|
|
this.list=res.result.list;
|
|
this.yearValue=res.result.year;
|
|
this.yearValue=res.result.year;
|
|
@@ -381,7 +473,7 @@ export default {
|
|
})
|
|
})
|
|
postAction('/okr/okr/getObjectYear ',{
|
|
postAction('/okr/okr/getObjectYear ',{
|
|
}).then((res)=>{
|
|
}).then((res)=>{
|
|
- console.log(res);
|
|
|
|
|
|
+ // console.log(res);
|
|
this.yearsOptions=[]
|
|
this.yearsOptions=[]
|
|
res.result.forEach((item)=>{
|
|
res.result.forEach((item)=>{
|
|
this.yearsOptions.push({
|
|
this.yearsOptions.push({
|
|
@@ -396,7 +488,7 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
.OKRList{
|
|
.OKRList{
|
|
- max-height: 300px;
|
|
|
|
|
|
+ // max-height: 300px;
|
|
.topBox{
|
|
.topBox{
|
|
height: 41px;
|
|
height: 41px;
|
|
}
|
|
}
|
|
@@ -408,7 +500,7 @@ export default {
|
|
text-align: left;
|
|
text-align: left;
|
|
}
|
|
}
|
|
.OKRBody{
|
|
.OKRBody{
|
|
- min-height: calc(100% - 121px);
|
|
|
|
|
|
+ // min-height: calc(100% - 121px);
|
|
background: #fff;
|
|
background: #fff;
|
|
.top-opt{
|
|
.top-opt{
|
|
padding: 10px 20px;
|
|
padding: 10px 20px;
|
|
@@ -438,6 +530,7 @@ export default {
|
|
.listBody{
|
|
.listBody{
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
|
+ overflow: auto;
|
|
.itemBody{
|
|
.itemBody{
|
|
width: 25%;
|
|
width: 25%;
|
|
padding: 20px 0;
|
|
padding: 20px 0;
|
|
@@ -521,6 +614,14 @@ export default {
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .follow{
|
|
|
|
+ width: 20px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 20px;
|
|
|
|
+ top: 16px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item:hover{
|
|
.item:hover{
|
|
@@ -528,6 +629,10 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .fenye{
|
|
|
|
+ padding: 20px 40px 60px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.noListData{
|
|
.noListData{
|
|
width: 30%;
|
|
width: 30%;
|
|
@@ -753,22 +858,26 @@ ul,li{
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.okrbox-list{
|
|
.okrbox-list{
|
|
|
|
+ width: 100%;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
- max-height: 250px;
|
|
|
|
|
|
+ max-height: 80%;
|
|
// margin-top: 10px;
|
|
// margin-top: 10px;
|
|
text-align: left;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
ul{
|
|
ul{
|
|
|
|
+ width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
overflow: auto
|
|
overflow: auto
|
|
}
|
|
}
|
|
li{
|
|
li{
|
|
- height: 20px;
|
|
|
|
- padding: 10px 15px 10px;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 41px;
|
|
|
|
+ padding: 8px 15px 8px;
|
|
line-height: 20px;
|
|
line-height: 20px;
|
|
border-bottom: 1px solid rgb(240, 242, 245);
|
|
border-bottom: 1px solid rgb(240, 242, 245);
|
|
|
|
+ box-sizing: border-box;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
position: relative;
|
|
position: relative;
|
|
.list-opt{
|
|
.list-opt{
|
|
@@ -787,7 +896,7 @@ ul,li{
|
|
// }
|
|
// }
|
|
.content{
|
|
.content{
|
|
display: inline-block;
|
|
display: inline-block;
|
|
-
|
|
|
|
|
|
+ width: 100%;
|
|
}
|
|
}
|
|
.taskGrade{
|
|
.taskGrade{
|
|
display: inline-block;
|
|
display: inline-block;
|
|
@@ -796,9 +905,30 @@ ul,li{
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- background-color: turquoise;
|
|
|
|
|
|
+ // background-color: turquoise;
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
+ .priorityIMg{
|
|
|
|
+ width: 25px;
|
|
|
|
+ height: 25px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .taskTitle{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 70%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ height: 25px;
|
|
|
|
+ line-height: 25px;
|
|
|
|
+ .remindSpan{
|
|
|
|
+ color:#2e9cff;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin-right: 3px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
li:hover .list-opt{
|
|
li:hover .list-opt{
|
|
display: flex;
|
|
display: flex;
|
|
@@ -916,6 +1046,12 @@ ul,li{
|
|
height:100%;
|
|
height:100%;
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
padding-left: 45px;
|
|
padding-left: 45px;
|
|
|
|
+ .remindSpan{
|
|
|
|
+ color:#2e9cff;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin-right: 3px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.KR-opt{
|
|
.KR-opt{
|
|
display: inline-block;
|
|
display: inline-block;
|
|
@@ -993,6 +1129,11 @@ ul,li{
|
|
</style>
|
|
</style>
|
|
<style lang="less">
|
|
<style lang="less">
|
|
.taskBody{
|
|
.taskBody{
|
|
|
|
+ .el-tooltip__popper.is-dark {
|
|
|
|
+ background: #303133;
|
|
|
|
+ color: #FFF;
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ }
|
|
.el-radio.is-bordered.is-checked {
|
|
.el-radio.is-bordered.is-checked {
|
|
border-color: #CC9966;
|
|
border-color: #CC9966;
|
|
}
|
|
}
|