saas_entrepot_admin/src/views/education/classManageMent/classHoursReview/component/StudyTables.vue

<template>
  <div class="studyRecordTable">
    <div class="studyStyle">
      <div class="a_style">
        <i></i>
        <span>视频审核进度</span>
        <div class="flex_style_study">
          <div class="num_style" style="color: #0047d0">
            待审：{{ userData.pending }}节
          </div>
          <div class="num_style" style="color: #e53935">
            作弊：{{ userData.cheat }}节
          </div>
          <div class="num_style" style="color: #43a047">
            通过：{{ userData.pass }}节
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="a_style">
        <i></i>
        <span>做题审核进度</span>
        <div class="flex_style_study">
          <div class="num_style" style="color: #0047d0">
            待审：{{ userData.examPending }}节
          </div>
          <div class="num_style" style="color: #e53935">
            作弊：{{ userData.examCheat }}节
          </div>
          <div class="num_style" style="color: #43a047">
            通过：{{ userData.examPass }}节
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="a_style" style="width: 280px">
        <i></i>
        <span>学时审批状态</span>
        <div class="flex_style_study">
          <div class="num_style" style="color: #0047d0">
            {{
              ["不可审核", "未通过", "通过审核", "待审核", "审核中"][
                userData.periodStatus + 1
              ]
            }}
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="s_sd">
        <span v-if="userData.periodStatus !== 3">
          <el-checkbox
            v-if="userData.periodStatus === 2"
            :disabled="!allIds.length"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >待审全选</el-checkbox
          >
          <el-button
            style="margin-left: 10px"
            size="mini"
            type="success"
            v-if="userData.periodStatus === 2"
            @click="getChangeStatus(1)"
            >勾选通过</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-if="userData.periodStatus === 2"
            @click="getChangeStatus(2)"
            >勾选作弊</el-button
          >
        </span>
        <span v-else>
          <el-button style="margin-left: 10px" size="mini" @click="checkBack"
            >勾选数据，打回待审核状态</el-button
          >
          <el-button size="mini" type="warning" @click="approvedOK = true"
            >确认审核通过结果</el-button
          >
        </span>
      </div>
    </div>
    <div class="tablesBoxs">
      <el-checkbox-group
        v-model="checkList"
        @change="handleCheckedCitiesChange"
      >
        <component
          :is="keys[key]"
          v-for="key in Object.keys(tablesData)"
          :key="key"
          :tabledata="tablesData[key]"
          :lable="key == 5 ? '卷' : '章'"
        ></component>
      </el-checkbox-group>
    </div>
    <Cheat-dialog
      :disabledBtn="disabledBtn"
      :vidBoxHours.sync="vidBoxHours"
      @close="loadingClose"
      @submit="
        (reason) => {
          submitOK(2, reason);
        }
      "
    ></Cheat-dialog>
    <Base-dialog
      title="操作提示："
      :disabledBtn="disabledBtn"
      :isShow.sync="through"
      @close="loadingClose"
      @submit="
        () => {
          submitOK(1);
        }
      "
    >
      <div>
        确定所勾选的内容，审核结果为【通过】？<br />
        确认后，初审不可再修改，请检查清楚再操作！
      </div>
    </Base-dialog>
    <Base-dialog
      title="操作提示："
      :disabledBtn="disabledBtn"
      :isShow.sync="popback"
      @close="loadingClose"
      @submit="uploadForm"
    >
      <div>
        <div style="color: red">
          <h4 style="margin: 0px">当前勾选了{{ checkList.length }}条数据：</h4>
          <ul style="margin: 0px 0px 6px; max-height: 500px; overflow: auto">
            <li v-for="(item, index) in checkList" :key="index">
              {{ index + 1 }}.{{ getSecName(item) }}
            </li>
          </ul>
        </div>
        <div style="text-align: center; font-weight: bold">
          所选数据，确定要打回待审核状态吗？<br />
          打回后，重新走审核流程，请慎重操作。
        </div>
      </div>
    </Base-dialog>
    <Base-dialog
      title="操作提示："
      :disabledBtn="disabledBtn"
      :isShow.sync="approvedOK"
      @close="loadingClose"
      @submit="approvedOKFunc"
    >
      <div>
        <div style="color: red">
          <h4 style="margin: 0px">确认审核通过结果后：</h4>
          <ul style="margin: 0px 0px 6px">
            <li>
              （1）有做官方接口的，自动触发【学时官方推送】<br />
              （2）公开【学习学时记录-学时记录】按钮，权限人可查看【审核结果】<br />
              （3）有匹配的预约考试，可走预约流程
            </li>
          </ul>
        </div>
        <div style="font-weight: bold; margin-top: 20px">
          确认提交审核通过结果？<br />
          确认后，不能再修改，请慎重操作。
        </div>
      </div>
    </Base-dialog>
  </div>
</template>

