seec-eval/src/views/exam/components/CodePane.vue

<template>
  <v-card class="d-flex flex-column questionCard pa-0">
    <div class="my-1 d-flex flex-grow-1 pa-1">
      <div class="flex-grow-1 d-flex flex-column justify-space-between">
        <div>
          <v-tabs v-model="tab" class="pa-0 ma-0 elevation-1" grow>
            <v-tab>题目描述</v-tab>
            <v-tab>提交记录</v-tab>
          </v-tabs>
          <v-tabs-items v-model="tab">
            <v-tab-item>
              <div class="overflow-y-auto" style="height: 80vh">
                <markdown-text :raw="stem" style="height: 100%"></markdown-text>
              </div>
            </v-tab-item>
            <v-tab-item class="pa-2">
              <div class="d-flex flex-column justify-space-between pa-2">
                <v-card
                  flat
                  class="d-flex flex-column justify-space-between mb-5"
                >
                  <div class="d-inline mb-2">
                    执行结果：
                    <v-chip
                      :color="statusToColor(currentCommit.status)"
                      outlined
                      >{{ currentCommit.status }}</v-chip
                    >
                  </div>
                  <v-card-text
                    style="background-color: darkgray; height: 30vh"
                    class="rounded ma-0 mb-5 overflow-y-auto pa-2"
                    v-if="
                      currentCommit && currentCommit.status === '编译或运行失败'
                    "
                  >
                    TODO
                  </v-card-text>
                </v-card>
                <!--                <v-simple-table fixed-header height="40vh" class="flex-grow-1">-->
                <v-simple-table
                  fixed-header
                  :height="
                    currentCommit && currentCommit.status === '编译或运行失败'
                      ? 35 + 'vh'
                      : 70 + 'vh'
                  "
                >
                  <thead>
                    <tr>
                      <th>提交时间</th>
                      <th>状态</th>
                      <th>成绩</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in commits" :key="item.id">
                      <td>{{ item.submitTime }}</td>
                      <td>
                        <v-chip
                          :color="statusToColor(item.status)"
                          small
                          outlined
                        >
                          {{ item.status }}
                        </v-chip>
                      </td>
                      <td>{{ item.score }}</td>
                      <td>
                        <v-btn small>详情</v-btn>
                      </td>
                    </tr>
                  </tbody>
                </v-simple-table>
              </div>
            </v-tab-item>
          </v-tabs-items>
        </div>

        <div style="height: 32px" class="d-flex justify-space-between">
          <v-btn color="info" small>上一题</v-btn>
          <span> 代码题 1/4</span>
          <v-btn color="info" small>下一题</v-btn>
        </div>
      </div>
      <v-divider vertical class="mx-1"></v-divider>
      <div style="width: 50vw; height: 100%" class="d-flex flex-column">
        <div
          style="height: 48px"
          class="d-flex pr-5 justify-space-between elevation-1 mb-1"
        >
          <div class="d-flex ml-5">
            <div class="d-flex">
              <v-select
                :items="languages"
                v-model="currentLang"
                dense
                style="width: 120px"
                class=" ma-0 pa-0"
                solo
              >
              </v-select>
            </div>
            <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  fab
                  x-small
                  tile
                  class="mx-2 mb-2 pa-0 elevation-1 align-self-center"
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-arrow-left</v-icon>
                </v-btn>
              </template>
              <span>恢复到上次提交的代码</span>
            </v-tooltip>
            <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  fab
                  x-small
                  tile
                  class="mx-2 mb-2 pa-0 elevation-1 align-self-center"
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-refresh</v-icon>
                </v-btn>
              </template>
              <span>重置代码至初始状态</span>
            </v-tooltip>
          </div>
          <v-btn
            color="primary"
            class="mx-2 mb-2 align-self-center"
            small
            v-on:click="submitCode"
            >保存测试</v-btn
          >
        </div>
        <code-editor
          :language="currentLang"
          v-model="currentCode"
        ></code-editor>
      </div>
    </div>
  </v-card>
