select headteacher optimized

src/views/elective/master/components/choose-class.vue

@@ -73,12 +73,11 @@ export default{
         classId: this.value,
         customerCode:this.activeClass.headteacherCode || ''
       }).then(res => {
-        this.$parent.handleQuery()
-        console.log(res)
+        this.$emit('completed')
       })
     },
     enable(row){
-      const headTeacherSettings = this.headTeacherSettings
+      const headTeacherSettings = this.headTeacherSettings || {}
       const activeClass  = this.activeClass
       return Object.keys(headTeacherSettings).findIndex(item => item == row.classId) != -1 && activeClass.classId != row.classId
     },

src/views/elective/master/components/choose-master-teacher.vue

@@ -3,7 +3,8 @@
     :visible.sync="dialogVisible"
     width="80%"
   >
-    <teacher-manage v-if="dialogVisible"  :selectMode="true" v-model="selectedCode" :headTeacherSettings="headTeacherSettings"></teacher-manage>
+    <teacher-manage v-if="dialogVisible" :selectMode="true" v-model="selectedCode"
+                    :headTeacherSettings="headTeacherSettings"></teacher-manage>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="onConfirm">确 定</el-button>
@@ -13,7 +14,8 @@
 <script>
 import { saveTeacherSettings } from '@/api/webApi/elective/dispatch'
 import TeacherManage from '@/views/permission/teacher-manage'
