需求页面甘特图

src/views/projectManage/requirement/components/ganntViews.vue

@@ -0,0 +1,86 @@
+<template>
+  <gantt-elastic
+    v-if="visible"
+    ref="ganttElastic"
+    :tasks="tasks"
+    :options="options"
+  >
+    <gantt-elastic-header v-show="false" slot="header" ref="ganttHeader" />
+  </gantt-elastic>
+</template>
+
+<script>
+import { listByRequire } from '@/api/requirement.js'
+import GanttElastic from 'gantt-elastic'
+import GanttHeader from 'gantt-elastic-header'
+import moment from 'moment'
+import requireOptions from '../gannttOptions/requireGannt'
+export default {
+  name: 'GanntViewsVue',
+  components: {
+    ganttElasticHeader: GanttHeader,
+    ganttElastic: GanttElastic
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      ganttShow: false,
+      tasks: [], // 甘特图任务
+      options: requireOptions
+    }
+  },
+  watch: {
+    visible: {
+      handler(newV) {
+        this.visible = newV
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.listByRequire()
+  },
+  methods: {
+    async listByRequire() { // 获取排期列表
+      const res = await listByRequire(Number(this.$route.query.id))
+      if (res.code === 200) this.handleData(res.data.taskDetailList)
+    },
+    handleData(data) {
+      this.tasks = data.map((value, key) => {
+        return this.handleItem(value, key)
+      })
+    },
+    handleItem(item, key) {
+      const colorlist = ['#A1DEFF', '#FAB5B5', '#BCED86', '#FFA87F', '#8E44AD', '#1EBC61', '#0287D0']
+      console.log(item)
+      return {
+        id: key,
+        taskName: item.name,
+        belongModules: item.moduleInfoName || '',
+        devPerson: item.rdObject.name || '',
+        testPerson: item.qaObject.name || '',
+        description: item.description || '',
+        startDate: item.optionsObject.startTime ? moment(item.optionsObject.startTime).format('YYYY-MM-DD') : '',
+        endDate: item.optionsObject.endTime ? moment(item.optionsObject.endTime).format('YYYY-MM-DD') : '',
+        needLegalAllDays: item.workNum.needDays + '/' + item.workNum.legalDays + '/' + item.workNum.allDays,
+        type: 'task',
+        style: {
+          base: {
+            fill: colorlist[key % colorlist.length]
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/projectManage/requirement/gannttOptions/requireGannt.js

@@ -0,0 +1,161 @@
+const options = {
+  locale: {
+    name: 'zh_cn',
+    weekdays: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
+    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+  },
+  maxRows: 100,
+  maxHeight: 460,
+  title: {
+    label: 'Your project title as html (link or whatever...)',
+    html: false
+  },
+  row: {
+    height: 24
+  },
+  calendar: {
+    hour: {
+      display: true
+    }
+  },
+  chart: {
+    progress: {
+      bar: false
+    },
+    expander: {
+      display: true
+    }
+  },
+  taskList: {
+    expander: {
+      straight: false
+    },
+    columns: [
+      {
+        id: 1,
+        label: '任务名称',
+        value: 'taskName',
+        width: 80,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'font-weight': '500'
+          }
+        }
+      },
+      {
+        id: 2,
+        label: '所属模块',
+        value: 'belongModules',
+        width: 80,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'font-weight': '500'
+          }
+        }
+      },
+      {
+        id: 3,
+        label: '开发负责人',
+        value: 'devPerson',
+        width: 80,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'font-weight': '500'
+          }
+        }
+      },
+      {
+        id: 4,
+        label: '测试负责人',
+        value: 'testPerson',
+        width: 80,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'font-weight': '500'
+          }
+        }
+      },
+      {
+        id: 5,
+        label: '排期类型及描述',
+        value: 'description',
+        width: 180,
+        expander: true,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'font-weight': '500'
+          }
+        }
+      },
+      {
+        id: 6,
+        label: '开始时间',
+        value: 'startDate',
+        width: 90,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'text-align': 'center',
+            width: '100%'
+          }
+        }
+      },
+      {
+        id: 7,
+        label: '结束时间',
+        value: 'endDate',
+        width: 90,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'text-align': 'center',
+            width: '100%'
+          }
+        }
+      },
+      {
+        id: 8,
+        label: '使用/工作日/全部',
+        value: 'needLegalAllDays',
+        width: 130,
+        style: {
+          'task-list-header-label': {
+            'text-align': 'center',
+            width: '100%'
+          },
+          'task-list-item-value-container': {
+            'text-align': 'center',
+            width: '100%'
+          }
+        }
+      }
+    ]
+  }
+} // 甘特图配置
+export default options

