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

<!--  -->
<template>
    <div class="assessment">
      <div class="assessment-form">
        <el-form ref="form" inline :model="form" >
          <div>
            <el-form-item >
              <el-select  size="small"  v-model="form.cycleType" placeholder="请选择" style="width:100px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item >
              <el-input  @change="handleChange" @keyup.enter="handleChange"   size="small"  clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item >
              <el-button type="primary" :disabled='!auth.startAm'  size="small"  @click="$router.push({name:'initiate'})">发起考核</el-button>
            </el-form-item>
            <!-- <el-form-item >
              <el-button  size="small"  >导入历史绩效</el-button>
            </el-form-item> -->
          </div>
        </el-form>
      </div>
      <div class="assessment-table">
        <el-table
        :header-cell-style="{background:'#F5F7FA'}"
        @row-click='handleSelectClick'
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed
          prop="name"
          label="考核名称">
        </el-table-column>
        <el-table-column
          prop="cycleTime"
          label="时间周期">
        </el-table-column>
        <el-table-column
          prop="joinNum"
          label="参与人数">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              :disabled='!auth.seeAm'
               @click="handlePush(scope.row.id)"
              type="text"
              size="small">
              查 看
            </el-button>
            <el-button
             :disabled='!auth.deleteAm'
              @click="handleDelete(scope.row.id)"
              type="text"
              size="small">
              删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination
            small
            :hide-on-single-page="true"
            @current-change="handleChangePage"
            layout="prev, pager, next"
            :page-size.sync='params.pageSize'
            :current-page.sync='params.currPage'
            :total="params.totalCount">
          </el-pagination>
      </div>
      </div>
    </div>
</template>

<script>
import {apiGetAssessList, apiDeleteAssessList} from '@/api/assessment'
export default {
  components: {
  },
  data () {
    return {
      params: {
        'currPage': 1,
        'pageSize': 5
      },
      show: false,
      options: [ {
        value: '',
        label: '全部'
      }, {
        value: 0,
        label: '月度'
      },
      {
        value: 1,
        label: '自定义'
      }
      ],
      form: {
        cycleType: ''
      },
      tableData: []
    }
  },
  computed: {},
  beforeMount () {},
  mounted () {
    this.form.value = this.options[0].value
    this.handleGetData()
  },
  methods: {
    async handleDelete (item) {
      this.$confirm('此操作不可撤回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await apiDeleteAssessList({assessId: item})
          this.handleGetData()
          this.$message({
            message: '成功',
            type: 'success'
          })
        } catch (error) {
          this.$message.error(error.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleChange (value) {
      this.params.currPage = 1
      console.log(' this.form: ', this.form)
      this.handleGetData(Object.assign({}, this.form, this.params))
    },
    handlePush (id) {
      this.$router.push({name: 'assessment-stepList', query: {id}})
    },
    async handleGetData (parmas = this.params) {
      try {
        this.$loadingStart()
        let res = await apiGetAssessList(parmas)
        this.$loadingEnd()
        res = res.data
        this.tableData = res.list
        this.params.totalCount = res.totalCount
        this.params.currPage = res.currPage
      } catch (error) {
        console.log('error: ', error)
      }
    },
    handleChangePage (value) {
      this.params.currPage = value
      this.handleGetData()
    },
    handleRight () {
      this.show = true
    },
    handleSelectClick (row, column, event) {
      console.log('event: ', event)
      console.log('column: ', column)
      console.log('row: ', row)
    },
    handleToHome (i) {
      this.$router.push({name: i})
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  },
  watch: {
    'form.cycleType' (n, o) {
      this.handleChange()
    }
  }

}

</script>

<style lang='less' scoped>
.assessment{

  .footer{
    text-align: right;
    margin: 20px 0 0 0;
  }
  .el-form{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-form{
    padding: 4px 0;
  }

  &-table{
    background: #fff;
    padding: 20px;
    border: 1px solid @borderColor;
  }
}
</style>
<style lang="less">
  .el-table__row{
    cursor:pointer;
  }
</style>