提交一下 vip学员列表优化

1

src/views/vipClass/vipDetail/components/vipStudentList.vue

@@ -24,7 +24,13 @@
           <p>VIP退费规则：</p>
           <p>预计课程单价*课时数-课程标准单价*已完成课时数）*0.8</p>
         </div>
-        <el-button type="text" style="color: red"  icon="el-icon-question" slot="reference">退费说明</el-button>
+        <el-button
+          type="text"
+          style="color: red"
+          icon="el-icon-question"
+          slot="reference"
+          >退费说明</el-button
+        >
       </el-popover>
     </div>
 
@@ -99,7 +105,12 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-dialog title="学员列表" width="70%" :visible.sync="maskVisible">
+    <el-dialog
+      title="学员列表"
+      width="70%"
+      :visible.sync="maskVisible"
+      v-if="maskVisible"
+    >
       <el-form :model="maskForm" :inline="true" @submit.native.prevent>
         <el-form-item>
           <el-input
@@ -117,9 +128,13 @@
       </el-form>
       <el-table
         :data="maskStudentList"
+        ref="maskStudentList"
         :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        @selection-change="handleSelectionChange"
+        @select="onTableSelect"
+        row-key="id"
       >
-        <el-table-column label="" width="55">
+        <!-- <el-table-column label="" width="55">
           <template slot-scope="scope">
             <el-radio
               v-model.trim="activeStudent"
@@ -128,7 +143,8 @@
               >&nbsp</el-radio
             >
           </template>
-        </el-table-column>
+        </el-table-column> -->
+        <el-table-column type="selection" width="55"> </el-table-column>
         <el-table-column
           prop="userName"
           align="center"
@@ -157,14 +173,14 @@
           </template>
         </el-table-column>
         <el-table-column prop="studentId" label="线上课单价">
+          <!--    v-if="activeStudent == scope.row.id" 202109/10跟辜经理确认过所有乐理课也不能改钱-->
           <template slot-scope="scope">
             <el-input-number
-              v-if="activeStudent == scope.row.id"
               size="mini"
               style="width: 90% !important"
               class="number-input"
               v-model="scope.row.onlineClassesUnitPrice"
-              :disabled="!vipDetail.musicTheory"
+              :disabled="true"
               :controls="false"
               :min="0"
               placeholder="线上课单价"
@@ -172,14 +188,14 @@
           </template>
         </el-table-column>
         <el-table-column prop="studentId" label="线下课单价">
+          <!--    v-if="activeStudent == scope.row.id" -->
           <template slot-scope="scope">
             <el-input-number
-              v-if="activeStudent == scope.row.id"
               size="mini"
               style="width: 90% !important"
               class="number-input"
               v-model="scope.row.offlineClassesUnitPrice"
-              :disabled="!vipDetail.musicTheory"
+              :disabled="true"
               :controls="false"
               :min="0"
               placeholder="线下课单价"
@@ -188,11 +204,9 @@
         </el-table-column>
       </el-table>
       <pagination
-        save-key="vipDetail-vipStudentList"
-        sync
         :total.sync="rules.total"
         :page.sync="rules.page"
-        :limit.sync="rules.limit"
+        :limit="rules.limit"
         :page-sizes="rules.page_size"
         @pagination="getList"
       />
@@ -442,6 +456,8 @@ export default {
       },
       teacherList: [],
       vipDetail: {},
