feat: 优化后台操作交互。

modules/practice.js

@@ -28,6 +28,11 @@ app.get('/practice', async (req, res) => {
         // 用户第一次进入练习板块
         await userQuery.update(User).set({current_p_id: 1}).where("id = :id", { id:userId }).execute();
         currentPId = 1;
+        await result.forEachAsync(async resultItem => {
+          const c_id = resultItem.id;
+          let utopInfo = await utopQuery.where('c_id=:c_id',{c_id}).andWhere('u_id=:u_id',{u_id:userId}).andWhere("is_finished=1").getMany();
+          resultItem.ac_num = utopInfo.length || 0;
+        });
       } else {
         await result.forEachAsync(async resultItem => {
           const c_id = resultItem.id;
@@ -294,7 +299,7 @@ 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();
+    let problemInfo = await query.select('id').addSelect('title').getRawMany();
     res.send({ problemInfo});
   } catch(e) {
     res.send({ error_code: e.errno, error_msg: '失败' });

views/admin_classify.ejs

@@ -11,6 +11,11 @@
         height:85%;
         overflow: auto;
     }
+    .ui.modal>.close {
+        top: 1.0535rem;
+        right: 1rem;
+        color: rgba(0, 0, 0, .87);
+    }
 </style>
 <div id="classify" v-cloak>
     <div class="ui modal classify">
@@ -32,6 +37,10 @@
                     <label>练习阶段顺序</label>
                     <el-input-number disabled v-model="order" :min="1" :max="calcOrderMax" label="练习阶段顺序"></el-input-number>
                 </div>
+                <div class="field">
+                    <label>当前练习阶段已经选择的题</label>
+                    <el-tag @close="handleClose(item)" closable v-for="item in multipleSelection" style="margin-right:5px">#{{item.id}}{{item.title}}</el-tag>
+                </div>
                 <div class="field required" :class="{ error: multipleSelection.length === 0 }">
                     <label>题目选择(至少包含一道题)</label>
                     <el-table
@@ -39,7 +48,7 @@
                             :data="problemList"
                             tooltip-effect="dark"
                             style="width: 100%"
-                            @selection-change="handleSelectionChange"
+                            @select="handleSelectionChange"
                     >
                         <el-table-column
                                 type="selection"
@@ -62,7 +71,7 @@
                             :total="problemCount">
                     </el-pagination>
                 </div>
-                <button class="ui button" @click="submitInfo">{{calcModalTitle}}</button>
+                <button class="ui button" @click="submitInfo">保存</button>
             </div>
         </div>
     </div>
@@ -113,26 +122,32 @@
       classifyIntro: '',
       classifyArray: [],
       classifyId: -1,
-      problemOptions: [],
       loading: false,
       problemList: [],
+      allproblemList: [],
       usedProblemId: [],
       multipleSelection: [],
       problemCount: -1,
-      currentPage:1
+      currentPage:1,
+      disabledId: [],
     },
     created: function() {
       this.getClassifyInfo();
       this.getCount();
     },
     methods: {
+      handleClose(tag) {
+        const deleteItem = this.multipleSelection.splice(this.multipleSelection.indexOf(tag), 1);
+        this.toggleSelection(deleteItem)
+      },
       getCount: function(){
         let that = this;
         $.ajax({
           url: '/api/pagination/allproblem',
           type: 'GET',
           success: function (data) {
-            that.problemCount = parseInt(data.problemInfo.count);
+            that.problemCount = parseInt(data.problemInfo.length);
+            that.allproblemList = data.problemInfo;
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
             alert('创建失败');
@@ -140,52 +155,37 @@
         })
       },
       disableCheckbox: function(row) {
-        const currentIdArray = this.problemIdArray.map((function(item){
+        return !this.disabledId.includes(row.id);
-          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) {
+        console.log(rows);
         if (rows) {
           rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
+            this.$refs.multipleTable.toggleRowSelection(row, true);
           });
         } else {
           this.$refs.multipleTable.clearSelection();
         }
       },
       handlePageChange(page) {
-        this.selectProblem();
+        this.selectProblem(this.multipleSelection);
         this.getProblemPagination(page);
-        if (this.classifyId) {
-          this.getClassifyInfos(this.classifyId);
-        }
       },
       getProblemPagination(page) {
         let that = this;
-        $.ajax({
+        this.problemList = this.allproblemList.slice((page - 1)*10, (page - 1)*10+10);
-          url: '/api/pagination',
+        this.$nextTick(function(){
-          type: 'GET',
+          that.toggleSelection(that.multipleSelection);
-          data: {
-            pagesize: 10,
-            page: page - 1
-          },
-          success: function (data) {
-            that.problemList = data.problemInfo;
-          },
-          error: function (XMLHttpRequest, textStatus, errorThrown) {
-            alert('创建失败');
-          }
         })
       },
-      handleSelectionChange(val) {
+      handleSelectionChange(val, row) {
-        this.multipleSelection = this.multipleSelection.concat(val);
+        console.log(val);
+        const multipleSelectionId = this.multipleSelection.map(item => item.id);
+        if (multipleSelectionId.includes(row.id)) {
+          this.multipleSelection.splice(this.multipleSelection.indexOf(row), 1)
+        } else {
+          this.multipleSelection.push(row);
+        }
       },
       getClassifyInfo: function() {
         let that = this;
@@ -204,13 +204,12 @@
       resetModal: function() {
         this.classifyName = '';
         this.classifyIntro = '';
-        this.problemIdArray = [];
+        // this.problemIdArray = [];
         this.classifyId = -1;
-        this.problemOptions=[];
         this.order = this.calcOrderMax;
       },
-      selectProblem: function() {
+      selectProblem: function(array) {
-        this.toggleSelection(this.problemIdArray)
+        this.toggleSelection(array)
       },
       getClassifyInfos: function(id){
         let that = this;
@@ -223,10 +222,20 @@
                 const {classifyInfo: {id, intro, name, order}, problem} = data;
                 that.classifyName = name;
                 that.classifyIntro = intro;
-                that.problemIdArray = that.problemList.filter(function(problemItem){
+                that.problemIdArray = that.allproblemList.filter(function(problemItem){
                   return problem.includes(problemItem.id)
                 });
-                that.toggleSelection(that.problemIdArray)
+                const currentIdArray = that.problemIdArray.map((function(item){
+                  return item.id;
+                }));
+                function findDifference(source, target){
+                  return target.filter(function(item){
+                    return !source.includes(item);
+                  })
+                }
+                that.disabledId = findDifference(currentIdArray, that.usedProblemId);
+                that.multipleSelection = that.problemIdArray;
+                that.toggleSelection(that.multipleSelection)
                 that.order = order;
               }
             },
@@ -238,7 +247,7 @@
       },
       show: function(id){
         let that = this;
-        this.getProblemPagination(1)
+        this.getProblemPagination(1);
         if (id) {
           this.classifyId = id;
           this.getClassifyInfos(id);
@@ -261,9 +270,7 @@
             name: this.classifyName,
             intro: this.classifyIntro,
             order: this.order,
-            problemIdArray: [...new Set(this.multipleSelection.map(function(item){
+            problemIdArray: this.multipleSelection.map(item=>item.id)
-              return item.id
-            }))]
           }
           console.log(obj.problemIdArray);
           if (this.classifyId === -1) {
@@ -310,7 +317,6 @@
               }
             });
           }
-
         }
       }
     },