feat: 排序和筛选

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

@@ -12,23 +12,56 @@
       </el-button>
     </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>
+      <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>
-      <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>
 
@@ -46,7 +79,26 @@ export default {
       multipleMode: false,
 
       // 筛选条件
-      filterCheckboxGroup: [],
+      typeFilter: [],
+      knowledgeFilter: [],
+      levelFilter: [],
+      sortFilter: 'index',
+      sortFilterBackup: 'index',
+      sortOption: [
+        {
+          label: 'index',
+          title: '序号',
+        },
+        {
+          label: 'type',
+          title: '题型',
+        },
+        {
+          label: 'level',
+          title: '难度',
+        },
+      ],
+      sortDirection: true,
     }
   },
   methods: {
@@ -60,10 +112,65 @@ export default {
     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;
+    }
   },
 }
 </script>
 
 <style scoped>
+.filter-point {
+  /*float: left;*/
+  width: auto;
+  height: auto;
+  overflow: auto;
+  /*margin-top: 20px;*/
+  position: relative;
+}
 
-</style>
+.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>