2/9

<template>

  <div id="addQuestionView">

    <h2>创建题目</h2>

    <a-form :model="form">

      <a-form-item field="title" label="标题">

        <a-input v-model="form.title" placeholder="请输入标题" />

      </a-form-item>

      <a-form-item field="tags" label="标签">

        <a-input-tag v-model="form.tags" placeholder="请输入标签" allow-clear />

      </a-form-item>

      <a-form-item field="content" label="题目内容">

        <MdEditor :value="form.content" :handle-change="onContentChange" />

      </a-form-item>

      <a-form-item field="answer" label="答案">

        <MdEditor :value="form.answer" :handle-change="onAnswerChange" />

      </a-form-item>

      <a-form-item label="判题配置" :content-flex="false" :merge-props="false">

        <a-space direction="vertical" style="min-width: 280px">

          <a-form-item field="judgeConfig.timeLimit" label="时间限制">

            <a-input-number

              placeholder="请输入时间限制"

              v-model="form.judgeConfig.timeLimit"

              :min="0"

              mode="button"

              size="large"

            />

          </a-form-item>

          <a-form-item field="judgeConfig.memoryLimit" label="内存限制">

            <a-input-number

              placeholder="请输入内存限制"

              v-model="form.judgeConfig.memoryLimit"

              :min="0"

              mode="button"

              size="large"

            />

          </a-form-item>

          <a-form-item field="judgeConfig.stackLimit" label="堆栈限制">

            <a-input-number

              placeholder="请输入堆栈限制"

              v-model="form.judgeConfig.stackLimit"

              :min="0"

              mode="button"

              size="large"

            />

          </a-form-item>

        </a-space>

      </a-form-item>

      <a-form-item

        label="测试用例配置"

        :content-flex="false"

        :merge-props="false"

      >

        <a-form-item

          v-for="(judgeCaseItem, index) of form.judgeCase"

          :key="index"

        >

          <a-space direction="vertical" style="min-width: 480px">

            <a-form-item

              :field="`form.judgeCase[${index}].input`"

              :label="`输入用例-${index}`"

              :key="index"

            >

              <a-input

                v-model="judgeCaseItem.input"

                placeholder="请输入测试输入用例"

              />

            </a-form-item>

            <a-form-item

              :field="`form.judgeCase[${index}].output`"

              :label="`输出用例-${index}`"

              :key="index"

            >

              <a-input

                v-model="judgeCaseItem.output"

                placeholder="请输入测试输出用例"

              />

            </a-form-item>

            <a-button @click="handleDelete(index)" status="danger">

              删除

            </a-button>

          </a-space>

        </a-form-item>

        <div style="margin-top: 32px">

          <a-button @click="handleAdd" type="outline" status="success"

            >添加测试用例</a-button

          >

        </div>

      </a-form-item>

      <a-form-item>

        <a-button type="primary" @click="doSubmit">提交</a-button>

      </a-form-item>

    </a-form>

  </div>

</template>

<script setup lang="ts">

import { reactive } from "vue";

import MdEditor from "@/components/MdEditor.vue";

import { QuestionControllerService } from "../../../generated";

import message from "@arco-design/web-vue/es/message";

const form = reactive({

  title: "A + B",

  tags: ["栈", "简单"],

  answer: "暴力破解",

  content: "题目内容",

  judgeConfig: {

    memoryLimit: 1000,

    stackLimit: 1000,

    timeLimit: 1000,

  },

  judgeCase: [

    {

      input: "1 2",

      output: "3 4",

    },

  ],

});

const doSubmit = async () => {

  console.log(form);

  const res = await QuestionControllerService.addQuestionUsingPost(form);

  if (res.code === 0) {

    message.success("创建成功");

  } else {

    message.error("创建失败" + res.message);

  }

};

/*

 处理添加测试用例

 */

const handleAdd = () => {

  form.judgeCase.push({

    input: "",

    output: "",

  });

};

/*

 处理删除测试用例

 */

const handleDelete = (index: number) => {

  form.judgeCase.splice(index, 1);

};

const onContentChange = (value: string) => {

  form.content = value;

};

const onAnswerChange = (value: string) => {

  form.answer = value;

};

</script>

<style scoped></style>