收藏夹condition

src/components/MxCondition/condition-object/condition-fav-quetype.js

@@ -0,0 +1,25 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { favQueTypes } from '@/api/webApi/webQue'
+export default {
+  ...conditionObjectBase,
+  isDependencyReady(params) {
+    return params.favSubject
+  },
+  dependentKeys: ['favSubject'],
+  key: 'favQueType',
+  title: '题型',
+  getList: function(param) {
+    return new Promise((resolve, reject) => {
+      favQueTypes({
+        subjectName:param.favSubject
+      }).then(res => resolve(res.data))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item
+  },
+  getLabel: function(item) {
+    return item
+  }
+}

src/components/MxCondition/condition-object/condition-fav-subject.js

@@ -0,0 +1,25 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { favSubjects } from '@/api/webApi/webQue'
+export default {
+  ...conditionObjectBase,
+  isDependencyReady(params) {
+    return params.favCollectType
+  },
+  dependentKeys: ['favCollectType'],
+  key: 'favSubject',
+  title: '学科',
+  getList: function(param) {
+    return new Promise((resolve, reject) => {
+      favSubjects({
+        type:param.favCollectType
+      }).then(res => resolve(res.data))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item
+  },
+  getLabel: function(item) {
+    return item
+  }
+}

src/components/MxCondition/condition-object/condition-local-favCollectType.js

@@ -0,0 +1,22 @@
+import conditionBase from '../condition-object-base'
+
+export default {
+  ...conditionBase,
+  key: 'favCollectType',
+  title: '类型',
+  getList: function(param, $vue) {
+    return this._getList(param, $vue)
+  },
+  _getList: function(param, $vue) {
+    return Promise.resolve( [
+      { type: 'question', name: '试题收藏' },
+      { type: 'paper', name: '试卷收藏' }
+    ])
+  },
+  getCode(item) {
+    return item.type
+  },
+  getLabel(item) {
+    return item.name
+  }
+}

src/views/questioncenter/components/collect.vue

@@ -1,160 +1,118 @@
 <template>
   <div>
-    <!-- 筛选   -->
-    <div class="radio_contianer">
-      <div class="mt15">
-        <span class="mr8">类型</span>
-        <el-radio-group v-model="form.type" size="mini" @change="toggleType">
-          <el-radio-button
-            :label="item.type"
-            v-for="item in types"
-            :key="item.type"
-          >{{ item.name }}
-          </el-radio-button
-          >
-        </el-radio-group>
-      </div>
-      <div class="mt15">
-        <span class="mr8">学科</span>
-        <el-radio-group
-          v-model="form.subjectName"
-          size="mini"
-          @change="toggleSub"
-        >
-          <el-radio-button
-            :label="item"
-            v-for="(item, index) in subjects"
-            :key="index"
-          >{{ item }}
-          </el-radio-button
-          >
-        </el-radio-group>
-      </div>
-      <div class="mt15" v-if="form.type == 'question'">
-        <span class="mr8">题型</span>
-        <el-radio-group
-          v-model="form.qtype"
-          size="mini"
-          @change="toggleQueType"
-        >
-          <el-radio-button
-            :label="item"
-            v-for="(item, index) in queTypes"
-            :key="index"
-          >{{ item }}
-          </el-radio-button
-          >
-        </el-radio-group>
-      </div>
-    </div>
-
+    <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
+                  @invalid="handleInvalidQuery"
+    ></mx-condition>
     <!-- 试题收藏 -->
-    <div class="topic" v-show="form.type == 'question'">
-      <!-- 题目 -->
-      <div class="paper_questions" id="collect-question">
-        <div
-          class="que_item"
-          v-for="(item, index) in collectQue"
-          :key="item.id"
-        >
-          <div class="que_content" style="display: flex">
-            <div>{{ index + 1 }}.</div>
-            <div v-html="item.title"></div>
-          </div>
-          <div class="option" v-if="item.optionA">
-            <div style="margin-right: 5px">A:</div>
-            <div v-html="item.optionA"></div>
-          </div>
-          <div class="option" v-if="item.optionB">
-            <div style="margin-right: 5px">B:</div>
-            <div v-html="item.optionB"></div>
-          </div>
-          <div class="option" v-if="item.optionC">
-            C:
-            <div v-html="item.optionC"></div>
-          </div>
-          <div class="option" v-if="item.optionD">
-            <div style="margin-right: 5px">D:</div>
-            <div v-html="item.optionD"></div>
-          </div>
-          <div class="que_footer">
-            <div class="spans">
-              <span class="id">ID: {{ item.id }}</span>
-              <span>题型： {{ item.qtpye }}</span>
-              <span>难度： 一般</span>
+    <div class="mt20">
+      <div class="topic" v-show="queryParams.favCollectType == 'question'">
+        <!-- 题目 -->
+        <div class="paper_questions" id="collect-question">
+          <div
+            class="que_item"
+            v-for="(item, index) in collectQue"
+            :key="item.id"
+          >
+            <div class="que_content" style="display: flex">
+              <div>{{ index + 1 }}.</div>
+              <div v-html="item.title"></div>
+            </div>
+            <div class="option" v-if="item.optionA">
+              <div style="margin-right: 5px">A:</div>
+              <div v-html="item.optionA"></div>
+            </div>
+            <div class="option" v-if="item.optionB">
+              <div style="margin-right: 5px">B:</div>
+              <div v-html="item.optionB"></div>
+            </div>
+            <div class="option" v-if="item.optionC">
+              C:
+              <div v-html="item.optionC"></div>
+            </div>
+            <div class="option" v-if="item.optionD">
+              <div style="margin-right: 5px">D:</div>
+              <div v-html="item.optionD"></div>
             </div>
-            <div class="operation">
-              <div class="shoucan">
-                <div
-                  v-show="item.collect"
-                  @click="toCancelCollectQue(item)"
-                  style="display: flex; align-items: center"
-                >
-                  <img
-                    src="@/assets/images/icon_shoucang_s.png"
-                    style="margin-right: 8px"
-                  />
-                  <span>已收藏</span>
+            <div class="que_footer">
+              <div class="spans">
+                <span class="id">ID: {{ item.id }}</span>
+                <span>题型： {{ item.qtpye }}</span>
+                <span>难度： 一般</span>
+              </div>
+              <div class="operation">
+                <div class="shoucan">
+                  <div
+                    v-show="item.collect"
+                    @click="toCancelCollectQue(item)"
+                    style="display: flex; align-items: center"
+                  >
+                    <img
+                      src="@/assets/images/icon_shoucang_s.png"
+                      style="margin-right: 8px"
+                    />
+                    <span>已收藏</span>
+                  </div>
+                  <div
+                    v-show="!item.collect"
+                    @click="toCollectQue(item)"
+                    style="display: flex; align-items: center"
+                  >
+                    <img
+                      src="@/assets/images/icon_shoucang_n.png"
+                      style="margin-right: 8px"
+                    />
+                    <span>收藏</span>
+                  </div>
                 </div>
-                <div
-                  v-show="!item.collect"
-                  @click="toCollectQue(item)"
-                  style="display: flex; align-items: center"
-                >
-                  <img
-                    src="@/assets/images/icon_shoucang_n.png"
-                    style="margin-right: 8px"
-                  />
-                  <span>收藏</span>
+                <div class="detail" @click="viewDetail(item)">
+                  <img src="@/assets/images/icon_chakan.png" alt=""/>
+                  <span>查看解析>></span>
                 </div>
               </div>
-              <div class="detail" @click="viewDetail(item)">
-                <img src="@/assets/images/icon_chakan.png" alt=""/>
-                <span>查看解析>></span>
-              </div>
             </div>
+            <div
+              class="parse"
+              v-show="item.expand"
+              v-html="item.parse"
+            ></div>
           </div>
-          <div
-            class="parse"
-            v-show="item.expand"
-            v-html="item.parse"
-          ></div>
         </div>
       </div>
-    </div>
-    <!-- 试卷收藏 -->
-    <div class="exam" v-show="form.type == 'paper'">
-      <div class="paper_container">
-        <div class="paper_item" v-for="item in collectPaper" :key="item.id">
-          <div class="tit">
-            <div>{{ item.papername }}</div>
-            <div class="viewCount">
-              <img src="@/assets/images/icon_eye.png" alt=""/>
-              <span>{{ item.readNum }}人已预览</span>
-            </div>
-          </div>
-          <div class="opera">
-            <div class="view" @click="toPreView(item.id, item.papername)">
-              <img
-                class="mr8"
-                src="@/assets/images/icon_view.png"
-                alt=""
-              />
-              <span>预览</span>
+      <!-- 试卷收藏 -->
+      <div class="exam" v-show="queryParams.favCollectType == 'paper'">
+        <div class="paper_container">
+          <div class="paper_item" v-for="item in collectPaper" :key="item.id">
+            <div class="tit">
+              <div>{{ item.papername }}</div>
+              <div class="viewCount">
+                <img src="@/assets/images/icon_eye.png" alt=""/>
+                <span>{{ item.readNum }}人已预览</span>
+              </div>
             </div>
-            <div class="download">下载</div>
-            <div>
-              <img
-                src="@/assets/images/icon_shoucang_s.png"
-                alt=""
-                class="mr8"
-              />
-              <span>已收藏</span>
+            <div class="opera">
+              <div class="view" @click="toPreView(item.id, item.papername)">
+                <img
+                  class="mr8"
+                  src="@/assets/images/icon_view.png"
+                  alt=""
+                />
+                <span>预览</span>
+              </div>
+              <div class="download">下载</div>
+              <div>
+                <img
+                  src="@/assets/images/icon_shoucang_s.png"
+                  alt=""
+                  class="mr8"
+                />
+                <span>已收藏</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
     <!-- 分页 -->
     <pagination
       :total="pageForm.total"
@@ -168,7 +126,7 @@
 </template>
 <script>
 import MxCondition from '@/components/MxCondition/mx-condition'
-import { favSubjects,favQueTypes,favQuestions,favPapers   } from '@/api/webApi/webQue.js'
+import { favPapers, favQuestions, favQueTypes, favSubjects } from '@/api/webApi/webQue.js'
 
 export default {
   components: {
@@ -184,6 +142,12 @@ export default {
         subjectName: '',
         wrongType: ''
       },
+      queryParams:{
+        favCollectType:'',
+        favSubject:'',
+        favQueType:''
+      },
+      requireFields:['favCollectType','favSubject','favQueType'],
       pageForm: {
         total: 0,
         pageSize: 10,
@@ -199,23 +163,43 @@ export default {
       collectPaper: []
     }
   },
+  watch:{
+    'queryParams.favCollectType':{
+      immediate:false,
+      handler(data){
+        console.log(data)
+        if(data == 'question') {
+          this.queryParams['favQueType'] = ''
+          if(!this.requireFields.find(item => item == 'favQueType')){
+            this.requireFields.push('favQueType')
+          }
+        }else {
+          delete this.queryParams['favQueType']
+          this.requireFields.remove('favQueType')
+        }
+      }
+    }
+  },
   methods: {
-    onChangePage() {
-      this.getFavQuestions()
-    },
-    toggleSub() {
-      this.pageForm.pageNum == 1
-      if (this.form.type == 'paper') {
+    handleQuery(){
+      if(this.queryParams.favCollectType == 'question') {
+        this.getFavQuestions()
+      }else {
         this.getFavPapers()
-      } else {
-        this.getFavQue()
       }
+
+    },
+    handleInvalidQuery(){
+
+    },
+    onChangePage() {
+      this.getFavQuestions()
     },
     // 收藏的问题列表
     getFavQuestions() {
       favQuestions({
-        subjectName: this.form.subjectName,
-        qtype: this.form.qtype,
+        subjectName: this.queryParams.favSubject,
+        qtype: this.queryParams.favQueType,
         pageNum: this.pageForm.pageNum,
         pageSize: this.pageForm.pageSize
       }).then((res) => {
@@ -235,10 +219,6 @@ export default {
         query: { paperId, paperName }
       })
     },
-    toggleType(e) {
-      this.form.type = e
-      this.getSubjects()
-    },
     toCollectQue(item) {
       queCollect({ questionId: item.id }).then((res) => {
         item.collect = !item.collect
@@ -253,10 +233,6 @@ export default {
         console.log(res)
       })
     },
-    toggleQueType() {
-      this.pageForm.pageNum = 1
-      this.getFavQuestions()
-    },
     viewDetail(item) {
       item.expand = !item.expand
     },
@@ -273,18 +249,10 @@ export default {
         }
       })
     },
-    // 收藏涉及的题型
-    getFavQue() {
-      favQueTypes({ subjectName: this.form.subjectName }).then((res) => {
-        this.form.qtype = res.data[0]
-        this.queTypes = res.data
-        this.getFavQuestions()
-      })
-    },
     // 收藏涉及的试卷
     getFavPapers() {
       favPapers({
-        subjectName: this.form.subjectName,
+        subjectName: this.queryParams.favSubject,
         pageNum: this.pageForm.pageNum,
         pageSize: this.pageForm.pageSize
       }).then((res) => {