Leone update code

package.json

@@ -8,9 +8,11 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.2-beta.70",
     "node-sass": "^4.14.1",
+    "typescript": "^4.3.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"

src/api/test.js

@@ -0,0 +1,14 @@
+// let b: boolean = false
+// // let bobject: boolean = new Boolean(1);
+// let bobject1: boolean = Boolean(0);
+// console.log(bobject1)
+var mySu = function (x, y) {
+    if (y === void 0) { y = 2; }
+    return x + y;
+};
+var mySu1 = function (x, y) {
+    if (x === void 0) { x = 2; }
+    return x + y;
+};
+console.log(mySu1(undefined, 2));
+console.log(mySu(2, undefined));

src/api/test.ts

@@ -0,0 +1,198 @@
+// let b: boolean = false
+// // let bobject: boolean = new Boolean(1);
+// let bobject1: boolean = Boolean(0);
+// console.log(bobject1)
+
+// let decLiteral: number = 6;
+// let hexLiteral: number = 0xf00d;
+// // ES6 中的二进制表示法
+// let binaryLiteral: number = 0b1010;
+// // ES6 中的八进制表示法
+// let octalLiteral: number = 0o744;
+// let notANumber: number = NaN;
+// let infinityNumber: number = Infinity;
+// let decimal: number = 1.2
+// console.log(decimal)
+
+// let suname: string = "xiaosuniubi"
+// let su:string = `xiaosu tedian ${suname}`
+// console.log(su)
+
+// function su(num: number): number {
+//     return num + 1.2
+// }
+//
+// console.log(su(3))
+//
+// function su1():void {
+//     console.log("suniubi")
+// }
+// su1()
+
+
+// let su: string = "7";
+// su = 7;
+
+// let su:any = "string: 7";
+// su = 7
+// console.log(su)
+
+
+// let su: any = "niamde";
+// console.log(su.name1)
+// console.log(su.sex)
+// su.getName()
+// su.setSex("sex")
+
+// let su;
+// su = "niamde";
+// console.log(su);
+// su = 7;
+// console.log(su);
+
+// let su = "7";
+// su = 7;
+
+//联合类型
+// let su: string | number;
+// su = 7;
+// su = "7";
+// su = true;
+
+// let su: string | number;
+// su.toString();
+// console.log(su.length)
+
+// let su: string | number;
+// su = "7";
+// console.log(su.length)
+// su = 7;
+// console.log(su.length)
+
+//对象的接口interface
+// interface Su {
+//     name: string,
+//     sex: string,
+//     age: number
+// }
+//
+// let realSu: Su = {
+//     name: "xiaosu",
+//     sex: "nan",
+//     age: 18
+// }
+
+//可选属性
+// interface Su {
+//     name: string,
+//     age?: number,
+//     gender?: string
+// }
+//
+// let realSu: Su = {
+//     name: "xiaosu",
+//     gender: "nan",
+//     age: 18
+// }
+// let realSu1: Su = {
+//     name: "xiaosu",
+//     age: 18
+// }
+// let realSu2: Su = {
+//     name: "xiaosu"
+// }
+
+//任意属性
+// interface Su {
+//     name: string,
+//     age?: number,
+//     gender?: string,
+//     [propName:string]: string|number
+// }
+//
+// let realSu: Su = {
+//     name: "xiaosu",
+//     gender: "nan",
+//     age: 18,
+//     zhen: true,
+//     ni:"ni"
+// }
+
+//只读属性
+// interface Su {
+//     readonly id?: string,
+//     age: number,
+//     gender: string,
+//     [propName: string]: any;
+// }
+//
+// let realSu: Su = {
+//     gender: "nan",
+//     age: 18,
+// }
+// realSu.id = "12"
+// console.log(realSu.id)
+
+
+//数组
+// let suArray: number[] = [1,2,3,4];
+// suArray.push(1)
+// console.log(suArray)
+// suArray.push("1")
+// let suArray: Array<number> = [1,2,3,4]
+// suArray.push("1")
+
+// interface suArray {
+//     [index: number]:number
+//
+// }
+//
+// let myArray: suArray = [1,2,3,4]
+
+//函数表达式
+// let myFunc = function (x:number, y:number): number {
+//     return x+y;
+// }
+//
+// let myFunc1:(x:number, y:number) => number = function (x:number, y:number): number {
+//     return x+y;
+// }
+
+// interface myFunc {
+//     (x:number, y:number):number
+// }
+//
+// let mySu: myFunc = function (x:number, y:number):number {
+//     return x+y;
+//
+// }
+
+
+// interface myFunc {
+//     (x:number, y?:number):number
+// }
+//
+// let mySu: myFunc = function (x:number, y?:number):number {
+//     if(y){
+//         return x+y;
+//     }else{
+//         return x;
+//     }
+// }
+//
+// console.log(mySu(3))
+
+
+interface myFunc {
+    (x:number, y:number):number
+}
+let mySu: myFunc = function (x:number, y:number = 2):number {
+    return x+y;
+}
+
+let mySu1 = function (x:number, y:number=2):number {
+    return x+y;
+}
+
+console.log(mySu1(2))
+console.log(mySu(2,undefined))

