模拟志愿

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -27,26 +27,6 @@
       <el-button type="primary" @click="next" v-if="currentStep <= 1">下一步</el-button>
       <el-button type="primary" @click="save" v-if="currentStep > 1">保存志愿</el-button>
     </div>
-    <div :class="{'active':show,'right_cart': true}" v-if="currentStep > 1">
-      <div class="btn-wrap" @click="show = !show">
-        当前志愿表
-      </div>
-      <transition name="content">
-        <div class="content-wrap">
-          <el-input class="input" v-model="input" placeholder="院校/专业搜索"></el-input>
-          <div class="content">
-            <div class="list"></div>
-            <div class="btn">
-              <el-button style="width: 100%;height: 30px"  type="primary">保存志愿表</el-button>
-            </div>
-          </div>
-        </div>
-      </transition>
-
-    </div>
-    <div class="mask" v-if="show" @click="show = false">
-
-    </div>
   </div>
 </template>
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 80%; margin:0 auto">
+  <div style="width: 90%; margin:0 auto" >
     <div class="zhiyuan-filter">
       <div class="header">
         <h3 class="f-666">您的选考科目为：<em>{{ formSubject.firstSubject }}<em v-for="item in formSubject.lastSubject"
@@ -58,7 +58,36 @@
       </div>
     </div>
     <div class="zhiyuan-list">
-      <zhiyuan-list :tableList="rows" :cols="cols" @expand="expand"></zhiyuan-list>
+      <zhiyuan-list :tableList="rows" @apply="apply" :cols="cols" @expand="expand"></zhiyuan-list>
+    </div>
+    <div :class="{'active':show,'right_cart': true}" >
+      <div class="btn-wrap" @click="show = !show">
+        当前志愿表
+      </div>
+      <transition name="content">
+        <div class="content-wrap">
+          <!--          <el-input class="input" v-model="input" placeholder="院校/专业搜索"></el-input>-->
+          <div class="content">
+            <div class="list-item" v-for="(college,collegeIndex) in this.formatZhiyuan">
+              <div class="head-college f16">
+                <el-tag type="success" size="mini" class="mr12">{{ collegeIndex + 1 }}</el-tag>
+                {{ `${college.university.name}(${college.recruitPlan.collegeCode })` }}
+                <i class="el-icon-delete delete-icon"></i>
+              </div>
+              <div class="majors f12">
+                <div class="major mt10" v-for="(major,majorIndex) in college.majors">
+                  <span class="mr12 ml10">{{majorIndex + 1}}</span>
+                  {{major.marjorName}}
+                  <i  class="el-icon-delete delete-icon" @click="deleteMajor(major)"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="btn">
+            <el-button style="width: 100%;height: 30px"  type="primary">保存志愿表</el-button>
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -95,6 +124,7 @@ export default {
       },
       currentMajor:'',
       majorList:[],
+      show: false,
       localFilters: {
         picks: [
           { label: '冲刺型', value: '0' },
@@ -103,7 +133,8 @@ export default {
         ]
       },
       rows: [],
-      cols: []
+      cols: [],
+      selectedList:[]
     }
   },
   created() {
@@ -113,6 +144,14 @@ export default {
       this.getCols()
     })
   },
+  watch:{
+    filter_form:{
+      deep:true,
+      handler(){
+        this.getList()
+      }
+    }
+  },
   computed: {
     // 所有二级
     majorAllChildren() {
@@ -133,6 +172,18 @@ export default {
         return item.code == this.currentMajor
       }).children || []
     },
+    formatZhiyuan() {
+      if(!this.selectedList.length) return []
+      return this.selectedList.map(item => {
+        return {
+          university: item.university,
+          majors:item.majors.filter(major =>{ return  major.selected }),
+          recruitPlan: item.recruitPlan
+        }
+      }).filter(item => {
+        return  item.majors.length > 0
+      })
+    },
     isAll:{
       get(){
         // 当前children 全选
@@ -152,6 +203,19 @@ export default {
     },
   },
   methods: {
+    apply(item,index) {
+      //  有无院校  ？
+      const codeFlag = this.selectedList.find(item => item.recruitPlan.collegeCode == this.rows[index].recruitPlan.collegeCode)
+      console.log(!codeFlag)
+      if(!codeFlag){
+        this.selectedList.push(this.rows[index])
+      }
+      item.selected = !item.selected
+
+    },
+    deleteMajor(major){
+      major.selected = false
+    },
     expand(item) {
       console.log(item)
       if(item.isExpand) {
@@ -201,7 +265,7 @@ export default {
           item.majors = []
           return item
         })
-        this.rows = rows.splice(0,1)
+        this.rows = rows
       })
     },
     getVoluntaryMarjors(item) {
@@ -214,7 +278,10 @@ export default {
           wishOnly: true,
           year: item.recruitPlan.year,}
       ).then(res => {
-        item.majors = res.data
+        item.majors = res.data.map(item => {
+          item.selected = false
+          return item
+        })
         console.log(res)
       })
     },
