09/10 10:19

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "0.18.1",
+    "default-passive-events": "^1.0.10",
     "element-ui": "2.7.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",

src/App.vue

@@ -22,3 +22,61 @@ body {
   display: none;
 }
 </style>
+<style lang="scss">
+// 选择框组件
+.el-form-item__content {
+  font-size: 16px;
+}
+.el-select {
+  width: 150px;
+}
+.multiple.el-select {
+  width: 150px;
+}
+.searchBtn {
+  width: 80px;
+  height: 30px;
+  line-height: 30px;
+  background-color: #14928a;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  border-radius: 18px;
+  position: relative;
+  top: 6px;
+}
+// 公用的搜索组件
+.searchWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(119, 119, 119, 1);
+  height: 30px;
+  margin-bottom: 30px;
+  p {
+    font-size: 16px;
+    padding-left: 4px;
+  }
+  .searchItem {
+    margin-left: 20px;
+    position: relative;
+    box-sizing: border-box;
+    min-width: 116px;
+    padding: 0 25px;
+    height: 30px;
+    line-height: 30px;
+    background: rgba(246, 246, 246, 1);
+    border-radius: 15px;
+    color: #777;
+    font-size: 16px;
+    .el-icon-close {
+      position: absolute;
+      right: 5px;
+      top: 8px;
+    }
+  }
+}
+</style>

src/components/Pagination/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="{'hidden':hidden}"
        class="pagination-container">
-    <el-pagination :background="background"
-                   :current-page.sync="currentPage"
+    <!-- :background="background" -->
+    <el-pagination :current-page.sync="currentPage"
                    :page-size.sync="pageSize"
                    :layout="layout"
                    :page-sizes="pageSizes"
