baoman / Ezquiz_Platform

<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="diaShow"
      width="360px"
      :show-close="false"
    >
      <i class="el-icon-close" @click="closeDia"></i>
      <div v-show="exportType == 1">
        <div class="down-item">
          <p class="tit">是否将学生表现{{ type }}一起导出</p>
          <el-radio-group v-model="downType" @change="changeDownType">
            <el-radio :label="1">不导出</el-radio>
            <el-radio :label="2">导出</el-radio>
          </el-radio-group>
        </div>
        <div class="down-item" v-show="downType == 2">
          <p class="tit">选择要导出的学生</p>
          <el-radio-group v-model="exportType">
            <el-radio :label="1">导出全部</el-radio>
            <el-radio :label="2">导出指定学生</el-radio>
          </el-radio-group>
        </div>
      </div>
      <ul v-show="exportType == 2">
        <p class="export-tit">选择学生</p>
        <el-table
          ref="multipleTable"
          :data="exportStudent"
          @selection-change="handleSelectionChange"
          :max-height="300"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            prop="studentName"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column label="班名" align="center">
            <template slot-scope="scoped">
              <span
                v-if="
                  scoped.row.classRank ||
                  scoped.row.rank ||
                  scoped.row['classRank多科汇总']
                "
                >{{
                  scoped.row.classRank ||
                  scoped.row.rank ||
                  scoped.row["classRank多科汇总"]
                }}</span
              >
              <span v-else>{{
                (scoped.row.examList && scoped.row.examList[0].classRank) ||
                (scoped.row.datalist && scoped.row.datalist[0].classRank)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="this.lastLabel" align="center"
            ><template slot-scope="scoped">
              <span v-if="!isNaN(scoped.row.correctRate)"
                >{{ scoped.row.correctRate }}%</span
              >
              <span v-else-if="!isNaN(scoped.row.scoringRate)">
                {{ scoped.row.scoringRate }}%
              </span>
              <span v-else-if="scoped.row['score多科汇总']">
                {{ Number(scoped.row["score多科汇总"]) }}
              </span>
              <span v-else>{{
                Number(scoped.row.examList && scoped.row.examList[0].score)
              }}</span>
            </template></el-table-column
          >
        </el-table>
      </ul>
      <div class="dialog-footer" slot="footer">
        <el-button
          v-show="exportType == 2"
          size="small"
          type="primary"
          round
          @click="exportData(10)"
          >导出前十</el-button
        >
        <el-button size="small" type="primary" round @click="exportData(0)"
          >确 定</el-button
        >
        <el-button size="small" type="danger" round @click="cancel"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "exportDia",
  props: {
    type: {
      type: String,
      default: "折线图",
    },
    diaShow: Boolean,
    exportStudent: Array,
    lastLabel: {
      type: String,
      default: "总正确率",
    },
  },
  data() {
    return {
      downType: 1,
      exportType: 1,
      multipleSelection: [],
    };
  },
  watch: {
    diaShow: {
      handler: function (nVal) {
        if (nVal) {
          this.downType = 1;
          this.exportType = 1;
          this.multipleSelection = [];
        }
      },
      immediate: true,
    },
  },
  methods: {
    cancelSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    changeDownType() {
      this.exportType = 1;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    exportData(length) {
      let studentIds = [];
      if (length) {
        studentIds = this.exportStudent.slice(0, 10).map((item) => {
          return item.studentId;
        });
      } else {
        studentIds = this.multipleSelection.map((item) => {
          return item.studentId;
        });
      }
      this.$emit("exportData", this.downType == 1 ? null : studentIds);
      this.cancelSelection();
    },
    cancel() {
      if (this.exportType == 2) {
        this.exportType = 1;
      } else {
        this.$emit("cancel");
      }
    },
    closeDia() {
      this.$emit("cancel");
      this.exportType = 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog__wrapper {
  :deep(.el-icon-close) {
    position: absolute;
    right: 2px;
    top: 5px;
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
  }
}

:deep(.el-dialog) {
  .el-dialog__body {
    padding: 0 20px 10px;
  }

  .down-item {
    font-size: 15px;
    margin-bottom: 10px;

    .tit {
      line-height: 18px;
      padding: 10px 0;
    }
  }

  .export-tit {
    text-align: center;
    font-size: 16px;
    padding-bottom: 10px;
  }
}

.dialog-footer {
  text-align: center;
}
</style>