SEEC-II-FrontEnd/src/views/teacher/DlWork/index.vue

<template>
  <div>
    <page-header
      :loading="loadingDlWorkList"
      :routes="[{ name: '机器学习作业', path: 'dlwork' }]"
    >
      <template slot="title">
        机器学习作业列表
      </template>
      <template slot="content">
        共有 {{ dlworkData.length }} 份作业
      </template>
      <template slot="action">
        <create-assignment
          @sendCreatedAssignment="pushNewAssignment($event)"
          :course-id="Number(course.id)"
          :assign-type="assignType"
        ></create-assignment>
      </template>
    </page-header>

    <page-body>
      <page-section-loading :show="loadingDlWorkList" />
      <div class="data-table">
        <b-table
          v-if="!loadingDlWorkList"
          :data="dlworkData"
          detailed
          detail-key="id"
        >
          <template slot-scope="props">
            <b-table-column label="作业名称" centered>
              <router-link
                :to="{
                  path: `code/${props.row.id}`
                }"
              >
                {{ props.row.name }}
              </router-link>
            </b-table-column>
            <b-table-column label="状态" centered>
              {{ props.row.status }}
            </b-table-column>

            <b-table-column label="开始时间" centered>
              {{ displayUnixTime(props.row.startAt) }}
            </b-table-column>

            <b-table-column label="结束时间" centered>
              {{ displayUnixTime(props.row.endAt) }}
            </b-table-column>
            <b-table-column label="修改" centered>
              <update-assignment
                :assign-type="assignType"
                :update-item="props.row"
                @updateDocData="updateData($event)"
              ></update-assignment>
            </b-table-column>
            <b-table-column label="删除" centered>
              <delete-assignment
                :del-id="props.row.id"
                :assign-type="assignType"
                @del="deleteAssignment(props.row.id)"
              ></delete-assignment>
            </b-table-column>
          </template>

          <template slot="detail" slot-scope="props">
            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>作业描述：</strong>
                    <small>{{ props.row.description }}</small> <br />
                  </p>
                </div>
              </div>
            </article>
          </template>
        </b-table>
        <no-data-svg
          style="margin-top: 20px;"
          v-if="!loadingDlWorkList && !(dlworkData && dlworkData.length > 0)"
        ></no-data-svg>
      </div>
    </page-body>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
import { getDLAssignmentListByTeacher } from "@/api/dlwork";
import { mapState } from "vuex";
import timeMixins from "@/mixins/time";
import DeleteAssignment from "@/components/AssignmentCRUD/DeleteAssignment";
import UpdateAssignment from "@/components/AssignmentCRUD/UpdateAssignment";
import CreateAssignment from "@/components/AssignmentCRUD/CreateAssignment";
import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
import NoDataSvg from "@/components/NoDataSvg";

export default {
  components: {
    PageBody,
    PageHeader,
    DeleteAssignment,
    UpdateAssignment,
    CreateAssignment,
    PageSectionLoading,
    NoDataSvg
  },
  mixins: [timeMixins],
  mounted() {
    this.loadingDlWorkList = true;
    const { courseId } = this.$route.params;
    getDLAssignmentListByTeacher(courseId).then(res => {
      this.dlworkData = res.data;
      this.loadingDlWorkList = false;
    });
  },
  data() {
    return {
      dlworkData: [],
      assignType: 0,
      loadingDlWorkList: false
    };
  },
  computed: {
    ...mapState({
      course: state => state.course.currentCourse
    })
  },
  methods: {
    pushNewAssignment(item) {
      this.dlworkData.push(item);
    },
    updateData(modifiedItem) {
      let length = this.dlworkData.length;
      for (let i = 0; i < length; i++) {
        if (modifiedItem.id === this.dlworkData[i].id) {
          this.dlworkData.splice(i, 1, modifiedItem);
          break;
        }
      }
    },
    deleteAssignment(delId) {
      let length = this.dlworkData.length;
      for (let i = 0; i < length; i++) {
        if (this.dlworkData[i].id === delId) {
          this.dlworkData.splice(i, 1);
          break;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  padding: 30px;
  .title {
    font-size: 1.25rem;
    small {
      color: gray;
      font-size: 1rem;
    }
  }
  .content {
    a {
      margin-top: 30px;
      width: 100%;
    }
  }
}
</style>