<script>
import ModulTable from "./ModulTable.vue";
import ChapterTable from "./ChapterTable.vue";
import LessonTable from "./LessonTable.vue";
import CheatDialog from "./CheatDialog.vue";
export default {
  props: {
    tablesData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    userData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    setData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    getUserInfo: {
      type: Function,
      default: () => {},
    },
  },
  provide() {
    return {
      userData: this.userData,
      getUserInfo: this.getUserInfo,
    };
  },
  data() {
    return {
      checkList: [],
      allIds: [],
      checkAll: false,
      isIndeterminate: false,
      vidBoxHours: false,
      through: false,
      popback: false,
      approvedOK: false,
      disabledBtn: false,
      formData: {
        cheating_reason: "",
      },
      statusPop: "", //1单个2批量
      rules: {
        cheating_reason: [
          {
            required: true,
            message: "请填写作弊原因",
            trigger: ["blur", "change"],
          },
        ],
      },
      msgTitle: [
        { label: "学习拍照异常", value: 1 },
        {
          label: "学习拍照太黑无法识别人像，请确保拍照光线充足并拍到全脸",
          value: 2,
        },
        {
          label: "学习拍照太模糊无法识别人像，请确保拍照光线充足并拍到全脸",
          value: 3,
        },
        {
          label: "学习拍照人像不全无法识别，请确保拍照光线充足并拍到全脸",
          value: 4,
        },
      ],
      allType3List: [],
    };
  },
  methods: {
    submitAllSlect(reason) {
      this.submitOK(2, reason);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      if (checkedCount) {
        this.checkAll = checkedCount === this.allIds.length;
      } else {
        this.checkAll = false;
      }
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.allIds.length;
    },
    handleCheckAllChange(val) {
      this.checkList = val ? this.allIds : [];
      this.isIndeterminate = false;
    },
    getAllId(data) {
      if (!data || !data.length) {
        return;
      }
      data.forEach((ele) => {
        if (ele.type == 3 || ele.type == 4) {
          this.allType3List.push(ele);
          ele.status === 2 && this.allIds.push(ele.periodStatusId);
        } else {
          this.getAllId(
            ele.type == 1 ? ele.classPeriods : ele.classPeriodSectionList
          );
        }
      });
    },
    getChangeStatus(int) {
      if (!this.checkList.length) {
        this.$message.warning("请勾选需要操作的待审核数据");
        return;
      }
      var data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
      };
      if (int === 1) {
        data.status = 1;
        this.through = true;
      }
      if (int === 2) {
        data.status = 0;
        this.statusPop = 2;
        this.formData.cheating_reason = "";
        this.vidBoxHours = true;
      }
    },
    loadingClose() {
      this.disabledBtn = false;
    },
    submitOK(int, msg) {
      this.disabledBtn = true;
      var data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
        ids: this.checkList,
      };
      if (int === 1) {
        data.status = 1;
      }
      if (int === 2) {
        data.auditReason = msg;
        data.status = 0;
      }
      this.$api
        .editGradeUsereditPeriodeAll(data)
        .then((res) => {
          if (int === 1) {
            this.$message.success("状态全部通过修改成功");
            this.through = false;
          }
          if (int === 2) {
            this.$message.success("状态全部作弊修改成功");
            this.vidBoxHours = false;
          }
          this.checkList = [];
          this.isIndeterminate = false;
          this.checkAll = false;
          this.getUserInfo(true);
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    getSecName(id) {
      try {
        return this.allType3List.find((e) => e.periodStatusId == id).typeName;
      } catch (error) {
        return "";
      }
    },
    uploadText(msg) {
      this.formData.cheating_reason = msg;
    },
    checkBack() {
      if (!this.checkList.length) {
        this.$message.warning("请勾选数据");
        return;
      }
      this.popback = true;
    },
    // 打回审核状态
    uploadForm() {
      this.disabledBtn = true;
      let data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
        ids: this.checkList,
      };
      this.$api
        .editGradeUsereditrollbackPeriod(data)
        .then((res) => {
          this.checkList = []; //勾选列表
          this.isIndeterminate = false; //待审半选
          this.checkAll = false; //全选状态
          this.getUserInfo(true);
          this.$message.success("已打回待审核状态");
          this.popback = false;
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    // 确认审核结果
    approvedOKFunc() {
      this.disabledBtn = true;
      let data = {
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
      };
      this.$api
        .editGradeUsereditrollconfirmPeriod(data)
        .then((res) => {
          this.getUserInfo(true);
          this.$message.success("审核通过");
          this.approvedOK = false;
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    setBomHeight() {
      let box = document.querySelector(".tablesBoxs");
      box.style.height = window.innerHeight - box.offsetTop - 190 + "px";
    },
  },
  mounted() {
    window.onresize = function () {
      this.setBomHeight();
    };
  },
  created() {
    this.keys = {
      1: "ModulTable",
      2: "ChapterTable",
      3: "LessonTable",
      5: "ChapterTable",
    };
    this.$nextTick(() => {
      this.setBomHeight();
    });
  },
  components: { ModulTable, LessonTable, ChapterTable, CheatDialog },
  watch: {
    tablesData: {
      handler() {
        for (const key in this.tablesData) {
          this.getAllId(this.tablesData[key]);
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.studyRecordTable {
  .studyStyle {
    top: 100px;
    margin: 16px 0px 0px;
    display: flex;
    align-items: center;
    & > .a_style {
      display: flex;
      align-items: center;
      margin: 0px 16px 16px 0px;
      padding: 11px 16px;
      box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
      border-radius: 4px;
      height: 40px;
      width: 440px;
      user-select: none;
      i {
        width: 2px;
        height: 18px;
        display: inline-block;
        background-color: #0047d0;
        margin-right: 8px;
      }
      span {
        color: #666;
        font-weight: bold;
      }
      .flex_style_study {
        flex: 1;
      }
      .num_style {
        float: right;
        font-size: 14px;
        margin-left: 14px;
      }
    }
    .s_sd {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin: 0px 16px 16px 0px;
      .dis_colu {
        height: 55px;
        margin-right: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 14px;
      }
    }
  }
  .tablesBoxs {
    overflow-x: auto;
  }
}
</style>