saas_entrepot_admin/src/views/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 class="liImgs">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="$methodsTools.splitImgHost(getUserImg)"
                  :preview-src-list="[$methodsTools.splitImgHost(getUserImg)]"
                >
                </el-image>
                <div class="abos">一寸头像图</div>
              </li>
              <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 &&
                !dontControls
              "
            >
              <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 setSableSet(dontControls)"
        :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 === 'durationTime' && scope2.row.type !== 5"
          >
            {{ (scope2.row[item.prop] / 60 / 45).toFixed(2) }}
          </span>
          <span v-else-if="item.scope === 'durTime' && scope2.row.type !== 5">
            <span v-if="scope2.row['type'] == 3">
              {{ (scope2.row[item.prop] / 60).toFixed(0) + "分钟" || "0分钟0" }}
              {{ scope2.row[item.prop] % 60 || 0 }}秒
            </span>
            <span v-else>
              {{ "分数：" + scope2.row["performance"] }}
            </span>
          </span>
          <span
            v-else-if="
              item.scope === 'performance' &&
              (scope2.row.type === 4 || scope2.row.type === 5)
            "
          >
            {{ scope2.row[item.prop] }}
          </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>
                  上次时间：{{
                    $methodsTools.secondToDate(
                      scope2.row["preEndTime"] - scope2.row["preStartTime"]
                    )
                  }}
                </div>
                <div>
                  重学时间：{{
                    $methodsTools.secondToDate(
                      scope2.row[item.prop2] - scope2.row[item.prop1]
                    )
                  }}
                </div> -->
                <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>
                <!-- 学习时间：{{
                  $methodsTools.secondToDate(
                    scope2.row[item.prop2] - scope2.row[item.prop1]
                  )
                }} -->
                学习时间：
                {{
                  (
                    (scope2.row[item.prop2] - scope2.row[item.prop1]) /
                    60
                  ).toFixed(0) || 0
                }}分钟{{
                  (scope2.row[item.prop2] - scope2.row[item.prop1]) % 60
                }}秒
              </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: {
    dontControls: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    setData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabledata: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  inject: ["getPeriodStatus", "getUserInfo", "getAllIds", "getUserImgPhoto"],
  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: "durationTime",
        },
        {
          label: "时长",
          prop: "durationTime",
          width: "120px",
          scope: "durTime",
        },
        {
          label: "分数",
          prop: "performance",
          width: "120px",
          scope: "performance",
        },
        {
          label: "学习时间",
          prop1: "studyStartTime",
          prop2: "studyEndTime",
          scope: "aTimeSE",
          width: "420px",
        },
        {
          label: "学习用时",
          prop1: "studyStartTime",
          prop2: "studyEndTime",
          scope: "aTimeSEComputer",
          width: "170px",
        },
        // {
        //   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;
      let status = item.durationTime - ast;
      if (status > 90) {
        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,
        tenantIdReplace: this.setData.tenantId,
      };
      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: {
    setSableSet: function () {
      return function (i) {
        let array = JSON.parse(JSON.stringify(this.tableSet));
        if (i) {
          let ary = [
            {
              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",
            },
          ];
          array = array.concat(ary);
        }
        return array;
      };
    },
    periodStatus() {
      return this.getPeriodStatus();
    },
    getUserImg() {
      return this.getUserImgPhoto();
    },
    allIds() {
      return this.getAllIds();
    },
  },
  components: {
    CheatDialog,
  },
};
</script>

<style lang="less" scoped>
.liImgs {
  float: left;
  width: 168px;
  height: 224px;
  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>