合并

src/components/drawers/AddFaceteach.vue

@@ -100,11 +100,19 @@
               <span style="margin-right: 3px">授课教师：</span>
             </div>
             <div class="btnbox">
-              <a-input
-                v-model:value="inputV2"
-                style="width: 384px; height: 32px"
-                placeholder="请输入授课教师"
-              />
+              <a-auto-complete
+                v-model:value="memberValue"
+                show-search
+                :not-found-content="fetching ? undefined : null"
+                placeholder="Select a teacher"
+                style="width: 364px"
+                :options="options"
+                @focus="handleFocus"
+                @blur="handleBlur"
+                @change="handleChange2"
+                @popupScroll="templateScroll"
+                @search="handleSearch"
+              ></a-auto-complete>
             </div>
           </div>
           <div class="main_item">
@@ -374,13 +382,15 @@
   </a-drawer>
 </template>
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, ref } from "vue";
 import SelFacet from "../../components/drawers/SelFacet.vue";
 import AddHomework from "../../components/drawers/AddHomework.vue";
 import AddTest from "../../components/drawers/AddTest.vue";
 import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
 // import * as method from "../../api/method"
 import { message } from "ant-design-vue";
+import { getMemberInfo } from "@/api/index1";
+import { debounce } from "lodash-es";
 import { queryFaceDetailById, editPlan } from "../../api/indexFace";
 import dayjs from "dayjs";
 import AssessmentList from "../drawers/ AssessmentList.vue";
@@ -443,12 +453,20 @@ export default {
     },
   },
   setup(props, ctx) {
+    const options = ref([]);
     const state = reactive({
       selfacetvisible: false,
       addhomeworkvisible: false,
       addtestvisible: false,
-      inputV1: null,
-      inputV2: null,
+      memberValue: null,
+      fetching: false,
+      totalPages: 0,
+      currentPage: 1,
+      tableDataTotal: 100,
+      memberId: 0,
+      pageSize: 10,
+      inputV1: "",
+      inputV2: "",
       inputV3: "",
       inputV4: null,
       inputV5: null,
@@ -625,7 +643,7 @@ export default {
           projectMember: state.radioV2 == "1" ? 1 : 0,
           signFlag: 0,
           signWordFlag: 0,
-          teacherId: 0,
+          teacherId: state.memberId,
           testId: 0,
           // teacher: state.inputV2,
         };
@@ -752,6 +770,66 @@ export default {
       state.chooseMent = value;
       state.chooseMentName = value.name;
     };
+    // 员工滚动
+    const templateScroll = (e) => {
+      console.log("滚动", e);
+      const { target } = e;
+      const scrllHeight = target.scrollHeight - target.scrollTop;
+      const clientHeight = target.clientHeight;
+      // console.log("scrllHeight", scrllHeight, clientHeight);
+      if (scrllHeight === 0 && clientHeight === 0) {
+        state.currentPage = 1;
+      } else if (scrllHeight - clientHeight == 0) {
+        // 下拉到底部时
+        if (state.currentPage < state.totalPages) {
+          // 如果滑到底部，则加载下一页
+          state.currentPage++;
+          // queryMember();
+        }
+      }
+    };
+    // 获取员工
+    const queryMember = () => {
+      if (!state.memberValue) return;
+      let obj = {
+        keyWord: state.memberValue,
+        id: 0,
+        org: 0,
+        pageNo: state.currentPage,
+        pageSize: state.pageSize,
+      };
+      getMemberInfo(obj)
+        .then((res) => {
+          let data = res.data.data.rows;
+          state.totalPages = res.data.data.total;
+          for (let i in data) {
+            options.value.push({
+              value: data[i].id,
+              label: data[i].realName,
+            });
+          }
+        })
+        .catch((err) => {
+          message.error("获取员工失败" + err);
+        });
+    };
+    const handleSearch = debounce((memberValue) => {
+      console.log("fetching user", memberValue);
+      options.value = [];
+      state.fetching = true;
+      state.currentPage = 1;
+      state.memberValue = memberValue;
+      queryMember();
+      state.fetching = false;
+    }, 300);
+    const handleChange2 = (value, label) => {
+      console.log(`selected ${value}`);
+      state.memberId = value;
+      state.inputV2 = label;
+    };
+    const handleFocus = () => {
+      queryMember();
+    };
     return {
       ...toRefs(state),
       showDrawerSelFacet,
@@ -772,6 +850,11 @@ export default {
       showAssessment,
       faceAssess,
       // change,
+      options,
+      handleFocus,
+      handleSearch,
+      handleChange2,
+      templateScroll,
     };
   },
 };