需求和任务分别筛选

src/api/taskIndex.js

@@ -275,3 +275,11 @@ export function showRelatedDpmTask(id) {
     method: 'get'
   })
 }
+// 按需求搜索需求和任务的接口
+export function listRequireAndTask(data) {
+  return request({
+    url: TeamManagement + `/task/listRequireAndTask`,
+    method: 'post',
+    data
+  })
+}

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

@@ -53,6 +53,7 @@
             :disabled="disabled"
             @change="tasksChange"
           >
+            <!-- 任务名称搜索 -->
             <template v-if="selectBy==='task'">
               <el-option
                 v-for="item in tasksOptions"
@@ -61,7 +62,7 @@
                 :value="item.id"
                 :disabled="item.isScheduleLocked === 1"
               >
-                <div class="Layout_space_between">
+                <div class="task-option">
                   <div class="belong-task">
                     <div class="task-id">{{ item.taskIdSting }}</div>
                     <div class="modules-name">
@@ -74,9 +75,39 @@
                 </div>
               </el-option>
             </template>
+            <!-- 任务名称搜索 -->
+            <!-- 需求名称搜索 -->
+            <template v-if="selectBy==='requirement'">
+              <el-option-group
+                v-for="group in tasksByOptions"
+                :key="'task-group'+group.id"
+                :label="group.idString+group.name"
+              >
+                <el-option
+                  v-for="item in group.taskInfoList"
+                  :key="'taskBy-option'+item.id"
+                  :label="item.name"
+                  :value="item.id"
+                  :disabled="item.isScheduleLocked === 1"
+                >
+                  <div class="task-option">
+                    <div class="belong-task">
+                      <div class="task-id">{{ item.taskId }}</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>
+              </el-option-group>
+            </template>
+            <!-- 需求名称搜索 -->
             <span id="load-more" class="load-more">
-              <template v-if="loading">正在加载更多...</template>
-              <template v-if="!loading">没有更多了</template>
+              <template v-if="loadMore">正在加载更多...</template>
+              <template v-if="!loadMore">没有更多了</template>
             </span>
           </el-select>
         </el-form-item>
@@ -119,10 +150,9 @@ const _ = require('lodash')
 import searchPeople from '@/components/select/searchPeople'
 import normalDialog from '@/components/dialog/normalDialog'
 import selDatePicker from '@/components/picker/SelDatePicker'
-import { taskList, configShowTaskEnum, taskGet } from '@/api/taskIndex'
+import { taskList, configShowTaskEnum, taskGet, listRequireAndTask } from '@/api/taskIndex'
 import { getSeprateDayInfo, scheduleCreate, scheduleGet, scheduleUpdate, scheduleDelete } from '@/api/projectViewDetails'
 import danger from '@/assets/感叹@2x.png'
-import '@/styles/PublicStyle/index.scss'
 export default {
   components: {
     searchPeople,
@@ -197,8 +227,10 @@ export default {
       },
       taskTotal: 0, // 任务总数
       tasksOptions: [], // 任务下拉选项
+      tasksByOptions: [], // 需求下任务下拉选项
       tasksDetailList: [], // 已有任务项目
-      loading: true, // 正在加载状态
+      loadMore: true, // 加载更多
+      loading: false, // 正在加载
       peopleObjectList: [], // 参与人
       observer: null, // 滚动的观察类
       nowQuery: null // 当前的筛选项
@@ -232,7 +264,7 @@ export default {
       },
       immediate: true
     },
-    title(newV, oldV) {
+    title(newV) { // 弹框标题
       this.title = newV
     },
     isDelete: {
@@ -241,6 +273,9 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    selectBy(newV) { // 任务选择类型变化时
+      this.nowQuery = ''
     }
   },
   created() {
@@ -262,9 +297,10 @@ export default {
       this.$nextTick(() => {
         this.observer = new IntersectionObserver(entries => {
           entries.forEach(item => {
-            if (item.isIntersecting) {
+            if (item.isIntersecting && !this.loading) {
               this.selectPages.curIndex++
               if (this.selectBy === 'task') this.searchByTask(this.nowQuery)
+              if (this.selectBy === 'requirement') this.listRequireAndTask(this.nowQuery)
             }
           })
         }, {
@@ -303,7 +339,7 @@ export default {
       }
       this.form = {
         id: obj.id,
-        bizId: localStorage.getItem('bizId'),
+        bizId: obj.bizId,
         type: obj.type,
         peopleList: obj.peopleList || [],
         taskList: obj.taskObjectList.map(item => item.id),
@@ -332,19 +368,22 @@ export default {
       this.remoteMethod(...arguments)
     }, 500),
     async remoteMethod(query) { // 远程搜索任务
+      console.log(this.nowQuery, query)
       query = query.replace(/^\s+|\s+$/g, '')
       if (query === '') return// 值为空字符串，返回
       if (this.nowQuery === query) return // 值没发生变化，返回
       // 初始化
       this.nowQuery = query
-      this.loading = true
+      this.loadMore = true
       this.selectPages.curIndex = 1
-      this.tasksOptions = []
       this.taskTotal = 0
+      this.tasksOptions = []
+      this.tasksByOptions = []
       if (this.selectBy === 'task') this.searchByTask(query)
+      if (this.selectBy === 'requirement') this.listRequireAndTask(query)
     },
     async searchByTask(query) { // 根据任务去搜索
-      if (!this.loading) return
+      if (!this.loadMore || this.loading) return
       const res = await taskList({
         bizId: this.form.bizId,
         name: query,
@@ -353,10 +392,23 @@ export default {
       if (res.code === 200) {
         this.taskTotal = res.total
         this.tasksOptions = this.tasksOptions.concat(res.data)
-        if (this.taskTotal <= this.tasksOptions.length) this.loading = false// 全部数据已加载完成
-      } else {
-        this.loading = false
+        if (this.taskTotal <= this.tasksOptions.length) this.loadMore = false// 全部数据已加载完成
+      }
+      this.loading = false
+    },
+    async listRequireAndTask(query) { // 需求下的任务搜索
+      if (!this.loadMore || this.loading) return
+      const res = await listRequireAndTask({
+        bizId: this.form.bizId,
+        name: query,
+        ...this.selectPages
+      })
+      if (res.code === 200) {
+        this.taskTotal = res.total
+        this.tasksByOptions = this.tasksByOptions.concat(res.data)
+        if (this.taskTotal <= this.tasksByOptions.length) this.loadMore = false// 全部数据已加载完成
       }
+      this.loading = false
     },
     innerList(val, list) { // 判断是否在任务列表中
       const res = list.find(item => item.id === val.id)
@@ -369,7 +421,9 @@ export default {
         this.selectTask = null
         return false
       }
-      const res = this.tasksOptions.find(item => item.id === id)
+      let res
+      if (this.selectBy === 'task') res = this.tasksOptions.find(item => item.id === id)
+      if (this.selectBy === 'requirement') res = this.tasksByOptions.find(item => item.id === id)
       this.tasksDetailList.push(res)
       this.form.taskList.push(res.id)
       this.selectTask = null
@@ -473,6 +527,11 @@ article {
   justify-content: center;
   align-items: center;
 }
+.task-option {  // 布局
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .belong-task {
   max-width: 500px;
   display: flex;