feat: 优化管理中心里选题时的操作交互。

modules/practice.js

@@ -284,6 +284,28 @@ app.put('/api/practice/classify/update/:id', async (req, res) => {
   }
 });
 
+app.get('/api/pagination/allproblem', async (req, res) => {
+  try {
+    let query = await Problem.createQueryBuilder();
+    let problemInfo = await query.select('COUNT(*)', 'count').getRawOne();
+    res.send({ problemInfo});
+  } catch(e) {
+    res.send({ error_code: e.errno, error_msg: '失败' });
+  }
+});
+
+app.get('/api/pagination', async (req, res) => {
+  let pagesize = parseInt(req.query.pagesize);
+  let page = parseInt(req.query.page);
+  try {
+    let query = await Problem.createQueryBuilder();
+    let problemInfo = await query.limit(pagesize).offset(pagesize*page).getMany();
+    res.send({ problemInfo});
+  } catch(e) {
+    res.send({ error_code: e.errno, error_msg: '失败' });
+  }
+});
+
 app.get('/api/getProblem/:id', async (req, res) => {
   let id = parseInt(req.params.id);
   try {
@@ -303,10 +325,6 @@ app.get('/api/practice/all', async (req, res) => {
     result.sort(function(a,b) {
       return a.order - b.order;
     })
-    // if (result.length !== 0) {
-    //   const currentClassifyId = result[0].id;
-    //
-    // }
     let problem = await CToP.queryAll(ctopQuery);
     res.send({ result, problem});
   } catch(e) {

views/admin_classify.ejs

@@ -28,26 +28,34 @@
                     <label>练习阶段顺序</label>
                     <el-input-number disabled v-model="order" :min="1" :max="calcOrderMax" label="练习阶段顺序"></el-input-number>
                 </div>
-                <div class="field required" :class="{ error: problemIdArray.length === 0 }">
+                <div class="field required" :class="{ error: multipleSelection.length === 0 }">
                     <label>题目选择(至少包含一道题)</label>
-                    <el-select
+                    <el-table
-                            style="width:100%"
+                            ref="multipleTable"
-                            v-model="problemIdArray"
+                            :data="problemList"
-                            multiple
+                            tooltip-effect="dark"
-                            filterable
+                            style="width: 100%"
-                            remote
+                            @selection-change="handleSelectionChange"
-                            reserve-keyword
+                    >
-                            placeholder="请输入关键词"
+                        <el-table-column
-                            :remote-method="remoteMethod"
+                                type="selection"
-                            :loading="loading">
+                                :selectable="disableCheckbox"
-                        <el-option
+                                width="55">
-                                v-for="item in problemOptions"
+                        </el-table-column>
-                                :key="item.value"
+                        <el-table-column
-                                :label="item.label"
+                                prop="id"
-                                :disabled="item.disabled"
+                                label="题目id">
-                                :value="item.value">
+                        </el-table-column>
-                        </el-option>
+                        <el-table-column
-                    </el-select>
+                                prop="title"
+                                label="题目标题">
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                            @current-change="handlePageChange"
+                            layout="prev, pager, next"
+                            :total="problemCount">
+                    </el-pagination>
                 </div>
                 <button class="ui button" @click="submitInfo">{{calcModalTitle}}</button>
             </div>
@@ -102,45 +110,78 @@
       classifyId: -1,
       problemOptions: [],
       loading: false,
+      problemList: [],
+      usedProblemId: [],
+      multipleSelection: [],
+      problemCount: -1
     },
     created: function() {
       this.getClassifyInfo();
+      this.getCount();
     },
     methods: {
-      remoteMethod(query) {
+      getCount: function(){
         let that = this;
-        if (query !== '') {
+        $.ajax({
-          if (this.usedProblemId.includes(parseInt(query))) {
+          url: '/api/pagination/allproblem',
-            this.$message({
+          type: 'GET',
-              message: '这道题已经分配过',
+          success: function (data) {
-              type: 'warning'
+            console.log(data.problemInfo.count);
-            });
+            that.problemCount = parseInt(data.problemInfo.count);
-          } else {
+          },
-            this.loading = true;
+          error: function (XMLHttpRequest, textStatus, errorThrown) {
-            setTimeout(() => {
+            alert('创建失败');
-              $.ajax({
-                url: `/api/v2/search/problems/${query}`,
-                type: 'GET',
-                success: function (data) {
-                  that.problemOptions = data.results.map((item) => {
-                    return {
-                      id: item.value,
-                      label: item.name,
-                      value: item.value,
-                    }
-                  })
-                },
-                error: function (XMLHttpRequest, textStatus, errorThrown) {
-                  alert('创建失败');
-                }
-              });
-              this.loading = false;
-            }, 200);
           }
+        })
+      },
+      disableCheckbox: function(row) {
+        const currentIdArray = this.problemIdArray.map((function(item){
+          return item.id;
+        }));
+        function findDifference(source, target){
+          return target.filter(function(item){
+            return !source.includes(item);
+          })
+        }
+        const disabledId = findDifference(currentIdArray, this.usedProblemId)
+        return !disabledId.includes(row.id);
+      },
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
         } else {
-          this.options = [];
+          this.$refs.multipleTable.clearSelection();
         }
       },
+      handlePageChange(page) {
+        this.selectProblem();
+        this.getProblemPagination(page);
+        if (this.classifyId) {
+          this.getClassifyInfos(this.classifyId);
+        }
+      },
+      getProblemPagination(page) {
+        let that = this;
+        $.ajax({
+          url: '/api/pagination',
+          type: 'GET',
+          data: {
+            pagesize: 10,
+            page: page - 1
+          },
+          success: function (data) {
+            that.problemList = data.problemInfo;
+          },
+          error: function (XMLHttpRequest, textStatus, errorThrown) {
+            alert('创建失败');
+          }
+        })
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
       getClassifyInfo: function() {
         let that = this;
         $.ajax({
@@ -163,10 +204,12 @@
         this.problemOptions=[];
         this.order = this.calcOrderMax;
       },
-      show: function(id){
+      selectProblem: function() {
+        this.toggleSelection(this.problemIdArray)
+      },
+      getClassifyInfos: function(id){
         let that = this;
-        if (id) {
+        if (id !== -1) {
-          this.classifyId = id;
           $.ajax({
             url: `/api/practice/classify/${id}`,
             type: 'GET',
@@ -175,33 +218,27 @@
                 const {classifyInfo: {id, intro, name, order}, problem} = data;
                 that.classifyName = name;
                 that.classifyIntro = intro;
-                that.problemIdArray = problem;
+                that.problemIdArray = that.problemList.filter(function(problemItem){
+                  return problem.includes(problemItem.id)
+                });
+                that.toggleSelection(that.problemIdArray)
                 that.order = order;
-                problem.forEach(function(problemId) {
-                  $.ajax({
-                    url: `/api/v2/search/problems/${problemId}`,
-                    type: 'GET',
-                    success: function (data) {
-                      that.problemOptions = data.results.map((item) => {
-                        return {
-                          id: item.value,
-                          label: item.name,
-                          disabled: true,
-                          value: item.value,
-                        }
-                      })
-                    },
-                    error: function (XMLHttpRequest, textStatus, errorThrown) {
-                      alert('创建失败');
-                    }
-                  });
-                })
               }
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
               alert('创建失败');
             }
           });
+        }
+      },
+      show: function(id){
+        let that = this;
+        console.log(id);
+        this.getProblemPagination(1)
+        if (id) {
+          this.classifyId = id;
+          // this.getProblemPagination(1)
+          this.getClassifyInfos(id);
         } else {
           this.resetModal();
         }
@@ -215,12 +252,14 @@
         let that = this;
         let name = this.classifyName;
         let intro = this.classifyIntro;
-        if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100) && this.problemIdArray.length > 0) {
+        if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100) && this.multipleSelection.length > 0) {
           const obj = {
             name: this.classifyName,
             intro: this.classifyIntro,
             order: this.order,
-            problemIdArray: this.problemIdArray
+            problemIdArray: this.multipleSelection.map(function(item){
+              return item.id
+            })
           }
           if (this.classifyId === -1) {
             $.ajax({