zc_saas_admin/src/views/education/classManageMent/classHoursReview/component/LessonTable.vue

<template>
  <div>
    <el-table
      :default-expand-all="true"
      border
      :data="tabledata"
      style="width: 100%; border-radius: 4px; overflow: hidden"
      :header-cell-style="{
        'background-color': '#F5F5F5',
        padding: '8px',
        color: '#666',
      }"
    >
      <el-table-column label="节/卷" type="expand" width="70px">
        <template slot-scope="scope">
          <div 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="
                (periodStatus === 0 ||
                  periodStatus === 2 ||
                  periodStatus === 3) &&
                scope.row.periodStatus === 1
              "
            >
              <div>
                <el-checkbox
                  class="checkboxList"
                  :label="scope.row.periodStatusId"
                  :disabled="
                    periodStatus === 3
                      ? false
                      : scope.row.status !== 2
                      ? true
                      : false
                  "
                  ><br
                /></el-checkbox>
              </div>
              <el-button
                :disabled="scope.row.status !== 2"
                class="btnstyles"
                size="small"
                type="success"
                :loading="disabledBtn"
                @click="changeStatus(scope.row.periodStatusId, 1)"
                >通过</el-button
              >
              <el-button
                :disabled="scope.row.status !== 2"
                class="btnstyles"
                size="small"
                type="danger"
                @click="changeStatus(scope.row.periodStatusId, 0)"
                >作弊</el-button
              >
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        v-for="(item, index) in tableSet"
        :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"
              :style="
                scope2.row[item.prop] === 0
                  ? 'color:red;'
                  : scope2.row[item.prop] === 2
                  ? 'color:#0047D0;'
                  : scope2.row[item.prop] === 1
                  ? 'color:#67C23A;'
                  : ''
              "
            >
              {{ 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(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' && scope2.row.type !== 5">
            {{ $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>
    <Cheat-dialog
      :vidBoxHours.sync="vidBoxHours"
      @submit="submit"
    ></Cheat-dialog>
  </div>
</template>

<script>
import CheatDialog from "./CheatDialog.vue";
export default {
  props: {
    tabledata: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  inject: ["getPeriodStatus", "getUserInfo", "getAllIds"],
  data() {
    return {
      tableSet: [
        {
          label: "选择",
          prop: "numIndex",
          scope: "activeNum",
          width: "180px",
        },
        {
          label: "姓名",
          prop: "realName",
        },
        {
          label: "标题",
          prop: "typeName",
        },
        {
          label: "类型",
          prop: "type",
          scope: "typeOptions",
          width: "90px",
          options: [
            {
              label: "节",
              value: 3,
            },
            {
              label: "试卷",
              value: 4,
            },
            {
              label: "模块卷",
              value: 5,
            },
          ],
        },
        {
          label: "节时长",
          prop: "durationTime",
          width: "120px",
          scope: "durTime",
        },
        {
          label: "开始时间",
          prop: "studyStartTime",
          scope: "aTimeSE",
        },
        {
          label: "结束时间",
          prop: "studyEndTime",
          scope: "aTimeSE",
        },
        {
          label: "审核状态",
          prop: "status",
          scope: "select",
          width: "100px",
          options: [
            {
              label: "待审核",
              value: 2,
            },
            {
              label: "通过",
              value: 1,
            },
            {
              label: "作弊",
              value: 0,
            },
            {
              label: "待重修",
              value: 3,
            },
          ],
        },
        {
          label: "审核人",
          prop: "auditUserName",
          width: "100px",
        },
        {
          label: "审核时间",
          prop: "auditTime",
          scope: "aTime",
        },
      ],
      disabledBtn: false,
      vidBoxHours: false,
      formData: {
        status: "",
        id: "",
      },
    };
  },
  methods: {
    submit(text) {
      this.formData.auditReason = text;
      this.$api
        .editGradeUsereditPeriode(this.formData)
        .then((res) => {
          this.$message.success("修改成功");
          this.vidBoxHours = false;
          if (this.allIds.length == 1) {
            this.$router.push({
              name: "ListOfhoursToBeReviewed",
            });
          }
          this.getUserInfo(true);
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    loadingClose() {
      this.disabledBtn = false;
    },
    comput(item) {
      var ast = item.studyEndTime - item.studyStartTime;
      if (ast < item.durationTime) {
        return "color:red;";
      } else {
        return "";
      }
    },
    getNewListchapt(index, int, item) {
      let { courseId, moduleId, chapterId, userId, goodsId, gradeId } = item;
      let data = {
        courseId: courseId,
        moduleId,
        chapterId,
        numIndex: int,
        userId,
        goodsId,
        gradeId,
      };
      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.tabledata, index, res.data);
      });
    },
    changeStatus(id, status) {
      this.formData = {
        status,
        id,
      };
      if (status == 0) {
        this.vidBoxHours = true;
      } else {
        this.submit();
      }
    },
  },
  computed: {
    periodStatus() {
      return this.getPeriodStatus();
    },
    allIds() {
      return this.getAllIds();
    },
  },
  components: {
    CheatDialog,
  },
};
</script>

<style  lang="less" scoped>
.liImgs {
  float: left;
  width: 210px;
  height: 280px;
  margin-right: 16px;
  margin-bottom: 16px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  .abos {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background-color: rgba(51, 51, 51, 0.7);
  }
}
.dis_flexs {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  ul {
    margin-bottom: 0px;
  }
}
.styFlex {
  width: 80px;
  text-align: center;
}
.checkboxList {
  margin-bottom: 6px;
  &/deep/.el-checkbox__label {
    display: none;
  }
}
.btnstyles {
  margin-left: 0px;
  margin-bottom: 10px;
}
</style>