教师端1期 姓名搜索组件

src/views/course/CourseManage.vue

@@ -18,14 +18,15 @@
             <el-col :span="4">
               <div class="grid-content bg-purple">
                 <!-- <el-input v-model="signup.name" clearable placeholder="姓名" maxlength="50" /> -->
-                <el-select :key="2" style="width:100%" clearable multiple v-model="signup.aid" filterable
+                <NameFilterSelect @handleNameChange="aids => signup.aid = aids" @handleClose="signup.aid = []" />
+                <!-- <el-select :key="2" style="width:100%" clearable multiple v-model="signup.aid" filterable
                   placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
                   :multiple-limit="5" :loading="nameListLoading">
                   <el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
                     <span>{{ item.name }}</span>
                     <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
                   </el-option>
-                </el-select>
+                </el-select> -->
               </div>
             </el-col>
             <el-col :span="4">
@@ -86,14 +87,16 @@
               <div class="grid-content bg-purple">
                 <!-- <el-input clearable v-model="learningRecords.name" maxlength="50"
                   placeholder="姓名"></el-input> -->
-                <el-select :key="1" style="width:100%" clearable multiple v-model="learningRecords.aid" filterable
+                <NameFilterSelect @handleNameChange="aids => learningRecords.aid = aids"
+                  @handleClose="learningRecords.aid = []" />
+                <!-- <el-select :key="1" style="width:100%" clearable multiple v-model="learningRecords.aid" filterable
                   placeholder="姓名" v-limit-input="50" reserve-keyword remote :remote-method="initNameList"
                   :multiple-limit="5" :loading="nameListLoading">
                   <el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
                     <span>{{ item.name }}</span>
                     <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
                   </el-option>
-                </el-select>
+                </el-select> -->
 
               </div>
             </el-col>
@@ -272,14 +275,17 @@
       <el-row style="margin: 20px 0 20px -10px;" :gutter="20">
         <el-col :span="6">
           <div class="grid-content bg-purple">
-            <el-select :key="3" style="width:100%" clearable multiple v-model="commonResourceStudyPeopleQuery.aid"
+            <NameFilterSelect @handleNameChange="aids => commonResourceStudyPeopleQuery.aid = aids"
+              @handleClose="commonResourceStudyPeopleQuery.aid = []" />
+
+            <!-- <el-select :key="3" style="width:100%" clearable multiple v-model="commonResourceStudyPeopleQuery.aid"
               filterable placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
               :multiple-limit="5" :loading="nameListLoading">
               <el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
                 <span>{{ item.name }}</span>
                 <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
               </el-option>
-            </el-select>
+            </el-select> -->
             <!-- <el-input v-model="commonResourceStudyPeopleQuery.name" clearable
               maxlength="50" placeholder="姓名" /> -->
           </div>
@@ -347,6 +353,9 @@
       <el-row style="margin: 20px 0 20px -10px;" :gutter="20">
         <el-col :span="6">
           <div class="grid-content bg-purple">
+            <NameFilterSelect @handleNameChange="aids => examResourceStudyPeopleQuery.aid = aids"
+              @handleClose="examResourceStudyPeopleQuery.aid = []" />
+            <!-- 
             <el-select :key="4" style="width:100%" clearable multiple v-model="examResourceStudyPeopleQuery.aid"
               filterable placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
               :multiple-limit="5" :loading="nameListLoading">
@@ -354,8 +363,8 @@
                 <span>{{ item.name }}</span>
                 <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
               </el-option>
-            </el-select>
-              <!-- <el-input v-model="examResourceStudyPeopleQuery.name" clearable
+            </el-select> -->
+            <!-- <el-input v-model="examResourceStudyPeopleQuery.name" clearable
               maxlength="50" placeholder="姓名" /> -->
           </div>
         </el-col>
@@ -438,8 +447,11 @@ import apiUser from "@/api/system/user.js";
 import apiStudy from "@/api/modules/courseStudy.js";
 import { getToken } from "@/utils/token";
 import axios from "axios";
+import NameFilterSelect from "@/components/NameFilterSelect/index.vue";
 
+NameFilterSelect;
 export default {
+  components: { NameFilterSelect },
   computed: {
     ...mapGetters(["resOwnerMap", "sysTypeMap"]),
   },
@@ -601,8 +613,6 @@ export default {
         status: "",
         aid: [],
       },
-      nameList: [],
-      nameListLoading: false,
     };
   },
   mounted() {
@@ -622,39 +632,6 @@ export default {
       loadSysTypes: "sysType/loadSysTypes",
     }),
 
-    async initNameList(keyword) {
-      console.log("initNameList", keyword);
-      if (!keyword) {
-        return;
-      }
-      this.nameListLoading = true;
-      try {
-        const res = await apiUserbasic.selectUser(keyword);
-        this.nameListLoading = false;
-
-        if (res && res.status === 200) {
-          const resultList = res.result || [];
-          this.nameList = resultList
-            .map((item) => this.formatCreatorItem(item))
-            .filter((item) => item.userId);
-        } else {
-          this.creatorOptions = [];
-        }
-      } catch (error) {
-        this.nameList = [];
-        this.nameListLoading = false;
-      } finally {
-        this.nameListLoading = false;
-      }
-    },
-
-    formatCreatorItem(item = {}) {
-      return {
-        userId: item.id,
-        name: item.realName,
-        code: item.userNo,
-      };
-    },
 
     resetCommonResourceQuery() {
       this.commonResourceStudyPeopleQuery = {
@@ -714,7 +691,7 @@ export default {
           contentId: this.rousourceRow.contentId,
           pageIndex: this.examResourceStudyPeopleQuery.pageIndex,
           pageSize: this.examResourceStudyPeopleQuery.pageSize,
-          name: '',
+          name: "",
           status: this.examResourceStudyPeopleQuery.status,
           aid: this.examResourceStudyPeopleQuery.aid.join(","),
         })
@@ -1137,7 +1114,6 @@ export default {
     },
     handleTabClick(tab) {
       this.tabName = tab.name;
-      this.nameList = [];
       if (tab.name === "second") {
         this.getSignupList();
       } else if (tab.name === "third") {