班级学员管理

xiangpei

2024-06-04 c87c4fe5aa3987d61b10d57208232a94eec83d7c

 src/views/Manage/TestPaper/QuestionBank.vue

@@ -8,213 +8,141 @@
        <div class="content">
          <!-- 试卷生成按钮 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
            <el-button
              type="primary"
              @click="getDialogFormVisible"
            >录入题目</el-button>
            <el-popover placement="bottom" trigger="click">
              <el-button type="warning" size="mini" v-for="item in editUrlEnum" :key="item.key"
                @click="getDialogFormVisible(item.name)">{{ item.name }}
              </el-button>
              <el-button slot="reference" type="primary" class="link-left">录入题目</el-button>
            </el-popover>
          </div>
          <!-- 搜索 -->
          <div>
            <el-form
              :inline="true"
              :model="formLabelAlign"
              class="demo-form-inline"
              label-width="80px"
            >
            <el-form :inline="true" :model="formLabelAlign" class="demo-form-inline" label-width="80px">
              <el-form-item>
                <el-input
                  v-model="formLabelAlign.type"
                  placeholder="题目名"
                ></el-input>
                <el-input v-model="formLabelAlign.type" placeholder="题目名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="全部科目"
                >
                  <el-option
                    label="全部科目"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="语文"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="数学"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="英语"
                    value="beijing"
                  ></el-option>
                <el-select v-model="formLabelAlign.region" placeholder="全部科目">
                  <el-option label="全部科目" value="shanghai"></el-option>
                  <el-option label="语文" value="beijing"></el-option>
                  <el-option label="数学" value="beijing"></el-option>
                  <el-option label="英语" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="选择题"
                >
                  <el-option
                    label="选择题"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="问答题"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="判断题"
                    value="beijing"
                  ></el-option>
                <el-select v-model="formLabelAlign.region" placeholder="选择题">
                  <el-option label="选择题" value="shanghai"></el-option>
                  <el-option label="问答题" value="beijing"></el-option>
                  <el-option label="判断题" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="">
                <el-button
                  style="width:100px;"
                  type="primary"
                  size="small"
                >查询</el-button>
                <el-button style="width:100px;" type="primary" size="small" @click="search()">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格 -->
          <el-table
            :header-cell-style="getRowClass"
            :data="tableData"
            border
            style="width: 100%;"
          >
            <el-table-column
              align="center"
              prop="title"
              label="题目名"
            >
          <el-table v-loading="listLoading" :header-cell-style="getRowClass" :data="tableData" border style="width: 100%;">
            <el-table-column align="center" prop="title" label="题目名">
            </el-table-column>
            <el-table-column
              align="center"
              prop="subject"
              label="科目"
            >
            <el-table-column align="center" prop="subject" label="科目">
            </el-table-column>
            <el-table-column
              align="center"
              prop="type"
              label="题目类型"
            >
            <el-table-column align="center" prop="type" label="题目类型">
            </el-table-column>
            <el-table-column
              align="center"
              prop="score"
              label="参考答案"
            >
            <el-table-column align="center" prop="score" label="参考答案">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
            <el-table-column label="操作" align="center">
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </el-table-column>
          </el-table>
          <div
            class="block"
            style="display: flex; margin-top: 40px;"
          >
            <el-pagination
              style="margin:auto"
              background
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
          <div class="block" style="display: flex; margin-top: 40px;">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex"
              :limit.sync="queryParam.pageSize" @pagination="search" />
          </div>
        </div>
      </div>

    </div>
    <PopUp
      ref="popUp"
      @children="parentGoods"
    />
    <!-- 填空 -->
    <el-dialog :visible.sync="gapVisible" :close-on-click-modal="false">
      <gap ref="gap" @children="parentGoods" />
    </el-dialog>
    <!-- 多选 -->
    <el-dialog :visible.sync="multipleVisible" :close-on-click-modal="false">
      <multiple ref="multiple" @children="parentGoods" />
    </el-dialog>
    <!-- 简答 -->
    <el-dialog :visible.sync="shortVisible" :close-on-click-modal="false">
      <short ref="short" @children="parentGoods" />
    </el-dialog>
    <!-- 单选 -->
    <el-dialog :visible.sync="singleVisible" :close-on-click-modal="false">
      <single ref="single" @children="parentGoods" />
    </el-dialog>
    <!-- 判断 -->
    <el-dialog :visible.sync="truesVisible" :close-on-click-modal="false">
      <trues ref="trues" @children="parentGoods" />
    </el-dialog>
  </div>
</template>
<script>
// 引入彈出窗口組件
import PopUp from "../../../components/PopUp/Question.vue";
import gap from "@/components/PopUp/gap-filling.vue";
import multiple from "@/components/PopUp/multiple-choice.vue";
import short from "@/components/PopUp/short-answer.vue";
import single from "@/components/PopUp/single-choice.vue";
import trues from "@/components/PopUp/true-false.vue";
import { mapGetters, mapState } from 'vuex'
import questionApi from '@/api/question'

export default {
  // 注册
  components: {
    PopUp,
    gap,
    multiple,
    short,
    single,
    trues,
  },
  data() {
    return {
      listLoading: true,
      queryParam: {
        questionType: null,
        subjectId: null,
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      gapVisible: false,
      multipleVisible: false,
      shortVisible: false,
      singleVisible: false,
      truesVisible: false,
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      },
      tableData: [
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A", "B"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: ["A"],
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.search()
  },
  methods: {
    // 获取列表
    search() {
      this.listLoading = true
      questionApi.pageList(this.queryParam).then(re => {
        this.tableData = re.data
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
        this.listLoading = false
      })
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
@@ -223,7 +151,6 @@
    getRowClass() {
      return "background:#d2d3d6";
    },

    // 生成试卷
    getCreate() {
      // 跳转到生成页面
@@ -232,10 +159,25 @@
        path: "/manage/test-paper-generation",
      });
    },

    // 点击后调用弹窗组件的方法,开启弹窗
    getDialogFormVisible() {
      this.$refs.popUp.showDialog();
    getDialogFormVisible(value) {
      switch (value) {
        case "填空题":
          this.gapVisible = true;
          break;
        case "多选题":
          this.multipleVisible = true;
          break;
        case "简答题":
          this.shortVisible = true;
          break;
        case "单选题":
          this.singleVisible = true;
          break;
        case "判断题":
          this.truesVisible = true;
          break;
      }
    },
    // 弹窗
    // 接收弹窗组件返回的表单值
@@ -243,12 +185,21 @@
      console.log(obj, "弹窗组件的表单值");
    },
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      questionTypeEnum: state => state.exam.question.typeEnum,
      editUrlEnum: state => state.exam.question.editUrlEnum
    }),
    ...mapState('exam', { subjects: state => state.subjects })
  }
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}

// 内容
.content {
  width: 1262px;
@@ -258,5 +209,3 @@
  border-radius: 10px;
}
</style>