Leone update questioncard

src/components/MarkdownText.vue

@@ -9,20 +9,43 @@
         props: {
             raw: String
         },
+        watch:{
+            raw:{
+               handler(newval){
+                   console.log(newval);
+               }
+            }
+        },
         data() {
             return {
-                trimmedRaw: ''
+                // trimmedRaw: ''
             }
         },
         methods: {
             markdownToHTML
         },
-        mounted() {
-            this.trimmedRaw = this.raw.trim()
+        // mounted() {
+        //     this.trimmedRaw = this.raw.trim()
+        // },
+        computed:{
+            trimmedRaw(){
+                return this.raw.trim();
+            }
         }
     }
 </script>
 
-<style scoped>
+<style lang="scss">
+    .markdown-content {
+        word-break: break-all;
+        white-space: pre-wrap;
+        margin-top: 16px;
+    p {
+        margin-bottom: 0;
+    }
+    img {
+        max-width: 100%;
+    }
+    }
 
 </style>

src/components/bok/bokMain/Knowledge.vue

@@ -9,6 +9,7 @@
               v-model="filterText">
       </el-input>
       <el-tree
+              node-key="id"
               :data="knowledgeData"
               :props="defaultProps"
               :filter-node-method="filterNode"
@@ -21,7 +22,8 @@
 </template>
 
 <script>
-import axios from 'axios'
+// import axios from 'axios'
+import {knowledgeJson, knowledgeData} from "../../../utils/knowledgeData";
 
 export default {
   name: "Knowledge",
@@ -37,104 +39,31 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    initKnowledge(){
-      for (let i = 0; i < this.knowledgeArray.length; i++) {
-        this.knowledgeArray[i].children = [];
-      }
-    },
-    addKnowledgeByParent(parentKnowledge){
-      for (let i = 0; i < this.knowledgeArray.length; i++) {
-        if(this.knowledgeArray[i].parentId === parentKnowledge.id){
-          parentKnowledge.children.push(this.knowledgeArray[i]);
-          this.totalNum += 1;
-        }
-      }
-    },
-    findKnowledgeById(id){
-      for (let i = 0; i < this.knowledgeArray.length; i++) {
-        if(this.knowledgeArray[i].id === id){
-          return this.knowledgeArray[i];
-        }
-      }
-      return null;
-    },
-    formTreeData(){
-      //由于是三层结构，所以三次for循环就可以解决
-      this.initKnowledge();
-      let root = this.findKnowledgeById("263");//获得根
-
-      this.addKnowledgeByParent(root);
-
-      for (let i of root.children) {
-        // this.expandId.push(i.id);
-        this.addKnowledgeByParent(i);
-      }
-
-      for(let j of root.children){
-        for (let k of j.children) {
-          this.addKnowledgeByParent(k);
-        }
-      }
-
-      //生成最终的格式数据
-      let tempChildren = [];
-      for(let j of root.children){
-        let tempChildren1 = [];
-        for (let k of j.children) {
-          let tempChildren2 = []
-          for(let knowledge of k.children){
-            tempChildren2.push({
-              id: knowledge.id,
-              label: knowledge.abbreviation + " - " + knowledge.name
-            })
-          }
-          tempChildren1.push({
-            id: k.id,
-            label: k.abbreviation + " - " + k.name,
-            children: tempChildren2
-          })
-        }
-        tempChildren.push({
-          id: j.id,
-          label: j.abbreviation + " - " + j.name,
-          children: tempChildren1
-        })
-      }
-
-      this.knowledgeData.push({
-        id: root.id,
-        label: root.abbreviation + " - " + root.name,
-        children: tempChildren
-      })
-      // this.expandId.push(root.id);
-    },
-
   },
   data() {
     return {
       expandId: ["263"],
       filterText: '',
-      knowledgeArray: null,
       knowledgeData: [],
-      totalNum: 0,
       defaultProps: {
         children: 'children',
-        label: 'label'
-      }
+        label: 'label',
+      },
     }
   },
   mounted() {
-    axios.get("/api/api/knowledge",{
-      params:{
-        "abbreviation_keyPoints": '',
-      }}).then(res => {
-      this.knowledgeArray = res.data;
-      this.formTreeData();
-    }).catch(err => {
-      console.log(err);
-    }).finally(() => {
-      console.log("Get knowledge!");
-    });
+    this.knowledgeData = knowledgeData;
+    // axios.get("/api/api/knowledge",{
+    //   params:{
+    //     "abbreviation_keyPoints": '',
+    //   }}).then(res => {
+    //   this.knowledgeArray = res.data;
+    //   this.formTreeData();
+    // }).catch(err => {
+    //   console.log(err);
+    // }).finally(() => {
+    //   console.log("Get knowledge!");
+    // });
   },
 }
 </script>
