saas_entrepot_admin/src/views/education/studentManageMent/studentXQ/liveList.vue

<template>
  <div id="studyRecord">
    <el-table
      v-loading="loading"
      height="700"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        'background-color': 'skyblue',
        padding: '8px',
        color: '#333',
      }"
    >
      <el-table-column type="expand" width="40px">
        <template slot-scope="scope">
          <el-table
            border
            :data="scope.row.subjectStudyRecordVos"
            style="width: 100%"
            default-expand-all
            :header-cell-style="{
              'background-color': 'rgb(255,255,204)',
              padding: '8px',
              color: '#333',
            }"
          >
            <el-table-column
              v-for="(item, index) in tableSetChild"
              :width="item.width"
              :key="index"
              :label="item.label"
              align="center"
            >
              <template slot-scope="scope1">
                <span v-if="item.scope === 'types'">
                  {{
                    scope1.row[item.prop] === 1
                      ? "开课"
                      : scope1.row[item.prop] === 0
                      ? "未开课"
                      : "未知"
                  }}
                </span>
                <span v-else-if="item.scope === 'sectionType'">
                  {{ getTypes(scope1.row[item.prop]) }}
                </span>
                <span v-else-if="item.scope === 'studentStatus'">
                  已观看{{ scope1.row[item.prop1] }}节
                  <span style="color: green">{{
                    compons(scope1.row[item.prop1], scope1.row[item.prop2])
                  }}</span>
                </span>
                <span v-else> {{ scope1.row[item.prop] }} </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="100px"
            >
              <template slot-scope="scope1s">
                <el-button
                  type="text"
                  @click="
                    wantInfo(
                      scope1s.row,
                      scope1s.$index,
                      scope.row.goodsId,
                      scope.row.gradeId
                    )
                  "
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </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="scope">
          <span v-if="item.scope === 'yewu'">
            {{ scope.row[item.prop1] }}-{{ scope.row[item.prop2] }}-{{
              scope.row[item.prop3]
            }}
          </span>
          <span v-else-if="item.scope === 'time'">
            {{ $methodsTools.onlyForma(scope.row[item.prop]) }}
          </span>
          <span v-else-if="item.scope === 'moreTime'">
            {{ $methodsTools.onlyForma(scope.row[item.prop1]) }} -
            {{ $methodsTools.onlyForma(scope.row[item.prop2]) }}
          </span>
          <span v-else-if="item.scope === 'mix'">
            {{ scope.row[item.prop1] }}/{{ scope.row[item.prop2] }}
          </span>
          <span v-else>
            {{ scope.row[item.prop] }}{{ item.ch ? item.ch : "" }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1030px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">学习记录</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <div>
        <el-table
          border
          height="550"
          :data="RemardList"
          style="width: 100%"
          default-expand-all
          :header-cell-style="{
            'background-color': 'rgb(255,255,204)',
            padding: '8px',
            color: '#333',
          }"
        >
          <el-table-column label="序号" align="center" type="index" width="70">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in studyListRemard"
            :width="item.width"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.scope === 'studyTime'">
                {{ $methodsTools.onlyForma(scope.row[item.prop1])
                }}{{
                  scope.row[item.prop1] && scope.row[item.prop2] ? "至" : ""
                }}
                {{ $methodsTools.onlyForma(scope.row[item.prop2]) }}
              </span>
              <span v-else-if="item.scope === 'timeCg'">{{
                $methodsTools.secondToDate(scope.row[item.prop], false)
              }}</span>
              <span v-else-if="item.scope === 'status'">
                {{
                  scope.row[item.prop] === 1
                    ? "完成"
                    : scope.row[item.prop] === 0
                    ? "学习中"
                    : "未知"
                }}
              </span>
              <span v-else-if="item.scope === 'computerTimes'">
                {{
                  computerTimesFunc(
                    scope.row[item.prop1],
                    scope.row[item.prop2]
                  )
                }}
              </span>
              <span v-else> {{ scope.row[item.prop] }} </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "studyRecord",
  data() {
    return {
      dialogVisible: false,
      tableDataChild: {},
      tableSetChild: [
        {
          label: "课程名称",
          prop: "courseName",
          width: "160px",
        },
        {
          label: "科目",
          prop: "subjectName",
        },
        // {
        //   label: "课程开课状态",
        //   prop: "beginStatus",
        //   width: "160px",
        //   scope: "types",
        // },
        {
          label: "模块",
          prop: "moduleNum",
        },
        {
          label: "章",
          prop: "chapterNum",
        },
        {
          label: "节",
          prop: "sectionNum",
        },
        {
          label: "节类型",
          prop: "sectionType",
          scope: "sectionType",
        },
        {
          label: "学习状态",
          prop1: "recordNum",
          prop2: "sectionNum",
          scope: "studentStatus",
        },
      ],
      tableData: [],
      tableSet: [
        {
          label: "商品编码",
          prop: "code",
          width: "160px",
        },
        {
          label: "年份",
          prop: "year",
        },
        {
          label: "商品名称",
          prop: "goodsName",
          width: "140px",
        },
        {
          label: "业务层级",
          prop1: "educationName",
          prop2: "projectName",
          prop3: "businessName",
          scope: "yewu",
          width: "260px",
        },
        {
          label: "学时",
          prop: "classHours",
        },
        {
          label: "学习进度（节）",
          prop1: "stuAllNum",
          prop2: "secAllNum",
          scope: "mix",
        },
        {
          label: "视频学习进度（节）",
          prop: "studyNum",
          width: "140px",
          ch: "%",
        },
        {
          label: "学习开始时间",
          prop: "startTime",
          scope: "time",
          width: "140px",
        },
        {
          label: "学习结束时间",
          prop: "endTime",
          scope: "time",
          width: "140px",
        },
        {
          label: "学习服务期",
          prop1: "serviceStartTime",
          prop2: "serviceEndTime",
          scope: "moreTime",
          width: "140px",
        },
      ],
      studyListRemard: [
        {
          label: "模块标题",
          prop: "moduleName",
          width: "100px",
        },
        {
          label: "章标题",
          prop: "chapterName",
          width: "100px",
        },
        {
          label: "节标题",
          prop: "sectionName",
        },
        {
          label: "节时长",
          prop: "durationTime",
          scope: "timeCg",
        },
        {
          label: "学习时间",
          prop1: "startTime",
          prop2: "endTime",
          scope: "studyTime",
          width: "310px",
        },
        {
          label: "学习时长",
          prop1: "startTime",
          prop2: "endTime",
          width: "100px",
          scope: "computerTimes",
        },
      ], //学习记录表格对应column
      RemardList: [], //学习记录列表
      loading: false,
    };
  },
  computed: {
    computerTimesFunc: function () {
      return function (val1, val2) {
        if (val1 && val2) {
          var ast = this.$methodsTools.secondToDate(val2 - val1, false);
          return ast;
        } else {
          return "00:00";
        }
      };
    },
  },
  mounted() {
    this.loading = true;
    this.$api
      .inquireuserlistLive({ userId: this.$route.query.id })
      .then((res) => {
        this.tableData = res.rows;
      })
      .finally(() => {
        this.loading = false;
      });
  },
  methods: {
    compons(int1, int2) {
      if (!int1 || !int2) {
        return;
      }
      let result = (int1 / int2) * 100;
      if (result == 0 || result == 100) {
        return result + "%";
      } else {
        return result.toFixed(2) + "%";
      }
    },
    //改变返回值
    getTypes(arr) {
      if (!arr) {
        return "暂无";
      }
      let arrays = arr.split(",").map(Number);
      let str = [];
      for (let i = 0; i < arrays.length; i++) {
        if (arrays[i] == 1) {
          str.push("录播");
        }
        if (arrays[i] == 2) {
          str.push("直播");
        }
        if (arrays[i] == 3) {
          str.push("回放");
        }
      }
      return str.toString();
    },
    //关闭窗口
    close() {
      this.dialogVisible = false;
    },
    //获取弹出窗内容
    wantInfo(item, index, goodsId, gradeId) {
      this.$api
        .inquiregradestudentlistSection({
          userId: this.$route.query.id,
          courseId: item.courseId,
          goodsId: goodsId,
          gradeId: gradeId,
        })
        .then((res) => {
          this.RemardList = res.rows;
          this.dialogVisible = true;
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.demo-table-expand {
  font-size: 0;
}
</style>