fuliqi
2024-06-06 0af507deb2a8b08a606b795d73c660d02ecb7f49
src/views/Manage/TestPaper/QuestionBank.vue
@@ -12,78 +12,97 @@
              <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-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-form-item>
                <el-button style="width:100px;" type="primary" size="small" @click="search()">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格 -->
          <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 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;">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex"
              :limit.sync="queryParam.pageSize" @pagination="search" />
          </div>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize" @pagination="search" />
        </div>
      </div>
    </div>
    <!-- 填空 -->
    <el-dialog :visible.sync="gapVisible" :close-on-click-modal="false">
      <gap ref="gap" @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">
      <multiple ref="multiple" @children="parentGoods" />
    <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">
      <short ref="short" @children="parentGoods" />
    <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">
      <single ref="single" @children="parentGoods" />
    <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">
      <trues ref="trues" @children="parentGoods" />
    <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>
@@ -96,6 +115,9 @@
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 {
  // 注册
@@ -105,13 +127,24 @@
    short,
    single,
    trues,
    QuestionShow,
    Pagination
  },
  data() {
    return {
      updateId: '',
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      },
      listLoading: true,
      queryParam: {
        questionType: null,
        subjectId: null,
        questionType: [],
        subjectId: [],
        content: '',
        status: '',
        pageIndex: 1,
        pageSize: 10
      },
@@ -121,43 +154,43 @@
      shortVisible: false,
      singleVisible: false,
      truesVisible: false,
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      },
      tableData: [],
      subjects: []
    };
  },
  created() {
    this.search()
    this.getSubjects();
  },
  methods: {
    // 获取科目
    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
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
        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
      })
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    },
    // 生成试卷
    getCreate() {
      // 跳转到生成页面
      //跳转到对应的管理页面
      this.$router.push({
        path: "/manage/test-paper-generation",
      });
    },
    // 点击后调用弹窗组件的方法,开启弹窗
    getDialogFormVisible(value) {
@@ -178,11 +211,51 @@
          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: {
@@ -191,7 +264,7 @@
      questionTypeEnum: state => state.exam.question.typeEnum,
      editUrlEnum: state => state.exam.question.editUrlEnum
    }),
    ...mapState('exam', { subjects: state => state.subjects })
    ...mapGetters('exam', ['subjectEnumFormat']),
  }
};
</script>