mjh

src/components/Filter.vue

@@ -1,6 +1,6 @@
 <template>
   <el-space>
-    <h3>{{ title }}</h3>
+    <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">

src/components/Sorter.vue

@@ -1,6 +1,6 @@
 <template>
 <el-space>
-  <h3>排序</h3>
+  <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}}

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/bokMain/Collection.vue

@@ -1,14 +1,19 @@
 <template>
-  <div>
+  <el-space :fill="true" direction="vertical" class="collection-wrapper">
     <h1>Collection</h1>
-  </div>
+    <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: "Collection",
   components: {
+    "question-list": ListItem,
   },
   data() {
   },
@@ -16,5 +21,7 @@ export default {
 </script>
 
 <style scoped>
-
+.ql-container{
+  border: 1px solid black;
+}
 </style>

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/QuestionRepository/Default.vue

@@ -1,207 +0,0 @@
-<template>
-  <el-space :fill="true" direction="vertical">
-    <div v-if="!multipleMode">
-      <el-space>
-        <el-button @click="clickSearch" 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>
-      </el-space>
-    </div>
-    <div v-else>
-      <el-space>
-        <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>
-    </div>
-    <div>
-      <el-space direction="vertical">
-        <el-space>
-          <h2>筛选</h2>
-          <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>
-    <div class="ql-container">
-      <question-list ref="question-list"></question-list>
-    </div>
-  </el-space>
-</template>
-
-<script>
-import QuestionList from "@/components/QuestionItem/ListItem";
-import Filter from "@/components/Filter";
-import Sorter from "@/components/Sorter";
-
-export default {
-  name: "QuestionRepository",
-  components: {
-    QuestionList,
-    "qr-filter": Filter,
-    "qr-sorter": Sorter,
-  },
-  data() {
-    return {
-      // 点击批量处理
-      multipleMode: false,
-
-      // 筛选条件
-      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() {
-      const _this = this
-      _this.multipleMode = !_this.multipleMode
-    },
-
-    // 批量处理时点击删除
-    clickMulDelete() {
-      const _this = this
-    },
-
-    // 清空筛选条件
-    clearFilter() {
-      const _this = this
-      _this.knowledgeFilter.group = [];
-      _this.levelFilter.group = [];
-      _this.typeFilter.group = [];
-    },
-
-    // 改变排序方式
-    handleSorterDirection() {
-      const _this = this
-      _this.sorter.direction = !_this.sorter.direction
-    },
-
-    // 处理题型的筛选
-    handleTypeFilter() {
-      console.log(1)
-    },
-
-    // 处理知识点的筛选
-    handleKnowledgeFilter() {
-      console.log(2)
-    },
-
-    // 处理难度的筛选
-    handleLevelFilter() {
-      console.log(3)
-    },
-
-    // 处理排序的筛选
-    handleSorter() {
-      console.log(4)
-    },
-
-    // 对题目列表进行排序
-    sort(param){
-      console.log('sort')
-    },
-
-    // 点击搜索
-    clickSearch() {
-      const _this = this
-      _this.$router.push({path: "/questionRepository/search"})
-    },
-  },
-}
-</script>
-
-<style scoped>
-.filter-point {
-  /*float: left;*/
-  width: auto;
-  height: auto;
-  overflow: auto;
-  /*margin-top: 20px;*/
-  position: relative;
-}
-
-.filter-point .el-checkbox-group {
-  display: unset
-}
-
-.ql-container {
-  height: auto;
-  width: auto;
-  overflow: auto;
-  border: 1px solid black;
-}
-</style>

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

@@ -1,13 +0,0 @@
-<template>
-<div><h1>Question Repository Search</h1></div>
-</template>
-
-<script>
-export default {
-  name: "QRSearch"
-}
-</script>
-
-<style scoped>
-
-</style>

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

@@ -1,16 +1,226 @@
 <template>
-<el-space direction="vertical">
-  <h1>Question Repository</h1>
-  <router-view :key="$route.path"/>
-</el-space>
+  <el-space :fill="true" direction="vertical" class="qr-wrapper">
+    <h1>Question Repository</h1>
+    <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>
+  </el-space>
 </template>
 
 <script>
+import QuestionList from "@/components/QuestionItem/ListItem";
+import Filter from "@/components/Filter";
+import Sorter from "@/components/Sorter";
+
 export default {
-  name: "index"
+  name: "QuestionRepository",
+  components: {
+    QuestionList,
+    "qr-filter": Filter,
+    "qr-sorter": Sorter,
+  },
+  data() {
+    return {
+      // 点击批量处理，切换多选状态
+      multipleMode: false,
+      // 点击搜索，切换搜索状态
+      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() {
+      const _this = this
+      _this.multipleMode = !_this.multipleMode
+    },
+
+    // 批量处理时点击删除
+    clickMulDelete() {
+      const _this = this
+    },
+
+    // 清空筛选条件
+    clearFilter() {
+      const _this = this
+      _this.knowledgeFilter.group = [];
+      _this.levelFilter.group = [];
+      _this.typeFilter.group = [];
+    },
+
+    // 处理排序顺序的筛选
+    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)
+    },
+
+    // 处理排序条件的筛选
+    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>
+.qr-wrapper {
+  /*width: 80%;*/
+}
 
+.ql-container {
+  height: auto;
+  width: auto;
+  overflow: auto;
+  border: 1px solid black;
+}
 </style>

src/router/index.js

@@ -26,19 +26,6 @@ const routes = [
         path: 'questionRepository',
         name: "QuestionRepository",
         component: () => import("../components/bok/bokMain/QuestionRepository/index"),
-        redirect: "/questionRepository/index",
-        children:[
-          {
-            path: "index",
-            name: "Default",
-            component: ()=>import("../components/bok/bokMain/QuestionRepository/Default")
-          },
-          {
-            path: "search",
-            name: "QRSearch",
-            component: ()=>import("../components/bok/bokMain/QuestionRepository/Search"),
-          },
-        ],
       },
       {
         path: "collection",