gdy_pc_8/src/okr/views/targetMt/okrInform.vue

<template>
  <div class="box boxMinHeight">
    <PageHeadTwo title="目标通知"></PageHeadTwo>
    <div class="main flex-box">
      <div class="main-left">
        <ul class="ul scroll-bar" v-if="tabs.length > 0">
          <li class="flex-box-ce li" v-for="(item, index) in tabs" :key="index" :class="[selectIndex == index ? 'isActiveLi' : '']" @click="activeLi(item, index)">
            <div class="index-name font-flex-word">
              {{ item.name }}
              <span v-if="item.num" class="red">({{ item.num }})</span>
            </div>
          </li>
        </ul>
        <noData v-else content="暂无分类" imgW="120px" imgH="80px"></noData>
      </div>
      <div class="flex-1 main-right">
        <!--        <el-select class="select" style="margin-bottom: 20px;" size="small" v-model="has_follow" placeholder="类型">
          <el-option label="未读" :value="0"></el-option>
          <el-option label="已读" :value="1"></el-option>
        </el-select> -->
        <div v-if="messageList.length > 0" v-loading="loading">
          <div class="flex-box-ce item" v-for="(item, index) in messageList" :key="index" @click="openDetail(item)">
            <div class="flex-1 font-flex-word content" v-if="selectIndex == 0">{{ item.content }}</div>
            <div class="flex-1 font-flex-word content" v-else>{{ item.target_type == 1 ? '目标' : item.target_type == 2 ? 'KR' : item.target_type == 3 ? '任务':  item.target_type == 4 ? '项目':'里程碑' }}“{{ item.title }}”,有人提到了你</div>

            <div class="fontColorB">
              {{ item.update_time }}
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <Pagination :page_size="page_size" :page="page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
        </div>
        <NoData v-else content="暂无内容"></NoData>
      </div>
      <!-- 目标详情 -->
      <TargetDetail :type="showDetailType" :id="showDetailId" v-if="isShowTargetDetail" :showDrawer.sync="isShowTargetDetail" @confirm=""></TargetDetail>

      <TaskDetail :isApprove="true" :visible.sync="isShowTaskDetail" :taskId="showDetailId" @confirm=""></TaskDetail>
    </div>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector';
import PageHeadTwo from '@/performance/components/public/PageHeadTwo';
import TargetDetail from '@/okr/components/public/TargetDetail'; //目标详情
import TaskDetail from '@/okr/components/public/TaskDetail'; //目标详情
export default {
  name: 'unread',
  components: { EmployeeSelector, PageHeadTwo, TargetDetail, TaskDetail },
  data() {
    return {
      total: 0,
      page: 1,
      page_size: 10,
      tabs: [{ name: '待办提醒', num: 0 }, { name: '@我的', num: '' }],
      loading: false,
      selectIndex: 0,
      messageList: [], //消息列表

      showDetailId: 0,
      isShowTargetDetail: false,
      isShowTaskDetail: false,
      showDetailType: 3,
      has_follow: 0
    };
  },
  watch: {
    has_follow(val) {
      this.page = 1;
      this.getMessage();
    }
  },
  created() {
    if (this.$route.query.selectIndex) {
      this.selectIndex = this.$route.query.selectIndex;
    }
  },
  mounted() {
    this.getMessage();
    this.getMessage2();
  },
  methods: {
    openDetail(item) {
      if (item.target_type == 1 || item.target_type == 2) {
        this.showDetailType = item.target_type;
        this.showDetailId = item.target_id; //打开详情的ID
        this.isShowTargetDetail = true;
      } else if (item.target_type == 3){
        this.showDetailId = item.target_id; //打开任务详情的ID
        this.isShowTaskDetail = true;
      } else if (item.target_type == 4){  //项目
        this.$router.push({path:'/projectDetail',query:{id:item.target_id}})
      }
    },
    //待办
    getMessage2() {
      this.$axiosUser('get', '/api/pro/okr/notice', { fb: 1, has_follow: 0, page: this.page, page_size: this.page_size }).then(res => {
          this.tabs[1].num = res.data.data.total;
      })
    },
    //待办
    getMessage() {
      this.loading = true;
      this.messageList = [];
      this.$axiosUser('get', '/api/pro/okr/notice', { fb: this.selectIndex, has_follow: this.has_follow, page: this.page, page_size: this.page_size })
        .then(res => {
          let list = res.data.data.list;
          list.forEach(item => {
            item.update_time = this.$moment(Number(item.update_time + '000')).format('YYYY-MM-DD HH:mm');
          });
          this.tabs[this.selectIndex].num = res.data.data.total;
          this.$nextTick(() => {
            this.messageList = list;
            this.total = res.data.data.total;
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    activeLi(item, index) {
      this.selectIndex = index;
      this.page = 1;
      this.getMessage();
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getMessage();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getMessage();
    }
  },
  beforeDestroy() {
      this.$store.dispatch('getSumTotal') //通知数量
  }

};
</script>

<style scoped="scoped">
.box {
  padding: 20px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
}
.main {
  margin-top: 40px;
}
/* bug： 我在flex布局的元素中使用了elementui的table组件，饿了么的table上会被加一个动态的宽度， 当第一次改变flex元素宽度的时候。table的动态宽度会变化，第二次和以后就不会变化了。*/
/* 给使用flex的元素加上 overflow-x：hidden */
.main-right {
  margin-left: 20px;
  overflow-x: hidden;
}
.main-left {
  width: 200px;
  border-radius: 3px;
  box-sizing: border-box;
}
.main-left::after {
  position: absolute;
  content: '';
  width: 1px;
  height: auto;
  left: 220px;
  top: 0;
  bottom: 0;
  background-color: #f1f1f1;
}
::v-deep .has-gutter {
  display: none;
}
.li {
  height: 53px;
  line-height: 53px;
  padding: 0 20px;
  border-bottom: 1px solid #f1f1f1;
  color: #777777;
  width: 100%;
}
.li:hover {
  background-color: #f5f7fa;
}
.li:hover .el-icon-more {
  display: block;
}
.index-name {
  width: 170px;
}
.ul {
  max-height: calc(100vh - 230px);
  overflow: auto;
  width: 200px;
}
.isActiveLi {
  background-color: #f5f7fa;
  color: #409eff !important;
  position: relative;
}
.isActiveLi::after {
  width: 3px;
  content: ' ';
  background-color: #409eff;
  left: 0;
  bottom: 0;
  top: 0;
  position: absolute;
}
.item {
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  border-bottom: 1px solid #e8e8e8;
}
.item:hover {
  background-color: #f5f7fa;
}
.content {
  padding: 0 10px;
}
</style>