提交测试

1

src/views/activeProgram/modal/studentList.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <!-- <van-sticky>
+  <div>
+    <!-- <van-sticky>
             <van-search
             show-action
             shape="round"
@@ -9,12 +9,13 @@
             placeholder="请输入学生名或手机号"
             >
             <template #action>
-                <div @click="onSearch">搜索</div>
+                <div @click="onSearch">搜索</div> 
             </template>
             </van-search>
         </van-sticky> -->
-        <div class="paddingB80">
-            <!-- <van-list
+    <m-search @onSearch="onSearch" />
+    <div class="paddingB80">
+      <!-- <van-list
                 v-model="loading"
                 class="studentContainer"
                 v-if="dataShow"
@@ -23,238 +24,271 @@
                 finished-text=""
                 @load="getStudent"
             > -->
-            <div class="studentContainer" v-if="dataShow" key="data">
-                <van-checkbox-group v-model="checkboxSelect">
-                    <van-cell-group :border="false">
-                        <van-cell
-                            v-for="(item, index) in dataList"
-                            :key="index"
-                            @click="onCheckboxSelect(item)"
-                            class="input-cell"
-                            value-class="value-times"
-                            :center="true"
-                        >
-                            <template slot="icon">
-                                <img
-                                    class="logo"
-                                    v-if="item.avatar"
-                                    :src="item.avatar"
-                                    alt=""
-                                />
-                                <img
-                                    class="logo"
-                                    v-else
-                                    src="@/assets/images/icon_student.png"
-                                    alt=""
-                                />
-                            </template>
-                            <template slot="title">
-                                {{ item.username }}
-                            </template>
-                            <template slot="default">
-                                <span style="font-size: .16rem;color: #1A1A1A;">可排课次数：<span style="color: #01C1B5;">{{ item.showStudentNum }}</span></span>
-                            </template>
-                            <template slot="extra">
-                                <van-checkbox :name="item.userId">
-                                    <template #icon="props">
-                                        <img v-if="!item.radioDisabled" class="img-icon" :src="props.checked ? activeButtonIcon : inactiveButtonIcon" />
-                                    </template>
-                                </van-checkbox>
-                            </template>
-                        </van-cell>
-                    </van-cell-group>
-                </van-checkbox-group>
-            </div>
-            <!-- </van-list> -->
-            <m-empty class="empty" msg="暂无学生" v-else key="data" />
-        </div>
-        <div class="button-group-popup">
-            <span class="btn" @click="onPopupCancel">取消</span>
-            <span class="btn primary" @click="onPopupSubmit">确定</span>
-        </div>
+      <div class="studentContainer" v-if="dataShow" key="data">
+        <van-checkbox-group v-model="checkboxSelect">
+          <van-cell-group :border="false">
+            <van-cell
+              v-for="(item, index) in dataList"
+              :key="index"
+              @click="onCheckboxSelect(item)"
+              class="input-cell"
+              value-class="value-times"
+              :center="true"
+            >
+              <template slot="icon">
+                <img
+                  class="logo"
+                  v-if="item.avatar"
+                  :src="item.avatar"
+                  alt=""
+                />
+                <img
+                  class="logo"
+                  v-else
+                  src="@/assets/images/icon_student.png"
+                  alt=""
+                />
+              </template>
+              <template slot="title">
+                {{ item.username }}({{item.userId}})
+              </template>
+              <template slot="default">
+                <span style="font-size: 0.16rem; color: #1a1a1a"
+                  >可排课次数：<span style="color: #01c1b5">{{
+                    item.showStudentNum
+                  }}</span></span
+                >
+              </template>
+              <template slot="extra">
+                <van-checkbox :name="item.userId">
+                  <template #icon="props">
+                    <img
+                      v-if="!item.radioDisabled"
+                      class="img-icon"
+                      :src="
+                        props.checked ? activeButtonIcon : inactiveButtonIcon
+                      "
+                    />
+                  </template>
+                </van-checkbox>
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-checkbox-group>
+      </div>
+      <!-- </van-list> -->
+      <m-empty class="empty" msg="暂无学生" v-else key="data" />
+    </div>
+    <div class="button-group-popup">
+      <span class="btn" @click="onPopupCancel">取消</span>
+      <span class="btn primary" @click="onPopupSubmit">确定</span>
     </div>
+  </div>
 </template>
 
 <script>
 import MEmpty from "@/components/MEmpty";
