hidden collect column in Elective modules

src/views/career/subject/subjectChoice.vue

@@ -1,238 +1,246 @@
 <template>
-  <div >
+  <div>
     <div class="content-box">
-        <div>
-          <el-row class="radioInput">
-            <div>
-              <span class="radiaTitle">年份:</span>
-            </div>
-            <el-radio-group v-model="selected.years" @change="yearChange">
-              <el-radio-button
-                v-for="item in form.years"
-                :key="item"
-                :label="item"
-                style="margin-bottom: 10px"
-              ></el-radio-button>
-            </el-radio-group>
-          </el-row>
-          <el-row class="radioInput radioScience">
-            <div v-if="selectCourse.course0 ? selectCourse.course0.length : selectCourse.course0" class="fx-row">
-              <span class="radiaTitle">首选科目:</span>
-              <el-checkbox-group v-model="selected.sciences[0]" @change="onScienceChanged" size="mini" :max="1">
-                <el-checkbox-button v-for="item in selectCourse.course0" :key="item" :label="item">
-                  {{item}}
-                </el-checkbox-button>
-               </el-checkbox-group>
-            </div>
-
-            <div class="fx-row">
-              <span class="radiaTitle">{{ gkType == 1 ?  '再选科目' : '选科科目' }}：</span>
-               <el-checkbox-group v-model="selected.sciences[1]" @change="onScienceChanged" size="mini" :max="gkType == 1 ? 2 : 3">
-                <el-checkbox-button v-for="item in selectCourse.course1" :key="item" :label="item">
-                  {{item}}
-                </el-checkbox-button>
-               </el-checkbox-group>
-            </div>
+      <div>
+        <el-row class="radioInput">
+          <div>
+            <span class="radiaTitle">年份:</span>
+          </div>
+          <el-radio-group v-model="selected.years" @change="yearChange">
+            <el-radio-button
+              v-for="item in form.years"
+              :key="item"
+              :label="item"
+              style="margin-bottom: 10px"
+            ></el-radio-button>
+          </el-radio-group>
+        </el-row>
+        <el-row class="radioInput radioScience">
+          <div v-if="selectCourse.course0 ? selectCourse.course0.length : selectCourse.course0" class="fx-row">
+            <span class="radiaTitle">首选科目:</span>
+            <el-checkbox-group v-model="selected.sciences[0]" @change="onScienceChanged" size="mini" :max="1">
+              <el-checkbox-button v-for="item in selectCourse.course0" :key="item" :label="item">
+                {{ item }}
+              </el-checkbox-button>
+            </el-checkbox-group>
+          </div>
 
-          </el-row>
-          <filter-form :filter="filter_form"></filter-form>
-          <mx-search-group class="mb10" justify="end" :span="12" v-model="keyword" placeholder="请输入内容" @search="httpGetXkcxList"
-          ></mx-search-group>
-        </div>
-        <div class="content" v-if="Object.keys(propDefines).length">
-          <div class="concerned-college-container" v-loading="loading">
-            <mx-table :rows="dataList" :propDefines="propDefines">
-              <template #collect="{ row }">
-                <img
-                  class="college-icon"
-                  v-if="row.collect"
-                  @click="httpCollectRemove(row)"
-                  src="@/assets/images/subject/icon_shoucang_pre.png"
-                />
-                <img
-                  class="college-icon"
-                  v-else
-                  @click="httpCollectAdd(row)"
-                  src="@/assets/images/subject/icon_shoucang_n.png"
-                />
-              </template>
-              <template #isSelectCourse="{ 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"
-              :total="total"
-              :page.sync="pageNum"
-              :limit.sync="pageSize"
-              :page-size="20"
-              @pagination="onChangePage"
-            />
+          <div class="fx-row">
+            <span class="radiaTitle">{{ gkType == 1 ? '再选科目' : '选科科目' }}：</span>
+            <el-checkbox-group v-model="selected.sciences[1]" @change="onScienceChanged" size="mini"
+                               :max="gkType == 1 ? 2 : 3">
+              <el-checkbox-button v-for="item in selectCourse.course1" :key="item" :label="item">
+                {{ item }}
+              </el-checkbox-button>
+            </el-checkbox-group>
           </div>
+
+        </el-row>
+        <filter-form :filter="filter_form"></filter-form>
+        <mx-search-group class="mb10" justify="end" :span="12" v-model="keyword" placeholder="请输入内容"
+                         @search="httpGetXkcxList"
+        ></mx-search-group>
+      </div>
+      <div class="content" v-if="Object.keys(propDefines).length">
+        <div class="concerned-college-container" v-loading="loading">
+          <mx-table :rows="dataList" :propDefines="propDefines">
+            <template #collect="{ row }">
+              <img
+                class="college-icon"
+                v-if="row.collect"
+                @click="httpCollectRemove(row)"
+                src="@/assets/images/subject/icon_shoucang_pre.png"
+              />
+              <img
+                class="college-icon"
+                v-else
+                @click="httpCollectAdd(row)"
+                src="@/assets/images/subject/icon_shoucang_n.png"
+              />
+            </template>
+            <template #isSelectCourse="{ 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"
+            :total="total"
+            :page.sync="pageNum"
+            :limit.sync="pageSize"
+            :page-size="20"
+            @pagination="onChangePage"
+          />
         </div>
