选择教师

src/components/Course/choice.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="choice"> 
+    <el-tag type="info" 
+        closable  
+        v-for="(item,index) in teacherValueList" 
+        :key="item.teacherId" 
+        @close="handleClose(item,index)">{{item.teacherName}}</el-tag>
+     <el-select
+        style="width: 100%;"
+        v-model="teacherValues"
+        filterable
+        remote
+        clearable 
+        value-key="teacherId"
+        ref="elSelect"
+        reserve-keyword
+        placeholder="请输入授课教师姓名"
+        @change="changeTeachers"
+        :remote-method="remoteFindTeacher"
+        :loading="loading">
+        <el-option v-for="item in teacherDownList" :key="item.teacherId" :label="item.teacherName + item.teacherCode" :value="item"></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import apiTeacher from '../../api/modules/teacher.js';
+  export default{
+    name:  'choice',
+    computed: {
+      ...mapGetters(['userInfo'])
+    },
+    props: {
+      teacherValue:{
+        type:Array,
+      },
+    },
+    data(){
+      return {
+        teacherValueList:[],
+        teacherValues:{},
+        loading:false,
+        teacherDownList:[],
+      }
+    },
+    watch:{
+      teacherValue(val) {
+       this.teacherValueList = val;
+      }
+    },
+    mounted(){
+    },
+    methods:{
+        handleClose(item,index){
+          this.teacherValueList.splice(index, 1);
+          this.$emit('getTeacherList',this.teacherValueList);
+        },
+        changeTeachers(t) {
+            if(t) {
+            let isCan = this.teacherValueList.some(it=>it.teacherId == t.teacherId);
+            if(isCan){
+                this.teacherValues = {};
+                this.teacherDownList = [];
+                this.$message.warning('教师重复，请重新选择！')
+                return;
+            }
+            this.teacherValueList.push(t);
+            this.teacherDownList = [];
+            this.teacherValues = {};
+            this.$emit('getTeacherList',this.teacherValueList);
+            }
+        },
+            // 教师列标，远程查询
+        async remoteFindTeacher(query) {
+          if (query) {
+            this.loading = true;
+            try {
+            const { result, message, status } = await apiTeacher.findByName(query);
+            this.loading = false;
+            if (status === 200) {
+                let list = [];
+                result.forEach(item => {
+                list.push({
+                    teacherId: item.id,
+                    teacherName: item.name,
+                    teacherCode: item.code
+                });
+                });
+                this.teacherDownList = list;
+            } else {
+                this.$message.error('查询教师信息失败:' + message);
+            }
+            } catch (err) {
+            this.loading = false;
+            }
+        } else {
+            this.teacherDownList = [];
+        }
+      },
+    }
+
+  }
+</script>
+<style lang="scss">
+.choice{
+   .el-tag--info{
+     height: 22px;
+     line-height: 22px;
+   } 
+}
+</style>
+

src/components/Course/courseForm.vue

@@ -90,7 +90,7 @@
             </el-form-item>
             <el-form-item label="授课教师" required>
               <!--授课老师默认是当前操作人-->
-              <el-select
+              <!-- <el-select
                 style="width: 100%;"
                 v-model="teacherValues"
                 multiple
@@ -104,7 +104,8 @@
                 :remote-method="remoteFindTeacher"
                 :loading="loading">
                 <el-option v-for="item in teacherDownList" :key="item.teacherId" :label="item.teacherName + item.teacherCode" :value="item"></el-option>
-              </el-select>
+              </el-select> -->
+              <choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice>
             </el-form-item>
             <el-form-item label="目标人群" required>
               <el-input maxlength="50" v-model="courseInfo.forUsers" show-word-limit placeholder="目标人群(限50字以内)"></el-input>
@@ -234,7 +235,7 @@
                 </el-form-item>
                 <el-form-item label="授课教师" required>
                   <!--授课老师默认是当前操作人-->
-                  <el-select
+                  <!-- <el-select
                     style="width: 100%;"
                     v-model="teacherValues"
                     multiple
@@ -248,7 +249,8 @@
                     :remote-method="remoteFindTeacher"
                     :loading="loading">
                     <el-option v-for="item in teacherDownList" :key="item.teacherId" :label="item.teacherName + item.teacherCode" :value="item"></el-option>
-                  </el-select>
+                  </el-select> -->
+                  <choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice>
                 </el-form-item>
               </el-col>
             </el-form-item>
@@ -379,7 +381,8 @@
   </div>
 </template>
 <script>
-import agreement from '@/components/Portal/agreement.vue'
+import choice from '@/components/Course/choice.vue';
+import agreement from '@/components/Portal/agreement.vue';
 import weikeContent from '@/components/Course/weikeContent.vue';
 import catalogCourseware from '@/components/Course/catalogCourseware.vue';
 import imageUpload from '@/components/ImageUpload/index.vue';
@@ -396,7 +399,7 @@ import { mapGetters, mapActions } from 'vuex';
 import filecloud from '@/components/FileCloud/index.vue';
 export default {
   props: {},
-  components: { weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud},
+  components: { weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud,choice},
   data() {
     return {
       checked:false,
@@ -530,6 +533,9 @@ export default {
     this.loadUserGroup();
   },
   methods: {
+    getTeacherList(res) {
+      this.teacherValues = res;
+    },
     chooseFile(){
       this.dlgFileChoose.show=true;
     },