教师端1期 姓名搜索组件

src/components/NameFilterSelect/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="NameFilterSelect">
+    <el-select @clear="handleClose" style="width:100%" @change="handleChange" clearable multiple v-model="aids"
+      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>
+  </div>
+</template>
+
+<script>
+import apiUserbasic from "@/api/boe/userbasic.js";
+export default {
+  data() {
+    return {
+      aids: [],
+      nameListLoading: false,
+      nameList: [],
+    };
+  },
+  props: {},
+  methods: {
+    handleChange() {
+      console.log("handleChange", this.aids);
+      this.$emit("handleNameChange", this.aids);
+    },
+    handleClose() {
+      console.log("handleClose", this.aids);
+      this.$emit("handleClose");
+    },
+    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,
+      };
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-upload-dragger {
+  width: 100% !important;
+  height: 100% !important;
+}
+.image-upload {
+  width: 410px;
+  height: 168px;
+}
+.image-card .el-upload--picture-card,
+.image-card .el-upload-list--picture-card .el-upload-list__item {
+  background-color: #fbfdff;
+  border: 1px dashed #c0ccda;
+  border-radius: 6px;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.el-upload--picture-card {
+  background-color: #fbfdff;
+  border: 1px dashed #c0ccda;
+  border-radius: 6px;
+  box-sizing: border-box;
+  vertical-align: top;
+  line-height: 100%;
+}
+.image-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+image-uploader .el-upload--picture-card {
+  width: 100%;
+}
+image-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.image-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  text-align: center;
+  margin-top: 50px;
+  display: block;
+}
+.icon-text {
+  font-size: 14px;
+  display: block;
+  height: 30px;
+  line-height: 35px;
+}
+.image {
+  position: relative;
+  .mask {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: all 0.3s;
+  }
+  &:hover .mask {
+    opacity: 1;
+  }
+}
+</style>

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,7 +363,7 @@
                 <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="examResourceStudyPeopleQuery.name" clearable
               maxlength="50" placeholder="姓名" /> -->
           </div>
@@ -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") {