精品试卷整合mx-condition

src/components/MxCondition/condition-object/condition-paper-area.js

@@ -0,0 +1,30 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  papersAreas,
+} from '@/api/webApi/webQue.js'
+
+export default {
+  ...conditionObjectBase,
+  isDependencyReady(params) {
+    return params.paperType
+  },
+  dependentKeys: ['paperType'],
+  key: 'paperArea',
+  title: '地区',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      papersAreas({
+        subjectName:$ref.model.paperSubject,
+        gradeName:$ref.model.paperGrade,
+        gradeType:param.paperType,
+      }).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-paper-grade.js

@@ -0,0 +1,26 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  paperGrade,
+} from '@/api/webApi/webQue.js'
+
+export default {
+  ...conditionObjectBase,
+  isDependencyReady(params) {
+    return params.paperSubject
+  },
+  dependentKeys: ['paperSubject'],
+  key: 'paperGrade',
+  title: '年级',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      paperGrade({subjectName:param.paperSubject}).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-paper-subject.js

@@ -0,0 +1,22 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  subjectList,
+} from '@/api/webApi/webQue.js'
+
+export default {
+  ...conditionObjectBase,
+  key: 'paperSubject',
+  title: '科目',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      subjectList().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-paper-type.js

@@ -0,0 +1,26 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  papersTypes,
+} from '@/api/webApi/webQue.js'
+
+export default {
+  ...conditionObjectBase,
+  isDependencyReady(params) {
+    return params.paperGrade
+  },
+  dependentKeys: ['paperGrade'],
+  key: 'paperType',
+  title: '类型',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      papersTypes({subjectName:$ref.model.paperSubject,gradeName:param.paperGrade}).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-paper-year.js

@@ -0,0 +1,26 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  papersYears,
+} from '@/api/webApi/webQue.js'
+
+export default {
+  ...conditionObjectBase,
+  isDependencyReady(params) {
+    return params.paperSubject
+  },
+  dependentKeys: ['paperSubject'],
+  key: 'paperYear',
+  title: '年份',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      papersYears({}).then(res => resolve(res.data))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item
+  },
+  getLabel: function(item) {
+    return item
+  }
+}

src/views/questioncenter/bestpaper.vue

@@ -2,342 +2,78 @@
   <div class="bestpaper_container">
     <el-card class="mb10">
       <div class="smart_tabs">
-        <div class="tab pointer" :class="tabActive == 0 ? 'tab_active' : ''" @click="switchTab(0)">
-          名校试卷
-        </div>
-        <div class="tab pointer" :class="tabActive == 1 ? 'tab_active' : ''" @click="switchTab(1)">
-          历年真题
-        </div>
-      </div>
-      <!--  名校试卷 -->
-      <div class="radio_contianer" v-show="tabActive == 0">
-        <div style="margin-bottom: 16px">
-          <span>科目</span>
-          <el-radio-group v-model="form.subjectName" size="mini" @change="toggleSub">
-            <el-radio-button :label="item" v-for="(item, index) in subjectList" :key="index">{{ item }}</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span>年级</span>
-          <el-radio-group v-model="form.gradeName" size="mini" @change="toggleGrade">
-            <el-radio-button :label="item" v-for="(item, k, index) in gradeList" :key="index">{{ item }}</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span>类型</span>
-          <el-radio-group v-model="form.paperType" size="mini" @change="toggleType">
-            <el-radio-button :label="item" v-for="(item, index) in types" :key="index">{{ item }}</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span >地区</span>
-          <el-radio-group v-model="form.area" size="mini" @change="toggleAreas">
-            <el-radio-button :label="item" v-for="(item, index) in areasList" :key="index">{{ item }}</el-radio-button>
-          </el-radio-group>
-        </div>
-      </div>
-      <!-- 历年真题 -->
-      <div class="radio_contianer">
-        <div style="margin-bottom: 16px" v-show="tabActive == 1">
-          <span>科目</span>
-          <el-radio-group v-model="form.subjectName" size="mini" @change="toggleSubByYear">
-            <el-radio-button :label="item" v-for="(item, index) in subjectList" :key="index">{{ item }}</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span>年份</span>
-          <el-radio-group v-model="form.year" size="mini" @change="toggleYear">
-            <el-radio-button :label="item" v-for="(item, index) in years" :key="index">{{ item }}</el-radio-button>
-          </el-radio-group>
+        <div
+          class="tab pointer"
+          v-for="item in tabList"
+          :class="tabActive == item.code ? 'tab_active' : ''"
+          @click="switchTab(item.code)"
+        >
+          {{ item.label }}
         </div>
       </div>
     </el-card>
