Bladeren bron

'okr二次改版'

魏志佳 4 jaren geleden
bovenliggende
commit
c35ba10d5e
10 gewijzigde bestanden met toevoegingen van 2752 en 2323 verwijderingen
  1. 14 1
      src/App.vue
  2. 16 4
      src/Layout.vue
  3. 7 7
      src/components/Nav.vue
  4. 9 9
      src/utils/api/request.js
  5. 1 1
      src/views/Login.vue
  6. 112 38
      src/views/MyConcerns.vue
  7. 124 57
      src/views/OKRList.vue
  8. 2360 2171
      src/views/OKRpage.vue
  9. 106 32
      src/views/myDepart.vue
  10. 3 3
      vue.config.js

+ 14 - 1
src/App.vue

@@ -28,6 +28,19 @@ body,html{
   height: 100%;
   box-sizing: border-box;
 }
-
+.el-slider__button-wrapper {
+    height: 36px;
+    width: 36px;
+    z-index: 2!important;
+    top: -15px;
+    transform: translateX(-50%);
+    background-color: transparent;
+    text-align: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height: normal;
+}
 
 </style>

+ 16 - 4
src/Layout.vue

@@ -32,7 +32,7 @@
         </el-col>
         <!-- <router-link to="/">Home</router-link> |
         <router-link to="/about">About</router-link> -->
-        <el-col :span="21">
+        <el-col :span="21" ref="scrollBody">
             <router-view />
         </el-col>
         </el-row>
@@ -102,16 +102,16 @@ import Vue from 'vue'
 }
 .tac{
   height:100%;
-  padding-top: 41px;
+  padding-top: 48px;
   box-sizing: border-box;
 }
 .el-col,.el-menu{
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
 }
 .topNav{
   background: fff;
-  height: 20px;
+  height: 27px;
   width: 100%;
   color:#333;
   padding:10px 0px;
@@ -125,6 +125,11 @@ import Vue from 'vue'
   -webkit-box-shadow: 1px 3px 11px rgba(0,0,0,.2);
   z-index: 100;
  
+  .logoBar{
+    text-align: left;
+    padding-left: 25px;
+    box-sizing: border-box;
+  }
   .login{
     width: 150px;
     display: inline-block;
@@ -138,6 +143,7 @@ import Vue from 'vue'
       top: 0;
       right: 10px;
     }
+
   }
 }
 .el-submenu,.el-menu-item{
@@ -148,4 +154,10 @@ import Vue from 'vue'
   height: 24px;
   margin:0 auto
 }
+.el-menu-item-group__title {
+    /* padding: 7px 0 7px 20px; */
+    line-height: normal;
+    font-size: 12px;
+    color: #909399;
+}
 </style>

+ 7 - 7
src/components/Nav.vue

@@ -16,14 +16,14 @@
             <span>OKR管理</span>
           </template>
           <el-menu-item-group>   
-            <router-link to="/OKRpage">       
+            <router-link to="/OKRList">       
                 <el-menu-item index="1-1">
-                    我的OKR
+                    OKR看板
                 </el-menu-item>
             </router-link>
-            <router-link to="/OKRList">
+            <router-link to="/OKRpage">
                 <el-menu-item index="1-2">
-                    OKR看板
+                    我的OKR
                 </el-menu-item>
             </router-link>
             <router-link to="/MyConcerns">