src/api/types.d.ts

@@ -0,0 +1,54 @@
+export type ID = number | string
+
+export type QuestionType =
+    | 'choice'
+    | 'blank'
+    | 'code'
+    | 'multi_choice'
+    | 'true_false'
+    | 'short_answer'
+
+export type OptionSerializer = Map<string, string>
+
+export interface BriefQuestion {
+    id: ID
+    stem: string
+    type: QuestionType
+    // 客观题
+    options?: OptionSerializer
+    keyPoints?: string
+    tags?: Array<string>
+    knowledgeId?: Array<string>
+}
+
+export interface ConcreteQuestion {
+    id: ID,
+    type: QuestionType,
+    title?: string,
+    stem: string,
+    analysis: string,
+    weight: number,
+    keyPoints?: string,
+    tags?: Array<string>
+    knowledgeId?: Array<string>,
+    createdTime?: Date,
+    lastModifiedTime?: Date,
+
+    //choices
+    options?: Map<string,string>,
+
+    //blanks
+    blank?: Map<string,string>,
+
+    //code
+    inputOutputMapping?: Map<string, string>,
+    millisecondLimit?: number,
+    memoryLimit?: number,
+
+    //ShortAnswer
+
+    //TrueFalse
+
+    answer?: string
+
+}

src/assets/arrowdown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z" /></svg>

src/components/bok/bokMain/Collection.vue

@@ -1,20 +1,160 @@
 <template>
   <div>
     <h1>Collection</h1>
+    <el-button @click="createQuestion">新建题目</el-button>
+    <el-button @click="createQuestionByGruop">新建题目组</el-button>
+
+    <div class="QuestionBody">
+      <BriefQuestionCard v-for="(item,index) in questionList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+                         :questionvo="item" :total-num="questionList.length" :cur-num="index" />
+    </div>
+
+
+    <div class="el-pagination">
+      <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[2, 5, 10, 15, 20]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total=this.questionList.length>
+      </el-pagination>
+    </div>
+
+    <el-drawer
+            title="新建题目"
+            :before-close="handleClose"
+            v-model="dialog"
+            direction="rtl"
+            custom-class="question-drawer"
+            ref="drawer"
+            size="35%"
+    >
+      <QuestionCreater :dialog="dialog" @closeDialog="closeDialog"/>
+
+    </el-drawer>
+
+    <el-drawer
+            title="批量新建题目"
+            :before-close="handleClose"
+            v-model="dialog1"
+            direction="rtl"
+            custom-class="questionGroup-drawer"
+            ref="drawer"
+            size="35%"
+    >
+      <QuestionGroupCreater :dialog="dialog1" @closeDialog="closeDialog1"/>
+
+    </el-drawer>
+
+
   </div>
 </template>
 
