选课查询选择专业抽取成组件，选科报名选专业跳转

src/api/webApi/elective/ selected-subject.js

@@ -4,7 +4,7 @@ import request from '@/utils/request'
 // 学生获取自选专业及匹配情况
 export function getOptionalMajors(params) {
   return request({
-    url: '/mock/front/elective/optionalMajors',
+    url: '/front/elective/enroll/getOptionalMajors',
     method: 'get',
     params
   })

src/api/webApi/webQue.js

@@ -640,6 +640,14 @@ export function schemeDfRemove(query) {
     params: query,
   })
 }
+export function saveSelectCourse(query) {
+  return request({
+    url: '/front/syzy/xkcx/saveSelectCourse',
+    method: 'get',
+    params: query,
+  })
+}
+
 
 // /prod-api/front/v2/papers/saveToPersonResources
 // 保存到个人资料库(课件资源)

src/components/Cache/modules/mx-select-translate-mixin.js

@@ -27,6 +27,12 @@ export default {
     },
     translateGroup(groupId) {
       return this.listGroupsOptions.find(g => g.value == groupId)?.text || '未知选科组合'
+    },
+    translateCourse0(groupId) {
+      return this.listGroupsOptions.find(g => g.value == groupId)?.course0
+    },
+    translateCourse1(groupId) {
+      return this.listGroupsOptions.find(g => g.value == groupId)?.course1
     }
   }
 }

src/components/Cache/mx-cache-mixin.js

@@ -77,7 +77,9 @@ export default {
         listGroups,
         res => res.data.map(g => ({
           text: g.name,
-          value: g.groupId
+          value: g.groupId,
+          course0: g.course0,
+          course1: g.course1,
         })),
         useCache)
     },

src/router/index.js

