feat: 题库页面的处理逻辑

src/components/card/QuestionPackage.vue → src/components/QuestionItem/PackageItem.vue

@@ -31,7 +31,7 @@ export default {
       const _this = this
 
       //
-      _this.$router.push({path: "/module/"+this.moduleId})
+      // _this.$router.push({path: "/module/"+this.moduleId})
     }
   },
 }

src/components/bok/bokMain/Collection.vue

@@ -1,27 +1,16 @@
 <template>
   <div>
     <h1>Collection</h1>
-    <question-list-item v-for="(item, index) in collectionList"
-                        :name="'name' + item"
-                        :description="'description'+item">
-    </question-list-item>
   </div>
 </template>
 
 <script>
-import QuestionListItem from "@/components/card/QuestionListItem";
 
 export default {
   name: "Collection",
   components: {
-    "question-list-item": QuestionListItem,
   },
   data() {
-    return {
-      collectionList: [
-        1,2,3,4,5
-      ],
-    }
   },
 }
 </script>

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

@@ -1,140 +1,190 @@
 <template>
   <div class="question-repository">
     <h1>Question Repository</h1>
-<!--    <div>-->
-<!--      <el-select v-model="select_value" filterable placeholder="请选择">-->
-<!--        <el-option-->
-<!--                v-for="item in options"-->
-<!--                :key="item.value"-->
-<!--                :label="item.label"-->
-<!--                :value="item.value">-->
-<!--        </el-option>-->
-<!--      </el-select>-->
-<!--    </div>-->
-    <ul v-if="select_value === '选项1'">
-      <li v-for="(item, index) in packages">
-        <question-package :name="item.name" :description="item.description"
-                          :logo="item.logo" :user="item.user"/>
-      </li>
-    </ul>
-    <div v-else-if="select_value === '选项2'">
-      <el-row>
-        <el-col :span="24" v-for="(item, index) in briefQuestionList">
-          <BriefQuestionCard :question-v-o="item"/>
-        </el-col>
-      </el-row>
+    <div v-if="!multipleMode">
+      <el-button icon="el-icon-search" type="primary">搜索</el-button>
+      <el-button icon="el-icon-folder-add" type="success">新建</el-button>
+      <el-button @click="clickMulSelect" icon="el-icon-more" type="warning">批量处理</el-button>
     </div>
     <div v-else>
-      <h1>其他排列顺序，敬请期待</h1>
+      <el-button type="danger" icon="el-icon-delete" @click="clickMulDelete">删除</el-button>
+      <el-button @click="multipleMode = !multipleMode" type="info" icon="el-icon-finished">完成
+      </el-button>
     </div>
+    <!--    <div>-->
+    <!--      <el-select v-model="select_value" filterable placeholder="请选择">-->
+    <!--        <el-option-->
+    <!--                v-for="item in options"-->
+    <!--                :key="item.value"-->
+    <!--                :label="item.label"-->
+    <!--                :value="item.value">-->
+    <!--        </el-option>-->
+    <!--      </el-select>-->
+    <!--    </div>-->
+    <!--    <ul v-if="select_value === '选项1'">-->
+    <ul>
+      <li v-if="!multipleMode" v-for="(item, index) in packages">
+        <question-package :name="item.name" :description="item.description" :logo="item.logo" :user="item.user"/>
+      </li>
+      <li v-if="multipleMode" v-for="(item, index) in packages">
+        <el-checkbox v-model="multipleChoices[index]"></el-checkbox>
+        <question-package :name="item.name" :description="item.description" :logo="item.logo" :user="item.user"/>
+      </li>
+    </ul>
+    <!--    <div v-else-if="select_value === '选项2'">-->
+    <!--      <el-row>-->
+    <!--        <el-col :span="24" v-for="(item, index) in briefQuestionList">-->
+    <!--          <BriefQuestionCard :question-v-o="item"/>-->
+    <!--        </el-col>-->
+    <!--      </el-row>-->
+    <!--    </div>-->
+    <!--    <div v-else>-->
+    <!--      <h1>其他排列顺序，敬请期待</h1>-->
+    <!--    </div>-->
   </div>
 </template>
 
 <script>
