SEEC-II-FrontEnd/src/components/AssignmentCRUD/CreateAssignment/index.vue

<template>
  <div>
    <a class="button is-link" @click="startCreation()"
      >新建{{ createTitle }}作业</a
    >

    <!--新建文档作业模态框-->
    <b-modal :active.sync="isCreateModalActive" :width="640" scroll="keep">
      <div class="card">
        <div class="title">新建{{ createTitle }}作业</div>
        <div class="content">
          <b-field label="题目名称">
            <b-input v-model="problemName"></b-input>
          </b-field>
          <b-field
            label="作业名称"
            :type="$v.params.name.$error ? 'is-danger' : ''"
            :message="$v.params.name.$error ? '请填写作业名称' : ''"
          >
            <b-input
              placeholder="请填写作业名称"
              v-model="$v.params.name.$model"
            ></b-input>
          </b-field>
          <b-field
            label="作业描述"
            :type="$v.params.description.$error ? 'is-danger' : ''"
            :message="$v.params.description.$error ? '请填写作业描述' : ''"
          >
            <b-input
              type="textarea"
              placeholder="请填写作业描述"
              v-model="$v.params.description.$model"
            ></b-input>
          </b-field>
          <b-field
            label="开始时间"
            :type="$v.params.startAt.$error ? 'is-danger' : ''"
            :message="$v.params.startAt.$error ? '请填写作业开始时间' : ''"
          >
            <flat-pickr
              placeholder="Click to select..."
              class="input"
              v-model="$v.params.startAt.$model"
              :config="startAtConfig"
            ></flat-pickr>
          </b-field>
          <b-field
            label="结束时间"
            :type="$v.params.endAt.$error ? 'is-danger' : ''"
            :message="$v.params.endAt.$error ? '请填写作业结束时间' : ''"
          >
            <flat-pickr
              placeholder="Click to select..."
              class="input"
              v-model="$v.params.endAt.$model"
              :config="endAtConfig"
            ></flat-pickr>
          </b-field>

          <a
            class="button is-link"
            :class="{ 'is-loading': loadingCreateAssignment }"
            @click="createAssignment()"
          >
            确认新建
          </a>
        </div>
      </div>
    </b-modal>

    <!--搜索题目模态框-->
    <b-modal :active.sync="isSearchModalActive">
      <div class="card">
        <div class="title">请先查找题目</div>
        <div class="content">
          <b-field
            :type="$v.searchContent.$error ? 'is-danger' : ''"
            :message="$v.params.endAt.$error ? '' : ''"
          >
            <b-input
              placeholder="输入关键字模糊查找"
              type="search"
              v-model="$v.searchContent.$model"
              @keyup.enter.native="search(searchContent)"
              expanded
            >
            </b-input>
            <p class="control">
              <button
                class="button is-link"
                :class="{ 'is-loading': loadingSearchQuestions }"
                @click="search(searchContent)"
              >
                查找
              </button>
            </p>
          </b-field>
        </div>
      </div>
    </b-modal>

    <!--题目列表展示框-->
    <b-modal :active.sync="isProblemListModalActive">
      <b-notification type="is-danger" :active.sync="isServerError">
        {{ errorMassage }}
      </b-notification>
      <div class="card">
        <div class="title">选择题目</div>
        <div class="content">
          <div class="question-list">
            <b-table :data="questions" detailed detail-key="id">
              <template slot-scope="props">
                <b-table-column
                  field="id"
                  label="ID"
                  width="40"
                  numeric
                  sortable
                >
                  {{ props.row.id }}
                </b-table-column>
                <b-table-column label="题目名称">
                  <a @click="selectAndCreate(props.row)">{{
                    props.row.name
                  }}</a>
                </b-table-column>
                <b-table-column label="题目描述" width="100">
                  <div class="description">{{ props.row.description }}</div>
                </b-table-column>
                <b-table-column
                  field="difficulty"
                  label="题目难度"
                  sortable
                  centered
                >
                  <span
                    :class="[
                      'tag',
                      `${getDifficultyClass(props.row.difficulty)}`
                    ]"
                  >
                    {{ getDifficultyType(props.row.difficulty) }}
                  </span>
                </b-table-column>

                <b-table-column
                  label="平均时长"
                  field="expectTime"
                  sortable
                  centered
                >
                  {{ props.row.expectTime }}分钟
                </b-table-column>
              </template>
              <template slot="detail" slot-scope="props">
                <div>{{ props.row.description }}</div>
              </template>
            </b-table>
          </div>
        </div>
      </div>
    </b-modal>
  </div>
</template>

