输入框即时显示

ruoyi-ui/src/views/StudentTrainingReportBullet/components/member.vue

@@ -14,13 +14,23 @@
       </div>
       <div>
         <el-form-item prop="status">
-          <el-input v-model="keyword" size="mini" placeholder="学号 / 姓名" clearable />
+          <el-input v-model="keyword" size="mini" placeholder="学号 / 姓名" clearable @input="search" @click.native="showResults" @clear="handleClear" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini"
              @click="hsbumit">搜索</el-button
           >
         </el-form-item>
+        <div class="search-results-container" v-if="searchResults.length && showSearchResults">
+          <div class="search-results">
+            <div class="dropdown">
+              <div class="dropdown-item" v-for="result in searchResults" :key="result.id" @click="handleItemClick(result)">
+                <a>{{ result.name }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </el-form>
     <el-table v-loading="loading" :data="studentlist" style="width: 100%">
@@ -47,9 +57,42 @@
     />
   </div>
 </template>
+<style>
+.search-results-container {
+  max-height: 200px;
+  overflow-y: auto;
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  width: 200px;
+  margin-top: -25px;
+}
+.search-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dropdown-item a {
+  text-align: left;
+}
+</style>
 <script>
 import * as PracticalTraining from "@/api/teacher/index.js";
 export default {
+  mounted() {
+    // 组件挂载时添加事件监听器
+    document.addEventListener('click', this.handleOutsideClick);
+  },
+
+  beforeDestroy() {
+    // 在组件销毁之前移除事件监听器，避免内存泄漏
+    document.removeEventListener('click', this.handleOutsideClick);
+  },
+
   props: {
     getCreer: {
       type: Function,
@@ -80,8 +123,10 @@ export default {
       },
       // 学生列表
       studentlist:null ,
-      total: 0, 
-      keyword:''
+      total: 0,
+      keyword:'',
+      searchResults: [],
+      showSearchResults: false,
     };
   },
   created() {},
@@ -104,11 +149,15 @@ export default {
     },
     // 搜索学生
     search() {
+      console.log(this.keyword)
+      if(this.keyword!==null&&this.keyword.length<1) return;
+      this.showSearchResults=true;
       PracticalTraining.getStudentInfo({keyword:this.keyword}).then(res=>{
-        console.log(res)
-      })
+        console.log(res);
+        this.searchResults = res.data;
+      });
     },
-    // 在已存在的实训添加成员 选择学生  
+    // 在已存在的实训添加成员 选择学生
     searc(){
     PracticalTraining.addStudent({keyword:this.keyword,trainingId:this.practicalid}).then(res=>{
       console.log(res)
@@ -118,6 +167,31 @@ export default {
       this.distinguish == true ?   this.search() : this.searc()
       console.log(this.distinguish, "this.distinguish");
     },
+    showResults() {
+      this.showSearchResults = true;
+      document.addEventListener('click', this.handleOutsideClick);
+    },
+
+    handleOutsideClick(event) {
+      const outsideSearchContainer = !this.$refs.searchContainer || !this.$refs.searchContainer.contains(event.target);
+      const insideSearchResults = this.$refs.searchResults && this.$refs.searchResults.contains(event.target);
+      if (outsideSearchContainer && !insideSearchResults) {
+        this.showSearchResults = false;
+      }
+    },
+    handleClear() {
+      this.showSearchResults = false;
+      this.searchResults = [];
+    },
+    handleItemClick(result) {
+     console.log(result.name)
+      this.studentlist=[];
+      this.studentlist.push({
+       name:result.name,
+        id:result.id
+     });
+      this.showSearchResults = false;
+    },
   },
 };
 </script>
@@ -127,4 +201,4 @@ export default {
     justify-content: center;
     margin-top: 20px;
   }
-</style>
+</style>

ruoyi-ui/src/views/StudentTrainingReportBullet/index.vue

@@ -81,7 +81,7 @@
           <el-col :span="24"><span class="member">成员管理</span></el-col>
         </el-row>
         <menber  :getCreer="getcareer" :ids="idslist" ref="child" @student="isstudent" :distinguish="grabble"/>
-    
+
         <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="addtraining"
             >确 定</el-button
@@ -100,7 +100,7 @@
       >
       <el-form ref="form" label-width="80px">
     <el-form-item label="专业">
-      <el-select v-model="id"  placeholder="请选择活动区域" @change="changeclass">
+      <el-select v-model="id"  placeholder="请选择专业" @change="changeclass">
         <el-option v-for="item in classeslist" :key="item.id" :label="item.name" :value="item.id"></el-option>
       </el-select>
     </el-form-item>
@@ -126,7 +126,7 @@
         append-to-body
       >
         <menber  :getCreer="getcareer" :ids="idslist" ref="child" @student="isstudent" :practicalid="trainingId"/>
-    
+
         <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="addtraining"
             >确 定</el-button
@@ -152,7 +152,7 @@
         checked:[],
         centerDialogVisible: false,
         memberDialogVisible: false,
-        iESadd: false,  
+        iESadd: false,
         loading: true,
         queryParams: {
           index: 1,
@@ -186,11 +186,11 @@
         classesparsma:{
           classIds:null,
           index:1,
-          size:10   
+          size:10
         },
         idslist:null,
         studentlist:null,
-        trainingId:null,           
+        trainingId:null,
       };
     },
     computed: {},
@@ -243,13 +243,13 @@
       },
       isstudent(val){
         this.trainingdata.classId=val.map(item=>item.id)
-        // 去除classId的双引号 
+        // 去除classId的双引号
         this.trainingdata.classId= this.trainingdata.classId.map(item=>Number(item))
       },
       // 添加实训任务
       addtraining(){
         this.$refs.ruleForm.validate((valid)=>{
-          if(!valid) return 
+          if(!valid) return
           PracticalTraining.addcreate(this.trainingdata).then(res=>{
           if (res.code !== 200) {
             return this.$modal.msgError(res.msg);
@@ -260,7 +260,7 @@
             });
             this.getlist()
             this.centerDialogVisible = false
-          } 
+          }
         })
         })
       },
@@ -302,8 +302,7 @@
   ::v-deep.dialog{
       .el-dialog__body{
           padding: 0px !important;
-      } 
-  
+      }
+
   }
   </style>
-