Leone update code

src/components/Filter.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-space>
+    <span>{{ title }}</span>
+    <el-checkbox-group v-model="checkboxGroup" size="mini" @change="handleFilterChange">
+      <el-checkbox-button v-for="(item, index) in checkboxOption"
+                          :label="item.label">
+        {{ item.title }}
+      </el-checkbox-button>
+    </el-checkbox-group>
+  </el-space>
+</template>
+
+<script>
+export default {
+  name: "Filter",
+  props: {
+    title: String,
+    checkboxGroup: Array,
+    checkboxOption: Array,
+  },
+  methods:{
+    handleFilterChange(){
+      const _this = this
+      _this.$emit("filterChange");
+    },
+  },
+}
+</script>
+
+<style scoped>
+</style>

src/components/Sorter.vue

@@ -0,0 +1,40 @@
+<template>
+<el-space>
+  <span>排序</span>
+  <el-radio-group v-model="choice" size="mini" @change="handleSorterChange">
+    <el-radio-button v-for="(item, index) in option" :label="item.label">
+      {{item.title}}
+    </el-radio-button>
+  </el-radio-group>
+  <el-button @click="handleDirectionChange" size="mini" type="success">
+    {{ direction ? "正序" : "倒序" }}
+  </el-button>
+</el-space>
+</template>
+
+<script>
+export default {
+  name: "Sorter",
+  props: {
+    choice: String,
+    option: Array,
+    direction: Boolean,
+  },
+  methods:{
+    // 改变正序或倒序
+    handleDirectionChange() {
+      const _this = this
+      _this.$emit("directionChange")
+    },
+
+    handleSorterChange(){
+      const _this = this
+      _this.$emit("sorterChange");
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/bok/BokMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view :key="$route.path"/>
+  <router-view :key="$route.path" style="width: 80%"/>
 </template>
 
 <script>

src/components/bok/SideBar.vue

@@ -17,7 +17,7 @@
         <i class="el-icon-box"></i>
         <template #title>题库</template>
       </el-menu-item>
-      <el-menu-item index="knowledge">
+      <el-menu-item index="knowledgePoint">
         <i class="el-icon-menu"></i>
         <template #title>知识点</template>
       </el-menu-item>
@@ -25,10 +25,10 @@
         <i class="el-icon-connection"></i>
         <template #title>知识图谱</template>
       </el-menu-item>
-<!--      <el-menu-item index="completion">-->
-<!--        <i class="el-icon-notebook-1"></i>-->
-<!--        <template #title>已做</template>-->
-<!--      </el-menu-item>-->
+      <el-menu-item index="paper">
+        <i class="el-icon-document"></i>
+        <template #title>试卷袋</template>
+      </el-menu-item>
       <el-menu-item index="collection">
         <i class="el-icon-collection"></i>
         <template #title>收藏</template>

src/components/bok/bokMain/Collection.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
     <h1>Collection</h1>
     <el-button @click="createQuestion">新建题目</el-button>
     <el-button @click="createQuestionByGruop">新建题目组</el-button>
@@ -49,7 +48,6 @@
     </el-drawer>
 
 
-  </div>
 </template>
 
 <script lang="ts">

src/components/bok/bokMain/Knowledge.vue

@@ -1,13 +1,28 @@
 <template>
-<div><h1>Knowledge</h1></div>
+  <el-space :fill="true" direction="vertical" class="knowledge-wrapper">
+    <h1>Knowledge</h1>
+    <div class="ql-container">
+      <question-list ref="question-list"></question-list>
+    </div>
+  </el-space>
 </template>
 
 <script>
+import ListItem from "@/components/QuestionItem/ListItem";
+
 export default {
-  name: "Knowledge"
+  name: "Knowledge",
+  components: {
+    "question-list": ListItem,
+  },
 }
 </script>
 
 <style scoped>
+.knowledge-wrapper{
+}
 
-</style>
+.ql-container{
+  border: 1px solid black;
+}
+</style>

src/components/bok/bokMain/QuestionPackage.vue → src/components/bok/bokMain/Paper.vue

@@ -1,10 +1,10 @@
 <template>
-<div><h1>Question Package</h1></div>
+<div><h1>Paper</h1></div>
 </template>
 
 <script>
 export default {
-  name: "QuestionPackage"
+  name: "Paper"
 }
 </script>
 

src/components/bok/bokMain/QuestionRepository/Search.vue → src/components/bok/bokMain/PaperRepository/Search.vue

@@ -1,10 +1,10 @@
 <template>
-<div><h1>Question Repository Search</h1></div>
+<div><h1>Paper Search</h1></div>
 </template>
 
 <script>
 export default {
-  name: "QRSearch"
+  name: "PSearch"
 }
 </script>
 

src/components/bok/bokMain/PaperRepository/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="question-repository">
+    <h1>Question Repository</h1>
+    <div v-if="!multipleMode">
+      <el-button icon="el-icon-search" type="primary">搜索</el-button>
+      <el-button icon="el-icon-folder-add" type="success">新建</el-button>
+      <el-button @click="clickMulSelect" icon="el-icon-more" type="warning">批量处理</el-button>
+    </div>
+    <div v-else>
+      <el-button type="danger" icon="el-icon-delete" @click="clickMulDelete">删除</el-button>
+      <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[String(item.id)]"></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>
+</template>
+
+<script>
+import QuestionPackage from "../../../QuestionItem/PackageItem";
+import BriefQuestionCard from "../../../card/BriefQuestionCard";
+
+export default {
+  name: "Paper",
+  components: {
+    BriefQuestionCard,
+    "question-package": QuestionPackage,
+  },
+  data() {
+    return {
+      // 是否为多选模式
+      multipleMode: false,
+      // 对应多选模式下的选项，等前后端对接时可能要改具体的数据结构
+      multipleChoices: {},
+
+      // options: [{
+      //   value: '选项1',
+      //   label: 'Modules'
+      // }, {
+      //   value: '选项2',
+      //   label: 'UnDo'
+      // }, {
+      //   value: '选项3',
+      //   label: 'Others'
+      // }],
+      // select_value: '选项1',
+      packages: [
+        {
+          id: 0,
+          name: 'java',
+          description: 'thinking in java',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: "user1",
+        },
+        {
+          id: 1,
+          name: 'c',
+          description: 'c primer plus',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: 'user2',
+        },
+        {
+          id: 2,
+          name: 'python',
+          description: 'mooctest.net',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: 'user3',
+        },
+        {
+          id: 3,
+          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: ['常识']
+      //   }
+      // ]
+    }
+  },
+  methods: {
+    // 点击批量处理
+    clickMulSelect(){
+      const _this = this
+
+      _this.multipleChoices = {} // 可能需要改的数据结构
+      for (let item of _this.packages) {
+        _this.multipleChoices[String(item.id)] = false
+      }
+
+      _this.multipleMode = !_this.multipleMode
+    },
+
+    // 批量处理时点击删除
+    clickMulDelete(){
+      const _this = this
+
+      _this.packages = _this.packages.filter(function (item, index) {
+        return !_this.multipleChoices[String(item.id)]
+      })
+
+      // _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>

src/components/bok/bokMain/QuestionRepository/index.vue

@@ -1,190 +1,226 @@
 <template>
-  <div class="question-repository">
+  <el-space :fill="true" direction="vertical" class="qr-wrapper">
     <h1>Question Repository</h1>
-    <div v-if="!multipleMode">
-      <el-button icon="el-icon-search" type="primary">搜索</el-button>
-      <el-button icon="el-icon-folder-add" type="success">新建</el-button>
-      <el-button @click="clickMulSelect" icon="el-icon-more" type="warning">批量处理</el-button>
-    </div>
-    <div v-else>
+    <el-space direction="vertical" v-if="!multipleMode">
+      <el-button v-if="!searchMode" @click="selectSearch" icon="el-icon-search" type="primary">搜索</el-button>
+      <el-space v-else>
+        <el-input placeholder="请输入内容" v-model="searchContent" @keydown.enter="clickSearch">
+          <template #append>
+            <el-button icon="el-icon-search" @click="clickSearch"></el-button>
+          </template>
+        </el-input>
+        <el-button type="danger" size="mini" @click="cancelSearch">取消</el-button>
+      </el-space>
+      <el-space>
+        <el-button icon="el-icon-folder-add" type="success">新建</el-button>
+        <el-button @click="clickMulSelect" icon="el-icon-more" type="warning">批量处理</el-button>
+      </el-space>
+    </el-space>
+    <el-space v-else>
       <el-button type="danger" icon="el-icon-delete" @click="clickMulDelete">删除</el-button>
       <el-button @click="multipleMode = !multipleMode" type="info" icon="el-icon-finished">完成
       </el-button>
+    </el-space>
+    <el-space direction="vertical">
+      <el-space>
+        <h3>筛选</h3>
+        <el-button type="danger" @click="clearFilter" size="mini">清空</el-button>
+      </el-space>
+      <el-space direction="vertical" alignment="flex-start">
+        <qr-filter :title="typeFilter.title" :checkboxOption="typeFilter.option" :checkboxGroup="typeFilter.group"
+                   @filterChange="handleTypeFilter"/>
+        <qr-filter :title="knowledgeFilter.title" :checkboxOption="knowledgeFilter.option"
+                   :checkboxGroup="knowledgeFilter.group"
+                   @filterChange="handleKnowledgeFilter"/>
+        <qr-filter :title="levelFilter.title" :checkboxOption="levelFilter.option"
+                   :checkboxGroup="levelFilter.group"
+                   @filterChange="handleLevelFilter"/>
+        <qr-sorter :choice="sorter.default" :direction="sorter.direction" :option="sorter.option"
+                   @sorterChange="handleSorter" @directionChange="handleSorterDirection"/>
+      </el-space>
+    </el-space>
+    <div class="ql-container">
+      <question-list ref="question-list"></question-list>
     </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>
+  </el-space>
 </template>
 
 <script>
-import QuestionPackage from "../../../QuestionItem/PackageItem";
-import BriefQuestionCard from "../../../card/BriefQuestionCard";
+import QuestionList from "@/components/QuestionItem/ListItem";
+import Filter from "@/components/Filter";
+import Sorter from "@/components/Sorter";
 
 export default {
   name: "QuestionRepository",
   components: {
-    BriefQuestionCard,
-    "question-package": QuestionPackage,
+    QuestionList,
+    "qr-filter": Filter,
+    "qr-sorter": Sorter,
   },
   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: ['常识']
-      //   }
-      // ]
+      // 点击搜索，切换搜索状态
+      searchMode: false,
+      searchContent: "",
+
+      // 筛选条件
+      typeFilter: {
+        title: "题型",
+        group: [],
+        option: [
+          {
+            label: "选择",
+            title: "选择",
+          },
+          {
+            label: "填空",
+            title: "填空",
+          },
+        ],
+      },
+      knowledgeFilter: {
+        title: "知识点",
+        group: [],
+        option: [
+          {
+            label: "java",
+            title: "JAVA",
+          },
+          {
+            label: "python",
+            title: "Python",
+          },
+        ],
+      },
+      levelFilter: {
+        title: "难度",
+        group: [],
+        option: [
+          {
+            label: "easy",
+            title: "简单",
+          },
+          {
+            label: "normal",
+            title: "中等",
+          },
+          {
+            label: "hard",
+            title: "困难",
+          },
+        ],
+      },
+      sorter: {
+        "default": "index",
+        option: [
+          {
+            label: 'index',
+            title: '序号',
+          },
+          {
+            label: 'type',
+            title: '题型',
+          },
+          {
+            label: 'level',
+            title: '难度',
+          },
+        ],
+        direction: true,
+      },
     }
   },
   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]
-      })
+    // 清空筛选条件
+    clearFilter() {
+      const _this = this
+      _this.knowledgeFilter.group = [];
+      _this.levelFilter.group = [];
+      _this.typeFilter.group = [];
+    },
 
-      _this.multipleChoices = [] // 可能需要改的数据结构
-      for(let i = 0;i<_this.packages.length;i++){
-        _this.multipleChoices.push(false)
-      }
+    // 处理排序顺序的筛选
+    handleSorterDirection() {
+      const _this = this
+      _this.sorter.direction = !_this.sorter.direction
+      _this.sort(5)
+    },
+
+    // 处理题型的筛选
+    handleTypeFilter() {
+      console.log(1)
+    },
+
+    // 处理知识点的筛选
+    handleKnowledgeFilter() {
+      console.log(2)
+    },
+
+    // 处理难度的筛选
+    handleLevelFilter() {
+      console.log(3)
+    },
 
-      _this.packages = tmp
+    // 处理排序条件的筛选
+    handleSorter() {
+      console.log(4)
+      const _this = this
+      _this.sorter.direction = true
+      _this.sort(5)
+    },
+
+    // 对题目列表进行排序
+    sort(param) {
+      console.log(param)
+    },
+
+    // 点击搜索
+    selectSearch() {
+      const _this = this
+      _this.searchMode = true
+    },
+
+    // 取消搜索
+    cancelSearch() {
+      const _this = this
+      _this.searchMode = false
     },
-  }
+
+    // 进行关键词搜索
+    clickSearch(){
+      const _this = this
+      if(_this.searchContent === ""){
+        alert("请输入关键词");
+      }else{
+        alert(_this.searchContent);
+      }
+    },
+  },
 }
 </script>
 
 <style scoped>
-.question-repository {
-  padding: 20px;
-}
-
-ol, ul {
-  list-style: none;
+.qr-wrapper {
+  /*width: 80%;*/
 }
 
-li {
-  display: inline-block;
-  text-align: -webkit-match-parent;
+.ql-container {
+  height: auto;
+  width: auto;
+  overflow: auto;
+  border: 1px solid black;
 }
-
-/*span.el-checkbox__input {*/
-/*  position: absolute;*/
-/*  top: 0px;*/
-/*  left: 0px;*/
-/*}*/
 </style>

src/router/index.js

@@ -26,13 +26,6 @@ const routes = [
         path: 'questionRepository',
         name: "QuestionRepository",
         component: () => import("../components/bok/bokMain/QuestionRepository/index"),
-        children:[
-          {
-            path: "search",
-            name: "QR_Search",
-            component: ()=>import("../components/bok/bokMain/QuestionRepository/Search"),
-          },
-        ],
       },
       {
         path: "collection",
@@ -45,9 +38,14 @@ const routes = [
         component: () => import("../components/bok/bokMain/Setting"),
       },
       {
-        path: "knowledge",
+        path: "knowledgePoint",
         name: "Knowledge",
-        component: ()=>import("@/components/bok/bokMain/Knowledge")
+        component: ()=>import("@/components/bok/bokMain/Knowledge"),
+      },
+      {
+        path: "knowledgePoint/:knowledgePointId",
+        name: "KnowledgePoint",
+        component: ()=>import("@/components/bok/bokMain/KnowledgePoint")
       },
       {
         path: "knowledgeGraph",
@@ -55,14 +53,14 @@ const routes = [
         component: ()=>import("@/components/bok/bokMain/KnowledgeGraph")
       },
       {
-        path: "questionPackage/:questionPackageId",
-        name: "QuestionPackage",
-        component: ()=>import("@/components/bok/bokMain/QuestionPackage")
+        path: "paper",
+        name: "PaperRepository",
+        component: ()=>import("@/components/bok/bokMain/PaperRepository/index")
       },
       {
-        path: "knowledgePoint/:knowledgePointId",
-        name: "KnowledgePoint",
-        component: ()=>import("@/components/bok/bokMain/KnowledgePoint")
+        path: "paper/:paperId",
+        name: "Paper",
+        component: ()=>import("@/components/bok/bokMain/Paper")
       },
     ]
   },