@@ -677,7 +677,7 @@ export const constantRoutes = [{
       },
       {
         path: '/career/subject/subjectChoice',
-        component: (resolve) => require(['@/views/career/subject/subjectChoice.vue'], resolve),
+        component: (resolve) => require(['@/views/career/subject/choose-subject.vue'], resolve),
         name: 'SubjectChoice',
         meta: {
           title: '由科目选专业'

src/views/career/subject/choose-subject.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="subject-page">
+    <el-card class="mt20 mb20" >
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/career/plan/index' }"
+        >生涯·志愿1
+        </el-breadcrumb-item
+        >
+        <el-breadcrumb-item :to="{ path: '/career/subject/index' }"
+        >选科查询
+        </el-breadcrumb-item
+        >
+        <el-breadcrumb-item>由科目选专业</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-card>
+    <el-card>
+      <subject-choice></subject-choice>
+    </el-card>
+  </div>
+</template>
+<script>
+import SubjectChoice from'./subjectChoice'
+export default {
+  components: {
+    SubjectChoice
+  },
+  data() {
+    return{
+
+    }
+  }
+}
+</script>
+<style scoped>
+.subject-page {
+  padding: 0 100px;
+}
+</style>

src/views/career/subject/subjectChoice.vue

@@ -1,21 +1,6 @@
 <template>
-  <div class="subject-page">
-    <el-card class="mt20 mb20" >
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: '/career/plan/index' }"
-        >生涯·志愿1
-        </el-breadcrumb-item
-        >
-        <el-breadcrumb-item :to="{ path: '/career/subject/index' }"
-        >选科查询
-        </el-breadcrumb-item
-        >
-        <el-breadcrumb-item>由科目选专业</el-breadcrumb-item>
-      </el-breadcrumb>
-    </el-card>
+  <div >
     <div class="content-box">
-      <el-card>
         <div>
           <el-row class="radioInput">
             <div>
@@ -106,23 +91,25 @@
           </el-row>
         </div>
         <div class="content">
-          <div class="xkcx-input-box">
-            <div class="search_header">
-              <input
-                placeholder="请输入内容"
-                v-model="keyword"
-                @keyup.enter="httpGetXkcxList()"
-              />
-              <img
-                src="@/assets/images/icon_search2.png"
-                alt=""
-                @click="httpGetXkcxList()"
-              />
-            </div>
-          </div>
-          <div class="concerned-college-container">
+<!--          <div class="xkcx-input-box">-->
+<!--            <div class="search_header">-->
+<!--              <input-->
+<!--                placeholder="请输入内容"-->
+<!--                v-model="keyword"-->
+<!--                @keyup.enter="httpGetXkcxList()"-->
+<!--              />-->
+<!--              <img-->
+<!--                src="@/assets/images/icon_search2.png"-->
+<!--                alt=""-->
+<!--                @click="httpGetXkcxList()"-->
+<!--              />-->
+<!--            </div>-->
+<!--          </div>-->
+          <mx-search-group class="mb10" justify="end" :span="12" v-model="keyword" placeholder="请输入内容" @search="httpGetXkcxList"
+          ></mx-search-group>
+          <div class="concerned-college-container" v-loading="loading">
             <mx-table :rows="dataList" :propDefines="propDefines">
-              <template #select="{ row }">
+              <template #collect="{ row }">
                 <img
                   class="college-icon"
                   v-if="row.collect"
@@ -136,6 +123,13 @@
                   src="@/assets/images/subject/icon_shoucang_n.png"
                 />
               </template>
+              <template #select="{ row }">
+                <div @click="saveCourseCollect(row)">
+                  <i class="el-icon el-icon-success"  style="color: #42b983" v-if="row.isSelectCourse"></i>
+                  <i class="el-icon el-icon-success"  v-else></i>
+                </div>
+
+              </template>
             </mx-table>
             <pagination
               v-show="total > 0"
@@ -147,16 +141,29 @@
             />
           </div>
         </div>
-      </el-card>
     </div>
   </div>
 </template>
 
 <script>
   import { selectUniversity } from '@/api/webApi/career-course'
-  import {collectAdd, collectRemove, xkcxlist, xkcxYears} from "@/api/webApi/webQue";
+  import {collectAdd, collectRemove, xkcxlist, xkcxYears,saveSelectCourse} from "@/api/webApi/webQue";
+  import MxSearchGroup from "@/components/MxSearch/mx-search-group";
 
   export default {
+    props: {
+      course0:{
+        type: String,
+        default: ''
+      },
+      course1:{
+        type: String,
+        default: ''
+      }
+    },
+    components : {
+      MxSearchGroup
+    },
     data() {
       return {
         // 初始条件
@@ -173,6 +180,7 @@
         pageNum: 1,
         pageSize: 20,
         total: 0,
+        loading: false,
         keyword: "",
         // 查询结果
         dataList: [],
@@ -204,7 +212,13 @@
             align: "left",
           },
           collect: {
-            label: "选择",
+            label: "收藏",
+            align: "left",
+            slot: "collect",
+            width: "100px",
+          },
+          subjectCollect: {
+            label: "选科收藏",
             align: "left",
             slot: "select",
             width: "100px",
@@ -213,16 +227,9 @@
       };
     },
     created() {
-      if (this.scienceList.length > 0) {
-        this.curSelectScienceList = this.scienceList[0]["name"];
-      }
-      if (this.liberalArts.length > 2) {
-        this.curSelectLiberalArts.push(this.liberalArts[0]["name"]);
-        this.curSelectLiberalArts.push(this.liberalArts[1]["name"]);
-      }
-      this.httpGetXkcxYears();
-      this.httpUniversityFilters();
-      this.httpGetMarjorsList();
+      this.selected.sciences[0] = this.course0 ? [this.course0] : []
+      this.selected.sciences[1] = this.course1? this.course1.split(',') :[]
+      if(this.course0 && this.course1) this.httpGetXkcxList()
       this.getYears();
       this.getUniversity();
 
@@ -268,6 +275,7 @@
         if (this.selected.sciences[0].length<1 || this.selected.sciences[1].length<2) return;
 
         //console.log(this.selected);return;
+        this.loading = true
         xkcxlist({
           level:this.selected.levels.toString(),
           keyword: this.keyword,
@@ -289,7 +297,9 @@
           .catch((err) => {
             console.log("请求出错！");
             this.cleanSchoolSelect();
-          });
+          }).finally(() => {
+            this.loading = false
+        })
       },
 
       onChangePage(page) {
@@ -304,6 +314,18 @@
           refId: row.id,
         });
       },
+      // 选科收藏 取消和收藏
+      saveCourseCollect(row) {
+        saveSelectCourse({
+          refId:row.id,
+          isSelectCourse: !row.isSelectCourse
+        }).then(res =>{
+          if(res.code== 200){
+            row.isSelectCourse = !row.isSelectCourse
+            this.$message.success(res.msg)
+          }
+        })
+      },
       // 取消收藏
       httpCollectRemove(row) {
         row.collect = false;
@@ -316,14 +338,9 @@
 </script>
 
 <style scoped>
-.xkcx-input-box {
-  padding: 20px 0;
-  display: flex;
-  margin-top: -3em;
+.el-icon-success{
+  cursor: pointer;
 }
-  .subject-page {
-    padding: 0 100px;
-  }
 
 .college-icon {
   cursor: pointer;

src/views/system/user/profile/components/choose-subject-dialog.vue

@@ -0,0 +1,40 @@
+<template>
+    <el-dialog
+      v-if="dialogVisible"
+      title="选择自选专业"
+      :visible.sync="dialogVisible"
+      width="70%"
+    >
+      <subject-choice :course0="course0" :course1="course1" ></subject-choice>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+</template>
+<script>
+import SubjectChoice from'@/views/career/subject/subjectChoice'
+export default {
+  components: {
+    SubjectChoice
+  },
+  data() {
+    return{
+      dialogVisible:false,
+      course0: '',
+      course1: '',
+    }
+  },
+  methods: {
+    open(course0, course1) {
+      this.dialogVisible = true
+      this.course0 = course0
+      this.course1 = course1
+    },
+    handleClose() {
+
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

src/views/system/user/profile/components/report-table.vue

@@ -51,17 +51,23 @@
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
+    <choose-subject-dialog ref="chooseDialog"></choose-subject-dialog>
   </el-card>
 </template>
 <script>
+import MxSelectTranslate from '@/components/Cache/modules/mx-select-translate-mixin.js'
 import { formatSubject } from '@/utils/index'
 import TestDrage  from './test-drage'
 import VueEsign from  '@/components/VueEsign/index'
+import ChooseSubjectDialog from  './choose-subject-dialog'
+
 export default {
   components: {
     TestDrage,
-    VueEsign
+    VueEsign,
+    ChooseSubjectDialog
   },
+  mixins:[MxSelectTranslate],
   data() {
     return {
       list: [],
@@ -138,6 +144,9 @@ export default {
             major: item.majorCategoryName
           }
         })
+        // 增加 course0 course1
+        item.course0 = this.translateCourse0(item.groupId)
+        item.course1 = this.translateCourse1(item.groupId)
         return item
       })
     }
@@ -187,17 +196,17 @@ export default {
       });
     },
     toSelectSub(row)  {
-      // 首选科目
-      const groupArr = row.groupName.split('').map(item => {
-        return formatSubject(item)
-      })
-      const firstSub =  groupArr[0] // 首选科目
-      const lastSub = groupArr.splice(1, 2) // 次选科目
-      console.log(groupArr)
-      console.log(firstSub)
-      console.log(lastSub)
-      // 跳转到选科页面
-      this.$router.push({path:'/career/subject/subjectChoice',query: {curSelectScienceList: firstSub,curSelectLiberalArts: lastSub }})
+      // // 首选科目
+      // const groupArr = row.groupName.split('').map(item => {
+      //   return formatSubject(item)
+      // })
+      // const firstSub =  groupArr[0] // 首选科目
+      // const lastSub = groupArr.splice(1, 2) // 次选科目
+      // console.log(groupArr)
+      // console.log(firstSub)
+      // console.log(lastSub)
+      // 打开选科弹窗
+      this.$refs.chooseDialog.open(row.course0,row.course1)
     },
     init(list) {
       console.log(list)