management_UI/src/views/kpi/assessment/stepList/index.vue

<!--  -->
<template>
    <div class="step">
         <small-nav :showTitle='false'>
           <div slot="content">
            <el-cascader size="small" :props="props"></el-cascader>
           </div>
         </small-nav>
         <div class="step-content boderAndRadius">
            <div class="step-content-top">
              <div class="step-content-top-left">
                <el-button size="small" plain>选择部门<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
                <el-button size="small" plain>选择考评组<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
                <el-input size="small" style="margin-left:10px;" v-model="formInline.user"  prefix-icon="el-icon-search" placeholder="请输入姓名搜索"></el-input>
              </div>
              <div class="step-content-top-right">
                <el-button size="small"  type="primary">开始评分</el-button>
                <el-button size="small" plain>更多</el-button>
              </div>
            </div>
            <div  class="step-content-center boderAndRadius">
              <div class="step-content-center-item commonFont" v-for="(i,index) in titleList" :key="i.id">
                <span class="hover" style="cursor: pointer;">{{i.name}}({{i.number}})</span>
                <div v-if="index<titleList.length-1" class="step-content-center-item-img">
                  <img v-if="titleList.length>2 && index===0"  src="./img/shu.jpg" alt="">
                  <img v-else  src="./img/right.jpg" alt="">
                </div>
              </div>
            </div>
            <div>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  align='center'
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  align='center'
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  align='center'
                  label="地址">
                   <template slot-scope="scope">
                    <div>
                      {{scope.row}}
                    </div>
                  </template>
                </el-table-column>

              </el-table>
            </div>
         </div>
    </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
let id = 0
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      formInline: {},
      titleList: [{
        id: 10,
        name: '全部',
        number: 5
      }, {
        id: 11,
        name: '全部',
        number: 5
      }, {
        id: 12,
        name: '全部',
        number: 5
      }, {
        id: 13,
        name: '全部',
        number: 5
      }, {
        id: 14,
        name: '全部',
        number: 5
      }, {
        id: 15,
        name: '全部',
        number: 5
      }, {
        id: 10,
        name: '全部',
        number: 5
      }],
      props: {
        lazy: true,
        lazyLoad (node, resolve) {
          const { level } = node
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
              .map(item => ({
                value: ++id,
                label: `选项${id}`,
                leaf: level >= 2
              }))
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }, 1000)
        }
      }
    }
  },
  components: {
    SmallNav
  },
  computed: {},
  beforeMount () {},
  mounted () {},
  methods: {},
  watch: {}

}

</script>

<style lang='less' scoped>
.step-content{
  padding: 28px;
  width: 100%;
  margin: 20px 0;
  height: 537px;
  background: #fff;
  &-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-left{
      display: flex;
      align-items: center;
    }
  }
  &-center{
    margin: 30px 0;
    padding: 0 40px;
    min-height: 40px;
    background: #f6f6f6;
    display: flex;
    flex-wrap: wrap;
    &-item{
      height: 40px;
      .hover:hover{
        color: @fontBlue;
      }
      .active{
        color: @fontBlue;
      }
      .center();
      &-img{
        height: 20px;
        margin: 0 56px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>