flyLong/pc/src/views/courseEdit.vue

<template>
  <div class="context">
    <div class="panel">
      <div class="panel-body">
        <br>
        <el-page-header @back="goBack" content="课程管理">
          <br>
        </el-page-header>
        <span class="classNames">
                    {{ title }}   {{ ClassStateText }}
                </span>

        <br>
        <div class="panel_control">
          <el-row :gutter="20">
            <el-col :span="4">
              <em>会员名:</em>
              <el-input v-model="panel.name" placeholder="请输入会员名"></el-input>
            </el-col>
            <el-col :span="4">
              <em>手机号:</em>
              <el-input v-model="panel.phone" placeholder="请输入手机号" type="number"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button size="" type="primary" @click="query" plain :disabled="serachBtnStatus">查询
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="change">
        <el-button @click="confirmBegin" type="primary" :disabled="BeginState" v-if="FinishClass == 3">确认上课
        </el-button>
        <el-button @click="addFinish" type="primary" v-if="FinishClass == 2">确认下课</el-button>
        <el-button @click="addFinishMember">添加上课会员</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          is-horizontal-resize
          :default-sort="{prop: 'data', order: 'descending'}"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          class=""
          :row-class-name="tableRowClassName"
      >
        >
        <el-table-column
            type="index"
            label="排名"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="head"
            label="头像"
            width="75"
            align="center"
            sortable
        >
          <template slot-scope="scope">
            <div class="demo-image__preview" v-if="scope.row.Head">
              <el-image
                  style="width: 25px; height: 25px"
                  :src="scope.row.Head"
                  :preview-src-list="[scope.row.Head]"

              >
              </el-image>
            </div>
            <img src="../assets/img/nav/head.png" alt="" v-else width="25px" height="25px">
            <!--<img class="head" :src="scope.row.Head" alt="" height="51" width="51" v-if="scope.row.Head">-->
            <!--<img class="head" src="../assets/img/nav/head.png" height="51" width="51" v-else/>-->
          </template>
        </el-table-column>
        <el-table-column
            prop="Name"
            label="会员名"
            width="90"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="Phone"
            label="手机号"
            width="120"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="ClassName"
            label="课程"
            width="110"
            sortable
        >
          <template slot-scope="scope">
                        <span class="lessons"
                              :style="{ background:scope.row.ClassColor }">{{ scope.row.ClassName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="OrderTime"
            label="预约时间"
            :formatter="filterFmtDate"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="RemainTotalhour"
            label="剩余课时"
            width="110"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="group_no"
            label="队伍"
            width="140"
            v-if="ClassType == 2"
            sortable
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.group_no"
                       filterable
                       :disabled="FinishClass == 2 && scope.row.DpId != 0"
                       placeholder="请选团队">
              <el-option
                  v-for="item in panel.groupList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="BindId"
            label="心率带"
            sortable
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.BindId"
                       @change="bindSensorToUser(scope.row)"
                       @focus="getSelectHrSensors(scope.row)"
                       filterable
                       v-if="!scope.row.BindId" placeholder="请选心率带">
              <el-option
                  v-for="item in panel.bindList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.HrId">
              </el-option>
            </el-select>

            <el-button @click="takeBack(scope.row)" type="danger" v-if="scope.row.BindId"
                       icon="el-icon-cpu">
              {{ scope.row.Sn }}
              设备收回
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="Status"
            label="状态"
            width="110"
            sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.Status == 1">预约上课 </span>
            <span v-if="scope.row.Status == 2">预约未到</span>
            <span v-if="scope.row.Status == 3">上课未预约</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="Status"
            label="操作"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.DpId <= 0">
              <el-button type="primary" round v-if="scope.row.Status == 1 " size="mini"
                         @click="pauseRow(scope.row,2)">
                预约未到
              </el-button>
              <el-button type="warning" round v-if="scope.row.Status == 2" size="mini"
                         @click="pauseRow(scope.row,1)">
                上课
              </el-button>
              <el-button type="danger" round v-if="scope.row.Status == 3" size="mini"
                         @click="getClassOverDetailDel(scope.row)">
                删除
              </el-button>
              <em v-if="FinishClass != 3">
                <el-button type="warning" round
                           v-if="scope.row.Status == 1 || scope.row.Status == 3 && FinishClass == 2 "
                           size="mini"
                           :disabled="scope.row.HrSubmitFlag == 1"
                           @click="getClassDetailAndSnAdd(scope.row)">
                  提交
                </el-button>
              </em>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination
          background
          :total="pageination.total"
          :page-size="pageination.pageItem"
          @current-change="pageChange"
      ></el-pagination>
    </div>
    <el-dialog title="添加上课会员" :visible.sync="dialogVisible" width="720px">
      <div class="dialogContent viplist">
        <span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
        <div>
          <el-transfer filterable v-model="dialogValue" :data="form.dialogdata"
                       :titles="['会员列表', '已添加会员']"></el-transfer>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmMember">确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="确认下课" :visible.sync="dialogFinishVisible" width="650px">
      <div class="dialogContent">
        <span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
        <div>
          <!--<el-transfer filterable v-model="dialogCoachValue" :data="form.dialogCoachdata"-->
          <!--:titles="['教练列表', '已添加教练']"></el-transfer>-->
          <p>
            您是否确认下课？
            <br>
            <br>
            （确定后将不可再编辑上课学员的信息）
          </p>
          <br>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmClassFinish">确定</el-button>
        <el-button size="small" @click="dialogFinishVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import Global from '../Global.js'
import {
  ClassDetailQuery,
  ClassOverDetailListQuery,
  VipUserSimpleQuery,
  ClassOverDetailAdd,
  ClassDetailAndSnAdd,
  ClassOverDetailStatusEdit,
  ClassOverDetailDel,
  SelectHrSensors,
  BindHrSensorsToUser,
  UnBindHrSensorsToUser,
  ClassStartConfirm,
  ShopManagerListQuery,
  ClassOverConfirm,
} from "../api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      serachBtnStatus: false,
      BeginState: true,//确认上课
      tableData: [],
      title: '',
      ClassType: 0,
      PkNum: 0,
      ClassStateText: '',
      FinishClass: 0,//当前上课状态 1已下课 2已上课 3准备上课 FinishClass
      dialogVisible: false,//添加下课会员
      dialogFinishVisible: false,//确认下课dialog
      dialogLesson: false,//课时调整
      dialogGift: false,//赠送课时调整
      dialogExpTime: false,//有效期调整
      dialogLessonTable: false,//会员课程
      dialogTitle: '新增会员',
      current: getNowDate(),
      dialogValue: [],
      dialogCoachValue: [],
      BeginTime: '',
      ClassName: '',
      // panel 配置项目
      panel: {
        name: '',
        phone: '',
        usercode: '',
        username: '',
        compname: '',
        keyword: '',
        USERCODE: '',
        endType: '',
        taskstatus: 99,
        draw: 1,
        start: 0,
        recordsTotal: 0,
        tableData: [],
        allTableData: [],
        limit: '10',
        multipleSort: false,
        loading: false,
        fileList: [],
        bindList: [
          {
            value: 0,
            HrId: 0,
            label: "请选择心率带",
            InVenueNo: 0,
            index: 0
          }
        ],
        groupList: [
          {label: '红队', value: 1},
          {label: '蓝队', value: 2},
          {label: '黄队', value: 3}
        ],
        multipleSelection: [],
        detectedmac: '',
        BeginTime: '',
        ClassName: '',
        options: [
          {value: 99, label: '全部'},
          {value: 1, label: '进行中'},
          {value: 2, label: '已完成'},
        ],
        endTypeOptions: [
          {value: 99, label: '全部'},
          {value: 30, label: '近一个月'},
          {value: 7, label: '近一周'},
          {value: 1, label: '当日'},
        ],
        time1: globalBt(),
      },
      form: {
        name: '',
        userCode: '',
        coach: '',
        coachOptions: [],
        shopId: '',
        memberType: 1,
        lesson: 1,
        gift: 1,
        btnType: 0,//0新建，1编辑编辑
        memo: '',
        expTime: '',
        dialogdata: [],//穿梭待选
        dialogValue: [],//穿梭已选
        dialogCoachdata: [],//穿梭已选
      },
      memberTypes: [
        {value: 1, label: '年会员'},
        {value: 2, label: '充值会员'},
      ],
      pageination: {
        pageItem: 100,
        pageoptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
    }
  },
  mounted() {
    this.getTableQuery();
    // this.getSelectHrSensors();
    this.ClassType = this.$route.query.ClassType;
    this.PkNum = this.$route.query.PkNum;
    this.FinishClass = this.$route.query.FinishClass;
    this.title = this.$route.query.ClassName + ' ' + this.$route.query.BeginStr + '-' + this.$route.query.EndStr;
  },
  methods: {
    // 请选心率带
    bindSensorToUser(row) {
      let that = this;
      let obj = {};
      // 未到用户不能绑心率带
      if (row.Status == 2) {
        row.BindId = 0;
        that.$message.error("会员未到不能绑定心率带");
        return false
      }
      obj = this.panel.bindList.find((item) => {
        return item.HrId === row.BindId;
      });
      // let oldSn = row.BindId == 0 ? row.Sn : '';
      let oldSn = "";
      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        cfId: row.CfId,
        userId: row.UserId,
        sn: obj.Sn,
        hrId: row.BindId,
      };
      let postdata = qs.stringify(param);
      BindHrSensorsToUser(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '心率带绑定成功！',
            type: 'success'
          });
          // table 重载
          that.getTableQuery();
          // 重置心率带可选列表
          // that.getSelectHrSensors();
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 设备回收
    takeBack(row) {
      let that = this;
      let text = "";
      if (this.$route.query.FinishClass == 2) {
        text = '当前上课种是否回收用户' + row.Name + '的心率设备？(回收将重置用户的上课成绩)'
      } else {
        text = '是否回收用户' + row.Name + '的心率设备？'
      }
      this.$confirm(text, '回收操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {
          token: localStorage.token,
          cfId: row.CfId,
          bindId: row.BindId,
          userId: row.UserId,
          sn: row.Sn,
        };
        let postdata = qs.stringify(param);
        UnBindHrSensorsToUser(postdata).then(res => {
          let json = res;
          if (json.Code == 0) {
            that.$message({
              showClose: true,
              message: '心率带' + row.Sn + '回收成功！',
              type: 'success'
            });
            // table 重载
            that.getTableQuery();
            // 重置心率带可选列表
            // that.getSelectHrSensors();
          } else {
            that.$message.error(json.Memo + '错误码：' + json.Code);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消回收'
        });
      });
    },
    // 确认下课
    addFinish() {
      this.clearForm();
      // 重新获得教练名单
      this.getCoachOption();
      this.dialogFinishVisible = true;
      this.btnType = 0;
      this.dialogTitle = '确认下课'
    },
    // 获取教练选项
    getCoachOption() {
      let that = this;
      let param = {
        token: localStorage.token,
        name: this.panel.name,//
        phone: this.panel.phone,//
        shopId: localStorage.ShopId,//
        adminType: 4,//
        start: 1,//
        tableMax: 299,//
      };
      let postdata = qs.stringify(param);
      ShopManagerListQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.form.dialogCoachdata = turnResToOptionByUsers(json.Rs);
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 确认下课
    confirmClassFinish() {
      let that = this;
      // checkNum
      let userlist = that.dialogCoachValue.toString();
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        teacherList: userlist
      };
      let postdata = qs.stringify(param);
      // 下课记录详情添加
      ClassOverConfirm(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.dialogFinishVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '当前课程已确认下课！',
            type: 'success'
          });
          // 返回下课列表
          // that.$router.push({path: '/finish'});
          this.$router.go(-1);
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 确认上课
    confirmBegin() {
      let that = this;
      // 没绑心率带不能开课,预约未到的不管他
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].BindId == 0 && this.tableData[i].Status != 2) {
          that.$message.error("会员" + this.tableData[i].Name + '没绑心率带，不能开课');
          return false
        }
      }
      let duRs = [];
      // "sn":"10001",//心率带
      // "group_no":0,// 0不分队 1蓝队 2红队 3黄队
      // "begin_time":1605686788,//开始上课时间戳
      // "name":"张三",
      // "head":"http://192.168.0.2/lhs.png",
      // "static_hr":100,
      // "sex":1,//性别
      // "height":176,
      // "age":40,
      // "user_id":50,
      // "weight":1000
      let row;
      let begin_time = parseInt(new Date().valueOf() / 1000);

      // 过滤未到会员
      let curPeolle = this.tableData.filter(item => {
        if (item.Status != 2) {
          return item
        }
      });

      // 拼装上课人员信息
      for (var i = 0; i < curPeolle.length; i++) {
        row = curPeolle[i];
        // 过滤预约未到
        duRs[i] = {
          sn: row.Sn,
          group_no: row.group_no,//0不分队 1蓝队 2红队 3黄队
          begin_time: begin_time,
          name: row.Name,
          head: row.Head,
          static_hr: row.StaticHr,
          sex: row.Sex,
          height: row.Height,
          age: row.Age,
          user_id: row.UserId,
          weight: row.Weight,
          user_md5: row.UserMd5,
          birthday: row.Birthday,
        }
      }
      // 确认上课
      this.getClassStartConfirm(duRs);
    },
    // 确认上课
    getClassStartConfirm(duRs) {
      duRs = '{"Rs":' + JSON.stringify(duRs).toString() + '}';
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        duRs: duRs
      };
      let postdata = qs.stringify(param);
      ClassStartConfirm(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '确认上课成功！',
            type: 'success'
          });

          // 返回课程管理
          that.$router.push({
            path: '/courses', query: {}
          });
          // that.FinishClass = 2;
          // that.getTableQuery();
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 添加下课会员
    addFinishMember() {
      let that = this;
      this.clearForm();
      this.getClassVipuserQuery();
      this.dialogValue = [];
      let std = [];
      if (this.tableData) {
        this.tableData.map(function (item) {
          std.push(item.UserId)
        })
      }
      that.dialogValue = std;
      this.dialogVisible = true
    },
    clearForm() {
      // clear
      this.form.name = '';
      this.form.userCode = '';
      this.form.shopId = '';
      this.dialogCoachValue = [];
    },
    // 获取本课程下的会员列表
    getClassVipuserQuery() {
      let that = this;
      let param = {
        token: localStorage.token,
        // classId: this.$route.query.classId,
      };
      let postdata = qs.stringify(param);
      // ClassVipuserQuery(postdata).then(res => {
      VipUserSimpleQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // that.form.dialogdata = turnResToOptionByViper(json.Rs);
          that.form.dialogdata = turnResToOptionBySimViper(json.Rs);
          console.log(that.form.dialogdata);
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 确认提交下课会员
    confirmMember() {
      let that = this;
      // checkNum
      let userlist = that.dialogValue.toString();
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        userlist: userlist
      };
      let postdata = qs.stringify(param);
      // 下课记录详情添加
      ClassOverDetailAdd(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.dialogVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '会员添加成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    pauseRow(row, status) {
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        cfId: row.CfId,
        status: status,
      };
      let postdata = qs.stringify(param);
      ClassOverDetailStatusEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '执行成功！',
            type: 'success'
          });
          // table 重载
          that.getTableQuery();
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 下课记录详情删除
    getClassOverDetailDel(row) {
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: row.StdId,
        cfId: row.CfId,
      };
      this.$confirm('是否删除用户  ' + row.Name + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let postdata = qs.stringify(param);
        ClassOverDetailDel(postdata).then(res => {
          let json = res;
          if (json.Code == 0) {
            that.$message({
              showClose: true,
              message: '当前学生上课记录已删除！',
              type: 'success'
            });
            that.getTableQuery();
          } else {
            that.$message.error(json.Memo + '错误码：' + json.Code);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 查询按钮
    query() {
      let that = this;
      that.serachBtnStatus = true;
      let totalTime = 2;
      let clock = window.setInterval(() => {
        totalTime--;
        if (totalTime < 0) {
          totalTime = 2;
          that.serachBtnStatus = false;
        }
      }, 1000);
      this.getTableQuery();
      this.$message.success('查询完毕');
    },
    goBack() {
      this.$router.push({
        path: '/courses', query: {}
      });
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      that.BeginState = true;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        start: 1,//
        tableMax: 9999,//
      };
      let postdata = qs.stringify(param);
      ClassOverDetailListQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            // 没人不允许开课
            if (json.Rs.length > 0) {
              // 全部预约 都是未到也不允许开课
              json.Rs.map(function (item) {
                // 只要有一个不是就放开
                if (item.Status != 2) {
                  that.BeginState = false;
                }
              });
            }

            // 分队处理
            // 未上课的分队，已上课的旧的不处理，新人需要处理
            if (that.FinishClass == 3) {
              if (that.ClassType == 2) {
                that.TurnUnit(json.Rs);
              } else {
                json.Rs.map(function (item) {
                  item.group_no = item.GroupNo;
                })
              }
            } else {
              // 已上课的状态
              json.Rs.map(function (item, i) {
                if (that.ClassType == 2) {
                  if (item.GroupNo == 0) {
                    item.group_no = i % that.PkNum + 1;
                  } else {
                    item.group_no = item.GroupNo;
                  }
                } else {
                  item.group_no = item.GroupNo;
                }
              });
            }
            that.allTableData = json.Rs;
            that.recordsTotal = json.Rs.length;
          } else {
            that.allTableData = [];
            that.recordsTotal = 0;
          }
          // 设置分页数据
          that.setPaginations();
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 分队
    TurnUnit(Rs) {
      let that = this;
      // 分拆2队
      if (that.PkNum == 2) {
        Rs.map(function (item, t) {
          item.group_no = t % 2 + 1;
        })
      }

      // 分拆3队
      if (that.PkNum == 3) {
        Rs.map(function (item, t) {
          item.group_no = t % 3 + 1;
        })
      }
    },
    // 获取心率带下拉菜单
    getSelectHrSensors(row) {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        userId: row.UserId,
      };
      let postdata = qs.stringify(param);
      SelectHrSensors(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            that.panel.bindList = json.Rs;
            let HrTypeText = "";
            json.Rs.map(function (item, i) {
              HrTypeText = item.HrType == 1 ? "(私有)" : "";
              item.label = "Sn：" + item.Sn + HrTypeText;
              item.index = i + 1;
            });
            that.panel.bindList.push({
              value: 0,
              HrId: 0,
              label: "请选择心率带",
              InVenueNo: 0
            });
          } else {
            that.panel.bindList = [];
          }
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    // 设置分页数据
    setPaginations() {
      // 分页属性
      let that = this;
      that.pageination.total = that.recordsTotal;

      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pageination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pageination.pageItem;
      });
      that.draw = that.pageination.pageItem;
      // that.getTableQuery();
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pageination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pageination.pageItem * pageIndex;
      // 容器
      let tables = [];
      for (var i = index; i < nums; i++) {
        if (that.allTableData[i]) {
          tables.push(that.allTableData[i])
        }
        this.tableData = tables;
      }
      that.start = index * that.draw;
      // that.getTableQuery();
    },
    // 过滤时间
    filterFmtDate(value, row, column) {
      let that = this;
      if (column == "0001-01-01T08:05:43+08:05" || column == "0001-01-01T00:00:00Z") {
        return '未预约';
      } else {
        return nonTfmtDate(column, 11);
      }
    },
    // 提交单人
    getClassDetailAndSnAdd(row) {
      let begin_time = parseInt(new Date().valueOf() / 1000);
      let duRs = [];
      if (!row.Sn) {
        this.$message.error(row.Name + '没有绑定心率带');
        return false
      }
      // 拼装上课人员信息
      duRs[0] = {
        sn: row.Sn,
        group_no: row.group_no,//0不分队 1蓝队 2红队 3黄队
        begin_time: begin_time,
        name: row.Name,
        head: row.Head,
        static_hr: row.StaticHr,
        sex: row.Sex,
        height: row.Height,
        age: row.Age,
        user_id: row.UserId,
        weight: row.Weight,
        user_md5: row.UserMd5,
        birthday: row.Birthday,
      };
      duRs = '{"Rs":' + JSON.stringify(duRs).toString() + '}';
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        duRs: duRs
      };
      let postdata = qs.stringify(param);
      ClassDetailAndSnAdd(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '提交成功！',
            type: 'success'
          });
          this.getTableQuery();
        } else {
          that.$message.error(json.Memo + '错误码：' + json.Code);
        }
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.group_no == 1) {
        return 'red-row';
      } else if (row.group_no == 2) {
        return 'blue-row';
      } else if (row.group_no == 3) {
        return 'yellow-row';
      }
      return '';
    }
  },
  watch: {
    $route(to) {
      if (to.name == 'courseEdit') {
        this.getTableQuery();
        this.FinishClass = this.$route.query.FinishClass;
        this.ClassType = this.$route.query.ClassType;
        this.PkNum = this.$route.query.PkNum;

        this.title = this.$route.query.ClassName + ' ' + this.$route.query.BeginStr + '-' + this.$route.query.EndStr;
      }
    },
    FinishClass(to) {
      switch (parseInt(to)) {
        case 1:
          this.ClassStateText = "已下课";
          break;
        case 2:
          this.ClassStateText = "已上课";
          break;
        case 3:
          this.ClassStateText = "准备上课";
          break;
      }
    },
    PkNum(to) {
      let that = this;
      console.log(to);
      if (to == 2) {
        that.panel.groupList = [
          {label: '红队', value: 1},
          {label: '蓝队', value: 2},
        ]
      } else {
        that.panel.groupList = [
          {label: '红队', value: 1},
          {label: '蓝队', value: 2},
          {label: '黄队', value: 3}
        ]
      }
    }
  },
}
</script>