@@ -39,7 +39,7 @@ export default {
     },
     layout: {
       type: String,
-      default: 'total,sizes,->,prev, pager, next, jumper'
+      default: 'total,sizes,prev, pager, next, jumper'
     },
     background: {
       type: Boolean,
@@ -93,6 +93,10 @@ export default {
 .pagination-container {
   background: #fff;
   padding: 32px 16px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 .pagination-container.hidden {
   display: none;

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import 'default-passive-events'
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

src/views/main/index.vue

@@ -29,6 +29,9 @@
                        :value="item.value"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item>
+          <div class='searchBtn'>搜索</div>
+        </el-form-item>
       </el-form>
       <div class="searchWrap">
         <p>查询条件:</p>
@@ -260,53 +263,6 @@ export default {
       border: 1px solid #14928a;
       cursor: pointer;
     }
-    select {
-      border: none;
-    }
-  }
-  .searchWrap {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    color: rgba(119, 119, 119, 1);
-    height: 30px;
-    margin-bottom: 30px;
-    p {
-      font-size: 16px;
-      padding-left: 4px;
-    }
-    .searchItem {
-      margin-left: 20px;
-      position: relative;
-      box-sizing: border-box;
-      min-width: 116px;
-      padding: 0 18px;
-      height: 30px;
-      line-height: 30px;
-      background: rgba(246, 246, 246, 1);
-      border-radius: 15px;
-      color: #777;
-      font-size: 16px;
-      .el-icon-close {
-        position: absolute;
-        right: 5px;
-        top: 8px;
-      }
-    }
   }
 }
 </style>
-<style >
-.el-form-item__content {
-  font-size: 16px;
-}
-.el-select {
-  width: 100px;
-}
-.multiple.el-select {
-  width: 150px;
-}
-</style>

src/views/teamDetail/components/classList.vue

@@ -1,49 +1,28 @@
 <template>
   <div class="c-container">
-    <el-form :inline="true"
-             class="topFrom"
-             v-model="topFrom">
-      <el-form-item label="声部数量:">
-        <el-input :disabled="true"
-                  v-model="topFrom.someClass"></el-input>
-      </el-form-item>
-      <el-form-item label="合奏班数量:">
-        <el-input :disabled="true"
-                  v-model="topFrom.someClass"></el-input>
-      </el-form-item>
-      <el-form-item label="在读人数:">
-        <el-input :disabled="true"
-                  v-model="topFrom.someClass"></el-input>
-      </el-form-item>
-      <el-form-item label="退团人数:">
-        <el-input :disabled="true"
-                  v-model="topFrom.someClass"></el-input>
-      </el-form-item>
-    </el-form>
+    <!-- 头部展示 -->
     <!-- 搜索标题 -->
     <el-form :inline="true"
              class="searchForm"
              v-model="searchForm">
-      <el-form-item label="班级名称">
-        <el-select v-model="searchForm.name">
-          <el-option label="哈哈哈"
-                     value="1"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="课程类型">
-        <el-select v-model="searchForm.status">
+      <el-form-item>
+        <el-select v-model="searchForm.name"
+                   placeholder="课程类型">
           <el-option label="哈哈哈"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-input placeholder="请输入搜索信息"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary"
-                   icon='el-icon-search'>搜索</el-button>
-      </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 :data='tableList'>
@@ -69,6 +48,9 @@
                          label="退团人数">
         </el-table-column>
         <el-table-column align='center'
+                         label="新增人数">
+        </el-table-column>
+        <!-- <el-table-column align='center'
                          label="退团人数">
           <template slot-scope="scope">
             <div>
@@ -76,7 +58,7 @@
               <el-button type='text'>老师修改</el-button>
             </div>
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </el-table>
       <pagination :total="rules.total"
                   :page.sync="rules.page"
@@ -91,10 +73,7 @@ import pagination from '@/components/Pagination/index'
 export default {
   data () {
     return {
-      topFrom: {
-        someClass: '111',
-        someClass1: 'hahahahh '
-      },
+      searchLsit: [],
       searchForm: {
         name: '',
         status: ''
@@ -121,13 +100,4 @@ export default {
 }
 </script>
 <style lang="scss" scope>
-.c-container {
-  .topFrom {
-    margin: 20px 30px 0;
-    width: 800px;
-  }
-  .searchForm {
-    margin: 0 30px;
-  }
-}
 </style>

src/views/teamDetail/components/courseList.vue

@@ -1,75 +1,71 @@
 <template>
   <div class='cl-container'>
-    <el-form :inline="true"
-             class="topFrom"
-             v-model="topFrom">
-      <el-form-item label="合奏1班进度:">
-        <el-input :disabled="true"
-                  v-model="topFrom.someClass"></el-input>
-      </el-form-item>
-      <el-form-item label="包含班级:">
-        <div>{{ topFrom.someClass1 }}</div>
-      </el-form-item>
-    </el-form>
-    <el-form :inline="true"
-             style='margin-top:0;'
-             class="topFrom"
-             v-model="topFrom">
-      <el-form-item label="合奏1班进度:">
-        <el-input :disabled="true"
-                  v-model="topFrom.someClass"></el-input>
-      </el-form-item>
-      <el-form-item label="包含班级:">
-        <div>{{ topFrom.someClass1 }}</div>
-      </el-form-item>
-    </el-form>
     <!-- 搜索类型 -->
     <el-form :inline="true"
              class="searchForm"
              v-model="searchForm">
-      <el-form-item label="班级名称">
-        <el-select v-model="searchForm.classname">
+      <el-form-item>
+        <el-select v-model="searchForm.classname"
+                   placeholder="班级名称">
           <el-option label="哈哈哈"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="课程状态">
-        <el-select v-model="searchForm.classStatus">
+      <el-form-item>
+        <el-select v-model="searchForm.courseStatus"
+                   placeholder="课程类型">
           <el-option label="哈哈哈"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item style='margin-left:50px;'>
-        <el-input placeholder="请输入搜索信息"></el-input>
+      <el-form-item>
+        <el-select v-model="searchForm.classStatus"
+                   placeholder="课程状态">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary"
-                   icon='el-icon-search'>搜索</el-button>
+        <el-select v-model="searchForm.teacher"
+                   placeholder="老师">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
       </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 :data='tableList'>
         <el-table-column align='center'
-                         label="学员姓名">
+                         label="时间">
         </el-table-column>
         <el-table-column align='center'
-                         label="学员状态">
+                         label="班级名称">
         </el-table-column>
         <el-table-column align='center'
-                         label="年级班级">
+                         label="课程类型">
         </el-table-column>
         <el-table-column align='center'
-                         label="性别">
+                         label="当前课次">
         </el-table-column>
         <el-table-column align='center'
-                         label="报名专业">
+                         label="课程状态">
         </el-table-column>
         <el-table-column align='center'
-                         label="调剂专业">
+                         label="指导老师">
         </el-table-column>
         <el-table-column align='center'
-                         label="乐器来源">
+                         label="助教老师">
         </el-table-column>
         <el-table-column align='center'
                          label="联系电话">
@@ -77,22 +73,6 @@
         <el-table-column align='center'
                          label="所在班级">
         </el-table-column>
-        <el-table-column align='center'
-                         label="实缴总额">
-        </el-table-column>
-        <el-table-column align='center'
-                         label="操作">
-          <template slot-scope="scope">
-            <div>
-              <el-button type="text"
-                         size="small">在读</el-button>
-              <el-button type="text"
-                         size="small">暂停</el-button>
-              <el-button type="text"
-                         size="small">退团</el-button>
-            </div>
-          </template>
-        </el-table-column>
       </el-table>
       <pagination :total="rules.total"
                   :page.sync="rules.page"
@@ -107,15 +87,14 @@ import pagination from '@/components/Pagination/index'
 export default {
   data () {
     return {
-      topFrom: {
-        someClass: '111',
-        someClass1: 'hahahahh '
-      },
       searchForm: {
-        classname: '',
-        classStatus: ''
+        classname: '', // 班级名称
+        courseStatus: '', // 课程类型
+        classStatus: '', // 课程状态
+        teacher: '' // 老师
       },
       tableList: [],
+      searchLsit: [],
       rules: {
         // 分页规则
         limit: 10, // 限制显示条数

src/views/teamDetail/components/salaryList.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item>
+        <el-date-picker v-model="searchForm.date"
+                        style='width:400;'
+                        type="daterange"
+                        align="right"
+                        unlink-panels
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        value-format="yyyy-MM-dd"
+                        :picker-options="pickerOptions">
+        </el-date-picker>
+      </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 :data='tableList'>
+        <el-table-column align='center'
+                         label="时间">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="班级名称">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="课程类型">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="当前课次">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="指导老师">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="老师课酬">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="课时补贴">
+        </el-table-column>
+        <el-table-column align='center'
+                         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>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  name: 'salaryList',
+  data () {
+    return {
+      searchForm: {
+        date: '' // 时间选择器返回的值
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      }, // 时间选择器默认选项
+      tableList: [], // table列表
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      searchLsit: []
+    }
+  },
+  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.searchForm[item.id] = '';
+      } else {
+        for (let i = 0; i < this.searchForm[item.id].length; i++) {
+          if (this.searchForm[item.id][i] == item.value) {
+            this.searchForm[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 
+        }
+
+
+      }
+    }
+
+  },
+  watch: {
+    searchDate (val) {
+      if (val != '') {
+        this.setSearchList({ id: 'date', key: val, value: val, type: 1 })
+      }
+    }
+  },
+  computed: {
+    searchDate () {
+      if (this.searchForm.date) {
+        return this.searchForm.date[0] + ' 至 ' + this.searchForm.date[1]
+      } else {
+        return ''
+      }
+
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+</style>

src/views/teamDetail/components/studentList.vue

@@ -1,64 +1,79 @@
 <template>
   <div class='stu-container'>
-    <el-form :inline="true"
-             class='topFrom'
-             v-model="topFrom">
-      <el-form-item label="预计招生:">
-        <el-input v-model="topFrom.expect"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="在读人数:">
-        <el-input v-model="topFrom.expect"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="实收总额:">
-        <el-input v-model="topFrom.allmoney"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="实际招生:">
-        <el-input v-model="topFrom.students"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="退团人数:">
-        <el-input v-model="topFrom.signout"
-                  :disabled="true"></el-input>
-      </el-form-item>
-    </el-form>
+    <!-- 头部展示 -->
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>在读数(人):<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>在读数(人):<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>在读数(人):<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>在读数(人):<span>12345</span></p>
+        </div>
+      </div>
+      <div class="right">
+        <div class="newStudent">新增学员</div>
+      </div>
+    </div>
     <!-- 搜索类型 -->
     <el-form :inline="true"
              class="searchForm"
              v-model="searchForm">
-      <el-form-item label="学员状态">
-        <el-select v-model="searchForm.status">
-          <el-option label="哈哈哈"
+      <el-form-item>
+        <el-select v-model="searchForm.team"
+                   placeholder="合奏团选择">
+          <el-option label="item.text"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="合奏班">
-        <el-select v-model="searchForm.all">
-          <el-option label="哈哈哈"
+      <el-form-item>
+        <el-select v-model="searchForm.teamClass"
+                   placeholder="乐团班级">
+          <el-option label="item.text"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="单技课班">
-        <el-select v-model="searchForm.single">
-          <el-option label="哈哈哈"
+      <el-form-item>
+        <el-select v-model="searchForm.major"
+                   placeholder="报名专业">
+          <el-option label="item.text"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item style='margin-left:50px;'>
-        <el-input placeholder="请输入搜索信息"></el-input>
+      <el-form-item>
+        <el-select v-model="searchForm.isPay"
+                   placeholder="是否缴费">
+          <el-option label="item.text"
+                     value="1"></el-option>
+        </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary"
-                   icon='el-icon-search'>搜索</el-button>
+        <el-select v-model="searchForm.school"
+                   placeholder="所在学校">
+          <el-option label="item.text"
+                     value="1"></el-option>
+        </el-select>
       </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 :data='tableList'>
-        <el-table-column align='center'
-                         label="学员姓名">
+        <el-table-column label="学员姓名">
         </el-table-column>
         <el-table-column align='center'
                          label="学员状态">
@@ -121,11 +136,15 @@ export default {
         students: '5', // 实际招生人数
         signout: '10', // 退团总数
       },
-      searchForm: { // 搜索框
-        status: '1', // 学员状态
-        all: '2', // 合奏班
-        single: '4' // 单技课
+      searchForm: {
+        team: '', // 合奏团选择
+        teamClass: '', // 乐团班级
+        major: '', // 报名专业
+        status: '', // 学员状态
+        isPay: '', // 是否缴费
+        school: '', // 所在学校
       },
+      searchLsit: [],
       tableList: [], //
       rules: {
         // 分页规则
@@ -152,8 +171,16 @@ export default {
     margin: 20px 30px 0;
     width: 1000px;
   }
-  .searchForm {
-    margin: 0 30px;
+  .newStudent {
+    width: 121px;
+    height: 40px;
+    background: rgba(20, 146, 138, 1);
+    border-radius: 4px;
+    color: #fff;
+    text-align: center;
+    line-height: 40px;
+    font-size: 14px;
+    cursor: pointer;
   }
 }
 </style>

src/views/teamDetail/components/studentSignin.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    学生点名总览
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss">
+</style>

src/views/teamDetail/components/teacherList.vue

@@ -1,63 +1,50 @@
 <template>
   <div class='t-container'>
-    <el-form :inline="true"
-             class='topFrom'
-             v-model="topFrom">
-      <el-form-item label="主教老师:">
-        <el-input v-model="topFrom.core"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="全职老师:">
-        <el-input v-model="topFrom.fulltime"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="课酬总计:">
-        <el-input v-model="topFrom.allmoney"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="助教老师:">
-        <el-input v-model="topFrom.assistant"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="兼职老师:">
-        <el-input v-model="topFrom.parttimer"
-                  :disabled="true"></el-input>
-      </el-form-item>
-      <el-form-item label="乐团团长:">
-        <el-input v-model="topFrom.captain"
-                  :disabled="true"></el-input>
-      </el-form-item>
-    </el-form>
+    <!-- 头部展示 -->
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>教学主管: <span> 张三，李四</span></p>
+        </div>
+      </div>
+    </div>
+
     <!-- 搜索类型 -->
     <el-form :inline="true"
              class="searchForm"
              v-model="searchForm">
-      <el-form-item label="学员状态">
-        <el-select v-model="searchForm.status">
+      <el-form-item>
+        <el-select v-model="searchForm.status"
+                   placeholder="工作类型">
           <el-option label="哈哈哈"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="合奏班">
-        <el-select v-model="searchForm.all">
+      <el-form-item>
+        <el-select v-model="searchForm.teachingClass"
+                   placeholder="执教班级">
           <el-option label="哈哈哈"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="单技课班">
-        <el-select v-model="searchForm.single">
+      <el-form-item>
+        <el-select v-model="searchForm.attendance"
+                   placeholder="出勤次数">
           <el-option label="哈哈哈"
                      value="1"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-input placeholder="请输入搜索信息"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary"
-                   icon='el-icon-search'>搜索</el-button>
-      </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 :data='tableList'>
@@ -68,27 +55,21 @@
                          label="老师姓名">
         </el-table-column>
         <el-table-column align='center'
-                         label="老师职位">
-        </el-table-column>
-        <el-table-column align='center'
-                         label="老师类型">
+                         label="联系电话">
         </el-table-column>
         <el-table-column align='center'
-                         label="老师状态">
+                         label="工作类型">
         </el-table-column>
         <el-table-column align='center'
-                         label="调剂专业">
+                         label="合奏团">
         </el-table-column>
         <el-table-column align='center'
                          label="执教班级">
         </el-table-column>
         <el-table-column align='center'
-                         label="老师课酬">
+                         label="出勤次数">
         </el-table-column>
-        <el-table-column align='center'
-                         label="出清次数">
-        </el-table-column>
-        <el-table-column align='center'
+        <!-- <el-table-column align='center'
                          label="操作">
           <template slot-scope="scope">
             <div>
@@ -102,7 +83,7 @@
                          size="small">兼职试用</el-button>
             </div>
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </el-table>
       <pagination :total="rules.total"
                   :page.sync="rules.page"
@@ -117,19 +98,12 @@ import pagination from '@/components/Pagination/index'
 export default {
   data () {
     return {
-      topFrom: { // 顶部的禁选框集合
-        core: '2', // 主教老师
-        fulltime: '5', // 全职老师
-        allmoney: '100', //课酬总计
-        assistant: '5', // 助教老师
-        parttimer: '10', // 兼职老师
-        captain: '10' //乐团团长
-      },
       searchForm: { // 搜索框
-        status: '1', // 学员状态
-        all: '2', // 合奏班
-        single: '4' // 单技课
+        status: '', // 工作类型
+        teachingClass: '', // 合奏班
+        attendance: '' // 出勤次数
       },
+      searchLsit: [],
       tableList: [], //
       rules: {
         // 分页规则
@@ -156,8 +130,7 @@ export default {
     margin: 20px 30px 0;
     width: 1000px;
   }
-  .searchForm {
-    margin: 0 30px;
-  }
+  // .searchForm {
+  // }
 }
 </style>

src/views/teamDetail/index.vue

@@ -6,7 +6,8 @@
       <div class="term active">第二学期</div>
     </h2>
     <div class="td-core">
-      <p class='msg'>乐团状态:开团中</p>
+      <p class='msg'> <img src="@/assets/images/base/clock.png"
+             alt=""> 报名中</p>
       <!-- navMenu -->
       <el-tabs v-model="activeName"
                type="card"
@@ -28,27 +29,16 @@
         </el-tab-pane>
         <el-tab-pane label="课表详情"
                      name="5">
-
+          <courseList />
         </el-tab-pane>
-        <el-tab-pane label="基本信息"
+        <el-tab-pane label="课程课酬"
                      name="6">
-          <courseList />
+          <salaryList />
         </el-tab-pane>
         <el-tab-pane label="课酬调整"
                      name="7">
         </el-tab-pane>
       </el-tabs>
-      <!-- <div class="contentWrap">
-        <keep-alive>
-          <transition name="fade"
-                      mode="out-in">
-            <studentList v-if="activeName == 3" />
-            <teacherList v-if="activeName == 2" />
-            <courseList v-if="activeName == 4" />
-            <classList v-if="activeName == 5" />
-          </transition>
-        </keep-alive>
-      </div> -->
     </div>
   </div>
 </template>
@@ -57,10 +47,11 @@ import studentList from '@/views/teamDetail/components/studentList'
 import teacherList from '@/views/teamDetail/components/teacherList'
 import courseList from '@/views/teamDetail/components/courseList'
 import classList from '@/views/teamDetail/components/classList'
+import salaryList from '@/views/teamDetail/components/salaryList'
 export default {
   data () {
     return {
-      activeName: '2',
+      activeName: '3',
     }
   },
   methods: {
@@ -72,7 +63,8 @@ export default {
     studentList,
     teacherList,
     courseList,
-    classList
+    classList,
+    salaryList
   }
 }
 </script>
@@ -96,8 +88,22 @@ export default {
     background-color: #fff;
     min-height: calc(100vh - 160px);
     padding: 0 40px;
+    position: relative;
     .msg {
       text-align: right;
+      color: #f97215;
+      font-size: 32px;
+      font-weight: bold;
+      position: absolute;
+      right: 40px;
+      top: -33px;
+      img {
+        width: 36px;
+        height: 36px;
+        position: relative;
+        top: 5px;
+        margin-right: 8px;
+      }
     }
   }
   .term {
@@ -120,7 +126,7 @@ export default {
   }
 }
 </style>
-<style >
+<style lang='scss'>
 .el-tabs__item.is-active {
   color: #14928a;
   font-size: 16px;
@@ -131,4 +137,48 @@ export default {
   font-size: 16px;
   font-weight: 600;
 }
+
+.headWrap {
+  padding: 40px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .left {
+    width: 1000px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    .headItem {
+      width: 364px;
+      height: 30px;
+      color: #444;
+      border-right: 1px solid #979797;
+      p {
+        font-size: 14px;
+        line-height: 30px;
+        span {
+          font-size: 16px;
+          line-height: 30px;
+        }
+      }
+      &:nth-child(1) {
+        width: 256px;
+      }
+      &:nth-child(2n) {
+        text-align: center;
+      }
+      &:nth-child(3n) {
+        border-right: 1px solid #fff;
+        text-align: center;
+      }
+      &:nth-child(4n) {
+        text-align: left !important;
+        width: 256px;
+      }
+    }
+  }
+}
 </style>