management_UI/src/views/kpi/workbench/home/index.vue

<!--  -->
<template>
    <div class="home boderAndRadius" >
        <div class='home-left'>
            <div class="home-left-todo " :class="{borderBottom:selectedTableList.length===0}">
              <div class="home-left-todo-top">
                <div  class="commonFont">待办事项<span style="margin:0 4px" class="blueColor">{{pageProcessedInfo.totalCount || 0}}</span>条</div>
                <div  class="blueColor noSelect commonFont" style="cursor: pointer;" @click="handleGetMoreToDo('workbench-todo')">查看更多<i class="el-icon-arrow-right"></i></div>
              </div>
              <div class="home-left-todo-center">
                <tableItem v-if="selectedTableList.length!==0" :selectedTableList='selectedTableList' />
                <!-- <div style="height:300px">
                  sassa
                </div> -->
              </div>
            </div>
          <div v-if="auth.assessment && auth.indexData && auth.launchEvaluation && auth.evaluationGroupManager" class="home-left-enter">
            <div class="home-left-enter-title commonFont">快捷入口</div>
            <div class="home-left-enter-content">
              <div class="boderAndRadius commonFont noSelect" v-if="auth.assessment"  @click="handleGetMoreToDo('assessment')">考核管理</div>
              <div class="boderAndRadius commonFont noSelect" v-if="auth.evaluationGroupManager" @click="handleGetMoreToDo('workbench-group')" >考评组</div>
              <div class="boderAndRadius commonFont noSelect"  v-if="auth.launchEvaluation" @click="handleGetMoreToDo('initiate')">发起考核</div>
              <div class="boderAndRadius commonFont noSelect"  v-if="auth.indexData" @click="handleGetMoreToDo('1')">指标库</div>
            </div>
          </div>
        </div>
        <div class="home-right boderAndRadius">
          <report />
        </div>
    </div>
</template>

<script>
import report from './report'
import tableItem from '../todo/tableItem'
import { apiGetWaitList } from '@/api/toDo'

export default {
  data () {
    return {
      pageProcessedInfo: {
        currPage: 1,
        pageSize: 3,
        status: 0
      },
      selectedTableList: [],
      list: [{
        name: 'assessment-performance',
        tag: 'detail'
      }]
    }
  },
  components: {
    report,
    tableItem
  },
  computed: {},
  beforeMount () {},
  mounted () {
    let search = window.location.search
    if (search) {
      const item = this.list.filter(i => '?' + i.tag === search.split('=')[0])
      if (item.length > 0) {
        this.$nextTick(() => {
          this.$router.replace({
            name: item[0].name,
            query: this.$route.query
          })
        })
      }
    } else {
      setTimeout(() => {
        this.handleGetList()
      }, 100)
    }
  },
  methods: {
    handleGetList () {
      this.$loadingStart()
      apiGetWaitList(this.pageProcessedInfo).then(res => {
        this.$loadingEnd()
        if (res.code === 200) {
          this.pageProcessedInfo.currPage = res.data.currPage
          this.pageProcessedInfo.totalCount = res.data.totalCount
          this.pageProcessedInfo.totalPage = res.data.totalPage
          this.selectedTableList = res.data.list || []
        }
      })
    },
    handleGetMoreToDo (name) {
      if (name === '1') {
        return this.$message.info('暂未开放')
      }
      const params = {
        name
      }
      this.$router.push(params)
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.home{
  width: 1252px;
  height: 537px;
  background: #fff;
  margin: 0 auto;
  display: flex;
  padding: 28px;
  justify-content: space-between;
  align-items: flex-start;
  &-left{
    width: 828px;
    .borderBottom{
      border-bottom: 1px solid @borderColor;
    }
    &-todo{
      width: 100%;

      padding-top: 18px;
      &-top{
        display: flex;
        justify-content: space-between;
      }
      &-center{
        padding: 10px 0;
        box-sizing: content-box;
        max-height: 200px;
        overflow: auto;
      }
      .blueColor{
        color: @fontBlue;
      }
    }
    &-enter{
      width: 100%;
      height: 180px;
      &-title{
        margin: 22px 0;
      }
      &-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        >div{
          width: 186px;
          height: 76px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        >div:hover{
          box-shadow: 2px 2px 5px #e6e6e6;
        }
      }
    }
  }
  &-right{
    width: 330px;
    min-height: 100px;
    padding: 25px 20px;
    &-content{
      width: 100%;
      height: 364px;
    }
  }
}
</style>