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

<template>
  <div>
    <page-header :routes="[{ name: '代码作业', path: 'code' }]">
      <template slot="title">
        代码作业列表
      </template>
      <template slot="content">
        共有 {{ codeData.length }} 份作业
      </template>
      <template slot="action">
        <create-assignment
          @sendCreatedAssignment="pushNewAssignment($event)"
          :course-id="course.id"
          :assign-type="assignType"
        ></create-assignment>
      </template>
    </page-header>

    <page-body>
      <div class="data-table">
        <b-table :data="codeData" detailed detail-key="id">
          <template slot-scope="props">
            <b-table-column field="id" label="ID" numeric sortable centered>
              {{ props.row.id }}
            </b-table-column>

            <b-table-column label="作业名称" centered>
              <router-link
                :to="{
                  path: `code/${props.row.id}`,
                  query: {
                    assignmentInfo: props.row.problem,
                    title: props.row.name
                  }
                }"
              >
                {{ 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>
      </div>
    </page-body>
  </div>
</template>

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

export default {
  components: {
    PageBody,
    PageHeader,
    DeleteAssignment,
    UpdateAssignment,
    CreateAssignment
  },
  mixins: [timeMixins],
  mounted() {
    getCodeAssignmentListByTeacher(this.course.id).then(res => {
      this.codeData = res.data;
    });
  },
  data() {
    return {
      codeData: [],
      assignType: 0
    };
  },
  methods: {
    pushNewAssignment(item) {
      this.codeData.push(item);
    },
    updateData(modifiedItem) {
      let length = this.codeData.length;
      for (let i = 0; i < length; i++) {
        if (modifiedItem.id === this.codeData[i].id) {
          this.codeData.splice(i, 1, modifiedItem);
          break;
        }
      }
    },
    deleteAssignment(delId) {
      let length = this.codeData.length;
      for (let i = 0; i < length; i++) {
        if (this.codeData[i].id === delId) {
          this.codeData.splice(i, 1);
          break;
        }
      }
    }
  },
  computed: {
    ...mapState({
      course: state => state.course.currentCourse
    })
  }
};
</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>