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

<!--  -->
<template>
    <div>
      <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')"><svg-icon icon-class="kaohe" class-name='icon'/>考核管理</div>
                  <div class="boderAndRadius commonFont noSelect"  v-if="auth.launchEvaluation" @click="handleGetMoreToDo('initiate')"><svg-icon icon-class="faqi" class-name='icon'/>发起考核</div>
                  <div class="boderAndRadius commonFont noSelect" v-if="auth.evaluationGroupManager" @click="handleGetMoreToDo('workbench-group')" ><svg-icon icon-class="kaoping" class-name='icon'/>考评组</div>
                  <div class="boderAndRadius commonFont noSelect"  v-if="auth.indexData" @click="handleGetMoreToDo('1')"><svg-icon icon-class="zhibiao" class-name='icon'/>指标库</div>
                </div>
              </div>
            </div>
            <!-- <div class="home-right boderAndRadius">
              <report />
            </div> -->
        </div>
        <performance :isNoRouter='true'/>
    </div>
</template>

<script>
import report from './report'
import tableItem from '../todo/tableItem'
import { apiGetWaitList } from '@/api/toDo'
import performance from '../../assessment/performance'
import { getUrlParams } from '@/utils/common'
export default {
  data () {
    return {
      pageProcessedInfo: {
        currPage: 1,
        pageSize: 3,
        status: 0
      },
      selectedTableList: [],
      list: [{
        name: 'assessment-performance',
        tag: 'detail'
      }]
    }
  },
  components: {
    report,
    tableItem,
    performance
  },
  computed: {},
  beforeMount () {},
  mounted () {
    let obj = getUrlParams()
    if (obj.id) {
      const item = this.list.filter(i => obj[i.tag])
      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">
  .icon{
  width: 25px !important;
  height: 25px !important;
  margin-right: 10px;
}
</style>
<style lang='less' scoped>

.home{
  background: #fff;
  margin: 0 auto;
  display: flex;
  padding: 28px;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  &-left{
    flex: 1;
    overflow: auto;
    padding: 0 30px 0  0;
    .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{
          margin-right: 20px;
          width: 186px;
          height: 76px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        >div:hover{
          box-shadow: 2px 2px 5px #e6e6e6;
        }
      }
    }
  }
  &-right{
    box-sizing: border-box;
    width: 520px;
    min-height: 100px;
    padding: 25px 20px;
    &-content{
      width: 100%;
      height: 364px;
    }
  }
}
</style>