zc_saas_admin/src/views/education/classManageMent/studentMenu/index.vue

<template>
  <div id="studentMenu">
    <div class="dis__s">
      <div>
        <el-button
          :size="size"
          :type="active === 1 ? 'primary' : ''"
          @click="changeActive(1)"
          >班级学员</el-button
        >
        <el-button
          :size="size"
          :type="active === 2 ? 'primary' : ''"
          @click="changeActive(2)"
          >学时管理</el-button
        >
      </div>
      <div>
        <el-button
          size="small"
          v-if="statusShow.indexOf(1) !== -1"
          @click="uploadGF"
          >官方信息推送</el-button
        >
        <span
          style="font-size: 14px; margin: 0px 6px"
          v-if="statusShow.indexOf(1) !== -1"
          >已推送：{{ gfNum }}/{{ total }}</span
        >
        <el-button size="small" v-if="statusShow.indexOf(3) !== -1"
          >官方学习账号开通</el-button
        >
        <el-button
          size="small"
          v-if="statusShow.indexOf(3) !== -1"
          @click="moreActive(4)"
          >账号状态标记</el-button
        >
        <span
          style="font-size: 14px; margin: 0px 6px"
          v-if="statusShow.indexOf(3) !== -1"
          >已开通：{{ zhNum }}/{{ total }}</span
        >
      </div>
    </div>
    <table-list
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      @addClick="addClick"
      :loading="loading"
      @editInfo="editInfo"
    >
      <template slot="customize">
        <el-button :size="size" type="success" @click="moreActive(1)"
          >结业</el-button
        >
        <!-- <el-button :size="size" type="warning" @click="moreActive(3)"
          >移除</el-button
        > -->
        <el-select
          @change="search(3)"
          v-model="formData.studyCountMore"
          placeholder="请选择"
          style="margin: 0px 10px"
          size="medium"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          v-if="formData.studyCountMore === 2"
          :size="size"
          type="primary"
          @click="moreActive(2)"
          >选班</el-button
        >
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="addClick(props.scope.row, 2)"
          >学员详情</el-button
        >
        <!-- <el-button type="text" @click="del(props.scope.row)">移除</el-button> -->
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog
      :visible.sync="dialogVisible"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          {{
            stice == 1
              ? "批准结业"
              : stice == 4
              ? "学习账号开通状态标记"
              : stice == 3
              ? "移除学员"
              : ""
          }}
        </div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div>
        <ul>
          <li
            v-for="(item, index) in allCheckList"
            :key="index"
            class="btnLists"
          >
            {{ item.realName }}
            <i
              class="el-icon-close btnIcon"
              v-if="allCheckList.length > 1"
              @click="clearStudent(index)"
            ></i>
          </li>
          <div style="clear: both"></div>
          <p>
            {{
              stice == 1
                ? "所选学员，批转结业吗？"
                : stice == 3
                ? "是否移除所选中的学员？"
                : stice == 4
                ? "确定以上所选学员标记为【已开通账号】吗？"
                : ""
            }}
          </p>
          <el-radio-group v-model="finishStatusOS" v-if="stice == 1">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisibleTable"
      width="1080px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">选择班级</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisibleTable = false"
          />
        </div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="3">所属商品课程：</el-col>
          <el-col :span="21">
            <el-descriptions :labelStyle="{ width: '110px' }" border>
              <el-descriptions-item label="商品编码">{{
                obtainGoods.code
              }}</el-descriptions-item>
              <el-descriptions-item label="商品业务层级"
                >{{ obtainGoods.educationName }}-{{
                  obtainGoods.projectName
                }}-{{ obtainGoods.businessName }}</el-descriptions-item
              >
              <el-descriptions-item label="学时">{{
                obtainGoods.classHours
              }}</el-descriptions-item>
              <el-descriptions-item label="年份">{{
                obtainGoods.year
              }}</el-descriptions-item>
              <el-descriptions-item label="商品名称">{{
                obtainGoods.goodsName
              }}</el-descriptions-item>
              <el-descriptions-item label="学习有效期"
                >{{
                  $methodsTools.onlyForma(obtainGoods.studyStartTime, false)
                }}-{{
                  $methodsTools.onlyForma(obtainGoods.studyEndTime, false)
                }}</el-descriptions-item
              >
            </el-descriptions>
          </el-col>
        </el-row>
        <p style="color: red">注：打勾，即代表选中；仅单选</p>
        <el-table
          ref="multipleTable"
          :data="tableDataClass"
          border
          :row-key="getRowKeys"
          :header-cell-style="{
            'background-color': '#eee',
            padding: '8px',
            color: '#333',
          }"
        >
          <el-table-column label="" width="45" align="center">
            <template scope="scope">
              <el-radio
                class="radioTables"
                :label="scope.row.gradeId"
                v-model="templateRadio"
                :reserve-selection="true"
                @change.native="getTemplateRow(scope.$index, scope.row)"
                :disabled="
                  parseInt(scope.row.studentUpper) -
                    parseInt(scope.row.studentNum) <
                  $refs.tableList.allCheckData.length
                    ? true
                    : false
                "
                >{{ "" }}</el-radio
              >
            </template>
          </el-table-column>
          <template v-for="(item, index) in tableListClass">
            <el-table-column
              v-if="item.scope !== 'inputs'"
              :width="item.width"
              :key="index"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
              header-align="center"
            >
              <template slot-scope="scope">
                <span v-if="item.scope === 'status'">
                  {{
                    scope.row[item.prop] === 1
                      ? "有效"
                      : scope.row[item.prop] === 0
                      ? "无效"
                      : "未知"
                  }}
                </span>
                <span v-else-if="item.scope === 'openStatus'">
                  {{ scope.row[item.prop] === 0 ? "未开班" : "已开班" }}
                  {{
                    scope.row[item.prop] === 1 ? scope.row["officialName"] : ""
                  }}
                </span>
                <span v-else-if="item.scope === 'moreList'">
                  {{
                    scope.row[item.prop1] +
                    "-" +
                    scope.row[item.prop2] +
                    "-" +
                    scope.row[item.prop3]
                  }}
                </span>
                <span v-else-if="item.scope === 'classNums'">
                  {{ scope.row[item.prop1] + "/" + scope.row[item.prop2] }}
                </span>
                <span v-else-if="item.scope === 'timeTwo'">
                  {{ $methodsTools.onlyForma(scope.row[item.prop1], false) }}-{{
                    $methodsTools.onlyForma(scope.row[item.prop2], false)
                  }}
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span></template
              >
            </el-table-column></template
          >
        </el-table>
        <pagination
          :total="totalClass"
          :pageSize="formDataClass.pageSize"
          :currentPage="formDataClass.pageNum"
          @handleSizeChange="handleSizeChangeClass"
          @handleCurrentChange="handleCurrentChangeClass"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTable = false">取 消</el-button>
        <el-button type="primary" @click="submitTable">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisibleStudent"
      width="1060px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">学员详情</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisibleStudent = false"
          />
        </div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-form label-position="right" label-width="130px" :model="listData">
            <el-col :span="6">
              <div class="dis_fs">
                <div class="photoSty1">
                  <img
                    style="width: 100%; height: 100%"
                    v-if="!listData.oneInchPhotos"
                    src="@/assets/404_images/wuyuxaog.png"
                    alt=""
                  />
                  <el-image
                    v-else
                    style="width: 100%; height: 100%"
                    :src="$methodsTools.splitImgHost(listData.oneInchPhotos)"
                    :preview-src-list="[
                      $methodsTools.splitImgHost(listData.oneInchPhotos),
                    ]"
                  >
                  </el-image>
                  <div class="pos_bottom">一寸头像图</div>
                </div>
                <div class="photoSty2">
                  <img
                    style="width: 100%; height: 100%"
                    v-if="!listData.idCardImg1"
                    src="@/assets/404_images/wuyuxaog.png"
                    alt=""
                  />
                  <el-image
                    v-else
                    style="width: 100%; height: 100%"
                    :src="$methodsTools.splitImgHost(listData.idCardImg1)"
                    :preview-src-list="[
                      $methodsTools.splitImgHost(listData.idCardImg1),
                    ]"
                  >
                  </el-image>
                  <div class="pos_bottom">身份证正面照片</div>
                </div>
                <div class="photoSty2" style="margin-right: 0px">
                  <img
                    style="width: 100%; height: 100%"
                    v-if="!listData.idCardImg2"
                    src="@/assets/404_images/wuyuxaog.png"
                    alt=""
                  />
                  <el-image
                    v-else
                    style="width: 100%; height: 100%"
                    :src="$methodsTools.splitImgHost(listData.idCardImg2)"
                    :preview-src-list="[
                      $methodsTools.splitImgHost(listData.idCardImg2),
                    ]"
                  >
                  </el-image>
                  <div class="pos_bottom">身份证背面照片</div>
                </div>
              </div>
            </el-col>
            <el-col :span="9">
              <el-form-item label="学员编码">
                <el-input
                  disabled
                  v-model="listData.studentCode"
                  placeholder="请填写学员编码"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input
                  disabled
                  v-model="listData.realname"
                  placeholder="请填写姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号码">
                <el-input
                  disabled
                  v-model="listData.idCard"
                  placeholder="请填写身份证号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="listData.sex" disabled>
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-input
                  disabled
                  v-model="listData.userBirth"
                  placeholder="请填写出生日期"
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input
                  disabled
                  v-model="listData.telphone"
                  placeholder="请填写手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="微信">
                <el-input
                  disabled
                  v-model="listData.telphone"
                  placeholder="请填写微信"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  disabled
                  v-model="listData.email"
                  placeholder="请填写邮箱"
                ></el-input>
              </el-form-item>
              <el-form-item label="学历">
                <el-input
                  disabled
                  v-model="listData.eduLevel"
                  placeholder="请填写学历"
                ></el-input>
              </el-form-item>
              <el-form-item label="工作年限">
                <el-input
                  disabled
                  v-model="listData.workYear"
                  placeholder="请填写工作年限"
                ></el-input>
              </el-form-item>
              <el-form-item label="在职状况">
                <el-radio-group v-model="listData.jobStatus" disabled>
                  <el-radio :label="0">在职</el-radio>
                  <el-radio :label="1">离职</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="所在公司">
                <el-input
                  disabled
                  v-model="listData.companyName"
                  placeholder="请填写所在公司"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="民族">
                <el-input
                  disabled
                  v-model="listData.nation"
                  placeholder="请填写民族"
                ></el-input>
              </el-form-item>
              <el-form-item label="籍贯">
                <el-input
                  disabled
                  v-model="listData.nativePlace"
                  placeholder="请填写籍贯"
                ></el-input>
              </el-form-item>
              <el-form-item label="政治面貌">
                <el-input
                  disabled
                  v-model="listData.politic"
                  placeholder="请填写政治面貌"
                ></el-input>
              </el-form-item>
              <el-form-item label="婚姻状况">
                <el-input
                  disabled
                  v-model="listData.marry"
                  placeholder="请填写婚姻状况"
                ></el-input>
              </el-form-item>
              <el-form-item label="户口性质">
                <el-radio-group v-model="listData.census" disabled>
                  <el-radio :label="1">农村</el-radio>
                  <el-radio :label="2">城镇</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="户口所在地">
                <el-input
                  disabled
                  :value="
                    listData.houseProvince +
                    listData.houseCity +
                    listData.houseDistrict +
                    listData.houseAddress
                  "
                  placeholder="请填写户口所在地"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系地址">
                <el-input
                  disabled
                  v-model="listData.contactAddress"
                  placeholder="请填写联系地址"
                ></el-input>
              </el-form-item>
              <el-form-item label="收件地址">
                <el-input
                  disabled
                  v-model="listData.consigneeAddress"
                  placeholder="请填写收件地址"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  disabled
                  type="textarea"
                  :rows="5"
                  v-model="listData.remark"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleStudent = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  components: { tableList, pagination },
  data() {
    return {
      options: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "剩余学习机会>0，商品下最后一次所在班级",
          value: 2,
        },
        {
          label: "剩余学习机会>0，非商品下最后一次所在班级",
          value: 1,
        },
        {
          label: "剩余学习机会=0",
          value: 0,
        },
      ],
      statusShow: [], //1无官方接口按钮 2只有官方推送 3都有
      size: "medium",
      active: 1,
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "班级人数：",
        index: 0,
        ch: "位",
        num: false,
        choice: true,
        border: true,
        addHide: true,
        gftsStatus: false,
        gfUserStatus: false,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      formData: {
        studyCountMore: "",
        gradeId: this.$route.query.id,
        status: "0,1",
        pageSize: 10,
        pageNum: 1,
      },
      totalClass: 0,
      formDataClass: {
        pastDue: 1,
        atFull: 1,
        goodsId: this.$route.query.goodsId,
        status: 1,
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "学员编码",
          prop: "studentCode",
          hidden: true,
        },
        {
          label: "学员姓名",
          prop: "realName",
          hidden: true,
        },
        {
          label: "学员身份证",
          prop: "idCard",
          hidden: true,
        },
        {
          label: "绑定手机号码",
          prop: "telPhone",
          hidden: true,
        },
        {
          label: "资料变更状态",
          prop: "userStatus",
          hidden: true,
          scope: "changeCLS",
        },
        {
          label: "学时",
          prop: "classHours",
          hidden: true,
        },
        {
          label: "视频学习进度（节）",
          prop1: "stuAllNum",
          prop2: "secAllNum",
          hidden: true,
          scope: "computer",
        },
        {
          label: "做题进度（章卷）",
          prop1: "recordNum",
          prop2: "examNum",
          hidden: true,
          scope: "computer",
        },
        {
          label: "学时审批状态",
          prop: "periodStatus",
          hidden: true,
          scope: "statusPeriods",
        },
        {
          label: "学习服务期",
          prop1: "studyStartTime",
          prop2: "studyEndTime",
          hidden: true,
          Diszing: false,
          scope: "TimeLists",
        },
        {
          label: "班级有效期",
          prop1: "classStartTime",
          prop2: "classEndTime",
          hidden: true,
          Diszing: false,
          scope: "TimeLists",
        },
        {
          label: "结业状态",
          prop: "finishStatus",
          hidden: true,
          scope: "finishStatus",
        },
        {
          label: "剩余学习机会",
          prop: "studyCount",
          hidden: true,
        },
        {
          label: "复购-学时冲突",
          prop: "rebuy",
          hidden: true,
          scope: "rebuy",
        },
      ],
      listData: {},
      finishStatusOS: "",
      tableData: [], //表单数据
      total: 0, //一共多少条
      gfNum: 0, //官方信息推送
      zhNum: 0, //账号状态标记
      dialogVisible: false,
      dialogVisibleTable: false,
      dialogVisibleStudent: false,
      allCheckList: [], //多选数组
      stice: 0,
      obtainGoods: {}, //选择班级头部商品数据
      tableDataClass: [],
      tableListClass: [
        {
          label: "班级编码",
          prop: "gradeCode",
        },
        {
          label: "班级号",
          prop: "classStatus",
          prop1: "officialName",
          scope: "openStatus",
        },
        {
          label: "班级名称",
          prop: "className",
        },
        {
          label: "班级人数",
          prop1: "studentNum",
          prop2: "studentUpper",
          scope: "classNums",
        },
        {
          label: "班级状态",
          prop: "status",
          scope: "status",
        },
        {
          label: "班级有效期",
          prop1: "classStartTime",
          prop2: "classEndTime",
          scope: "timeTwo",
        },
      ],
      templateRadio: "",
    };
  },
  async mounted() {
    await this.getStatus();
    this.search();
  },
  activated() {
    this.getStatus();
    this.search();
  },
  methods: {
    uploadGF() {
      if (!this.$refs.tableList.allCheckData.length) {
        this.$message.warning("请勾选需要官方信息推送的学员");
        return;
      }
      let arr = this.$refs.tableList.allCheckData.map((item) => {
        return {
          userId: item.userId,
          gradeId: this.$route.query.id,
        };
      });
      this.$api.editGradeUsereditpushInfo(arr).then((res) => {
        if (res.code === 200) {
          if (!res.msg) {
            this.$message.success("推送成功");
          } else {
            this.$message.error(res.msg);
          }
          this.search();
          this.$refs.tableList.clearMoreActive();
        }
      });
    },
    getInfos(e) {
      console.log(e);
    },
    getStatus() {
      return new Promise((resolve, reject) => {
        this.$api
          .inquireGradegradelistselectButton({
            gradeId: parseInt(this.$route.query.id),
          })
          .then((res) => {
            this.statusShow = res.data;
            if (res.data.indexOf(1) !== -1) {
              this.navText.gftsStatus = true;
            } else {
              this.navText.gftsStatus = false;
            }
            if (res.data.indexOf(3) !== -1) {
              this.navText.gfUserStatus = true;
            } else {
              this.navText.gfUserStatus = false;
            }
            resolve();
          });
      });
    },
    //单选触发
    getTemplateRow(index, row) {
      this.templateRadio = row.gradeId;
    },
    getRowKeys(row) {
      return row.gradeId;
    },
    submitTable() {
      var lets = [];
      this.$refs.tableList.allCheckData.forEach((item) => {
        lets.push({
          oldGradeId: this.$route.query.id,
          goodsId: item.goodsId,
          gradeId: this.templateRadio,
          orderGoodsId: item.orderGoodsId,
          userId: item.userId,
        });
      });
      this.$api.gradegradechangeGrade({ userList: lets }).then((res) => {
        this.$message.success("选班成功");
        this.search();
        this.dialogVisibleTable = false;
      });
    },
    submit() {
      if (!this.allCheckList.length) {
        this.dialogVisible = false;
        return;
      }
      let ars = [];
      this.allCheckList.map((item) => {
        ars.push(item.id);
      });
      let data = {
        id: ars,
      };
      if (this.stice === 1) {
        if (this.finishStatusOS !== 0 && this.finishStatusOS !== 1) {
          this.$message.warning("请选择是否");
          return;
        }
        data.finishStatus = this.finishStatusOS;
      }
      if (this.stice === 3) {
        data.status = 0;
      }
      if (this.stice === 4) {
        data.learnStatus = 1;
      }
      this.$api.editGradeUserGradegrade(data).then((res) => {
        this.dialogVisible = false;
        this.$message.success("成功");
        this.search();
      });
    },
    //1结业 2选班 3移除 4账号状态标记
    moreActive(int) {
      if (!this.$refs.tableList.allCheckData.length) {
        this.$message.warning("请勾选需要操作的学员");
        return;
      }
      if (int === 1 || int === 3 || int === 4) {
        this.stice = int;
        this.allCheckList = JSON.parse(
          JSON.stringify(this.$refs.tableList.allCheckData)
        );
        this.finishStatusOS = "";
        this.dialogVisible = true;
      }
      if (int === 2) {
        var newTime = Date.parse(new Date()) / 1000;
        var itemsq = JSON.parse(
          JSON.stringify(this.$refs.tableList.allCheckData)
        );
        var ast = itemsq.every((items) => {
          return items.periodStatus !== 1 && items.classEndTime
            ? items.classEndTime < newTime
            : false;
        });
        if (!ast) {
          this.$message.warning(
            "选择的学员中存在学时审批状态已通过或班级有效期未过期"
          );
          return;
        }
        this.$api.obtainGoods(this.$route.query.goodsId).then((res) => {
          this.obtainGoods = res.data;
          this.$api.inquireGradegradeList(this.formDataClass).then((res) => {
            if (!res.rows.length) {
              this.$message.warning(
                "暂无匹配班级，请先确保“有【班级有效期未过期】【未满学员】的有效班级”，再选班！"
              );
              return;
            }
            this.totalClass = res.total;
            this.tableDataClass = res.rows;
            this.templateRadio = parseInt(this.$route.query.id);
            this.dialogVisibleTable = true;
          });
        });
      }
    },
    getNewClass() {
      this.$api.inquireGradegradeList(this.formDataClass).then((res) => {
        this.tableDataClass = res.rows;
        this.totalClass = res.total;
      });
    },
    clearStudent(index) {
      this.allCheckList.splice(index, 1);
    },
    editInfo(v) {
      // this.addClick(v, 2);
    },
    addClick(v, int) {
      // int = 2详情 3学员管理
      if (v === undefined) {
        // 添加班级
        // this.$router.push({
        //   path: "addClass",
        // });
      } else {
        if (int === 2) {
          //学员详情
          this.$api
            .inquiregradestudentlistStudent({ userId: v.userId })
            .then((res) => {
              this.listData = res.rows[0];
              this.dialogVisibleStudent = true;
            });
        }
        if (int === 3) {
          // 学员管理
          // this.$router.push({
          //   path: "studentMenu",
          //   query: {
          //     id: v.gradeId,
          //   },
          // });
        }
      }
    },
    del(v) {
      this.stice = 3;
      this.allCheckList = [v];
      this.dialogVisible = true;

      // let data = {
      //   id: [v.id],
      //   status: 0,
      // };
      // this.$api.editGradeUserGradegrade(data).then((res) => {
      //   this.$message.success("移除成功");
      //   this.search();
      // });
    },
    changeActive(int) {
      if (int == this.active) {
        return;
      } else {
        if (int === 2) {
          const jump = () => {
            this.$router.push({
              path: "classHours",
              query: {
                id: this.$route.query.id,
                goodsId: this.$route.query.goodsId,
              },
            });
          };
          const statusPage = this.$store.state.tagsView.visitedViews.some(
            (item) => {
              return item.name == "ClassHours";
            }
          );
          if (statusPage) {
            this.$store
              .dispatch("tagsView/delCachedView", {
                name: "ClassHours",
              })
              .then((res) => {
                jump();
              });
          } else {
            jump();
          }
          // this.active = int;
        }
      }
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          gradeId: this.$route.query.id,
          status: "0,1",
          pageSize: 10,
          pageNum: 1,
        };
      }
      if (int === 3) {
        this.$refs.tableList.allCheckData = [];
        this.formData.pageSize = 10;
        this.formData.pageNum = 1;
      }
      this.$api
        .inquireGradegradelistGrade(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
          if (this.navText.gftsStatus) {
            this.$api
              .inquireGradegradeofficialInfoCount({
                gradeId: this.$route.query.id,
              })
              .then((res) => {
                this.gfNum = res.data.officialInfoCount;
                this.zhNum = res.data.learnStatus;
              });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },

    handleSizeChangeClass(v) {
      this.formDataClass.pageSize = v;
      this.formDataClass.pageNum = 1;
      this.getNewClass();
    },
    handleCurrentChangeClass(v) {
      this.formDataClass.pageNum = v;
      this.getNewClass();
    },
  },
};
</script>

<style lang="less" scoped>
.dis__s {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnLists {
  float: left;
  border: 1px solid #333;
  padding: 0px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  .btnIcon {
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
      color: blue;
    }
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
/deep/.radioTables > .el-radio__label {
  display: none;
}
.dis_fs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photoSty1 {
  flex-shrink: 0;
  width: 150px;
  height: 160px;
  background-color: #fff;
  position: relative;
  margin-bottom: 30px;
}
.photoSty2 {
  position: relative;
  flex-shrink: 0;
  width: 230px;
  height: 160px;
  background-color: #fff;
  margin-bottom: 30px;
}
.pos_bottom {
  position: absolute;
  height: 20px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
}
</style>