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="6">
              <em>会员名:</em>
              <el-input v-model="panel.name" placeholder="请输入会员名"></el-input>
            </el-col>
            <el-col :span="6">
              <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"
                :loading="serachBtnStatus"
              >查询</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="change">
        <el-button
          @click="confirmBegin"
          type="primary"
          :disabled="BeginState"
          :loading="BeginState"
          v-if="FinishClass == 3"
          size="mini"
        >确认上课</el-button>
        <el-button @click="confirmClose" type="danger" :disabled="!BeginState" size="mini">关闭课程</el-button>
        <el-button @click="addFinish" type="primary" v-if="FinishClass == 2" size="mini">确认下课</el-button>
        <el-button @click="addFinishMember" size="mini">添加上课会员</el-button>
        <el-button @click="addTempMember" type="warning" size="mini">添加临时会员</el-button>
        <el-button @click="addCrossMember" type="primary" size="mini">添加跨店会员</el-button>
        <!--<el-button @click="allSetOnline" type="warning">全部网课</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"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        >
        <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 v-if="!isCollapse"></el-table-column>
        <el-table-column prop="ClassName" label="课程" width="110" sortable v-if="!isCollapse">
          <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 v-if="!isCollapse"></el-table-column>
        <el-table-column prop="IsOnline" label="是否网课" width="140">
          <template slot="header" slot-scope="scope">
            <el-checkbox @change="(val) => handleSelectAll(val)" label="是否网课" />
          </template>
          <template slot-scope="scope">
            <el-checkbox
              label="网课"
              v-model="scope.row.IsOnlineState"
              ::checked="scope.row.IsOnlineState"
              :disabled="scope.row.BindId > 0 || scope.row.HrSubmitFlag == 1"
              name="type"
              true-label="1"
              false-label="0"
              @change="wathcIsOnlineRow(scope.row.IsOnlineState, scope.row)"
            ></el-checkbox>
          </template>
        </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">
            <!--正式会员-->
            <div v-if="scope.row.IsTmpUser != 1">
              <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>
            </div>
            <div v-if="scope.row.IsTmpUser == 1">
              <el-select
                v-model="scope.row.group_no"
                filterable
                :disabled="FinishClass == 2 && scope.row.HrSubmitFlag == 1"
                placeholder="请选团队"
              >
                <el-option
                  v-for="item in panel.groupList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="BindId" label="心率带" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.IsTmpUser != 1">
              <el-select
                v-model="scope.row.BindId"
                @change="bindSensorToUser(scope.row)"
                @focus="getSelectHrSensors(scope.row)"
                :disabled="scope.row.IsOnline == 1"
                filterable
                v-if="!scope.row.BindId"
                placeholder="请选心率带"
              >
                <el-option
                  v-for="item in panel.bindList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.HrId"
                >
                  <!--私有的-->
                  <span
                    v-if="item.HrType == 1"
                    style="background: #409eff; color: #fff"
                  >{{ item.label }}</span>
                  <!--共有的-->
                  <span v-else>{{ item.label }}</span>
                </el-option>
              </el-select>
              <el-button
                @click="takeBack(scope.row)"
                :type="scope.row.IsPrivate == 1 ? 'primary' : 'danger'"
                v-if="scope.row.BindId"
                :disabled="scope.row.IsOnline == 1"
                icon="el-icon-cpu"
              >
                {{ scope.row.Sn }} {{ scope.row.IsPrivate == 1 ? "私有" : "" }}
                设备收回
              </el-button>
            </div>
            <div v-if="scope.row.IsTmpUser == 1">
              <!--临时会员-->
              <el-select
                v-model="scope.row.BindId"
                @change="bindSensorToTmepUser(scope.row)"
                @focus="getSelectHrSensors(scope.row)"
                :disabled="scope.row.IsOnline == 1"
                filterable
                v-if="!scope.row.Sn"
                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="takeTempBack(scope.row)"
                type="danger"
                v-if="scope.row.Sn"
                :disabled="scope.row.IsOnline == 1"
                icon="el-icon-cpu"
              >
                {{ scope.row.Sn }}
                临时设备收回
              </el-button>
            </div>
          </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>&nbsp;
              <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.BindId == 0 && scope.row.IsOnline == 0"
                  @click="getClassDetailAndSnAdd(scope.row)"
                >提交</el-button>
              </em>
              <!-- :disabled="scope.row.HrSubmitFlag == 0 && scope.row.IsOnline == 0" -->
            </div>
            <div v-if="scope.row.IsTmpUser == 1">
              <el-button
                type="danger"
                round
                v-if="scope.row.Status == 3 && scope.row.HrSubmitFlag != 1"
                size="mini"
                @click="getClassOverTempDel(scope.row)"
              >删除</el-button>&nbsp;
              <span v-if="FinishClass != 3 && scope.row.IsTmpUser == 1">
                <el-button
                  type="warning"
                  round
                  v-if="
                    scope.row.Status == 1 ||
                    (scope.row.Status == 3 && FinishClass == 2)
                  "
                  size="mini"
                  :disabled="scope.row.Sn == '' && scope.row.IsOnline == 0"
                  @click="getClassDetailAndSnAdd(scope.row)"
                >提交</el-button>
              </span>
            </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"
          :disabled="BtnConfirmMember"
          :loading="BtnConfirmMember"
          @click="confirmMember"
        >确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--添加临时会员-->
    <el-dialog title="添加临时会员" :visible.sync="dialogTempVisible" width="720px">
      <div class="dialogContent viplist">
        <span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
        <div>
          <el-transfer
            filterable
            v-model="dialogTempValue"
            :data="form.dialogTempdata"
            :titles="['临时会员', '已添加会员']"
          ></el-transfer>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button
          type="primary"
          size="small"
          :disabled="BtnTempConfirmMember"
          :loading="BtnTempConfirmMember"
          @click="TempconfirmMember"
        >确定</el-button>
        <el-button size="small" @click="dialogTempVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--添加跨店会员-->
    <el-dialog title="添加跨店会员" :visible.sync="dialogAcrossVisible" width="720px">
      <div class="dialogContent viplist">
        <span class="blueTitle">{{ ClassName }} {{ BeginTime }}</span>
        <div>
          <el-transfer
            filterable
            v-model="dialogAcrossValue"
            :data="form.dialogAcrossdata"
            :titles="['跨店会员', '已添加会员']"
          ></el-transfer>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button
          type="primary"
          size="small"
          :disabled="BtnAcrossConfirmMember"
          :loading="BtnAcrossConfirmMember"
          @click="AcrossConfirmMember"
        >确定</el-button>
        <el-button size="small" @click="dialogAcrossVisible = 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"
          :disabled="BtnConfirmClassFinish"
          :loading="BtnConfirmClassFinish"
          @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,
  TmpUserQuery,
  ClassOverTmpDetailAdd,
  ClassTmpUserOverDetailDel,
  BindHrSensorsToTempUser,
  AcrossUserSimpleQuery,
  ClassGiveUpConfirm,
} from "../api/getApiRes";

