start search

src/components/Filter.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-space>
+    <h3>{{ title }}</h3>
+    <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>
+  <h3>排序</h3>
+  <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/QuestionRepository/Default.vue

@@ -0,0 +1,207 @@
+<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/index.vue

@@ -1,176 +1,16 @@
 <template>
-  <div>
-    <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-space direction="vertical">
-        <h2>筛选</h2>
-        <el-button type="danger" @click="clearFilter">清空</el-button>
-        <el-space direction="vertical">
-          <div class="filter-point">
-            <el-space>
-              <h3>题型</h3>
-              <el-checkbox-group v-model="knowledgeFilter">
-                <el-checkbox-button label="选择">选择</el-checkbox-button>
-                <el-checkbox-button label="填空">填空</el-checkbox-button>
-              </el-checkbox-group>
-            </el-space>
-          </div>
-          <div class="filter-point">
-            <el-space>
-              <h3>知识点</h3>
-              <el-checkbox-group v-model="knowledgeFilter">
-                <el-checkbox-button label="java">Java</el-checkbox-button>
-                <el-checkbox-button label="python">Python</el-checkbox-button>
-              </el-checkbox-group>
-            </el-space>
-          </div>
-          <div class="filter-point">
-            <el-space>
-              <h3>难度</h3>
-              <el-checkbox-group v-model="levelFilter">
-                <el-checkbox-button label="简单">简单</el-checkbox-button>
-                <el-checkbox-button label="中等">中等</el-checkbox-button>
-                <el-checkbox-button label="困难">困难</el-checkbox-button>
-              </el-checkbox-group>
-            </el-space>
-          </div>
-          <div class="filter-point">
-            <el-space>
-              <h3>排序</h3>
-              <el-radio-group v-model="sortFilter" @change="changeSort">
-                <el-radio-button v-for="(item, index) in sortOption" :label="item.label">
-                  {{ item.title }}
-                </el-radio-button>
-              </el-radio-group>
-              <el-button @click="changeSortDirection" size="small" type="success">{{ sortDirection ? "正序" : "倒序" }}
-              </el-button>
-            </el-space>
-          </div>
-        </el-space>
-      </el-space>
-    </div>
-    <div class="ql-container">
-      <question-list ref="qr-list"></question-list>
-    </div>
-  </div>
+<el-space direction="vertical">
+  <h1>Question Repository</h1>
+  <router-view :key="$route.path"/>
+</el-space>
 </template>
 
 <script>
-import QuestionList from "@/components/QuestionItem/ListItem";
-
 export default {
-  name: "QuestionRepository",
-  components: {
-    QuestionList,
-  },
-  data() {
-    return {
-      // 点击批量处理
-      multipleMode: false,
-
-      // 筛选条件
-      typeFilter: [],
-      knowledgeFilter: [],
-      levelFilter: [],
-      sortFilter: 'index',
-      sortFilterBackup: 'index',
-      sortOption: [
-        {
-          label: 'index',
-          title: '序号',
-        },
-        {
-          label: 'type',
-          title: '题型',
-        },
-        {
-          label: 'level',
-          title: '难度',
-        },
-      ],
-      sortDirection: true,
-    }
-  },
-  methods: {
-    // 点击批量处理
-    clickMulSelect() {
-      const _this = this
-      _this.multipleMode = !_this.multipleMode
-    },
-
-    // 批量处理时点击删除
-    clickMulDelete() {
-      const _this = this
-    },
-
-    // 清空筛选条件
-    clearFilter() {
-      const _this = this
-
-      _this.knowledgeFilter = [];
-      _this.levelFilter = [];
-      _this.typeFilter = [];
-    },
-
-    // 改变排序方式
-    changeSort(param) {
-      const _this = this
-      _this.sortDirection = true
-    },
-
-    // 改变正序或倒序
-    changeSortDirection() {
-      const _this = this
-      _this.sortDirection = !_this.sortDirection
-    },
-
-    // 获取排序上面的值
-    getSortOptionTitle(label, title) {
-      const _this = this
-
-      let res = title
-      if (_this.sortFilter.indexOf(label) !== -1) {
-        res += _this.sortDirection ? "↑" : "↓"
-      }
-      console.log(res)
-      return res;
-    }
-  },
+  name: "index"
 }
 </script>
 
 <style scoped>
-.filter-point {
-  /*float: left;*/
-  width: auto;
-  height: auto;
-  overflow: auto;
-  /*margin-top: 20px;*/
-  position: relative;
-}
-
-.filter-point span {
-  padding-right: 20px;
-}
 
-.filter-point .el-checkbox-group {
-  display: unset
-}
-
-.ql-container{
-  height: auto;
-  width: auto;
-  overflow: auto;
-  border: 1px solid black;
-}
 </style>

src/router/index.js

@@ -26,10 +26,16 @@ 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: "QR_Search",
+            name: "QRSearch",
             component: ()=>import("../components/bok/bokMain/QuestionRepository/Search"),
           },
         ],