@@ -156,5 +85,4 @@ export default {
     margin-bottom: 5px;
   }
 
-
 </style>

src/components/bok/bokMain/QuestionRepository/index.vue

@@ -1,26 +1,50 @@
 <template>
-  <h1>Question Repository</h1>
-  <el-button @click="createQuestion">新建题目</el-button>
-  <el-button @click="createQuestionByGruop">新建题目组</el-button>
+  <div class="index-title">
+    <h1>Question Repository</h1>
+  </div>
 
-  <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+(currentPage-1)*pageSize" />
+  <div class="index-operation">
+    <el-button @click="createQuestion">新建题目</el-button>
+    <el-button @click="createQuestionByGruop">新建题目组</el-button>
   </div>
 
+  <div class="index-body">
+    <div class="el-pagination-body">
+      <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              v-model:current-page="currentPage"
+              :page-sizes="[5, 10, 15, 20]"
+              v-model:page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total=this.totalNum
+              v-if="this.questionList.length !== 0"
+      >
+      </el-pagination>
+    </div>
+
+    <div class="QuestionBody">
+      <BriefQuestionCard v-for="(item,index) in questionList"
+                         :key="index"
+                         :questionvo="item" :total-num="totalNum" :cur-num="index+(currentPage-1)*pageSize" />
+    </div>
 
-  <div class="el-pagination">
-    <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[5, 10, 15, 20]"
-            :page-size="pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total=this.questionList.length
-            v-if="this.questionList.length !== 0"
-    >
-    </el-pagination>
+<!--    <el-backtop target=".index-body" :bottom="100">-->
+<!--      <div-->
+<!--              style="{-->
+<!--        height: 100%;-->
+<!--        width: 100%;-->
+<!--        background-color: #f2f5f6;-->
+<!--        box-shadow: 0 0 6px rgba(0,0,0, .12);-->
+<!--        text-align: center;-->
+<!--        line-height: 40px;-->
+<!--        color: #1989fa;-->
+<!--      }"-->
+<!--      >-->
+<!--        UP-->
+<!--      </div>-->
+<!--    </el-backtop>-->
+  <el-backtop></el-backtop>
   </div>
 
   <el-drawer