-<script>
+<script lang="ts">
+
+import axios from "axios";
+import QuestionCreater from "../../card/QuestionCreater.vue";
+import QuestionGroupCreater from "../../card/QuestionGroupCreater.vue";
+import BriefQuestionCard from "../../card/BriefQuestionCard.vue";
 
 export default {
   name: "Collection",
   components: {
+    QuestionCreater,
+    QuestionGroupCreater,
+    BriefQuestionCard,
   },
   data() {
+    return{
+      info: null,
+      questionList: [],
+      dialog:false,
+      dialog1:false,
+      currentPage: 1,
+      pageSize: 2,
+    }
+  },
+  mounted() {
+    axios.get("/api/api/question")
+            .then(res => {
+              this.info = res;
+              this.questionList = res.data.content
+              console.log(res);
+            }).catch(error => {
+              console.log(error);
+            }).finally(() => {
+              console.log("mounted completed");
+    })
+  },
+  computed: {
+  },
+  methods: {
+    createQuestion(){
+      this.dialog = true;
+    },
+    createQuestionByGruop(){
+      this.dialog1 = true;
+    },
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('确定要提交表单吗？')
+              .then(_ => {
+                this.loading = true;
+                this.timer = setTimeout(() => {
+                  done();
+                  // 动画关闭需要一定的时间
+                  setTimeout(() => {
+                    this.loading = false;
+                  }, 400);
+                }, 2000);
+              })
+              .catch(_ => {});
+    },
+    cancelForm() {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    },
+    closeDialog(){
+      this.dialog = false;
+    },
+    closeDialog1(){
+      this.dialog1 = false;
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.currentPage = val;
+    },
+
   },
+  watch: {
+    // questionList: function () {
+    //   axios.get("/api/api/question")
+    //           .then(res => {
+    //             this.info = res;
+    //             this.questionList = res.data.content
+    //             console.log(res);
+    //           }).catch(error => {
+    //     console.log(error);
+    //   }).finally(() => {
+    //     console.log("watch completed");
+    //   })
+    // }
+  }
 }
 </script>
 
 <style scoped>
+  .el-pagination{
+    margin: 20px;
+  }
 
 </style>

src/components/card/BriefQuestionCard.vue

@@ -1,105 +1,220 @@
-<template>
-    <el-card class="box-card" shadow="hover">
+<template xmlns:el-col="http://www.w3.org/1999/html">
+    <el-card class="bQuestion-card" shadow="hover">
         <template #header>
-            <div class="card-header">
-                <span>tag</span>
-                <ul v-for="(item, index) in questionVO.tags">
-                    <li>{{item}}</li>
-                </ul>
-                <el-button class="button" type="text" @click="clickBriefQuestionCard">查看详情</el-button>
-            </div>
+            <el-row>
+                <el-col :span="2">
+                    <span>{{curNum+1}} / {{totalNum}}</span>
+                </el-col>
+                <el-col :span="4">
+                    <span>题目类型:{{questionvo.type}}</span>
+                </el-col>
+                <el-col :span="6">
+                    <span>KeyPoints:{{questionvo.keyPoints}}</span>
+                </el-col>
+
+                <el-col :span="8"/>
+                <el-col :span="2">
+                    <el-button type="text" circle @click="expand" v-if="!isAll">查看全部</el-button>
+                    <el-button type="text" circle @click="withdraw" v-if="isAll">收起</el-button>
+
+                </el-col>
+                <el-col :span="1">
+                    <el-button type="primary" icon="el-icon-edit" circle @click="updateQuestion"></el-button>
+                </el-col>
+                <el-col :span="1">
+                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteQuestion"></el-button>
+                </el-col>
+            </el-row>
         </template>
