src/views/examinationPaper/recycle.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>已归档答题卡</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-cascader
          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.subjectId"
          placeholder="选择科目"
          @change="_QueryData()"
        >
          <el-option label="全部" value=""></el-option>
          <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.type"
          placeholder="选择类型"
          @change="_QueryData()"
        >
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :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">
      <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">{{ item.typeName }}</span>
          </p>
          <p class="num">
            {{ item.gradeName }}
            <em class="s-line">|</em>
            总题数：{{ item.answerNum }}
            <em class="s-line">|</em>
            预计时长：{{ item.time }}
            <em class="s-line">|</em>
          </p>
          <p class="person">
            {{ item.teacher }}<em class="s-line">|</em
            ><span class="date">{{ item.date }}</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="have(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>
</template>
<script>
export default {
  data() {
    return {
      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: {
        gradeClass: [],
        type: "",
        subjectId: "",
        title: "",
      },
      gradeList: ["二年级"],
      typeList: [
        { label: "周测", value: 1 },
        { label: "月测", value: 2 },
      ],
      subjectList: [],
      tableData: [
        {
          title: "数学样例试卷202211-324654",
          id: "1062837",
          gradeName: "二年级",
          typeName: "周测",
          answerNum: 45,
          time: 90,
          aboutClazz: [203, 204],
          teacher: "张老师",
          date: "2022-11-04 18:09:49",
          share: 1,
        },
        {
          title: "数学样例试卷202211-4180949",
          id: "1062838",
          gradeName: "二年级",
          typeName: "周测",
          answerNum: 45,
          time: 90,
          aboutClazz: [203, 204],
          teacher: "张老师",
          date: "2022-11-04 18:09:49",
          share: 1,
        },
      ],
      total: 0,
    };
  },
  methods: {
    have(obj) {
      //删除答题卡
      // const { data, code, message } = await this.$request.useAnswerSheet();
      // if (code == 0) {
      this.tableData = this.tableData.filter((item) => {
        return obj.if != item.id;
      });
      // } else {
      //   this.$message.error(message);
      // }
    },
    remove(obj) {
      //删除答题卡
      // const { data, code, message } = await this.$request.removeAnswerSheet();
      // if (code == 0) {
      this.tableData = this.tableData.filter((item) => {
        return obj.if != item.id;
      });
      // } else {
      //   this.$message.error(message);
      // }
    },
    async _QueryData(type) {
      //获取答题卡列表
      let query = {};
      if (!type) {
        this.query.title = "";
        query = { ...this.query };
      } else {
        query = { title: this.query.title };
        this.query.type = "";
        this.query.subjectId = "";
      }
      for (let key in query) {
        if (!query[key]) {
          query[key] = null;
        }
      }
      this.loading = true;
      const { data, code, message } = await this.$request.fetchAnswerList({
        ...query,
      });
      this.loading = false;
      if (code === 0) {
        this.total = data.total;
        this.tableData = (data.list && [...data.list]) || [];
      } else {
        this.$message.error(message);
      }
    },
    // 查找答题卡类型
    async _QueryTypeList() {
      const { data, code, message } = await this.$request.fetchTypeNames();
      if (code === 0) {
        this.typeList = [...data.typeNames] || [];
      } else {
        this.$message.error(message);
      }
    },
    async changeGrade() {
      // this._QueryData();
      // this._GradeList();
      // this._QuerySubjectList();
    },
    async _GradeList() {
      //查询年级列表
      const { data, code, message } = await this.$request.fetchGradeList();
      if (code == 0) {
        this.gradeList = [...data.gradeNames] || [];
        this.query.gradeName = this.gradeList[0];
        this._QuerySubjectList(this.gradeList[0]);
      } else {
        this.$message.error(message);
      }
    },
    async _QuerySubjectList(grade, dont) {
      //查询科目列表
      let param = {};
      if (grade) {
        param.gradeName = grade;
      }
      const { data, code, message } = await this.$request.fetchSubjectList(
        param
      );
      if (code === 0) {
        this.subjectList = data.list.map((item) => {
          return {
            value: item.subjectId,
            label: item.subjectName,
          };
        });
      } else {
        this.$message.error(message);
      }
    },
  },
};
</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>