09/11

教师管理模块 列表开始编写

src/router/index.js

@@ -44,7 +44,7 @@ export const constantRoutes = [
   },
   {
     path: '/',
-    redirect: '/main',
+    redirect: '/main', // 首页
     component: Layout,
     children: [
       {
@@ -56,7 +56,7 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/teamDetail',
+    path: '/teamDetail', // 乐团详情
     component: Layout,
     meta: { title: '乐团详情' },
     children: [
@@ -81,7 +81,7 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/teamBuild',
+    path: '/teamBuild', // 创建乐团
     component: Layout,
     children: [
       {
@@ -93,7 +93,7 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/vipClass',
+    path: '/vipClass', // 小课
     component: Layout,
     meta: { title: 'vip管理' },
     children: [
@@ -107,9 +107,34 @@ export const constantRoutes = [
         path: 'vipDetail',
         name: 'vipDetail',
         component: () => import('@/views/vipClass/vipDetail/index'),
+        meta: { title: '调整记录' }
+      },
+      {
+        path: 'resetClass',
+        name: 'resetClass',
+        component: () => import('@/views/vipClass/resetClasss'),
         meta: { title: 'vip课详情' }
       }
     ]
+  }, {
+    path: '/teacher',
+    component: Layout,
+    redirect: '/teacher/teacherList',
+    meta: { title: '老师管理' },
+    children: [
+      {
+        path: 'teacherList',
+        name: 'teacherList',
+        meta: { title: '老师列表' },
+        component: () => import('@/views/teacherManager/teacherList')
+      },
+      {
+        path: 'teacherDetail',
+        name: 'teacherDetail',
+        meta: { title: '老师详情' },
+        component: () => import('@/views/teacherManager/teacherDetail/index')
+      }
+    ]
   },
 
   {

src/views/teacherManager/teacherDetail/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class='m-container'>
+    <h2>李老师</h2>
+    <div class="m-core">
+      <!-- navMenu -->
+      <el-tabs v-model="activeName"
+               type="card"
+               @tab-click="handleClick">
+        <el-tab-pane label="基本信息"
+                     name="1">
+        </el-tab-pane>
+        <el-tab-pane label="课程信息"
+                     name="2">
+
+        </el-tab-pane>
+        <el-tab-pane label="上课记录"
+                     name="3">
+
+        </el-tab-pane>
+        <el-tab-pane label="请假记录"
+                     name="4">
+        </el-tab-pane>
+        <el-tab-pane label="财务详情"
+                     name="5">
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  components: {},
+  name: 'teacherDetail',
+  data () {
+    return {
+      activeName: '2'
+    }
+  },
+  methods: {
+    handleClick (val, event) {
+      // console.log(val, event);
+      this.activeName = val.name;
+    }
+  }
+}
+</script>
+<style lang="scss">
+.m-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  .m-core {
+    margin-top: 30px;
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    position: relative;
+  }
+}
+</style>

src/views/teacherManager/teacherList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="m-container">
+    <h2>老师列表</h2>
+    <div class="m-core">
+      <!-- 搜索标题 -->
+      <el-form :inline="true"
+               class="searchForm"
+               v-model="searchForm">
+        <el-form-item>
+          <el-select v-model="searchForm.name"
+                     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="老师编号">
+          </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-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>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  name: 'teacherList',
+  components: {
+    pagination
+  },
+  data () {
+    return {
+      searchForm: {
+        name: ''
+      },
+      searchLsit: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 1, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+    }
+  }
+}
+</script>
+<style lang="scss">
+.m-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  .m-core {
+    margin-top: 30px;
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    position: relative;
+  }
+}
+</style>

src/views/vipClass/resetClasss.vue

@@ -1,6 +1,58 @@
 <template>
-  <div>
-
+  <div class="m-container">
+    <h2>课时调整记录</h2>
+    <!-- 头部展示 -->
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>调整次数:<span>12345</span></p>
+        </div>
+      </div>
+      <div class="right">
+      </div>
+    </div>
+    <!-- 搜索标题 -->
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item>
+        <el-select v-model="searchForm.name"
+                   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="调整时间">
+        </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>
+    </div>
   </div>
 </template>
 <script>
@@ -8,7 +60,10 @@ export default {
   name: 'resetClass',
   data () {
     return {
-
+      searchLsit: [],
+      searchForm: {
+        name: ''
+      }
     }
   }
 }