teacher manager - select function available

src/views/permission/components/mx-teacher-info.vue

@@ -11,9 +11,9 @@
         <div v-if="classes" class="light f13 f-999 mt5" style="word-break: break-all">{{ classes }}</div>
       </div>
     </div>
-    <div class="icon-wrap">
+    <div class="icon-wrap" v-if="selectMode">
       <i class="el-icon-success active" v-if="selected"></i>
-      <i class="el-icon-success" v-else></i>
+      <!--<i class="el-icon-success" v-else></i>-->
     </div>
   </el-card>
 </template>
@@ -22,6 +22,10 @@
 export default {
   name: 'mx-teacher-info',
   props: {
+    selectMode: {
+      type: Boolean,
+      default: false
+    },
     selected: {
       type: Boolean,
       default: false
@@ -56,13 +60,14 @@ export default {
 </script>
 
 <style scoped>
-.icon-wrap{
+.icon-wrap {
   position: absolute;
   right: 8px;
   cursor: pointer;
   top: 8px;
 }
-.active{
+
+.active {
   color: #42b983;
 }
 </style>

src/views/permission/teacher-manage.vue

@@ -12,7 +12,9 @@
               <el-row :gutter="12">
                 <el-col :span="6" v-for="(item,index) in group.headteachers" :key="index" class="mb12">
                   <mx-teacher-info :avatar="item.avatar" :name="item.nickName" content-height="90px"
-                                   :classes="intersectGradeClass(item.headteacherClassNames, group.grade).toString()">
+                                   :select-mode="selectMode" :selected="item.localSelected"
+                                   :classes="intersectGradeClass(item.headteacherClassNames, group.grade).toString()"
+                                   @click.native="setTeacherSelected(item)">
                   </mx-teacher-info>
                 </el-col>
               </el-row>
@@ -23,7 +25,9 @@
                 <el-col :span="6" v-for="(item,index) in group.teachers" :key="index" class="mb12">
                   <mx-teacher-info content-height="90px" :avatar="item.avatar" :name="item.nickName"
                                    :subjects="item.subjectNames.toString()"
-                                   :classes="intersectGradeClass(item.classNames, group.grade).toString()">
+                                   :select-mode="selectMode" :selected="item.localSelected"
+                                   :classes="intersectGradeClass(item.classNames, group.grade).toString()"
+                                   @click.native="setTeacherSelected(item)">
                   </mx-teacher-info>
                 </el-col>
               </el-row>
@@ -51,6 +55,20 @@ export default {
     MxCondition,
     MxTeacherInfo
   },
+  model: {
+    prop: 'selectedCode',
+    event: 'change'
+  },
+  props: {
+    selectMode: {
+      type: Boolean,
+      default: false
+    },
+    selectedCode: {
+      type: String | Number,
+      default: ''
+    }
+  },
   data() {
     return {
       queryParams: {
@@ -62,6 +80,20 @@ export default {
       displayGradeClass: []
     }
   },
+  computed: {
+    selectedTeacher() {
+      return this.dataList.find(item => item['localSelected'])
+    },
+    dataListWithSelected() {
+      if (this.selectMode && this.dataList.length) {
+        this.dataList.forEach(user => {
+          // 本地字段，强制进入双向绑定
+          this.$set(user, 'localSelected', user.customerCode == this.selectedCode)
+        })
+      }
+      return this.dataList
+    }
+  },
   methods: {
     handleInvalidQuery() {
       this.dataList = []
@@ -85,9 +117,9 @@ export default {
       const result = []
       this.standardClassTree.forEach(grade => {
         const classes = grade.children
-        const matchedTeachers = this.dataList
+        const matchedTeachers = this.dataListWithSelected
           .filter(t => t.classes.some(tc => classes.some(c => c.label == tc.className)))
-        const matchedHeadteachers = this.dataList
+        const matchedHeadteachers = this.dataListWithSelected
           .filter(t => t.headteacherClassIds.some(tcId => classes.some(c => c.value == tcId)))
         if (matchedTeachers.length || matchedHeadteachers.length) {
           const gradeResult = {
@@ -112,6 +144,14 @@ export default {
     },
     intersectGradeClass(classNames, grade) {
       return classNames.filter(name => grade.children.some(c => c.label == name))
+    },
+    setTeacherSelected(teacher) {
+      if (!this.selectMode) return
+      if (teacher.customerCode == this.selectedTeacher?.customerCode) return
+      if (this.selectedTeacher) this.selectedTeacher.localSelected = false
+      teacher.localSelected = true // single select mode
+      this.$emit('change', teacher.customerCode)
+      console.log('teacher selected:', teacher.customerCode, teacher.nickName)
     }
   }
 }