完善需求详情页的甘特图

src/api/version.js

@@ -25,3 +25,11 @@ export function showVersionEnum(data) {
     data
   })
 }
+
+export function listByVersionTypeWithTime(data) {
+  return request({
+    url: requestIp + '/VersionSchedule/listByVersionTypeWithTime',
+    method: 'post',
+    data
+  })
+}

src/utils/dateUtil.js

@@ -25,6 +25,23 @@ export function dateFmt(fmt, date) {
   return fmt
 }
 
+export function dateAddDays(dataStr, dayCount) {
+  var strdate = dataStr // 日期字符串
+  var isdate = new Date(strdate) // 把日期字符串转换成日期格式
+  isdate = new Date((isdate / 1000 + 86400 * dayCount) * 1000) // 日期加1天
+  var pdate = this.dateFmt('yyyy-MM-dd', isdate) // 把日期格式转换成字符串
+  return pdate
+}
+export function dateMinusDays(dataStr, dayCount) {
+  var strdate = dataStr // 日期字符串
+  var isdate = new Date(strdate) // 把日期字符串转换成日期格式
+  isdate = new Date((isdate / 1000 - 86400 * dayCount) * 1000) // 日期加1天
+  var pdate = this.dateFmt('yyyy-MM-dd', isdate) // 把日期格式转换成字符串
+  return pdate
+}
+
 export default {
-  dateFmt
+  dateFmt,
+  dateAddDays,
+  dateMinusDays
 }

src/views/gantta/gantta.vue

@@ -25,6 +25,7 @@
       :key="index"
       :prop="header.version"
       :label="header.version"
+      :render-header="renderheader"
     >
       <el-table-column :prop="header.date" :label="header.date">
         <el-table-column :prop="header.date" :label="header.day" width="130">
@@ -35,7 +36,7 @@
               trigger="hover"
             >
               <div>{{ getContent(header.date,scope.row.schedules) ? getContent(header.date,scope.row.schedules).taskName : '' }}</div>
-              <div>事件 : {{ getContent(header.date,scope.row.schedules) ? getContent(header.date,scope.row.schedules).event : '' }}</div>
+              <div v-if="getContent(header.date,scope.row.schedules)?getContent(header.date,scope.row.schedules).event:false">事件 : {{ getContent(header.date,scope.row.schedules).event }}</div>
               <div>排期 : {{ getContent(header.date,scope.row.schedules) ? getContent(header.date,scope.row.schedules).schedule : '' }}</div>
               <div>参与人员 : {{ getContent(header.date,scope.row.schedules) ? getContent(header.date,scope.row.schedules).owners.join('、') : '' }}</div>
               <div class="href-location">
@@ -48,7 +49,8 @@
                 class="block"
                 @click="show(scope)"
               >
-                <span> {{ getContent(header.date,scope.row.schedules).taskName + ' : &nbsp;' + getContent(header.date,scope.row.schedules).event + '&nbsp;&nbsp;&nbsp;' }}</span>
+                <span> {{ getContent(header.date,scope.row.schedules).taskName + ' : &nbsp;' }}</span>
+                <span v-if="getContent(header.date,scope.row.schedules)?getContent(header.date,scope.row.schedules).event:false">{{ getContent(header.date,scope.row.schedules).event + '&nbsp;&nbsp;&nbsp;' }}</span>
                 <span v-if="stringType === '任务'">{{ getContent(header.date,scope.row.schedules).owners.join('、') }}</span>
                 <!-- <span
                   v-for="(owner,ownerIndex) in getContent(header.date,scope.row.schedules) ? getContent(header.date,scope.row.schedules).owners : []"