-  import QuestionPackage from "../../../card/QuestionPackage";
-  import BriefQuestionCard from "../../../card/BriefQuestionCard";
+import QuestionPackage from "../../../QuestionItem/PackageItem";
+import BriefQuestionCard from "../../../card/BriefQuestionCard";
 
-  export default {
-    name: "QuestionRepository",
-    components:{
-      BriefQuestionCard,
-      "question-package":QuestionPackage,
+export default {
+  name: "QuestionRepository",
+  components: {
+    BriefQuestionCard,
+    "question-package": QuestionPackage,
+  },
+  data() {
+    return {
+      // 是否为多选模式
+      multipleMode: false,
+      // 对应多选模式下的选项，等前后端对接时可能要改具体的数据结构
+      multipleChoices: [],
+
+      // options: [{
+      //   value: '选项1',
+      //   label: 'Modules'
+      // }, {
+      //   value: '选项2',
+      //   label: 'UnDo'
+      // }, {
+      //   value: '选项3',
+      //   label: 'Others'
+      // }],
+      // select_value: '选项1',
+      packages: [
+        {
+          name: 'java',
+          description: 'thinking in java',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: "user1",
+        },
+        {
+          name: 'c',
+          description: 'c primer plus',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: 'user2',
+        },
+        {
+          name: 'python',
+          description: 'mooctest.net',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: 'user3',
+        },
+        {
+          name: 'lol',
+          description: 'league of legends',
+          logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
+          user: 'gamer',
+        }
+      ],
+      // briefQuestionList: [
+      //   {
+      //     id: "00001",
+      //     type1: 0,
+      //     stem: "小苏今年几岁了？",
+      //     options: {
+      //       "A": "15",
+      //       "B": "25",
+      //       "C": "18",
+      //       "D": "22"
+      //     },
+      //     blanks: null,
+      //     answer: "D",
+      //     keyPoints: "年龄",
+      //     analysis: "小苏是2000年出生了，所以得出今年其虚岁为22岁。",
+      //     tags: ['苏学', '年龄'],
+      //     knowledgeId: ['计算']
+      //   },
+      //   {
+      //     id: "00002",
+      //     type1: 0,
+      //     stem: "小苏有多牛？",
+      //     options: {
+      //       "A": "相当牛",
+      //       "B": "很牛",
+      //       "C": "不牛",
+      //       "D": "421宿舍之最牛"
+      //     },
+      //     blanks: null,
+      //     answer: "D",
+      //     keyPoints: "能力",
+      //     analysis: "小苏是421能力最强，素质最好的一位，所以肯定是421宿舍之最牛！",
+      //     tags: ['苏学', '能力'],
+      //     knowledgeId: ['常识']
+      //   }
+      // ]
+    }
+  },
+  methods: {
+    // 点击批量处理
+    clickMulSelect(){
+      const _this = this
+
+      _this.multipleChoices = [] // 可能需要改的数据结构
+      for(let i = 0;i<_this.packages.length;i++){
+        _this.multipleChoices.push(false)
+      }
+
+      _this.multipleMode = !_this.multipleMode
     },
-    data(){
-      return {
-        options: [{
-          value: '选项1',
-          label: 'Modules'
-        }, {
-          value: '选项2',
-          label: 'UnDo'
-        }, {
-          value: '选项3',
-          label: 'Others'
-        }],
-        select_value: '选项1',
-        packages:[
-          {
-            name: 'java',
-            description: 'thinking in java',
-            logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
-            user: "user1",
-          },
-          {
-            name: 'c',
-            description: 'c primer plus',
-            logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
-            user: 'user2',
-          },
-          {
-            name: 'python',
-            description: 'mooctest.net',
-            logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
-            user: 'user3',
-          },
-          {
-            name: 'lol',
-            description: 'league of legends',
-            logo: 'https://mjh1.oss-cn-hangzhou.aliyuncs.com/seecoder/good.png',
-            user: 'gamer',
-          }
-        ],
-        briefQuestionList: [
-          {
-            id: "00001",
-            type1: 0,
-            stem: "小苏今年几岁了？",
-            options: {
-              "A": "15",
-              "B": "25",
-              "C": "18",
-              "D": "22"
-            },
-            blanks: null,
-            answer: "D",
-            keyPoints: "年龄",
-            analysis: "小苏是2000年出生了，所以得出今年其虚岁为22岁。",
-            tags: ['苏学', '年龄'],
-            knowledgeId: ['计算']
-          },
-          {
-            id: "00002",
-            type1: 0,
-            stem: "小苏有多牛？",
-            options: {
-              "A": "相当牛",
-              "B": "很牛",
-              "C": "不牛",
-              "D": "421宿舍之最牛"
-            },
-            blanks: null,
-            answer: "D",
-            keyPoints: "能力",
-            analysis: "小苏是421能力最强，素质最好的一位，所以肯定是421宿舍之最牛！",
-            tags: ['苏学', '能力'],
-            knowledgeId: ['常识']
-          }
-        ]
 
+    // 批量处理时点击删除
+    clickMulDelete(){
+      const _this = this
+
+      let tmp = _this.packages.filter(function (item, index) {
+        return !_this.multipleChoices[index]
+      })
 
+      _this.multipleChoices = [] // 可能需要改的数据结构
+      for(let i = 0;i<_this.packages.length;i++){
+        _this.multipleChoices.push(false)
       }
+
+      _this.packages = tmp
     },
-    methods:{
-    }
   }
+}
 </script>
 
 <style scoped>
-  .question-repository{
-    padding: 20px;
-  }
+.question-repository {
+  padding: 20px;
+}
 
-  ol, ul{
-    list-style: none;
-  }
+ol, ul {
+  list-style: none;
+}
 
-  li {
-    display: inline-block;
-    text-align: -webkit-match-parent;
-  }
+li {
+  display: inline-block;
+  text-align: -webkit-match-parent;
+}
+
+/*span.el-checkbox__input {*/
+/*  position: absolute;*/
+/*  top: 0px;*/
+/*  left: 0px;*/
+/*}*/
 </style>

src/components/card/QuestionListItem.vue

@@ -1,102 +0,0 @@
-<template>
-  <div class="question-list-item" @click="clickQuestionItem">
-<!--    <el-col :span="8">-->
-      <el-card shadow="hover">
-        <span>{{name}}: {{description}}</span>
-      </el-card>
-<!--    </el-col>-->
-<!--      <el-card class="box-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>-->
-<!--          </template>-->
-<!--          <div  class="text item">-->
-<!--              <h3 v-if="questionVO.type1 === 0">题型：选择题</h3>-->
-<!--              <h3 v-else>题型：其它类型</h3>-->
-<!--              <h4>{{questionVO.stem}}</h4>-->
-<!--          </div>-->
-<!--      </el-card>-->
-  </div>
-</template>
-
-<script>
-export default {
-  name: "QuestionListItem",
-  props: {
-    name: String,
-    description: String,
-      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: []
-          }
-      }
-
-  },
-  methods:{
-    clickQuestionItem(){
-      const _this = this
-
-      alert(_this.name)
-    },
-    clickBriefQuestionCard(){
-
-    }
-  },
-}
-</script>
-
-<style scoped>
-.question-list-item{
-  width: 90%;
-  padding: 10px;
-  margin: auto;
-  cursor: pointer;
-}
-</style>

src/router/index.js

@@ -66,11 +66,6 @@ const routes = [
       },
     ]
   },
-  {
-    path: "/module/:moduleId",
-    name: 'Module',
-    component: () => import('../views/Module')
-  }
 ]
 
 const router = createRouter({

src/views/Module.vue

@@ -1,36 +0,0 @@
-<template>
-<!--    <Q_NavBar></Q_NavBar>-->
-    <h1>{{moduleId}}</h1>
-    <QuestionListItem v-for="(item, index) in moduleArray"
-                        :name="'name' + item"
-                        :description="'description'+item">
-    </QuestionListItem>
-
-</template>
-
-<script>
-    // import Q_NavBar from "@/components/question/NavBar"
-    import QuestionListItem from "../components/card/QuestionListItem";
-    export default {
-        name: "Module",
-        components:{
-            QuestionListItem,
-            // Q_NavBar
-        },
-        data(){
-            return{
-                moduleId: "",
-                moduleArray: [1,2,3,4,5]
-            }
-        },
-        mounted() {
-            const _this = this
-            let path = _this.$route.path.split("/")
-            _this.moduleId = Number(path[path.length - 1])
-        },
-    }
-</script>
-
-<style scoped>
-
-</style>