-       <evaluation-empty v-else shadow title="请先选择科目"></evaluation-empty>
+      </div>
+      <evaluation-empty v-else shadow title="请先选择科目"></evaluation-empty>
     </div>
   </div>
 </template>
 
 <script>
-  import {collectAdd, collectRemove, xkcxlist, xkcxYears,saveSelectCourse,getSelectCourse} from "@/api/webApi/webQue";
-  import MxSearchGroup from "@/components/MxSearch/mx-search-group";
-  import FilterForm from '@/views/career/components/FilterForm';
-  export default {
-    props: {
-      course0:{
-        type: String,
-        default: ''
+import { collectAdd, collectRemove, getSelectCourse, saveSelectCourse, xkcxlist, xkcxYears } from '@/api/webApi/webQue'
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+import FilterForm from '@/views/career/components/FilterForm'
+
+export default {
+  props: {
+    course0: {
+      type: String,
+      default: ''
+    },
+    course1: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    hiddenCollect: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    MxSearchGroup,
+    FilterForm
+  },
+  data() {
+    return {
+      form: {
+        years: []
       },
-      course1:{
-        type: String,
-        default: ''
+      selectCourse: {},
+      gkType: 1, // 1 4选2  2 6选3
+      filter_form: {
+        location: '',
+        natureTypeCN: '',
+        type: '',
+        level: '',
+        features: ''
       },
-      readonly: {
-        type: Boolean,
-        default: false
+      // 选中条件
+      selected: { years: '', sciences: [[], []] },
+      pageNum: 1,
+      pageSize: 20,
+      total: 0,
+      loading: false,
+      keyword: '',
+      // 查询结果
+      dataList: [],
+      isShowTabl: true,
+      propDefines: {}
+    }
+  },
+  watch: {
+    filter_form: {
+      deep: true,
+      handler(val) {
+        this.httpGetXkcxList()
       }
+    }
+  },
+  created() {
+    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.getSelectCourse()
+  },
+  methods: {
+    getSelectCourse() {
+      getSelectCourse().then(res => {
+        this.selectCourse = res.data
+        if (!res.data.course0) {
+          this.gkType = 2
+        } else {
+          this.gkType = 1
+        }
+      })
     },
-    components : {
-      MxSearchGroup,
-      FilterForm
+    // 有效年份
+    getYears() {
+      xkcxYears().then((res) => {
+        this.form.years = res.data || []
+        this.selected.years = this.form.years[0]
+      })
     },
-    data() {
-      return {
-        form: {
-          years: [],
-        },
-        selectCourse:{},
-        gkType: 1, // 1 4选2  2 6选3
-        filter_form:{
-          location:'',
-          natureTypeCN:'',
-          type:'',
-          level:'',
-          features:'',
-        },
-        // 选中条件
-        selected: { years:'', sciences:[[],[]]},
-        pageNum: 1,
-        pageSize: 20,
-        total: 0,
-        loading: false,
-        keyword: "",
-        // 查询结果
-        dataList: [],
-        isShowTabl: true,
-        propDefines: {},
-      };
+    yearChange(value) {
+      this.httpGetXkcxList()
     },
-    watch:{
-      filter_form:{
-        deep:true,
-        handler(val) {
-          this.httpGetXkcxList()
-        }
-      },
-    },
-    created() {
-      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.getSelectCourse()
+    onScienceChanged(value) {
+      this.httpGetXkcxList()
     },
-    methods: {
-      getSelectCourse(){
-        getSelectCourse().then(res => {
-          this.selectCourse = res.data
-          if(!res.data.course0) {
-            this.gkType = 2
-          }else {
-            this.gkType = 1
-          }
-        })
-      },
-      // 有效年份
-      getYears() {
-        xkcxYears().then((res) => {
-          this.form.years = res.data || [];
-          this.selected.years  = this.form.years[0]
-        });
-      },
-      yearChange(value) {
-        this.httpGetXkcxList();
-      },
-      onScienceChanged(value) {
-        this.httpGetXkcxList();
-      },
-      httpGetXkcxList() {
-        const course = [...this.selected.sciences[0],...this.selected.sciences[1]].filter(item => item != '')
-        if (course.length<3) return;
-        this.loading = true
-        xkcxlist({
-          keyword: this.keyword,
-          isMajor:false,
-          course0: this.selected.sciences[0].toString(),
-          course1: this.selected.sciences[1].toString(),
-          year: this.selected.years.toString(),
-          ...this.filter_form,
-          pageNum: this.pageNum,
-          marjors: [],
-          pageSize: this.pageSize,
-        })
-          .then((res) => {
-            let propDefines = {}
-            this.dataList = res.rows;
-            this.total = res.total;
-            this.isShowTable = true;
-            Object.keys(res.header).forEach(item => {
-               propDefines[item] = {label:res.header[item],slot:item}
-            })
-            this.propDefines = propDefines
+    httpGetXkcxList() {
+      const course = [...this.selected.sciences[0], ...this.selected.sciences[1]].filter(item => item != '')
+      if (course.length < 3) return
+      this.loading = true
+      xkcxlist({
+        keyword: this.keyword,
+        isMajor: false,
+        course0: this.selected.sciences[0].toString(),
+        course1: this.selected.sciences[1].toString(),
+        year: this.selected.years.toString(),
+        ...this.filter_form,
+        pageNum: this.pageNum,
+        marjors: [],
+        pageSize: this.pageSize
+      })
+        .then((res) => {
+          let propDefines = {}
+          this.dataList = res.rows
+          this.total = res.total
+          this.isShowTable = true
+          Object.keys(res.header).forEach(item => {
+            if (item === 'collect' && this.hiddenCollect) return 
+            propDefines[item] = { label: res.header[item], slot: item }
           })
-          .finally(() => {
-            this.loading = false
+          this.propDefines = propDefines
         })
-      },
-      onChangePage(page) {
-        this.pageSize = page.limit;
-        this.pageNum = page.page;
-        this.httpGetXkcxList();
-      },
-      // 收藏
-      httpCollectAdd(row) {
-        row.collect = true;
-        collectAdd({
-          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)
-          }
+        .finally(() => {
+          this.loading = false
         })
-      },
-      // 取消收藏
-      httpCollectRemove(row) {
-        row.collect = false;
-        collectRemove({
-          refId: row.id,
-        });
-      },
     },
-  };
+    onChangePage(page) {
+      this.pageSize = page.limit
+      this.pageNum = page.page
+      this.httpGetXkcxList()
+    },
+    // 收藏
+    httpCollectAdd(row) {
+      row.collect = true
+      collectAdd({
+        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
+      collectRemove({
+        refId: row.id
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
-.el-icon-success{
+.el-icon-success {
   cursor: pointer;
 }
 
@@ -241,37 +249,37 @@
 }
 
 
-  .search_header {
-    margin-left: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-    position: relative;
-    margin-right: 20px;
-  }
+.search_header {
+  margin-left: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  margin-right: 20px;
+}
 
-  .search_header img {
-    position: absolute;
-    right: 20px;
-    cursor: pointer;
-    top: 6px;
-  }
+.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;
-  }
+.search_header input {
+  background: #f7f7ff;
+  border-radius: 20px;
+  border: 1px solid #c6cbf5;
+  outline: none;
+  width: 340px;
+  height: 32px;
+  padding-left: 24px;
+}
 
-  .popup-item-title span {
-    font-size: 14px;
-    font-weight: 500;
-  }
+.popup-item-title span {
+  font-size: 14px;
+  font-weight: 500;
+}
 
 </style>
 
@@ -285,19 +293,24 @@
 <style lang="scss">
 .el-checkbox-button {
   margin-bottom: 10px;
+
   .el-checkbox-button__inner {
     font-size: 14px;
   }
 }
 
 .radioInput {
-  background-color: #ffffff;font-size: 14px;padding:5px;
+  background-color: #ffffff;
+  font-size: 14px;
+  padding: 5px;
+
   .el-radio {
     .el-radio__input {
       display: none;
     }
   }
 }
+
 .radioInput.radioScience {
   .el-radio-button {
     border: 1px solid #47C6A2;
@@ -305,8 +318,10 @@
     margin-right: 10px;
   }
 }
+
 .radioInput {
   display: flex;
+
   .el-radio-button .el-radio-button__inner {
     border-radius: 4px !important;
     border: none;
@@ -314,9 +329,11 @@
     font-weight: 400;
     font-family: PingFangSC-Regular, PingFang SC;
   }
+
   .el-radio-button__orig-radio:checked + .el-radio-button__inner {
     box-shadow: none;
   }
+
   .radiaTitle {
     display: inline-block;
     width: 80px;
@@ -326,6 +343,7 @@
     margin-right: 10px;
   }
 }
+
 //.radioInput02 {
 //  display: flex;
 //  align-items: center;

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

@@ -1,7 +1,7 @@
 <template>
   <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" title="选择自选专业" append-to-body
              :before-close="cancel" :close-on-click-modal="false" width="70%">
-    <subject-choice :course0="course0" :course1="course1" :readonly="readonly"></subject-choice>
+    <subject-choice :course0="course0" :course1="course1" :readonly="readonly" hidden-collect></subject-choice>
   </el-dialog>
 </template>
 <script>