@@ -289,6 +356,10 @@ export default {
   border: 1px solid #eee;
 }
 
+.delete-icon{
+  float: right;
+  cursor: pointer;
+}
 .filter_name {
   box-sizing: border-box;
   width: 70px;
@@ -372,4 +443,71 @@ em {
     margin-right: 10px;
   }
 }
+.right_cart{
+  position: fixed;
+  top: 50%;
+  right: -320px;
+  transform: translate(0%,-50%);
+  transition: all 1s ease;
+}
+.active{
+  right: 0;
+}
+.right_cart{
+  display: flex;
+  z-index: 9999;
+}
+.right_cart .btn-wrap{
+  cursor: pointer;
+  align-self: baseline;
+  border-radius: 5px 0 0 5px;
+  color: white;
+  background: #42b983;
+  width: 30px;
+  text-align: center;
+  font-size: 16px;
+  padding: 7px;
+}
+.content-wrap{
+  padding: 10px 0;
+  background: #fff;
+  width: 320px;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid #f2f2f2;
+}
+.content{
+  height: 100%;
+  overflow-y: auto;
+  padding: 0 20px
+}
+
+
+.content-wrap .input{
+  padding: 0 15px;
+}
+
+.content-wrap .btn{
+  width: 100% ;
+  padding: 0 15px;
+}
+.list-item{
+  margin-bottom: 10px;
+  border-bottom: 1px solid #e6e6e6;
+  padding-bottom: 20px;
+}
+
+.mask{
+  z-index: 2009;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  opacity: 0.5;
+  margin: 0;
+}
 </style>

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

@@ -1,210 +1,218 @@
 <template>
-  <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>
+    <dynamic-table :rows="tableList" :columns="columns" @expand-change="expand" >
+      <template #expand="{row,$index}">
+        <div>
+          <dynamic-table :columns="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="row.selected ? 'danger' : 'primary'" @click="apply(row,$index)"> {{row.selected ?'取消' :  '填报' }}</el-button>
+            </template>
+          </dynamic-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}(${row.recruitPlan.collegeCode })` || '' }}</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.recruitPlan.collegeCode }}</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 class="f14">
+          <p>录取人数</p>
+          <p>线差</p>
+          <p>最低分</p>
+          <p>最低位次</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>
+      </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>
-        <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>
+      </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>
-        <span v-else>暂无</span>
-      </div>
-    </template>
-    <template #t7="{row}">
-      <span type="primary" > {{`共有专业${row.recruitPlan.majorCount}个`}}</span>
-    </template>
-  </mx-table>
+      </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}">
+        <p type="primary"> {{ `共有专业${row.recruitPlan.majorCount}个` }}</p>
+        <p class="f12 f-primary" v-show="row.majors.filter(major => {return major.selected}).length">  已填  <span>{{ row.majors.filter(major => {return major.selected}).length }}</span> </p>
+      </template>
+    </dynamic-table>
+  </div>
+
 </template>
 <script>
- export default {
-   props:{
-     tableList:{
-       type:Array,
-       default:[]
-     },
-     cols: {
-       type:Array,
-       default:[]
-     }
-   },
-   data() {
-     return {
-       propDefines:{
+import DynamicTable from '@/components/dynamic-table'
 
-       }
-     }
-   },
-   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)
-     }
-   }
- }
+export default {
+  components: {
+    DynamicTable,
+  },
+  props: {
+    tableList: {
+      type: Array,
+      default: []
+    },
+    cols: {
+      type: Array,
+      default: []
+    },
+  },
+  data() {
+    return {
+      show:false,
+      input:'',
+      selectedList:[]
+    }
+  },
+  computed: {
+    columns() {
+      if(!this.cols.length) return []
+      const columns = [{
+        type: 'expand',
+        slotBody: 'expand'
+      }]
+      this.cols.map((item, index) => {
+        columns.push({
+          label: item,
+          slotBody: 't' + index
+        })
+      })
+      return columns
+    },
+    majorCol() {
+      return this.cols.map((item, index) => {
+        return {
+          label: item,
+          slotBody: 't' + index
+        }
+      })
+    },
+  },
+  methods: {
+    expand(item) {
+      this.$emit('expand', item)
+    },
+    apply(item,index) {
+      this.$emit('apply',item,index)
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
-.f-9b{
+.f-9b {
   color: #9b9b9b;
 }
-::v-deep .el-table__expanded-cell{
+::v-deep .el-table__expanded-cell {
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;