添加老师班级成员

config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     //本地代理设置
     proxyTable: {
       '/api': {
-        target: 'http://local.base-api.sing.com', // 接口的域名
-        // target: 'https://wechat-test.changchangenglish.com/',
+        // target: 'http://local.base-api.sing.com', // 接口的域名
+        target: 'https://wechat-test.changchangenglish.com/',
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
       }
     },

src/components/teacherDetail/index.vue

@@ -88,10 +88,6 @@
           </el-table>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="id"
-        label="班级ID">
-      </el-table-column>
       <el-table-column
         prop="periods_title"
         label="期数名称">
@@ -112,8 +108,17 @@
         prop="created_at"
         label="创建时间">
       </el-table-column>
+      <el-table-column
+        label="操作">
+        <template slot-scope="scope">
+          <el-button @click="showUser(scope.row)" size="mini" plain type="primary">
+            班级成员
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <page :total="total" :limit="limit" @pageChange="onPageChange"/>
+    <user-list :userObj="userObj" @reflash="getTeacherDetail"/>
   </div>
 </template>
 
@@ -121,10 +126,12 @@
 import {getTeacherDetailApi,getClassStatisticsApi} from "../../service/api";
 import {TEACHERTYPE} from "../../util/wordbook";
 import page from '../framework/page'
+import UserList from '../class/userList'
   export default {
     name: "index",
     components:{
-      page
+      page,
+      UserList
     },
     data(){
       return {
@@ -133,7 +140,12 @@ import page from '../framework/page'
         detail: {},
         total: 0,
         limit: 10,
-        nowPage: 1
+        nowPage: 1,
+        userObj:{
+          classId:'',
+          title:'',
+          show:false,
+        }
       }
     },
     methods:{
@@ -151,6 +163,13 @@ import page from '../framework/page'
           })
         }
       },
+      showUser(data){
+        this.userObj={
+          classId:data.id,
+          show:true,
+          title:`${this.detail.name}班级用户列表`
+        }
+      },
       onPageChange(val){
         this.nowPage = val
         this.getTeacherDetail()

src/components/userDetail/index.vue

@@ -46,8 +46,65 @@
     </div>
     <div class="b-title">期数列表</div>
     <el-table
+      @expand-change="changeRow"
     :data="periodList"
     style="width: 100%">
+      <el-table-column type="expand">
+        <template slot-scope="scope">
+          <el-table
+            :data="[scope.row]"
+            style="width: 100%">
+            <el-table-column
+              label="到课率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.arrive_course_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="看课率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.watch_course_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="完课率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.over_course_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="作业率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.work_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="全勤作业率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.over_work_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="打卡率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.clock_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="全勤打卡率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.over_clock_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="转化率">
+              <template slot-scope="scope2">
+                <span>{{ scope2.row.transform_rate  | percent}}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="periods_title"
         label="期数名称">
@@ -163,7 +220,7 @@
 </template>
 
 <script>
-  import {getOrderListApi,getUserDetailApi} from "../../service/api";
+  import {getOrderListApi,getUserDetailApi,getPeriodsStatisticsApi} from "../../service/api";
   import page from '../framework/page'
   import {INVITETYPE,ORDERSTATUS,BUYTYPE} from "../../util/wordbook";
   import teacherDialog from './dialog'
@@ -196,6 +253,20 @@
       this.getUser()
     },
     methods:{
+      changeRow(data,b){
+        if(b.indexOf(data)>-1){
+          getPeriodsStatisticsApi(data.id).then(res=>{
+            data.arrive_course_rate = res.arrive_course_rate;
+            data.watch_course_rate = res.watch_course_rate;
+            data.over_course_rate = res.over_course_rate;
+            data.work_rate = res.work_rate;
+            data.over_work_rate = res.over_work_rate;
+            data.clock_rate = res.clock_rate;
+            data.over_clock_rate = res.over_clock_rate;
+            data.transform_rate = res.transform_rate;
+          })
+        }
+      },
       onPageChange(val){
         this.nowPage = val;
         this.getUser();
@@ -249,6 +320,9 @@
       },
       moneytFilter(val){
         return val = val / 100 + '元'
+      },
+      percent(val){
+        return (val * 100).toFixed(2)+'%'
       }
     }
   }