baoman / Ezquiz_Platform

  <template>
    <div>

      <back-box>
        <template slot="title">

          <span>备题组卷</span>
        </template>
        <template slot="btns">

          <el-tooltip effect="dark" content="创建答题卡" placement="left">
            <el-button
              type="primary"
              icon="el-icon-plus"
              plain
              circle

              @click="toAdd({})"

            ></el-button>
          </el-tooltip>

        </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
              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.typeName"
            placeholder="选择类型"
            @change="_QueryData()"
          >
            <el-option
              v-for="item in typeList"
              :key="item"
              :label="item"
              :value="item"
              >{{ item }}
            </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>

      <p class="tips">
        <span>另有25份已经归档的答题卡,</span>
        <router-link to="/examinationPaperRecycle">点击查看&gt;&gt;</router-link>
      </p>
      <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.answerNum }}
              <em class="s-line">|</em>
              预计时长：{{ item.time }}
              <em class="s-line">|</em>
              授课端同步：
              <span
                class="clazz"
                v-for="(clazzChild, indexs) in item.aboutClazz"
                :key="clazzChild"
                >{{
                  `${clazzChild}班${
                    indexs != item.aboutClazz.length - 1 ? "、" : ""
                  }`
                }}
                <i class="el-icon-success"></i
              ></span>
            </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="primary"
                size="mini"
                circle
                icon="el-icon-edit"
                @click="toEdit(item)"
              ></el-button>
            </el-tooltip>
            <el-dropdown
              trigger="click"
              @command="handleDropdownClick($event, item)"
            >
              <el-button
                type="info"
                size="mini"
                circle
                icon="el-icon-more"
              ></el-button>
              <el-dropdown-menu slot="dropdown">

                <el-dropdown-item :command="1" v-if="this.$store.info.id == item.id">修改分享范围</el-dropdown-item>
                <el-dropdown-item :command="2">复制</el-dropdown-item>
                <el-dropdown-item :command="3">归档</el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </li>
      </ul>
      <el-dialog title="选择分享范围" :visible.sync="dialogVisible" width="400">
        <el-form :model="shareForm" :rules="shareRulesForm" label-width="160px">
          <el-form-item label="适用年级：">
            <el-col :span="11">
              <el-input v-model="shareForm.grade"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="share" label="分享范围：">
            <el-radio-group v-model="shareForm.share">
              <el-radio :label="1">任课班级分享</el-radio>
              <el-radio :label="2">全年级分享</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveShare">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>
  export default {

    name: "examinationPaper",

    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: "三班",
              },
            ],
          },
        ],

        dialogVisible: false,
        query: {

          gradeClass: [],

          subjectId: "0",
          typeName: "周测",
          title: "",
        },
        classList: [
          {
            label: "2003班",
            value: "2003",
          },
        ],
        subjectList: [
          {
            label: "语文",
            value: "0",
          },
        ],
        typeList: ["周测"],
        tableData: [
          {
            title: "数学样例试卷202211-324654",
            id: "1062837",
            typeName: "周测",
            answerNum: 45,
            time: 90,
            aboutClazz: [203, 204],
            teacher: "张老师",
            date: "2022-11-04 18:09:49",
            share: 1,

            score: 100,

            gradeName: "二年级",
            subjectId: 1,
            examsDuration: 4800,

            questionList: [
              {
                questionTitle: "f",
                score: 1,
                subQuestions: [
                  {
                    questionIndex: 1,
                    questionType: 2,
                    score: 1,
                    partScore: 0,
                    selectNum: 4,
                    answerOptions: ["A", "B", "C", "D"],
                    correctAnswer: "B",
                  },
                ],
              },
            ],

          },
          {
            title: "数学样例试卷202211-4180949",
            id: "1062838",
            typeName: "周测",
            answerNum: 45,
            time: 90,
            aboutClazz: [203, 204],
            teacher: "张老师",
            date: "2022-11-04 18:09:49",
            share: 1,

            score: 100,

            gradeName: "二年级",
            subjectId: 1,
            examsDuration: 3000,

            questionList: [
              {
                questionTitle: "f",
                score: 1,
                subQuestions: [
                  {
                    questionIndex: 2,
                    questionType: 3,
                    score: 1,
                    partScore: 0,
                    selectNum: 4,
                    answerOptions: ["A", "B", "C", "D"],
                    correctAnswer: "A,C",
                  },
                ],
              },
            ],

          },
        ],
        shareForm: {
          id: "",
          grade: "",
          share: 1,
        },
        shareRulesForm: {
          share: [{ required: true, message: "选择分享范围", trigger: "blur" }],
        },
      };
    },
    methods: {
      toAdd(query) {

        let routerItem = {

          path: "/examinationPaperAdd",

        };
        query ? (routerItem["query"] = { ...query }) : "";
        this.$router.push(routerItem);

      },
      toEdit(item) {
        this.$router.push({
          path: "/examinationPaperEdit",
          query: {

            form: JSON.stringify(item),

          },
        });
      },

      handleDropdownClick(value, item) {
        //更多

        const that = this;
        switch (value) {
          case 1:

            //修改分享范围
            that.shareForm.id = item.id;
            that.shareForm.grade = item.grade;
            that.shareForm.share = item.share || 1;
            that.dialogVisible = true;
            break;

          case 2:

            //复制

            that.toAdd({ type: 2, form: JSON.stringify(item) });

            break;

          case 3:

            //归档

            that.recovery(item);

            break;
        }
      },

      async saveShare() {
        //修改分享范围

        // const { data, code, message } = await this.$request.fetchAnswerList({
        //   ...this.shareForm,
        // });
        // this.loading = false;
        // if (code === 0) {
        this.shareForm.id = "";
        this.shareForm.grade = "";
        this.shareForm.share = 1;
        dialogVisible = false;
        // } else {
        //   this.$message.error(message);
        // }
      },

      async recovery(item) {
        //归档

        // const { data, code, message } = await this.$request.fetchAnswerList({
        //   ...this.shareForm,
        // });
        // if (code === 0) {

        this.tableData = this.tableData.filter((items) => {
          return items.id != item.id;
        });

        // } else {
        //   this.$message.error(message);
        // }
      },

      async changeGrade() {

        //切换班级

        await this._QuerySubjectList();
        this._QueryData();
      },

      async changClazz() {},

      // 查找答题卡类型
      async _QueryTypeList() {
        const { data, code, message } = await this.$request.fetchTypeNames();
        if (code === 0) {
          this.typeList = [...data.typeNames] || [];
        } else {
          this.$message.error(message);
        }
      },
      // 查找班级
      async _QueryClassList() {
        const { data, code, message } = await this.$request.fetchClassList();
        if (code === 0) {
          if (!!data.list) {
            this.classList = data.list.map((item) => {
              return {
                value: item.clazzId,
                label: item.clazzName,
              };
            });
            this.query.clazzId = this.classList[0]?.value;
          }
        } else {
          this.$message.error(message);
        }
      },
      // 查找科目
      async _QuerySubjectList() {
        const { data, code, message } = await this.$request.fetchSubjectList({
          clazzId: this.query.clazzId,
        });
        if (code === 0) {
          this.subjectList = data.list.map((item) => {
            return {
              value: item.subjectId,
              label: item.subjectName,
            };
          });
          this.query.clazzId = this.subjectList[0]?.value;
        } 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.typeName = "";
          this.query.subjectId = "";
        }
        query.clazzId = this.query.clazzId;
        for (let key in query) {
          if (!query[key]) {
            query[key] = null;
          }
        }
        if (!query.clazzId) {
          this.total = 0;
          this.tableData = [];
          this.loading = false;
          return;
        }
        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);
        }
      },
    },

  };

  </script>
  

  <style scoped lang="scss">

  .tips {
    display: flex;
    padding-left: 30px;
    line-height: 16px;
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
  }
  .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: #667ffd;
        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;
        }
      }
      .clazz {
        font-size: 16px;
        color: #667ffd;
        font-weight: 500;
        position: relative;
        margin-right: 8px;
        .el-icon-success {
          position: absolute;
          right: 0;
          top: -5px;
          color: #667ffd;
        }
        &:last-of-type {
          .el-icon-success {
            right: -18px;
          }
        }
      }
      .btn-box {
        flex-shrink: 0;
        .edit {
          margin-right: 12px;
        }
      }
    }
  }

  .answer-header {
    .sel-box {
      .sel {
        min-width: 160px;
      }
      :deep(.el-cascader__tags) {
        flex-wrap: nowrap;
      }
    }
  }

  .dialog-footer {
    text-align: center;
    :deep(.el-button) {
      border-radius: 20px;
      padding: 8px 20px 7px;
      margin: 0 12px;
    }

  }

  </style>