排期样式

src/api/projectViewDetails.js

@@ -18,3 +18,11 @@ export function getHolidayDayInfo(data) {
     data
   })
 }
+// 创建排期
+export function scheduleCreate(data) {
+  return request({
+    url: TeamManagement + `/schedule/create`,
+    method: 'post',
+    data
+  })
+}

src/components/picker/SelDatePicker.vue

@@ -123,6 +123,11 @@ export default {
 }
 </script>
 <style lang="scss">
+.ant-calendar-picker-input {
+  input {
+    cursor: pointer;
+  }
+}
 .ant-calendar-time-picker-btn {
   display: none !important;
 }

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

@@ -7,50 +7,58 @@
             <el-option v-for="item in taskScheduleEvent" :key="item.code" :label="item.msg" :value="item.code" />
           </el-select>
         </el-form-item>
-        <el-form-item label="参与人员" prop="peoples">
-          <search-people :value.sync="form.peoples" :multiple="true" @change="changePeoples" />
+        <el-form-item label="参与人员" prop="peopleList">
+          <search-people :value.sync="form.peopleList" :multiple="true" style="width: 100%" :size="'medium'" />
         </el-form-item>
-        <el-form-item label="排期" prop="date_start">
-          <div v-show="form.date_start.length > 0 ">{{ form.schedule }}</div>
-          <div v-show="form.date_start.length <= 0 " class="empty-schedule">添加排期</div>
+        <el-form-item label="排期" prop="dayList">
+          <div v-show="form.dayList.length > 0 ">{{ schedule }}</div>
+          <div v-show="form.dayList.length <= 0 " class="empty-schedule">添加排期</div>
           <div class="picker-hidden">
-            <sel-date-picker :start-end.sync="form.date_start" @getDetailDay="getDetailDay" />
+            <sel-date-picker :start-end.sync="form.dayList" @getDetailDay="getDetailDay" />
           </div>
         </el-form-item>
         <el-form-item label="问题描述">
           <el-input v-model="form.desc" autocomplete="off" placeholder="请输入问题描述内容..." />
         </el-form-item>
-        <el-form-item label="关联任务">
+        <el-form-item label="关联任务" prop="taskList">
           <el-select
             v-model="form.taskList"
-            multiple
             filterable
             remote
             reserve-keyword
             placeholder="请输入关键词"
             :remote-method="remoteMethod"
             :loading="loading"
+            style="width: 100%"
+            @change="tasksChange"
           >
             <el-option
               v-for="item in tasksOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             />
           </el-select>
         </el-form-item>
       </el-form>
+      <div class="task-list-show">
+        <div v-for="item in tasksDetailList" :key="'task'+item.id" class="task-list-item">
+          <div class="item-id">{{ item.taskIdSting }}</div>
+          <div class="item-name">{{ item.name }}</div>
+          <div class="item-qa">测试负责人：{{ item.qaObject !== null?item.qaObject.name: '' }}</div>
+          <div class="item-rd">开发负责人：{{ item.rdObject !== null?item.rdObject.name: '' }}</div>
+        </div>
+      </div>
     </article>
   </normal-dialog>
 </template>
 <script>
+const _ = require('lodash')
 import searchPeople from '@/components/select/searchPeople'
 import normalDialog from '@/components/dialog/normalDialog'
 import selDatePicker from '@/components/picker/SelDatePicker'