-    <el-card class="main">
-      <div class="search_header">
-        <input placeholder="请输入内容" v-model="form.papername" @keyup.enter="clickSearch" />
-        <img src="@/assets/images/icon_search2.png" alt="" @click="clickSearch" />
-      </div>
-      <!-- 试卷整体-----名校试卷名校试卷  -->
-      <div class="paper_container" v-show="tabActive == 0">
-        <div class="paper_item" v-for="item in papersList" :key="item.id">
-          <img src="@/assets/images/img_mignxiaoshijuan.png" alt="" />
-          <div class="center_wrap">
-            <div class="center_tit">
-              {{ item.papername }}
-            </div>
-            <div class="center_opera">
-              <div class="view" @click="toPreView(item.id, item.papername)">
-                <img src="@/assets/images/icon_view.png" alt="" />
-                <span>预览</span>
-              </div>
-              <div class="download" @click="paperDownLoad(item.id)">
-                <span>下载</span>
-              </div>
-              <div class="shoucan">
-                <div @click="collect(item)" v-if="!item.collect">
-                  <img src="@/assets/images/icon_shoucang_n.png" alt="" />
-                  <span>收藏</span>
-                </div>
-                <div @click="cancelCollect(item)" v-else>
-                  <img src="@/assets/images/icon_shoucang_s.png" alt="" />
-                  <span>已收藏</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="view_count">
-            <img src="@/assets/images/icon_eye2.png" alt="" />
-            <span>{{ null==item.readNum?0:item.readNum }}人已预览</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 试卷整体-----历年真题  -->
-      <div class="real_topic" v-if="tabActive == 1">
-        <div class="topic_item" v-for="item in paperYearList" :key="item.id">
-          <div class="paper_tit">
-            {{ item.papername }}
-          </div>
-          <div class="paper_opera">
-            <div class="view" @click="toPreView(item.id, item.papername)">
-              <img src="@/assets/images/icon_view.png" alt="" />
-              <span>预览</span>
-            </div>
-            <div class="btn" @click="paperDownLoad(item.id)">下载</div>
-          </div>
-        </div>
-      </div>
-      <!-- 分页 -->
-<!--      <el-pagination class="pagination" layout="prev, pager, next" :total="total" :page-size="pageForm.pageSize" :current-page="pageForm.pageNum" @prev-click="prev" @next-click="next" @current-change="togglePage">-->
-<!--      </el-pagination>-->
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="pageForm.pageNum"
-        :limit.sync="pageForm.pageSize"
-        :page-sizes="[12,24,36]"
-        @pagination="togglePage"
-      />
-    </el-card>
+    <div>
+      <keep-alive>
+        <famous-paper v-if="tabActive == 0"></famous-paper>
+      </keep-alive>
+      <keep-alive>
+        <history-paper :queryYear="queryYear"  v-if="tabActive == 1"></history-paper>
+      </keep-alive>
+    </div>
   </div>
 </template>
 <script>