<style scoped>
@import "../assets/css/panel.css";

.context {
  height: 770px;
  overflow-y: scroll;
  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  padding: 30px;
}

.classNames {
  height: 25px;
  background: #f0f2f5;
  font-family: "Source Han Sans CN";
  font-weight: normal;
  font-size: 16px;
  color: #3799ff;
  border-radius: 250px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 3px;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.head {
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 250px;
}

.panel_control {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}


/*.panel-body {*/
.panel_control {
  padding: 20px;
  background: #F0F2F5;
}

.change {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.change button {
  float: left;
}

.change button.pull-right {
  float: right;
}

.lessons {
  padding: 1px 7px;
  border-radius: 250px;
  float: left;
  color: #000;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  /*float: left;*/
  left: 10%;
}

/*/deep/ .el-checkbox  .el-checkbox {*/
/*margin-right: 1px;*/
/*}*/
/deep/ .el-checkbox__label span {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.cell em {
  margin-left: 5px;
  margin-right: 5px;
}

/deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
  width: 50px;
  float: right;
  right: 0;
}

/*/deep/ .el-table .red-row {*/
  /*background: #fb88c1;*/
/*}*/

/*/deep/ .el-table .blue-row {*/
  /*background: #7099d0;*/
/*}*/
/*/deep/ .el-table .yellow-row {*/
  /*background: #fbe56e;*/
/*}*/
</style>