教师端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>