完善选科报名表

mock/modules/elective-subject.js

@@ -12,43 +12,43 @@ module.exports = [
         data:[
           {
             collegeId: 1,
-            collegeName: '百京带学',
+            collegeName: '北京大学',
             majorCategoryName: '计算机技术',  // 专业类别
             majorCategoryCode: '1',  // 专业编码
             majors: [],          // 类别下分类
             limitationA: '',
             limitationB: '',
-            matchedGroupIds: [1,2,3,4,5,6], // 匹配哪几个组合？
+            matchedGroupIds: [3,2], // 匹配哪几个组合？
           },
           {
             collegeId: 2,
-            collegeName: '湖南带学',
+            collegeName: '湖南大学',
             majorCategoryName: '医学',  // 专业类别
             majorCategoryCode: '2',  // 专业编码
             majors: [],          // 类别下分类
             limitationA: '',
             limitationB: '',
-            matchedGroupIds: [1,2,3,4,5,6], // 匹配哪几个组合？
+            matchedGroupIds: [2], // 匹配哪几个组合？
           },
           {
             collegeId: 3,
-            collegeName: '中南带学',
+            collegeName: '中南大学',
             majorCategoryName: '法学',  // 专业类别
-            majorCategoryCode: '1',  // 专业编码
+            majorCategoryCode: '3',  // 专业编码
             majors: [],          // 类别下分类
             limitationA: '',
             limitationB: '',
-            matchedGroupIds: [1,2,3,4,5,6], // 匹配哪几个组合？
+            matchedGroupIds: [1,2], // 匹配哪几个组合？
           },
           {
             collegeId: 3,
-            collegeName: '中南带学',
+            collegeName: '中南大学',
             majorCategoryName: '土木工程',  // 专业类别
-            majorCategoryCode: '1',  // 专业编码
+            majorCategoryCode: 'a',  // 专业编码
             majors: [],          // 类别下分类
             limitationA: '',
             limitationB: '',
-            matchedGroupIds: [1,2,3,4,5,6], // 匹配哪几个组合？
+            matchedGroupIds: [1], // 匹配哪几个组合？
           }
         ]
       }

src/views/system/user/profile/components/groups-match.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-dialog
+    title="整体组合匹配"
+    :visible.sync="show"
+    width="70%"
+  >
+    <div>
+      <mx-table :propDefines="propDefines" :rows="formatList">
+      </mx-table>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="show = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      show: false,
+      majors: [],
+      reports: [],
+    }
+  },
+  computed: {
+    formatList() {
+      if (!this.reports.length) return []
+      return this.reports.map(item => {
+        let tempProp = {}
+        this.majors.map(major => {
+          if(major.matchedGroupIds.findIndex(gi => item.groupId == gi) != -1) {
+            tempProp[`a${major.majorCategoryCode}`] = `符合(${major.collegeName})`
+          }
+        })
+        return {
+          groupName: item.groupName,
+          rankInGrade: item.rankInGrade,
+          ...tempProp
+        }
+      })
+    },
+    propDefines() {
+        const props = {}
+        this.majors.map(item => {
+          props[`a${item.majorCategoryCode}`] = {label:item.majorCategoryName }
+        })
+        return {
+          groupName: {
+            label: '专业/组合'
+          },
+          rankInGrade: {
+            label: '当前组合全校排名'
+          },
+          ...props,
+        }
+    },
+  },
+  methods: {
+    open(reports,majors) {
+      this.show = true
+      this.reports = reports
+      this.majors = majors
+    },
+  }
+}
+</script>
+<style scoped>
+.cell .el-tag{
+  margin-right: 5px;
+}
+</style>

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

@@ -1,17 +1,31 @@
 <template>
   <el-card>
     <template #header>
-      <div>
+      <div class="fx-row fx-bet-cen">
         选科报名表
+      <el-button>选科历史记录</el-button>
       </div>
     </template>
     <mx-table :propDefines="propDefines" :rows="formatList">
       <template #temp="{row}">
-        <span>选择</span>
-        <span>查看记录</span>
+<!--        <el-button>选择</el-button>-->
+<!--        <el-button>查看</el-button>-->
+      </template>
+      <template #proportion="{row}">
+        <span :style="{color: row.personInTime > row.personCount ? 'red' : '#42b983'}">{{row.personInTime}}</span>
+        <span >/{{row.personCount}}</span>
       </template>
       <template #signUp="{row}">
-        <span>{{row.selected ? '已报名' : '报名'}}</span>
+        <span>{{ row.selected ? '已报名' : '报名' }}</span>
+      </template>
+      <template #subjects="{row}">
+        <el-tag type="success" class="mr10 mb10" v-for="subject in row.subjects">{{ subject[0] }}</el-tag>
+      </template>
+      <template #colleges="{row}">
+        <div v-for="college in row.colleges">
+          <el-tag type="success" class="mb10">{{ college.major[0] }}</el-tag>:
+          <span>{{ college.college }}</span>
+        </div>
       </template>
     </mx-table>
   </el-card>