@@ -257,6 +259,15 @@ export default {
     this.headers = this.createheaders()
   },
   methods: {
+    renderheader(h, { column, $index }) {
+      const arr = []
+      const labelArr = column.label.split('\n')
+      for (const i in labelArr) {
+        const item = h('div', {}, labelArr[i])
+        arr.push(item)
+      }
+      return h('span', {}, arr)
+    },
     createheaders() {
       let minDate
       let maxDate

src/views/projectManage/requirement/details/index.vue

@@ -178,6 +178,7 @@
           <template v-slot="scope">{{ getQaOrRdNameList(scope.row.qaList) }}</template>
         </el-table-column>
       </el-table>
+      <gantt v-else :versions="ganttVersions" :table-data="ganttTableData" :string-type="'任务'" />
       <div style="margin:0 2%;padding: 2% 0;border-bottom: 1px solid #D8D8D8;font-size: 14px;color: #333333">排期汇总：{{ getScheduleCollect() }}</div>
       <el-row style="margin: 2%;font-size: 14px;color: #333333">
         <el-col :span="8">
@@ -240,13 +241,17 @@ import {
   getCommentList,
   addComment
 } from '@/api/requirement.js'
+import { listByVersionTypeWithTime } from '@/api/version.js'
 import RequirementChart from '@/components/chart/index.vue'
 import RequirementUpdate from '@/views/projectManage/requirement/list/create.vue'
+import Gantt from '@/views/gantta/gantta'
+import dateUtil from '@/utils/dateUtil.js'
 
 export default {
   components: {
     RequirementChart,
-    RequirementUpdate
+    RequirementUpdate,
+    Gantt
   },
   props: {
     id: {
@@ -256,6 +261,8 @@ export default {
   },
   data() {
     return {
+      ganttVersions: {},
+      ganttTableData: null,
       loading: {
         table: true,
         info: true,
@@ -432,12 +439,11 @@ export default {
     })
     this.getTaskStatusMapInfo()
     this.getBugStatusMapInfo()
-    this.getTaskByRequireId()
     this.getCommentList()
   },
   methods: {
     getScheduleCollect() {
-      if (this.task.reqStartTime && this.task.reqEndTime) {
+      if (this.task && this.task.reqStartTime && this.task.reqEndTime) {
         return this.task.reqStartTime.substring(0, 10).replace(/-/, '年').replace(/-/, '月') + '日' + ' ~ ' + this.task.reqEndTime.substring(0, 10).replace(/-/, '年').replace(/-/, '月') + '日'
       }
       return ''
@@ -476,11 +482,12 @@ export default {
     },
     getRequirementById() {
       this.loading.info = true
-      getRequirementById({
+      return getRequirementById({
         id: this.id
       }).then(res => {
         this.requirement = res.data
         this.loading.info = false
+        this.getTaskByRequireId()
       })
     },
     getTaskStatusMapInfo() {
@@ -521,11 +528,91 @@ export default {
       getTaskByRequireId({
         id: this.id
       }).then(res => {
-        this.task = res.data
-        this.tableData = res.data.taskDetails
-        this.loading.table = false
+        if (res.code === 200) {
+          if (res.data) {
+            this.task = res.data
+            this.tableData = res.data.taskDetails
+            if (res.data.reqStartTime && res.data.reqEndTime) {
+              for (const i in this.requirement.referredClientType) {
+                this.listByVersionTypeWithTime({
+                  type: this.requirement.referredClientType[i],
+                  startTime: this.tableData.reqStartTime,
+                  endTime: this.tableData.reqEndTime
+                })
+              }
+            }
+            this.ganttTableData = this.parseGanttTableData(this.tableData)
+          }
+          this.loading.table = false
+        } else {
+          this.$message.warning(res.msg)
+        }
       })
     },
+    listByVersionTypeWithTime(data) {
+      listByVersionTypeWithTime(data)
+        .then(res => {
+          if (res.data) {
+            for (const i in res.data) {
+              const startStr = res.data[i].startTime.substring(0, 10)
+              const endStr = res.data[i].endTime.substring(0, 10)
+              const startDate = new Date(startStr)
+              const endDate = new Date(endStr)
+              const length = (endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000)
+              for (let j = 0; j <= length; j++) {
+                const dateStr = dateUtil.dateAddDays(startStr, j)
+                const name = this.appClientOb[data.type] + res.data[i].version + res.data[i].name
+                if (typeof this.ganttVersions[dateStr] === 'undefined') {
+                  this.ganttVersions[dateStr] = name
+                } else if (this.ganttVersions[dateStr].indexOf(name) < 0) {
+                  this.ganttVersions[dateStr] = this.ganttVersions[dateStr] + '\n' + name
+                }
+              }
+            }
+          }
+        })
+    },
+    parseGanttTableData(data) {
+      const arr = []
+      for (const i in data) {
+        if (!(data[i].beginTime && data[i].endTime)) {
+          continue
+        }
+        const task = {
+          task: {
+            description: data[i].name
+          },
+          schedules: []
+        }
+        const schedule = {
+          taskId: null,
+          taskName: null,
+          event: null,
+          schedule: null,
+          startDate: null,
+          length: null,
+          owners: []
+        }
+        schedule.taskId = data[i].id
+        schedule.taskName = data[i].name
+        const startStr = data[i].beginTime.substring(0, 10)
+        const endStr = data[i].endTime.substring(0, 10)
+        const startDate = new Date(data[i].beginTime.substring(0, 10))
+        const endDate = new Date(data[i].endTime.substring(0, 10))
+        schedule.startDate = startStr
+        schedule.schedule = startStr.replace(/-/g, '.') + ' - ' + endStr.replace(/-/g, '.')
+        schedule.length = (endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000) + 1
+        for (const j in data[i].rdList) {
+          schedule.owners.push(data[i].rdList[j].name)
+        }
+        for (const j in data[i].qaList) {
+          schedule.owners.push(data[i].qaList[j].name)
+        }
+        task.schedules.push(schedule)
+        arr.push(task)
+      }
+      return arr
+    },
     getPmName() {
       const names = []
       for (const i in this.requirement.pm) {