</template>

<script lang="ts">
import Vue from 'vue'
import CodeEditor from '@/views/exam/components/CodeEditor.vue'
import MarkdownText from '@/views/exam/components/MarkdownText.vue'
import { clone } from 'ramda'

interface CommitInfo {
  id?: string
  submitTime?: string
  status?: string
  score?: number
  codes?: CodeQuestionPair[]
  msg?: string
}

interface CodeQuestionPair {
  id?: string
  stem?: string
  originalCode?: LanguageCode[]
  currentCode?: LanguageCode[]
}

interface LanguageCode {
  type?: string
  code?: string
}

export default Vue.extend({
  components: {
    CodeEditor,
    MarkdownText
  },
  data() {
    return {
      content: '213123123',
      tab: null,
      commits: [] as CommitInfo[],
      languages: ['cpp', 'java', 'python'],
      currentLang: 'java',
      currentCommit: (null as unknown) as CommitInfo,
      statusTags: [
        '所有用例通过',
        '有用例未通过',
        '编译或运行失败',
        '运行超时',
        '等待运行'
      ],
      statusColors: ['success', 'warning', 'error', 'accent', 'info'],
      stem: '',
      codeQuestions: [] as CodeQuestionPair[],
      currentQuestion: {} as CodeQuestionPair,
      currentCode: [] as CodeQuestionPair[]
    }
  },
  computed: {
    // lastEdit: function() {
    //   return clone(this.currentQuestion.currentCode)
    // },
    //
    // codeByLanguage() {
    //   for (const languageCode of this.currentQuestion.currentCode) {
    //     if (this.currentLang === languageCode.type) {
    //       return languageCode.code
    //     }
    //   }
    //   return ''
    // }
  },
  watch: {
    // currentLang() {
    //   this.currentCode = this.codeByLanguage
    // }
  },
  beforeMount() {
    for (let i = 0; i < 10; i++) {
      const r = Math.floor(Math.random() * 4 + 1)
      this.commits.push({
        id: i.toString(),
        submitTime: '2020-12-11 20:02',
        status: this.statusTags[r],
        score: 6 * i
      })
    }
    this.currentCommit = this.getCurrentCommit()

    this.fetchData()
  },
  methods: {
    submitCode(): void {
      const r = Math.floor(Math.random() * 5)
      const id = Math.floor(Math.random() * 1000).toString()
      this.commits = [
        {
          id: id,
          submitTime: '2020-12-11 20:03',
          status: this.statusTags[r],
          score: 100
        },
        ...this.commits
      ]
      this.currentCommit = this.getCurrentCommit()

      console.log(this.currentCode)
    },
    getCurrentCommit(): CommitInfo {
      return this.commits[0]
    },
    statusToColor(status: string): string {
      return this.statusColors[this.statusTags.indexOf(status)]
    },
    fetchData() {
      const cpp = { type: 'cpp', code: 'int main(){}' } as LanguageCode
      const java = { type: 'java', code: 'int a=0;' } as LanguageCode
      const python = { type: 'python', code: 'print a' } as LanguageCode

      this.currentQuestion = {
        id: '123',
        stem: 'description',
        originalCode: [cpp, java, python],
        currentCode: [cpp, java, python]
      }
      this.codeQuestions.push(this.currentQuestion)
      this.codeQuestions.push({
        id: '234',
        stem: 'description',
        originalCode: [cpp, java, python],
        currentCode: [cpp, java, python]
      })

      // this.currentCode = this.codeByLanguage
      console.log(this.currentCode)
    },
    resetCode() {
      for (const codeQuestion of this.codeQuestions) {
        if (codeQuestion.id === this.currentQuestion.id) {
          this.currentQuestion.currentCode = clone(codeQuestion.originalCode)
        }
        // 添加完成后的提示
      }
    }
  }
})
</script>

<style scoped>
.questionCard {
  margin: 0.5vh;
  height: 92vh;
}
</style>