management_UI/src/views/kpi/workbench/assessmentGroup/groundTable.vue

<!--  -->
<template>
    <div class="assessment">
      <div class="assessment-form">
        <el-form ref="form" @submit.native.prevent inline :model="form" >
            <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>
            <el-form-item >
              <el-dropdown  >
                <el-button  size="small" type="primary">
                  新增考评组<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu  slot="dropdown">
                  <el-dropdown-item @click.native="handleToEidt" >新增考评组</el-dropdown-item>
                  <el-dropdown-item @click.native="handleToEidtCopy" > 复制考评组</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
        </el-form>
      </div>
        <el-table
        :header-cell-style="{background:'#F5F7FA'}"
        @row-click='handleSelectClick'
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed
          sortable
          prop="name"
          label="考核名称">
        </el-table-column>
        <el-table-column
          prop="counts"
          label="参与人数">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
               @click="handlePush(scope.row.id)"
              type="text"
              size="small">
              编 辑
            </el-button>
            <el-button
              @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>
       <popup-right v-if="showRight" @cancel='handleCancel' @submit="handleSubmit" title="选择复制考评组">
            <div slot="content" class="chooseManage">
              <el-table
               :data="copyList"
               @row-click='handleRowChange'
                >
                <el-table-column  align="center">
                  <!-- label非常重要 -->
                  <template v-slot="props">
                    <div   class="chooseManage-item">
                    <el-radio
                      :value="selectId"
                      :label="props.row.id"
                    >{{props.row.name}}</el-radio>
                    <div class="left">
                      {{props.row.counts}}
                    </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </popup-right>
    </div>
</template>

<script>
import {getWorkList, groundDelete} from '@/api/workbench'
import PopupRight from '@/components/PopupRight'
export default {
  data () {
    return {
      selectId: '',
      showRight: false,
      params: {
        'currPage': 1,
        'pageSize': 10
      },
      form: {},
      tableData: [],
      copyList: []
    }
  },
  components: {
    PopupRight
  },
  computed: {},
  beforeMount () {},
  mounted () {
    this.handleGetData()
  },
  methods: {
    handleRowChange (data) {
      this.selectId = data.id
    },
    handleSubmit () {
      if (!this.selectId) {
        this.$message.error('请选择考评组！')
        return
      }
      console.log('this.copyList : ', this.copyList)
      this.showRight = false
      this.$router.push({name: 'workbench-edit-group', query: {id: this.selectId, copy: 1}})
    },
    handleCancel () {
      this.showRight = false
    },
    handlePush (id) {
      this.$router.push({name: 'workbench-edit-group', query: {id}})
    },
    async handleToEidtCopy (id) {
      let res = await getWorkList({
        'currPage': 1,
        'pageSize': 99999
      })
      if (res.code !== 200) return
      this.copyList = res.data.list
      this.showRight = true
    },
    handleChange (value) {
      this.params = {
        'currPage': 1,
        'pageSize': 10,
        'name': this.form.name
      }
      this.handleGetData()
    },
    handleChangePage (value) {
      this.params.currPage = value
      this.handleGetData()
    },
    async handleGetData (parmas = Object.assign({}, this.params)) {
      try {
        this.$loadingStart()
        let res = await getWorkList(parmas)
        this.$loadingEnd()
        if (res.code !== 200) return
        res = res.data
        console.log('res: ', res)
        this.tableData = res.list
        this.params.totalCount = res.totalCount
        this.params.currPage = res.currPage
      } catch (error) {
        console.log('error: ', error)
      }
    },
    handleToEidt () {
      this.$router.push({name: 'workbench-edit-group'})
    },
    handleSelectClick (row, column, event) {
      console.log('event: ', event)
      console.log('column: ', column)
      console.log('row: ', row)
    },
    async handleDelete (item) {
      this.$confirm('此操作不可撤回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await groundDelete({id: item})
          this.handleGetData()
          this.$message({
            message: '成功',
            type: 'success'
          })
        } catch (error) {
          this.$message.error(error.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  watch: {}

}

</script>
<style lang="less">
  .assessment{
  .el-table__header{
      display: none;
    }
  }
</style>
<style lang='less' scoped>
.assessment{
  .chooseManage{
    width: 500px;
  }

  .chooseManage-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    // .left{
    //   flex: 1;
    // }
  }
  .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>