@@ -21,7 +35,7 @@
 export default {
   data() {
     return {
-      list:[],
+      list: [],
       optionalMajors: [],
       propDefines: {
         index: {
@@ -38,7 +52,8 @@ export default {
           label: '人数设置'
         },
         proportion: {
-          label: '选科人数比' // personInTime/personCount 实时人数/人数设置 = 选科人数比
+          label: '选科人数比', // personInTime/personCount 实时人数/人数设置 = 选科人数比
+          slot: 'proportion'
         },
         rankInGroup: {
           label: '当前组合实时排名'
@@ -53,11 +68,15 @@ export default {
           label: '选择专业',
           slot: 'temp'
         },
-        subject: {
-          label: '已选专业'
+        subjects: {
+          label: '已选专业',
+          slot: 'subjects',
+          width: '150'
         },
-        college: {
-          label: '院校'
+        colleges: {
+          label: '院校',
+          slot: 'colleges',
+          width: 200
         },
         signUp: {
           label: '操作',
@@ -69,9 +88,20 @@ export default {
   computed: {
     formatList() {
       if (!this.list.length) return []
+      if (!this.optionalMajors.length) return []
       // 格式化
       return this.list.map(item => {
-        item.proportion = item.personInTime+ '/'+ item.personCount
+        item.subjects = this.optionalMajors.filter(college => {
+          if (college.matchedGroupIds.indexOf(item.groupId) != -1) return college.majorCategoryName
+        }).map(item => item.majorCategoryName)
+        item.colleges = this.optionalMajors.filter(college => {
+          if (college.matchedGroupIds.indexOf(item.groupId) != -1) return college.majorCategoryName
+        }).map(item => {
+          return {
+            college: item.collegeName,
+            major: item.majorCategoryName
+          }
+        })
         return item
       })
     }
@@ -83,8 +113,9 @@ export default {
       this.list = list
     },
     initOption(optionalMajors) {
+      console.log(optionalMajors)
       this.optionalMajors = optionalMajors
-    },
+    }
     // async getOptionalMajors() {
     //   const res = await getOptionalMajors()
     //   this.optionalMajors = res.data
@@ -94,5 +125,7 @@ export default {
 }
 </script>
 <style scoped>
-
+.cell .el-tag{
+  margin-right: 5px;
+}
 </style>

src/views/system/user/profile/components/select-subject.vue

@@ -5,16 +5,15 @@
         <template #header>
           <div class="fx-row fx-bet-cen">
             您的自选专业:
-            <el-button>整体匹配</el-button>
+            <el-button @click="toMatch">整体匹配</el-button>
           </div>
-
         </template> <div>
         <el-popover
           placement="bottom"
           trigger="hover"
           v-for="item in optionalMajors"
         >
-          <el-button type="primary">匹配组合</el-button>
+          <el-button type="primary" @click="toGroupMatch(item)">匹配组合</el-button>
           <el-tag class="mr10 mb10" type="success" slot="reference">{{ item.majorCategoryName }}</el-tag>
         </el-popover>
       </div>
@@ -30,26 +29,46 @@
         </template>
       </el-card>
     </el-col>
+    <!-- 整体组合匹配 -->
+    <group-match ref="groupMatch"></group-match>
+    <!-- 单组合匹配-->
+    <single-group-match ref="singleMatch"></single-group-match>
   </el-row>
 </template>
 <script>
-
-import { getOptionalMajors } from '@/api/webApi/elective/ selected-subject'
-
+import GroupMatch from './groups-match'
+import SingleGroupMatch from './single-group-match'
 export default {
+  components: {
+    GroupMatch,
+    SingleGroupMatch
+  },
+  props: {
+    list: {
+      type:Array,
+      default: _ => {}
+    },
+    optionalMajors: {
+      type:Array,
+      default: _ => {}
+    }
+  },
   data() {
     return {
-      optionalMajors: []
+      dialogVisible:false,
+      propDefines: {},
     }
   },
   created() {
-    this.getOptionalMajors()
   },
   methods: {
-    async getOptionalMajors() {
-      const res = await getOptionalMajors()
-      this.optionalMajors = res.data
-      console.log(res)
+    // 整体组合匹配
+    toMatch() {
+      this.$refs.groupMatch.open(this.list,this.optionalMajors)
+    },
+    // 单组合匹配
+    toGroupMatch(major) {
+      this.$refs.singleMatch.open(major,this.list)
     }
   }
 }

src/views/system/user/profile/components/single-group-match.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-dialog
+    title="单组合匹配"
+    :visible.sync="singleShow"
+    width="30%"
+  >
+    <div>
+      <mx-table :propDefines="propDefines" :rows="formatList">
+      </mx-table>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="singleShow = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      singleShow: false,
+      major: [],
+      reports: [],
+    }
+  },
+  computed: {
+    formatList() {
+      if (!this.reports.length) return []
+      return this.reports.map(item => {
+        return {
+          groupName: item.groupName,
+          status: this.major.matchedGroupIds.findIndex(gi => gi == item.groupId) != -1 ? '符合' : '不符合',
+        }
+      })
+    },
+    propDefines() {
+      if (!this.major) return {}
+      return {
+        groupName: {
+          label: `${this.major.majorCategoryName}(${this.major.collegeName})`
+        },
+        status: {
+          label: '符合'
+        },
+      }
+    },
+  },
+  methods: {
+    open(major,reports) {
+      this.singleShow = true
+      this.major = major
+      this.reports = reports
+    },
+  }
+}
+</script>
+<style scoped>
+.cell .el-tag{
+  margin-right: 5px;
+}
+</style>

src/views/system/user/profile/round-select.vue

@@ -25,7 +25,7 @@
       </el-row>
     </el-card>
     <!--  自选专业 推荐专业  -->
-    <select-subject class="mt20"></select-subject>
+    <select-subject class="mt20" :optionalMajors="optionalMajors" :list="reportList"></select-subject>
     <!--  选科报名表  -->
     <report-table class="mt20"  ref="reportRef" :list="reportList"></report-table>
     <test-summary></test-summary>