所属销售 查询

src/views/course/courseWatchLog/index.vue

@@ -38,15 +38,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="所属销售" prop="companyUserName" v-if="queryParams.sendType == 1">
-        <el-input
-          v-model="queryParams.companyUserName"
-          placeholder="请输入所属销售"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="课程" prop="courseId">
         <el-select filterable  v-model="queryParams.courseId" placeholder="请选择课程"  clearable size="small" @change="courseChange(queryParams.courseId)">
           <el-option
@@ -67,6 +58,19 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="所属销售" prop="companyUserId">
+        <el-select v-model="queryParams.companyUserId" clearable filterable remote
+                   placeholder="请输入关键词" :remote-method="loadCompanyUserOptions"
+                   v-select-load-more="loadMoreCompanyUserOptions"
+                   :loading="companyUserOptionsLoading">
+          <el-option
+            v-for="item in companyUserOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue">
+          </el-option>
+        </el-select>
+      </el-form-item>
     <!-- sop名称 -->
     <el-form-item label="SOP名称" prop="sopId" v-if="queryParams.sendType == 2">
       <el-autocomplete
@@ -487,6 +491,7 @@ import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
 import Vue from 'vue'
 import Calendar from 'vue-mobile-calendar'
 import {infoSop} from "@/api/qw/sop";
+import {getCompanyUserListLikeName} from "../../../api/company/companyUser";
 Vue.use(Calendar)
 
 export default {
@@ -650,6 +655,15 @@ export default {
       // 表单校验
       rules: {
       },
+      // 员工选项列表
+      companyUserOptionsParams: {
+        name: undefined,
+        hasNextPage: false,
+        pageNum: 1,
+        pageSize: 10
+      },
+      companyUserOptions: [],
+      companyUserOptionsLoading: false,
     };
   },
   created() {
@@ -662,6 +676,44 @@ export default {
     });
   },
   methods: {
+    /**
+     * 根据名称模糊查询用户列表
+     * @param query 参数
+     */
+    loadCompanyUserOptions(query) {
+      this.companyUserOptions = [];
+      if (query === '') {
+        return;
+      }
+
+      this.companyUserOptionsParams.pageNum = 1
+      this.companyUserOptionsParams.name = query
+      this.companyUserOptionsLoading = true;
+      this.getCompanyUserListLikeName()
+    },
+    /**
+     * 加载更多员工选项
+     */
+    loadMoreCompanyUserOptions() {
+      if (!this.companyUserOptionsParams.hasNextPage) {
+        return;
+      }
+
+      this.companyUserOptionsParams.pageNum += 1
+      this.getCompanyUserListLikeName()
+    },
+
+    /**
+     * 获取员工列表
+     */
+    getCompanyUserListLikeName() {
+      getCompanyUserListLikeName(this.companyUserOptionsParams).then(response => {
+        this.companyUserOptions = [...this.companyUserOptions, ...response.data.list]
+        this.companyUserOptionsParams.hasNextPage = response.data.hasNextPage
+        this.companyUserOptionsLoading = false;
+      });
+    },
+
     // 重置日历组件
     resetCalendars() {
       this.scheduleTime = [];

src/views/course/courseWatchLog/watchLog.vue

@@ -682,6 +682,11 @@ export default {
     });
   },
   methods: {
+
+    handleSendTypeChange() {
+      this.handleQuery(); // 重新查询列表
+    },
+
     // 重置日历组件
     resetCalendars() {
       this.scheduleTime = [];