班级学员新增、修改

xiangpei

2024-06-06 0f823d771d6a876c8990ad5b7dd80c835c38c53f

 src/views/Manage/TestPaper/QuestionBank.vue

@@ -8,247 +8,271 @@
        <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="queryParam" class="demo-form-inline" label-width="80px">
              <el-form-item>
                <el-input
                  v-model="formLabelAlign.type"
                  placeholder="题目名"
                ></el-input>
                <el-input v-model="queryParam.content" placeholder="请输入题目" clearable></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="queryParam.subjectId" placeholder="请选择科目" clearable multiple @change="search">
                  <el-option v-for="item in subjects" :key="item.id" :value="item.id" :label="item.name"></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="queryParam.questionType" placeholder="请选择题型" clearable multiple @change="search">
                  <el-option v-for="item in questionTypeEnum" :key="item.key" :value="item.key"
                    :label="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="queryParam.status" placeholder="请选择状态" clearable @change="search">
                  <el-option value="1" label="启用"></el-option>
                  <el-option value="2" label="禁用"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="">
                <el-button
                  style="width:100px;"
                  type="primary"
                  size="small"
                >查询</el-button>
              <el-form-item>
                <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="shortTitle" label="题目" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              align="center"
              prop="subject"
              label="科目"
            >
            <el-table-column align="center" prop="subjectName" label="科目" width="150px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="type"
              label="题目类型"
            >
            <el-table-column align="center" prop="questionTypeName" label="题型" width="100px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="score"
              label="参考答案"
            >
            <el-table-column align="center" prop="difficult" label="难度" width="60px" />
            <el-table-column align="center" prop="createTime" label="创建时间" width="160px" />
            <el-table-column label="状态" prop="status" width="70px">
              <template slot-scope="{row}">
                <el-tag :type="row.status === '禁用' ? 'danger' : 'success'">
                  {{ row.status ? row.status : '启用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            <el-table-column label="操作" align="center" width="300px">
              <template slot-scope="{row}">
                <el-button size="mini" @click="showQuestion(row)">预览</el-button>
                <el-button size="mini" @click="editQuestion(row)">编辑</el-button>
                <el-button size="mini" type="primary" @click="statusQuestion(row)">{{ row.status === "禁用" ? "启用" : "禁用"
                  }}</el-button>
                <el-popconfirm title="确认删除吗" @confirm="deleteQuestion(row)">
                  <el-button slot="reference" size="mini" type="danger" class="link-left">删除</el-button>
                </el-popconfirm>
              </template>
            </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>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize" @pagination="search" />
        </div>
      </div>

    </div>
    <PopUp
      ref="popUp"
      @children="parentGoods"
    />

    <!-- 填空 -->
    <el-dialog :visible.sync="gapVisible" :close-on-click-modal="false" v-if="gapVisible">
      <gap ref="gap" @children="parentGoods" @callback="callback" :id="updateId" />
    </el-dialog>
    <!-- 多选 -->
    <el-dialog :visible.sync="multipleVisible" :close-on-click-modal="false" v-if="multipleVisible">
      <multiple ref="multiple" @children="parentGoods" @callback="callback" :id="updateId" />
    </el-dialog>
    <!-- 简答 -->
    <el-dialog :visible.sync="shortVisible" :close-on-click-modal="false" v-if="shortVisible">
      <short ref="short" @children="parentGoods" @callback="callback" :id="updateId" />
    </el-dialog>
    <!-- 单选 -->
    <el-dialog :visible.sync="singleVisible" :close-on-click-modal="false" v-if="singleVisible">
      <single ref="single" @children="parentGoods" @callback="callback" :id="updateId" />
    </el-dialog>
    <!-- 判断 -->
    <el-dialog :visible.sync="truesVisible" :close-on-click-modal="false" v-if="truesVisible">
      <trues ref="trues" @children="parentGoods" @callback="callback" :id="updateId" />
    </el-dialog>

    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%">
      <QuestionShow :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading" />
    </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'
import QuestionShow from '@/components/PopUp/question/Show'
import subjectApi from '@/api/subject'
import Pagination from '@/components/Pagination'

export default {
  // 注册
  components: {
    PopUp,
    gap,
    multiple,
    short,
    single,
    trues,
    QuestionShow,
    Pagination
  },
  data() {
    return {
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      updateId: '',
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      },
      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"],
        },
      ],
      listLoading: true,
      queryParam: {
        questionType: [],
        subjectId: [],
        content: '',
        status: '',
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      gapVisible: false,
      multipleVisible: false,
      shortVisible: false,
      singleVisible: false,
      truesVisible: false,
      tableData: [],
      subjects: []
    };
  },
  created() {
    this.search()
    this.getSubjects();
  },
  methods: {
    // 返回上一个页面
    goBack() {
      this.$router.back();
    // 获取科目
    getSubjects() {
      subjectApi.list().then(re => {
        this.subjects = re.data
      })
    },
    callback() {
      this.gapVisible = false;
      this.multipleVisible = false;
      this.shortVisible = false;
      this.singleVisible = false;
      this.truesVisible = false;
      this.search()
    },
    // 获取列表
    search() {
      this.listLoading = true
      questionApi.pageList(this.queryParam).then(re => {
        this.tableData = re.data.list
        this.total = re.data.total
        this.queryParam.pageSize = re.data.pageSize
        this.queryParam.pageIndex = re.data.pageNum
        this.listLoading = false
      })
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    },

    // 生成试卷
    getCreate() {
      // 跳转到生成页面
      //跳转到对应的管理页面
      this.$router.push({
        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;
      }
      this.updateId = '';
    },
    // 弹窗
    // 接收弹窗组件返回的表单值
    parentGoods(obj) {
      console.log(obj, "弹窗组件的表单值");
    },
    showQuestion(row) {
      let _this = this
      this.questionShow.dialog = true
      this.questionShow.loading = true
      questionApi.select(row.id).then(re => {
        _this.questionShow.qType = re.data.questionType
        _this.questionShow.question = re.data
        _this.questionShow.loading = false
      })
    },
    editQuestion(row) {
      this.getDialogFormVisible(row.questionTypeName);
      this.updateId = row.id;
    },
    statusQuestion(row) {
      let question = {
        id: row.id,
        status: row.status === '禁用' ? '启用' : '禁用'
      }
      questionApi.updateStatus(question).then(re => {
        if (re.code === 1) {
          this.$message.success(re.message)
          this.search()
        } else {
          this.$message.error(re.message)
        }
      })
    },
    deleteQuestion(row) {
      let _this = this
      questionApi.deleteQuestion(row.id).then(re => {
        if (re.code === 1) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      questionTypeEnum: state => state.exam.question.typeEnum,
      editUrlEnum: state => state.exam.question.editUrlEnum
    }),
    ...mapGetters('exam', ['subjectEnumFormat']),
  }
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}

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