dy-admin-manager/src/views/studentManager/studentList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      学员管理
    </h2>
    <div class="m-core">
      <!-- 搜索标题 -->
      <save-form
        :inline="true"
        class="searchForm"
        @submit="onSearch"
        @reset="onReSet"
        ref="saveForm"
        :model.sync="searchForm"
      >
        <el-form-item>
          <el-input
            clearable
            placeholder="学生姓名或电话"
            @keydown.enter.native="
              e => {
                e.target.blur();
                $refs.saveForm.save();
                onSearch();
              }
            "
            v-model.trim="searchForm.search"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            v-model.trim="searchForm.organId"
            multiple
            collapse-tags
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <remote-search
            :commit="'setTeachers'"
            v-model="searchForm.teacherId"
            :isForzenWithQueryCondition="true"
          />
        </el-form-item>
        <el-form-item prop="hasMember">
          <el-select
            class="multiple"
            v-model.trim="searchForm.hasMember"
            clearable
            placeholder="是否是会员"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
            <el-option label="未生效" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="isActive">
          <el-select
            class="multiple"
            v-model.trim="searchForm.isActive"
            clearable
            placeholder="是否激活"
          >
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item prop="hasTeacher">
          <el-select
            class="multiple"
            v-model.trim="searchForm.hasTeacher"
            clearable
            placeholder="是否关联老师"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="operatingTag" v-if="tenantId == 1">
          <el-select
            class="multiple"
            v-model.trim="searchForm.operatingTag"
            clearable
            placeholder="是否运营"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="serviceTag" v-if="tenantId == 1">
          <el-select
            class="multiple"
            v-model.trim="searchForm.serviceTag"
            clearable
            placeholder="是否服务"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="carePackage">
          <el-select
            class="multiple"
            v-model.trim="searchForm.carePackage"
            clearable
            placeholder="关心包"
          >
            <el-option label="不可用" :value="0"></el-option>
            <el-option label="可用" :value="1"></el-option>
            <el-option label="已使用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="comeOnPackage">
          <el-select
            class="multiple"
            v-model.trim="searchForm.comeOnPackage"
            clearable
            placeholder="加油包"
          >
            <el-option label="不可用" :value="0"></el-option>
            <el-option label="可用" :value="1"></el-option>
            <el-option label="已使用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isNewUser">
          <el-select
            class="multiple"
            v-model.trim="searchForm.isNewUser"
            clearable
            placeholder="是否是新用户"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isRecord">
          <el-select
            class="multiple"
            v-model.trim="searchForm.isRecord"
            clearable
            placeholder="是否使用学练宝"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="memberRankId">
          <el-cascader
            v-model.trim="searchForm.memberRankId"
            :options="memberRankList"
            :props="{ value: 'id', label: 'name',  }"
            :show-all-levels="false"
            collapse-tags
            clearable
            placeholder="请选择学练宝版本"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
          <el-button
            type="primary"
            v-if="$helpers.permission('export/studentHasCourse')"
            @click="downLoadStudent"
            >导出名单</el-button
          >
        </el-form-item>
      </save-form>
      <el-button
        style="margin-bottom: 20px"
        type="primary"
        @click="addStudentMember"
        icon="el-icon-plus"
        >创建学练宝缴费</el-button
      >
      <el-button
        v-if="$helpers.permission('studentManage/register')"
        @click="addStudent"
        type="primary"
        icon="el-icon-plus"
        style="margin-bottom: 20px"
      >
        新增学员
      </el-button>
      <el-button
        @click="onCreateQRCode"
        type="primary"
        style="margin-bottom: 20px"
      >
        学员激活列表
      </el-button>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="所属学校">
                      <div class="schoolWrap">
                        <overflow-text
                          width="100%"
                          :text="props.row.cooperationOrganName"
                        ></overflow-text>
                      </div> </el-form-item
                  ></el-col>
                  <el-col :span="4">
                    <el-form-item>
                      <span slot="label"
                        >是否激活
                        <el-tooltip placement="top" popper-class="mTooltip">
                          <div slot="content">学员是否设置密码</div>
                          <i
                            @click="
                              () => {
                                console.log('点击');
                              }
                            "
                            class="el-icon-question question"
                            style="font-size: 18px; color: #f56c6c; cursor: pointer"
                          ></i> </el-tooltip
                      ></span>
                      <div>{{ props.row.isActive ? "是" : "否" }}</div>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="课程余额(元)">
                      <span>{{ props.row.courseBalance | moneyFormat }}</span>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="网管课剩余课时">
                      <span>{{ props.row.noStartPracticeCourseNum }}</span>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="关心包">
                      <span>
                        {{ props.row.carePackage | studentPackage }}
                      </span>
                    </el-form-item></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="VIP老师" v-if="tenantId == 1">
                      <Tooltip
                        :content="
                          props.row.vipTeacherName
                            ? props.row.vipTeacherName
                            : '--'
                        "
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="4">
                    <el-form-item label="网管课老师">
                      <Tooltip
                        :content="
                          props.row.practiceTeacherName
                            ? props.row.practiceTeacherName
                            : '--'
                        "
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="4">
                    <el-form-item label="声部课老师">
                      <Tooltip
                        :content="
                          props.row.normalTeacherName
                            ? props.row.normalTeacherName
                            : '--'
                        "
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="4">
                    <el-form-item label="合奏课老师">
                      <Tooltip
                        :content="
                          props.row.mixTeacherName
                            ? props.row.mixTeacherName
                            : '--'
                        "
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="4">
                    <el-form-item label="是否运营" v-if="tenantId == 1">
                      <span>{{ props.row.operatingTag ? "是" : "否" }}</span>
                    </el-form-item></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="账户余额(元)">
                      <span>{{ props.row.balance | moneyFormat }}</span>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="vip课剩余课时">
                      <span>{{ props.row.noStartVipCourseNum }}</span>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="加油包">
                      <span>{{
                        props.row.comeOnPackage | studentPackage
                      }}</span>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="学员年级">
                      <span>{{ props.row.currentGrade }}</span>
                    </el-form-item></el-col
                  >
                  <el-col :span="4">
                    <el-form-item label="学员班级">
                      <span>{{ props.row.currentClass }}</span>
                    </el-form-item></el-col
                  >
                </el-row>
                <!-- <el-row>

                </el-row> -->
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="所属分部"
            v-if="tenantId != 28"
          >
            <template slot-scope="scope">
              <copy-text>{{ scope.row.organName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="userId"
            label="学员信息"
            width="140px"
          >
            <template slot-scope="scope">
              {{ scope.row.username }}
              ({{ scope.row.gender ? "男" : "女" }})<br />
              <copy-text>{{ scope.row.userId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="realName"
            label="家长信息"
            width="140px"
          >
            <template slot-scope="scope">
              {{ scope.row.realName }}
              <br />
              <copy-text>{{ scope.row.parentsPhone }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            label="声部"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="courseTeacherName"
            label="排课老师"
          ></el-table-column>
          <el-table-column align="center" label="未上课时">
            <template slot-scope="scope">{{
              scope.row.hasCourse ? "有" : "无"
            }}</template>
          </el-table-column>
          <el-table-column align="center" label="是否服务" v-if="tenantId == 1">
            <template slot-scope="scope">{{
              scope.row.serviceTag ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column align="center" label="是否使用学练宝">
            <template slot-scope="scope">{{
              scope.row.recordUserId > 0 ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            width="120px"
            prop="parentsPhone"
            label="学练宝截止日期(剩余天数)"
          >
              <template slot-scope="scope">
                <div v-if="scope.row.cloudTeacherOrderList && scope.row.cloudTeacherOrderList.length > 0">
                  <el-button
                    type="text"
                    @click="() => {
                      memberRecordVisible = true;
                      tableMemberList = scope.row.cloudTeacherOrderList
                    }"
                    >查看</el-button>
                </div>
                <div v-else class="red"> 未购买会员 </div>
              </template>
          </el-table-column>
          <el-table-column align="center" label="是否是新用户">
            <template slot="header">
              <p style="position: relative">
                是否是新用户
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">未购买VIP课程的学员为新用户</div>

                  <i
                    class="el-icon-question"
                    style="font-size: 18px; color: #f56c6c; cursor: pointer"
                  ></i>
                </el-tooltip>
              </p>
            </template>
            <template slot-scope="scope">
              {{ scope.row.isNewUser ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column align="center" width="180px" label="操作">
            <template slot-scope="scope">
              <div
                @click="
                  () => {
                    activeRow = scope.row;
                  }
                "
              >
                <el-dropdown
                  trigger="click"
                  placement="bottom"
                  :hide-on-click="false"
                  @visible-change="val => showDropdown(val, scope.row)"
                >
                  <span class="el-dropdown-link">
                    操作<i
                      class="el-icon--right"
                      :class="[
                        showDropdownFlag &&
                        activeRow &&
                        activeRow.userId == scope.row.userId
                          ? 'el-icon-arrow-up'
                          : 'el-icon-arrow-down'
                      ]"
                    ></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width: 180px">
                    <el-dropdown-item
                      style="width: 180px"
                      v-if="$helpers.permission('/studentDetail')"
                    >
                      <router-link
                        style="padding-left: 10px"
                        v-if="$helpers.permission('/studentDetail')"
                        class="el-button--text"
                        :to="{
                          path: `/business/studentDetail`,
                          query: { ...scope.row }
                        }"
                        >查看</router-link
                      >
                    </el-dropdown-item>
                    <el-dropdown-item
                      style="width: 180px"
                      v-if="
                        $helpers.permission(
                          'studentManage/studentUpdate/setStudent'
                        )
                      "
                      @click.native="setStudent(scope.row)"
                    >
                      <el-button type="text" style="padding-left: 10px"
                        >设置扩展声部</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item
                      style="width: 180px"
                      v-if="$helpers.permission('studentManage/studentUpdate')"
                      @click.native="resetStudent(scope.row)"
                    >
                      <el-button type="text" style="padding-left: 10px"
                        >修改</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item
                      style="width: 180px"
                      v-if="
                        $helpers.permission('api-auth/user/updatePassword2')
                      "
                      @click.native="resetPassWrod(scope.row)"
                    >
                      <el-button type="text" style="padding-left: 10px"
                        >修改密码</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item
                      style="width: 180px"
                      v-if="
                        scope.row.isSignedContract &&
                          $helpers.permission('sysUserContracts/getLatest')
                      "
                      @click.native="lookContracts(scope.row)"
                    >
                      <el-button type="text" style="padding-left: 10px"
                        >下载协议</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item
                      style="width: 180px"
                      v-if="
                        $helpers.permission('studentManage/updateStudentMember')
                      "
                      @click.native="setClound(scope.row)"
                    >
                      <el-button type="text" style="padding-left: 10px"
                        >学练宝时长调整</el-button
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      :title="maskName"
      width="800px"
      label-position="right"
      class="studentInfo"
      @close="onMaskClose('studentForm')"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="studentVisible"
    >
      <el-form
        :model="studentForm"
        :inline="true"
        label-width="130px"
        label-position="right"
        ref="studentForm"
        :rules="studentRules"
      >
        <el-alert
          title="基本信息"
          type="info"
          :closable="false"
          style="margin-bottom: 15px"
        ></el-alert>
        <el-form-item label="学生姓名" prop="name">
          <el-input
            v-model.trim="studentForm.name"
            stlye="width:202px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生性别" prop="sex">
          <el-select
            style="width: 202px !important"
            class="multiple"
            filterable
            v-model.trim="studentForm.sex"
            clearable
            placeholder="请选择性别"
          >
            <el-option :value="1" label="男"></el-option>
            <el-option :value="0" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="date">
          <el-date-picker
            v-model.trim="studentForm.date"
            style="width: 202px"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="{
              firstDayOfWeek: 1
            }"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="学生声部" prop="subjectIdList">
          <el-select
            style="width: 202px !important"
            v-model.trim="studentForm.subjectIdList"
            filterable
            clearable
            placeholder="学员声部"
          >
            <el-option-group
              v-for="group in subjectList"
              :key="group.value"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item label="家长姓名" prop="parseName">
          <el-input
            style="width: 202px !important"
            v-model.trim="studentForm.parseName"
            :disabled="!isNew"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="phone"
          :rules="[
            { required: true, message: '请输入手机号' },
            {
              pattern: /^1\d{10}$/,
              message: '请输入正确的手机号',
              trigger: 'blur'
            }
          ]"
        >
          <!--   @blur="checkPhone(studentForm.phone)" -->
          <el-input
            style="width: 202px !important"
            :maxlength="11"
            v-model.trim="studentForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="tenantId == 28 ? '城市' : '所属分部'"
          prop="organId"
        >
          <el-select
            style="width: 202px !important"
            class="multiple"
            v-model.trim="studentForm.organId"
            filterable
            clearable
            :placeholder="tenantId == 28 ? '城市' : '所属分部'"
            @change="changeStudentOrgan"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="school" label="所属学校">
          <el-select
            style="width: 202px !important"
            v-model.trim="studentForm.school"
            filterable
            clearable
            :disabled="!studentForm.organId"
            class="multiple"
          >
            <el-option
              v-for="(item, index) in cooperationList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学员年级" prop="currentGradeNum">
          <el-select
            class="multiple"
            style="width: 202px !important"
            v-model.trim="studentForm.currentGradeNum"
            clearable
            filterable
            :disabled="!studentForm.organId"
          >
            <el-option
              v-for="(item, index) in studentGradeList"
              :label="item"
              :value="Number(index)"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学员班级" prop="currentClass">
          <el-select
            style="width: 202px !important"
            placeholder="班级"
            filterable
            clearable
            v-model.trim="studentForm.currentClass"
          >
            <el-option label="1班" value="1班"></el-option>
            <el-option label="2班" value="2班"></el-option>
            <el-option label="3班" value="3班"></el-option>
            <el-option label="4班" value="4班"></el-option>
            <el-option label="5班" value="5班"></el-option>
            <el-option label="6班" value="6班"></el-option>
            <el-option label="7班" value="7班"></el-option>
            <el-option label="8班" value="8班"></el-option>
            <el-option label="9班" value="9班"></el-option>
            <el-option label="10班" value="10班"></el-option>
            <el-option label="11班" value="11班"></el-option>
            <el-option label="12班" value="12班"></el-option>
            <el-option label="13班" value="13班"></el-option>
            <el-option label="14班" value="14班"></el-option>
            <el-option label="15班" value="15班"></el-option>
            <el-option label="16班" value="16班"></el-option>
            <el-option label="17班" value="17班"></el-option>
            <el-option label="18班" value="18班"></el-option>
            <el-option label="19班" value="19班"></el-option>
            <el-option label="20班" value="20班"></el-option>
            <el-option label="21班" value="21班"></el-option>
            <el-option label="22班" value="22班"></el-option>
            <el-option label="23班" value="23班"></el-option>
            <el-option label="24班" value="24班"></el-option>
            <el-option label="25班" value="25班"></el-option>
            <el-option label="26班" value="26班"></el-option>
            <el-option label="27班" value="27班"></el-option>
            <el-option label="28班" value="28班"></el-option>
            <el-option label="29班" value="29班"></el-option>
            <el-option label="30班" value="30班"></el-option>
            <el-option label="31班" value="31班"></el-option>
            <el-option label="32班" value="32班"></el-option>
            <el-option label="33班" value="33班"></el-option>
            <el-option label="34班" value="34班"></el-option>
            <el-option label="35班" value="35班"></el-option>
            <el-option label="36班" value="36班"></el-option>
            <el-option label="37班" value="37班"></el-option>
            <el-option label="38班" value="38班"></el-option>
            <el-option label="39班" value="39班"></el-option>
            <el-option label="40班" value="40班"></el-option>
          </el-select>
          <!-- <el-input
            v-model.trim="maskForm.course"
            placeholder="班级"
          ></el-input> -->
        </el-form-item>
        <!--
        <el-form-item label="指导老师" prop="teacherId">
          <el-select
            class="multiple"
            v-model.trim="studentForm.teacherId"
            clearable
            filterable
            :disabled="!studentForm.organId"
          >
            <el-option
              v-for="(item, index) in maskTeacherList"
              :label="item.realName"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <el-alert
          title="运营信息"
          type="info"
          :closable="false"
          style="margin-bottom: 15px"
        ></el-alert>
        <el-form-item label="是否运营" prop="operatingTag" v-if="tenantId == 1">
          <el-select
            style="width: 202px !important"
            class="multiple"
            v-model.trim="studentForm.operatingTag"
            clearable
          >
            <el-option :value="1" label="是"></el-option>
            <el-option :value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否服务" prop="serviceTag" v-if="tenantId == 1">
          <el-select
            style="width: 202px !important"
            class="multiple"
            v-model.trim="studentForm.serviceTag"
            clearable
          >
            <el-option :value="1" label="是"></el-option>
            <el-option :value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否是新用户" prop="isNewUser">
          <template #label>
            <p style="position: relative; display: inline-block">
              是否是新用户
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">未购买VIP课程的学员为新用户</div>
                <i
                  class="el-icon-question"
                  style="font-size: 18px; color: #f56c6c"
                ></i>
              </el-tooltip>
            </p>
          </template>
          <el-select
            style="width: 202px !important"
            class="multiple"
            v-model.trim="studentForm.isNewUser"
            clearable
          >
            <el-option :value="1" label="是"></el-option>
            <el-option :value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关心包" prop="carePackage">
          <el-select
            style="width: 202px !important"
            class="multiple"
            v-model.trim="studentForm.carePackage"
            clearable
            :disabled="!isNew && studentUpdatePackage.carePackage == 2"
            placeholder="请选择关心包"
          >
            <el-option label="不可用" :value="0"></el-option>
            <el-option label="可用" :value="1"></el-option>
            <el-option disabled label="已使用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加油包" prop="comeOnPackage">
          <el-select
            style="width: 202px !important"
            class="multiple"
            v-model.trim="studentForm.comeOnPackage"
            clearable
            :disabled="!isNew && studentUpdatePackage.comeOnPackage == 2"
            placeholder="请选择加油包"
          >
            <el-option label="不可用" :value="0"></el-option>
            <el-option label="可用" :value="1"></el-option>
            <el-option disabled label="已使用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="courseTeacher" label="排课老师">
          <remote-search
            :width="202"
            :commit="'setTeachers'"
            v-model="studentForm.courseTeacher"
            :isForzenWithQueryCondition="true"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="studentVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isNew" @click="submitAddStudent"
          >确 定</el-button
        >
        <el-button type="primary" v-if="!isNew" @click="resetStudentSubmie"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 学员激活列表 -->
    <qr-code v-model="qrcodeStatus" title="学员激活列表" :codeUrl="qrcodeUrl" />

    <el-dialog
      title="修改密码"
      :visible.sync="passwrodVisiable"
      :before-close="closePassWord"
      width="400px"
    >
      <el-form :model="passwrodForm" ref="passwrodForm" :inline="true">
        <el-form-item
          label="手机号"
          prop="phone"
          label-width="120px"
          :rules="[
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            {
              pattern: /^1\d{10}$/,
              message: '请输入正确的手机号',
              trigger: 'blur'
            }
          ]"
        >
          <copy-text>{{ passwrodForm.phone }}</copy-text>
        </el-form-item>
        <el-form-item
          label="输入密码"
          prop="password"
          label-width="120px"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur'
            }
          ]"
        >
          <el-input v-model.trim="passwrodForm.password"></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入"
          prop="password2"
          label-width="120px"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur'
            }
          ]"
        >
          <el-input v-model.trim="passwrodForm.password2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passwrodVisiable = false">取 消</el-button>
        <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="协议下载" :visible.sync="protocolVisible" width="650px">
      <protocol-model
        v-if="protocolVisible"
        @close="protocolVisible = false"
        :protocolVersions="protocolVersions"
      />
    </el-dialog>

    <el-dialog title="设置扩展分部" :visible.sync="extVisible" width="500px">
      <student-ext
        v-if="extVisible"
        :subjectList="subjectList"
        :detail="extDetail"
        @getList="getList"
        @close="extVisible = false"
      />
    </el-dialog>

    <el-dialog
      title="创建学练宝缴费"
      width="500px"
      :visible.sync="memberVisible"
    >
      <createMember
        ref="addMember"
        v-if="memberVisible"
        :multipleSelection="multipleSelection"
        @close="memberVisible = false"
        @submited="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="memberVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddMember">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="学练宝时长调整"
      width="500px"
      :visible.sync="cloundDateVisible"
    >
      <setMemberDate
        v-if="cloundDateVisible"
        :row="activatedRow"
        ref="submitDateReset"
        @close="cloundDateVisible = false"
        @submited="getList"
      ></setMemberDate>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cloundDateVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDateReset">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="学练宝详情"
      :visible.sync="memberRecordVisible"
      width="600px"
    >
      <el-table :data="tableMemberList" :header-cell-style="{ background: '#EDEEF0', color: '#444' }">
        <el-table-column align="center" prop="memberRankName" label="学练宝版本">
          <template slot-scope="scope">
              {{ scope.row.memberRankName }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="endTime" label="截止时间">
          <template slot-scope="scope">
            {{ scope.row.endTime | dayjsFormat }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remainingDays" label="剩余天数">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import protocolModel from "@/views/studentManager/modals/protocolModel";
import {
  queryStudentList,
  getStudentInfoByPhone,
  registerStudent,
  updateStudent,
  getLatest
} from "@/api/studentManager";
import { queryByOrganId } from "@/api/systemManage";
import { getGradeList } from "@/views/2021memeberActionManager/api";
import qrCode from "@/components/QrCode/index";
import { vaildStudentUrl } from "@/utils/validate";
import { resetPassword2, getTeacher, getAgreement } from "@/api/buildTeam";
import {
  organizationCloudTeacherFeeQueryPage,
  subjectListTree
} from "@/api/specialSetting";
import axios from "axios";
import qs from "qs";
import { getToken, getTenantId } from "@/utils/auth";
import load from "@/utils/loading";
import createMember from "./modals/createMember";
import setMemberDate from "./modals/setMemberDate";
import studentExt from "./modals/studentExt";
import Tooltip from "@/components/Tooltip";
import { getmemberRankList } from '@/views/categroyManager/productSystem/api'
export default {
  name: "studentManagerList",
  components: {
    pagination,
    qrCode,
    createMember,
    protocolModel,
    studentExt,
    Tooltip,
    setMemberDate
  },
  data() {
    return {
      memberRecordVisible: false,
      tableMemberList: [],
      extVisible: false,
      extDetail: {},
      studentVisible: false,
      memberRankList: [],
      searchForm: {
        organId: [],
        memberRankId: [],
        search: null,
        studentName: null,
        isActive: null,
        hasCourse: null,
        // isMake: null,
        hasPracticeCourse: null,
        operatingTag: null,
        serviceTag: null,
        teacherId: null,
        carePackage: null,
        comeOnPackage: null,
        isNewUser: null,
        hasTeacher: null,
        isRecord: null,
        hasMember: null
      },
      memberVisible: false,
      multipleSelection: [],
      searchList: [],
      tableList: [],
      organList: [],
      teacherList: [],
      maskTeacherList: [],
      subjectList: [], // 声部列表
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      studentForm: {
        phone: "",
        organId: [],
        name: "",
        sex: "",
        parseName: "",
        date: "",
        serviceTag: null,
        operatingTag: null,
        courseTeacher: null,
        subjectIdList: null,
        isNewUser: 1,
        carePackage: 0,
        comeOnPackage: 0,
        school: null,
        currentClass: "",
        currentGradeNum: ""
      },
      studentUpdatePackage: {
        carePackage: 0,
        comeOnPackage: 0
      },
      studentRules: {
        name: [{ required: true, message: "请输入学生姓名" }],
        sex: [{ required: true, message: "请选择学生性别" }],
        date: [{ required: true, message: "请选择出生日期" }],
        organId: [{ required: true, message: "请选择" }],
        subjectIdList: [{ required: true, message: "请选择声部" }],
        serviceTag: [{ required: true, message: "请选择是否参与服务" }],
        isNewUser: [{ required: true, message: "请选择是否是新用户" }],
        operatingTag: [{ required: true, message: "请选择是否参与运营" }],
        teacherId: [{ required: true, message: "请选择指导老师" }]
      },
      isNew: false,
      active: null,
      maskName: "新增学员",
      qrcodeStatus: false,
      qrcodeUrl: null,
      activeRow: null,
      passwrodVisiable: false,
      passwrodForm: {
        phone: "",
        password: "",
        password2: ""
      },
      activatedRow: null,
      protocolVisible: false,
      protocolVersions: [],
      cooperationList: [],
      tenantId: null,
      studentGradeList: [],
      showDropdownFlag: false,
      cloundDateVisible: false
    };
  },
  mounted() {
    this.getMemberList()
    if (this.$route.params.search) {
      this.searchForm.search = this.$route.params.search;
    }
    if (this.$route.params.teacherId) {
      this.searchForm.teacherId = this.$route.params.teacherId;
    }
    if (this.$route.params.hasTeacher) {
      this.searchForm.hasTeacher = this.$route.params.hasTeacher;
    }
    if (this.$route.params.organId) {
      this.searchForm.organId = [];

      this.searchForm.organId = this.searchForm.organId.push(
        this.$route.params.organId
      );
    }
    this.$store.dispatch("setBranchs");
    this.$store.dispatch("setTeachers");
    this.getList();
    this.getAgreement();
    this.tenantId = this.$helpers.tenantId;
  },
  methods: {
    async getMemberList() {
      try {
        const { data } = await getmemberRankList()
        this.memberRankList = data || [];
      } catch (e) {
        console.log(e);
      }
    },
    setClound(row) {
      this.activatedRow = row;
      this.cloundDateVisible = true;
      console.log(row, "setClound");
    },
    submitDateReset() {
      this.$refs.submitDateReset.submit();
    },
    async getAgreement() {
      try {
        const res = await getAgreement();
        if (!res.data) {
          this.$bus.$emit("showguide", ["agreement"]);
        }
      } catch (e) {}
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitAddMember() {
      this.$refs.addMember.submit();
    },
    showDropdown(flag) {
      this.showDropdownFlag = flag;
    },
    addStudentMember() {
      if (this.multipleSelection.length > 0) {
        let organIds = [];
        this.multipleSelection.forEach(m => {
          if (!organIds.includes(m.organId)) {
            organIds.push(m.organId);
          }
        });

        if (organIds.length == 1) {
          this.memberVisible = true;
        } else {
          this.$message.error("所选学员只能是同一分部");
        }
      } else {
        this.$message.error("请至少选择一名学员");
      }
    },
    onSearch() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onCreateQRCode() {
      // 生成报名二维码
      this.qrcodeStatus = true;
      this.qrcodeUrl =
        vaildStudentUrl() + `/#/queryStudentPer?tenantId=` + this.tenantId;
    },
    getList() {
      let rankId = null
      if(this.searchForm.memberRankId && this.searchForm.memberRankId.length > 0) {
        rankId = this.searchForm.memberRankId[this.searchForm.memberRankId.length - 1]
      }
      let params = { ...this.searchForm, memberRankId: rankId };
      params.rows = this.pageInfo.limit;
      params.page = this.pageInfo.page;
      params.organId = this.searchForm.organId.join(",");
      queryStudentList(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    onReSet() {
      this.searchForm = {
        organId: [],
        search: null,
        studentName: null,
        isActive: null,
        hasCourse: null,
        // isMake: null,
        hasPracticeCourse: null,
        operatingTag: null,
        serviceTag: null,
        teacherId: null
      };
      this.getList();
    },
    downLoadStudent() {
      let url = "/api-web/export/studentHasCourse";
      let searchForm = this.searchForm;
      let rankId = null
      if(searchForm.memberRankId && searchForm.memberRankId.length > 0) {
        rankId = searchForm.memberRankId[searchForm.memberRankId.length - 1]
      }
      let data = {
        organId: searchForm.organId.join(","),
        search: searchForm.search + "" ? searchForm.search : null,
        isActive: searchForm.isActive + "" ? searchForm.isActive : null,
        hasCourse: searchForm.hasCourse == "" ? null : searchForm.hasCourse,
        // isMake: searchForm.isMake ? searchForm.isMake : null,
        hasPracticeCourse:
          searchForm.hasPracticeCourse + ""
            ? searchForm.hasPracticeCourse
            : null,
        operatingTag:
          searchForm.operatingTag + "" ? searchForm.operatingTag : null,
        serviceTag: searchForm.serviceTag + "" ? searchForm.serviceTag : null,
        teacherId: searchForm.teacherId + "" ? searchForm.teacherId : null,
        carePackage:
          searchForm.carePackage + "" ? searchForm.carePackage : null,
        comeOnPackage:
          searchForm.comeOnPackage + "" ? searchForm.comeOnPackage : null,
        isNewUser: searchForm.isNewUser + "" ? searchForm.isNewUser : null,
        hasTeacher: searchForm.hasTeacher + "" ? searchForm.hasTeacher : null,
        isRecord: searchForm.isRecord + "" ? searchForm.isRecord : null,
        hasMember: searchForm.hasMember + "" ? searchForm.hasMember : null,
        memberRankId: rankId
      };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
          tenantId: getTenantId()
        },
        url,
        data: qs.stringify(data),
        responseType: "blob"
      };

      this.$confirm("确定导出学员名单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then(res => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
                type: "application/vnd.ms-excel;charset=utf-8"
                // word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });
              let text = new Response(blob).text();
              text.then(res => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  if (json.code == 403) {
                    this.$message.error(`登录过期，请重新登录！`);
                    setTimeout(() => {
                      this.$store.dispatch("user/resetToken").then(() => {
                        location.reload();
                      });
                    }, 1000);
                    return;
                  }
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    (nowTime.getMonth() + 1) +
                    nowTime.getDate();
                  let fname = `导出学员名单` + ymd + ".xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });

              load.endLoading();
            })
            .catch(error => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    checkPhone(val) {
      var regu = /^1\d{10}$/;
      var re = new RegExp(regu);
      if (re.test(val)) {
        getStudentInfoByPhone({ mobile: this.studentForm.phone }).then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.studentForm = {
                name: res.data.name,
                sex: res.data.gender,
                parseName: res.data.parentsName,
                // sound: parseInt(res.data.subjectIdList),
                phone: val,
                date: res.data.birthdate
              };
            }
          }
        });
      }
    },
    submitAddStudent() {
      const studentForm = this.studentForm;
      // 效验  然后组数据提交
      this.$refs["studentForm"].validate(item => {
        if (item) {
          let obj = {
            phone: studentForm.phone,
            username: studentForm.name,
            gender: studentForm.sex,
            realName: studentForm.parseName,
            birthdate: studentForm.date,
            organId: studentForm.organId,
            serviceTag: studentForm.serviceTag,
            operatingTag: studentForm.operatingTag,
            teacherId: studentForm.teacherId,
            isNewUser: studentForm.isNewUser,
            subjectIdList: studentForm.subjectIdList,
            carePackage: studentForm.carePackage,
            comeOnPackage: studentForm.comeOnPackage,
            cooperationOrganId: studentForm.school,
            currentClass: studentForm.currentClass,
            currentGradeNum: studentForm.currentGradeNum,
            courseTeacher: studentForm.courseTeacher
          };
          registerStudent(obj).then(res => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.studentVisible = false;
              this.getList();
            }
          });
        }
      });
    },
    // 修改学生信息
    resetStudentSubmie() {
      const studentForm = this.studentForm;
      this.$refs["studentForm"].validate(item => {
        if (item) {
          let obj = {
            phone: studentForm.phone,
            username: studentForm.name,
            gender: studentForm.sex,
            realName: studentForm.parseName,
            birthdate: studentForm.date,
            organId: studentForm.organId,
            id: this.active.userId,
            serviceTag: studentForm.serviceTag,
            operatingTag: studentForm.operatingTag,
            teacherId: studentForm.teacherId,
            isNewUser: studentForm.isNewUser,
            subjectIdList: studentForm.subjectIdList,
            carePackage: studentForm.carePackage,
            comeOnPackage: studentForm.comeOnPackage,
            cooperationOrganId: studentForm.school,
            currentClass: studentForm.currentClass,
            currentGradeNum: studentForm.currentGradeNum,
            courseTeacher: studentForm.courseTeacher
          };
          updateStudent(obj).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.studentVisible = false;
              this.getList();
            }
          });
        }
      });
    },

    async getSubjectList() {
      try {
        await subjectListTree({
          delFlag: "NO",
          rows: 9999
        }).then(res => {
          let result = res.data;
          if (res.code == 200) {
            let tempArray = [];
            console.log(result.rows, "result");
            result.rows.forEach((item, index) => {
              let subject = [];
              let nowSubject = item.subjects || [];
              nowSubject.forEach(s => {
                subject.push({
                  value: s.id,
                  label: s.name
                });
              });

              tempArray[index] = {
                label: item.name,
                value: item.id,
                options: subject
              };
            });
            this.subjectList = tempArray;
          }
        });

        // 获取 学生年级
      } catch (e) {
        console.log(e);
      }
    },

    async getStudentGradeList(organId) {
      try {
        const res = await getGradeList({ id: organId });
        this.studentGradeList = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    async addStudent() {
      await this.getSubjectList();
      this.isNew = true;
      this.studentVisible = true;
      this.maskName = "新增学员";
    },
    async resetStudent(row) {
      this.studentVisible = true;
      let organId = row.organId;
      await this.getSubjectList();
      await this.changeStudentOrgan(row.organId);
      this.isNew = false;
      this.active = row;

      this.maskName = "修改学员";
      this.$nextTick(() => {
        this.studentForm = {
          phone: row.parentsPhone || null,
          name: row.username || null,
          sex: row.gender,
          parseName: row.realName || null,
          date: row.birthdate || null,
          organId: row.organId || null,
          serviceTag: row.serviceTag,
          operatingTag: row.operatingTag,
          teacherId: row.teacherId || null,
          isNewUser: row.isNewUser,
          subjectIdList: Number(row.subjectIdList) || null,
          carePackage: row.carePackage,
          comeOnPackage: row.comeOnPackage,
          school: row.cooperationOrganId || null,
          extSubjectIds: row.extSubjectIds || null,
          currentClass: row.currentClass || null,
          currentGradeNum: row.currentGradeNum || null,
          courseTeacher: row.courseTeacher || null
        };
        this.studentUpdatePackage = {
          carePackage: row.carePackage,
          comeOnPackage: row.comeOnPackage
        };
      });
    },
    async setStudent(row) {
      // 设置扩展分部
      await this.getSubjectList();
      this.extDetail = {
        id: row.userId,
        phone: row.parentsPhone || null,
        name: row.username || null,
        sex: row.gender,
        parseName: row.realName || null,
        date: row.birthdate || null,
        organId: row.organId || null,
        serviceTag: row.serviceTag,
        operatingTag: row.operatingTag,
        teacherId: row.teacherId || null,
        isNewUser: row.isNewUser,
        subjectIdList: Number(row.subjectIdList) || null,
        carePackage: row.carePackage,
        comeOnPackage: row.comeOnPackage,
        cooperationOrganId: row.cooperationOrganId || null,
        extSubjectIds: row.extSubjectIds
      };
      this.extVisible = true;
    },
    onMaskClose(formName) {
      this.$refs[formName].resetFields();
    },
    resetPassWrod(row) {
      this.activatedRow = row;
      this.passwrodForm.phone = row.parentsPhone;
      this.passwrodVisiable = true;
    },
    closePassWord() {
      this.activatedRow = null;
      this.passwrodForm = {
        phone: "",
        password: "",
        password2: ""
      };
      this.$refs["passwrodForm"].resetFields();
      this.passwrodVisiable = false;
    },
    submitResetPassWord() {
      if (this.passwrodForm.password !== this.passwrodForm.password2) {
        this.$message.error("两次密码必须相同");
        return;
      }
      this.$refs["passwrodForm"].validate(res => {
        if (res) {
          // 发请求
          resetPassword2({
            mobile: this.passwrodForm.phone,
            newPassword: this.passwrodForm.password,
            userId: this.activatedRow.userId
          }).then(res => {
            if (res.code == 200) {
              // 修改成功
              this.$message.success("修改成功");
              this.closePassWord();
            }
          });
        }
      });
    },
    async changeStudentOrgan(val) {
      this.studentForm.teacherId = null;
      this.studentForm.school = null;
      if (val) {
        await getTeacher({ organId: val }).then(res => {
          if (res.code == 200) {
            this.maskTeacherList = res.data;
            if (this.maskTeacherList <= 0) {
              this.$nextTick(() => {
                this.$bus.$emit("showguide", ["teacher"]);
              });
            }
          }
        });
        queryByOrganId({ organId: val }).then(res => {
          if (res.code == 200) {
            this.cooperationList = res.data;
          }
        });
        this.getStudentGradeList(val);
      } else {
        this.maskTeacherList = [];
      }
    },
    async lookContracts(row) {
      await getLatest({ userId: row.userId }).then(res => {
        if (res.code == 200) {
          if (res.data) {
            this.protocolVersions = res.data;
            this.protocolVisible = true;
          }
        }
      });
    },
    checkDate(dateStr) {
      let dayjs = this.$helpers.dayjs;
      let nowDate = new Date().getTime();
      return nowDate - dayjs(dateStr).valueOf() < 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.newBand {
  display: inline-block;
  margin-right: 10px;
}
.right-code {
  // width: 50%;
  // float: left;
  .title {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }
}
::v-deep .studentInfo {
  .multiple.el-select {
    width: 185px !important;
  }
}
.red {
  color: red;
}
.demo-table-expand {
  // font-size: 0;
}
.demo-table-expand label {
  width: 150px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
  position: relative;
}
.demo-table-expand .el-form-item__label {
  z-index: 100;
}
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 20px 0 20px 110px;
}
.schoolWrap {
  // width: calc(100% - 75px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-dropdown-link {
  color: #00a79d;
  cursor: pointer;
}
</style>