排期任务搜索

src/views/projectManage/projectList/components/modifySchedule.vue

@@ -13,7 +13,7 @@
       <el-form ref="form" :model="form" :rules="form_rules" label-width="100px" :label-position="'left'">
         <h2>排期内容</h2>
         <el-form-item label="排期类型" prop="type">
-          <el-select v-model="form.type" clearable placeholder="请选择" style="width: 100%" :disabled="disabled">
+          <el-select v-model="form.type" clearable placeholder="请选择" style="width: 100%" :disabled="disabled" size="medium">
             <el-option v-for="item in taskScheduleEvent" :key="item.code" :label="item.msg" :value="item.code" />
           </el-select>
         </el-form-item>
@@ -28,37 +28,56 @@
           </div>
         </el-form-item>
         <el-form-item label="描述" class="item-desc">
-          <el-input v-model="form.desc" autocomplete="off" placeholder="请输入问题描述内容..." :disabled="disabled" />
+          <el-input v-model="form.desc" autocomplete="off" placeholder="请输入问题描述内容..." :disabled="disabled" size="medium" />
         </el-form-item>
         <h2>关联任务</h2>
         <el-form-item label="业务线" prop="bizId">
           {{ bizName }}
         </el-form-item>
         <el-form-item label="关联任务" prop="taskList">
+          <el-select v-model="selectBy" placeholder="请选择" style="width: 22%" class="select-by" size="medium">
+            <el-option label="任务名称" value="task" />
+            <el-option label="需求名称" value="requirement" />
+          </el-select>
           <el-select
             v-model="selectTask"
+            class="select-task"
+            popper-class="select-observe"
+            size="medium"
             filterable
             remote
             reserve-keyword
-            placeholder="请输入任务名称或ID"
-            :remote-method="remoteMethod"
-            :loading="loading"
-            style="width: 100%"
+            :placeholder="selectBy==='requirement'?'按需求名称或ID搜索':'按任务名称或ID搜索'"
+            :remote-method="debounceQuery"
+            style="width: 78%"
             :disabled="disabled"
             @change="tasksChange"
           >
-            <el-option
-              v-for="item in tasksOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-              :disabled="item.isScheduleLocked === 1"
-            >
-              <div class="Layout_space_between">
-                <span>{{ item.name }}</span>
-                <div :class="item.isScheduleLocked === 1 ? 'el-icon-lock': 'el-icon-unlock'" />
-              </div>
-            </el-option>
+            <template v-if="selectBy==='task'">
+              <el-option
+                v-for="item in tasksOptions"
+                :key="'task-option'+item.id"
+                :label="item.name"
+                :value="item.id"
+                :disabled="item.isScheduleLocked === 1"
+              >
+                <div class="Layout_space_between">
+                  <div class="belong-task">
+                    <div class="task-id">{{ item.taskIdSting }}</div>
+                    <div class="modules-name">
+                      <span class="name" :class="{'blue': innerList(item,tasksDetailList)}">{{ item.name }}</span>
+                      <span v-if="item.moduleInfoName" class="modules" :class="{'blue': innerList(item,tasksDetailList)}">{{ item.moduleInfoName }}</span>
+                      <i v-show="innerList(item,tasksDetailList)" class="el-icon-check blue" />
+                    </div>
+                  </div>
+                  <div :class="item.isScheduleLocked === 1 ? 'el-icon-lock': 'el-icon-unlock'" />
+                </div>
+              </el-option>
+            </template>
+            <span id="load-more" class="load-more">
+              <template v-if="loading">正在加载更多...</template>
+              <template v-if="!loading">没有更多了</template>
+            </span>
           </el-select>
         </el-form-item>
       </el-form>
@@ -159,7 +178,7 @@ export default {
       },
       show: this.visible,
       isDeleteStatus: this.isDelete,
-      taskScheduleEvent: [],
+      taskScheduleEvent: [], // 排期类型选项
       form: {
         bizId: localStorage.getItem('bizId'),
         type: '',
@@ -170,11 +189,19 @@ export default {
       },
       detailDayList: [], // 详细的日期
       schedule: '',
+      selectBy: 'task', // 通过什么选择任务
       selectTask: null, // 选择的任务id
+      selectPages: { // 选择任务的分页
+        pageSize: 10,
+        curIndex: 1
+      },
+      taskTotal: 0, // 任务总数
       tasksOptions: [], // 任务下拉选项
       tasksDetailList: [], // 已有任务项目
-      loading: false,
-      peopleObjectList: [] // 参与人
+      loading: true, // 正在加载状态
+      peopleObjectList: [], // 参与人
+      observer: null, // 滚动的观察类
+      nowQuery: null // 当前的筛选项
     }
   },
   watch: {
@@ -224,7 +251,29 @@ export default {
       // this.getNowTask()
     }
   },