src/views/projectManage/requirement/requirementDetail.vue

@@ -176,8 +176,11 @@
           </div>
           <section class="main-section">
             <div class="allTips">
-              <div class="tips"><i class="el-icon-warning-outline" /> 每个任务仅支持一次提测和一次准出，请合理拆解后任务再排期</div><br>
-              <div class="allTips">
+              <el-radio-group v-model="listOrGannt" size="small" style="margin-left: 10px">
+                <el-radio-button label="列表" />
+                <el-radio-button label="甘特图" />
+              </el-radio-group>
+              <div v-show="listOrGannt === '列表'" class="allTips">
                 <div v-if="BackToTheLatest" class="Scheduling" @click="GetRequireScheduleHistory"><i class="el-icon-refresh" /> 回到最新</div>
                 <div v-if="Latest" align="left" class="Scheduling" @click="scheduleHiHide"><div class="el-icon-document" /> 排期变更记录</div>
                 <download :id="requirementId" :name="'需求'" />
@@ -185,7 +188,7 @@
             </div>
           </section>
 
-          <el-container>
+          <el-container v-show="listOrGannt === '列表'" class="allTips">
             <el-main style="padding: 0;">
               <!-- <schedule-list :id="requirementId" ref="ScheduleEvent" :showunlock="showunlock" :type-list="taskScheduleEvent" :required-list="taskScheduleList" class-name="white" :all="true" :no-move="false" /> -->
               <demand :id="requirementId" ref="ScheduleEvent" :showunlock="showunlock" :type-list="taskScheduleEvent" :required-list="taskScheduleList" />
@@ -207,6 +210,7 @@
               <div v-if="SchedulingContent.length === 0" style="width: 270px; margin: 50% 20px; text-align: center;"> 暂无排期变更记录!</div>
             </el-aside>
           </el-container>
+          <gannt-views :id="requirementId" :visible="listOrGannt === '甘特图'" />
         </section>
         <section class="main-section">
           <div class="el-main-title">
@@ -349,6 +353,7 @@ import demand from '@/views/projectManage/components/demand.vue'
 import '@/styles/PublicStyle/index.scss'
 import record from '@/views/projectManage/components/record.vue'
 import timeLine from '@/views/projectManage/components/timeLine.vue'
+import ganntViews from './components/ganntViews'
 export default {
   components: {
     searchPeople,
@@ -365,7 +370,8 @@ export default {
     download,
     record,
     timeLine,
-    demand
+    demand,
+    ganntViews
   },
   filters: {
     ellipsis(value, num) {
@@ -423,7 +429,8 @@ export default {
       taskScheduleList: [], // 排期数据
       lockHide: false, // 隐藏排期变更记录
       isScheduleLocked: '', // 锁定状态1锁定0未锁定
-      SchedulingContent: [] // 排期历史变更记录
+      SchedulingContent: [], // 排期历史变更记录
+      listOrGannt: '列表'
     }
   },
   computed: {

vue.config.js

@@ -33,6 +33,7 @@ module.exports = {
       warnings: false,
       errors: true
     },
+    disableHostCheck: true, // webpack4.0 开启热更新
     proxy: {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy