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"
            :class="{ exceedStyle: exceed(scope.row.userStudyRecordPhotoList) }"
          >
            <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="
                    returnImgUrl(scope.row.userStudyRecordPhotoList)
                  "
                >
                </el-image>
                <div
                  class="abos"
                  @click="
                    imgChange(
                      scope.row.userStudyRecordPhotoList[inds],
                      'photo',
                      its.photo
                    )
                  "
                >
                  {{ $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}次审核记录${indexs > 0 ? '（重修）' : ''}`"
                :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">
            {{
              scope2.row["type"] == 3
                ? $methodsTools.secondToDate(scope2.row[item.prop], false)
                : "分数：" + scope2.row["performance"]
            }}
          </span>
          <div v-else-if="item.scope === 'aTimeSE'">
            <div
              v-if="
                scope2.row['type'] === 3 &&
                scope2.row['durationTime'] &&
                scope2.row['studyStartTime'] &&
                scope2.row['studyEndTime']
              "
              :style="comput(scope2.row)"
            >
              <div
                v-if="
                  scope2.row['numIndex'] === scope2.row['numList'] &&
                  scope2.row['numIndex'] !== 1
                "
              >
                <div>
                  上次时间：{{
                    $methodsTools.onlyForma(scope2.row["preStartTime"]) +
                    " - " +
                    $methodsTools.onlyForma(scope2.row["preEndTime"])
                  }}
                </div>
                <div>
                  重学时间：{{
                    $methodsTools.onlyForma(scope2.row[item.prop1]) +
                    " - " +
                    $methodsTools.onlyForma(scope2.row[item.prop2])
                  }}
                </div>
              </div>
              <div v-else>
                学习时间：{{
                  $methodsTools.onlyForma(scope2.row[item.prop1]) +
                  " - " +
                  $methodsTools.onlyForma(scope2.row[item.prop2])
                }}
              </div>
              <!-- {{ $methodsTools.onlyForma(scope2.row[item.prop]) }} -->
            </div>
            <div
              v-if="
                (scope2.row['type'] === 4 || scope2.row['type'] === 5) &&
                scope2.row['studyStartTime'] &&
                scope2.row['studyEndTime']
              "
            >
              学习时间：{{
                $methodsTools.onlyForma(scope2.row[item.prop1]) +
                " - " +
                $methodsTools.onlyForma(scope2.row[item.prop2])
              }}
            </div>
          </div>
          <div v-else-if="item.scope === 'aTimeSEComputer'">
            <div
              v-if="
                scope2.row['type'] === 3 &&
                scope2.row['durationTime'] &&
                scope2.row['studyStartTime'] &&
                scope2.row['studyEndTime']
              "
            >
              <div
                v-if="
                  scope2.row['numIndex'] === scope2.row['numList'] &&
                  scope2.row['numIndex'] !== 1
                "
              >
                <div>
                  上次时间：{{
                    (
                      (scope2.row["preEndTime"] - scope2.row["preStartTime"]) /
                      60
                    ).toFixed(0) || 0
                  }}分钟
                </div>
                <div>
                  重学时间：
                  {{
                    (
                      (scope2.row[item.prop2] - scope2.row[item.prop1]) /
                      60
                    ).toFixed(0) || 0
                  }}分钟
                </div>
              </div>
              <div v-else>
                学习时间：
                {{
                  (
                    (scope2.row[item.prop2] - scope2.row[item.prop1]) /
                    60
                  ).toFixed(0) || 0
                }}分钟
              </div>
            </div>
          </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: {
    setData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabledata: {
      type: Array,
      default: () => {
        return [];
      },
    },
    erJianErZao:{
      type:Boolean,
      default:()=>{
        return false
      }
    }
  },
  inject: ["getPeriodStatus", "getUserInfo", "getAllIds"],
  data() {
    return {
      tableSet: [
        {
          label: "选择",
          prop: "numIndex",
          scope: "activeNum",
          width: "210px",
        },
        {
          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: "学习时间",
          prop1: "studyStartTime",
          prop2: "studyEndTime",
          scope: "aTimeSE",
          width: "420px",
        },
        {
          label: "学习用时",
          prop1: "studyStartTime",
          prop2: "studyEndTime",
          scope: "aTimeSEComputer",
          width: "170px",
        },
        {
          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: {
    exceed(list) {
      if (list && list.length > 1 && this.erJianErZao) {
        let status = false;
        for (let i = 0; i < list.length - 1; i++) {
          if (list[i + 1].createTime - list[i].createTime > 1200) {
            status = true;
            break;
          }
        }
        return status;
      } else {
        return false;
      }
    },
    imgChange(list, name, url) {
      return;
      this.$api
        .imgChange({
          imageUrl: url,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$set(list, name, url + `?v=${Math.random()}`);
            this.$message.success("操作成功");
          }
        });
    },
    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;
      let status = item.durationTime - ast;
      if (status > 25) {
        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,
        orderGoodsId: this.setData.orderGoodsId,
      };
      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();
    },
    returnImgUrl: function () {
      return function (ary) {
        return (
          (ary && ary.map((i) => this.$methodsTools.splitImgHost(i.photo))) ||
          []
        );
      };
    },
  },
  components: {
    CheatDialog,
  },
};
</script>

<style lang="less" scoped>
.exceedStyle {
  background-color: rgb(255, 224, 224);
}
.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;
    max-height: 588px;
    overflow: auto;
  }
}
.styFlex {
  width: 80px;
  text-align: center;
}
.checkboxList {
  margin-bottom: 6px;
  &/deep/.el-checkbox__label {
    display: none;
  }
}
.btnstyles {
  margin-left: 0px;
  margin-bottom: 10px;
}
</style>