+  mounted() {
+    this.loadObserve()
+  },
+  destroyed() {
+    this.observer.disconnect()
+  },
   methods: {
+    loadObserve() { // load-more滚动监视
+      this.$nextTick(() => {
+        this.observer = new IntersectionObserver(entries => {
+          entries.forEach(item => {
+            if (item.isIntersecting) {
+              this.selectPages.curIndex++
+              if (this.selectBy === 'task') this.searchByTask(this.nowQuery)
+            }
+          })
+        }, {
+          root: document.querySelector('.select-observe'),
+          rootMargin: '0px 0px 20px 0px' // 交叉过视图的20px，开始派发事件
+        })
+        this.observer.observe(document.getElementById('load-more'))
+      })
+    },
     async initTask() { // 任务页面下获取当前任务
       const res = await taskGet(this.$route.query.id)
       if (res.code === 200) {
@@ -239,13 +288,10 @@ export default {
         ...this.form,
         dayList: [obj.dayList[0], obj.dayList[len - 1]]
       }
-      this.bizId = obj.bizId.code
+      this.form.bizId = obj.bizId.code
       this.bizName = obj.bizId.name
       this.detailDayList = obj.dayList || []
-      this.schedule =
-          obj.dayList[0] === obj.dayList[len - 1]
-            ? `${obj.dayList[0]}`
-            : `${obj.dayList[0]}-${obj.dayList[len - 1]}`
+      this.schedule = obj.dayList[0] === obj.dayList[len - 1] ? `${obj.dayList[0]}` : `${obj.dayList[0]}-${obj.dayList[len - 1]}`
     },
     async getScheduleData(id) { // 当有传入的排期id的时候
       const res = await scheduleGet(id)
@@ -271,14 +317,10 @@ export default {
     },
     async getType() { // 获取排期类型
       const resEnum = await configShowTaskEnum()
-      if (resEnum.code === 200) {
-        this.taskScheduleEvent = resEnum.data.taskScheduleEvent
-      }
+      if (resEnum.code === 200) this.taskScheduleEvent = resEnum.data.taskScheduleEvent
     },
     async getNowTask() { // 获取当前项目/需求下任务
-      if (!this.$route.query.id) {
-        return
-      }
+      if (!this.$route.query.id) return
       const params = {}
       params[this.type] = this.$route.query.id
       const res = await taskList(params)
@@ -286,23 +328,40 @@ export default {
         this.tasksOptions = res.data
       }
     },
+    debounceQuery: _.debounce(function() { // 防抖调用
+      this.remoteMethod(...arguments)
+    }, 500),
     async remoteMethod(query) { // 远程搜索任务
       query = query.replace(/^\s+|\s+$/g, '')
-      if (query === '') {
-        return
-      }
+      if (query === '') return// 值为空字符串，返回
+      if (this.nowQuery === query) return // 值没发生变化，返回
+      // 初始化
+      this.nowQuery = query
       this.loading = true
+      this.selectPages.curIndex = 1
+      this.tasksOptions = []
+      this.taskTotal = 0
+      if (this.selectBy === 'task') this.searchByTask(query)
+    },
+    async searchByTask(query) { // 根据任务去搜索
+      if (!this.loading) return
       const res = await taskList({
-        bizId: Number(localStorage.getItem('bizId')),
-        name: query
+        bizId: this.form.bizId,
+        name: query,
+        ...this.selectPages
       })
       if (res.code === 200) {
-        this.loading = false
-        this.tasksOptions = res.data
+        this.taskTotal = res.total
+        this.tasksOptions = this.tasksOptions.concat(res.data)
+        if (this.taskTotal <= this.tasksOptions.length) this.loading = false// 全部数据已加载完成
       } else {
         this.loading = false
       }
     },
+    innerList(val, list) { // 判断是否在任务列表中
+      const res = list.find(item => item.id === val.id)
+      return !!res
+    },
     tasksChange(id) { // 任务列表变动
       const isEx = this.tasksDetailList.find(item => item.id === id)
       if (isEx) {
@@ -310,17 +369,13 @@ export default {
         this.selectTask = null
         return false
       }
-      const res = this.tasksOptions.find(item => {
-        return item.id === id
-      })
+      const res = this.tasksOptions.find(item => item.id === id)
       this.tasksDetailList.push(res)
       this.form.taskList.push(res.id)
       this.selectTask = null
     },
     cancelTask(id) { // 删除单个关联任务
-      if (this.disabled) {
-        return false
-      }
+      if (this.disabled) return false
       this.tasksDetailList = this.tasksDetailList.filter(item => item.id !== id)
       this.form.taskList = this.form.taskList.filter(item => item !== id)
     },
@@ -330,9 +385,7 @@ export default {
     },
     async getSeprateDayInfo(dataArr) { // 获取选中时间中的工作日时间
       const res = await getSeprateDayInfo(dataArr)
-      if (res.code === 200) {
-        this.schedule = res.data.seperateDaysNoHoliday
-      }
+      if (res.code === 200) this.schedule = res.data.seperateDaysNoHoliday
     },
     async scheduleCreate(params) { // 创建排期
       const res = await scheduleCreate(params)
@@ -384,7 +437,7 @@ export default {
 article {
   max-height: 60vh;
   overflow: scroll;
-    .blue {
+  .blue {
     color: #409EFF;
   }
   h2 {
@@ -403,6 +456,48 @@ article {
     padding-left: 10px;
   }
 }
+.select-by {
+  >>>.el-input__inner {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+.select-task {
+  >>>.el-input__inner {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+.load-more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.belong-task {
+  max-width: 500px;
+  display: flex;
+  .modules-name {
+    width: calc(100% - 100px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .modules {
+    color: #999999;
+  }
+  .task-id {
+    color: #999999;
+    width: 80px;
+    margin-right: 20px;
+  }
+  .name {
+    color: #333333;
+    margin-right: 20px;
+  }
+  .blue {
+    color: #409EFF;
+  }
+}
 .picker-hidden {
   opacity: 0;
   position: absolute;