<script>
import { getTeacherKeywordQuestions } from "@/api/question";
import { postDocAssignment } from "@/api/assignment";
import { postCodeAssignment } from "@/api/assignment";
import timeMixins from "@/mixins/time";
import { required } from "vuelidate/lib/validators";
import pathMixins from "@/mixins/path";
import { difficultyType } from "@/data/questionDifficulty";
import { difficultyClass } from "@/data/questionDifficulty";
export default {
  props: {
    courseId: {
      type: String
    },
    assignType: {
      type: Number
    }
  },
  mounted() {
    if (this.assignType === 1) {
      this.createTitle = "文档";
      this.postParam = "DOCUMENT";
    } else {
      this.createTitle = "代码";
      this.postParam = "CODE";
    }
  },
  data() {
    return {
      params: {
        name: null,
        description: null,
        startAt: null,
        endAt: null,
        problem: null //题目编号
      },
      createTitle: "",
      postParam: "",
      myPromise: null,
      problemName: "",
      searchContent: "",
      questions: [],
      isCreateModalActive: false,
      isSearchModalActive: false,
      isProblemListModalActive: false,
      startAtConfig: {
        ...this.getDefaultConfig(),
        minDate: "today",
        maxDate: null
      },
      endAtConfig: {
        ...this.getDefaultConfig(),
        minDate: "today",
        maxDate: null
      },
      errorMassage: null,
      isServerError: false,
      submitting: false,
      // 转圈圈
      loadingSearchQuestions: false,
      loadingCreateAssignment: false
    };
  },
  methods: {
    /**
     * 准备新建
     */
    startCreation() {
      if (this.submitting) return;
      this.isSearchModalActive = true;
    },
    /**
     * 搜索题目
     */
    search(content) {
      if (this.submitting) return;
      this.isServerError = false;
      this.$v.searchContent.$touch();
      if (!this.$v.searchContent.$invalid) {
        this.loadingSearchQuestions = true;
        this.submitting = true;
        try {
          getTeacherKeywordQuestions(content).then(res => {
            this.questions = res.data;
            this.isSearchModalActive = false;
            this.loadingSearchQuestions = false;
            this.isProblemListModalActive = true;
          });
        } catch (e) {
          this.errorMassage = e.message;
          this.isServerError = true;
        } finally {
          this.submitting = false;
        }
      }
    },
    selectAndCreate(problem) {
      this.params.problem = problem.id;
      this.problemName = problem.name;
      this.isProblemListModalActive = false;
      this.isCreateModalActive = true;
    },
    /**
     * 确认新建
     */
    createAssignment() {
      if (this.submitting) return;
      this.$v.params.$touch();
      if (!this.$v.params.$invalid) {
        this.loadingCreateAssignment = true;
        this.submitting = true;
        this.params["type"] = this.postParam;
        this.parseParams();
        if (this.assignType === 1) {
          // 文档作业
          this.myPromise = postDocAssignment(
            this.params,
            parseInt(this.courseId)
          );
        } else {
          // 代码作业
          this.myPromise = postCodeAssignment(
            this.params,
            parseInt(this.courseId)
          );
        }
        this.myPromise.then(res => {
          //创建成功
          this.isCreateModalActive = false;
          if (res.code === 0) {
            if (this.assignType === 1) {
              this.$router.push({
                path: `${this.prefix}/review?documentHwId=${res.data.id}`
              });
            }
            this.$emit("sendCreatedAssignment", res.data);
            this.loadingCreateAssignment = false;
          } else {
            //创建失败
            this.isCreateModalActive = false;
            this.loadingCreateAssignment = false;
            this.$dialog.alert({
              title: "创建失败",
              message: res.message,
              type: "is-danger",
              hasIcon: true
            });
          }
        });
        this.submitting = false;
      }
    },
    getDifficultyType(level) {
      return difficultyType(level);
    },
    getDifficultyClass(level) {
      return difficultyClass(level);
    },
    parseParams() {
      this.params.startAt = parseInt(this.params.startAt);
      this.params.endAt = parseInt(this.params.endAt);
    }
  },
  mixins: [timeMixins, pathMixins],
  validations: {
    params: {
      name: {
        required
      },
      description: {
        required
      },
      startAt: {
        required
      },
      endAt: {
        required
      }
    },
    searchContent: {
      required
    }
  },
  watch: {
    isCreateModalActive(newValue) {
      if (newValue === false) {
        this.$v.params.$reset();
      }
    },
    isSearchModalActive(newValue) {
      if (newValue === false) {
        this.$v.searchContent.$reset();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  text-align: left;
  padding: 30px;
  .title {
    font-size: 1.25rem;
    small {
      color: gray;
      font-size: 1rem;
    }
  }
  .content {
    a {
      margin-top: 30px;
      width: 100%;
    }
  }
}
.description {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-wrap: break-word;
  word-break: break-all;
  display: -webkit-box;
}
</style>