baoman / Ezquiz_Platform

  <template>
    <div>

      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="diaShow"

        width="360px" :append-to-body="true"

        :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 = null;

        if (length) {

          studentIds = this.exportStudent.slice(0, 10).map((item) => {
            return item.studentId;
          });

        } else {

          if (this.exportType == 1) {
            studentIds = [];
          } else {
            studentIds = this.multipleSelection.map((item) => {
              return item.studentId;
            });
            studentIds.length == 0 ? (studentIds = null) : "";
          }

        }

        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>