-        <div  class="text item">
-            <h3 v-if="questionVO.type1 === 0">题型：选择题</h3>
-            <h3 v-else>题型：其它类型</h3>
-            <h4>{{questionVO.stem}}</h4>
+
+        <div class="bQuestion-card-body">
+            <div class="bQuestion-card-body-stem">
+                <div>题目: {{questionvo.stem}}</div>
+            </div>
+
+            <div class="bQuestion-card-body-options">
+                <div v-for="(item,index) in questionvo.options">
+                    <div>{{index}}: {{item}}</div>
+                </div>
+            </div>
+
+            <el-divider v-if="isAll"></el-divider>
+
+            <div class="bQuestion-card-body-tag" v-if="isAll">
+                <span v-if="questionvo.tags && questionvo.tags.length !== 0">
+                    <span>Tags: </span>
+                    <el-tag v-for="(item, index) in questionvo.tags" effect="dark">{{item}}</el-tag>
+                </span>
+                <span v-else>
+                    <span>no tags</span>
+                </span>
+            </div>
+
+            <div class="bQuestion-card-body-knowledgeID" v-if="isAll">
+                <span>KnowledgeId:</span>
+                <span v-if="questionvo.knowledgeId.length !== 0">{{questionvo.knowledgeId[0]}}</span>
+                <span v-else>no knowledgeId</span>
+            </div>
+
+            <div class="bQuestion-card-body-answer" v-if="isAll">
+                <div>正确答案: {{questionvo.answer}}</div>
+            </div>
+
+            <div class="bQuestion-card-body-analysis" v-if="isAll">
+                <div>解析: {{questionvo.analysis}}</div>
+            </div>
+        </div>
+
+        <el-divider v-if="isAll"></el-divider>
+
+        <div class="bQuestion-card-foot" v-if="isAll">
+            <el-row>
+                <el-col :span="3">
+                    <div>State: 已审核</div>
+                </el-col>
+                <el-col :span="3">
+                    <div>审核人: 小苏</div>
+                </el-col>
+
+                <el-col :span="12"></el-col>
+
+                <el-col :span="6" v-if="!questionvo.lastModifiedTime">
+                    <div>CreateTime: {{questionvo.createdTime}}</div>
+                </el-col>
+
+                <el-col :span="6" v-else>
+                    <div>lastModifiedTime: {{questionvo.lastModifiedTime}}</div>
+                </el-col>
+            </el-row>
         </div>
+
     </el-card>
+<!--    <el-drawer-->
+<!--            title="更新题目"-->
+<!--            :before-close="handleClose"-->
+<!--            v-model="dialog"-->
+<!--            direction="rtl"-->
+<!--            custom-class="question-drawer"-->
+<!--            ref="drawer"-->
+<!--            size="35%"-->
+<!--    >-->
+<!--        <QuestionCreater :dialog="dialog" @closeDialog="closeDialog"/>-->
+
+<!--    </el-drawer>-->
+
+
 </template>
 
 <script>
