|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="question-repository">
|
|
|
+ <div>
|
|
|
<h1>Question Repository</h1>
|
|
|
<div v-if="!multipleMode">
|
|
|
<el-button icon="el-icon-search" type="primary">搜索</el-button>
|
|
|
@@ -11,180 +11,59 @@
|
|
|
<el-button @click="multipleMode = !multipleMode" type="info" icon="el-icon-finished">完成
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- <!-- <div>-->
|
|
|
- <!-- <el-select v-model="select_value" filterable placeholder="请选择">-->
|
|
|
- <!-- <el-option-->
|
|
|
- <!-- v-for="item in options"-->
|
|
|
- <!-- :key="item.value"-->
|
|
|
- <!-- :label="item.label"-->
|
|
|
- <!-- :value="item.value">-->
|
|
|
- <!-- </el-option>-->
|
|
|
- <!-- </el-select>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <ul v-if="select_value === '选项1'">-->
|
|
|
- <ul>
|
|
|
- <li v-if="!multipleMode" v-for="(item, index) in packages">
|
|
|
- <question-package :name="item.name" :description="item.description" :logo="item.logo" :user="item.user"/>
|
|
|
- </li>
|
|
|
- <li v-if="multipleMode" v-for="(item, index) in packages">
|
|
|
- <el-checkbox v-model="multipleChoices[index]"></el-checkbox>
|
|
|
- <question-package :name="item.name" :description="item.description" :logo="item.logo" :user="item.user"/>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <!-- <div v-else-if="select_value === '选项2'">-->
|
|
|
- <!-- <el-row>-->
|
|
|
- <!-- <el-col :span="24" v-for="(item, index) in briefQuestionList">-->
|
|
|
- <!-- <BriefQuestionCard :question-v-o="item"/>-->
|
|
|
- <!-- </el-col>-->
|
|
|
- <!-- </el-row>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <div v-else>-->
|
|
|
- <!-- <h1>其他排列顺序，敬请期待</h1>-->
|
|
|
- <!-- </div>-->
|
|
|
+ <div>
|
|
|
+ <h3>筛选</h3>
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <el-checkbox-group v-model="filterCheckboxGroup">
|
|
|
+ <el-checkbox-button label="java"></el-checkbox-button>
|
|
|
+ <el-checkbox-button label="python"></el-checkbox-button>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3>排序</h3>
|
|
|
+ <el-button-group>
|
|
|
+ <el-button>序号</el-button>
|
|
|
+ <el-button>类型</el-button>
|
|
|
+ <el-button>难度</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ <question-list ref="qr-list"></question-list>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import QuestionPackage from "../../../QuestionItem/PackageItem";
|
|
|
-import BriefQuestionCard from "../../../card/BriefQuestionCard";
|
|
|
+import QuestionList from "@/components/QuestionItem/ListItem";
|
|
|
|
|
|
export default {
|
|
|
name: "QuestionRepository",
|
|
|
components: {
|
|
|
- BriefQuestionCard,
|
|
|
- "question-package": QuestionPackage,
|
|
|
+ QuestionList,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // 是否为多选模式
|
|
|
+ // 点击批量处理
|
|
|
multipleMode: false,
|
|
|
- // 对应多选模式下的选项，等前后端对接时可能要改具体的数据结构
|
|
|
- multipleChoices: [],
|
|
|
|
|
|
- // options: [{
|
|
|
- // value: '选项1',
|
|
|
- // label: 'Modules'
|
|
|
- // }, {
|
|
|
- // value: '选项2',
|
|
|
- // label: 'UnDo'
|
|
|
- // }, {
|
|
|
- // value: '选项3',
|
|
|
- // label: 'Others'
|
|
|
- // }],
|
|
|
- // select_value: '选项1',
|
|
|
- packages: [
|
|
|
- {
|
|
|
- name: 'java',
|
|
|
- description: 'thinking in java',
|
|
|
- logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
|
|
|
- user: "user1",
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'c',
|
|
|
- description: 'c primer plus',
|
|
|
- logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
|
|
|
- user: 'user2',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'python',
|
|
|
- description: 'mooctest.net',
|
|
|
- logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
|
|
|
- user: 'user3',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'lol',
|
|
|
- description: 'league of legends',
|
|
|
- logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
|
|
|
- user: 'gamer',
|
|
|
- }
|
|
|
- ],
|
|
|
- // briefQuestionList: [
|
|
|
- // {
|
|
|
- // id: "00001",
|
|
|
- // type1: 0,
|
|
|
- // stem: "小苏今年几岁了？",
|
|
|
- // options: {
|
|
|
- // "A": "15",
|
|
|
- // "B": "25",
|
|
|
- // "C": "18",
|
|
|
- // "D": "22"
|
|
|
- // },
|
|
|
- // blanks: null,
|
|
|
- // answer: "D",
|
|
|
- // keyPoints: "年龄",
|
|
|
- // analysis: "小苏是2000年出生了，所以得出今年其虚岁为22岁。",
|
|
|
- // tags: ['苏学', '年龄'],
|
|
|
- // knowledgeId: ['计算']
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: "00002",
|
|
|
- // type1: 0,
|
|
|
- // stem: "小苏有多牛？",
|
|
|
- // options: {
|
|
|
- // "A": "相当牛",
|
|
|
- // "B": "很牛",
|
|
|
- // "C": "不牛",
|
|
|
- // "D": "421宿舍之最牛"
|
|
|
- // },
|
|
|
- // blanks: null,
|
|
|
- // answer: "D",
|
|
|
- // keyPoints: "能力",
|
|
|
- // analysis: "小苏是421能力最强，素质最好的一位，所以肯定是421宿舍之最牛！",
|
|
|
- // tags: ['苏学', '能力'],
|
|
|
- // knowledgeId: ['常识']
|
|
|
- // }
|
|
|
- // ]
|
|
|
+ // 筛选条件
|
|
|
+ filterCheckboxGroup: [],
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 点击批量处理
|
|
|
- clickMulSelect(){
|
|
|
+ clickMulSelect() {
|
|
|
const _this = this
|
|
|
-
|
|
|
- _this.multipleChoices = [] // 可能需要改的数据结构
|
|
|
- for(let i = 0;i<_this.packages.length;i++){
|
|
|
- _this.multipleChoices.push(false)
|
|
|
- }
|
|
|
-
|
|
|
_this.multipleMode = !_this.multipleMode
|
|
|
},
|
|
|
|
|
|
// 批量处理时点击删除
|
|
|
- clickMulDelete(){
|
|
|
+ clickMulDelete() {
|
|
|
const _this = this
|
|
|
-
|
|
|
- let tmp = _this.packages.filter(function (item, index) {
|
|
|
- return !_this.multipleChoices[index]
|
|
|
- })
|
|
|
-
|
|
|
- _this.multipleChoices = [] // 可能需要改的数据结构
|
|
|
- for(let i = 0;i<_this.packages.length;i++){
|
|
|
- _this.multipleChoices.push(false)
|
|
|
- }
|
|
|
-
|
|
|
- _this.packages = tmp
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.question-repository {
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-ol, ul {
|
|
|
- list-style: none;
|
|
|
-}
|
|
|
-
|
|
|
-li {
|
|
|
- display: inline-block;
|
|
|
- text-align: -webkit-match-parent;
|
|
|
-}
|
|
|
|
|
|
-/*span.el-checkbox__input {*/
|
|
|
-/* position: absolute;*/
|
|
|
-/* top: 0px;*/
|
|
|
-/* left: 0px;*/
|
|
|
-/*}*/
|
|
|
-</style>
|
|
|
+</style>
|
