修改项目

src/layout/components/Sidebar/index.vue

@@ -28,9 +28,9 @@ import variables from '@/styles/variables.scss'
 
 export default {
   components: { SidebarItem, Logo },
-  mounted () {
-    console.log(this.permission_routes)
-  },
+  // mounted () {
+  //   console.log(this.permission_routes)
+  // },
   computed: {
     ...mapGetters([
       'sidebar',

src/router/index.js

@@ -54,6 +54,7 @@ export const constantRoutes = [
     path: '/reportForm',
     redirect: '/reportForm/index'
   },
+  // 开发中临时侧边栏-----------------------------------
   {
     path: '/silder',
     component: Layout,
@@ -65,7 +66,33 @@ export const constantRoutes = [
         meta: { title: '侧边栏' }
       }
     ]
-  }
+  },
+  {
+    path: '/journal',
+    component: Layout,
+    meta: { title: '系统日志' },
+    children: [
+      {
+        path: 'journal',
+        component: () => import('@/views/journal/index'),
+        meta: { title: '日志' }
+      }
+    ]
+  },
+  {
+    path: '/teamBuild', // 创建乐团
+    component: Layout,
+    children: [
+      {
+        path: 'teamBuild',
+        name: 'teamBuild',
+        component: () => import('@/views/teamBuild/index'),
+        meta: { title: '创建乐团' }
+      }
+    ]
+  },
+
+  // 临时侧边栏结束-----------------------------------
   // {
   //   path: '/teamDetail', // 乐团详情
   //   component: Layout,
@@ -377,7 +404,7 @@ export function resetRouter () {
 export const asyncRoutes = {
   Layout: Layout,
   main: () => import('@/views/main/index'),
-  teamDetail: () => import('@/views/main/index'),
+  teamDetail: () => import('@/views/teamDetail/teamList'),
   vipList: () => import('@/views/vipClass/vipList'),
   teacherList: () => import('@/views/teacherManager/teacherList'),
   studentList: () => import('@/views/studentManager/studentList'),

src/store/modules/user.js

@@ -47,18 +47,18 @@ const actions = {
   getInfo ({ commit, state }) {
     return new Promise((resolve, reject) => {
       getInfo(state.token).then(response => {
-        // if (response.code == 200) {
-        const data = response
-        if (!data.data) {
-          reject('获取用户信息错误,请重新登录')
+        if (response.code == 200) {
+          const data = response
+          if (!data.data) {
+            reject('获取用户信息错误,请重新登录')
+          }
+          const username = data.data.username;
+          const avatar = data.data.avatar;
+          // const { name, avatar } = data
+          commit('SET_NAME', username)
+          commit('SET_AVATAR', avatar)
+          resolve(data)
         }
-        const username = data.data.username;
-        const avatar = data.data.avatar;
-        // const { name, avatar } = data
-        commit('SET_NAME', username)
-        commit('SET_AVATAR', avatar)
-        resolve(data)
-        // }
       }).catch(error => {
         reject(error)
       })

src/views/journal/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="m-container">
+    <h2>系统设置 <div class="squrt"></div>
+    </h2>
+    <div class="m-core">
+      <el-tabs type="border-card"
+               v-model="activeIndex">
+        <el-tab-pane label="基本信息"
+                     name='1'>
+          <item />
+        </el-tab-pane>
+        <el-tab-pane label="建团日志"
+                     name='2'>
+        </el-tab-pane>
+        <el-tab-pane label="审批日志"
+                     name='3'>
+        </el-tab-pane>
+
+      </el-tabs>
+
+    </div>
+  </div>
+</template>
+<script>
+import item from './journalItem'
+export default {
+  components: {
+    item
+  },
+  data () {
+    return {
+      activeIndex: '1'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/journal/journalItem.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class='infoWrap'>
+    <div class="left">
+      <div class="unread"> <img :src="img.boxicon"
+             alt=""> 未读消息</div>
+      <div class="read">已读消息</div>
+      <div class="recovery">回收站</div>
+    </div>
+    <div class="middle"></div>
+    <div class="right"></div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      img: {
+        bookicon: require('@/assets/images/base/bookicon.png'),
+        Hbookicon: require('@/assets/images/base/bookicon-h.png'),
+        trashicon: require('@/assets/images/base/trashicon.png'),
+        Htrashicon: require('@/assets/images/base/trashicon-h.png'),
+        boxicon: require('@/assets/images/base/boxicon.png'),
+        Hboxicon: require('@/assets/images/base/boxicon-h.png')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.infoWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  .left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .unread {
+      img {
+        width: 26px;
+        height: 25px;
+      }
+    }
+  }
+}
+</style>

src/views/main/index.vue

@@ -1,312 +1,113 @@
 <template>
   <div class="m-container">
-    <h2>乐团列表</h2>
+    <h2>首页 <div class="squrt"></div>
+    </h2>
     <div class="m-core">
-      <div class="btnList">
-        <div class='newBand'>新建乐团</div>
-        <div class='newBand'>声部调整</div>
-        <div class='newBand'>乐团合并</div>
-        <div class='newBand'>乐团加课</div>
-      </div>
-
-      <el-form :inline="true"
-               class="topForm"
-               ref="topForm"
-               :model="topForm">
-        <el-form-item prop='school'>
-          <el-select v-model="topForm.school"
-                     placeholder="请选择学校名称">
-            <el-option v-for="(item,index) in schools"
-                       :key="index"
-                       :label="item.text"
-                       :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- 多选 -->
-        <el-form-item prop='status'>
-          <el-select class='multiple'
-                     v-model="topForm.status"
-                     placeholder="请选择收费类型"
-                     multiple
-                     collapse-tags>
-            <el-option v-for="(item,index) in nowStatus"
-                       :key="index"
-                       :label="item.text"
-                       :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <!-- 收费类型 -->
-        <el-form-item prop='payType'>
-          <el-select v-model="topForm.payType">
-            <el-option label="1.0"
-                       value="1"></el-option>
-            <el-option label="1.5"
-                       value="2"></el-option>
-            <el-option label="2.0"
-                       value="3"></el-option>
-            <el-option label="3.0"
-                       value="4"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop='word'>
-          <el-input type="text"
-                    placeholder="请输入搜索关键字"
-                    suffix-icon="el-icon-search"
-                    @focus="gotoSearch"
-                    v-model="topForm.word" />
-        </el-form-item>
-        <el-form-item>
-          <div class='searchBtn'>搜索</div>
-        </el-form-item>
-      </el-form>
-      <div class="searchWrap">
-        <p>查询条件:</p>
-        <div class="searchItem"
-             @click="closeSearch(item)"
-             v-for="(item,index) in searchLsit">
-          {{ item.key }}
-          <i class="el-icon-close"></i>
+      <div class="itemWrap">
+        <div class="item">
+          <h4>
+            <p>本月收入</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">笔数</p>
+              <p class='msg'>1200</p>
+            </div>
+            <div class="info">
+              <p class="sub">总计</p>
+              <p class='msg'>23,000,000</p>
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="item">
+          <h4>
+            <p>本月收入</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">笔数</p>
+              <p class='msg'>1200</p>
+            </div>
+            <div class="info">
+              <p class="sub">总计</p>
+              <p class='msg'>23,000,000</p>
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="item">
+          <h4>
+            <p>分部乐团数</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">全部</p>
+              <p class='msg'>23</p>
+            </div>
+            <div class="info">
+              <p class="sub">进行中</p>
+              <p class='msg'>23</p>
+            </div>
+            <div class="info">
+              <p class="sub">已完成</p>
+              <p class='msg'>23</p>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="tableWrap">
-        <el-table style="width: 100%"
-                  :data='tableData'>
-          <el-table-column prop="num"
-                           align='center'
-                           label="乐团编号">
-          </el-table-column>
-          <el-table-column prop="name"
-                           align='center'
-                           label="乐团名称">
-          </el-table-column>
-          <el-table-column align='center'
-                           max-width='274'
-                           label="学校名称">
-          </el-table-column>
-          <el-table-column prop="status"
-                           align='center'
-                           label="乐团状态">
-          </el-table-column>
-          <el-table-column prop="type"
-                           align='center'
-                           label="收费类型">
-          </el-table-column>
-          <el-table-column prop="teacher"
-                           align='center'
-                           label="教务老师">
-          </el-table-column>
-          <el-table-column prop="captain"
-                           align='center'
-                           label="乐团团长">
-          </el-table-column>
-          <el-table-column prop="captain"
-                           align='center'
-                           label="成团人数">
-          </el-table-column>
-          <el-table-column prop="readers"
-                           align='center'
-                           label="在读人数">
-          </el-table-column>
-          <el-table-column prop="course"
-                           align='center'
-                           label="当前课时">
-          </el-table-column>
-          <el-table-column prop="timer"
-                           align='center'
-                           label="成团时间">
-          </el-table-column>
-          <el-table-column prop="handle"
-                           align='center'
-                           width='200px'
-                           label="操作">
-          </el-table-column>
-        </el-table>
-        <!-- 分页器 -->
-        <!-- 分页 -->
-        <pagination :total="rules.total"
-                    :page.sync="rules.page"
-                    :limit.sync="rules.limit"
-                    :page-sizes="rules.page_size"
-                    @pagination="getList" />
       </div>
     </div>
   </div>
 </template>
 <script>
-import pagination from '@/components/Pagination/index'
-import { truncate } from 'fs';
 export default {
-  name: "Main",
-  data () {
-    return {
-      topForm: {
-        school: '',
-        status: [],
-        payType: '',
-        word: ''
-      },
-      schools: [{ // 学校数组
-        value: 1, text: '张三团'
-      }, {
-        value: 2, text: '李四团'
-      }],
-      nowStatus: [{ // 状态数组
-        value: 1, text: '报名中'
-      },
-      {
-        value: 2, text: '缴费中'
-      }, {
-        value: 3, text: '筹备中'
-      },
-      {
-        value: 4, text: '进行中'
-      }, {
-        value: 5, text: '失败'
-      }, {
-        value: 6, text: '已结束'
-      },
-      {
-        value: 7, text: '暂停'
-      },
-      ],
-      searchLsit: [], // 存储选择后的数组
-      tableData: [], // table数据
-      rules: {
-        // 分页规则
-        limit: 10, // 限制显示条数
-        page: 1, // 当前页
-        total: 0, // 总条数
-        page_size: [10, 20, 40, 50] // 选择限制显示条数
-      }
-    }
-  },
-  components: {
-    pagination
-  },
-  methods: {
-    getList () {
-
-    },
-    setSearchList (obj) {
-      // 
-      // 没有相同的key=>添加这个对象
-      // 有相同的key => 替换这个对象
-      if (obj.type == 1) {
-        let flag = false;
-        this.searchLsit = this.searchLsit.map(item => {
-          if (item.id == obj.id) {
-            item = obj;
-            flag = true;
-          }
-          return item;
-        })
-        if (!flag) {
-          this.searchLsit.push(obj)
-        }
-      } else {
-        let flag = false;
-        this.searchLsit = this.searchLsit.map(item => {
-          if (item.key == obj.key) {
-            // 多选框的再次点击=> 等于 就是删除
-            item = obj;
-            flag = true;
-          }
-          return item;
-        })
-        if (!flag) {
-          this.searchLsit.push(obj)
-        }
-      }
 
-    },
-    closeSearch (item) {
-      // 1.删除search里的元素
-      if (item.type == 1) {
-        for (let some in this.searchLsit) {
-          if (this.searchLsit[some].id == item.id) {
-            this.searchLsit.splice(some, 1);
-          }
-        }
-        // 2.清空对应元素所对应的的值
-        this.topForm[item.id] = '';
-      } else {
-        for (let i = 0; i < this.topForm[item.id].length; i++) {
-          if (this.topForm[item.id][i] == item.value) {
-            this.topForm[item.id].splice(i, 1);
-          }
-        }
-        // 处理search
-        for (let some in this.searchLsit) {
-          if (this.searchLsit[some].value == item.value && this.searchLsit[some].id == item.id) {
-            this.searchLsit.splice(some, 1);
-          }
-          // id: 'school', key: this.schools[item].text, value: val, type: 1 
-        }
-
-
-      }
-    },
-    gotoSearch () {
-      this.$refs['topForm'].resetFields();
-      this.searchLsit = [];
-    }
-  },
-  watch: {
-    chioseSchool (val) {
-      if (val != '') {
-        // 遍历获取文字
-        for (let item in this.schools) {
-          if (this.schools[item].value == val) {
-            this.setSearchList({ id: 'school', key: this.schools[item].text, value: val, type: 2 })
-          }
-        }
-      }
-    },
-    chioseStauts (val, oldval) {
-      //  这里取出来是数组 [1,2,3]    添加  删除  修改
-      if (val != '') {
-        // 遍历获取文字
-        for (let i = 0; i < val.length; i++) {
-          for (let item in this.nowStatus) {
-            // 判断是不是添加还是删除 只有添加才push  否则不管
-            if (this.nowStatus[item].value == val[i] && val.length > oldval.length) {
-              this.setSearchList({ id: 'status', key: this.nowStatus[item].text, value: val[i], type: 2 })
-            }
-          }
-        }
-      }
-    },
-    chiosePayType (val) {
-      if (val) {
-        let arr = ['', '1.0', '1.5', '2.0', '3.0']
-        this.setSearchList({ id: 'payType', key: arr[val], value: val, type: 1 })
-      }
-    }
-  },
-  computed: {
-    chioseSchool () {
-      return this.topForm.school
-    },
-    chioseStauts () {
-      return this.topForm.status
-    },
-    chiosePayType () {
-      return this.topForm.payType
-    }
-  }
 }
 </script>
-<style lang="scss" scoped>
-.select {
-  font-size: 16px;
-}
-.btnList {
+<style lang="scss" scope>
+.itemWrap {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  div {
-    margin-right: 15px;
+  .item {
+    width: 303px;
+    height: 137px;
+    padding: 22px 28px 20px;
+    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    margin-right: 30px;
+    h4 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      color: #323c47;
+      font-size: 14px;
+    }
+    .infos {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .sub {
+        font-size: 14px;
+        line-height: 20px;
+        color: #aaa;
+        margin-bottom: 8px;
+      }
+      .msg {
+        font-size: 24px;
+        font-weight: 500;
+        color: rgba(68, 68, 68, 1);
+        line-height: 28px;
+      }
+    }
   }
 }
-</style>
+</style>

src/views/teamBuild/components/teamSoundMoney.vue

@@ -4,19 +4,132 @@
       <p>当前选择声部数(个）：20</p>
       <p>计划招生人数(个）：80</p>
     </div>
+    <div class="listWrap">
+      <el-table :data='tableList'
+                ref="multipleTable"
+                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
+                highlight-current-row
+                @selection='handleSelectionChange'
+                @row-click='handleclick'>
+        <el-table-column type="selection"
+                         width="55">
+        </el-table-column>
+        <el-table-column label="声部"
+                         prop="sound">
+        </el-table-column>
+        <el-table-column label="计划招生"
+                         prop="jihua">
+          <template slot-scope="scope">
+            <div>
+
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="预计收费"
+                         prop="yuji">
+        </el-table-column>
+        <el-table-column label="可选乐器种类"
+                         prop="zhonglei"
+                         width="300">
+        </el-table-column>
+        <el-table-column label="乐器提供方式"
+                         prop="fangshi"
+                         width="180">
+        </el-table-column>
+        <el-table-column label="教辅组合"
+                         prop="jiaopu">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div>
+              <div>编辑</div>
+              <div>保存</div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="floor">
+        <div class="remove">删除</div>
+        <div class='add'>添加</div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 export default {
+  data () {
+    return {
+      tableList: [{
+        sound: '长笛',
+        jihua: '10',
+        yuji: '10',
+        zhonglei: [1, 2],
+        fangshi: [1, 2],
+        jiaopu: 'jiaopu1',
+        type: 1
+      }]
+    }
+  },
+  methods: {
+    handleSelectionChange (e) { },
+    handleclick (e) { }
 
+  },
 }
 </script>
 <style lang="scss">
+// .el-table__body tr.current-row > td {
+//   background-color: #c6cbd4 !important;
+// }
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #14928a;
+  border-color: #14928a;
+}
 .sound-container {
   .topMsg {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
+    font-size: 16px;
+    color: #444;
+  }
+  .floor {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    background: rgba(237, 238, 240, 1);
+    font-size: 14px;
+    color: #444;
+    align-items: center;
+    .remove {
+      width: 98px;
+      height: 32px;
+      background: rgba(248, 80, 67, 1);
+      border-radius: 3px;
+      color: #fff;
+      line-height: 32px;
+      text-align: center;
+      margin-left: 164px;
+      cursor: pointer;
+    }
+    .add {
+      width: 98px;
+      height: 32px;
+      background: rgba(20, 146, 138, 1);
+      border-radius: 3px;
+      color: #fff;
+      line-height: 32px;
+      text-align: center;
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+  .xuanze {
+    width: 71px;
   }
 }
 </style>

src/views/teamBuild/index.vue

@@ -5,7 +5,39 @@
       <div class='squrt'></div> 建团申请
     </h2>
     <div class="m-core">
-      <el-tabs type="border-card"
+      <div class="stepbox">
+        <span class='stepspan  stepspan1'
+              @click="activeIndex=0">
+          <div class="step1 sptep"
+               :class="activeIndex >= 0?'activestep':''">
+            基本信息
+          </div>
+          <img :src="activeIndex >= 0?stepImgs.nol:stepImgs.active"
+               alt=""
+               class="arrow">
+        </span>
+        <span class='stepspan  stepspan2'
+              @click="activeIndex=1">
+          <div class="step2 sptep"
+               :class="activeIndex >= 1?'activestep':''">
+            声部费用
+          </div>
+          <img :src="activeIndex >= 1?stepImgs.nol:stepImgs.active"
+               alt=""
+               class="
+               arrow">
+        </span>
+      </div>
+      <!-- 下面显示的内容 -->
+      <div class="stepcontent">
+        <div v-show='activeIndex==0'>
+          <teamBaseInfo />
+        </div>
+        <div v-show='activeIndex==1'>
+          <teamSoundMoney />
+        </div>
+      </div>
+      <!-- <el-tabs type="border-card"
                v-model="activeIndex">
         <el-tab-pane label="基本信息"
                      name='1'>
@@ -15,7 +47,7 @@
                      name='2'>
           <teamSoundMoney />
         </el-tab-pane>
-      </el-tabs>
+      </el-tabs> -->
     </div>
   </div>
 </template>
@@ -27,25 +59,65 @@ export default {
   name: 'teamBuild',
   data () {
     return {
-      activeIndex: '1'
+      activeIndex: '1',
+      stepImgs: {
+        nol: require('@/assets/images/base/step-arrow-active.png'),
+        active: require('@/assets/images/base/step-arrow.png')
+      }
     }
   }
 }
 </script>
 <style lang="scss">
-.m-container {
-  h2 {
-    .squrt {
-      position: absolute;
-      left: -25px;
-      top: 8px;
-      height: 34px;
-      width: 8px;
-      background-color: #14928a;
+.stepbox {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  .stepspan {
+    cursor: pointer;
+    font-size: 14px;
+    display: block;
+    line-height: 40px;
+    position: relative;
+    z-index: 100;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .sptep {
+      width: 110px;
+      height: 40px;
+      border: 1px solid #dcdfe6;
+      border-right: none;
+      border-bottom: none;
+      padding-left: 25px;
+      border-radius: 4px 0 0 0;
+    }
+    .arrow {
+      height: 40px;
+      width: 17px;
+      position: relative;
+      top: 1px;
     }
   }
+  .stepspan.stepspan2 {
+    position: relative;
+    z-index: 10;
+    left: -17px;
+    padding-right: 33px;
+    .sptep {
+      padding-left: 30px !important;
+      border-radius: 0 !important;
+    }
+  }
+  .sptep.activestep {
+    color: #fff;
+    font-weight: bold;
+    background-color: #4eada7;
+  }
+}
+.stepcontent {
+  border-top: 1px solid #dcdfe6;
+  padding-top: 30px;
 }
-// .el-tabs--border-card {
-//   box-shadow: none;
-// }
 </style>

src/views/teamDetail/teamList.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="m-container">
+    <h2>乐团列表</h2>
+    <div class="m-core">
+      <div class="btnList">
+        <div class='newBand'>新建乐团</div>
+        <div class='newBand'>声部调整</div>
+        <div class='newBand'>乐团合并</div>
+        <div class='newBand'>乐团加课</div>
+      </div>
+
+      <el-form :inline="true"
+               class="topForm"
+               ref="topForm"
+               :model="topForm">
+        <el-form-item prop='school'>
+          <el-select v-model="topForm.school"
+                     placeholder="请选择学校名称">
+            <el-option v-for="(item,index) in schools"
+                       :key="index"
+                       :label="item.text"
+                       :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- 多选 -->
+        <el-form-item prop='status'>
+          <el-select class='multiple'
+                     v-model="topForm.status"
+                     placeholder="请选择收费类型"
+                     multiple
+                     collapse-tags>
+            <el-option v-for="(item,index) in nowStatus"
+                       :key="index"
+                       :label="item.text"
+                       :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- 收费类型 -->
+        <el-form-item prop='payType'>
+          <el-select v-model="topForm.payType">
+            <el-option label="1.0"
+                       value="1"></el-option>
+            <el-option label="1.5"
+                       value="2"></el-option>
+            <el-option label="2.0"
+                       value="3"></el-option>
+            <el-option label="3.0"
+                       value="4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop='word'>
+          <el-input type="text"
+                    placeholder="请输入搜索关键字"
+                    suffix-icon="el-icon-search"
+                    @focus="gotoSearch"
+                    v-model="topForm.word" />
+        </el-form-item>
+        <el-form-item>
+          <div class='searchBtn'>搜索</div>
+        </el-form-item>
+      </el-form>
+      <div class="searchWrap">
+        <p>查询条件:</p>
+        <div class="searchItem"
+             @click="closeSearch(item)"
+             v-for="(item,index) in searchLsit">
+          {{ item.key }}
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+      <div class="tableWrap">
+        <el-table style="width: 100%"
+                  :data='tableData'>
+          <el-table-column prop="num"
+                           align='center'
+                           label="乐团编号">
+          </el-table-column>
+          <el-table-column prop="name"
+                           align='center'
+                           label="乐团名称">
+          </el-table-column>
+          <el-table-column align='center'
+                           max-width='274'
+                           label="学校名称">
+          </el-table-column>
+          <el-table-column prop="status"
+                           align='center'
+                           label="乐团状态">
+          </el-table-column>
+          <el-table-column prop="type"
+                           align='center'
+                           label="收费类型">
+          </el-table-column>
+          <el-table-column prop="teacher"
+                           align='center'
+                           label="教务老师">
+          </el-table-column>
+          <el-table-column prop="captain"
+                           align='center'
+                           label="乐团团长">
+          </el-table-column>
+          <el-table-column prop="captain"
+                           align='center'
+                           label="成团人数">
+          </el-table-column>
+          <el-table-column prop="readers"
+                           align='center'
+                           label="在读人数">
+          </el-table-column>
+          <el-table-column prop="course"
+                           align='center'
+                           label="当前课时">
+          </el-table-column>
+          <el-table-column prop="timer"
+                           align='center'
+                           label="成团时间">
+          </el-table-column>
+          <el-table-column prop="handle"
+                           align='center'
+                           width='200px'
+                           label="操作">
+          </el-table-column>
+        </el-table>
+        <!-- 分页器 -->
+        <!-- 分页 -->
+        <pagination :total="rules.total"
+                    :page.sync="rules.page"
+                    :limit.sync="rules.limit"
+                    :page-sizes="rules.page_size"
+                    @pagination="getList" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+import { truncate } from 'fs';
+export default {
+  name: "Main",
+  data () {
+    return {
+      topForm: {
+        school: '',
+        status: [],
+        payType: '',
+        word: ''
+      },
+      schools: [{ // 学校数组
+        value: 1, text: '张三团'
+      }, {
+        value: 2, text: '李四团'
+      }],
+      nowStatus: [{ // 状态数组
+        value: 1, text: '报名中'
+      },
+      {
+        value: 2, text: '缴费中'
+      }, {
+        value: 3, text: '筹备中'
+      },
+      {
+        value: 4, text: '进行中'
+      }, {
+        value: 5, text: '失败'
+      }, {
+        value: 6, text: '已结束'
+      },
+      {
+        value: 7, text: '暂停'
+      },
+      ],
+      searchLsit: [], // 存储选择后的数组
+      tableData: [], // table数据
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      }
+    }
+  },
+  components: {
+    pagination
+  },
+  methods: {
+    getList () {
+
+    },
+    setSearchList (obj) {
+      // 
+      // 没有相同的key=>添加这个对象
+      // 有相同的key => 替换这个对象
+      if (obj.type == 1) {
+        let flag = false;
+        this.searchLsit = this.searchLsit.map(item => {
+          if (item.id == obj.id) {
+            item = obj;
+            flag = true;
+          }
+          return item;
+        })
+        if (!flag) {
+          this.searchLsit.push(obj)
+        }
+      } else {
+        let flag = false;
+        this.searchLsit = this.searchLsit.map(item => {
+          if (item.key == obj.key) {
+            // 多选框的再次点击=> 等于 就是删除
+            item = obj;
+            flag = true;
+          }
+          return item;
+        })
+        if (!flag) {
+          this.searchLsit.push(obj)
+        }
+      }
+
+    },
+    closeSearch (item) {
+      // 1.删除search里的元素
+      if (item.type == 1) {
+        for (let some in this.searchLsit) {
+          if (this.searchLsit[some].id == item.id) {
+            this.searchLsit.splice(some, 1);
+          }
+        }
+        // 2.清空对应元素所对应的的值
+        this.topForm[item.id] = '';
+      } else {
+        for (let i = 0; i < this.topForm[item.id].length; i++) {
+          if (this.topForm[item.id][i] == item.value) {
+            this.topForm[item.id].splice(i, 1);
+          }
+        }
+        // 处理search
+        for (let some in this.searchLsit) {
+          if (this.searchLsit[some].value == item.value && this.searchLsit[some].id == item.id) {
+            this.searchLsit.splice(some, 1);
+          }
+          // id: 'school', key: this.schools[item].text, value: val, type: 1 
+        }
+
+
+      }
+    },
+    gotoSearch () {
+      this.$refs['topForm'].resetFields();
+      this.searchLsit = [];
+    }
+  },
+  watch: {
+    chioseSchool (val) {
+      if (val != '') {
+        // 遍历获取文字
+        for (let item in this.schools) {
+          if (this.schools[item].value == val) {
+            this.setSearchList({ id: 'school', key: this.schools[item].text, value: val, type: 2 })
+          }
+        }
+      }
+    },
+    chioseStauts (val, oldval) {
+      //  这里取出来是数组 [1,2,3]    添加  删除  修改
+      if (val != '') {
+        // 遍历获取文字
+        for (let i = 0; i < val.length; i++) {
+          for (let item in this.nowStatus) {
+            // 判断是不是添加还是删除 只有添加才push  否则不管
+            if (this.nowStatus[item].value == val[i] && val.length > oldval.length) {
+              this.setSearchList({ id: 'status', key: this.nowStatus[item].text, value: val[i], type: 2 })
+            }
+          }
+        }
+      }
+    },
+    chiosePayType (val) {
+      if (val) {
+        let arr = ['', '1.0', '1.5', '2.0', '3.0']
+        this.setSearchList({ id: 'payType', key: arr[val], value: val, type: 1 })
+      }
+    }
+  },
+  computed: {
+    chioseSchool () {
+      return this.topForm.school
+    },
+    chioseStauts () {
+      return this.topForm.status
+    },
+    chiosePayType () {
+      return this.topForm.payType
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.select {
+  font-size: 16px;
+}
+.btnList {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  div {
+    margin-right: 15px;
+  }
+}
+</style>