feat[problem-search]support advance search #61

Author: serfend

src/views/problems/ProblemSearch/SearchOptions/index.vue

@@ -1,12 +1,43 @@
 <template>
-  <div style="display:flex">
-    <el-input v-model="inner_search.name" placeholder="题目内容" @keyup.enter.native="handleSearch" />
-    <el-button type="primary" @click="handleSearch">搜索</el-button>
+  <div>
+    <div style="display:flex">
+      <el-input v-model="inner_search.content" placeholder="题目内容" @keyup.enter.native="handleSearch" @change="generateOptionByResult" />
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button v-if="advance && !show_advance" type="text" @click="show_advance=!show_advance">高级</el-button>
+    </div>
+    <el-card v-if="advance&&show_advance" style="margin-top:1rem">
+      <template #header>
+        <div style="display: flex;justify-content: space-between;">
+          <h3>高级搜索</h3>
+          <el-button v-if="show_advance" type="text" @click="show_advance=!show_advance">隐藏</el-button>
+        </div>
+      </template>
+      <el-form label-width="7rem">
+        <el-form-item label="按题干">
+          <el-input v-model="inner_search.name" placeholder="高级搜索为 name:xxx;xxx;xxx" @change="generateResultByOption" />
+        </el-form-item>
+        <el-form-item label="按答案">
+          <el-input v-model="inner_search.answer" placeholder="高级搜索为 answer:xxx;xxx;xxx" @change="generateResultByOption" />
+        </el-form-item>
+        <el-form-item label="按选项">
+          <el-input v-model="inner_search.option" placeholder="高级搜索为 option:xxx;xxx;xxx" @change="generateResultByOption" />
+        </el-form-item>
+        <el-form-item label="按正确次数">
+          <el-input-number v-model="inner_search.count_right" :disabled="true" :min="0" @change="generateResultByOption" />
+        </el-form-item>
+        <el-form-item label="按错误次数">
+          <el-input-number v-model="inner_search.count_wrong" :disabled="true" :min="0" @change="generateResultByOption" />
+        </el-form-item>
+        <el-form-item label="按做题次数">
+          <el-input-number v-model="inner_search.count_total" :disabled="true" :min="0" @change="generateResultByOption" />
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
 <script>
-
+import { generateResultByOption, generateOptionByResult } from './options'
 export default {
   name: 'SearchOptions',
   model: {
@@ -15,8 +46,10 @@ export default {
   },
   props: {
     search: { type: Object, default: null },
+    advance: { type: Boolean, default: false }
   },
   data: () => ({
+    show_advance: false
   }),
   computed: {
     inner_search: {
@@ -31,6 +64,14 @@ export default {
   methods: {
     handleSearch() {
       this.$emit('onSearch')
+    },
+    generateResultByOption() {
+      generateResultByOption(this.inner_search)
+      this.handleSearch()
+    },
+    generateOptionByResult() {
+      generateOptionByResult(this.inner_search)
+      this.handleSearch()
     }
   }
 }

src/views/problems/ProblemSearch/SearchOptions/options.js

@@ -0,0 +1,43 @@
+export function build_result(result, key, value) {
+  if (!key)key = 'name'
+  if (!result[key])result[key] = []
+  result[key].push(value)
+}
+export function generateOptionByResult(data) {
+  if (!data) return {}
+  const { content } = data
+  if (!content) return {}
+  const items = content.split(' ')
+  const result = { }
+  items.map(i => {
+    if (!i) return
+    const ext_detect = i.indexOf(':')
+    if (ext_detect === -1) return build_result(result, 'name', i)
+    const key = i.substring(0, ext_detect)
+    const value = i.substring(ext_detect + 1)
+    return build_result(result, key, value)
+  })
+  Object.keys(data).filter(i => i !== 'content').map(i => {
+    data[i] = null
+  })
+  Object.keys(result).map(i => {
+    data[i] = result[i].join(';')
+  })
+  return result
+}
+export function build_options(data) {
+  return Object.keys(data)
+    .filter(i => i !== 'content' && data[i])
+    .map(i => ({ k: i, v: data[i].split(';') }))
+}
+export function generateResultByOption(data) {
+  if (!data) return {}
+  const result =
+  build_options(data)
+    .map(i => {
+      if (i.k === 'name') return i.v.join(';')
+      return `${i.k}:${i.v.join(';')}`
+    }).join(' ')
+  data.content = result
+  return result
+}

src/views/problems/ProblemSearch/index.vue

@@ -5,7 +5,7 @@
       <template #title>
         <h3>题库:{{ database_data.alias }}(共{{ total_data_count }}题)</h3>
       </template>
-      <SearchOptions v-model="search" @onSearch="onSearch" />
+      <SearchOptions v-model="search" :advance="true" @onSearch="onSearch" />
       <transition-group
         name="slide-fade"
         mode="out-in"
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-
+import { build_options } from './SearchOptions/options'
 import { beforeLeave, enter, beforeEnter } from '../Practice/Train/ProblemList/animations'
 import { mapState } from 'vuex'
 import { init_problems } from '../Practice/Train/ProblemList/problem_init'
@@ -43,7 +43,13 @@ export default {
   data: () => ({
     loading: false,
     search: {
-      name: null
+      content: null,
+      name: null,
+      answer: null,
+      option: null,
+      count_wrong: 0,
+      count_right: 0,
+      count_total: 0,
     },
     database_data: {},
     problems: [],
@@ -62,11 +68,48 @@ export default {
       return filtered_problems.slice(start, end)
     },
     filtered_problems () {
-      const data = this.problems
+      let data = this.problems
       if (!data) return []
-      const name = this.search.name
-      if (!name) return data
-      return data.filter(i => JSON.stringify(i).indexOf(name) > -1)
+      const options_arr = build_options(this.search)
+      const options = options_arr.reduce((prev, cur) => (prev[cur.k] = cur.v) && prev, {})
+      const { name, answer, option, count_wrong, count_right, count_total } = options
+      console.log({ name, answer, option, count_wrong, count_right, count_total })
+      if (name) {
+        name.map(name => {
+          data = data.filter(i => i.content.indexOf(name) > -1)
+        })
+      }
+      if (answer) {
+        answer.map(answer => {
+          data = data.filter(i => {
+            const p_answer = i.answer
+            if (!p_answer) return false
+            if (p_answer.push) {
+              return p_answer.find(a => `${a}`.indexOf(answer) > -1)
+            }
+            return `${p_answer}`.indexOf(answer) > -1
+          })
+        })
+      }
+      if (option) {
+        option.map(option => {
+          data = data.filter(i => {
+            const p_option = i.option
+            if (!p_option) return false
+            return p_option.find(a => a.indexOf(option) > -1)
+          })
+        })
+      }
+      if (count_wrong) {
+        // not support yet
+      }
+      if (count_right) {
+        // not support yet
+      }
+      if (count_total) {
+        // not support yet
+      }
+      return data
     },
     ...mapState({
       device: (state) => state.app.device,