-import {
-  papersTypes,
-  papersAreas,
-  papersList,
-  papersCancelCollect,
-  papersCollect,
-  papersYears,
-  subjectList,
-  paperGrade,
-  downloadRealPaper
-} from "@/api/webApi/webQue.js";
-import { mapGetters } from 'vuex';
+import MxCondition from '@/components/MxCondition/mx-condition'
+import HistoryPaper from './components/history-paper'
+import FamousPaper from './components/famous-paper'
+
 export default {
+  components:{
+    FamousPaper,
+    MxCondition,
+    HistoryPaper
+  },
   data() {
     return {
       tabActive: 0,
-      form: {
-        subjectName: "语文",
-        gradeName: "高一",
-        paperType: "",
-        area: "",
-        year: 0,
-      },
-      pageForm: {
-        pageNum: 1,
-        pageSize: 12,
+      tabList:[
+        {
+          label:'名校试卷',
+          code:0
+        },
+        {
+          label:'历年真题',
+          code:1
+        }
+      ],
+      queryParams:{
+        paperSubject:'',
+        paperGrade:'',
+        paperType:'',
+        paperArea:'',
+        paperYear:'',
       },
-      subjectList: [],
-      gradeList: [],
-      types: [],
-      areasList: [],
-      papersList: [],
-      total: 0, // 试卷总数
-      years: [],
-      queryYear: 0,
-      paperYearList: [],
+      queryYear:'',
+      requireFields:['paperSubject','paperGrade','paperType','paperArea','paperYear'],
+
     };
   },
-  computed: {
-    ...mapGetters(["period"])
-  },
   created() {
     let query = this.$route.query;
     // 设置默认高亮
     this.tabActive = query.tabActive ? query.tabActive : 0;
-    this.queryYear = query.year ? query.year : 0;
-    this.getSubjectList();
-    this.getYears();
+    this.queryYear = query.year ? query.year : '';
   },
 
   methods: {
-    paperDownLoad(paperId) {
-      downloadRealPaper(paperId, this.period)
-    },
-    // 科目
-    getSubjectList() {
-      subjectList().then((res) => {
-        this.form.subjectName = res.data[0];
-        this.subjectList = res.data;
-        this.getGradeList();
-        console.log(res);
-      });
-    },
-    // 年级
-    getGradeList() {
-      paperGrade({ subjectName: this.form.subjectName }).then((res) => {
-        this.form.gradeName = res.data[0];
-        this.gradeList = res.data;
-        this.getPapersTypes();
-      });
-    },
-    // 跳转到预览页面
-    toPreView(paperId, paperName) {
-      this.$router.push({
-        path: "/question-center/bestPaper/preview",
-        query: { paperId, paperName },
-      });
-    },
-    // 获得类型列表
-    getPapersTypes() {
-      papersTypes({
-        subjectName: this.form.subjectName,
-        gradeName: this.form.gradeName,
-      }).then((res) => {
-        this.form.paperType = res.data[0];
-        this.types = res.data;
-        this.getAreas();
-      });
-    },
-    // 获取地区
-    getAreas() {
-      papersAreas({ ...this.form }).then((res) => {
-        this.form.area = res.data[0];
-        this.areasList = res.data;
-        if (this.tabActive == 0) {
-          this.getPaperList();
-        }
-        console.log(res);
-      });
-    },
-    // 获取年份
-    getYears() {
-      papersYears({ subjectName: this.form.subjectName }).then((res) => {
-        console.log(res);
-        this.form.year = res.data[0];
-        if (this.queryYear > 0 && this.tabActive == 1) {
-          this.form.year = this.queryYear;
-        }
-        // this.form.year = res.data[0];
-        this.years = res.data;
-        if (this.tabActive == 1) {
-          this.getPaperListByYear();
-        }
-      });
-    },
-    // 获取试卷列表
-    getPaperList() {
-      papersList({ ...this.form, ...this.pageForm }).then((res) => {
-        this.total = res.total;
-        this.papersList = res.rows;
-        console.log(res);
-      });
-    },
-    clickSearch() {
-      if (this.tabActive == 0) {
-        this.getPaperList();
-      } else {
-        this.getPaperListByYear();
-      }
-    },
-    // 获取历年真题试卷列表
-    getPaperListByYear() {
-      this.form.paperType = "历年真题";
-      papersList({
-        year: this.form.year,
-        papersType: this.form.paperType,
-        subjectName: this.form.subjectName,
-        papername: this.form.papername,
-        ...this.pageForm,
-      }).then((res) => {
-        this.total = res.total;
-        this.paperYearList = res.rows;
-        console.log(res);
-      });
-    },
-    toggleSub(e) {
-      this.form.papername = "";
-      this.form.subjectName = e;
-      this.getGradeList();
-      this.getYears();
-    },
-    toggleGrade(e) {
-      this.form.papername = "";
-      this.form.gradeName = e;
-      this.getPapersTypes();
-    },
-    toggleType(e) {
-      this.form.papername = "";
-      this.form.paperType = e;
-      this.getAreas();
-    },
-    toggleAreas(e) {
-      this.form.papername = "";
-      this.form.area = e;
-      this.getPaperList();
-    },
-    toggleYear() {
-      this.form.papername = "";
-      if (this.tabActive == 0) {
-        this.getPaperList();
-      } else {
-        this.getPaperListByYear();
-      }
-    },
-    prev() {
-      this.pageForm.pageNum--;
-      if (this.tabActive == 0) {
-        this.getPaperList();
-      } else {
-        this.getPaperListByYear();
-      }
-    },
-    // 收藏
-    collect(item) {
-      item.collect = !item.collect;
-      papersCollect({ paperId: item.id }).then((res) => {
-        this.msgSuccess("收藏成功");
-      });
-    },
-    // 取消收藏
-    cancelCollect(item) {
-      item.collect = !item.collect;
-      papersCancelCollect({ paperId: item.id }).then((res) => {
-        this.msgSuccess("取消收藏成功");
-      });
-    },
-    toggleSubByYear(e) {
-      this.form.subjectName = e;
-      this.getYears();
+    handleQuery(){
+
     },
-    togglePage() {
-      if (this.tabActive == 0) {
-        this.getPaperList();
-      } else {
-        this.getPaperListByYear();
-      }
+    handleInvalidQuery(){
+
     },
     switchTab(index) {
       this.tabActive = index;
-      if (index == 0) {
-        this.pageForm.pageNum = 1;
-        this.getPapersTypes();
-      } else {
-        this.pageForm.pageNum = 1;
-        this.getPaperListByYear();
-      }
     },
   },
 };
@@ -361,178 +97,6 @@ export default {
   color: #47c6a2;
   border-bottom: 4px solid #47c6a2;
 }
-.radio_contianer > div {
-  display: flex;
-}
-.radio_contianer span {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #232323;
-  line-height: 20px;
-  height: 20px;
-  margin-right: 16px;
-  flex-shrink: 0;
-}
-.radio_contianer .el-radio-button {
-  margin-right: 8px;
-}
-.search_header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  position: relative;
-  margin-right: 20px;
-  margin-bottom: 44px;
-}
-.search_header img {
-  position: absolute;
-  right: 20px;
-  cursor: pointer;
-  top: 6px;
-}
-.search_header input {
-  background: #f7f7ff;
-  border-radius: 20px;
-  border: 1px solid #c6cbf5;
-  outline: none;
-  width: 340px;
-  height: 32px;
-  padding-left: 24px;
-}
-.paper_item {
-  overflow: hidden;
-  padding-right: 68px;
-}
-.paper_item:first-child {
-  margin-top: 28px;
-}
-.paper_item {
-  margin-bottom: 40px;
-}
-.paper_item > img {
-  float: left;
-  margin-right: 24px;
-}
-.paper_item .center_wrap {
-  float: left;
-}
-.paper_item .center_wrap .center_tit {
-  margin-bottom: 48px;
-}
-.center_opera {
-  font-size: 14px;
-  overflow: hidden;
-}
-.center_opera > div {
-  float: left;
-}
-.center_opera .view {
-  color: #47c6a2;
-  border: 1px solid #47c6a2;
-  border-radius: 4px;
-  padding: 6px 12px 6px 9px;
-  display: flex;
-  align-items: center;
-  margin-right: 24px;
-  cursor: pointer;
-}
-.center_opera .download {
-  color: white;
-  padding: 6px 22px;
-  background: #47c6a2;
-  border-radius: 4px;
-  border: 1px solid #47c6a2;
-  margin-right: 40px;
-  cursor: pointer;
-}
-.center_opera .shoucan {
-  padding: 6px 0;
-  display: flex;
-  align-items: center;
-}
-.center_opera .shoucan img {
-  margin-right: 10px;
-  cursor: pointer;
-}
-.center_opera .shoucan span {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #9f9f9f;
-  line-height: 20px;
-}
-.center_opera .view img {
-  margin-right: 6px;
-}
-.paper_item .view_count {
-  float: right;
-  font-weight: 400;
-  color: #9f9f9f;
-  line-height: 20px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-}
-.pagination {
-  display: flex;
-  justify-content: center;
-}
-.real_topic {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.real_topic .topic_item {
-  flex: 31% 0 0;
-  padding: 20px 58px 20px 20px;
-  background: #47c6a224;
-  margin-bottom: 32px;
-}
-.real_topic .topic_item .paper_tit {
-  margin-bottom: 32px;
-}
-.real_topic .topic_item .paper_opera {
-  display: flex;
-}
-.real_topic .topic_item .paper_opera > div {
-  display: flex;
-  align-items: center;
-}
-.real_topic .topic_item .paper_opera .view {
-  cursor: pointer;
-  padding: 8px 12px 8px 9px;
-  border: 1px solid #47c6a2;
-  color: #47c6a2;
-  border-radius: 4px;
-  margin-right: 24px;
-}
-.real_topic .topic_item .paper_opera .btn {
-  background: #47c6a2;
-  cursor: pointer;
-  color: white;
-  padding: 6px 22px;
-  border-radius: 4px;
-}
-.real_topic .topic_item .paper_opera .view > img {
-  margin-right: 6px;
-}
-
-.bestpaper_container >>> .el-radio-button__inner {
-  border-left: 1px solid #dcdfe6;
-  margin-bottom: 5px;
-}
-
-.bestpaper_container >>> .radio_contianer .el-radio-button .el-radio-button__inner {
-  border-radius: 16px;
-}
-.bestpaper_container >>> .radio_contianer .is-active .el-radio-button__inner{
-  border-left: none;
-}
-.bestpaper_container >>> .split_page .el-pager > li {
-  border-radius: 50%;
-}
 
 </style>
 

src/views/questioncenter/components/famous-paper.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <el-card class="mb10">
+      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
+                    @invalid="handleInvalidQuery"
+      ></mx-condition>
+      <mx-search-group justify="end" placeholder="请输入内容"  v-model="form.paperName" @search="clickSuffix">
+      </mx-search-group>
+    </el-card>
+    <el-card class="main" v-if="papersList.length">
+      <!-- 试卷整体-----名校试卷名校试卷  -->
+      <div class="paper_container">
+        <div class="paper_item" v-for="item in papersList" :key="item.id">
+          <img src="@/assets/images/img_mignxiaoshijuan.png" alt=""/>
+          <div class="center_wrap">
+            <div class="center_tit">
+              {{ item.papername }}
+            </div>
+            <div class="center_opera">
+              <div class="view" @click="toPreView(item.id, item.papername)">
+                <img src="@/assets/images/icon_view.png" alt=""/>
+                <span>预览</span>
+              </div>
+              <div class="download" @click="paperDownLoad(item.id)">
+                <span>下载</span>
+              </div>
+              <div class="shoucan">
+                <div @click="collect(item)" v-if="!item.collect">
+                  <img src="@/assets/images/icon_shoucang_n.png" alt=""/>
+                  <span>收藏</span>
+                </div>
+                <div @click="cancelCollect(item)" v-else>
+                  <img src="@/assets/images/icon_shoucang_s.png" alt=""/>
+                  <span>已收藏</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="view_count">
+            <img src="@/assets/images/icon_eye2.png" alt=""/>
+            <span>{{ null == item.readNum ? 0 : item.readNum }}人已预览</span>
+          </div>
+        </div>
+      </div>
+      <pagination
+        :total="total"
+        :page.sync="pageForm.pageNum"
+        :limit.sync="pageForm.pageSize"
+        :page-sizes="[12,24,36]"
+        @pagination="togglePage"
+      />
+    </el-card>
+    <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+  </div>
+</template>
+<script>
+import { downloadRealPaper, paperGrade, papersCancelCollect, papersCollect, papersList } from '@/api/webApi/webQue.js'
+import { mapGetters } from 'vuex'
+import MxCondition from '@/components/MxCondition/mx-condition'
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+
+export default {
+  components:{
+    MxCondition,
+    MxSearchGroup
+  },
+  data() {
+    return {
+      queryParams: {
+        paperSubject: '',
+        paperGrade: '',
+        paperType: '',
+        paperArea: '',
+        paperYear: '',
+      },
+      requireFields: ['paperSubject', 'paperGrade', 'paperType', 'paperArea', 'paperYear'],
+      form: {
+        paperName:'',
+      },
+      pageForm: {
+        pageNum: 1,
+        pageSize: 12
+      },
+      papersList: [],
+      total: 0, // 试卷总数
+    }
+  },
+  computed: {
+    ...mapGetters(['period'])
+  },
+  methods: {
+    paperDownLoad(paperId) {
+      downloadRealPaper(paperId, this.period)
+    },
+    // 跳转到预览页面
+    toPreView(paperId, paperName) {
+      this.$router.push({
+        path: '/question-center/bestPaper/preview',
+        query: { paperId, paperName }
+      })
+    },
+    // 获取试卷列表
+    getPaperList() {
+      papersList({
+        subjectName: this.queryParams.paperSubject,
+        gradeName: this.queryParams.paperGrade,
+        paperType: this.queryParams.paperType,
+        area: this.queryParams.paperArea,
+        year: this.queryParams.paperYear,
+        papername: this.form.paperName,
+        ...this.pageForm
+      }).then((res) => {
+        this.total = res.total
+        this.papersList = res.rows
+        console.log(res)
+      })
+    },
+    clickSuffix() {
+      this.getPaperList()
+    },
+    // 收藏
+    collect(item) {
+      item.collect = !item.collect
+      papersCollect({ paperId: item.id }).then((res) => {
+        this.msgSuccess('收藏成功')
+      })
+    },
+    // 取消收藏
+    cancelCollect(item) {
+      item.collect = !item.collect
+      papersCancelCollect({ paperId: item.id }).then((res) => {
+        this.msgSuccess('取消收藏成功')
+      })
+    },
+    togglePage() {
+      this.getPaperList()
+    },
+    handleInvalidQuery() {
+      // todo
+    },
+    handleQuery() {
+      this.getPaperList()
+    }
+  }
+}
+</script>
+<style scoped>
+.paper_item {
+  overflow: hidden;
+  padding-right: 68px;
+}
+
+.paper_item:first-child {
+  margin-top: 28px;
+}
+
+.paper_item {
+  margin-bottom: 40px;
+}
+
+.paper_item > img {
+  float: left;
+  margin-right: 24px;
+}
+
+.paper_item .center_wrap {
+  float: left;
+}
+
+.paper_item .center_wrap .center_tit {
+  margin-bottom: 48px;
+}
+
+.center_opera {
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.center_opera > div {
+  float: left;
+}
+
+.center_opera .view {
+  color: #47c6a2;
+  border: 1px solid #47c6a2;
+  border-radius: 4px;
+  padding: 6px 12px 6px 9px;
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  cursor: pointer;
+}
+
+.center_opera .download {
+  color: white;
+  padding: 6px 22px;
+  background: #47c6a2;
+  border-radius: 4px;
+  border: 1px solid #47c6a2;
+  margin-right: 40px;
+  cursor: pointer;
+}
+
+.center_opera .shoucan {
+  padding: 6px 0;
+  display: flex;
+  align-items: center;
+}
+
+.center_opera .shoucan img {
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.center_opera .shoucan span {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #9f9f9f;
+  line-height: 20px;
+}
+
+.center_opera .view img {
+  margin-right: 6px;
+}
+
+.paper_item .view_count {
+  float: right;
+  font-weight: 400;
+  color: #9f9f9f;
+  line-height: 20px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+</style>
+

src/views/questioncenter/components/history-paper.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <el-card class="mb10">
+      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
+                    @invalid="handleInvalidQuery"
+      ></mx-condition>
+      <mx-search-group justify="end" placeholder="请输入内容"  v-model="form.paperName" @search="clickSearch">
+      </mx-search-group>
+    </el-card>
+    <el-card class="main" v-if="paperYearList.length">
+      <!-- 试卷整体-----历年真题  -->
+      <div class="real_topic" >
+        <div class="topic_item" v-for="item in paperYearList" :key="item.id">
+          <div class="paper_tit">
+            {{ item.papername }}
+          </div>
+          <div class="paper_opera">
+            <div class="view" @click="toPreView(item.id, item.papername)">
+              <img src="@/assets/images/icon_view.png" alt=""/>
+              <span>预览</span>
+            </div>
+            <div class="btn" @click="paperDownLoad(item.id)">下载</div>
+          </div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <pagination
+        :total="total"
+        :page.sync="pageForm.pageNum"
+        :limit.sync="pageForm.pageSize"
+        :page-sizes="[12,24,36]"
+        @pagination="togglePage"
+      />
+    </el-card>
+    <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+  </div>
+</template>
+<script>
+import { downloadRealPaper, papersList } from '@/api/webApi/webQue.js'
+import { mapGetters } from 'vuex'
+import MxCondition from '@/components/MxCondition/mx-condition'
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+
+export default {
+  components:{
+    MxCondition,
+    MxSearchGroup
+  },
+  props:{
+    queryYear:''
+  },
+  created() {
+    this.queryParams.paperYear = this.queryYear
+  },
+  data() {
+    return {
+      queryParams: {
+        paperSubject: '',
+        paperYear: ''
+      },
+      requireFields: ['paperSubject', 'paperYear'],
+      pageForm: {
+        pageNum: 1,
+        pageSize: 12
+      },
+      form: {
+        paperName: '',
+      },
+      total: 0, // 试卷总数
+      paperYearList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['period'])
+  },
+  methods: {
+    handleInvalidQuery() {
+      // todo
+    },
+    handleQuery() {
+      this.getPaperListByYear()
+    },
+    paperDownLoad(paperId) {
+      downloadRealPaper(paperId, this.period)
+    },
+    // 跳转到预览页面
+    toPreView(paperId, paperName) {
+      this.$router.push({
+        path: '/question-center/bestPaper/preview',
+        query: { paperId, paperName }
+      })
+    },
+    clickSearch() {
+        this.getPaperListByYear()
+    },
+    // 获取历年真题试卷列表
+    getPaperListByYear() {
+      this.form.paperType = '历年真题'
+      papersList({
+        year: this.queryParams.paperYear,
+        papersType: this.form.paperType,
+        subjectName: this.queryParams.paperSubject,
+        papername: this.form.paperName,
+        ...this.pageForm
+      }).then((res) => {
+        this.total = res.total
+        this.paperYearList = res.rows
+      })
+    },
+    togglePage() {
+      this.getPaperListByYear()
+    }
+  }
+}
+</script>
+<style scoped>
+.real_topic {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.real_topic .topic_item {
+  flex: 31% 0 0;
+  padding: 20px 58px 20px 20px;
+  background: #47c6a224;
+  margin-bottom: 32px;
+}
+
+.real_topic .topic_item .paper_tit {
+  margin-bottom: 32px;
+}
+
+.real_topic .topic_item .paper_opera {
+  display: flex;
+}
+
+.real_topic .topic_item .paper_opera > div {
+  display: flex;
+  align-items: center;
+}
+
+.real_topic .topic_item .paper_opera .view {
+  cursor: pointer;
+  padding: 8px 12px 8px 9px;
+  border: 1px solid #47c6a2;
+  color: #47c6a2;
+  border-radius: 4px;
+  margin-right: 24px;
+}
+
+.real_topic .topic_item .paper_opera .btn {
+  background: #47c6a2;
+  cursor: pointer;
+  color: white;
+  padding: 6px 22px;
+  border-radius: 4px;
+}
+
+.real_topic .topic_item .paper_opera .view > img {
+  margin-right: 6px;
+}
+</style>
+

src/views/questioncenter/components/smart-online.vue

@@ -157,6 +157,7 @@ export default {
       type:Array,
       default:[]
     },
+
     queryParams:{
       type:Object,
       default:[]