zc_saas_admin/src/views/education/classManageMent/classHoursReview/studyTimes.vue

<template>
  <div id="classHoursReview">
    <div>
      <div class="dis_fs">
        <ul class="ul_ls">
          <li>学员编码：{{ userData.studentCode }}</li>
          <li>学员姓名：{{ userData.realName }}</li>
          <li>学员身份证号码：{{ userData.idCard }}</li>
          <li>绑定手机号码：{{ userData.telPhone }}</li>
        </ul>
        <div class="photoSty1">
          <img
            style="width: 100%; height: 100%"
            v-if="!recent_photos"
            src="@/assets/404_images/wuyuxaog.png"
            alt=""
          />
          <el-image
            v-else
            style="width: 100%; height: 100%"
            :src="$methodsTools.splitImgHost(recent_photos)"
            :preview-src-list="[$methodsTools.splitImgHost(recent_photos)]"
          >
          </el-image>
          <div class="pos_bottom">一寸头像图</div>
        </div>
        <div class="photoSty2">
          <img
            style="width: 100%; height: 100%"
            v-if="!idcard_face_photo"
            src="@/assets/404_images/wuyuxaog.png"
            alt=""
          />
          <el-image
            v-else
            style="width: 100%; height: 100%"
            :src="$methodsTools.splitImgHost(idcard_face_photo)"
            :preview-src-list="[$methodsTools.splitImgHost(idcard_face_photo)]"
          >
          </el-image>
          <div class="pos_bottom">身份证正面照片</div>
        </div>
        <div class="photoSty2" style="margin-right: 0px">
          <img
            style="width: 100%; height: 100%"
            v-if="!idcard_national_photo"
            src="@/assets/404_images/wuyuxaog.png"
            alt=""
          />
          <el-image
            v-else
            style="width: 100%; height: 100%"
            :src="$methodsTools.splitImgHost(idcard_national_photo)"
            :preview-src-list="[
              $methodsTools.splitImgHost(idcard_national_photo),
            ]"
          >
          </el-image>
          <div class="pos_bottom">身份证背面照片</div>
        </div>
      </div>
    </div>

    <div class="dis_fls">
      <div class="s_sd">
        <div class="dis_colu">
          <div class="jdNumSty" style="margin-bottom: 4px">
            视频学习进度：{{ userData.stuAllNum }}/{{ userData.secAllNum }}
            {{
              userData.stuAllNum == 0 && userData.secAllNum == 0
                ? "0"
                : ((userData.stuAllNum / userData.secAllNum) * 100).toFixed(2)
            }}% 通过：{{ userData.pass }}节
            <span style="color: #f56c6c">作弊：{{ userData.cheat }}节</span>
            <span style="color: #409eff"> 待审：{{ userData.pending }}节</span>
          </div>
          <div class="jdNumSty">
            做题学习进度：{{ userData.recordNum }}/{{ userData.examNum }}
            {{
              userData.recordNum == 0 && userData.examNum == 0
                ? "0"
                : ((userData.recordNum / userData.examNum) * 100).toFixed(2)
            }}% 通过：{{ userData.examPass }}节
            <span style="color: #f56c6c">作弊：{{ userData.examCheat }}节</span>
            <span style="color: #409eff">
              待审：{{ userData.examPending }}节</span
            >
          </div>
        </div>
        <div class="shbtns">
          学时审批状态：{{
            userData.allStatus === 1
              ? "未通过"
              : userData.allStatus === 0
              ? "待审核"
              : userData.allStatus === -1
              ? "不可审核"
              : userData.allStatus === 2
              ? "通过审核"
              : "未知状态，请联系管理员"
          }}
        </div>
      </div>
      <div class="s_sd">
        <div
          class="btnStys"
          @click="getChangeStatus(1)"
          v-if="userData.allStatus === 0"
        >
          待审核全部通过
        </div>
        <div
          class="btnStys"
          @click="getChangeStatus(2)"
          v-if="userData.allStatus === 0"
        >
          待审核全部作弊
        </div>
      </div>
    </div>
    <div style="flex: 1; flex-shrink: 0; overflow: auto">
      <el-table
        :default-expand-all="defaultExpand"
        v-for="asrt in computedList(listLabel)"
        border
        v-loading="loading"
        :key="asrt.value"
        :data="
          listData[
            asrt.value === 0
              ? 'tableData1'
              : asrt.value === 1
              ? 'tableData2'
              : asrt.value === 2
              ? 'tableData3'
              : ''
          ]
        "
        style="width: 100%"
        :header-cell-style="
          asrt.value === 0
            ? {
                'background-color': 'skyblue',
                padding: '8px',
                color: '#333',
              }
            : asrt.value === 1
            ? {
                'background-color': 'rgb(255,255,204)',
                padding: '8px',
                color: '#333',
              }
            : asrt.value === 2
            ? {
                'background-color': '#eee',
                padding: '8px',
                color: '#333',
              }
            : ''
        "
      >
        <!-- 插槽开始--------------------------------------------------------- -->
        <el-table-column
          :label="
            asrt.value === 0
              ? '模块'
              : asrt.value === 1
              ? '章'
              : asrt.value === 2
              ? '节/卷'
              : ''
          "
          type="expand"
          width="70px"
        >
          <template slot-scope="scope">
            <!-- type为3时使用该插槽START -->
            <div
              v-if="scope.row.type === 3 || scope.row.type === 4"
              class="dis_flexs"
            >
              <ul
                style="flex: 1"
                v-if="
                  scope.row.userStudyRecordPhotoList &&
                  scope.row.userStudyRecordPhotoList.length
                "
              >
                <li
                  v-for="(its, inds) in scope.row.userStudyRecordPhotoList"
                  :key="inds"
                  class="liImgs"
                >
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="$methodsTools.splitImgHost(its.photo)"
                    :preview-src-list="[$methodsTools.splitImgHost(its.photo)]"
                  >
                  </el-image>
                  <div class="abos">
                    {{ $methodsTools.onlyForma(its.createTime) }}
                  </div>
                </li>
                <div style="clear: both"></div>
              </ul>
              <p v-else style="text-align: center; width: 100%">暂无拍照数据</p>
              <div
                class="styFlex"
                v-if="
                  (userData.allStatus === 0 || userData.allStatus === 1) &&
                  scope.row.periodStatus === 1
                "
              >
                <el-button
                  :disabled="scope.row.status === 1"
                  class="btnstyles"
                  size="mini"
                  @click="changeStatus(scope.row, 1, scope.$index)"
                  >通过</el-button
                >
                <el-button
                  :disabled="scope.row.status === 0"
                  class="btnstyles"
                  size="mini"
                  @click="
                    scope.row.status === 2 || scope.row.status === 3
                      ? changeStatus(scope.row, 2, scope.$index)
                      : ''
                  "
                  >作弊</el-button
                >
              </div>
              <!-- <div
                class="styFlex"
                v-if="
                  (scope.row.allStatus === 0 || scope.row.allStatus === 1) &&
                  scope.row.periodStatus === 1 &&
                  scope.row.status === 0
                "
              >
                <el-button
                  class="btnstyles"
                  size="mini"
                  @click="changeStatus(scope.row, 1, scope.$index)"
                  >通过</el-button
                >
              </div> -->
            </div>
            <!-- type为3时使用该插槽END -->
            <!-- 章表格START -->
            <el-table
              v-else
              border
              :data="
                scope.row.type === 1
                  ? scope.row.classPeriods
                  : scope.row.type === 2
                  ? scope.row.classPeriodSectionList
                  : ''
              "
              style="width: 98%; margin-left: 2%"
              :default-expand-all="defaultExpand"
              :header-cell-style="
                scope.row.type === 1
                  ? {
                      'background-color': 'rgb(255,255,204)',
                      padding: '8px',
                      color: '#333',
                    }
                  : scope.row.type === 2
                  ? {
                      'background-color': '#eee',
                      padding: '8px',
                      color: '#333',
                    }
                  : ''
              "
            >
              <!-- 章插槽START -->
              <el-table-column
                type="expand"
                :label="
                  scope.row.type === 1
                    ? '章'
                    : scope.row.type === 2
                    ? '节/卷'
                    : ''
                "
                :width="
                  scope.row.type === 1
                    ? '70px'
                    : scope.row.type === 2
                    ? '80px'
                    : ''
                "
              >
                <template slot-scope="scope2">
                  <!-- 节插槽START -->
                  <div
                    v-if="scope2.row.type === 3 || scope2.row.type === 4"
                    class="dis_flexs"
                  >
                    <ul
                      style="flex: 1"
                      v-if="
                        scope2.row.userStudyRecordPhotoList &&
                        scope2.row.userStudyRecordPhotoList.length
                      "
                    >
                      <li
                        v-for="(its, inds) in scope2.row
                          .userStudyRecordPhotoList"
                        :key="inds"
                        class="liImgs"
                      >
                        <el-image
                          style="width: 100%; height: 100%"
                          :src="$methodsTools.splitImgHost(its.photo)"
                          :preview-src-list="[
                            $methodsTools.splitImgHost(its.photo),
                          ]"
                        >
                        </el-image>
                        <div class="abos">
                          {{ $methodsTools.onlyForma(its.createTime) }}
                        </div>
                      </li>
                      <div style="clear: both"></div>
                    </ul>
                    <p v-else style="text-align: center; width: 100%">
                      暂无拍照数据
                    </p>
                    <div
                      class="styFlex"
                      v-if="
                        (userData.allStatus === 0 ||
                          userData.allStatus === 1) &&
                        scope2.row.periodStatus === 1
                      "
                    >
                      <el-button
                        :disabled="scope2.row.status === 1"
                        class="btnstyles"
                        size="mini"
                        @click="
                          changeStatusCharpter(
                            scope2.row,
                            1,
                            scope.$index,
                            scope2.$index
                          )
                        "
                        >通过</el-button
                      >
                      <el-button
                        :disabled="scope2.row.status === 0"
                        class="btnstyles"
                        size="mini"
                        @click="
                          scope2.row.status === 2 || scope2.row.status === 3
                            ? changeStatusCharpter(
                                scope2.row,
                                2,
                                scope.$index,
                                scope2.$index
                              )
                            : ''
                        "
                        >作弊</el-button
                      >
                    </div>
                    <!-- <div
                      class="styFlex"
                      v-if="
                        (scope2.row.allStatus === 0 ||
                          scope2.row.allStatus === 1) &&
                        scope2.row.periodStatus === 1 &&
                        scope2.row.status === 0
                      "
                    >
                      <el-button
                        class="btnstyles"
                        size="mini"
                        @click="
                          changeStatusCharpter(
                            scope2.row,
                            1,
                            scope.$index,
                            scope2.$index
                          )
                        "
                        >通过</el-button
                      >
                    </div> -->
                  </div>
                  <!-- 节插槽END -->
                  <!-- 节表格START -->
                  <el-table
                    v-else
                    border
                    :data="
                      scope2.row.type === 2
                        ? scope2.row.classPeriodSectionList
                        : ''
                    "
                    style="width: 98%; margin-left: 2%"
                    :default-expand-all="defaultExpand"
                    :header-cell-style="
                      scope2.row.type === 2
                        ? {
                            'background-color': '#eee',
                            padding: '8px',
                            color: '#333',
                          }
                        : ''
                    "
                  >
                    <!-- 节插槽START -->
                    <el-table-column
                      type="expand"
                      :label="scope2.row.type === 2 ? '节/卷' : ''"
                      width="80px"
                    >
                      <template slot-scope="scope3">
                        <div
                          v-if="scope3.row.type === 3 || scope3.row.type === 4"
                          class="dis_flexs"
                        >
                          <ul
                            style="flex: 1"
                            v-if="
                              scope3.row.userStudyRecordPhotoList &&
                              scope3.row.userStudyRecordPhotoList.length
                            "
                          >
                            <li
                              v-for="(its, inds) in scope3.row
                                .userStudyRecordPhotoList"
                              :key="inds"
                              class="liImgs"
                            >
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="$methodsTools.splitImgHost(its.photo)"
                                :preview-src-list="[
                                  $methodsTools.splitImgHost(its.photo),
                                ]"
                              >
                              </el-image>
                              <div class="abos">
                                {{ $methodsTools.onlyForma(its.createTime) }}
                              </div>
                            </li>
                            <div style="clear: both"></div>
                          </ul>
                          <p v-else style="text-align: center; width: 100%">
                            暂无拍照数据
                          </p>
                          <div
                            class="styFlex"
                            v-if="
                              (userData.allStatus === 0 ||
                                userData.allStatus === 1) &&
                              scope3.row.periodStatus === 1
                            "
                          >
                            <el-button
                              :disabled="scope3.row.status === 1"
                              class="btnstyles"
                              size="mini"
                              @click="
                                changeStatusModule(
                                  scope3.row,
                                  1,
                                  scope.$index,
                                  scope2.$index,
                                  scope3.$index
                                )
                              "
                              >通过</el-button
                            >
                            <el-button
                              :disabled="scope3.row.status === 0"
                              class="btnstyles"
                              size="mini"
                              @click="
                                scope3.row.status === 2 ||
                                scope3.row.status === 3
                                  ? changeStatusModule(
                                      scope3.row,
                                      2,
                                      scope.$index,
                                      scope2.$index,
                                      scope3.$index
                                    )
                                  : ''
                              "
                              >作弊</el-button
                            >
                          </div>
                          <!-- <div
                            class="styFlex"
                            v-if="
                              (scope3.row.allStatus === 0 ||
                                scope3.row.allStatus === 1) &&
                              scope3.row.periodStatus === 1 &&
                              scope3.row.status === 0
                            "
                          >
                            <el-button
                              class="btnstyles"
                              size="mini"
                              @click="
                                changeStatusModule(
                                  scope3.row,
                                  1,
                                  scope.$index,
                                  scope2.$index,
                                  scope3.$index
                                )
                              "
                              >通过</el-button
                            >
                          </div> -->
                        </div>
                      </template>
                    </el-table-column>
                    <!-- 节插槽END -->
                    <el-table-column
                      v-for="(item, index) in scope2.row.type === 2
                        ? tableSet3
                        : ''"
                      :width="item.width"
                      :key="index"
                      :label="item.label"
                      align="center"
                    >
                      <template slot-scope="scope3">
                        <span v-if="item.scope === 'select'">
                          <span v-for="(k, ds) in item.options" :key="ds">
                            {{
                              k.value == scope3.row[item.prop] ? k.label : ""
                            }}
                          </span>
                        </span>
                        <div v-else-if="item.scope === 'activeNum'">
                          <el-select
                            v-model="scope3.row[item.prop]"
                            placeholder="请选择"
                            @change="
                              getNewListMores(
                                scope.$index,
                                scope2.$index,
                                scope3.$index,
                                $event,
                                scope3.row
                              )
                            "
                          >
                            <el-option
                              v-for="(items, indexs) in scope3.row['numList']"
                              :key="indexs"
                              :label="'第' + items + '次审核记录'"
                              :value="items"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <span v-else-if="item.scope === 'typeOptions'">
                          <span v-for="(is, ds) in item.options" :key="ds">
                            <span v-if="is.value === scope3.row[item.prop]">{{
                              is.label
                            }}</span>
                          </span>
                        </span>
                        <span v-else-if="item.scope === 'aTime'">
                          {{ $methodsTools.onlyForma(scope3.row[item.prop]) }}
                        </span>
                        <span v-else-if="item.scope === 'durTime'">
                          {{
                            $methodsTools.secondToDate(
                              scope3.row[item.prop],
                              false
                            )
                          }}
                        </span>
                        <div v-else-if="item.scope === 'aTimeSE'">
                          <span
                            v-if="
                              scope3.row['type'] === 3 &&
                              scope3.row['durationTime'] &&
                              scope3.row['studyStartTime'] &&
                              scope3.row['studyEndTime']
                            "
                            :style="comput(scope3.row)"
                          >
                            {{ $methodsTools.onlyForma(scope3.row[item.prop]) }}
                          </span>
                          <span v-else>
                            {{ $methodsTools.onlyForma(scope3.row[item.prop]) }}
                          </span>
                        </div>
                        <span v-else> {{ scope3.row[item.prop] }} </span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 节表格END -->
                </template>
              </el-table-column>
              <!-- 章插槽END -->
              <el-table-column
                v-for="(item, index) in scope.row.type === 1
                  ? tableSet2
                  : scope.row.type === 2
                  ? tableSet3
                  : ''"
                :width="item.width"
                :key="index"
                :label="item.label"
                align="center"
              >
                <template slot-scope="scope2">
                  <span v-if="item.scope === 'select'">
                    <span v-for="(k, ds) in item.options" :key="ds">
                      {{ k.value == scope2.row[item.prop] ? k.label : "" }}
                    </span>
                  </span>
                  <div v-else-if="item.scope === 'activeNum'">
                    <el-select
                      v-model="scope2.row[item.prop]"
                      placeholder="请选择"
                      @change="
                        getNewListchapt(
                          scope.$index,
                          scope2.$index,
                          $event,
                          scope2.row
                        )
                      "
                    >
                      <el-option
                        v-for="(items, indexs) in scope2.row['numList']"
                        :key="indexs"
                        :label="'第' + items + '次审核记录'"
                        :value="items"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <span v-else-if="item.scope === 'typeOptions'">
                    <span v-for="(is, ds) in item.options" :key="ds">
                      <span v-if="is.value === scope2.row[item.prop]">{{
                        is.label
                      }}</span>
                    </span>
                  </span>
                  <span v-else-if="item.scope === 'aTime'">
                    {{ $methodsTools.onlyForma(scope2.row[item.prop]) }}
                  </span>
                  <span v-else-if="item.scope === 'durTime'">
                    {{
                      $methodsTools.secondToDate(scope2.row[item.prop], false)
                    }}
                  </span>
                  <div v-else-if="item.scope === 'aTimeSE'">
                    <span
                      v-if="
                        scope2.row['type'] === 3 &&
                        scope2.row['durationTime'] &&
                        scope2.row['studyStartTime'] &&
                        scope2.row['studyEndTime']
                      "
                      :style="comput(scope2.row)"
                    >
                      {{ $methodsTools.onlyForma(scope2.row[item.prop]) }}
                    </span>
                    <span v-else>
                      {{ $methodsTools.onlyForma(scope2.row[item.prop]) }}
                    </span>
                  </div>
                  <span v-else> {{ scope2.row[item.prop] }} </span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 章表格END -->
          </template>
        </el-table-column>
        <!-- 插槽结束--------------------------------------------------------- -->

        <el-table-column
          v-for="(item, index) in asrt.value === 0
            ? tableSet1
            : asrt.value === 1
            ? tableSet2
            : asrt.value === 2
            ? tableSet3
            : ''"
          :width="item.width"
          :key="index"
          :label="item.label"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="item.scope === 'select'">
              <span v-for="(k, ds) in item.options" :key="ds">
                {{ k.value == scope.row[item.prop] ? k.label : "" }}
              </span>
            </span>
            <div v-else-if="item.scope === 'activeNum'">
              <el-select
                v-model="scope.row[item.prop]"
                placeholder="请选择"
                @change="getNewList(scope.$index, $event, scope.row)"
              >
                <el-option
                  v-for="(items, indexs) in scope.row['numList']"
                  :key="indexs"
                  :label="'第' + items + '次审核记录'"
                  :value="items"
                >
                </el-option>
              </el-select>
            </div>
            <span v-else-if="item.scope === 'typeOptions'">
              <span v-for="(is, ds) in item.options" :key="ds">
                <span v-if="is.value === scope.row[item.prop]">{{
                  is.label
                }}</span>
              </span>
            </span>
            <span v-else-if="item.scope === 'aTime'">
              {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
            </span>
            <span v-else-if="item.scope === 'durTime'">
              {{ $methodsTools.secondToDate(scope.row[item.prop], false) }}
            </span>
            <div v-else-if="item.scope === 'aTimeSE'">
              <span
                v-if="
                  scope.row['type'] === 3 &&
                  scope.row['durationTime'] &&
                  scope.row['studyStartTime'] &&
                  scope.row['studyEndTime']
                "
                :style="comput(scope.row)"
              >
                {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
              </span>
              <span v-else>
                {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
              </span>
            </div>
            <span v-else>
              {{ scope.row[item.prop] }}{{ item.ch ? item.ch : "" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultExpand: true,
      size: "medium",
      active: "",
      loading: false,
      studentCode: "",
      realName: "",
      idCard: "",
      telPhone: "",
      recent_photos: "",
      idcard_face_photo: "",
      idcard_national_photo: "",
      listLabel: [
        {
          label: "模块卷",
          value: 0,
        },
        {
          label: "章卷",
          value: 1,
        },
        {
          label: "节",
          value: 2,
        },
      ],
      arr: ["tableData1", "tableData2", "tableData3"],
      listData: {
        tableData1: [],
        tableData2: [],
        tableData3: [],
      },
      userData: {},
      tableData: [],
      tableSet1: [
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "模块标题",
          prop: "typeName",
        },
        {
          label: "学时",
          prop: "classHours",
        },
      ],
      tableSet2: [
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "章标题",
          prop: "typeName",
        },
        {
          label: "学时",
          prop: "classHours",
        },
        {
          label: "开始学习时间",
          prop: "studyStartTime",
          scope: "aTime",
        },
        {
          label: "结束学习时间",
          prop: "studyEndTime",
          scope: "aTime",
        },
        {
          label: "测试成绩",
          prop: "performance",
        },
      ],
      tableSet3: [
        {
          label: "选择",
          prop: "numIndex",
          scope: "activeNum",
          width: "180px",
        },
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "标题",
          prop: "typeName",
        },
        {
          label: "类型",
          prop: "type",
          scope: "typeOptions",
          options: [
            {
              label: "节",
              value: 3,
            },
            {
              label: "试卷",
              value: 4,
            },
          ],
        },
        {
          label: "节时长",
          prop: "durationTime",
          width: "180px",
          scope: "durTime",
        },
        {
          label: "开始时间",
          prop: "studyStartTime",
          scope: "aTimeSE",
        },
        {
          label: "结束时间",
          prop: "studyEndTime",
          scope: "aTimeSE",
        },
        {
          label: "审核状态",
          prop: "status",
          scope: "select",
          options: [
            {
              label: "待审核",
              value: 2,
            },
            {
              label: "通过",
              value: 1,
            },
            {
              label: "作弊",
              value: 0,
            },
          ],
        },
        {
          label: "审核人",
          prop: "auditUserName",
        },
        {
          label: "审核时间",
          prop: "auditTime",
          scope: "aTime",
        },
      ],
      tableDataChild: {},
      tableSetChild: [],
    };
  },
  computed: {
    computedList: function () {
      return function (value) {
        var arr = value.filter((item) => {
          if (item.value === 0) {
            if (this.listData.tableData1.length) {
              return item;
            }
          }
          if (item.value === 1) {
            if (this.listData.tableData2.length) {
              return item;
            }
          }
          if (item.value === 2) {
            if (this.listData.tableData3.length) {
              return item;
            }
          }
        });
        return arr;
      };
    },
  },
  mounted() {
    this.getUserInfo();
    this.search();
  },
  methods: {
    comput(item) {
      var ast = item.studyEndTime - item.studyStartTime;
      if (ast < item.durationTime) {
        return "color:red;";
      } else {
        return "";
      }
    },
    /**
     * 通过 作弊 periodId
     */
    changeStatus(item, int, index) {
      var data = {
        id: item.periodStatusId,
      };
      if (int === 1) {
        data.status = 1;
      }
      if (int === 2) {
        data.status = 0;
      }
      this.$api.editGradeUsereditPeriode(data).then((res) => {
        this.$message.success("修改成功");
        this.getNewList(index, item.numIndex, item);
      });
    },
    changeStatusCharpter(item, int, index1, index2) {
      var data = {
        id: item.periodStatusId,
      };
      if (int === 1) {
        data.status = 1;
      }
      if (int === 2) {
        data.status = 0;
      }
      this.$api.editGradeUsereditPeriode(data).then((res) => {
        this.$message.success("修改成功");
        this.getNewListchapt(index1, index2, item.numIndex, item);
      });
    },
    changeStatusModule(item, int, index1, index2, index3) {
      var data = {
        id: item.periodStatusId,
      };
      if (int === 1) {
        data.status = 1;
      }
      if (int === 2) {
        data.status = 0;
      }
      this.$api.editGradeUsereditPeriode(data).then((res) => {
        this.$message.success("修改成功");
        this.getNewListMores(index1, index2, index3, item.numIndex, item);
      });
    },
    //批量审批
    getChangeStatus(int) {
      var data = {
        gradeId: Number(this.$route.query.id),
        userId: Number(this.$route.query.userId),
        goodsId: Number(this.$route.query.goodsId),
      };
      if (int === 1) {
        data.status = 1;
      }
      if (int === 2) {
        data.status = 0;
      }
      this.$api.editGradeUsereditPeriodeAll(data).then((res) => {
        if (int === 1) {
          this.$message.success("状态全部通过修改成功");
        }
        if (int === 2) {
          this.$message.success("状态全部作弊修改成功");
        }
        this.getUserInfo();
        this.search();
      });
    },
    //节
    getNewList(index, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.$route.query.userId,
        goodsId: this.$route.query.goodsId,
        gradeId: this.$route.query.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(this.listData.tableData3, index, res.data);
        this.getUserInfo();
      });
    },
    //章 节
    getNewListchapt(a, b, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.$route.query.userId,
        goodsId: this.$route.query.goodsId,
        gradeId: this.$route.query.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(
          this.listData.tableData2[a].classPeriodSectionList,
          b,
          res.data
        );
        this.getUserInfo();
      });
    },
    //模块 章 节
    getNewListMores(a, b, c, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.$route.query.userId,
        goodsId: this.$route.query.goodsId,
        gradeId: this.$route.query.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(
          this.listData.tableData1[a].classPeriods[b].classPeriodSectionList,
          c,
          res.data
        );
        this.getUserInfo();
      });
    },
    //获取用户信息
    getUserInfo() {
      this.$api
        .inquireGradegradelistUserlistPeriod({
          gradeId: this.$route.query.id,
          userId: this.$route.query.userId,
          goodsId: this.$route.query.goodsId,
        })
        .then((res) => {
          if (res.rows[0].keyValue) {
            var data = JSON.parse(res.rows[0].keyValue);
            this.recent_photos = data.recent_photos.value;
            this.idcard_face_photo = data.idcard_face_photo.value;
            this.idcard_national_photo = data.idcard_national_photo.value;
            this.realName = data.name.value;
            this.idCard = data.idcard.value;
            this.telPhone = data.telphone.value;
          }
          this.userData = res.rows[0];
        });
    },
    search() {
      let data = {
        gradeId: this.$route.query.id,
        userId: this.$route.query.userId,
        goodsId: this.$route.query.goodsId,
      };
      this.loading = true;
      this.$api
        .inquireGradegradelistPeriodAudit(data)
        .then((res) => {
          let tab1 = [];
          let tab2 = [];
          let tab3 = [];
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].type === 1) {
              tab1.push(res.rows[i]);
            }
            if (res.rows[i].type === 2) {
              tab2.push(res.rows[i]);
            }
            if (res.rows[i].type === 3) {
              tab3.push(res.rows[i]);
            }
          }
          this.listData.tableData1 = tab1;
          this.listData.tableData2 = tab2;
          this.listData.tableData3 = tab3;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
