baoman / Ezquiz_Platform

  <template>

    <div>

      <back-box>

        <template slot="title">

          <span>已归档答题卡</span>

        </template>
      </back-box>

      <div class="answer-header">
        <div class="sel-box">

          <!-- <el-cascader size="small"

            class="sel sel2"
            :options="options"
            :props="props"
            collapse-tags
            clearable
            placeholder="选择年级-班级"
            v-model="query.gradeClass"

            @change="changeGrade"

            ><template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template></el-cascader

          > -->

          <el-select class="sel" v-model="query.type" placeholder="选择类型" @change="_QueryData()">
            <el-option label="备题" :value="1"></el-option>
            <el-option label="组卷" :value="2"></el-option>
          </el-select>
          <el-select class="sel" v-model="query.classId" placeholder="选择班级" @change="changClazz">
            <el-option v-for="item in classList" :key="item.value" :label="item.label" :value="item.value">

            </el-option>
          </el-select>

          <el-select class="sel" v-model="query.subjectName" placeholder="选择科目" @change="_QueryData()">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">

            </el-option>
          </el-select>

          <el-select class="sel" v-model="query.tagId" placeholder="选择类型" @change="_QueryData()">
            <el-option v-for="item in typeList" :key="item.label" :label="item.label" :value="item.value">{{ item.label }}

            </el-option>
          </el-select>

          <el-input placeholder="输入试卷名称" v-model="query.title" class="input-with-select"
            @keyup.enter.native="_QueryData(true)">
            <el-button slot="append" icon="el-icon-search" @click="_QueryData(true)"></el-button>

          </el-input>
        </div>
      </div>

      <ul class="content" v-loading="loading">

        <li class="item" v-for="item in tableData" :key="item.id">
          <div class="pic-box">
            <p class="i-box"><i class="fa fa-map-o"></i></p>
            <p class="ids">{{ item.id }}</p>
          </div>
          <div class="info">
            <p class="title">

              {{ item.title }}
              <span class="label" v-if="item.tag">{{ item.tag }}</span>

            </p>
            <p class="num">
              {{ item.gradeName }}
              <em class="s-line">|</em>

              总题数：{{ item.questionNum }}

              <em class="s-line">|</em>

              预计时长：{{ item.examsDuration }}

            </p>
            <p class="person">

              {{ item.realName }}<em class="s-line">|</em><span class="date">{{ item.modifiedTime }}</span>

            </p>
          </div>
          <div class="btn-box">

            <el-tooltip effect="dark" content="恢复" placement="bottom">

              <el-button class="edit" type="info" size="mini" circle icon="fa fa-mail-reply"
                @click="modify(item)"></el-button>

            </el-tooltip>
            <el-popconfirm title="确定删除这张答题卡吗？" @confirm="remove(item)">

              <el-button slot="reference" class="delete" type="info" size="mini" circle icon="el-icon-delete"></el-button>

            </el-popconfirm>
          </div>
        </li>
      </ul>

      <div class="pagination-box">

        <el-pagination small="" layout="total,prev, pager, next" :hide-on-single-page="true" :total="total"
          @current-change="changePage" :current-page="page" :page-size="size">

        </el-pagination>
      </div>

      <el-empty :image-size="100" v-if="!tableData.length && loading == false" description="没有更多数据"></el-empty>

    </div>

  </template>
  
  <script>
  export default {

    data() {
      return {

        role: "",

        loading: false,

        props: { multiple: true, checkStrictly: true },
        options: [
          {
            value: 1,
            label: "一年级",
            children: [
              {
                value: 2,
                label: "二班",
              },
              {
                value: 3,
                label: "三班",
              },
            ],
          },
          {
            value: 4,
            label: "二年级",
            children: [
              {
                value: 5,
                label: "二班",
              },
              {
                value: 6,
                label: "三班",
              },
            ],
          },
        ],

        query: {

          type: 1,

          classId: "",
          subjectName: "",
          tagId: "",

          title: "",
        },

        classList: [],
        subjectList: [],
        typeList: [],

        tableData: [],

        total: 0,

        page: 1,
        size: 20,

      };
    },

    async created() {

      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;

      await this._QueryClassList();
      await this._QuerySubjectList();
      this._QueryTypeList();
      this._QueryData(false);
    },

    methods: {

      async modify(obj) {
        //恢复答题卡

        let modifyPaper =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pModifyPaper
            : this.$request.modifyPaper;
        const { data, status, info } = await modifyPaper({

          paperId: obj.id,

          status: 1,

        });

        if (status == 0) {
          let type = this.query.title ? 1 : 0;
          this._QueryData(type);
        } else {

          this.$message.error(info);

        }

      },

      async remove(obj) {

        //删除答题卡

        let delPaper =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pDelPaper
            : this.$request.delPaper;
        const { data, status, info } = await delPaper({

          paperId: obj.id,

        });

        if (status == 0) {
          let type = this.query.title ? 1 : 0;
          this._QueryData(type);
        } else {

          this.$message.error(info);

        }
      },
      //切换班级
      async changClazz() {
        await this._QuerySubjectList();
        this._QueryData(false);

      },

      changePage(page) {
        this.page = page;
        this._QueryData(this.query.title);

      },

      async _QueryData(type) {
        //获取答题卡列表

        this.loading = true;

        let query = {};
        if (!type) {
          this.query.title = "";
          query = { ...this.query };
        } else {
          query = { title: this.query.title };

        }

        query.classId = this.query.classId;

        for (let key in query) {
          if (!query[key]) {
            query[key] = null;
          }
        }

        let fetchPaperList =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pPaperList
            : this.$request.fetchPaperList;
        const { data, status, info } = await fetchPaperList({

          ...query,

          status: 2,
          page: this.page,
          size: this.size,

        });
        this.loading = false;

        if (status === 0) {

          this.total = data.total;
          this.tableData = (data.list && [...data.list]) || [];
        } else {

          this.$message.error(info);

        }
      },

      // 查找班级
      async _QueryClassList() {

        let fetchClassList =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pClassList
            : this.$request.fetchClassList;
        const { data, status, info } = await fetchClassList();

        if (status === 0) {
          if (!!data.list) {

            this.classList =
              data.list?.map((item) => {
                return {

                  value: this.role == "ROLE_PERSONAL" ? item.id : item.classId,

                  label: item.className,
                };
              }) || [];

            this.query.classId = this.classList[0]?.value;

          }

        } else {

          this.$message.error(info);

        }
      },

      // 查找科目
      async _QuerySubjectList() {

        let fetchSubjectList =

          this.role == "ROLE_PERSONAL"
            ? this.$request.pSubjectList
            : this.$request.fetchSubjectList;
  
        const { data, status, info } = await fetchSubjectList({

          classId: this.query.classId,

        });
        if (status === 0) {

          this.subjectList =
            data.subjectNames?.map((item) => {
              return {
                value: item,
                label: item,
              };
            }) || [];

          this.query.subjectName = this.subjectList[0]?.value;

        } else {

          this.$message.error(info);

        }
      },

      // 查找答题卡类型
      async _QueryTypeList() {

        let fetchTypeNames =

          this.role == "ROLE_PERSONAL"
            ? this.$request.pPaperTagList
            : this.$request.fetchTypeNames;
  
        const { data, status, info } = await fetchTypeNames({

          classId: this.query.classId,

          tyle: 0,

        });

        if (status === 0) {
          this.typeList =

            data.list?.map((item) => {

              return {
                value: item.tagId,
                label: item.tag,
              };
            }) || [];

          this.typeList.unshift({
            value: "",

            label: "请选择标签",

          });

        } else {

          this.$message.error(info);

        }
      },
    },
  };

  </script>
  

  <style lang="scss" scoped>
  .answer-header {
    .sel-box {
      .sel {
        min-width: 160px;
      }

      :deep(.el-cascader__tags) {
        flex-wrap: nowrap;
      }

    }
  }

  .content {
    margin: 0 20px;
    background: #f8f8f8;
    padding: 12px;
    border-radius: 20px;

    .item {
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 12px;
      border-radius: 20px;
      background: #fff;
      margin-bottom: 12px;

      &:last-of-type {
        margin-bottom: 0;
      }

      .pic-box {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        margin-right: 10px;
        flex-shrink: 0;
        background: #d7d7d7;
        text-align: center;
        color: #fff;
        font-weight: 500;

        .i-box {
          padding-top: 10px;
          font-size: 32px;
          margin-bottom: 3px;
        }
      }

      .info {
        height: 80px;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .s-line {
          padding: 0 5px;
          color: #e2e2e2;
        }

        .title {
          font-size: 16px;
          color: #222;
          font-weight: 500;

          .label {
            display: inline-block;
            font-size: 12px;
            color: #2e9afe;
            line-height: 16px;
            padding: 0 10px;
            border: 1px solid #2e9afe;
            border-radius: 10px;
            transform: translateY(-2px);
          }
        }

        .person {
          color: #666;
        }
      }

      .btn-box {
        flex-shrink: 0;

        .edit {
          margin-right: 12px;
        }
      }
    }
  }

  </style>