feat: 搜索排序和搜索跳转

src/components/MarkdownText.vue

@@ -12,7 +12,7 @@
         watch:{
             raw:{
                handler(newval){
-                   console.log(newval);
+                   // console.log(newval);
                }
             }
         },

src/components/bok/BokMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view :key="$route.path"/>
+  <router-view :key="$route.path" style="padding-left: 20px;padding-right: 20px;width:calc(100% - 40px)"/>
 </template>
 
 <script>

src/components/bok/NavBar.vue

@@ -1,47 +1,64 @@
 <template>
-  <div class="navbar-wrapper">
-<!--    <el-breadcrumb separator-class="el-icon-arrow-right">-->
-<!--      <el-breadcrumb-item v-for="(p, i) in path" :key="'p-' + i" :to="toBreadcrumbLink(p)">{{ p }}</el-breadcrumb-item>-->
-<!--    </el-breadcrumb>-->
-    <el-dropdown trigger="click" style="position: absolute;top: 0px;right: 0px">
-      <el-avatar shape="square" :size="30" :src="squareUrl"></el-avatar>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item>选项1</el-dropdown-item>
-          <el-dropdown-item>选项2</el-dropdown-item>
-          <el-dropdown-item>选项3</el-dropdown-item>
-          <el-dropdown-item>选项4</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-  </div>
+    <div class="navbar-wrapper">
+        <el-input placeholder="请输入内容" v-model="searchContent" size="mini" class="input-with-select"
+        v-if="$route.path!=='/search'" @keydown.enter="clickSearch">
+            <template #append>
+                <el-button icon="el-icon-search" @click="clickSearch"/>
+            </template>
+        </el-input>
+        <el-dropdown trigger="click" style="position: absolute;top: 0px;right: 0px">
+            <el-avatar shape="square" :size="30" :src="squareUrl"></el-avatar>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item>选项1</el-dropdown-item>
+                    <el-dropdown-item>选项2</el-dropdown-item>
+                    <el-dropdown-item>选项3</el-dropdown-item>
+                    <el-dropdown-item>选项4</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </div>
 </template>
 
 <script>
 export default {
-  name: "NavBar",
-  data() {
-    return {
-      systemName: "bok",
-      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
-    }
-  },
-  computed:{
-    path(){
-      const _this = this
-      let res = _this.$store.getters['bok/getPath'].split("/")
-      res[0] = _this.systemName
-      return res
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    toBreadcrumbLink(p) {
-      const _this = this;
-      return ""
+    name: "NavBar",
+    data() {
+        return {
+            //
+            searchContent: "",
+
+            systemName: "bok",
+            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+        }
+    },
+    computed: {
+        path() {
+            const _this = this
+            let res = _this.$store.getters['bok/getPath'].split("/")
+            res[0] = _this.systemName
+            return res
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        //
+        clickSearch(){
+            const _this = this
+            let content = _this.searchContent
+            _this.searchContent = ""
+            if(content!==""){
+                this.$router.replace({
+                    name: "Search",
+                    path:'/search',
+                    params:{
+                        searchContent:content,
+                    }
+                })
+            }
+        },
     },
-  },
 }
 </script>
 
@@ -49,22 +66,34 @@ export default {
 @import "../../style/variables";
 
 .navbar-wrapper {
-  height: 50px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  position: relative;
+    height: 50px;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
 }
 
 .el-breadcrumb {
-  height: calc(100% - 30px);
-  padding: 15px;
-  font-size: 20px;
+    height: calc(100% - 30px);
+    padding: 15px;
+    font-size: 20px;
 }
 
 .el-avatar {
-  margin: 10px;
+    margin: 10px;
+}
+
+.el-avatar:hover {
+    cursor: pointer;
+}
+
+.el-input {
+    position: absolute;
+    top: 11px;
+    left: 25%;
+    //height: 50%;
+    width: 50%;
 }
 
-.el-avatar:hover{
-  cursor: pointer;
+.input-with-select .el-input-group__prepend {
+    background-color: #fff;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <el-space :fill="true" direction="vertical" style="width:100%;" alignment="flex-start" :size="30">
+    <el-space :fill="true" direction="vertical" alignment="flex-start" :size="30">
         <h1>Question Search</h1>
         <el-input placeholder="请输入内容" v-model="searchContent" @keydown.enter="clickSearch">
             <template #append>
@@ -11,14 +11,12 @@
                 <el-space direction="vertical" alignment="flex-start">
                     <button-filter :title="typeFilter.title" :checkboxOption="typeFilter.option" ref="typeFilter"
                                    @filterChange="handleTypeFilter"/>
-                    <!--                    <button-filter :title="levelFilter.title" :checkboxOption="levelFilter.option" ref="levelFilter"-->
-                    <!--                                   @filterChange="handleLevelFilter"/>-->
                     <search-filter :title="tagFilter.title" :keyword="tagFilter.keyword" ref="tagFilter"
                                    @filterChange="handleTagFilter"/>
                     <search-filter :title="knowledgeFilter.title" :keyword="knowledgeFilter.keyword"
                                    ref="knowledgeFilter"
                                    @filterChange="handleKnowledgeFilter"/>
-                    <qr-sorter :option="sorter.option" @stdChange="handleSortStdChange" ref="sorter"/>
+                    <qr-sorter :option="sorter.option" @stdChange="handleSorterChange" ref="sorter"/>
                 </el-space>
             </el-collapse-item>
         </el-collapse>
@@ -117,6 +115,13 @@ export default {
             return _this.filteredQuestions.slice(start, end)
         },
     },
+    mounted() {
+        const _this = this
+        if(_this.$route.params.searchContent){
+            _this.searchContent = _this.$route.params.searchContent;
+            _this.clickSearch()
+        }
+    },
     methods: {
         // 展开和收起
         closeCollapse(val) {
@@ -135,69 +140,115 @@ export default {
             _this.$refs.sorter.reset();
         },
 
-        // 处理题型的筛选
-        handleTypeFilter(checkboxGroup) {
-            if (this.resultQuestions.length !== 0)
-                if (checkboxGroup.length === 0) {
-                    this.resultQuestions = this.resultQuestions.map(function (item) {
-                        item.type = true;
-                        return item
-                    })
-                } else {
-                    this.resultQuestions = this.resultQuestions.map(function (item) {
-                        item.type = checkboxGroup.indexOf(item.entity.type) !== -1;
-                        return item
-                    })
-                }
-            this.getFilteredQuestions()
+        // 题型筛选器——筛选事件响应
+        async handleTypeFilter(checkboxGroup) {
+            const _this = this
+            if (this.resultQuestions.length !== 0) {
+                _this.resultQuestions = await _this.filterType(checkboxGroup);
+                _this.requestQuestion = await _this.sortQuestions(_this.resultQuestions);
+                this.getFilteredQuestions()
+            }
         },
 
-        // 处理知识点的筛选
-        handleKnowledgeFilter(group) {
-            // todo
-            if (this.resultQuestions.length === 0) {
-                return
+        // 筛选题型的具体方法
+        async filterType(checkboxGroup) {
+            let res;
+            if (checkboxGroup.length === 0) {
+                res = this.resultQuestions.map(function (item) {
+                    item.type = true;
+                    return item
+                })
+            } else {
+                res = this.resultQuestions.map(function (item) {
+                    item.type = checkboxGroup.indexOf(item.entity.type) !== -1;
+                    return item
+                })
+            }
+            return res;
+        },
+
+        // 知识点筛选器——筛选事件响应
+        async handleKnowledgeFilter(checkboxGroup) {
+            const _this = this
+            if (this.resultQuestions.length !== 0) {
+                _this.resultQuestions = await _this.filterKnowledge(checkboxGroup);
+                _this.requestQuestion = await _this.sortQuestions(_this.resultQuestions);
+                this.getFilteredQuestions()
             }
-            console.log(group)
         },
 
-        // 处理难度的筛选
-        // handleLevelFilter(checkboxGroup) {
-        //     // todo
-        //     if (this.resultQuestions.length === 0) {
-        //         return
-        //     }
-        //     console.log(checkboxGroup)
-        // },
+        // 筛选知识点的具体方法
+        async filterKnowledge(checkboxGroup) {
+            let res;
+            if (checkboxGroup.length === 0) {
+                res = this.resultQuestions.map(function (item) {
+                    item.knowledge = true;
+                    return item
+                })
+            } else {
+                // todo
+            }
+
+            return res;
+        },
 
-        // 处理排序标准的筛选
-        async handleSortStdChange(std) {
-            // todo
+        // Tag筛选器——筛选事件响应
+        async handleTagFilter(checkboxGroup) {
+            const _this = this
             if (this.resultQuestions.length !== 0) {
-                let dir = this.$refs.sorter.direction
+                _this.resultQuestions = await _this.filterTag(checkboxGroup);
+                _this.requestQuestion = await _this.sortQuestions(_this.resultQuestions);
+                this.getFilteredQuestions()
+            }
+        },
 
+        // 筛选Tag的具体方法
+        async filterTag(checkboxGroup) {
+            let res;
+            if (checkboxGroup.length === 0) {
+                res = this.resultQuestions.map(function (item) {
+                    item.tag = true;
+                    return item
+                })
+            } else {
+                // todo
+            }
 
-                const sortFunction = async function (item1, item2) {
-                    let id1 = await item1.id
-                    let id2 = await item2.id
-                    console.log(1)
-                    return id1 > id2 ? dir ? 1 : -1 : dir ? -1 : 1;
-                }
-                switch (std) {
-                    case "id":
-                        this.filteredQuestions = this.filteredQuestions.sort(sortFunction)
-                        break;
-                }
+            return res;
+        },
+
+        // 排序事件响应
+        async handleSorterChange() {
+            const _this = this
+            if (this.resultQuestions.length !== 0) {
+                _this.resultQuestions = await _this.sortQuestions(_this.resultQuestions)
+                _this.getFilteredQuestions()
             }
         },
 
-        // 处理Tag的筛选
-        handleTagFilter(group) {
-            // todo
-            if (this.resultQuestions.length === 0) {
-                return
+        // 排序的具体实现方法
+        async sortQuestions(questions) {
+            let res;
+            let std = this.$refs.sorter.standard
+            let dir = this.$refs.sorter.direction
+
+            const sortFunction1 = function (item1, item2) {
+                return item1.entity.id > item2.entity.id ? dir ? 1 : -1 : dir ? -1 : 1;
+            }
+
+            const sortFunction2 = function (item1, item2) {
+                return item1.entity.type > item2.entity.type ? dir ? 1 : -1 : dir ? -1 : 1;
             }
-            console.log(group)
+
+            switch (std) {
+                case "id":
+                    res = questions.sort(sortFunction1)
+                    break;
+                case "type":
+                    res = questions.sort(sortFunction2)
+                    break;
+            }
+            return res;
         },
 
         // 进行关键词搜索
@@ -207,7 +258,7 @@ export default {
                 alert("请输入关键词");
             } else {
                 await this.requestQuestion(this.searchContent, [], [], [], [])
-                this.resultQuestions = this.resultQuestions.map(function (item) {
+                _this.resultQuestions = _this.resultQuestions.map(function (item) {
                     return {
                         type: true,
                         tag: true,
@@ -215,20 +266,34 @@ export default {
                         entity: item,
                     }
                 })
-                // todo
                 let typeArray = _this.$refs.typeFilter.checkboxGroup;
-                // let levelArray = _this.$refs.levelFilter.checkboxGroup;
                 let tagArray = _this.$refs.tagFilter.checkGroup;
                 let knowledgeArray = _this.$refs.knowledgeFilter.checkGroup;
-                let sortStd = _this.$refs.sorter.standard;
                 // 初始筛选条件的处理
-                this.handleTypeFilter(typeArray);
-                // todo 排序总是在落后执行
-                // await this.handleSortStdChange(sortStd);
-                console.log(this.filteredQuestions)
+                _this.resultQuestions = await _this.filterType(typeArray)
+                // _this.resultQuestions = await _this.filterTag(tagArray)
+                // _this.resultQuestions = await _this.filterKnowledge(knowledgeArray)
+                _this.resultQuestions = await _this.sortQuestions(_this.resultQuestions)
+                _this.getFilteredQuestions()
+                console.log(_this.filteredQuestions)
             }
         },
 
+        // 获取筛选后的题目
+        getFilteredQuestions() {
+            const _this = this
+            new Promise(function (resolve, reject) {
+                _this.filteredQuestions = _this.resultQuestions.filter(function (item) {
+                    return (item.type && item.tag && item.knowledge)
+                }).map((item) => {
+                    return item.entity
+                })
+                resolve()
+            }).then(() => {
+                console.log(_this.filteredQuestions)
+            })
+        },
+
         // todo 注释 添加到api文件当中
         async requestQuestion(stem, ...items) {
             await axios.get("/api/api/question", {
@@ -266,15 +331,6 @@ export default {
         handleCurrentChange(val) {
         },
 
-        // 获取筛选后的题目
-        getFilteredQuestions() {
-            this.filteredQuestions = this.resultQuestions.filter(function (item) {
-                return (item.type && item.tag && item.knowledge)
-            }).map((item) => {
-                return item.entity
-            })
-        },
-
     }
 }
 </script>

src/components/tool/Sorter.vue

@@ -43,12 +43,12 @@ export default {
     watch: {
         standard: {
             handler(val, oldVal) {
-                this.$emit("stdChange", val)
+                this.$emit("stdChange")
             },
         },
         direction: {
             handler(val, oldVal) {
-                this.$emit("stdChange", this.standard)
+                this.$emit("stdChange")
             }
         },
     },

src/views/Bok.vue

@@ -32,7 +32,7 @@ export default {
 
 .main-container {
     margin-left: $sideBarWidth;
-    padding-left: 20px;
-    padding-right: 20px;
+    //padding-left: 20px;
+    //padding-right: 20px;
 }
 </style>