+    import axios from "axios";
+    import QuestionCreater from "./QuestionCreater";
     export default {
         name: "BriefQuestionCard",
+        components:{
+            // QuestionCreater
+        },
         props: {
-            questionVO: {
-                id:{
-                    type: String,
-                    require: true,
-                    default: "00001"
-                },
-                type1:{
-                    type: Number,
-                    require: true,
-                    default: 0
-                },
-                stem:{
-                    type: String,
-                    require: true,
-                    default: ""
-                },
-                options:{
-                    type: Map,
-                    require: true,
-                    default: {}
-                },
-                answer:{
-                    type: String,
-                    require: true,
-                    default: "A"
-                },
-                keyPoints:{
-                    type: String,
-                    require: true,
-                    default: ""
-                },
-                analysis:{
-                    type: String,
-                    require: true,
-                    default: ""
-                },
-                tags: {
-                    type: Array,
-                    require: true,
-                    default: []
-                },
-                knowledgeId: {
-                    type: Array,
-                    require: true,
-                    default: []
-                }
-            }
+            questionvo: {
+                id: String,
+                type: String,
+                stem: String,
+                options: Map,
+                answer: String,
+                keyPoints: String,
+                analysis: String,
+                tags: Array,
+                knowledgeId: Array,
+                weight: Number,
+                createdTime: Date,
+                lastModifiedTime: Date
+            },
+            totalNum: Number,
+            curNum: Number,
         },
         data(){
             return{
+                isAll: false,
+                dialog: false,
 
             }
         },
         methods: {
-            clickBriefQuestionCard(){
-                this.$router.push({path:"/question/"+this.questionVO.id})
+            updateQuestion(){
+                // alert("update!")
+                this.dialog = true;
+
+            },
+            deleteQuestion(){
+                this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    axios.delete("/api/api/question/"+this.questionvo.id).then(() => {
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功!'
+                            });
+                    }).catch( error => {
+                        console.log(error);
+                        this.$notify.error({
+                            title: '错误',
+                            message: '删除失败'
+                        });
+                    })
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
+                    });
+                });
+                // this.$emit("reclaimQuestionList");
+
+            },
+            expand(){
+                if(!this.isAll){
+                    this.isAll = true;
+                }
+            },
+            withdraw(){
+                if(this.isAll){
+                    this.isAll = false;
+                }
+            },
+            handleClose(){
+                this.dialog = false;
+            },
+            closeDialog(){
+                this.dialog = false;
             }
         }
     }
 </script>
 
 <style scoped>
-    .card-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+    .bQuestion-card{
+        margin: 20px;
+        font-family: "Times New Roman";
+        font-size: 18px;
+        background-color: #fffaf4;
+
     }
 