-export default  {
+
+export default {
   // name: 'ChooseMasterTeacher',
   components: {
     TeacherManage
@@ -33,21 +35,24 @@ export default  {
     init(row) {
       this.dialogVisible = true
       this.activeModels = row
-      this.selectedCode =  row.headteacherCode || row.newHeadteacherCode
+      this.selectedCode = row.newHeadteacherCode || row.headteacherCode
+      window.chooseVue = this
     },
     isRepeat() {
       // 判断是否重复？
       const headTeacherSettings = this.headTeacherSettings
       const format = Object.values(headTeacherSettings)
-      const flag = format.some(item => { return item.customerCode == this.selectedCode})
+      const flag = format.some(item => {
+        return item.customerCode == this.selectedCode
+      })
       return flag
     },
-    onConfirm(){
-      if(this.isRepeat()) {
+    onConfirm() {
+      if (this.isRepeat()) {
         this.$message.warning(`该老师已分配给新班级`)
         return
       }
-      if(!this.selectedCode){
+      if (!this.selectedCode) {
         this.dialogVisible = false
         return
       }
@@ -57,17 +62,17 @@ export default  {
       saveTeacherSettings({
         roundId: this.roundId,
         classId: this.activeModels.newClassId || this.activeModels.classId,
-        customerCode:this.selectedCode || ''
+        customerCode: this.selectedCode || ''
       }).then(res => {
-        this.$parent.handleQuery()
-        this.dialogVisible =false
+        this.$emit('completed')
+        this.dialogVisible = false
       })
-    },
+    }
   }
 }
 </script>
 <style scoped>
-::v-deep .el-dialog__body{
+::v-deep .el-dialog__body {
   padding: 0;
 }
 </style>

src/views/elective/master/index.vue

@@ -6,10 +6,10 @@
     </el-card>
 
     <el-card v-if="queryParams.roundId">
-      <div >
-        <div class="fx-row jc-between mb10" >
+      <div>
+        <div class="fx-row jc-between mb10">
           <el-button type="primary" @click="keepAll">一键维持原班级</el-button>
-          <el-button  type="primary" @click="send">发送名单</el-button>
+          <el-button type="primary" @click="send">发送名单</el-button>
         </div>
         <mx-table :propDefines="propDefines" :rows="formatRows">
           <template #temp="{row}">
@@ -17,7 +17,7 @@
               placement="bottom"
               trigger="click">
               <span class="btn-green mr5" @click="changeMaster(row)">班主任</span>
-              <span  class="btn-green" v-if="!!row.headteacherName" @click="changeClass(row)">班级</span>
+              <span class="btn-green" v-if="!!row.headteacherName" @click="changeClass(row)">班级</span>
 
               <el-button type="primary" slot="reference" size="mini">更换</el-button>
             </el-popover>
@@ -29,18 +29,27 @@
       </div>
     </el-card>
     <evaluation-empty v-else-if="!queryParams.roundId" shadow title="当前学年没有班主任选班数据"></evaluation-empty>
-    <choose-master-teacher ref="chooseMasterTeacher" :roundId="queryParams.roundId" :headTeacherSettings="headteacherSettings"></choose-master-teacher>
-    <choose-class :roundId="queryParams.roundId" ref="chooseClass" :year="queryParams.year" :headTeacherSettings="headteacherSettings"></choose-class>
+    <choose-master-teacher ref="chooseMasterTeacher" :roundId="queryParams.roundId"
+                           :headTeacherSettings="headteacherSettings" @completed="handleQuery"></choose-master-teacher>
+    <choose-class :roundId="queryParams.roundId" ref="chooseClass" :year="queryParams.year"
+                  :headTeacherSettings="headteacherSettings" @completed="handleQuery"></choose-class>
   </div>
 </template>
 <script>
-import {getTeacherSettings,keepAllOfTeacher,getPublish,saveTeacherSettings,lockPublishTeachers} from  '@/api/webApi/elective/dispatch'
+import {
+  getTeacherSettings,
+  keepAllOfTeacher,
+  getPublish,
+  saveTeacherSettings,
+  lockPublishTeachers
+} from '@/api/webApi/elective/dispatch'
 import ChooseMasterTeacher from './components/choose-master-teacher'
 import classTreeMixin from '@/components/Cache/modules/mx-classTree-translate-mixin'
 import ChooseClass from './components/choose-class'
 import MxCondition from '@/components/MxCondition/mx-condition'
-export default  {
-  components :{
+
+export default {
+  components: {
     MxCondition,
     ChooseMasterTeacher,
     ChooseClass
@@ -49,72 +58,71 @@ export default  {
   data() {
     return {
       propDefines: {
-        year:{
-          label:'学年'
+        year: {
+          label: '学年'
         },
-        className:{
-          label:'原班级'
+        className: {
+          label: '原班级'
         },
-        headteacherName:{
-          label:'原班主任姓名'
+        headteacherName: {
+          label: '原班主任姓名'
         },
-        temp:{
-          label:'确认班主任',
-          slot:'temp'
+        temp: {
+          label: '确认班主任',
+          slot: 'temp'
         },
-        newClassName:{
-          label:'新班级号'
+        newClassName: {
+          label: '新班级号'
         },
-        newHeadteacherName:{
-          label:'新班主任姓名'
+        newHeadteacherName: {
+          label: '新班主任姓名'
         },
         cancel: {
-          label:'操作',
-          slot:'cancel'
+          label: '操作',
+          slot: 'cancel'
         }
       },
-      requireFields: ['year','roundId'],
+      requireFields: ['year', 'roundId'],
       queryParams: {
         pageNum: 1,
         pageSize: 20,
         total: '',
         year: '',
-        roundId: '',
+        roundId: ''
       },
-      headteacherSettings: { },
+      headteacherSettings: null
     }
   },
-  computed:{
+  computed: {
     formatRows() {
-      if(!this.classTree) return []
-      if(!this.queryParams.year) return []
-      const headteacherSettings =  this.headteacherSettings
-      return this.classTree.find(item => {
-        return item.year == this.queryParams.year
-      })?.classList.map(item => {
-        // console.log(headteacherSettings.hasOwnProperty(item.classId))
-        item.year = this.queryParams.year
-        item.newClassId = headteacherSettings.hasOwnProperty(item.classId) ? item.classId : ''    // 新班级Id
-        item.newClassName = headteacherSettings.hasOwnProperty(item.classId) ? this.getClassName(item.classId) : ''    // 新班级名称
-        item.newHeadteacherName = headteacherSettings.hasOwnProperty(item.classId) ? headteacherSettings[item.classId].nickName  : ''    // 新班主任名称
-        item.newHeadteacherCode = headteacherSettings.hasOwnProperty(item.classId) ? headteacherSettings[item.classId].customerCode  : ''    // 新班主任code
-        return item
-      })
+      if (!this.classTree.length) return []
+      if (!this.headteacherSettings) return []
+      return this.classTree.find(item => item.year == this.queryParams.year)
+        ?.classList.map(item => {
+          const copy = { ...item }
+          const setting = this.headteacherSettings[copy.classId]
+          copy.year = this.queryParams.year
+          copy.newClassId = setting ? copy.classId : ''    // 新班级Id
+          copy.newClassName = setting ? copy.className : ''    // 新班级名称
+          copy.newHeadteacherName = setting ? setting.nickName : ''    // 新班主任名称
+          copy.newHeadteacherCode = setting ? setting.customerCode : ''    // 新班主任code
+          return copy
+        }) || []
     }
   },
   methods: {
     getPublish() {
       getPublish({
-        roundId:this.queryParams.roundId
+        roundId: this.queryParams.roundId
       }).then(res => {
-         console.log(res)
+        console.log(res)
       })
     },
     async keepAll() {
-      if(Object.keys(this.headteacherSettings).length > 0) {
+      if (this.headteacherSettings && Object.keys(this.headteacherSettings).length > 0) {
         await this.$confirm(`一键维持原班级会覆盖您之前的设置，是否继续?`)
         this.keepAllOfTeacher()
-      }else {
+      } else {
         await this.$confirm(`是否一键维持原班级?`)
         this.keepAllOfTeacher()
       }
@@ -124,35 +132,34 @@ export default  {
       getTeacherSettings({
         roundId: this.queryParams.roundId
       }).then(res => {
-        console.log(res.data)
-        this.headteacherSettings  = res.data
+        this.headteacherSettings = res.data
       })
     },
     keepAllOfTeacher() {
       keepAllOfTeacher({
-        roundId:this.queryParams.roundId
+        roundId: this.queryParams.roundId
       }).then(res => {
-         // 维持班级后刷新
-         this.getHeadteacherSettings()
+        // 维持班级后刷新
+        this.getHeadteacherSettings()
       })
     },
     send() {
-      if(true) {
+      if (true) {
         this.$message.warning('还有班级未分配新班主任和新班级号')
         return
       }
 
     },
-    async cancel(row){
+    async cancel(row) {
       console.log(row)
-      if(!row.newHeadteacherCode) {
+      if (!row.newHeadteacherCode) {
         this.$message.warning('请先设定新班级')
         return
       }
       await this.$confirm(`是否撤回你对该班级(原${row.className})的操作?`)
       saveTeacherSettings({
         roundId: this.queryParams.roundId,
-        classId: row.newClassId,
+        classId: row.newClassId
       }).then(res => {
         this.$message.success('取消成功')
         this.handleQuery()
@@ -164,15 +171,15 @@ export default  {
       this.getHeadteacherSettings()
       this.getPublish()
     },
-    changeMaster(row){
+    changeMaster(row) {
       this.$refs.chooseMasterTeacher.init(row)
     },
     changeClass(row) {
       this.$refs.chooseClass.init(row)
     },
     handleInvalidQuery() {
-      this.headteacherSettings = []
-    },
+      this.headteacherSettings = null
+    }
   }
 
 }

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

@@ -15,9 +15,9 @@
       <i class="el-icon-success active" v-if="selected"></i>
       <!--<i class="el-icon-success" v-else></i>-->
     </div>
-    <div class="icon-wrap2 f12" >
-      {{selecedClassName}}
-    </div>
+    <el-tag effect="light" type="danger" class="icon-wrap2 f12" size="mini" v-if="selectedClassName">
+      {{ selectedClassName }}
+    </el-tag>
   </el-card>
 </template>
 
@@ -25,7 +25,7 @@
 export default {
   name: 'mx-teacher-info',
   props: {
-    selecedClassName: {
+    selectedClassName: {
       type: String | Number,
       default: ''
     },
@@ -73,11 +73,13 @@ export default {
   cursor: pointer;
   top: 8px;
 }
-.icon-wrap2{
+
+.icon-wrap2 {
   position: absolute;
   left: 8px;
   top: 8px;
 }
+
 .active {
   color: #42b983;
 }

src/views/permission/teacher-manage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-card>
+    <el-card :shadow="selectMode?'none':'always'">
       <template #header>老师信息</template>
       <mx-condition :query-params="queryParams" @query="handleQuery" @invalid="handleInvalidQuery"></mx-condition>
       <div v-if="dataList.length" class="mt20 fx-column">
@@ -13,7 +13,7 @@
                 <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"
                                    :select-mode="selectMode" :selected="item.localSelected"
-                                   :selecedClassName="item.selecedClassName"
+                                   :selected-class-name="getSelectedClassName(item)"
                                    :classes="intersectGradeClass(item.headteacherClassNames, group.grade).toString()"
                                    @click.native="setTeacherSelected(item)">
                   </mx-teacher-info>
@@ -26,7 +26,7 @@
                 <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()"
-                                   :selecedClassName="item.selecedClassName"
+                                   :selected-class-name="getSelectedClassName(item)"
                                    :select-mode="selectMode" :selected="item.localSelected"
                                    :classes="intersectGradeClass(item.classNames, group.grade).toString()"
                                    @click.native="setTeacherSelected(item)">
@@ -75,14 +75,6 @@ export default {
       default: ''
     }
   },
-  watch: {
-    selectedCode: {
-      immediate: true,    // 这句重要
-      handler(val) {
-        console.log(val,222222222)
-      },
-    }
-  },
   data() {
     return {
       queryParams: {
@@ -100,10 +92,8 @@ export default {
     },
     dataListWithSelected() {
       if (this.selectMode && this.dataList.length && this.selectedCode) {
-        console.log(1111111111111111111)
         this.dataList.forEach(user => {
           // 本地字段，强制进入双向绑定
-          this.$set(user, 'selecedClassName', this.isSelecedClassName(user))
           this.$set(user, 'localSelected', user.customerCode == this.selectedCode)
         })
       }
@@ -111,10 +101,10 @@ export default {
     }
   },
   methods: {
-    isSelecedClassName(row) {
+    getSelectedClassName(row) {
       const headTeacherSettings = this.headTeacherSettings
       for (const key in headTeacherSettings) {
-        if(headTeacherSettings[key].customerCode ==  row.customerCode) {
+        if (headTeacherSettings[key].customerCode == row.customerCode) {
           return this.getClassName(key)
         }
       }