-import {
-  configShowTaskEnum
-} from '@/api/taskIndex'
-import { getSeprateDayInfo } from '@/api/projectViewDetails'
+import { taskList, configShowTaskEnum } from '@/api/taskIndex'
+import { getSeprateDayInfo, scheduleCreate } from '@/api/projectViewDetails'
 export default {
   components: {
     searchPeople,
@@ -73,20 +81,24 @@ export default {
     return {
       form_rules: {
         type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
-        peoples: [{ required: true, message: '参与人员不能为空', trigger: 'blur' }],
-        date_start: [{ required: true, message: '排期不能为空', trigger: 'blur' }]
+        peopleList: [{ required: true, message: '参与人员不能为空', trigger: 'blur' }],
+        dayList: [{ required: true, message: '排期不能为空', trigger: 'blur' }],
+        taskList: [{ required: true, message: '关联任务不能为空', trigger: 'blur' }]
       },
       show: this.visible,
       taskScheduleEvent: [],
       form: {
-        name: '',
+        bizId: localStorage.getItem('bizId'),
         type: '',
-        peoples: ['wzqwangziqian_v', 'qinzhipeng_v'],
+        peopleList: ['wzqwangziqian_v', 'qinzhipeng_v'],
+        taskList: [],
         desc: '',
-        date_start: [],
-        schedule: ''
+        dayList: [] // 日期列表
       },
-      tasksOptions: [],
+      detailDayList: [], // 详细的日期
+      schedule: '',
+      tasksOptions: [], // 任务下拉选项
+      tasksDetailList: [], // 已有任务项目
       loading: false
     }
   },
@@ -100,6 +112,7 @@ export default {
   },
   created() {
     this.getType()
+    this.remoteMethod('')
   },
   methods: {
     async getType() {
@@ -108,25 +121,50 @@ export default {
         this.taskScheduleEvent = resEnum.data.taskScheduleEvent
       }
     },
-    async remoteMethod() { // 远程搜索任务
-
+    async remoteMethod(query) { // 远程搜索任务
+      this.loading = true
+      const res = await taskList({
+        bizId: Number(localStorage.getItem('bizId')),
+        name: query
+      })
+      if (res.code === 200) {
+        this.loading = false
+        this.tasksOptions = res.data
+      } else {
+        this.loading = false
+      }
     },
-    changePeoples(e) {
-      console.log('e', e)
-      console.log('this.form.peoples', this.form.peoples)
+    tasksChange(id) { // 任务列表变动
+      const isEx = this.tasksDetailList.find(item => item.id === id)
+      if (isEx) {
+        return false
+      }
+      const res = this.tasksOptions.find(item => {
+        return item.id === id
+      })
+      this.tasksDetailList.push(res)
+      console.log(this.tasksDetailList)
     },
     getDetailDay(e) { // 获取详细排期日期
-      console.log('e', e)
-      console.log('this.form.date_start', this.form.date_start)
+      this.detailDayList = e
       this.getSeprateDayInfo(e)
     },
     async getSeprateDayInfo(dataArr) { // 获取选中时间中的工作日时间
       const res = await getSeprateDayInfo(dataArr)
       if (res.code === 200) {
-        this.form.schedule = res.data.seperateDaysNoHoliday
+        this.schedule = res.data.seperateDaysNoHoliday
+      }
+    },
+    async scheduleCreate() {
+      const res = await scheduleCreate(this.form)
+      if (res.code === 200) {
+        console.log(res.data)
       }
     },
     confirmForm() {
+      const params = _.cloneDeep(this.form)
+      params.dayList = this.detailDayList
+      console.log('params:', params)
       this.cancel()
     },
     cancel() {
@@ -138,7 +176,7 @@ export default {
 </script>
 <style scoped lang="scss">
 /deep/.el-form {
-  padding: 0 60px;
+  padding: 0 156px 0 60px;
 }
 .picker-hidden {
   opacity: 0;
@@ -146,7 +184,26 @@ export default {
   top: 0;
 }
 .empty-schedule {
-  cursor: pointer;
   color:rgba(51,51,51,0.45);
 }
+.task-list-show {
+  width: 100%;
+  padding: 0 60px;
+  .task-list-item {
+    width: 100%;
+    display: flex;
+    .item-id {
+      width: 20%;
+    }
+    .item-name {
+      width: 40%;
+    }
+    .item-qa {
+      width: 20%;
+    }
+    .item-rd {
+      width: 20%;
+    }
+  }
+}
 </style>