-import { getActivityStudentCanCourseNum } from '../api'
+import MSearch from '@/components/MSearch'
+import { getActivityStudentCanCourseNum } from "../api";
 export default {
-    components: {
-        MEmpty
+  components: {
+    MEmpty,
+    MSearch
+  },
+  // courseTypeIsVip 当前排课的类型，可能是赠送课程
+  props: [
+    "studentList",
+    "activityId",
+    "courseTypeIsVip",
+    "typeStatus",
+    "studentNum",
+    "isMusicTheory",
+  ],
+  data() {
+    return {
+      params: {
+        search: null,
+        activityId: this.activityId,
+      },
+      dataShow: true, // 是否有数据
+      dataList: [],
+      checkboxSelect: [],
+    };
+  },
+  watch: {
+    studentList(newVal) {
+      if (newVal) {
+        let tempVal = newVal || [];
+        this.checkboxSelect = [];
+        tempVal.forEach((item) => {
+          this.checkboxSelect.push(item.userId);
+        });
+      }
     },
-    // courseTypeIsVip 当前排课的类型，可能是赠送课程
-    props: ['studentList', 'activityId', 'courseTypeIsVip', 'typeStatus', 'studentNum', 'isMusicTheory'],
-    data() {
-        return {
-            params: {
-                search: null,
-                activityId: this.activityId
-            },
-            dataShow: true, // 是否有数据
-            dataList: [],
-            checkboxSelect: [],
-        }
+  },
+  mounted() {
+    this.getStudent();
+  },
+  methods: {
+    // 搜索
+    onSearch(val) {
+      this.params.search = val ? val : null;
+      this.dataList = [];
+      this.getStudent();
     },
-    watch: {
-        studentList(newVal) {
-            if(newVal) {
-                let tempVal = newVal || []
-                this.checkboxSelect = []
-                tempVal.forEach(item => {
-                    this.checkboxSelect.push(item.userId)
-                })
-            }
+    async getStudent() {
+      let params = this.params;
+      try {
+        const res = await getActivityStudentCanCourseNum(params);
+        let result = res.data || [];
+        let showResult = [];
+        result.forEach((item) => {
+          let showStudentNum = 0;
+          if (this.typeStatus) {
+            showStudentNum = this.courseTypeIsVip
+              ? item.vipNum
+              : item.practiceNum;
+          } else {
+            showStudentNum = this.courseTypeIsVip
+              ? item.giveVipNum
+              : item.givePracticeNum;
+          }
+          item.showStudentNum = showStudentNum;
+          // 判断次数大于0的学生展示
+          if (showStudentNum > 0) {
+            showResult.push(item);
+          }
+        });
+        this.dataList = showResult;
+        if (showResult.length > 0) {
+          this.dataShow = true;
+        } else {
+          this.dataShow = false;
         }
+      } catch {
+        //
+      }
     },
-    mounted() {
-        this.getStudent()
+    onCheckboxSelect(value) {
+      if (this.checkboxSelect.includes(value.userId)) {
+        this.checkboxSelect.forEach((item, index) => {
+          if (item === value.userId) {
+            this.checkboxSelect.splice(index, 1);
+          }
+        });
+      } else {
+        this.checkboxSelect.push(value.userId);
+      }
     },
-    methods: {
-        // 搜索
-        // onSearch() {
-        //     this.dataList = [];
-        //     this.getStudent();
-        // },
-        async getStudent() {
-            let params = this.params;
-            try {
-                const res = await getActivityStudentCanCourseNum(params)
-                let result = res.data || []
-                let showResult = []
-                result.forEach(item => {
-                    let showStudentNum = 0
-                    if (this.typeStatus) {
-                        showStudentNum = this.courseTypeIsVip ? item.vipNum : item.practiceNum
-                    } else {
-                        showStudentNum = this.courseTypeIsVip ? item.giveVipNum : item.givePracticeNum
-                    }
-                    item.showStudentNum = showStudentNum
-                    // 判断次数大于0的学生展示
-                    if(showStudentNum > 0) {
-                        showResult.push(item)
-                    }
-                })
-                this.dataList = showResult
-                if(showResult.length > 0) {
-                    this.dataShow = true
-                } else {
-                    this.dataShow = false
-                }
-            } catch {
-                //
-            }
-        },
-        onCheckboxSelect(value) {
-            if (this.checkboxSelect.includes(value.userId)) {
-                this.checkboxSelect.forEach((item, index) => {
-                    if(item === value.userId) {
-                        this.checkboxSelect.splice(index, 1)
-                    }
-                })
-            } else {
-                this.checkboxSelect.push(value.userId)
-            }
-        },
-        onPopupCancel() {
-            this.$listeners.close()
-        },
-        onPopupSubmit() {
-            if (this.isMusicTheory) {
-                if (!(this.checkboxSelect.length >= 1 && this.checkboxSelect.length <= this.studentNum)) {
-                    this.$toast(`请选择1-${this.studentNum}名学生，当前选择${this.checkboxSelect.length}名`);
-                    return;
-                }
-            } else {
-                if (this.checkboxSelect.length != this.studentNum) {
-                    this.$toast(`请选择学生${this.studentNum}名，当前选择${this.checkboxSelect.length}名`);
-                    return;
-                }
-            }
-            let dataList = this.dataList || []
-            let checkList = []
-            dataList.forEach(item => {
-                if(this.checkboxSelect.includes(item.userId)) {
-                    checkList.push(item)
-                }
-            })
-            this.$emit('submit', checkList)
+    onPopupCancel() {
+      this.$listeners.close();
+    },
+    onPopupSubmit() {
+      if (this.isMusicTheory) {
+        if (
+          !(
+            this.checkboxSelect.length >= 1 &&
+            this.checkboxSelect.length <= this.studentNum
+          )
+        ) {
+          this.$toast(
+            `请选择1-${this.studentNum}名学生，当前选择${this.checkboxSelect.length}名`
+          );
+          return;
         }
-    }
-}
+      } else {
+        if (this.checkboxSelect.length != this.studentNum) {
+          this.$toast(
+            `请选择学生${this.studentNum}名，当前选择${this.checkboxSelect.length}名`
+          );
+          return;
+        }
+      }
+      let dataList = this.dataList || [];
+      let checkList = [];
+      dataList.forEach((item) => {
+        if (this.checkboxSelect.includes(item.userId)) {
+          checkList.push(item);
+        }
+      });
+      this.$emit("submit", checkList);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 @import url("../../../assets/commonLess/variable.less");
 .studentContainer {
-    padding-top: .1rem;
-    background-color: #fff;
-    /deep/.van-cell__title {
-        font-size: 0.16rem;
-        color: @mFontColor;
-        // flex: 1 auto;
-    }
+  padding-top: 0.1rem;
+  background-color: #fff;
+  /deep/.van-cell__title {
+    font-size: 0.16rem;
+    color: @mFontColor;
+    // flex: 1 auto;
+  }
 
-    .logo {
-        width: 0.35rem;
-        height: 0.35rem;
-        margin-right: 0.12rem;
-        border-radius: 100%;
-    }
+  .logo {
+    width: 0.35rem;
+    height: 0.35rem;
+    margin-right: 0.12rem;
+    border-radius: 100%;
+  }
 
-    .input-cell {
-        padding: 0.12rem 0.16rem 0.2rem;
+  .input-cell {
+    padding: 0.12rem 0.16rem 0.2rem;
 
-        .van-checkbox {
-            justify-content: flex-end;
-        }
+    .van-checkbox {
+      justify-content: flex-end;
     }
+  }
 
-    /deep/.van-cell__value {
-        height: 0.2rem;
-    }
+  /deep/.van-cell__value {
+    height: 0.2rem;
+  }
 
-    /deep/.van-checkbox__icon .van-icon {
-        border-color: @sFontColor;
-    }
-    /deep/.van-checkbox__icon--checked .van-icon {
-        border-color: #01C1B5;
-    }
+  /deep/.van-checkbox__icon .van-icon {
+    border-color: @sFontColor;
+  }
+  /deep/.van-checkbox__icon--checked .van-icon {
+    border-color: #01c1b5;
+  }
 
-    .van-tag {
-        margin-left: 0.08rem;
-    }
+  .van-tag {
+    margin-left: 0.08rem;
+  }
 }
 .value-times {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .paddingB80 {
-    padding-bottom: 0.8rem;
+  padding-bottom: 0.8rem;
 }
 .button-group-popup {
-    position: fixed;
-    bottom: 0;
-    padding: 0.2rem 0;
-    width: 100%;
-    text-align: center;
-    background-color: #ffffff;
-    .btn {
-        padding: 0 0.45rem;
-        line-height: 0.4rem;
-        display: inline-block;
-        border: 1px solid @mColor;
-        border-radius: 1rem;
-        color: @mColor;
-        background: #fff;
-        font-size: 0.18rem;
-        &.primary {
-        color: #fff;
-        background: @mColor;
-        }
-    }
-    .btn + .btn {
-        margin-left: 0.1rem;
+  position: fixed;
+  bottom: 0;
+  padding: 0.2rem 0;
+  width: 100%;
+  text-align: center;
+  background-color: #ffffff;
+  .btn {
+    padding: 0 0.45rem;
+    line-height: 0.4rem;
+    display: inline-block;
+    border: 1px solid @mColor;
+    border-radius: 1rem;
+    color: @mColor;
+    background: #fff;
+    font-size: 0.18rem;
+    &.primary {
+      color: #fff;
+      background: @mColor;
     }
+  }
+  .btn + .btn {
+    margin-left: 0.1rem;
+  }
 }
 </style>