let qs = require("qs");
export default {
  data() {
    return {
      serachBtnStatus: false,
      BtnConfirmClassFinish: false,
      BtnConfirmMember: false,
      BtnTempConfirmMember: false,
      BtnAcrossConfirmMember: false,
      BeginState: true, //确认上课
      tableData: [],
      title: "",
      ClassType: 0,
      PkNum: 0,
      ClassStateText: "",
      FinishClass: 0, //当前上课状态 1已下课 2已上课 3准备上课 FinishClass
      dialogVisible: false, //添加下课会员
      dialogTempVisible: false, //添加临时会员
      dialogAcrossVisible: false, //
      dialogFinishVisible: false, //确认下课dialog
      dialogLesson: false, //课时调整
      dialogGift: false, //赠送课时调整
      dialogExpTime: false, //有效期调整
      dialogLessonTable: false, //会员课程
      dialogTitle: "新增会员",
      current: getNowDate(),
      dialogValue: [],
      dialogTempValue: [],
      dialogCoachValue: [],
      dialogAcrossValue: [],
      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: [], //穿梭待选
        dialogTempdata: [], //穿梭待选
        dialogValue: [], //穿梭已选
        dialogCoachdata: [], //穿梭已选
        dialogAcrossdata: [], //穿梭已选
      },
      memberTypes: [
        { value: 1, label: "年会员" },
        { value: 2, label: "充值会员" },
      ],
      pageination: {
        pageItem: 10,
        pageoptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
      isCollapse: document.body.clientWidth < 1366,
    };
  },
  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: {
    // 禁用或启用绑定心率带
    showOrDiss(row) {
      // console.log(row);
      // if (row.isOnline == 1) {
      //     row.isOnline = 0
      // } else {
      //     row.isOnline = 1
      // }
    },
    handleSelectionChange(val) {
      let row = "";
      for (let t in this.tableData) {
        this.tableData[t].IsOnline = 0;
      }
      for (let v in val) {
        val[v].IsOnline = 1;
      }
    },
    handleSelectAll(val) {
      if (val) {
        for (let t in this.tableData) {
          if (!this.tableData[t].Sn) {
            this.tableData[t].IsOnline = 1;
            this.tableData[t].IsOnlineState = true;
          }
        }
      } else {
        for (let t in this.tableData) {
          if (!this.tableData[t].Sn) {
            this.tableData[t].IsOnline = 0;
            this.tableData[t].IsOnlineState = false;
          }
        }
      }
      console.log();
    },
    wathcIsOnlineRow(checked, row) {
      console.log(row);
      // if(row.Sn){
      //     row.IsOnlineState = false;
      //     this.$message.error( '请先解绑心率带');
      //     return false
      // }else{
      row.IsOnline = checked == true ? 1 : 0;
      // }
    },
    // 请选心率带
    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);
        }
      });
    },
    toggleSelection(rows) {
      // if(rows.IsOnline == 1){
      //     // 网课学生状态置入
      //
      // }
      if (rows) {
        rows.forEach((row) => {
          console.log(row);
          this.$refs.multipleTable.toggleRowSelection(1);
        });
      }
    },
    // 临时会员绑定心率带
    bindSensorToTmepUser(row) {
      let that = this;
      let obj = {};
      obj = this.panel.bindList.find((item) => {
        return item.HrId === row.BindId;
      });
      // let oldSn = row.BindId == 0 ? row.Sn : '';
      let param = {
        token: localStorage.token,
        sn: obj.Sn,
        cfId: row.CfId,
        userId: row.UserId,
        shopId: localStorage.shopId,
        hrId: row.BindId,
      };
      let postdata = qs.stringify(param);
      BindHrSensorsToTempUser(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: "已取消回收",
          });
        });
    },
    takeTempBack(row) {
      let that = this;
      if (this.FinishClass == 2) {
        that.$message.error("请删除临时会员后重新添加");
      } else {
        that.$message.error("临时会员无法替换心率带");
      }

      // 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() {
      this.BtnConfirmClassFinish = true;
      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) => {
        that.BtnConfirmClassFinish = false;
        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].Sn == 0 &&
          this.tableData[i].Status != 2 &&
          this.tableData[i].IsOnline != 1
        ) {
          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,
          is_tmp_user: row.IsTmpUser,
          is_private: row.IsPrivate,
          isOnline: parseInt(row.IsOnline),
        };
      }
      // 确认上课
      this.getClassStartConfirm(duRs);
    },
    // 确认上课
    getClassStartConfirm(duRs) {
      duRs = '{"Rs":' + JSON.stringify(duRs).toString() + "}";
      let that = this;
      that.BeginState = true;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        duRs: duRs,
      };
      let postdata = qs.stringify(param);
      ClassStartConfirm(postdata).then((res) => {
        let json = res;
        that.BeginState = false;
        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);
        }
      });
    },
    //关闭课程
    confirmClose() {
      this.$confirm("您确认要关闭课程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getConfirmClassClose();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //确认执行关闭课程
    getConfirmClassClose() {
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
      };
      let postdata = qs.stringify(param);
      ClassGiveUpConfirm(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: "课程关闭成功！",
            type: "success",
          });
          // 返回课程管理
          that.$router.push({
            path: "/courses",
            query: {},
          });
        } else {
          that.$message({
            showClose: true,
            message: "课程关闭失败",
            type: "success",
          });
          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) {
          if (item.IsTmpUser != 1) {
            std.push(item.UserId);
          }
        });
      }
      that.dialogValue = std;
      this.dialogVisible = true;
    },
    // 获取临时会员列表
    getTmpUserQuery() {
      let that = this;
      let param = {
        token: localStorage.token,
        start: 1,
        tableMax: 999,
      };
      let postdata = qs.stringify(param);
      TmpUserQuery(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          that.form.dialogTempdata = turnResToOptionByTempUser(json.Rs);
        } else {
          that.$message.error(json.Memo);
        }
      });
    },
    // 获取跨店会员列表
    getAcrossUserQuery() {
      let that = this;
      let param = {
        token: localStorage.token,
        start: 1,
        tableMax: 999,
      };
      let postdata = qs.stringify(param);
      AcrossUserSimpleQuery(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          that.form.dialogAcrossdata = turnResToOptionBySimViper(json.Rs);
        } else {
          that.$message.error(json.Memo);
        }
      });
    },
    // 添加临时会员
    addTempMember() {
      let that = this;
      this.clearForm();
      // this.getClassVipuserQuery();
      this.getTmpUserQuery();
      this.dialogTempValue = [];
      let std = [];
      if (this.tableData) {
        this.tableData.map(function(item) {
          if (item.IsTmpUser == 1) {
            std.push(item.UserId);
          }
        });
      }
      that.dialogTempValue = std;
      this.dialogTempVisible = true;
    },
    // 添加跨店会员
    addCrossMember() {
      let that = this;
      this.clearForm();
      this.getAcrossUserQuery();
      this.dialogAcrossValue = [];
      let std = [];
      if (this.tableData) {
        this.tableData.map(function(item) {
          std.push(item.UserId);
        });
      }
      that.dialogAcrossValue = std;
      this.dialogAcrossVisible = 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);
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
        }
      });
    },
    // 确认提交上课会员
    confirmMember() {
      let that = this;
      if (that.BtnConfirmMember == true) return false;
      that.BtnConfirmMember = true;
      // 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",
          });
          that.BtnConfirmMember = false;
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
          that.BtnConfirmMember = false;
        }
      });
    }, // 确认提交临时会员
    TempconfirmMember() {
      let that = this;
      if (that.BtnTempConfirmMember == true) return false;
      that.BtnTempConfirmMember = true;
      // checkNum
      let userlist = that.dialogTempValue.toString();
      let param = {
        token: localStorage.token,
        stdId: this.$route.query.StdId,
        tmpuserlist: userlist,
      };
      let postdata = qs.stringify(param);
      // 下课记录详情添加
      ClassOverTmpDetailAdd(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.dialogTempVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: "会员添加成功！",
            type: "success",
          });
          that.BtnTempConfirmMember = false;
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
          that.BtnTempConfirmMember = false;
        }
      });
    },
    // 确认提交跨店会员
    AcrossConfirmMember() {
      let that = this;
      if (that.BtnAcrossConfirmMember == true) return false;
      that.BtnAcrossConfirmMember = true;
      // checkNum
      let userlist = that.dialogAcrossValue.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.dialogAcrossVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: "会员添加成功！",
            type: "success",
          });
          that.BtnAcrossConfirmMember = false;
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
          that.BtnAcrossConfirmMember = false;
        }
      });
    },
    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: "已取消删除",
          });
        });
    },
    // 下课记录临时会员删除
    getClassOverTempDel(row) {
      let that = this;
      let param = {
        token: localStorage.token,
        stdId: row.StdId,
        tcfId: row.CfId,
      };
      this.$confirm("是否删除临时会员  " + row.Name + "？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let postdata = qs.stringify(param);
          ClassTmpUserOverDetailDel(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, //
      };
      that.allTableData = [];
      that.tableData = [];
      that.recordsTotal = 0;
      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;
                }
                item.IsOnline = item.IsOnline.toString();
                item.IsOnlineState = item.IsOnline == 1 ? true : 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 && row.IsOnline == 0) {
        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,
        is_tmp_user: row.IsTmpUser,
        is_private: row.IsPrivate,
        isOnline: parseInt(row.IsOnline),
      };
      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 "";
    },
    // 全部网课todo
    allSetOnline() {
      let that = this;
      let row = "";
      that.tableData.map(function(item) {
        row = item;
        console.log(row);
        // 没有bindID的 且没有被禁用的 选中
        if (row.BindId == 0 && row.HrSubmitFlag == 0) {
          row.IsOnline = "1";
        } else {
          // row.IsOnline = 0;
        }
      });
    },
    // 刷新列表要清空先 todo
  },
  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;
      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;*/
/*}*/

/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
  content: " 是否网课";
}

/deep/
  .el-table__body-wrapper
  .el-table-column--selection
  .cell
  .el-checkbox:after {
  content: " 网课";
}
</style>