@@ -71,7 +71,7 @@
     export default {
         data() {
             return {
-                activePage:'1-1'
+                activePage:'1-2'
             }
         },
         
@@ -86,11 +86,11 @@
             selectChange(key, keyPath){
                 // console.log(key, keyPath);
                 this.activePage=key
-                localStorage.setItem('activePage',key)
+                sessionStorage.setItem('activePage',key)
             }
         },
         mounted(){
-            let activePage=localStorage.getItem('activePage');
+            let activePage=sessionStorage.getItem('activePage');
             if(activePage){
                 this.activePage=activePage
             }

+ 9 - 9
src/utils/api/request.js

@@ -28,7 +28,7 @@ const err = (error) => {
   if (error.response) {
     let data = error.response.data
     const token = Vue.ls.get(ACCESS_TOKEN)
-    // console.log("------异常响应------", token)
+    console.log("------异常响应------", token,data)
     // console.log("------异常响应------", error.response.status)
     switch (error.response.status) {
       case 403:
@@ -36,20 +36,20 @@ const err = (error) => {
         break
       case 500:
         //notification.error({ message: '系统提示', description:'Token失效,请重新登录!',duration: 4})
-        if (token && data.code == -1) {
+        if (data.code == -1) {
           // update-begin- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式,不直接跳转----
           // store.dispatch('Logout').then(() => {
           //     window.location.reload()
           // })
           // Notification.error({title: '登录已过期', message: '很抱歉,登录已过期,请重新登录', duration: 4})
-          if (token) {
+          
             store.dispatch('Logout').then(() => {
               setTimeout(() => {
                 window.location.reload()
                 // router.replace('/login')
-              }, 1500)
+              }, 50)
             })
-          }
+          
           break
          
           // update-end- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式,不直接跳转----
@@ -63,13 +63,13 @@ const err = (error) => {
         break
       case 401:
         Notification.error({title: '系统提示', message: '未授权,请重新登录', duration: 4})
-        if (token) {
+        
           store.dispatch('Logout').then(() => {
             setTimeout(() => {
               window.location.reload()
-            }, 1500)
+            }, 50)
           })
-        }
+        
         break
       default:
         Notification.error({
@@ -87,7 +87,7 @@ const err = (error) => {
 service.interceptors.request.use(config => {
   const token = Vue.ls.get(ACCESS_TOKEN);
   // let tokens=JSON.parse(localStorage.getItem('ACCESS_TOKEN'))
-  // console.log(token)
+  console.log(token)
   if (token) {
       config.headers['X-Access-Token'] = token// 让每个请求携带自定义 token 请根据实际情况自行修改
   }

+ 1 - 1
src/views/Login.vue

@@ -21,7 +21,7 @@
                 var url = '';
                 // console.log(process.env)
                 if (process.env.NODE_ENV === 'development') {
-                    url = 'http://192.168.1.105:3001'
+                    url = 'http://localhost:3001'
                 } else if (process.env.NODE_ENV === 'production') {
                     url = 'http://okr.c-top.com.cn'
                 }

+ 112 - 38
src/views/MyConcerns.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="MyConcerns">
+    <div class="MyConcerns" v-infinite-scroll="handleInfiniteOnLoad">
         <!-- <div class="topBox"> </div> -->
         <div class="title">
             我的关注
@@ -32,7 +32,8 @@
                      <el-input
                         placeholder="请输入搜索的名字"
                         v-model="nameValue"
-                        clearable>
+                        clearable
+                        @change='searchName'>
                         <el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
                     </el-input>
 
@@ -42,8 +43,8 @@
                  </span> -->
             </div>
             <div class="listBody" v-if="list.length>0">
-                <div class="itemBody" @click="getThisOKR(item)" v-for="(item,index) in list" :key="index" >
-                    <div class="item">
+                <div class="itemBody"  v-for="(item,index) in list" :key="index" >
+                    <div class="item" @click="getThisOKR(item)">
                         <div class="item-top">
                             <span class="jidu">第{{item.object.quarter}}季度</span>
                             <div class="targetName">
@@ -96,6 +97,7 @@
                             <span class="tip"><span class="sc-bQduHL kArEgh"></span> KR</span>
                             <span class="info">
                                 {{item.krInfo}}
+                                <span v-for="element in item.remindVOS" :key="element.remindId" class="remindSpan">@{{element.name}}</span>
                             </span>
                            
                             <span class="progress">
@@ -112,7 +114,7 @@
                     </div>
                 </div>
             </div>
-            <div class="fourBoxBody okrPage" v-if="isCurrentQuarter==1">
+            <div class="fourBoxBody okrPage" v-if="isCurrentQuarter==1" style="margin-top:15px">
                 <div class="title" >
                     {{time.year}}年第{{time.quarter}}季度OKR
                 </div>      
@@ -267,6 +269,7 @@ let cycleOptions=[
     },
 ]
 import {postAction , getAction} from '@/utils/api/http.js'
+import infiniteScroll from 'vue-infinite-scroll'
 export default {
     data() {
         return {
@@ -300,33 +303,40 @@ export default {
                 {color: '#5cb87a', percentage: 80},
                 {color: '#5cb87a', percentage: 100}
             ],
+
+             // 滚动加载更多
+            loadingMore: false,//loading 加载更多
+            isScroll: true,//是否可以滚动
+            pageIndex: 1,
+            pageSize: 16,
+            loading: false,
+            busy: false,
         }
     },
-    // watch: {
-    //     currentData:{
-    //         deep:true
-    //     }
-    // },
+    directives: { infiniteScroll },
     methods: {
         followHis(item){
-            item.follow=!item.follow;
+            
             console.log(item)
             
             let status=item.follow?0:1;
+
+            this.list.forEach((ele,index)=>{
+                if(item.object.userId==ele.object.userId){
+                    this.$set(ele,'follow',!item.follow)
+                }
+            })
             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)
-                        }
-                    })
-                    this.getList();
+                    
+                    
                 }else{
-                    this.$meaasge.error('取消关注失败,请稍后再试!')
+                    this.$meaasge.error(res.message)
+                    this.getList();
                 }
 
             })
@@ -365,7 +375,9 @@ export default {
         getList(){
             this.isCurrentQuarter=2;
             this.list=[];
-            this.loading=true
+            this.loading=true;
+            this.loadingMore=true;
+            this.pageIndex=2;
             postAction('/okr/focusInfo/myFollow',{
                 year:this.yearValue,
                 quarter:this.cycleValue,
@@ -382,6 +394,12 @@ export default {
                 object:{},
                 krLiat:[]
             },
+            this.okr=[];
+            this.taskInfoList=[];
+            this.taskFourWeek=[];
+            this.time='';
+            this.status=[];
+            this.okrObject={};
             this.dialogVisible=true;
             // console.log(item,this.isCurrentQuarter);
             if(this.isCurrentQuarter!=1){
@@ -414,21 +432,52 @@ export default {
             }
             
         },
+
+
+        // 滚动事件
+        handleInfiniteOnLoad(){
+            this.loading=true;
+            this.loadingMore = true;
+            
+            postAction('/okr/focusInfo/myFollow',{
+                year:this.yearValue,
+                quarter:this.cycleValue,
+                name:this.nameValue,
+                pageNumber:this.pageIndex
+            }).then((res)=>{
+                console.log(res);
+                this.loading=false;
+                this.loadingMore = false
+                this.isCurrentQuarter=res.isCurrentQuarter;
+                this.yearValue=res.year;
+                this.cycleValue=res.quarter
+                if (res.list.length > 0) {
+                     this.isScroll = true
+                     this.list = [...this.list, ...res.list]
+                     let pageNumber = this.pageIndex += 1
+                } else {
+                    //  this.show = true
+                    this.$message.warning('没有更多数据了!')
+                }
+                
+                
+            })
+        },
     },
     mounted() {
         this.loading=true;
-        postAction('/okr/focusInfo/myFollow',{
-            year:this.yearValue,
-            quarter:this.cycleValue,
-            name:this.nameValue
-        }).then((res)=>{
-            console.log(res);
-            this.loading=false;
-            this.isCurrentQuarter=res.isCurrentQuarter;
-            this.list=res.list;
-            this.yearValue=res.year;
-            this.cycleValue=res.quarter
-        })
+        // postAction('/okr/focusInfo/myFollow',{
+        //     year:this.yearValue,
+        //     quarter:this.cycleValue,
+        //     name:this.nameValue
+        // }).then((res)=>{
+        //     console.log(res);
+        //     this.loading=false;
+        //     this.isCurrentQuarter=res.isCurrentQuarter;
+        //     this.list=res.list;
+        //     this.yearValue=res.year;
+        //     this.cycleValue=res.quarter
+        // })
         postAction('/okr/okr/getObjectYear ',{           
         }).then((res)=>{
             // console.log(res);
@@ -446,15 +495,17 @@ export default {
 
 <style lang="less" scoped>
 .MyConcerns{
-     max-height: 300px;
+    //  max-height: 300px;
+    height: 100%;
+    overflow: auto;
     .topBox{
         height: 41px;
     }
     .title{
         background-color: #f4f6f9;
-        padding-left: 20px;
-        height: 80px;
-        line-height: 80px;
+        padding-left: 25px;
+        height: 60px;
+        line-height: 60px;
         text-align: left;
     }
     .OKRBody{
@@ -612,6 +663,12 @@ export default {
                 display:inline-block;
                 margin-right: 15px;
             }
+            .remindSpan{
+                color:#2e9cff;
+                display: inline-block;
+                margin-right: 3px;
+                cursor: pointer;
+            }
         }
     }
     .targetBody{
@@ -753,19 +810,22 @@ export default {
         }
     }
 }
-
+ul{
+    padding: 0;
+}
 ul,li{
     margin: 0;
-    padding: 0;
+    padding-top: 0;
     list-style: none;
 }
 .okrPage{
+    
     width: 100%;
     height: 100%;   
     background:#CC9966;
     box-sizing: border-box;
     position: relative;
-    
+   
     .title{
         height: 50px;        
         padding: 10px 0;
@@ -776,6 +836,7 @@ ul,li{
         line-height: 50px;
         font-size: 20px;
         text-align: center;
+        margin-top: 15px;
     }
    
     .okrBody{
@@ -874,6 +935,12 @@ ul,li{
                          white-space: nowrap;
                          height: 25px;
                          line-height: 25px;
+                        .remindSpan{
+                            color:#2e9cff;
+                            display: inline-block;
+                            margin-right: 3px;
+                            cursor: pointer;
+                        }
                     }
                 }
                 li:hover .list-opt{
@@ -992,6 +1059,12 @@ ul,li{
                                 height:100%;
                                 line-height: 30px;
                                 padding-left: 45px;
+                                 .remindSpan{
+                                    color:#2e9cff;
+                                    display: inline-block;
+                                    margin-right: 3px;
+                                    cursor: pointer;
+                                }
                             }
                             .KR-opt{
                                 display: inline-block;
@@ -1039,6 +1112,7 @@ ul,li{
 
 </style>
 <style lang="less">
+
 .el-tooltip__popper.is-dark {
         background: #303133;
         color: #FFF;

+ 124 - 57
src/views/OKRList.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="OKRList"  >
+    <div class="OKRList"   v-infinite-scroll="handleInfiniteOnLoad">
         <!-- <div class="topBox"> </div> -->
         <div class="title">
-            OKR广场
+            OKR看板
         </div>
         <div class="OKRBody" v-loading="loading">
             <div class="top-opt">
@@ -33,7 +33,8 @@
                      <el-input
                         placeholder="输入搜索的名字"
                         v-model="nameValue"
-                        clearable>
+                        clearable
+                        @change='searchName'>
                         <el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
                     </el-input>
 
@@ -43,8 +44,8 @@
                  </span> -->
             </div>
             <div class="listBody" >
-                <div class="itemBody" @click="getThisOKR(item)" v-for="(item,index) in list" :key="index" >
-                    <div class="item">
+                <div class="itemBody"  v-for="(item,index) in list" :key="index" >
+                    <div class="item" @click="getThisOKR(item)">
                         <div class="item-top">
                             <span class="jidu">第{{item.object.quarter}}季度</span>
                             <div class="targetName">
@@ -110,6 +111,7 @@
                             <span class="tip"><span class="sc-bQduHL kArEgh"></span> KR</span>
                             <span class="info">
                                 {{item.krInfo}}
+                                 <span v-for="element in item.remindVOS" :key="element.remindId" class="remindSpan">@{{element.name}}</span>
                             </span>
                            
                             <span class="progress">
@@ -281,14 +283,14 @@ let cycleOptions=[
     },
 ]
 import {postAction , getAction} from '@/utils/api/http.js'
+import infiniteScroll from 'vue-infinite-scroll'
 export default {
     data() {
         return {
             loading:false,
             totalPage:0,
             currentPage:1,
-            isLoading:false,
-            nomore:false,
+           
             follow:false,
             yearValue:undefined,
             yearsOptions:[],
@@ -319,32 +321,38 @@ export default {
                 {color: '#5cb87a', percentage: 80},
                 {color: '#5cb87a', percentage: 100}
             ],
+            
+            // 滚动加载更多
+            loadingMore: true,//是否还有数据允许加载 
+            pageIndex: 1,
+            pageSize: 16,
+            loading: false,
+            busy: false,
         }
     },
-    // watch: {
-    //     currentData:{
-    //         deep:true
-    //     }
-    // },
+    directives: { infiniteScroll },
     methods: {
         followHis(item){
-            // this.follow=!this.follow;
-            console.log(item)
             
+            console.log(item)
             let status=item.follow?0:1;
+
+            this.list.forEach((ele,index)=>{
+                if(item.object.userId==ele.object.userId){
+                    this.$set(ele,'follow',!item.follow)
+                }
+            })
+           
             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('取消关注失败,请稍后再试!')
+                    this.$meaasge.error(res.message);
+                    this.getList()
                 }
 
             })
@@ -386,13 +394,16 @@ export default {
             this.loading=true;
             this.isCurrentQuarter=2;
             this.list=[];
+            this.loadingMore=true;
+            this.pageIndex=2;
             postAction('/okr/okr/getSyncUserListByMemberId',{
                 year:this.yearValue,
                 quarter:this.cycleValue,
                 name:this.nameValue
             }).then((res)=>{
                 // console.log(res);
-                 this.loading=false;
+                this.loading=false;
+
                 this.isCurrentQuarter=res.result.isCurrentQuarter;
                 this.list=res.result.list
             })
@@ -404,6 +415,12 @@ export default {
                 object:{},
                 krList:[]
             },
+            this.okr=[];
+            this.taskInfoList=[];
+            this.taskFourWeek=[];
+            this.time={};
+            this.status=[];
+            this.okrObject={};
             this.dialogVisible=true;
             // console.log(item,this.isCurrentQuarter);
             if(this.isCurrentQuarter!=1){
@@ -431,46 +448,75 @@ export default {
                         })
                         this.status=res.result.status;
                         this.okrObject=res.result.okr[0].objectInfo;
+                    }else{
+                        
                     }
                 })
             }
             
         },
-        // 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();
-        //         }
-        //     }
-        // },
         
-       
+        // 滚动事件
+        handleInfiniteOnLoad(){
+            
+            
+            if(this.loadingMore){
+                this.loading=true;
+                postAction('/okr/okr/getSyncUserListByMemberId',{
+                    year:this.yearValue,
+                    quarter:this.cycleValue,
+                    name:this.nameValue,
+                    pageNumber:this.pageIndex
+                }).then((res)=>{
+                    console.log(res);
+                    this.loading=false;
+                    if(res.success){
+                        this.isCurrentQuarter=res.result.isCurrentQuarter;
+                        // this.list=res.result.list;
+                        this.yearValue=res.result.year;
+                        this.cycleValue=res.result.quarter
+                        if (res.result.list.length > 0) {
+                            this.loadingMore = true
+                            this.isScroll = true
+                            this.list = [...this.list, ...res.result.list]
+                            let pageNumber = this.pageIndex += 1
+                        } else {
+                            this.loadingMore = false
+                            this.$message.warning('没有更多数据了!')
+                        }
+                        this.isCurrentQuarter=res.result.isCurrentQuarter;
+                    }else{
+                        this.$message.error('服务器异常')
+                    }
+                    
+                    
+                })
+            }
+            
+        },
+        
+        
+     
+    },
+    destroyed(){
+        // console.log(this.$refs)
+     
+
     },
-    // created () {
-    //     var that = this;
-    //     window.addEventListener('scroll',this.scroll,true)
-    //     console.log(this.$router)
-    //     this.getList();
-    // },
-    // destroyed () {
-    //     window.removeEventListener('scroll', this.scroll,true)
-    // },
     mounted() {
+        
+
         this.loading=true;
-        postAction('/okr/okr/getSyncUserListByMemberId',{
+        // postAction('/okr/okr/getSyncUserListByMemberId',{
             
-        }).then((res)=>{
-            console.log(res);
-            this.loading=false;
-            this.isCurrentQuarter=res.result.isCurrentQuarter;
-            this.list=res.result.list;
-            this.yearValue=res.result.year;
-            this.cycleValue=res.result.quarter
-        })
+        // }).then((res)=>{
+        //     console.log(res);
+        //     this.loading=false;
+        //     this.isCurrentQuarter=res.result.isCurrentQuarter;
+        //     this.list=res.result.list;
+        //     this.yearValue=res.result.year;
+        //     this.cycleValue=res.result.quarter
+        // })
         postAction('/okr/okr/getObjectYear ',{           
         }).then((res)=>{
             // console.log(res);
@@ -489,14 +535,16 @@ export default {
 <style lang="less" scoped>
 .OKRList{
     //  max-height: 300px;
+    height: 100%;
+    overflow: auto;
     .topBox{
         height: 41px;
     }
     .title{
         background-color: #f4f6f9;
-        padding-left: 20px;
-        height: 80px;
-        line-height: 80px;
+        padding-left: 25px;
+        height: 60px;
+        line-height: 60px;
         text-align: left;
     }
     .OKRBody{
@@ -659,6 +707,12 @@ export default {
                 display:inline-block;
                 margin-right: 15px;
             }
+            .remindSpan{
+                color:#2e9cff;
+                display: inline-block;
+                margin-right: 3px;
+                cursor: pointer;
+            }
         }
     }
     .targetBody{
@@ -780,8 +834,9 @@ export default {
                 .krtitle{
                     line-height: 40px;
                     display: inline-block;
-                    width: 30%;
+                    width: 90px;
                     text-align: right;
+                    flex-shrink: 0;
                 }
                 .KR-opt{
                     width: 60%;
@@ -800,11 +855,14 @@ export default {
         }
     }
 }
-
+ul{
+    padding: 0;
+}
 ul,li{
     margin: 0;
-    padding: 0;
+    padding-top: 0;
     list-style: none;
+    
 }
 .okrPage{
     width: 100%;
@@ -823,6 +881,7 @@ ul,li{
         line-height: 50px;
         font-size: 20px;
         text-align: center;
+        margin-top: 15px;
     }
    
     .okrBody{
@@ -1126,8 +1185,16 @@ ul,li{
             }
         }
     }
+
+.top-opt .el-input__inner {
+    border: none;
+    // text-align: center;
+}
 </style>
 <style lang="less">
+.el-message{
+    min-width: auto;
+}
     .taskBody{
         .el-tooltip__popper.is-dark {
             background: #303133;

File diff suppressed because it is too large
+ 2360 - 2171
src/views/OKRpage.vue


+ 106 - 32
src/views/myDepart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="MyConcerns">
+    <div class="MyDepart" v-infinite-scroll="handleInfiniteOnLoad">
         <!-- <div class="topBox"> </div> -->
         <div class="title">
             我的部门
@@ -32,7 +32,8 @@
                      <el-input
                         placeholder="请输入搜索的名字"
                         v-model="nameValue"
-                        clearable>
+                        clearable
+                        @change='searchName'>
                         <el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
                     </el-input>
 
@@ -42,8 +43,8 @@
                  </span> -->
             </div>
             <div class="listBody" v-if="list.length>0">
-                <div class="itemBody" @click="getThisOKR(item)" v-for="(item,index) in list" :key="index" >
-                    <div class="item">
+                <div class="itemBody"  v-for="(item,index) in list" :key="index" >
+                    <div class="item" @click="getThisOKR(item)">
                         <div class="item-top">
                             <span class="jidu">第{{item.object.quarter}}季度</span>
                             <div class="targetName">
@@ -96,6 +97,7 @@
                             <span class="tip"><span class="sc-bQduHL kArEgh"></span> KR</span>
                             <span class="info">
                                 {{item.krInfo}}
+                                <span v-for="element in item.remindVOS" :key="element.remindId" class="remindSpan">@{{element.name}}</span>
                             </span>
                            
                             <span class="progress">
@@ -268,6 +270,7 @@ let cycleOptions=[
     },
 ]
 import {postAction , getAction} from '@/utils/api/http.js'
+import infiniteScroll from 'vue-infinite-scroll'
 export default {
     data() {
         return {
@@ -301,31 +304,39 @@ export default {
                 {color: '#5cb87a', percentage: 80},
                 {color: '#5cb87a', percentage: 100}
             ],
+
+             // 滚动加载更多
+            loadingMore: false,//loading 加载更多
+            isScroll: true,//是否可以滚动
+            pageIndex: 1,
+            pageSize: 16,
+            loading: false,
+            busy: false,
         }
     },
-    // watch: {
-    //     currentData:{
-    //         deep:true
-    //     }
-    // },
+    
+    directives: { infiniteScroll },
     methods: {
         followHis(item){
             console.log(item)
             
             let status=item.follow?0:1;
+
+             this.list.forEach((ele,index)=>{
+                if(item.object.userId==ele.object.userId){
+                    this.$set(ele,'follow',!item.follow)
+                }
+            })
            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('取消关注失败,请稍后再试!')
+                    this.$meaasge.error(res.meaasge)
+                    this.getList()
                 }
 
             })
@@ -365,7 +376,9 @@ export default {
             this.isCurrentQuarter=2;
             this.list=[];
             this.loading=true;
-            postAction('/okr/okr/getSyncUserListByMemberId',{
+            this.loadingMore=true;
+            this.pageIndex=2;
+            postAction('/okr/focusInfo/myDepartment',{
                 year:this.yearValue,
                 quarter:this.cycleValue,
                 name:this.nameValue
@@ -381,6 +394,12 @@ export default {
                 object:{},
                 krLiat:[]
             },
+            this.okr=[];
+            this.taskInfoList=[];
+            this.taskFourWeek=[];
+            this.time='';
+            this.status=[];
+            this.okrObject={};
             this.dialogVisible=true;
             // console.log(item,this.isCurrentQuarter);
             if(this.isCurrentQuarter!=1){
@@ -413,19 +432,51 @@ export default {
             }
             
         },
+
+
+        // 滚动事件
+        handleInfiniteOnLoad(){
+            this.loading=true;
+            this.loadingMore = true;
+            
+            postAction('/okr/focusInfo/myDepartment',{
+                year:this.yearValue,
+                quarter:this.cycleValue,
+                name:this.nameValue,
+                pageNumber:this.pageIndex
+            }).then((res)=>{
+                console.log(res);
+                this.loading=false;
+                this.loadingMore = false
+              
+                // this.list=res.result.list;
+                this.yearValue=res.year;
+                this.cycleValue=res.quarter
+                if (res.list.length > 0) {
+                     this.isScroll = true
+                     this.list = [...this.list, ...res.list]
+                     let pageNumber = this.pageIndex += 1
+                } else {
+                    //  this.show = true
+                    this.$message.warning('没有更多数据了!')
+                }
+                this.isCurrentQuarter=res.isCurrentQuarter;
+                
+            })
+        },
     },
     mounted() {
         this.loading=true;
-        postAction('/okr/focusInfo/myDepartment',{
+        // postAction('/okr/focusInfo/myDepartment',{
             
-        }).then((res)=>{
-            // console.log(res);
-            this.loading=false
-            this.isCurrentQuarter=res.isCurrentQuarter;
-            this.list=res.list;
-            this.yearValue=res.year;
-            this.cycleValue=res.quarter
-        })
+        // }).then((res)=>{
+        //     // console.log(res);
+        //     this.loading=false
+        //     this.isCurrentQuarter=res.isCurrentQuarter;
+        //     this.list=res.list;
+        //     this.yearValue=res.year;
+        //     this.cycleValue=res.quarter
+        // })
         postAction('/okr/okr/getObjectYear ',{           
         }).then((res)=>{
             // console.log(res);
@@ -442,16 +493,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.MyConcerns{
-     max-height: 300px;
+.MyDepart{
+    //  max-height: 300px;
+    height: 100%;
+    overflow: auto;
     .topBox{
         height: 41px;
     }
     .title{
         background-color: #f4f6f9;
-        padding-left: 20px;
-        height: 80px;
-        line-height: 80px;
+        padding-left: 25px;
+        height: 60px;
+        line-height: 60px;
         text-align: left;
     }
     .OKRBody{
@@ -609,6 +662,12 @@ export default {
                 display:inline-block;
                 margin-right: 15px;
             }
+            .remindSpan{
+                color:#2e9cff;
+                display: inline-block;
+                margin-right: 3px;
+                cursor: pointer;
+            }
         }
     }
     .targetBody{
@@ -750,10 +809,12 @@ export default {
         }
     }
 }
-
+ul{
+    padding: 0;
+}
 ul,li{
     margin: 0;
-    padding: 0;
+    padding-top: 0;
     list-style: none;
 }
 .okrPage{
@@ -773,6 +834,7 @@ ul,li{
         line-height: 50px;
         font-size: 20px;
         text-align: center;
+        margin-top: 15px;
     }
    
     .okrBody{
@@ -871,6 +933,12 @@ ul,li{
                          white-space: nowrap;
                          height: 25px;
                          line-height: 25px;
+                          .remindSpan{
+                            color:#2e9cff;
+                            display: inline-block;
+                            margin-right: 3px;
+                            cursor: pointer;
+                        }
                     }
                 }
                 li:hover .list-opt{
@@ -989,6 +1057,12 @@ ul,li{
                                 height:100%;
                                 line-height: 30px;
                                 padding-left: 45px;
+                                 .remindSpan{
+                                    color:#2e9cff;
+                                    display: inline-block;
+                                    margin-right: 3px;
+                                    cursor: pointer;
+                                }
                             }
                             .KR-opt{
                                 display: inline-block;

+ 3 - 3
vue.config.js

@@ -1,10 +1,10 @@
 module.exports = { 
     devServer: { 
-        port: 3000,
+        port: 3001,
         proxy: {
             "/api": {
-                target: 'http://192.168.1.72:8910', // 要访问的接口域名
-                // target: 'http://okrapi.c-top.com.cn', // 要访问的接口域名
+                // target: 'http://192.168.1.72:8910', // 要访问的接口域名
+                target: 'http://okrapi.c-top.com.cn', // 要访问的接口域名
                 ws: true, // 是否启用websockets
                 changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                 pathRewrite: {