admin/src/pages/system/verificationManager/qrcodeVerification/verificationList/index.vue

<template>
  <div class="subPage">
    <div class="list flex-h">
      <div class="flex-item">
        <div style="text-align:right;margin: 20px 0 0;border:none;">
          <el-button
            size="mini"
            type="warning"
            @click="reback">返回</el-button>
        </div>
        <div>
          <el-table
              :data="coursesList"
              stripe
              style="width: 100%">
              <el-table-column
                prop="CaseName"
                label="所在案场">
              </el-table-column>
              <el-table-column
                prop="LocationId"
                label="课程类别">
              </el-table-column>
              <el-table-column
                prop="CourseName"
                label="课程名称">
              </el-table-column>
              <el-table-column
                prop="DetailName"
                label="课时名称">
              </el-table-column>
              <el-table-column
                prop="BeginDate"
                label="课程开始时间">
              </el-table-column>
              <el-table-column
                prop="EndDate"
                label="课程结束时间">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="check(scope.row)">核销</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <span class="noData">今日暂无可核销的课程</span>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="300px"
      center>
      <span style="width:100%;display:block;text-align:center;margin:20px 0;">确认核销此课程？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: '',
  data () {
    return {
      centerDialogVisible: false,
      coursesList: [{
        CaseName: 'xxx',
        LocationId: 'xxx',
        CourseName: 'xxx',
        DetailName: 'xxx',
        BeginDate: 'xxx',
        EndDate: 'xxx',
      }],
    }
  },
  mounted () {
    this.$nextTick(function () { })
  },
  methods: {
    check (item) { // 核销
      this.centerDialogVisible = true
    },
    reback () { // 返回
      this.$router.push({name: 'qrcodeVerification'})
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.subPage {
  .list {
    > div {
      margin: 0 20px;
      > div {
        width: 100%;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-bottom: none;
        margin-top: 20px;
      }
    }
  }
  .noData{
    width: 100%;
    display: block;
    line-height: 40px;
    font-size: 30px;
    color: #ccc;
    text-align: center;
    margin: 40px auto 0;
  }
}
</style>