|
|
@@ -4,9 +4,9 @@
|
|
|
<div>
|
|
|
<div style="display: inline-block">团队</div>
|
|
|
<el-select
|
|
|
- v-model="searchForm.team"
|
|
|
+ v-model="searchForm.teamId"
|
|
|
style="margin-left: 20px"
|
|
|
- @change="query()"
|
|
|
+ @change="queryTeamWorkList()"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in searchEnum.teams"
|
|
|
@@ -17,9 +17,9 @@
|
|
|
</el-select>
|
|
|
<div style="display: inline-block;margin-left: 20px">业务线</div>
|
|
|
<el-select
|
|
|
- v-model="searchForm.businessline"
|
|
|
+ v-model="searchForm.bizId"
|
|
|
style="margin-left: 20px"
|
|
|
- @change="query()"
|
|
|
+ @change="queryTeamWorkList()"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in searchEnum.businesslines"
|
|
|
@@ -41,28 +41,40 @@
|
|
|
<div class="module_title__sign" />
|
|
|
<div class="module_title__caption">团队日程</div>
|
|
|
</div>
|
|
|
- <el-row>
|
|
|
+ <el-row style="margin-bottom: 20px" class="gantt-view-header">
|
|
|
<el-col :span="12">
|
|
|
- <el-radio-group v-model="radio1" size="small">
|
|
|
+ <el-radio-group v-model="radio1" size="small" @change="radioChange">
|
|
|
<el-radio-button label="忙碌" />
|
|
|
<el-radio-button label="空闲" />
|
|
|
</el-radio-group>
|
|
|
+ <div v-if="radio1 === '空闲'" style="display: inline-block">
|
|
|
+ <div style="display: inline-block;margin-left: 20px">选择时间：</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeSelectVal"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :clearable="false"
|
|
|
+ @change="queryTeamIdleList()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" style="text-align: right">
|
|
|
- <el-radio-group v-model="radio2" size="small">
|
|
|
- <el-radio-button label="今天" />
|
|
|
- </el-radio-group>
|
|
|
- <el-radio-group v-model="radio3" size="small" style="margin-left: 20px">
|
|
|
+ <el-col v-if="radio1 === '空闲'" :span="12" style="text-align: right">
|
|
|
+ <div style="display: inline-block" @click="radio2 = ''">
|
|
|
+ <el-radio-group v-model="radio2" size="small" @change="radioChange">
|
|
|
+ <el-radio-button label="今天" />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-radio-group v-model="radio3" size="small" style="margin-left: 20px" @change="radioChange">
|
|
|
<el-radio-button label="日" />
|
|
|
<el-radio-button label="周" />
|
|
|
<el-radio-button label="月" />
|
|
|
</el-radio-group>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <gantt-elastic :tasks="tasks" :options="options">
|
|
|
- <gantt-elastic-header slot="header" />
|
|
|
- <gantt-elastic-footer slot="footer" />
|
|
|
- </gantt-elastic>
|
|
|
+ <gantt-elastic :tasks="tasks" :options="options" />
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
@@ -71,20 +83,30 @@
|
|
|
import workbenchApi from '@/api/workbench.js'
|
|
|
import { queryBizTypeList } from '@/api/defectManage'
|
|
|
import GanttElastic from 'gantt-elastic'
|
|
|
-import Header from 'gantt-elastic-header'
|
|
|
+// import Header from 'gantt-elastic-header'
|
|
|
+import dayjs from 'dayjs'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- ganttElasticHeader: Header, // or Header
|
|
|
- ganttElastic: GanttElastic,
|
|
|
- ganttElasticFooter: { template: `<span>your footer</span>` }
|
|
|
+ ganttElastic: GanttElastic
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ timeSelectVal: [new Date(), dayjs(new Date()).add(29, 'day')],
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
|
|
|
+ }
|
|
|
+ },
|
|
|
tasks: [], // 甘特图任务
|
|
|
options: {
|
|
|
+ locale: {
|
|
|
+ name: 'zh_cn',
|
|
|
+ weekdays: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
+ months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
|
|
+ },
|
|
|
maxRows: 100,
|
|
|
- maxHeight: 300,
|
|
|
+ maxHeight: 460,
|
|
|
title: {
|
|
|
label: 'Your project title as html (link or whatever...)',
|
|
|
html: false
|
|
|
@@ -94,7 +116,7 @@ export default {
|
|
|
},
|
|
|
calendar: {
|
|
|
hour: {
|
|
|
- display: false
|
|
|
+ display: true
|
|
|
}
|
|
|
},
|
|
|
chart: {
|
|
|
@@ -112,47 +134,69 @@ export default {
|
|
|
columns: [
|
|
|
{
|
|
|
id: 1,
|
|
|
- label: 'ID',
|
|
|
- value: 'id',
|
|
|
- width: 40
|
|
|
+ label: '团队成员',
|
|
|
+ value: 'user',
|
|
|
+ width: 80,
|
|
|
+ style: {
|
|
|
+ 'task-list-header-label': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ 'task-list-item-value-container': {
|
|
|
+ 'font-weight': '500'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- label: 'Description',
|
|
|
+ label: '任务名称',
|
|
|
value: 'label',
|
|
|
- width: 200,
|
|
|
+ width: 180,
|
|
|
expander: true,
|
|
|
- html: true,
|
|
|
- events: {
|
|
|
- click({ data, column }) {
|
|
|
- alert('description clicked!\n' + data.label)
|
|
|
+ style: {
|
|
|
+ 'task-list-header-label': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
- label: 'Assigned to',
|
|
|
- value: 'user',
|
|
|
- width: 130,
|
|
|
- html: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- label: 'Start',
|
|
|
+ label: '开始时间',
|
|
|
value: task => dayjs(task.start).format('YYYY-MM-DD'),
|
|
|
- width: 78
|
|
|
+ width: 90,
|
|
|
+ style: {
|
|
|
+ 'task-list-header-label': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ 'task-list-item-value-container': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
- label: 'Type',
|
|
|
- value: 'type',
|
|
|
- width: 68
|
|
|
+ label: '结束时间',
|
|
|
+ value: task => dayjs(task.start + task.duration).format('YYYY-MM-DD'),
|
|
|
+ width: 90,
|
|
|
+ style: {
|
|
|
+ 'task-list-header-label': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ },
|
|
|
+ 'task-list-item-value-container': {
|
|
|
+ 'text-align': 'center',
|
|
|
+ width: '100%'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
id: 5,
|
|
|
- label: '%',
|
|
|
- value: 'progress',
|
|
|
- width: 35,
|
|
|
+ label: '使用/工作日/全部',
|
|
|
+ value: 'needLegalAllDays',
|
|
|
+ width: 130,
|
|
|
style: {
|
|
|
'task-list-header-label': {
|
|
|
'text-align': 'center',
|
|
|
@@ -167,27 +211,46 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
}, // 甘特图配置
|
|
|
+ ganttHeaderStyle: {
|
|
|
+ },
|
|
|
radio1: '忙碌',
|
|
|
radio2: '今天',
|
|
|
+ radio2TF: true,
|
|
|
radio3: '日',
|
|
|
searchForm: {
|
|
|
- team: 0,
|
|
|
- businessline: 0
|
|
|
+ teamId: null,
|
|
|
+ bizId: null
|
|
|
+ },
|
|
|
+ idleSearchForm: {
|
|
|
+ startTime: null,
|
|
|
+ endTime: null
|
|
|
},
|
|
|
searchEnum: {
|
|
|
teams: [],
|
|
|
businesslines: []
|
|
|
},
|
|
|
- username: localStorage.getItem('username')
|
|
|
+ username: localStorage.getItem('username'),
|
|
|
+ teamWorkList: []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.queryTeamInfoList(this.username)
|
|
|
this.queryBizTypeList()
|
|
|
+ this.queryTeamWorkList()
|
|
|
},
|
|
|
methods: {
|
|
|
- query() {
|
|
|
-
|
|
|
+ radioChange(val) {
|
|
|
+ if (val === '忙碌') {
|
|
|
+ this.queryTeamWorkList()
|
|
|
+ } else {
|
|
|
+ this.queryTeamIdleList()
|
|
|
+ }
|
|
|
+ if (val === '今天') {
|
|
|
+ if (this.radio2TF) {
|
|
|
+ this.radio2 = ''
|
|
|
+ }
|
|
|
+ this.radio2TF = !this.radio2TF
|
|
|
+ }
|
|
|
},
|
|
|
queryTeamInfoList(username) {
|
|
|
const data = { memberIDAP: username, curIndex: 1, pageSize: 9999 }
|
|
|
@@ -195,7 +258,7 @@ export default {
|
|
|
if (res.data) {
|
|
|
this.searchEnum.teams = res.data.list
|
|
|
this.searchEnum.teams.unshift({
|
|
|
- teamId: 0,
|
|
|
+ teamId: null,
|
|
|
teamName: '全部'
|
|
|
})
|
|
|
}
|
|
|
@@ -206,18 +269,96 @@ export default {
|
|
|
if (res.data) {
|
|
|
this.searchEnum.businesslines = res.data.list
|
|
|
this.searchEnum.businesslines.unshift({
|
|
|
- id: 0,
|
|
|
+ id: null,
|
|
|
bizName: '全部'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ queryTeamWorkList() {
|
|
|
+ workbenchApi.queryTeamWorkList(this.searchForm)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.createTasks(res, '忙碌')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryTeamIdleList() {
|
|
|
+ this.idleSearchForm.startTime = dayjs(this.timeSelectVal[0]).format('YYYY.MM.DD')
|
|
|
+ this.idleSearchForm.endTime = dayjs(this.timeSelectVal[1]).format('YYYY.MM.DD')
|
|
|
+ workbenchApi.queryTeamIdleList({
|
|
|
+ timeInfo: this.idleSearchForm,
|
|
|
+ teamWorkQueryInfo: this.searchForm
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.createTasks(res, '空闲')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createTasks(res, mode) {
|
|
|
+ this.tasks = []
|
|
|
+ let count = 0
|
|
|
+ for (const i in res.data) {
|
|
|
+ let label = ''
|
|
|
+ if (mode === '忙碌') {
|
|
|
+ label = res.data[i].workNum.taskWorkNum + '个任务、' + res.data[i].workNum.selfWorkNum + '个日程'
|
|
|
+ } else {
|
|
|
+ label = res.data[i].workNum.taskWorkNum + '个空闲时段'
|
|
|
+ }
|
|
|
+ const parentItem = {
|
|
|
+ id: count++,
|
|
|
+ label: label,
|
|
|
+ user: res.data[i].userInfo.ldapName,
|
|
|
+ collapsed: true,
|
|
|
+ needLegalAllDays: res.data[i].workNum.needDays + '/' + res.data[i].workNum.legalDays + '/' + res.data[i].workNum.allDays,
|
|
|
+ start: dayjs(res.data[i].workNum.startTime).toDate().getTime(),
|
|
|
+ duration: dayjs(res.data[i].workNum.endTime).toDate().getTime() - dayjs(res.data[i].workNum.startTime).toDate().getTime(),
|
|
|
+ type: 'task'
|
|
|
+ }
|
|
|
+ this.tasks.push(parentItem)
|
|
|
+ for (const j in res.data[i].workData) {
|
|
|
+ const item = {
|
|
|
+ id: count++,
|
|
|
+ parentId: parentItem.id,
|
|
|
+ label: res.data[i].workData[j].name,
|
|
|
+ user: parentItem.user,
|
|
|
+ needLegalAllDays: res.data[i].workData[j].needDays + '/' + res.data[i].workData[j].legalDays + '/' + res.data[i].workData[j].allDays,
|
|
|
+ start: dayjs(res.data[i].workData[j].startTime).toDate().getTime(),
|
|
|
+ duration: dayjs(res.data[i].workData[j].endTime).toDate().getTime() - dayjs(res.data[i].workData[j].startTime).toDate().getTime(),
|
|
|
+ type: 'task'
|
|
|
+ }
|
|
|
+ this.tasks.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+<style>
|
|
|
+/* .gantt-elastic__task-list-header-label {
|
|
|
+ font-size: 16px !important;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.gantt-elastic__task-list-item-value {
|
|
|
+ font-size: 14px!important;
|
|
|
+} */
|
|
|
+.gantt-view-header .el-date-editor {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ height: 35px;
|
|
|
+ width: 240px;
|
|
|
+}
|
|
|
+.gantt-view-header .el-date-editor input {
|
|
|
+ height: 32px;
|
|
|
+ width: 90px;
|
|
|
+}
|
|
|
+.gantt-view-header .el-date-editor .el-range__close-icon {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
// 布局
|
|
|
<style scoped>
|
|
|
.workbench_team {
|
reedliuqing_i