#classHoursReview {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 126px);
}
.styFlex {
  width: 80px;
  text-align: center;
}
.btnstyles {
  margin-left: 0px;
  margin-bottom: 10px;
}
.dis_flexs {
  display: flex;
  align-items: center;
}
.dis_fs {
  display: flex;
  align-items: center;
  height: 211px;
  background-color: #eee;
  padding: 0px 30px;
  overflow: auto;
  .ul_ls {
    margin-right: 30px;
    align-self: flex-start;
    li {
      font-size: 14px;
      white-space: nowrap;
      margin-bottom: 14px;
    }
  }
  &::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }

  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
  }

  &::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}
.photoSty1 {
  flex-shrink: 0;
  width: 150px;
  height: 160px;
  background-color: #fff;
  margin-right: 60px;
  position: relative;
}
.photoSty2 {
  position: relative;
  flex-shrink: 0;
  width: 230px;
  height: 160px;
  margin-right: 60px;
  background-color: #fff;
}
.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;
}
.dis_fls {
  height: 65px;
  margin: 16px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .s_sd {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 10px;
    .dis_colu {
      height: 55px;
      margin-right: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 14px;
    }
  }
}
.jdNumSty {
  border: 1px solid #000;
  border-radius: 6px;
  padding: 6px;
}
.shbtns {
  padding: 0px 10px;
  height: 55px;
  line-height: 55px;
  background-color: #eee;
  border-radius: 6px;
}
.btnStys {
  border: 1px solid #666;
  padding: 0px 8px;
  border-radius: 4px;
  font-size: 15px;
  margin-right: 8px;
  cursor: pointer;
}
.liImgs {
  float: left;
  width: 250px;
  height: 250px;
  margin-right: 20px;
  margin-bottom: 20px;
  position: relative;
  .abos {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #000;
    text-align: center;
    background-color: rgba(90, 90, 90, 0.7);
  }
}
</style>