@@ -70,15 +94,20 @@ export default {
       dialog:false,
       dialog1:false,
       currentPage: 1,
-      pageSize: 10,
+      pageSize: 20,
+      totalNum: 0,
     }
   },
   mounted() {
-    axios.get("/api/api/question")
+    axios.get("/api/api/pageQuestion", {
+      params:{
+        offset: 0,
+        pageSize: this.pageSize
+      }})
             .then(res => {
-              this.info = res;
-              this.questionList = res.data.content
               console.log(res);
+              this.questionList = res.data.content;
+              this.totalNum = res.data.totalElements;
             }).catch(error => {
       console.log(error);
     }).finally(() => {
@@ -129,26 +158,34 @@ export default {
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
+      axios.get("/api/api/pageQuestion", {
+        params:{
+          offset: val-1,
+          pageSize: this.pageSize
+        }})
+              .then(res => {
+                this.questionList = res.data.content;
+              }).catch(error => {
+        console.log(error);
+      }).finally(() => {
+        console.log("change page completed");
+      });
       this.currentPage = val;
     },
-
   },
+  watch: {
+    // questionList(newval, val){
+    //   console.log("Watch changes！");
+    //   console.log(newval);
+    //   console.log(val);
+    // }
+  }
 }
 </script>
 
 <style scoped>
-.qr-wrapper {
-  /*width: 80%;*/
-}
-
-.ql-container {
-  height: auto;
-  width: auto;
-  overflow: auto;
-  border: 1px solid black;
-}
-
-  .search-result{
-    margin: 20px;
+  .el-pagination-body{
+    margin: 20px auto;
   }
+
 </style>

src/components/card/BriefQuestionCard.vue

@@ -26,7 +26,6 @@
                                 <span>no knowledgeId</span>
                             </span>
                         </div>
-
                 </el-col>
 
                 <el-col :span="6"/>
@@ -45,7 +44,8 @@
 
         <div class="bQuestion-card-body">
             <div class="bQuestion-card-body-stem">
-                <markdown-text :raw="'<strong>题目: </strong>'+questionvo.stem"></markdown-text>
+                <MarkdownText :raw="'<strong>题目: </strong>'+questionvo.stem"></MarkdownText>
+<!--                <div v-html="markdownToHTML('<strong>题目: </strong>'+questionvo.stem)" class="markdown-content"></div>-->
             </div>
 
             <div class="bQuestion-card-body-options" v-if="isAll">
@@ -89,20 +89,20 @@
         <div class="bQuestion-card-foot" v-if="isAll">
             <el-row>
                 <el-col :span="3">
-                    <div>State: 已审核</div>
+                    <div><strong>状态: </strong>已审核</div>
                 </el-col>
                 <el-col :span="3">
-                    <div>审核人: 小苏</div>
+                    <div><strong>审核人: </strong>小苏</div>
                 </el-col>
 
-                <el-col :span="10"></el-col>
+                <el-col :span="12"></el-col>
 
-                <el-col :span="8" v-if="!questionvo.lastModifiedTime">
-                    <div>CreateTime: {{questionvo.createdTime}}</div>
+                <el-col :span="6" v-if="!questionvo.lastModifiedTime">
+                    <div><strong>CreateTime: </strong>{{toMyDate(questionvo.createdTime)}}</div>
                 </el-col>
 
-                <el-col :span="8" v-else>
-                    <div>lastModifiedTime: {{questionvo.lastModifiedTime}}</div>
+                <el-col :span="6" v-else>
+                    <div><strong>lastModifiedTime: </strong>{{toMyDate(questionvo.lastModifiedTime)}}</div>
                 </el-col>
             </el-row>
         </div>
@@ -129,6 +129,7 @@
     import QuestionUpdater from "./QuestionUpdater";
     import MarkdownText from "../MarkdownText";
     import {map} from "../../utils/knowledgeMapper";
+    import {markdownToHTML} from "../../utils/markdown";
 
     export default {
         name: "BriefQuestionCard",
@@ -137,36 +138,41 @@
             MarkdownText
         },
         props: {
-            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
-            },
+            // 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,
+            //     blanks: Map,
+            //     inputOutputMapping: Map,
+            //     memoryLimit: Number,
+            //     millisecondLimit: Number,
+            // },
+            questionvo: Object,
             totalNum: Number,
             curNum: Number,
+        },
+        computed: {
+
         },
         data(){
             return{
                 isAll: false,
                 dialog: false,
-                // stem: '题目: '+this.questionvo.stem
-
             }
         },
         methods: {
+            markdownToHTML,
             updateQuestion(){
-                // alert("update!");
                 this.dialog = true;
-
             },
             deleteQuestion(){
                 this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
@@ -219,25 +225,51 @@
             },
             map1(abbreviation){
                 return map(abbreviation);
+            },
+            toMyDate(instant){
+                let date = new Date(instant);
+                var year = date.getFullYear();
+                var month = date.getMonth() + 1;
+                var theDate = date.getDate();
+                var hour = date.getHours();
+                var minute = date.getMinutes();
+                var second = date.getSeconds();
+
+                if ( month < 10 ) { month = '0' + month; }
+                if ( theDate < 10 ) { theDate = '0' + theDate; }
+                if ( hour < 10 ) { hour = '0' + hour; }
+                if ( minute < 10 ) { minute = '0' + minute; }
+                if ( second < 10 ) { second = '0' + second; }
+                return year +"-"+ month +"-" + theDate + " "+ hour +":"+ minute +":"+ second;
             }
         }
     }
 </script>
 
