examtest/test_client/src/views/question/questionchoose.vue

<template>
  <el-dialog title="选取试题" :visible.sync="chooseVisible_" width="80%" >
    <div style="margin-top:10px">
      <el-cascader
            v-model="questioncatC"
            :options="questioncatData"
            clearable
            style="width: 400px"
            @change="handleFilter"
          ></el-cascader>
      <el-select
        v-model="listQuery.type"
        placeholder="题型"
        clearable
        style="width: 120px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="search"
        placeholder="输入题干进行搜索"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
          >搜索</el-button>
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-refresh-left"
            @click="resetFilter"
          >刷新重置</el-button>
          </div>
          <div style="margin-top:10px">
    </div>
<el-table
      :data="tableData.results"
      style="width: 100%;margin-top:10px;"
      border
      stripe
      fit
      v-loading="listLoading"
      highlight-current-row
      max-height="400"
      ref="table"
    >
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column align="left" label="题干">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="left" label="所属题库">
        <template slot-scope="scope">{{ scope.row.questioncat_name }}</template>
      </el-table-column>
      <el-table-column align="left" label="题型">
        <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
      <el-table-column align="left" label="难易度">
        <template slot-scope="scope">{{ scope.row.level }}</template>
      </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
            <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleDetail(scope)"
            icon="el-icon-more"
          ></el-button>
        </template>
      </el-table-column>
</el-table>
    <pagination
      v-show="tableData.count>0"
      :total="tableData.count"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
<el-dialog
  title="题目详情"
  :visible.sync="dialogVisible"
  width="30%"
  append-to-body>
  <div>{{question.type}}</div>
  <div>{{question.name}}</div>
  <ul id="repeat">
  <li v-for="(value,key,index) in question.options">
    {{ key }}:{{value}}
  </li>
  </ul>
  <div>正确答案{{question.right}}</div>
  <div>{{question.resolution}}</div>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
      <div style="text-align:left;">
        <el-button type="primary" @click="choseQuestions('table')">选中</el-button>
      </div>
  </el-dialog>
</template>

<script>
import {
  getQuestioncatAll,
  getQuestionList,
} from "@/api/question";
import { genTree, deepClone } from "@/utils";
import Pagination from "@/components/Pagination";


const listQuery = {
  page: 1,
  limit: 20,
  search:''
};
export default {
  name:'Questionchoose',
  components: { Pagination },
  props: {
    chooseVisible: Boolean,
  },
  data() {
    return {
      questioncat: {
        id: "",
        name: ""
      },
      listQuery: listQuery,
      search:"",
      tableData: {
        count:0,
        results:[]
      },
      questioncatData:[],
      listLoading: true,
      dialogVisible: false,
      typeOptions: [
        { key: 1, label: "单选", value: "单选" },
        { key: 2, label: "多选", value: "多选"},
        { key: 3, label: "判断", value: "判断" }
      ],
      question:{},
      questioncatC:[]
    };
  },
  computed: {
    chooseVisible_: {
        get() {
          return this.chooseVisible;
        },
        set(val) {
          this.$emit('closeDg',val);
        }
      }
  },
  created() {
    this.getList();
    this.getQuestioncatAll();
  },
  methods: {
    getList(query = this.listQuery) {
      this.listLoading = true;
      getQuestionList(query).then(response => {
        if(response.data.results){
          this.tableData = response.data
        }
        this.listLoading = false;
      });
    },
    getQuestioncatAll() {
      getQuestioncatAll().then(response => {
        this.questioncatData = genTree(response.data);
      });
      
    },
    handleFilter() {
      if(this.questioncatC.length) {
      this.listQuery.questioncat = this.questioncatC[this.questioncatC.length-1]
    }else{
      this.listQuery.questioncat = ''
    }
      this.listQuery.page = 1;
      this.getList();
    },
    resetFilter() {
      this.search = ""
      this.listQuery = listQuery
      this.getList();
    },
    handleSearch() {
      this.getList({ search: this.search });
    },
    handleDetail(scope) {
      this.dialogVisible = true
      this.question = scope.row
    },
    choseQuestions(table) {
        const _selectData = this.$refs.table.selection
        this.$emit('choseQ',_selectData);
        this.$emit('closeDg',false);
        this.$refs.table.clearSelection();
    }
  }
};
</script>