dy-admin-manager/src/views/matchManager/index.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>比赛管理
    </h2>
    <div class="m-core">
      <el-form :inline="true" ref="searchForm" :model="searchForm">
        <el-form-item prop="search">
          <el-input v-model.trim="searchForm.search"
                    @keyup.enter.native="search"
                    placeholder='选手姓名/编号/身份证号'></el-input>
        </el-form-item>
        <el-form-item prop="grade">
          <el-select v-model.trim="searchForm.grade"
                     clearable
                     placeholder="请选择年级">
            <el-option label="小学A组：2-3年级" value="小学A组：2-3年级"></el-option>
            <el-option label="小学B组：4-5年级" value="小学B组：4-5年级"></el-option>
            <el-option label="中学组：6-8年级" value="中学组：6-8年级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="gender">
          <el-select v-model.trim="searchForm.gender"
                     clearable
                     placeholder="请选择性别">
            <el-option label="男"
                       :value="true"></el-option>
            <el-option label="女"
                       :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="subject">
          <el-select v-model.trim="searchForm.subject"
                     clearable
                     placeholder="请选择参赛专业">
            <el-option label="长笛" value="长笛"></el-option>
            <el-option label="单簧管" value="单簧管"></el-option>
            <el-option label="萨克斯" value="萨克斯"></el-option>
            <el-option label="小号" value="小号"></el-option>
            <el-option label="圆号" value="圆号"></el-option>
            <el-option label="长号" value="长号"></el-option>
            <el-option label="上低音号" value="上低音号"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="prizeLevel">
          <el-select v-model.trim="searchForm.prizeLevel"
                     clearable
                     placeholder="请选择获奖级别">
            <el-option label="大雅之星" :value="1"></el-option>
            <el-option label="一等奖" :value="2"></el-option>
            <el-option label="二等奖" :value="3"></el-option>
            <el-option label="三等奖" :value="4"></el-option>
            <el-option label="优秀奖" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isShow">
          <el-select v-model.trim="searchForm.isShow"
                     clearable
                     placeholder="请选择是否展示">
            <el-option label="是"
                       :value="1"></el-option>
            <el-option label="否"
                       :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isReview">
          <el-select v-model.trim="searchForm.isReview"
                     clearable
                     placeholder="请选择是否评审">
            <el-option label="是"
                       :value="1"></el-option>
            <el-option label="否"
                       :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                     @click="search">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table style="width: 100%"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data="tableList">
          <el-table-column align="center"
                           prop="userId"
                           label="选手编号"></el-table-column>
          <el-table-column align="center"
                           prop="username"
                           label="选手姓名"></el-table-column>
          <el-table-column align="center" width="200px"
                           prop="idCardNo"
                           label="身份证号码"></el-table-column>
          <el-table-column align="center"
                           prop="age"
                           label="年龄">
            <template slot-scope="scope">
              {{ scope.row.age }}岁
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="grade"
                           label="年级"></el-table-column>
          <el-table-column align="center"
                           label="性别">
            <template slot-scope="scope">
              {{ scope.row.gender ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="subject"
                           label="参赛专业"></el-table-column>
          <el-table-column align="center"
                           prop="chapter"
                           label="参赛曲目"></el-table-column>
          <el-table-column align="center"
                           prop="score"
                           label="得分"></el-table-column>
          <el-table-column align="center"
                           prop="prizeLevel"
                           label="获奖级别">
            <template slot-scope="scope">
              {{ prizeLevelList[scope.row.prizeLevel] }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="show"
                           label="是否展示">
            <template slot-scope="scope">
              {{ scope.row.show ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="comment"
                           label="选手点评">
            <template slot-scope="scope">
              <tooltip :content="scope.row.comment" />
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-if="permission('studentCompetition/lookDetail')"
                           @click="lookDetail(scope.row)">查看</el-button>
                <el-button type="text"
                           v-if="permission('studentCompetition/update')"
                           @click="onReview(scope.row)">评审</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title="查看"
               v-if="dialogVisible"
               :visible.sync="dialogVisible"
               width="900px">
      <match-detail :detail="detail" />
    </el-dialog>

    <el-dialog title="评审" :visible.sync="reviewStatus"
               width="500px">
      <el-form :model="form"
               :rules="rules"
               label-width="100px"
               ref="ruleForm">
        <el-form-item label="得分"
                      prop="score">
          <el-input placeholder="请输入得分"
                    type="number"
                    @mousewheel.native.prevent
                    v-model.trim="form.score"></el-input>
        </el-form-item>
        <el-form-item label="获奖级别"
                      prop="prizeLevel">
          <el-select v-model.trim="form.prizeLevel"
                     style="width: 100% !important;"
                     placeholder="请选择获奖级别">
            <el-option label="大雅之星" :value="1"></el-option>
            <el-option label="一等奖" :value="2"></el-option>
            <el-option label="二等奖" :value="3"></el-option>
            <el-option label="三等奖" :value="4"></el-option>
            <el-option label="优秀奖" :value="5"></el-option>
            <el-option label="无" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否展示"
                      prop="show">
          <el-select v-model.trim="form.show"
                     style="width: 100% !important;"
                     placeholder="请选择是否展示">
            <el-option label="是"
                       :value="true"></el-option>
            <el-option label="否"
                       :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选手点评"
                      prop="comment">
          <el-input type="textarea"
                    v-model.trim="form.comment"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="reviewStatus = false">取 消</el-button>
        <el-button @click="onReviewSubmit('ruleForm')"
                   type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { permission } from '@/utils/directivePage'
import Tooltip from '@/components/Tooltip/index'
import { studentCompetitionPage, studentCompetitionUpdate } from './api.js'
import cleanDeep from 'clean-deep'
import MatchDetail from './matchDetail'
const validateScore = (rule, value, callBack) => {
  if (value == '' && typeof value == 'string' || value == null) {
    callBack(new Error('请输入得分'))
  } else if (value < 0 || value > 100) {
    callBack(new Error('输入得分必须在0-100之间'))
  } else {
    callBack()
  }
}
export default {
  components: { pagination, Tooltip, MatchDetail },
  data () {
    return {
      searchForm: {
        search: null,
        gender: null,
        subject: null,
        prizeLevel: null,
        grade: null,
        isShow: null,
        isReview: null,
      },
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      prizeLevelList: {
        1: '大雅之星',
        2: '一等奖',
        3: '二等奖',
        4: '三等奖',
        5: '优秀奖'
      },
      detail: null,
      dialogVisible: false,
      reviewStatus: false,
      form: {
        id: null,
        score: null,
        prizeLevel: null,
        show: null,
        comment: null
      },
      rules: {
        score: [{required: true, validator: validateScore, trigger: 'blur'}],
        // prizeLevel: [{required: true, message:'请选择获奖级别', trigger: 'blur'}],
        // show: [{required: true, message:'请选择是否展示', trigger: 'blur'}],
      }
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getList()
  },
  activated () {
    // this.getList()
  },
  methods: {
    permission (str) {
      return permission(str)
    },
    getList () {
      let obj = {}
      Object.assign(obj, this.searchForm)
      obj.rows = this.pageInfo.limit;
      obj.page = this.pageInfo.page;
      studentCompetitionPage(cleanDeep(obj)).then(res => {
        if (res.code == 200) {
          this.pageInfo.total = res.data.total;
          let rows = res.data && res.data.rows ? res.data.rows : []
          rows.forEach(row => {
            row.score = row.score == -1 ? null : row.score
            row.prizeLevel = row.prizeLevel == -1 ? null : row.prizeLevel
          });
          this.tableList = res.data.rows
        }
      })
    },
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet () {
      this.pageInfo.page = 1;
      this.$refs['searchForm'].resetFields()
      this.getList()
    },
    lookDetail(row) {
      this.detail = row
      this.dialogVisible = true
    },
    onReview(row) {
      this.$nextTick(() => {
        this.form = {
          id: row.id,
          score: row.score,
          prizeLevel: row.prizeLevel,
          show: row.show,
          comment: row.comment
        }
      })
      this.reviewStatus = true
    },
    onReviewSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          await studentCompetitionUpdate(cleanDeep(this.form)).then(res => {
            if(res.code == 200) {
              this.$message.success('评审成功')
              this.getList()
              this.reviewStatus = false
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
  }
};
</script>
<style lang='scss' scoped>
/deep/.el-dialog__body {
    padding: 10px 20px;
}
</style>