+      deleteList: [],
+      isDetele: false,
     };
   },
   mounted() {
@@ -567,7 +583,6 @@ export default {
       }
     },
     getList() {
-      console.log(this.id);
       let search = this.maskForm.search || null;
       getHaveCourseBalanceStudents({
         vipGroupId: this.id,
@@ -579,48 +594,128 @@ export default {
         if (res.code == 200) {
           this.rules.total = res.data.total;
           this.maskStudentList = res.data.rows;
+          let idList = this.deleteList.map((course) => {
+            return course.id;
+          });
+          this.isDetele = true;
+          this.$nextTick(() => {
+            this.maskStudentList.forEach((course) => {
+              if (idList.indexOf(course.id) != -1) {
+                this.$refs.maskStudentList.toggleRowSelection(course, true);
+              }
+            });
+            this.isDetele = false;
+          });
+
           this.maskStudentList.forEach((stu) => {
             stu.offlineClassesUnitPrice
               ? stu.offlineClassesUnitPrice
-              : (stu.offlineClassesUnitPrice = this.vipDetail?.offlineClassesUnitPrice);
+              : (stu.offlineClassesUnitPrice =
+                  this.vipDetail?.offlineClassesUnitPrice);
             stu.onlineClassesUnitPrice
               ? stu.onlineClassesUnitPrice
-              : (stu.onlineClassesUnitPrice = this.vipDetail?.onlineClassesUnitPrice);
+              : (stu.onlineClassesUnitPrice =
+                  this.vipDetail?.onlineClassesUnitPrice);
           });
           this.maskVisible = true;
         }
       });
     },
+    handleSelectionChange(arr) {
+      if (arr.length > 0) {
+        // 有可能加 有可能减
+        this.deleteList = this.deleteList.concat(arr);
+        // 去重
+        this.deleteList = this.$helpers.lodash.uniqBy(this.deleteList, "id");
+      }
+      // else if(){}
+      else {
+        if (this.isDetele) return;
+        // 有2种 1是新页
+        // 2是点击反选
+        let idList = this.deleteList.map((course) => {
+          return course.id;
+        });
+        this.$nextTick(() => {
+          let tableIdList = [];
+          this.maskStudentList.forEach((course) => {
+            tableIdList.push(course.id);
+            if (idList.indexOf(course.id) != -1) {
+              this.$refs.maskStudentList.toggleRowSelection(course, false);
+              // 删除这个元素
+            }
+          });
+          this.deleteList = this.$helpers.lodash.remove(
+            this.deleteList,
+            function (item) {
+              return tableIdList.indexOf(item.id) == -1;
+            }
+          );
+          if (this.deleteList.length <= 0) {
+            this.clearCom();
+          }
+        });
+      }
+    },
+    onTableSelect(rows, row) {
+      let idList = this.deleteList.map((course) => {
+        return course.id;
+      });
+      if (idList.indexOf(row.id) != -1) {
+        this.deleteList.splice(idList.indexOf(row.id), 1);
+        if (this.deleteList.length <= 0) {
+          this.clearCom();
+        }
+      }
+    },
+    clearCom() {
+      // this.deleteList = [];
+      this.$set(this, "deleteList", []);
+      this.$refs.maskStudentList.clearSelection();
+      // this.$refs.addCompound.isLook = false;
+    },
     getTemplateRow(index, row) {
       this.activeStudent = row.id;
     },
     addStudent() {
-      if (!this.activeStudent) {
+      if (!this.deleteList < 0) {
         this.$message.error("请选择一名学生");
         return;
       }
-      let offlineClassesUnitPrice, onlineClassesUnitPrice;
-      this.maskStudentList.forEach((stu) => {
-        if (stu.id == this.activeStudent) {
-          offlineClassesUnitPrice = stu.offlineClassesUnitPrice;
-          onlineClassesUnitPrice = stu.onlineClassesUnitPrice;
-        }
+      console.log(this.deleteList);
+      let arr = this.deleteList.map((stu) => {
+        return {
+          vipGroupId: this.id,
+          studentId: stu.id,
+          offlineClassesUnitPrice: stu.offlineClassesUnitPrice,
+          onlineClassesUnitPrice: stu.onlineClassesUnitPrice,
+        };
       });
+      // return;
+      // let offlineClassesUnitPrice, onlineClassesUnitPrice;
+      // this.maskStudentList.forEach((stu) => {
+      //   if (stu.id == this.activeStudent) {
+      //     offlineClassesUnitPrice = stu.offlineClassesUnitPrice;
+      //     onlineClassesUnitPrice = stu.onlineClassesUnitPrice;
+      //   }
+      // });
       // if(!offlineClassesUnitPrice || !onlineClassesUnitPrice){
       //     this.$message.error("请填写线上课单价或线下课单价");
       //   return
       // }
-      addVipGroupStudents([
-        {
-          vipGroupId: this.id,
-          studentId: this.activeStudent,
-          onlineClassesUnitPrice,
-          offlineClassesUnitPrice,
-        },
-      ]).then((res) => {
+      // [
+      //   {
+      //     vipGroupId: this.id,
+      //     studentId: this.activeStudent,
+      //     onlineClassesUnitPrice,
+      //     offlineClassesUnitPrice,
+      //   },
+      // ]
+      addVipGroupStudents(arr).then((res) => {
         if (res.code == 200) {
           this.$message.success("添加成功");
           this.getStudents();
+          this.clearCom();
         }
       });
     },
@@ -762,6 +857,20 @@ export default {
       });
     },
   },
+  watch: {
+    maskVisible(val) {
+      if (!val) {
+        this.clearCom();
+        this.rules = {
+          // 分页规则
+          limit: 10, // 限制显示条数
+          page: 1, // 当前页
+          total: 0, // 总条数
+          page_size: [10, 20, 40, 50], // 选择限制显示条数
+        };
+      }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>