-<style scoped>
+<style lang="scss">
     .bQuestion-card{
         margin: 20px;
         font-family: "Times New Roman";
         font-size: 18px;
         background-color: #fffaf4;
         text-align: left;
-
     }
 
     .bQuestion-card-body{
         font-size: 20px;
         font-family: "Songti SC";
+    }
+
+    p {
+        display: block;
+        margin-block-start: 10px;
+        margin-block-end: 10px;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+    }
 
+    .el-card__header{
+        padding: 10px 15px;
     }
 
     .bQuestion-card-body-options{
@@ -254,4 +286,16 @@
 
     }
 
+    .markdown-content {
+        word-break: break-all;
+        white-space: pre-wrap;
+        margin-top: 16px;
+    p {
+        margin-bottom: 0;
+    }
+    img {
+        max-width: 100%;
+    }
+    }
+
 </style>

src/utils/knowledgeData.js

@@ -0,0 +1,79 @@
+import knowledgeJson from "../assets/knowledge.json"
+
+let knowledgeData = [];
+
+function initKnowledge(){
+    for (let i = 0; i < knowledgeJson.length; i++) {
+        knowledgeJson[i].children = [];
+    }
+}
+function addKnowledgeByParent(parentKnowledge){
+    for (let i = 0; i < knowledgeJson.length; i++) {
+        if(knowledgeJson[i].parentId === parentKnowledge.id){
+            parentKnowledge.children.push(knowledgeJson[i]);
+        }
+    }
+}
+function findKnowledgeById(id){
+    for (let i = 0; i < knowledgeJson.length; i++) {
+        if(knowledgeJson[i].id === id){
+            return knowledgeJson[i];
+        }
+    }
+    return null;
+}
+function formTreeData(){
+    //由于是三层结构，所以三次for循环就可以解决
+    initKnowledge();
+    let root = findKnowledgeById("263");//获得根
+
+    addKnowledgeByParent(root);
+
+    for (let i of root.children) {
+        addKnowledgeByParent(i);
+    }
+
+    for(let j of root.children){
+        for (let k of j.children) {
+            addKnowledgeByParent(k);
+        }
+    }
+
+    //生成最终的格式数据
+    let tempChildren = [];
+    for(let j of root.children){
+        let tempChildren1 = [];
+        for (let k of j.children) {
+            let tempChildren2 = []
+            for(let knowledge of k.children){
+                tempChildren2.push({
+                    id: knowledge.id,
+                    label: knowledge.abbreviation + " - " + knowledge.name
+                })
+            }
+            tempChildren1.push({
+                id: k.id,
+                label: k.abbreviation + " - " + k.name,
+                children: tempChildren2
+            })
+        }
+        tempChildren.push({
+            id: j.id,
+            label: j.abbreviation + " - " + j.name,
+            children: tempChildren1
+        })
+    }
+
+    knowledgeData.push({
+        id: root.id,
+        label: root.abbreviation + " - " + root.name,
+        children: tempChildren
+    })
+}
+
+formTreeData();
+
+export {
+    knowledgeJson,
+    knowledgeData
+}