-    .text {
-        font-size: 16px;
+    .bQuestion-card-body{
+        font-size: 20px;
+        font-family: "Songti SC";
+        align-items: start;
     }
 
-    .item {
-        margin-bottom: 5px;
+    .bQuestion-card-body-options{
+        margin-top: 10px;
+        font-size: 18px;
     }
 
     .box-card {
         /*width: 480px;*/
-        margin: 20px auto;
+        margin: 20px;
+        background-color: #8ac6d1;
     }
 
 </style>

src/components/card/QuestionCreater.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="question-drawer__content">
+        <el-form :model="question">
+            <el-form-item label="题目类型" :label-width="formLabelWidth">
+                <el-select v-model="question.type" placeholder="请选择">
+                    <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="题目题干" :label-width="formLabelWidth">
+                <el-input
+                        type="textarea"
+                        :rows="3"
+                        placeholder="stem"
+                        v-model="question.stem">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="选项和答案" :label-width="formLabelWidth">
+                <div v-if="question.type === 'choice'">
+                    <div class="input-suffix">
+                        <el-row>
+                            <el-col :span="2"><span>A：</span></el-col>
+                            <el-col :span="16">
+                                <el-input
+                                    placeholder="A选项"
+                                    v-model="question.options.A">
+                                </el-input>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div class="input-suffix">
+                        <el-row>
+                            <el-col :span="2"><span>B：</span></el-col>
+                            <el-col :span="16">
+                                <el-input
+                                        placeholder="B选项"
+                                        v-model="question.options.B">
+                                </el-input>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div class="input-suffix">
+                        <el-row>
+                            <el-col :span="2"><span>C：</span></el-col>
+                            <el-col :span="16">
+                                <el-input
+                                        placeholder="C选项"
+                                        v-model="question.options.C">
+                                </el-input>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div class="input-suffix">
+                        <el-row>
+                            <el-col :span="2"><span>D：</span></el-col>
+                            <el-col :span="16">
+                                <el-input
+                                        placeholder="D选项"
+                                        v-model="question.options.D">
+                                </el-input>
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    <div class="input-suffix-bottom">
+                        <el-row>
+                            <el-col :span="3"><span>Answer：</span></el-col>
+                            <el-col :span="15">
+                                <el-input
+                                        placeholder="Answer"
+                                        v-model="question.answer">
+                                </el-input>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+                <div v-else-if="question.type === 'blank'">
+                    <p>填空题</p>
+                </div>
+                <div v-else-if="question.type === 'short_answer'">
+                    <p>简答题</p>
+                </div>
+                <div v-else-if="question.type === 'true_false'">
+                    <p>判断题</p>
+                </div>
+                <div v-else-if="question.type === 'code'">
+                    <p>编程题</p>
+                </div>
+                <div v-else>
+                    <p>未选择题目</p>
+                </div>
+            </el-form-item>
+
+            <el-form-item label="解析" :label-width="formLabelWidth">
+                <el-input
+                        type="textarea"
+                        :rows="3"
+                        placeholder="analysis"
+                        v-model="question.analysis">
+                </el-input>
+            </el-form-item>
+
+            <el-form-item label="难度" :label-width="formLabelWidth">
+                <el-select v-model="question.weight" placeholder="请选择">
+                    <el-option
+                            v-for="item in options1"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="keyPoints" :label-width="formLabelWidth">
+                <el-input
+                        placeholder="keyPoints"
+                        v-model="question.keyPoints">
+                </el-input>
+            </el-form-item>
+
+            <el-form-item label="tags" :label-width="formLabelWidth">
+                <el-checkbox-group v-model="question.tags">
+                    <el-checkbox v-for="tag in chosenTags" :label="tag" :key="tag"></el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+
+            <el-form-item label="knowledgeId" :label-width="formLabelWidth">
+                <el-input
+                        placeholder="keyPoints"
+                        v-model="myknowledgeId">
+                </el-input>
+            </el-form-item>
+
+        </el-form>
+        <div class="question-drawer__footer">
+            <el-button @click="cancelForm">取 消</el-button>
+            <el-button type="primary" @click="submitNewQuestion" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from "axios";
+
+    export default {
+        name: "QuestionCreater",
+        props:{
+            dialog: Boolean,
+        },
+        data(){
+            return{
+                loading: false,
+                formLabelWidth: '100px',
+                timer: null,
+                chosenTags: ["Java", "软工系列", "Python", "Vue", "SpringBoot"],
+                myknowledgeId: '',
+                options: [{
+                    value: 'choice',
+                    label: '选择题'
+                }, {
+                    value: 'blank',
+                    label: '填空题'
+                }, {
+                    value: 'short_answer',
+                    label: '简答题'
+                }, {
+                    value: 'true_false',
+                    label: '判断题'
+                }, {
+                    value: 'code',
+                    label: '编程题'
+                }],
+                options1: [{
+                    value: '1',
+                    label: '难度1'
+                }, {
+                    value: '2',
+                    label: '难度2'
+                }, {
+                    value: '3',
+                    label: '难度3'
+                }, {
+                    value: '4',
+                    label: '难度4'
+                }, {
+                    value: '5',
+                    label: '难度5'
+                }],
+                question: {
+                    id: null,
+                    stem: null,
+                    type: null,
+                    options: {
+                        "A": null,
+                        "B": null,
+                        "C": null,
+                        "D": null
+                    },
+                    keyPoints: null, //未定义
+                    tags: [],
+                    knowledgeId: [],
+                    answer: null,
+                    analysis: null,
+                    weight: null,
+                    createdTime: null
+                }
+            }
+        },
+        methods: {
+            closeDialog(){
+                this.$emit("closeDialog");
+            },
+            handleClose(done) {
+                if (this.loading) {
+                    return;
+                }
+                this.$confirm('确定要提交表单吗？')
+                    .then(_ => {
+                        this.loading = true;
+                        this.timer = setTimeout(() => {
+                            done();
+                            // 动画关闭需要一定的时间
+                            setTimeout(() => {
+                                this.loading = false;
+                            }, 400);
+                        }, 2000);
+                    })
+                    .catch(_ => {});
+            },
+            cancelForm() {
+                this.loading = false;
+                this.$emit('closeDialog');
+                clearTimeout(this.timer);
+            },
+            submitNewQuestion(){
+                console.log(this.question);
+                this.question.knowledgeId.push(this.myknowledgeId);
+                this.question.createdTime = new Date();
+                axios.post("/api/api/question", this.question)
+                    .then(res => {
+                        console.log(res);
+                        this.$notify({
+                            title: '成功',
+                            message: '创建成功',
+                            type: 'success'
+                        });
+
+                    }).catch(err => {
+                        console.log(err);
+                        this.$notify.error({
+                            title: '错误',
+                            message: '创建失败'
+                        });
+                }).finally(() => {
+                    console.log("Question created!");
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .input-suffix {
+        /*display: inline-block;*/
+        /*width: 80px;*/
+        margin-bottom: 10px;
+    }
+    .input-suffix-bottom{
+        margin-top: 30px;
+        margin-bottom: 20px;
+    }
+
+</style>

src/components/card/QuestionGroupCreater.vue

@@ -0,0 +1,122 @@
+<template>
+
+    <div>
+        <el-select v-model="mode" placeholder="请选择模式">
+            <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+            </el-option>
+        </el-select>
+
+        <div class="creator-mode-body">
+            <el-form label="json格式数据" :label-width="formLabelWidth" v-if="mode === 'data'">
+                <el-input
+                        type="textarea"
+                        :rows="3"
+                        placeholder="json数据"
+                        v-model="questionJson">
+                </el-input>
+            </el-form>
+
+            <el-upload v-else-if="mode === 'file'"
+                       class="upload-demo"
+                       drag
+                       action=""
+                       multiple>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <template #tip>
+                    <div class="el-upload__tip">
+                        上传 json 文件，且不超过 500kb
+                    </div>
+                </template>
+            </el-upload>
+
+            <div v-else>
+                未选择模式
+            </div>
+        </div>
+
+
+
+        <div class="question-drawer__footer">
+            <el-button @click="cancelForm">取 消</el-button>
+            <el-button type="primary" @click="submitQuestions" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import axios from "axios";
+
+    export default {
+        name: "QuestionGroupCreater",
+        props: {
+            dialog: Boolean,
+        },
+        data(){
+            return{
+                loading: false,
+                formLabelWidth: '100px',
+                questionJson: null,
+                options: [{
+                    value: 'data',
+                    label: 'json数据'
+                }, {
+                    value: 'file',
+                    label: 'json文件'
+                }],
+                mode: '',
+            }
+        },
+        methods: {
+            cancelForm() {
+                this.loading = false;
+                this.$emit("closeDialog")
+                clearTimeout(this.timer);
+            },
+            submitQuestions(){
+                if(this.mode === 'data'){
+                    let questions = JSON.parse(this.questionJson).questions;
+                    axios.post("/api/api/questions", questions)
+                        .then(res => {
+                            console.log(res);
+                            this.$notify({
+                                title: '成功',
+                                message: '创建成功',
+                                type: 'success'
+                            });
+                        }).catch(err => {
+                        console.log(err);
+                        this.$notify.error({
+                            title: '错误',
+                            message: '创建失败'
+                        });
+                    }).finally(() => {
+                        console.log("Question created!");
+                    })
+                }else if(this.mode === 'file'){
+                    alert("file upload！")
+                }else{
+                    alert("无效！")
+                }
+
+
+            },
+
+        },
+        watch: {
+
+        }
+    }
+</script>
+
+<style scoped>
+    .creator-mode-body{
+        margin: 20px;
+    }
+
+</style>

src/main.js

@@ -6,4 +6,5 @@ import store from './store'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 
+
 createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

vue.config.js

@@ -5,4 +5,18 @@
  */
 module.exports = {
   // 选项...
-}
+    devServer: {
+        proxy: {
+            "/api": {
+                target: "http://localhost:8080",
+                ws: true,
+                changeOrigin: true,
+                pathRewrite: {
+                    "^/api": ""
+                }
+            }
+        }
+    },
+    lintOnSave:false,
+
+}