模拟志愿表格

src/api/webApi/professlib.js

@@ -48,6 +48,15 @@ export function getProfesslibDetails(params) {
   })
 }
 
+
+// 获取推荐志愿表头
+export function getVoluntaryHeaders(params) {
+  return request({
+    url: 'front/syzy/zytb/getVoluntaryHeaders',
+    method: 'get',
+    params:params,
+  })
+}
 // 获取推荐志愿
 export function getRecommendVoluntary(data,params) {
   return request({

src/components/MxTable/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-table ref="table" :border="border" :data="rows" :span-method="mergeRowsColumns"
+            :show-header="showHeader" @expand-change="expand"
             @selection-change="$emit('selection-change', $event)" tooltip-effect="dark">
     <template v-for="(prop, key) in propDefines">
       <template v-if="prop.hidden"></template>
@@ -56,8 +57,24 @@
           </el-table-column>
         </template>
       </el-table-column>
+      <el-table-column :key="key" v-else-if="prop.type == 'expand'" :type="prop.type" :reserve-selection="reserveSelection" :label="prop.label" :width="prop.width"
+                       :align="prop.align || 'center'">
+        <template slot-scope="scope">
+          <slot v-if="prop.type == 'expand' && prop.slot" :name="prop.slot" v-bind="{
+            ...scope,
+            key: key,
+            label: prop.label,
+            value: scope.row[key],
+            prop: prop
+          }">
+            <span>{{ scope.row[key] }}</span>
+          </slot>
+          <span v-else>{{ scope.row[key] }}</span>
+        </template>
+      </el-table-column>
       <el-table-column :key="key" v-else :type="prop.type" :reserve-selection="reserveSelection" :label="prop.label" :width="prop.width"
-                       :align="prop.align || 'center'"></el-table-column>
+                       :align="prop.align || 'center'">
+      </el-table-column>
     </template>
   </el-table>
 </template>
@@ -74,6 +91,10 @@ export default {
     }
   },
   props: {
+    showHeader:{
+      type: Boolean,
+      default: true
+    },
     keepScroll: {
       type: Boolean,
       default: false
@@ -138,6 +159,9 @@ export default {
       setTimeout(() => {
         this.$refs.table.bodyWrapper.scrollLeft = Number(this.$refs.table.bodyWidth.replace('px', ''))
       }, 500)
+    },
+    expand(item){
+      this.$emit('expand-change',item)
     }
   }
 }

src/views/career/zhiyuan/components/recommend.vue

@@ -58,14 +58,14 @@
       </div>
     </div>
     <div class="zhiyuan-list">
-      <zhiyuan-list :tableList="rows" @expand="expand"></zhiyuan-list>
+      <zhiyuan-list :tableList="rows" :cols="cols" @expand="expand"></zhiyuan-list>
     </div>
   </div>
 </template>
 <script>
 import FilterForm from '@/views/career/components/FilterForm';
 import ZhiyuanList from '@/views/career/zhiyuan/components/zhiyuan-list';
-import { allMajor,getRecommendVoluntary,getVoluntaryMarjors } from '@/api/webApi/professlib'
+import { allMajor,getRecommendVoluntary,getVoluntaryMarjors,getVoluntaryHeaders } from '@/api/webApi/professlib'
 export default {
   props: {
     formSubject: {
@@ -103,12 +103,14 @@ export default {
         ]
       },
       rows: [],
+      cols: []
     }
   },
   created() {
     this.$nextTick(_ => {
       this.getAllMajor()
       this.getList()
+      this.getCols()
     })
   },
   computed: {
@@ -159,7 +161,14 @@ export default {
         item.isExpand = true
         this.getVoluntaryMarjors(item)
       }
-
+    },
+    getCols() {
+      getVoluntaryHeaders({
+        mode:`${this.formSubject.firstSubject},${this.formSubject.lastSubject}`,
+        year: this.batch.year
+      }).then(res => {
+          this.cols = res.data
+      })
     },
     getList() {
       const data = {

src/views/career/zhiyuan/components/zhiyuan-list.vue

@@ -1,133 +1,145 @@
 <template>
-  <el-table
-    :data="tableList"
-    @expand-change="expand"
-  >
-    <el-table-column
-      type="expand"
-    >
-      <template scope="scope">
-        <el-table
-          :data="scope.row.majors"
-          :show-header="false"
-        >
-          <el-table-column label="院校" width="200">
-                  <template scope="major">
-                    <div>
-                      <p class="mb10"><span class="pointer">{{major.row.marjorName}}</span></p>
-                           <p class="f-9b f12">代码 {{major.row.marjorBelongs}}</p>
-                    </div>
-                  </template>
-          </el-table-column>
-          <el-table-column label="招生计划" width="200"       align="center">
-            <template scope="major">
-              <div>
-                <p><span class="f18">{{ major.row.planCount || '-'}}</span>人</p>
-                          <p class="f-9b f12">{{`${major.row.xuezhi} ￥${major.row.xuefei}`}}</p>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="历年" width="100"   >
-            <template scope="major">
-              <div class="f14">
-                <p>录取人数</p>
-                <p>线差</p>
-                <p>最低分</p>
-                <p>最低位次</p>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            width="150"
-            :label="`${item.year}年 ${item.type}`"
-            v-for="item in tableList.length ?  tableList[0].histories : []"
-          >
-            <template scope="major">
-              <div class="f14">
-                <p>{{ major.row.histories.find(his => his.year == item.year).numReal || '-'}}</p>
-                <p>{{ major.row.histories.find(his => his.year == item.year).lineDiff || '-'}}</p>
-                <p>{{ major.row.histories.find(his => his.year == item.year).score || '-'}}</p>
-                <p>{{ major.row.histories.find(his => his.year == item.year).seat|| '-' }}</p>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-
-      </template>
-    </el-table-column>
-<!--    <el-table-column-->
-<!--      prop="date"-->
-<!--      label="录取概率"-->
-<!--      width="150"-->
-<!--    >-->
-<!--      <template scope="scope">-->
-<!--        <div>-->
-<!--          <p class="mb10"><span class="f18">{{ scope.row.enrollRatio }}</span>%</p>-->
-<!--          <p class="mb10 f-9b f12">{{scope.row.enrollRatioText}}</p>-->
-<!--          <p><el-tag type="success">冲</el-tag></p>-->
-<!--        </div>-->
-<!--      </template>-->
-<!--    </el-table-column>-->
-    <el-table-column
-      label="院校"
-      width="200"
-    >
-      <template scope="scope">
-        <div>
-          <p class="mb10"><span class="pointer">{{scope.row.university.name || ''}}</span></p>
-          <p class="mb5 f-9b f12">{{scope.row.university.features.split(',').join(' ')}}</p>
-          <p class="mb5 f-9b f12">{{scope.row.university.location}} {{scope.row.university.cityName}} 排名{{scope.row.university.ranking}}</p>
-          <p class="f-9b f12">代码 {{scope.row.university.code}}</p>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="招生计划"
-      width="200"
-      align="center"
-    >
-      <template scope="scope">
-        <div>
-          <p><span class="f18">{{ scope.row.recruitPlan.planCount}}</span>人</p>
-          <p class="f-9b f12">{{scope.row.recruitPlan.course}}</p>
+  <mx-table :prop-defines="formatCols" :rows="tableList" @expand-change="expand">
+    <template #expand="{row,$index}" >
+       <div>
+         <mx-table :prop-defines="majorCol"  :show-header="false" :rows="row.majors">
+           <template #t0="{row}">
+             <!--    录取概率 -->
+             <div>
+               <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>
+               <p class="mb10 f-9b f12">{{row.enrollRatioText}}</p>
+               <p><el-tag type="success">冲</el-tag></p>
+             </div>
+           </template>
+           <template #t1="{row}">
+             <div>
+               <p class="mb10"><span class="pointer">{{row.marjorName}}</span></p>
+               <p class="f-9b f12">代码 {{row.marjorBelongs}}</p>
+             </div>
+           </template>
+           <template #t2="{row}">
+             <div>
+                               <p><span class="f18">{{ row.planCount || '-'}}</span>人</p>
+                                         <p class="f-9b f12">{{`${row.xuezhi} ￥${row.xuefei}`}}</p>
+             </div>
+           </template>
+           <template #t3="{row}">
+             <div class="f14">
+               <p>录取人数</p>
+               <p>线差</p>
+               <p>最低分</p>
+               <p>最低位次</p>
+             </div>
+           </template>
+           <template #t4="{row}">
+             <div class="f14">
+               <div v-if="row.histories[0]">
+                 <p>{{ row.histories[0].numReal || '-'}}</p>
+                 <p>{{ row.histories[0].lineDiff || '-'}}</p>
+                 <p>{{ row.histories[0].score || '-'}}</p>
+                 <p>{{ row.histories[0].seat|| '-' }}</p>
+               </div>
+               <span v-else>暂无</span>
+             </div>
+           </template>
+           <template #t5="{row}">
+             <div class="f14">
+               <div v-if="row.histories[1]">
+                 <p>{{ row.histories[1].numReal || '-'}}</p>
+                 <p>{{ row.histories[1].lineDiff || '-'}}</p>
+                 <p>{{ row.histories[1].score || '-'}}</p>
+                 <p>{{ row.histories[1].seat|| '-' }}</p>
+               </div>
+               <span v-else>暂无</span>
+             </div>
+           </template>
+           <template #t6="{row}">
+             <div class="f14">
+               <div v-if="row.histories[2]">
+                 <p>{{ row.histories[2].numReal || '-'}}</p>
+                 <p>{{ row.histories[2].lineDiff || '-'}}</p>
+                 <p>{{ row.histories[2].score || '-'}}</p>
+                 <p>{{ row.histories[2].seat|| '-' }}</p>
+               </div>
+               <span v-else>暂无</span>
+             </div>
+           </template>
+           <template #t7="{row}">
+             <el-button type="primary" @click="apply(row,$index)">添加</el-button>
+           </template>
+         </mx-table>
+       </div>
+    </template>
+    <template #t0="{row}">
+<!--    录取概率 -->
+      <div>
+        <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>
+        <p class="mb10 f-9b f12">{{row.enrollRatioText}}</p>
+        <p><el-tag type="success">冲</el-tag></p>
+      </div>
+    </template>
+    <template #t1="{row}">
+      <!-- 院校 -->
+      <div>
+        <p class="mb10"><span class="pointer">{{row.university.name || ''}}</span></p>
+        <p class="mb5 f-9b f12">{{row.university.features.split(',').join(' ')}}</p>
+        <p class="mb5 f-9b f12">{{row.university.location}} {{row.university.cityName}} 排名{{row.university.ranking}}</p>
+        <p class="f-9b f12">代码 {{row.university.code}}</p>
+      </div>
+    </template>
+    <template #t2="{row}">
+      <!-- 招生计划 -->
+      <div>
+        <p><span class="f18">{{ row.recruitPlan.planCount}}</span>人</p>
+        <p class="f-9b f12">{{row.recruitPlan.course}}</p>
+      </div>
+    </template>
+    <template #t3="{row}">
+        <!--   历年 -->
+      <div class="f14">
+        <p>录取人数</p>
+        <p>线差</p>
+        <p>最低分</p>
+        <p>最低位次</p>
+      </div>
+    </template>
+    <template #t4="{row}">
+      <div class="f14">
+        <div v-if="row.histories[0]">
+          <p>{{ row.histories[0].numReal || '-'}}</p>
+          <p>{{ row.histories[0].lineDiff || '-'}}</p>
+          <p>{{ row.histories[0].score || '-'}}</p>
+          <p>{{ row.histories[0].seat|| '-' }}</p>
         </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="历年"
-      width="100"
-    >
-      <template scope="scope">
-        <div class="f14">
-          <p>录取人数</p>
-          <p>线差</p>
-          <p>最低分</p>
-          <p>最低位次</p>
+        <span v-else>暂无</span>
+      </div>
+    </template>
+    <template #t5="{row}">
+      <div class="f14">
+        <div v-if="row.histories[1]">
+          <p>{{ row.histories[1].numReal || '-'}}</p>
+          <p>{{ row.histories[1].lineDiff || '-'}}</p>
+          <p>{{ row.histories[1].score || '-'}}</p>
+          <p>{{ row.histories[1].seat|| '-' }}</p>
         </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-       :label="`${item.year}年 ${item.type}`"
-       v-for="item in tableList.length ?  tableList[0].histories : []"
-       width="150"
-    >
-      <template scope="scope">
-        <div class="f14">
-          <p>{{ scope.row.histories.find(his => his.year == item.year).numReal || '-'}}</p>
-          <p>{{ scope.row.histories.find(his => his.year == item.year).lineDiff || '-'}}</p>
-          <p>{{ scope.row.histories.find(his => his.year == item.year).score || '-'}}</p>
-          <p>{{ scope.row.histories.find(his => his.year == item.year).seat|| '-' }}</p>
+        <span v-else>暂无</span>
+      </div>
+    </template>
+    <template #t6="{row}">
+      <div class="f14">
+        <div v-if="row.histories[2]">
+          <p>{{ row.histories[2].numReal || '-'}}</p>
+          <p>{{ row.histories[2].lineDiff || '-'}}</p>
+          <p>{{ row.histories[2].score || '-'}}</p>
+          <p>{{ row.histories[2].seat|| '-' }}</p>
         </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-    label="填报"
-     >
-      <template scope="scope">
-        <span type="primary" > {{`专业${scope.row.recruitPlan.majorCount}`}}</span>
-      </template>
-    </el-table-column>
-  </el-table>
+        <span v-else>暂无</span>
+      </div>
+    </template>
+    <template #t7="{row}">
+      <span type="primary" > {{`共有专业${row.recruitPlan.majorCount}个`}}</span>
+    </template>
+  </mx-table>
 </template>
 <script>
  export default {
@@ -135,6 +147,10 @@
      tableList:{
        type:Array,
        default:[]
+     },
+     cols: {
+       type:Array,
+       default:[]
      }
    },
    data() {
@@ -145,10 +161,41 @@
      }
    },
    computed:{
+     formatCols(){
+       if(!this.cols) return {}
+       const obj = {
+         temp:{
+           type:'expand',
+           slot:'expand'
+         }
+       }
+       this.cols.map((item,index) => {
+         obj['a' + item] = {
+           label:item,
+           slot: 't'+index
+         }
+       })
+       return obj
+     },
+     majorCol() {
+       const obj = {
+       }
+       this.cols.map((item,index) => {
+         obj['a' + item] = {
+           label:item,
+           slot: 't'+index
+         }
+       })
+       return obj
+     }
    },
    methods:{
      expand(item) {
         this.$emit('expand',item)
+     },
+     apply(item,index) {
+       console.log(item)
+       console.log(index)
      }
    }
  }
@@ -159,6 +206,7 @@
 }
 ::v-deep .el-table__expanded-cell{
   padding-top: 0;
+  padding-right: 0;
   padding-bottom: 0;
 }
 </style>